/* ==========================================================================
   BODYBUILDING AUTOGESTIONE — sistema visivo del sito
   --------------------------------------------------------------------------
   Palette: quella di BA_brand_colors.txt, senza aggiunte.
   Font: Dela Gothic One (titoli) e Inter (testo), come brand/visual-style.md.
   Il monospace è quello di sistema e compare SOLO dentro l'interfaccia del
   prodotto, dove rappresenta il contenuto di un foglio di calcolo.

   Regola fondativa: il giallo #FFC107 non è decorazione. Nel file significa
   "questo lo metti tu". Sul sito vale la stessa regola: giallo = input umano
   o azione dell'utente. Tutto il resto è calcolato, e quindi non è giallo.
   ========================================================================== */

/* ---- 1. TOKEN ---------------------------------------------------------- */
:root{
  color-scheme: dark;

  /* --- colori di marca, verbatim --- */
  --void:#111111;        /* nero carbone */
  --amber:#FFC107;       /* giallo */
  --white:#FFFFFF;
  --line:#2A2A2A;        /* grigio scuro */
  --paper:#EAEAEA;       /* grigio chiaro */
  --ok:#22C55E;          /* success */
  --warn:#F59E0B;        /* attention */
  --bad:#EF4444;         /* error */

  /* --- superfici e grigi derivati sullo stesso asse neutro --- */
  --panel:#191919;
  --cell:#1F1F1F;
  --raise:#262626;
  --line-2:#3A3A3A;
  --line-3:#4A4A4A;
  --muted:#9C9C9C;
  --dim:#8A8A8A;

  --amber-soft:rgba(255,193,7,.12);
  --amber-line:rgba(255,193,7,.40);
  --on-amber:#111111;

  /* --- tipografia --- */
  --display:"Dela Gothic One", "Arial Black", system-ui, sans-serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;

  --t-hero:clamp(1.7rem, 2.9vw, 2.65rem);
  --t-h2:clamp(1.35rem, 2.1vw, 1.95rem);
  --t-lead:clamp(1rem, 1.35vw, 1.0625rem);
  --t-label:.75rem;

  /* --- spazio --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --wrap:1280px;
  --gut:clamp(20px, 4vw, 48px);
  --r:3px;                    /* raggio da cella di foglio di calcolo */
}

/* ---- 2. BASE ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p{margin:0}
::selection{background:var(--amber);color:var(--on-amber)}

/* titoli: Dela Gothic One. Ha un peso solo, serve più interlinea. */
h1,h2{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  line-height:1.17;
  letter-spacing:-.005em;
  color:var(--white);
}
/* sottotitoli e titoli di scheda: Inter, che è il font di testo del brand */
h3,h4{margin:0;font-family:var(--body);font-weight:600;line-height:1.28;letter-spacing:-.011em;color:var(--paper)}

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

/* il contenuto sta SOPRA la griglia di fondo: senza questo la griglia,
   essendo in posizione assoluta, verrebbe disegnata sopra il testo statico */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:1}

/* ---- 3. ELEMENTI RICORRENTI -------------------------------------------- */

/* etichetta di sezione: Inter maiuscolo spaziato, non un terzo font */
.label{
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--dim);
  display:flex;align-items:center;gap:10px;
}
.label::before{content:"";width:18px;height:1px;background:var(--line-3);flex:none}
.label--plain::before{display:none}

.lead{color:var(--muted);font-size:var(--t-lead);line-height:1.62;max-width:62ch}

.dot{width:6px;height:6px;border-radius:50%;flex:none;display:inline-block}
.dot--ok{background:var(--ok)}
.dot--warn{background:var(--warn)}
.dot--bad{background:var(--bad)}
.dot--dim{background:var(--dim)}

/* pulsanti: il primario è giallo perché è l'azione dell'utente */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;
  font-family:var(--body);font-weight:600;font-size:.875rem;
  letter-spacing:.005em;
  border:1px solid transparent;border-radius:var(--r);
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--amber);color:var(--on-amber);border-color:var(--amber)}
.btn--primary:hover{background:#FFCF3A;border-color:#FFCF3A}
.btn--ghost{background:transparent;color:var(--paper);border-color:var(--line-3)}
.btn--ghost:hover{border-color:var(--paper);background:rgba(234,234,234,.05)}
.btn--sm{padding:9px 16px;font-size:.8125rem}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}

/* sezione */
.sec{padding-block:clamp(72px,8.5vw,120px);border-top:1px solid var(--line);position:relative}
.sec__head{display:flex;flex-direction:column;gap:var(--s4);margin-bottom:var(--s7);max-width:78ch}
.sec__head h2{font-size:var(--t-h2);max-width:20ch}
.sec__head h2.w{max-width:26ch}

/* griglia a celle di fondo, usata solo dove significa qualcosa */
.cellgrid{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.cellgrid::before{
  content:"";position:absolute;inset:-1px;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(150% 110% at 72% 8%, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%);
          mask-image:radial-gradient(150% 110% at 72% 8%, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%);
  opacity:.75;
}

/* ---- 4. BARRA SUPERIORE ------------------------------------------------ */
.top{
  position:sticky;top:0;z-index:60;
  background:rgba(17,17,17,.88);
  -webkit-backdrop-filter:blur(14px); /* Safari/iOS richiede ancora il prefisso */
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.top__in{display:flex;align-items:center;gap:var(--s6);height:66px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand__mark{width:34px;height:34px;flex:none;border-radius:50%}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--display);font-size:.8125rem;letter-spacing:.005em;color:var(--white)}
.brand__desc{font-size:.6875rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--dim);margin-top:5px}
.nav{display:flex;gap:var(--s5);align-items:center}
.nav a{
  font-size:.875rem;color:var(--muted);
  padding-block:12px;border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.nav a:hover{color:var(--paper)}
.nav a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--amber)}
@media (max-width:900px){ .nav{display:none} .top__in{height:60px;gap:var(--s4)} }
@media (max-width:480px){
  .brand__name{font-size:.8125rem}
  .brand__desc{display:none}
  .brand__mark{width:30px;height:30px}
  /* il logo e' un link di navigazione: su tocco deve restare >=44px di altezza */
  .brand{min-height:44px;padding-block:7px}
  /* il nome del brand va a capo da solo: il pulsante no, altrimenti la barra
     raddoppia di altezza e si mangia mezza schermata sui telefoni stretti */
  .top__in .btn{padding:8px 12px;font-size:.75rem;white-space:nowrap}
}
/* sotto i 360px (iPhone SE di prima generazione) il nome per esteso non ci sta
   accanto al pulsante: resta il marchio, che e' gia' riconoscibile da solo.
   Sulle sales page vale gia' sotto i 480: li' il CTA conta piu' del nome. */
@media (max-width:359px){
  .top .brand__txt{display:none}
}
@media (max-width:479px){
  .top--sales .brand__txt{display:none}
}

/* ---- 5. HERO ----------------------------------------------------------- */
.hero{position:relative;padding-top:clamp(36px,3.6vw,60px);padding-bottom:clamp(48px,5vw,84px);overflow:hidden}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:clamp(32px,4vw,60px);align-items:center}
@media (max-width:1020px){ .hero__in{grid-template-columns:minmax(0,1fr);gap:var(--s8)} }

.hero__eyebrow{
  font-size:var(--t-label);font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--dim);margin-bottom:var(--s4);
}
.hero h1{font-size:var(--t-hero);line-height:1.14;margin-bottom:var(--s5);max-width:17ch}
.hero h1 em{font-style:normal;color:var(--white)}
.hero__sub{color:var(--muted);font-size:.9375rem;line-height:1.62;max-width:50ch;margin-bottom:var(--s5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s5)}
@media (max-width:480px){ .hero__cta .btn{flex:1 1 100%;justify-content:center} }
.hero__spec{
  font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);border-top:1px solid var(--line);padding-top:var(--s4);
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
}
.hero__spec span{white-space:nowrap}
.hero__spec span:not(:last-child)::after{content:"·";margin-left:14px;color:var(--line-3)}

/* ---- 6. LO STRUMENTO (elemento signature) ------------------------------ */
.instr{position:relative;isolation:isolate}

.wb{
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  box-shadow:0 24px 70px -30px rgba(0,0,0,.95), 0 2px 0 rgba(255,255,255,.02) inset;
  overflow:hidden;
}
.wb__bar{
  display:flex;align-items:center;gap:var(--s3);
  padding:9px 12px;border-bottom:1px solid var(--line);
  background:var(--cell);
}
.wb__file{font-family:var(--mono);font-size:.6875rem;color:var(--muted);letter-spacing:.01em}
.wb__state{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.wb__fx{
  display:flex;align-items:center;gap:10px;
  padding:7px 12px;border-bottom:1px solid var(--line);background:var(--panel);
}
.wb__fx .fx{
  font-family:var(--mono);font-size:.625rem;font-style:italic;color:var(--dim);
  border:1px solid var(--line-2);border-radius:2px;padding:1px 6px;flex:none;
}
.wb__fx code{
  flex:1;min-width:0;
  font-family:var(--mono);font-size:.6875rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wb__fx code b{color:var(--paper);font-weight:500}

.wb__body{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
@media (max-width:560px){ .wb__body{grid-template-columns:minmax(0,1fr)} }
.wb__col{padding:14px 12px}
.wb__col--in{border-right:1px solid var(--line);background:rgba(0,0,0,.22)}
@media (max-width:560px){ .wb__col--in{border-right:0;border-bottom:1px solid var(--line)} }
.wb__colhead{
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:10px;
}
.wb__colhead+.wb__colhead{margin-top:20px}
.year__scale+.wb__colhead,
.bars+.wb__colhead{margin-top:18px}

/* righe di cella */
.ce{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}
.ce:last-child{border-bottom:0}
.ce__k{font-size:.6875rem;color:var(--dim);flex:1;min-width:0;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ce__v{
  font-family:var(--mono);font-size:.6875rem;color:var(--paper);
  min-width:62px;text-align:right;padding:2px 6px;border-radius:2px;
}
/* la cella gialla: è l'unico posto dell'interfaccia dove il giallo compare */
.ce__v.in{
  background:var(--amber-soft);
  border:1px solid var(--amber-line);
  color:var(--amber);
  text-align:center;min-width:76px;
}

/* anno: M1 → M8 su 52 settimane */
.year{display:flex;gap:2px;margin-bottom:8px}
.year__b{
  position:relative;height:34px;border-radius:2px;
  background:var(--raise);border:1px solid var(--line-2);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;
  font-family:var(--mono);font-size:.5625rem;color:var(--dim);
  transform-origin:left center;
}
.year__b[data-now="1"]{border-color:var(--line-3);background:#303030;color:var(--paper)}
.year__b::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:2px 2px 0 0;
  background:var(--line-3);
}
.year__b[data-now="1"]::before{background:var(--paper)}
.year__scale{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:.5rem;color:var(--dim);letter-spacing:.06em;
  border-top:1px solid var(--line);padding-top:5px;
}

/* volume: una serie sola + riferimento target, stato sempre etichettato */
.bars{display:flex;flex-direction:column;gap:7px}
.bar{display:grid;grid-template-columns:96px minmax(0,1fr) 92px;align-items:center;gap:10px}
@media (max-width:640px){ .bar{grid-template-columns:78px minmax(0,1fr) 78px;gap:7px} }
@media (max-width:520px){
  .bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k s" "t t";row-gap:6px;column-gap:10px}
  .bar__k{grid-area:k}.bar__s{grid-area:s}.bar__track{grid-area:t}
}
.bar__k{font-family:var(--mono);font-size:.5625rem;letter-spacing:.04em;color:var(--dim);
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar__track{display:block;position:relative;height:10px;background:var(--cell);border:1px solid var(--line);border-radius:2px}
.bar__fill{
  display:block;height:100%;width:0;border-radius:0 4px 4px 0;
  background:rgba(234,234,234,.72);
  transition:width .7s cubic-bezier(.22,.9,.3,1);
}
.bar__target{
  position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--paper);opacity:.9;z-index:2;
}
.bar__s{display:flex;align-items:center;gap:6px;justify-content:flex-end;
        font-family:var(--mono);font-size:.5625rem;letter-spacing:.03em;color:var(--muted);
        white-space:nowrap}

/* riga di check-in: quattro celle gialle, il risultato esce nel pannello sospeso */
.ci{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
@media (max-width:760px){ .ci{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ci__f{display:flex;flex-direction:column;gap:5px}
.ci__f>span:first-child{
  font-family:var(--mono);font-size:.5rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ci__f .ce__v.in{min-width:0;width:100%;padding:5px 4px;font-size:.625rem}

.wb__tabs{
  display:flex;gap:0;border-top:1px solid var(--line);background:var(--cell);
  overflow-x:auto;scrollbar-width:none;
}
.wb__tabs::-webkit-scrollbar{display:none}
.wb__tab{
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.04em;color:var(--dim);
  padding:8px 11px;border-right:1px solid var(--line);white-space:nowrap;
  border-top:2px solid transparent;
}
.wb__tab[data-on="1"]{color:var(--paper);background:var(--panel);border-top-color:var(--amber)}

/* il cruscotto lascia spazio in basso perché il pannello sospeso non copra l'ultima riga */
.wb__roster{padding:14px 12px 34px}
@media (max-width:680px){ .wb__roster{padding-bottom:14px} }

/* pannello sospeso */
.float{
  position:absolute;z-index:3;
  background:var(--raise);
  border:1px solid var(--line-3);
  border-radius:var(--r);
  padding:11px 13px;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.9);
  min-width:190px;
}
.float__k{
  font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-bottom:6px;display:flex;align-items:center;gap:7px;
}
.float__v{font-family:var(--body);font-weight:600;font-size:1rem;letter-spacing:-.012em;color:var(--white)}
.float__n{font-size:.6875rem;color:var(--muted);margin-top:3px}
.float--a{right:-18px;bottom:-20px}
@media (max-width:1180px){ .float--a{right:-6px;bottom:-14px} }
@media (max-width:680px){ .float{position:static;margin-top:var(--s3);min-width:0} }

/* sequenza di apparizione */
.js [data-anim] .ce__v.in{opacity:0;transform:translateY(-2px)}
.js [data-anim] .year__b{transform:scaleX(0)}
.js [data-anim] .float{opacity:0;transform:translateY(8px)}
.js [data-anim].is-on .ce__v.in{opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}
.js [data-anim].is-on .year__b{transform:none;transition:transform .5s cubic-bezier(.22,.9,.3,1)}
.js [data-anim].is-on .float{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}

/* ---- 7. I DUE PERCORSI ------------------------------------------------- */
.paths{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (max-width:800px){ .paths{grid-template-columns:minmax(0,1fr)} }
.path{
  background:var(--void);padding:clamp(28px,3.4vw,44px) var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);
  transition:background .2s ease;
}
.path:hover{background:var(--panel)}
.path__k{font-size:.75rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--paper)}
.path h3{font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.2;color:var(--white)}
.path p{color:var(--muted);font-size:.9375rem;max-width:44ch}
.path__go{
  margin-top:auto;padding-top:var(--s4);
  display:flex;align-items:center;gap:9px;
  font-weight:600;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
}
.path__go .arw{transition:transform .18s ease}
.path:hover .path__go .arw{transform:translateX(4px)}

/* ---- 8. MANIFESTO ------------------------------------------------------ */
.quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){ .quad{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:520px){ .quad{grid-template-columns:minmax(0,1fr)} }
.quad__c{background:var(--void);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:10px}
.quad__k{font-family:var(--body);font-weight:600;font-size:1.0625rem;letter-spacing:.02em;text-transform:uppercase;color:var(--white)}
.quad__c p{color:var(--muted);font-size:.9375rem;line-height:1.6}

/* ---- 9. ECOSISTEMA ----------------------------------------------------- */
.eco{display:grid;gap:var(--s4)}
.prod{
  border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--panel);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
@media (max-width:880px){ .prod{grid-template-columns:minmax(0,1fr)} }
.prod__main{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column}
.prod__cta{margin-top:auto;padding-top:var(--s6)}
.prod__side{border-left:1px solid var(--line);background:rgba(0,0,0,.24);padding:clamp(20px,2.4vw,28px)}
@media (max-width:880px){ .prod__side{border-left:0;border-top:1px solid var(--line)} }
.prod__top{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.prod__name{font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.2;letter-spacing:0;color:var(--white)}
.prod__chip{
  font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-3);border-radius:2px;padding:3px 7px;color:var(--muted);
}
.prod__chip--soon{border-color:var(--line-2);color:var(--dim)}
.prod__chip--pro{border-color:var(--amber-line);color:var(--amber)}
.prod__for{color:var(--muted);font-size:.9375rem;margin-bottom:var(--s5);max-width:48ch}
.prod__price{display:flex;align-items:baseline;gap:9px;margin-bottom:var(--s5);flex-wrap:wrap}
.prod__price b{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:0;color:var(--white);white-space:nowrap}
.prod__price span{font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.flist li{
  display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;align-items:start;
  font-size:.9375rem;color:var(--muted);line-height:1.55;
}
.flist li::before{
  content:"";width:6px;height:6px;margin-top:8px;margin-left:4px;
  border:1px solid var(--line-3);border-radius:1px;
}
/* il prodotto professionale pesa di più: telaio più chiaro e filo giallo in alto */
.prod--lead{border-color:var(--line-3);background:#1A1A1A}
.prod--lead::before{content:"";display:block;height:2px;background:var(--amber);grid-column:1/-1}
.prod--lead .prod__name{font-size:clamp(1.15rem,1.85vw,1.5rem)}
.mods{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;margin-top:var(--s5)}
.mod{background:var(--panel);display:flex;align-items:center;gap:var(--s3);padding:11px 12px;font-size:.875rem}
.mod b{font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;color:var(--paper);margin-left:auto}
.mod span{color:var(--muted)}

/* coppia di prodotti minori */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}
@media (max-width:880px){ .duo{grid-template-columns:minmax(0,1fr)} }
.duo .prod{grid-template-columns:minmax(0,1fr)}
.duo .prod__side{display:none}

/* ---- 10. IL MOTORE (sequenza reale, quindi numerata) ------------------- */
.engine{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:860px){ .engine{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:540px){ .engine{grid-template-columns:minmax(0,1fr)} }
.step{background:var(--void);padding:var(--s6) var(--s5);position:relative;display:flex;flex-direction:column;gap:9px;min-height:170px}
.step__n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;color:var(--dim)}
.step h3{font-size:1.0625rem}
.step p{color:var(--muted);font-size:.9375rem;line-height:1.6}
.step--last{background:var(--panel)}
.step--last .step__n{color:var(--amber)}
.loop{
  margin-top:var(--s4);border:1px solid var(--line);border-top:0;
  padding:16px var(--s5);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:.9375rem;line-height:1.6;color:var(--muted);
  background:var(--panel);
}
.loop b{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;color:var(--amber);font-weight:500;flex:none}

/* ---- 11. SCIENZA ------------------------------------------------------- */
.chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:880px){ .chain{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:480px){ .chain{grid-template-columns:minmax(0,1fr)} }
.chain__c{background:var(--void);padding:var(--s5);display:flex;flex-direction:column;gap:10px;min-height:190px}
.chain__k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.chain__t{font-family:var(--body);font-weight:600;font-size:1rem;letter-spacing:-.011em;color:var(--paper)}
.chain__c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.chain__c li{font-size:.875rem;color:var(--muted);line-height:1.5}
.chain__c--out{background:var(--panel)}
.chain__c--out .chain__t{color:var(--amber)}

/* ---- 12. DENTRO IL FILE ------------------------------------------------ */
.sheets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@media (max-width:880px){ .sheets{grid-template-columns:minmax(0,1fr)} }
.sheet{border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);overflow:hidden;display:flex;flex-direction:column}
.sheet__bar{
  display:flex;align-items:center;gap:9px;padding:8px 12px;
  border-bottom:1px solid var(--line);background:var(--cell);
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}
.sheet__bar b{font-family:var(--mono);color:var(--paper);font-weight:500;letter-spacing:.04em;text-transform:none}
.sheet__body{padding:14px 13px;flex:none;overflow-x:auto}
.sheet__note{margin-top:auto;padding:12px 13px;border-top:1px solid var(--line);color:var(--muted);font-size:.875rem;background:rgba(0,0,0,.2)}

/* tabella tecnica riusabile */
.tt{width:100%;border-collapse:collapse;font-size:.75rem}
.tt th{
  font-size:.5rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line-2);
  white-space:nowrap;
}
.tt td{padding:7px 8px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:middle}
.tt tr:last-child td{border-bottom:0}
.tt td b{color:var(--paper);font-weight:600}
.tt .num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--paper)}
.tt .st{display:flex;align-items:center;gap:7px;font-size:.6875rem;white-space:nowrap}
.tt .yc{
  font-family:var(--mono);background:var(--amber-soft);border:1px solid var(--amber-line);
  color:var(--amber);border-radius:2px;padding:2px 7px;display:inline-block;
}
/* Casella vuota: il peso che l'atleta scrive a penna sulla scheda stampata (foglio 17).
   Nessun token nuovo: è la .yc senza contenuto, con una misura perché si veda. */
.tt .yc--vuota{min-width:38px;height:1.45em;padding:0;vertical-align:middle}

/* ---- 13. CONFRONTO ----------------------------------------------------- */
.cmp{width:100%;border-collapse:collapse;font-size:.9375rem;border:1px solid var(--line)}
.cmp th,.cmp td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{
  font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);background:var(--panel);
}
.cmp thead th b{display:block;font-family:var(--display);font-weight:400;font-size:.875rem;letter-spacing:0;color:var(--white);margin-bottom:5px;text-transform:none}
.cmp tbody th{font-weight:500;color:var(--paper);font-size:.875rem;width:26%}
.cmp td{color:var(--muted)}
.cmp col.lead-col{background:rgba(255,255,255,.025)}
.cmp thead th:last-child{box-shadow:inset 0 2px 0 var(--amber)}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}
.cmp-scroll{overflow-x:auto}
.cmp-scroll table{min-width:660px}

/* ---- 14. FATTI --------------------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){ .facts{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:520px){ .facts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.fact{background:var(--void);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:12px;min-height:150px}
.fact b{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1;letter-spacing:0;color:var(--white)}
.fact span{font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);line-height:1.45}

/* ---- 15. FAQ ----------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s5) 0;min-height:44px;
  display:flex;align-items:center;gap:var(--s4);
  font-weight:600;font-size:1rem;letter-spacing:-.011em;color:var(--paper);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;font-family:var(--mono);font-size:1.1rem;color:var(--dim);
  transition:transform .2s ease,color .2s ease;flex:none;
}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--amber)}
.faq__a{padding:0 0 var(--s5) 0;color:var(--muted);font-size:.9375rem;line-height:1.62;max-width:72ch}
/* I link dentro una risposta FAQ erano invisibili: `a{color:inherit;text-decoration:none}`
   e' globale, quindi il rimando a Coach Woman non si distingueva dal testo. Stessa
   impostazione di .loop a, nessun token nuovo. */
.faq__a a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.faq__a a:hover{text-decoration-thickness:2px}

/* ---- 16. CTA FINALE ---------------------------------------------------- */
.end .cellgrid::before{
  -webkit-mask-image:radial-gradient(85% 150% at 50% 50%, #000 0%, transparent 68%);
          mask-image:radial-gradient(85% 150% at 50% 50%, #000 0%, transparent 68%);
}
.end{border-top:1px solid var(--line);padding-block:clamp(72px,9vw,128px);text-align:center;position:relative;overflow:hidden}
.end__badge{width:76px;height:76px;margin:0 auto var(--s5);border-radius:50%}
.end .end__pay{
  color:var(--white);
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.35rem,3.4vw,2.4rem);line-height:1.22;letter-spacing:0;
  margin-bottom:var(--s5);
}
.end__pay i{font-style:normal;color:var(--white)}
.end p{color:var(--muted);max-width:52ch;margin-inline:auto;margin-bottom:var(--s6)}
.end__cta{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}

/* ---- 17. FOOTER -------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding-block:var(--s7) var(--s6);background:var(--panel)}
.foot__grid{display:grid;grid-template-columns:2fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s6)}
@media (max-width:760px){ .foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6)} }
.foot h4{font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:var(--s4)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot a{font-size:.875rem;color:var(--muted);overflow-wrap:anywhere}
.foot a:hover{color:var(--paper)}
.foot__legal{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
  font-size:.8125rem;color:var(--dim);
}

/* ---- 18. UTILITÀ ------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .6s ease, transform .6s cubic-bezier(.22,.9,.3,1)}

.note{
  border:1px solid var(--line-2);border-left:2px solid var(--line-3);
  background:var(--panel);padding:var(--s5);border-radius:0 var(--r) var(--r) 0;
  color:var(--muted);font-size:.875rem;line-height:1.6;
}
.note b{color:var(--paper)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1;transform:none}
  .js [data-anim] .ce__v.in,.js [data-anim] .float{opacity:1;transform:none}
  .js [data-anim] .year__b{transform:none}
}


/* ==========================================================================
   AGGIUNTE DELLA REVISIONE — art direction di precisione
   ========================================================================== */

/* --- famiglie di prodotto: due linee, non tre file di prezzi diversi ---- */
.fam{
  display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
  padding:0 0 var(--s4);margin:var(--s8) 0 var(--s5);
  border-bottom:1px solid var(--line-2);
}
.eco>.fam:first-child{margin-top:0}
.fam__k{
  font-size:.8125rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--dim);flex:none;
}
.fam__t{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,1.7vw,1.45rem);color:var(--white);letter-spacing:0}
.fam__n{margin-left:auto;font-size:.875rem;color:var(--muted)}
@media (max-width:620px){ .fam__n{margin-left:0;flex-basis:100%} }
.fam--pro{border-bottom-color:var(--line-3)}
.fam--pro .fam__k{color:var(--paper)}

/* --- percorso di un atleta: profilo → … → decisione -------------------- */
.wf__tabs{display:flex;border-bottom:1px solid var(--line);background:var(--cell);overflow-x:auto;scrollbar-width:none}
.wf__tabs::-webkit-scrollbar{display:none}
.wf__tab{
  font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  padding:12px 16px;white-space:nowrap;border-bottom:2px solid transparent;border-right:1px solid var(--line);
}
.wf__tab[data-on="1"]{color:var(--paper);background:var(--panel);border-bottom-color:var(--amber)}
.wf__body{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr)}
@media (max-width:760px){ .wf__body{grid-template-columns:minmax(0,1fr)} }
.wf__read{padding:20px 18px}
.wf__dec{padding:20px 18px;border-left:1px solid var(--line);background:rgba(0,0,0,.24);display:flex;flex-direction:column}
@media (max-width:760px){ .wf__dec{border-left:0;border-top:1px solid var(--line)} }
.wf__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.wf__row:last-child{border-bottom:0}
.wf__row>span:first-child{font-size:.875rem;color:var(--dim)}
.wf__v{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--paper);white-space:nowrap}
.wf__dec h4{
  font-family:var(--display);font-weight:400;font-size:1.0625rem;line-height:1.3;
  color:var(--amber);margin:10px 0 12px;
}
.wf__why{
  border-left:2px solid var(--line-3);padding:2px 0 2px 14px;
  font-size:.9375rem;color:var(--muted);line-height:1.6;font-style:italic;
}
.wf__meta{margin-top:auto;padding-top:16px;font-size:.6875rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}

/* --- presa di posizione: il file non fa il coach ----------------------- */
.stance{border:1px solid var(--line-2);background:var(--panel);padding:clamp(28px,4vw,52px)}
.stance h2{font-size:clamp(1.4rem,2.4vw,2.1rem);margin-bottom:var(--s4);max-width:22ch}
.stance__lead{font-size:var(--t-lead);color:var(--paper);max-width:58ch;margin-bottom:var(--s7)}
.stance__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
@media (max-width:860px){ .stance__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:520px){ .stance__grid{grid-template-columns:minmax(0,1fr)} }
.stance__c{background:var(--panel);padding:var(--s5) var(--s5) var(--s5) 0}
@media (max-width:860px){ .stance__c{padding:var(--s5)} }
.stance__c b{display:block;font-weight:600;font-size:1rem;color:var(--white);margin-bottom:8px}
.stance__c span{font-size:.9375rem;color:var(--muted);line-height:1.55}

/* --- demo video --------------------------------------------------------- */
.demo{border:1px solid var(--line-2);border-radius:var(--r);background:#000;overflow:hidden}
.demo video{width:100%;height:auto;display:block}
.demo__bar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--cell);
  border-bottom:1px solid var(--line);
  font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
}

/* --- pagina metodo: evidenza → regola --------------------------------- */
.ev{border-top:1px solid var(--line-2);padding-block:var(--s7)}
.ev:first-of-type{border-top:0;padding-top:0}
.ev__h{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.ev__n{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--dim);flex:none}
.ev__h h2{font-size:clamp(1.25rem,2vw,1.7rem)}
.ev__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){ .ev__grid{grid-template-columns:minmax(0,1fr)} }
.ev__c{background:var(--void);padding:var(--s5);display:flex;flex-direction:column;gap:10px}
.ev__k{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ev__c p{font-size:.9375rem;color:var(--muted);line-height:1.6}
.ev__c--rule{background:var(--panel)}
.ev__c--rule .ev__k{color:var(--paper)}
.ev__c--rule p{color:var(--paper)}
.ev__src{
  margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;
  font-size:.875rem;color:var(--dim);
}
.ev__src a{color:var(--muted);border-bottom:1px solid var(--line-3)}
.ev__src a:hover{color:var(--paper);border-bottom-color:var(--paper)}

/* --- 11. telefono: densità più bassa, testi leggibili, bersagli grandi -- */
@media (max-width:700px){
  :root{ --t-lead:1rem }
  .lead,.quad__c p,.step p,.flist li,.chain__c li,.prod__for,.sheet__note,.loop,
  .stance__c span,.ev__c p,.path p,.hero__sub,.faq__a,.mod{font-size:1rem;line-height:1.6}
  .faq summary{font-size:1.0625rem}
  .label,.fam__k,.path__k,.hero__eyebrow,.prod__chip,.ev__k{font-size:.75rem;letter-spacing:.13em}
  .fact span,.foot h4,.hero__spec,.wf__meta,.float__k,
  .prod__price span,.chain__k,.ev__n,.sheet__bar,.cmp tbody th{font-size:.75rem;letter-spacing:.11em}
  .foot a,.foot__legal,.fam__n,.ev__src{font-size:.9375rem}
  .tt{font-size:.875rem}
  .tt th{font-size:.625rem}
  .btn{padding:16px 22px;min-height:48px}
  .btn--sm{padding:12px 16px;min-height:44px;font-size:.875rem}
  .path{padding:var(--s6) var(--s5)}
  .sec{padding-block:clamp(56px,11vw,80px)}
  .sec__head{margin-bottom:var(--s6)}
}

/* --- 11. la tabella di confronto diventa schede, non uno scroll orizzontale */
@media (max-width:700px){
  .cmp-scroll{overflow:visible}
  .cmp-scroll table{min-width:0}
  .cmp,.cmp thead,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp{border:0}
  .cmp thead{display:none}
  .cmp tbody tr{border:1px solid var(--line);margin-bottom:var(--s4);background:var(--panel)}
  .cmp tbody th{
    background:var(--cell);border-bottom:1px solid var(--line);
    font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
    width:auto;padding:12px 16px;
  }
  .cmp tbody td{
    display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:14px;
    padding:12px 16px;border-bottom:1px solid var(--line);font-size:1rem;color:var(--paper);
  }
  .cmp tbody td:last-child{border-bottom:0}
  .cmp tbody td::before{
    content:attr(data-p);font-size:.8125rem;font-weight:600;color:var(--dim);
  }
  .cmp tbody td[data-lead]{background:rgba(255,255,255,.03)}
}


/* --- pagina metodo: grado di consenso e base di evidenza ---------------- */
.ev__meta{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 var(--s5)}
.ev__tag{
  display:inline-flex;align-items:baseline;gap:7px;
  border:1px solid var(--line-2);border-radius:2px;padding:6px 11px;
  font-size:.8125rem;color:var(--muted);line-height:1.35;
}
.ev__tag b{
  font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);flex:none;
}
.ev__src::before{
  content:"Fonti";flex:none;
  font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
}
/* i quattro principi di chiusura pesano di più */
.creed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line-2)}
@media (max-width:900px){ .creed{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:560px){ .creed{grid-template-columns:minmax(0,1fr)} }
.creed__c{background:var(--panel);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:12px}
.creed__k{
  font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,1.6vw,1.35rem);
  color:var(--white);letter-spacing:0;line-height:1.2;
}
.creed__c p{font-size:.9375rem;color:var(--muted);line-height:1.6}

/* --- telefono: tre blocchi in verticale, non tre colonne strizzate ------ */
@media (max-width:900px){
  .ev{padding-block:var(--s7)}
  .ev__grid{border:0;background:transparent;gap:var(--s3)}
  .ev__c{border:1px solid var(--line);padding:var(--s5);border-radius:var(--r)}
  .ev__c--rule{border-color:var(--line-3)}
  .ev__k{font-size:.8125rem;letter-spacing:.12em;color:var(--paper)}
  .ev__c--rule .ev__k{color:var(--amber)}
  .ev__src{flex-direction:column;gap:10px;align-items:flex-start;margin-top:var(--s5)}
  .ev__meta{flex-direction:column;gap:6px}
  .ev__tag{font-size:.875rem;width:100%;text-align:left;align-items:flex-start;flex-direction:column;gap:3px}
}

/* ========================================================================
   19. MOBILE-FIRST: i pezzi nati per il traffico Instagram (27/09)
   Il brand e la direzione visiva non cambiano. Cambia l'ordine in cui le
   cose arrivano e quanto spazio occupano prima della decisione.
   ==================================================================== */

/* ---- 19a. barra superiore compatta -------------------------------------
   Prima il CTA era un pulsante pieno che su 390px rubava mezza barra e
   restava lì per tutto lo scroll. Adesso è un'etichetta: si vede, si tocca,
   non domina. */
.top__link{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);white-space:nowrap;display:inline-flex;align-items:center;
  min-height:44px;padding-inline:4px;
}
.top__link:hover{color:#FFCF3A}
.top--sales .nav{display:none}          /* sulle sales page niente menu: c'è una cosa da fare */

@media (max-width:900px){
  .top__in{height:64px}
  .top__link{font-size:.8125rem}
}

/* ---- 19b. il motore in versione telefono -------------------------------
   Il mockup completo su 390px chiedeva due o tre schermate per essere
   superato. Su desktop resta intero; su telefono resta solo la catena che
   il cervello deve capire: profilo → programma → check-in → cosa fare ora. */
.wbm{display:none}
.wbm__bar{
  display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--cell);
  border:1px solid var(--line);border-bottom:0;border-radius:var(--r) var(--r) 0 0;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;color:var(--dim);
}
.wbm__body{border:1px solid var(--line);background:var(--panel);padding:14px 13px}
.wbm__s{position:relative;padding:11px 0 11px 26px}
.wbm__s + .wbm__s{border-top:1px solid var(--line)}
.wbm__s::before{
  content:"";position:absolute;left:7px;top:17px;width:7px;height:7px;border-radius:50%;
  background:var(--line-3);
}
.wbm__s::after{
  content:"";position:absolute;left:10px;top:24px;bottom:-11px;width:1px;background:var(--line-2);
}
.wbm__s:last-child::after{display:none}
.wbm__s--now::before{background:var(--amber)}
.wbm__k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.wbm__v{display:block;margin-top:3px;font-size:1rem;color:var(--paper);line-height:1.4}
.wbm__v b{color:var(--white);font-weight:600}
.wbm__dec{
  margin-top:2px;padding:13px;background:var(--raise);border:1px solid var(--line-2);
  border-left:2px solid var(--amber);
}
.wbm__dec p:first-child{
  /* --dim su --raise da 4,38:1, sotto la soglia AA. --muted da 5,51:1. */
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.wbm__dec p:last-child{font-family:var(--display);font-size:1.5rem;color:var(--amber);margin-top:5px;line-height:1}
.wbm__n{font-size:.8125rem;color:var(--dim);margin-top:9px}

@media (max-width:820px){
  .instr{display:none}
  .wbm{display:block;margin-top:var(--s6)}
}

/* ---- 18b. gli strumenti che devono restare anche sul telefono -----------
   `.instr` sparisce sotto gli 820px, ed e' giusto: il mock del cruscotto a
   sei colonne su un telefono e' un contenuto tagliato. Ma su coach-woman il
   foglio dei blocchi e la scala P1-P5 NON sono decorazione, sono
   l'argomento della pagina, e quella pagina non ha un video che li
   sostituisca. `.instr--mob` li tiene, senza la profondita' (ombra e secondo
   piano) che a quella larghezza non si vede comunque. Le tabelle dentro
   diventano schede da sole, con la regola .tt dei 700px. */
@media (max-width:820px){
  .instr--mob{display:block}
  .instr--mob::before{display:none}
  .instr--mob .wb{box-shadow:none}
  .instr--mob .wb::before{display:none}
}

/* ---- 19c. il bivio: tutta la scheda si tocca ---------------------------- */
.path{position:relative}
.path:active{background:rgba(234,234,234,.04)}
.path__go{color:var(--amber)}

/* ---- 19d. i quattro verbi, compatti ------------------------------------ */
.quad__k + p{margin-top:5px}
@media (max-width:700px){
  .quad{gap:0}
  .quad__c{padding-block:15px}
  .quad__c + .quad__c{border-top:1px solid var(--line)}
  .quad__c p:not(.quad__k){font-size:.9375rem;line-height:1.5;color:var(--muted)}
}

/* ---- 19e. barra d'acquisto fissa (solo sales page) ---------------------
   Compare dopo la hero. Chi ha già deciso non deve risalire. */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;gap:12px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(17,17,17,.94);border-top:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transform:translateY(105%);transition:transform .22s ease;
}
.buybar[data-on="1"]{transform:translateY(0)}
.buybar__t{display:flex;flex-direction:column;line-height:1.15;margin-right:auto;min-width:0}
.buybar__n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.buybar__p{font-family:var(--display);font-size:1.0625rem;color:var(--white);margin-top:3px}
.buybar .btn{flex:none;min-height:46px;padding:12px 20px}
@media (min-width:821px){ .buybar{display:none} }   /* su desktop il CTA è già sempre in vista */

/* ---- 19f. hero delle sales page ---------------------------------------
   Regola: entro una schermata e mezza a 390px devono esserci nome, promessa,
   cosa fa, prezzo e pulsante. Tutto il resto viene dopo. */
.sell{padding-block:var(--s7) var(--s8);position:relative;border-bottom:1px solid var(--line)}
.sell__k{margin-bottom:var(--s4)}
.sell h1{font-size:clamp(1.75rem,3vw,2.75rem);line-height:1.06;max-width:17ch}
.sell__sub{color:var(--muted);font-size:1rem;line-height:1.6;max-width:52ch;margin-top:var(--s4)}
.sell__price{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);
}
.sell__price b{font-family:var(--display);font-size:2.25rem;color:var(--white);line-height:1}
.sell__price span{font-size:.875rem;color:var(--dim)}
.sell__buy{display:flex;flex-direction:column;gap:10px;margin-top:var(--s5);max-width:420px}
.sell__buy .btn{width:100%;justify-content:center;font-size:1rem}
.sell__fine{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 14px;
}
.sell__fine span{display:inline-flex;align-items:center;gap:6px}

/* ---- 19g. cosa ricevi / schermate -------------------------------------- */
.give{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:1px;background:var(--line)}
.give__c{background:var(--void);padding:18px 17px}
.give__n{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--amber)}
.give__t{font-size:1rem;color:var(--paper);margin-top:7px;font-weight:600}
.give__d{font-size:.9375rem;color:var(--muted);margin-top:5px;line-height:1.5}

/* ---- 19h. piede semplificato ------------------------------------------
   Prima l'email spezzava la griglia in due colonne rotte. */
.foot__grid{gap:var(--s6)}
.foot a{overflow-wrap:anywhere}
@media (max-width:700px){
  .foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6) var(--s5)}
  .foot__grid > :first-child{grid-column:1 / -1}
  .foot__legal{flex-direction:column;gap:10px;align-items:flex-start}
}
@media (max-width:420px){
  .foot__grid{grid-template-columns:minmax(0,1fr)}
}

/* il flusso compatto serve anche dove sostituisce del tutto il mockup grande */
.wbm--always{display:block}

/* ---- 19i. il simbolo dell'euro ----------------------------------------
   Dela Gothic One ha un glifo € talmente pesante che le due barrette
   spariscono: "39 €" si legge "39 C". Il numero resta nel carattere del
   brand, il simbolo passa al corpo testo. */
/* la specificita' va alzata: .sell__price span e .prod__price span colpiscono
   anche questo <span> e gli riportavano colore e corpo del testo secondario. */
.eur,
.sell__price b .eur,
.prod__price b .eur,
.buybar__p .eur{
  font-family:var(--body);font-weight:800;font-size:.78em;color:inherit;
  letter-spacing:0;margin-left:.14em;vertical-align:.06em;
}

/* <picture> non deve generare una scatola: cosi' l'<img> resta figlio diretto
   del flex e conserva le sue regole di dimensione. */
picture{display:contents}

/* Il nome del prodotto per esteso non sta nella barra di un telefono stretto.
   Forma lunga su schermo largo, forma corta sotto i 480px: stesso link, stessa
   destinazione, nessuno sbordo. */
.top__link .corto{display:none}
@media (max-width:479px){
  .top__link .lungo{display:none}
  .top__link .corto{display:inline}
}

/* ========================================================================
   20. LE TABELLE DIVENTANO SCHEDE (≤700px)
   Una tabella a cinque colonne dentro un telefono non e' una tabella: e' un
   contenuto tagliato che chiede di essere trascinato di lato. Sotto i 700px
   ogni riga diventa una scheda verticale e l'intestazione di colonna torna
   accanto al suo valore.
   ==================================================================== */
@media (max-width:700px){
  .sheet__body{overflow-x:visible;padding:10px}
  .tt{display:block;font-size:.9375rem}
  .tt thead{display:none}
  .tt tbody{display:block}
  .tt tr{
    display:block;background:var(--cell);border:1px solid var(--line);
    padding:11px 12px;margin-bottom:8px;
  }
  .tt tr:last-child{margin-bottom:0}
  .tt td{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:6px 0;border:0;text-align:right;
  }
  .tt td::before{
    content:attr(data-l);flex:none;text-align:left;
    font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--dim);
  }
  .tt td[data-titolo]{
    display:block;text-align:left;color:var(--paper);font-weight:600;
    font-size:1rem;padding:0 0 9px;margin-bottom:6px;
    border-bottom:1px solid var(--line-2);
  }
  .tt td[data-titolo]::before{display:none}
  .tt td[data-titolo] b{font-weight:600}
  .tt .st{justify-content:flex-end}
  .tt tr:last-child td{border-bottom:0}
  .tt td:last-child{padding-bottom:0}
  .sheet__note{padding-top:10px}
}

/* ---- 20b. schede di decisione (pagina Confronto) ----------------------- */
.decidi{display:grid;gap:var(--s7)}
.decidi__k{
  font-family:var(--display);font-size:clamp(1.1rem,1.8vw,1.35rem);
  color:var(--white);margin-bottom:var(--s4);
}
.decidi__c{
  display:block;border:1px solid var(--line);background:var(--panel);
  padding:18px 17px;margin-bottom:10px;transition:border-color .16s ease,background .16s ease;
}
.decidi__c:hover{border-color:var(--line-3);background:var(--cell)}
.decidi__c:active{background:var(--raise)}
.decidi__c--pro{border-left:2px solid var(--amber)}
.decidi__n{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-family:var(--display);font-size:1.0625rem;color:var(--white);
}
.decidi__n b{font-family:var(--display);font-size:1.25rem;color:var(--amber);flex:none}
.decidi__d{display:block;color:var(--muted);font-size:.9375rem;line-height:1.55;margin-top:9px}
.decidi__s{
  display:flex;align-items:center;gap:8px;margin-top:13px;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);
}
.decidi__s .arw{margin-left:auto;color:var(--amber)}

/* la tabella completa: aperta di suo su schermo largo, a richiesta sul telefono */
.cmp-piu > summary{display:none}
@media (max-width:700px){
  .cmp-piu > summary{
    display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
    padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    font-family:var(--mono);font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;
    color:var(--amber);min-height:44px;
  }
  .cmp-piu > summary::-webkit-details-marker{display:none}
  .cmp-piu > summary::after{content:"+";margin-left:auto;font-size:1.1rem;line-height:1}
  .cmp-piu[open] > summary::after{content:"–"}
}
@media (min-width:701px){ .cmp-piu > *{display:block} }

/* ========================================================================
   21. FORM DI RICHIESTA (Coach, Top Set + Back Off)
   Per un prodotto da 199 € il lead vale troppo per mandarlo ad aprire Gmail.
   ==================================================================== */
/* Il contenitore del form si chiamava .lead come il paragrafo introduttivo
   dei blocchi: stessa classe per due cose diverse, e questa regola — piu'
   in basso nel file — vinceva su OGNI <p class="lead"> del sito, che
   finiva a 440px e centrato invece che a 62ch e allineato a sinistra.
   Il form ora si chiama .modulo. */
.modulo{display:block;max-width:440px;margin-inline:auto;text-align:left}
.lead__r{margin-bottom:var(--s4);border:0;padding:0}
.lead__l{
  display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;padding:0;
}
.lead__i{
  width:100%;min-height:50px;padding:13px 14px;
  background:var(--cell);border:1px solid var(--line-2);border-radius:var(--r);
  color:var(--paper);font-family:var(--body);font-size:1rem;
}
.lead__i::placeholder{color:var(--dim)}
.lead__i:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber)}
.lead__i[aria-invalid="true"]{border-color:var(--bad)}
.lead__opz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lead__opz label{position:relative;display:block}
.lead__opz input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.lead__opz span{
  display:flex;align-items:center;justify-content:center;min-height:48px;
  background:var(--cell);border:1px solid var(--line-2);border-radius:var(--r);
  font-family:var(--mono);font-size:.8125rem;color:var(--muted);
  transition:border-color .14s ease,color .14s ease,background .14s ease;
}
.lead__opz input:checked + span{
  border-color:var(--amber);color:var(--on-amber);background:var(--amber);font-weight:600;
}
.lead__opz input:focus-visible + span{outline:2px solid var(--amber);outline-offset:2px}
.lead__go{width:100%;justify-content:center;margin-top:var(--s2);min-height:52px;font-size:1rem}
.lead__go[disabled]{opacity:.55;pointer-events:none}
.lead__esito{
  margin-top:12px;font-size:.9375rem;line-height:1.5;color:var(--muted);min-height:0;
}
.lead__esito[data-stato="ok"]{color:var(--ok)}
.lead__esito[data-stato="ko"]{color:var(--warn)}
.lead__nota{margin-top:10px;font-size:.8125rem;color:var(--dim);line-height:1.5}
.modulo--uno .lead__r{margin-bottom:var(--s3)}
@media (max-width:420px){
  .lead__opz{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* la sezione di chiusura centra il testo: il form no, i campi si leggono male */
.end .modulo{text-align:left}
.end .lead__l{text-align:left}

/* ---- 20c. navigazione ad ancore (pagine di approfondimento) ------------
   Un coach che cerca "frequenza" non deve scorrere sette blocchi. */
.salta{border-bottom:1px solid var(--line);background:var(--panel);position:relative;z-index:1}
.salta .wrap{padding-block:14px}
.salta__k{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-bottom:9px;
}
.salta__l{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.salta__l::-webkit-scrollbar{display:none}
.salta__l a{
  flex:none;display:inline-flex;align-items:center;min-height:38px;padding:7px 13px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--cell);
  font-size:.8125rem;color:var(--muted);white-space:nowrap;
}
.salta__l a:hover{border-color:var(--amber);color:var(--paper)}
.ev[id],.sheet[id]{scroll-margin-top:78px}
@media (max-width:700px){
  .salta__l a{min-height:44px;font-size:.875rem;padding:10px 15px}
}

/* ---- 22. PIEDE SU TELEFONO: una colonna, niente parole spezzate --------
   L'indirizzo email mandava a capo dentro la parola e il nome del marchio si
   rompeva dentro "Autogestione". */
@media (max-width:700px){
  .foot{padding-block:var(--s7) var(--s6)}
  .foot__grid{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .foot__grid > :first-child{grid-column:auto;margin-bottom:var(--s2)}
  .foot__grid > div + div{border-top:1px solid var(--line);padding-top:var(--s5)}
  .foot h4{margin-bottom:10px}
  .foot ul{display:flex;flex-wrap:wrap;gap:8px 20px}
  .foot a{overflow-wrap:normal;word-break:keep-all;hyphens:none}
  .foot .brand__name{white-space:nowrap;font-size:.8125rem}
  .foot__legal{flex-direction:column;gap:12px;align-items:flex-start;font-size:.75rem}
}
/* l'indirizzo per esteso non entra su schermo stretto: resta tappabile, scritto corto */
.foot .mail{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.foot__leg a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.foot__leg a:hover{color:var(--paper)}

/* ---- 23. pagine legali: testo lungo, leggibile, niente fronzoli --------- */
.legale{max-width:72ch}
.legale h2{
  font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--white);
  margin-top:var(--s7);margin-bottom:var(--s3);
}
.legale h2:first-child{margin-top:0}
.legale p{color:var(--muted);font-size:1rem;line-height:1.65;margin-bottom:var(--s3);max-width:68ch}
.legale b{color:var(--paper);font-weight:600}
.legale code{
  font-family:var(--mono);font-size:.875em;background:var(--cell);
  border:1px solid var(--line);padding:1px 5px;border-radius:2px;color:var(--paper);
}
.legale a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}

/* ========================================================================
   24. BANNER DEL CONSENSO
   I tre comandi sono identici per dimensione, colore e peso: rifiutare costa
   esattamente un clic, come accettare. Nessun pulsante e' piu' invitante
   degli altri — e' il punto su cui il Garante e' esplicito.
   ==================================================================== */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:var(--s4) var(--gut) calc(var(--s4) + env(safe-area-inset-bottom));
  display:flex;justify-content:center;
  animation:cc-su .22s ease-out;
}
@keyframes cc-su{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .cc{animation:none} }
.cc__box{
  width:100%;max-width:var(--wrap);
  background:rgba(25,25,25,.98);border:1px solid var(--line-2);border-radius:var(--r);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:18px 18px 16px;box-shadow:0 -8px 40px rgba(0,0,0,.5);
}
.cc__t{font-family:var(--display);font-size:1rem;color:var(--white);margin-bottom:8px}
.cc__d{color:var(--muted);font-size:.9375rem;line-height:1.55;max-width:78ch}
.cc__d b{color:var(--paper);font-weight:600}
.cc__d a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}

.cc__cat{margin-top:var(--s5);display:grid;gap:2px}
.cc__c{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  padding:12px;background:var(--cell);border:1px solid var(--line);
}
.cc__c input{position:absolute;opacity:0;width:0;height:0}
.cc__box2{
  flex:none;width:20px;height:20px;margin-top:2px;border:1px solid var(--line-3);
  border-radius:3px;background:var(--void);position:relative;
}
.cc__c input:checked + .cc__box2{background:var(--amber);border-color:var(--amber)}
.cc__c input:checked + .cc__box2::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--on-amber);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.cc__c input:disabled + .cc__box2{opacity:.55;cursor:not-allowed}
.cc__c input:focus-visible + .cc__box2{outline:2px solid var(--amber);outline-offset:2px}
.cc__ct{display:flex;flex-direction:column;gap:3px;min-width:0}
.cc__ct b{color:var(--paper);font-size:.9375rem;font-weight:600}
.cc__ct span{color:var(--dim);font-size:.8125rem;line-height:1.5}

.cc__b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:var(--s5)}
.cc__btn{
  min-height:48px;padding:12px 14px;
  background:var(--raise);border:1px solid var(--line-3);border-radius:var(--r);
  color:var(--paper);font-family:var(--body);font-size:.9375rem;font-weight:600;
  cursor:pointer;transition:border-color .14s ease,background .14s ease;
}
.cc__btn:hover{border-color:var(--paper);background:var(--cell)}
.cc__btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.cc__btn:active{transform:translateY(1px)}

@media (max-width:560px){
  .cc{padding-inline:12px}
  .cc__box{padding:16px 14px 14px}
  .cc__b{grid-template-columns:minmax(0,1fr);gap:8px}
  .cc__d{font-size:.875rem}
}
/* un comando che apre un pannello e' un bottone, non un collegamento: href="#"
   farebbe saltare la pagina in cima e confonde chi naviga da tastiera */
.linkish{
  background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.linkish:hover{color:var(--paper)}
.linkish:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* la revoca del consenso deve essere facile quanto il consenso: su telefono
   19px di altezza non sono un bersaglio. Vale per tutta la riga legale. */
@media (max-width:700px){
  .foot__leg{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;line-height:1}
  .foot__leg a,.foot__leg .linkish{display:inline-flex;align-items:center;min-height:44px;padding-block:12px}
}

/* ========================================================================
   25. HOMEPAGE 2026 — dalla presentazione alla decisione
   La homepage non e' piu' una pagina editoriale: e' un bivio premium con
   sopra un'offerta leggibile in due secondi.
   ==================================================================== */

/* ---- 25a. hero commerciale -------------------------------------------- */
.hero__in{align-items:center}
.hero h1{max-width:15ch}
.hero__sub{font-size:clamp(1rem,1.5vw,1.1875rem);line-height:1.55;max-width:50ch;color:var(--paper)}

/* profondita' attorno allo strumento: un secondo piano dietro, e un alone
   caldo appena percettibile. Niente ombre finte: solo strati veri. */
.instr{position:relative}
.instr::before{
  content:"";position:absolute;inset:-6% -4% -10%;z-index:-1;
  background:radial-gradient(60% 55% at 60% 40%, rgba(255,193,7,.09), transparent 70%);
  pointer-events:none;
}
.instr .wb{
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px var(--line-2);
  position:relative;
}
.instr .wb::before{
  content:"";position:absolute;inset:14px -14px -14px 14px;z-index:-1;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
}

/* ---- 25b. la barra dei numeri, subito sotto la piega ------------------- */
.proof{
  border-block:1px solid var(--line);background:var(--panel);
  position:relative;z-index:1;
}
.proof__l{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;background:var(--line);
}
.proof__c{
  background:var(--panel);padding:18px 14px;text-align:center;
  display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;
}
.proof__n{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.5rem);color:var(--white);line-height:1}
.proof__k{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);line-height:1.35;
}
@media (max-width:900px){ .proof__l{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:420px){
  .proof__c{padding:14px 8px}
  .proof__k{font-size:.5625rem;letter-spacing:.1em}
}

/* ---- 25c. il bivio: due schede affiancate, anche sul telefono ----------
   Due pulsanti impilati leggono come navigazione. Due schede una accanto
   all'altra leggono come una scelta — che e' quello che deve succedere. */
.bivio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-2)}
/* Griglia a righe dichiarate, non flex: cosi' prezzo e pulsante delle due
   schede stanno sulla stessa linea anche se le descrizioni hanno lunghezze
   diverse. Un bivio in cui i due lati non sono allineati sembra sbilanciato. */
.via{
  position:relative;display:grid;align-content:start;
  grid-template-rows:auto auto auto 1fr auto auto;
  background:var(--panel);padding:clamp(20px,3vw,34px) clamp(14px,2.2vw,30px);
  transition:background .18s ease;
}
.via__brand{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:4px;
}
.via:hover{background:var(--cell)}
.via:active{background:var(--raise)}
.via--pro{border-top:2px solid var(--line-3)}
.via--coach{border-top:2px solid var(--amber)}
.via__k{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:12px;
}
.via__t{
  font-family:var(--display);font-size:clamp(1.0625rem,2.1vw,1.6rem);color:var(--white);
  line-height:1.15;margin-bottom:10px;
}
.via__d{color:var(--muted);font-size:clamp(.8125rem,1.2vw,.9375rem);line-height:1.5}
.via__p{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
}
.via__p b{font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.75rem);color:var(--white);line-height:1}
.via__p .eur{font-family:var(--body);font-weight:800;font-size:.78em;color:inherit;margin-left:.1em}
.via__p span{font-family:var(--mono);font-size:.625rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.via__go{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:16px;min-height:48px;padding:13px 16px;border-radius:var(--r);
  font-weight:600;font-size:clamp(.8125rem,1.3vw,.9375rem);
  background:var(--raise);border:1px solid var(--line-3);color:var(--paper);
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.via--coach .via__go{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
.via:hover .via__go{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
.via__go .arw{transition:transform .18s ease}
.via:hover .via__go .arw{transform:translateX(3px)}
@media (max-width:430px){
  .via{padding:18px 12px}
  .via__k{font-size:.5625rem;letter-spacing:.09em;margin-bottom:8px}
  .via__brand{font-size:.5625rem;letter-spacing:.07em}
  /* Il pulsante deve stare su una riga sola: due righe dentro una scheda
     stretta lo fanno sembrare un paragrafo, non un'azione. */
  .via__go{padding:12px 10px;font-size:.75rem;gap:6px}
  .via__p b{font-size:1.375rem}
  .via__p span{font-size:.5625rem;letter-spacing:.08em}
}
@media (max-width:340px){ .via__go{font-size:.6875rem;padding:12px 8px} }

/* La barra fissa non deve coprire l'ultima riga del piede. */
@media (max-width:820px){ body:has(.buybar) .foot{padding-bottom:calc(var(--s6) + 74px)} }

/* ---- 25d. listino compatto, con il secondario davvero secondario ------- */
.listino{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
.lis{background:var(--panel);padding:24px 22px;display:flex;flex-direction:column}
.lis--pro{border-left:2px solid var(--amber)}
.lis__t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lis__n{font-family:var(--display);font-size:1.0625rem;color:var(--white)}
.lis__p{font-family:var(--display);font-size:1.375rem;color:var(--amber);white-space:nowrap}
.lis__d{color:var(--muted);font-size:.9375rem;line-height:1.55;margin:10px 0 16px}
.lis__go{
  margin-top:auto;font-family:var(--mono);font-size:.75rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--amber);display:inline-flex;align-items:center;
  gap:8px;min-height:44px;
}
.dopo{
  grid-column:1 / -1;background:var(--void);padding:18px 22px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.dopo__k{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);flex:none;
}
.dopo__t{color:var(--muted);font-size:.875rem;margin-right:auto}
.dopo__t b{color:var(--paper);font-weight:600}
.dopo a{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);min-height:44px;display:inline-flex;align-items:center}
@media (max-width:700px){
  .listino{grid-template-columns:minmax(0,1fr)}
  .dopo{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---- 25e. «dentro il file»: la prova visiva breve ----------------------
   Sotto il bivio serve una prova che il prodotto esista davvero. I nomi dei
   fogli sono la prova piu' onesta che abbiamo: sono quelli veri. A capo,
   mai in scorrimento orizzontale. */
.dentro{border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);overflow:hidden}
.dentro__bar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--void);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
}
.dentro__bar b{color:var(--paper);font-weight:500;letter-spacing:.04em}
.dentro__l{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);padding:1px}
.dentro__t{
  background:var(--cell);padding:10px 12px;flex:1 1 auto;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.05em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dentro__t[data-on="1"]{background:var(--raise);color:var(--paper);box-shadow:inset 0 2px 0 var(--amber)}
.dentro__n{
  padding:13px 14px;border-top:1px solid var(--line);background:rgba(0,0,0,.2);
  color:var(--muted);font-size:.875rem;line-height:1.55;
}
.dentro__n b{color:var(--paper);font-weight:600}
@media (max-width:420px){ .dentro__t{font-size:.625rem;padding:9px 9px} }

/* ---- 25f. aria attorno ai blocchi che decidono ------------------------
   Il bivio e il listino respirano piu' del resto: e' li' che si decide. */
.sec--aria{padding-block:clamp(56px,7vw,96px)}
.sec--aria .sec__head{margin-bottom:clamp(28px,4vw,46px)}

/* Una sola azione dominante nella hero: il bivio vero sta nelle schede. */
.hero__cta--uno{display:flex}
.hero__cta--uno .btn{min-width:min(100%,320px);justify-content:space-between}

/* Le ancore della homepage finiscono sotto la barra fissa se non si tiene
   conto della sua altezza. E lo scroll fino al bivio deve essere leggibile,
   non un salto — ma solo per chi non ha chiesto meno animazione. */
.sec[id],.proof[id],.end[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* Le due schede del bivio devono allinearsi FRA LORO, non solo al proprio
   interno: le righe vengono dalla griglia madre. Dove subgrid non c'e',
   resta l'allineamento per scheda definito sopra — degrada, non si rompe. */
@supports (grid-template-rows:subgrid){
  .bivio{grid-template-rows:auto auto auto 1fr auto auto}
  .via{grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
}
/* Sotto i 390px la scheda perde una quindicina di pixel utili e l'etichetta
   del pulsante va a capo: rimpicciolisce, non si spezza. */
@media (max-width:389px){ .via__go{font-size:.6875rem;padding:12px 8px;gap:5px} }
@media (max-width:355px){ .via__go{font-size:.625rem;padding:12px 7px;gap:4px;letter-spacing:-.005em} }

/* I due rimandi di approfondimento erano grigi come il testo attorno: si
   leggevano come frase, non come link. Giallo, in mono, con area toccabile. */
.loop a{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);display:inline-flex;align-items:center;min-height:44px;margin-right:18px;
}
.loop a:hover{text-decoration:underline;text-underline-offset:3px}

/* ========================================================================
   26. IL CONTO — l'aritmetica del valore, servita gia' fatta
   Il prezzo da solo e' un numero senza scala: 39 e' poco o tanto solo
   rispetto a qualcosa. Qui sopra c'e' quanto costa l'alternativa e quanto
   costa questa, una sotto l'altra, cosi' l'occhio le vede insieme senza
   scorrere e senza moltiplicare niente da solo.
   Niente prezzo sbarrato: il confronto lo fa la gerarchia, non un tratto.
   ==================================================================== */
.conto{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);
  max-width:440px;margin-block:var(--s5);overflow:hidden;
}
.conto__r{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:12px 14px;background:var(--panel);
}
.conto__k{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);flex:none;
}
.conto__v{font-size:.875rem;color:var(--muted);text-align:right;margin-left:auto}
.conto__v b{color:var(--paper);font-weight:600}
/* La riga dell'alternativa e' barrata e smorzata: cosi' l'occhio non
   confronta due prezzi (operazione lenta), ne legge uno solo e capisce che
   l'altro e' quello che NON paga. Il tratto sta sul numero, non sul mestiere:
   la riga dice quanto costa un anno di coaching, non che il coach sia una
   scelta sbagliata. */
.conto__r--alt{padding-block:10px}
/* Il numero barrato deve restare LEGGIBILE: se non si legge, non fa da
   riferimento e il confronto salta. Quindi tratto sottile (1px), non
   cancellatura, e testo non piu' piccolo del necessario. */
.conto__r--alt .conto__v{color:var(--dim);font-size:.875rem}
.conto__r--alt .conto__v b{color:var(--dim);font-weight:600}
.conto__r--alt s{
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:var(--dim);
  text-decoration-skip-ink:none;
}

/* La riga nostra e' l'unica che porta il giallo: e' l'unica che conclude. */
.conto__r--noi{background:var(--cell);padding-block:15px}
.conto__r--noi .conto__k{color:var(--paper)}
.conto__r--noi .conto__v{color:var(--dim)}
.conto__r--noi .conto__v b{
  font-family:var(--display);font-weight:400;font-size:1.75rem;
  color:var(--amber);letter-spacing:0;margin-right:6px;
}
.conto__r--noi .conto__v b .eur{font-family:var(--body);font-weight:800;font-size:.78em}
@media (max-width:430px){
  .conto__r{padding:11px 12px;gap:6px}
  .conto__k{font-size:.625rem;letter-spacing:.09em}
  .conto__v{font-size:.8125rem}
  .conto__r--noi .conto__v b{font-size:1.5rem}
  .conto__r--alt .conto__v{font-size:.8125rem}
}

/* La riga che toglie il rischio, sotto il pulsante. Non promette rimborsi:
   promette che dall'altra parte c'e' qualcuno — che e' poi il lavoro che
   fa un preparatore, e non smette di valerlo perche' qui c'e' un file. */
.risolve{
  margin-top:12px;max-width:440px;
  font-size:.875rem;line-height:1.5;color:var(--muted);
}
.risolve b{color:var(--paper);font-weight:600}

/* ============================================================
   27. IL VIDEO DELLA LANDING
   ------------------------------------------------------------
   Formato 4:5 (1080x1350). Su un telefono un foglio di calcolo in 16:9
   diventa illeggibile, e in 9:16 si taglia via mezza tabella: il 4:5 e'
   l'unico che tiene dentro una tabella e resta grande. E' anche il formato
   delle inserzioni, quindi lo stesso master serve due volte.
   Non parte da solo: c'e' la voce, e un video che si mette a parlare da
   solo si chiude. Con preload="none" la pagina non scarica un byte finche'
   non lo si tocca — a caricarsi e' solo la locandina.
   ============================================================ */
.vdemo{margin-top:var(--s5);max-width:420px}
.demo--4x5 video{aspect-ratio:4 / 5}
.vdemo__c{margin-top:9px;font-size:.8125rem;line-height:1.5;color:var(--muted)}
@media (min-width:960px){
  .vdemo{max-width:390px}
}
@media (min-width:960px){
  /* Sul desktop il video va accanto al testo, non sotto: da solo in una
     colonna sola lascia due terzi di schermo vuoti e sembra un errore. */
  .sell .vdemo{float:right;max-width:360px;margin:0 0 var(--s5) var(--s6)}
  .sell .sell__buy,.sell .risolve,.sell .conto,.sell .sell__fine{max-width:540px}
  .sell .wbm--always{clear:both}
}

/* La nota sotto il conto. Serve a dire cosa il confronto NON dice: senza,
   un preparatore che conosce quegli strumenti lo legge come una furbata. */
.conto__nota{
  margin-top:10px;max-width:520px;
  font-size:.75rem;line-height:1.55;color:var(--dim);
}
.conto__nota b{color:var(--muted);font-weight:600}
/* La riga per atleta: 199 diviso quaranta e' il numero che fa scattare il
   confronto, ma va sotto il prezzo, non al posto suo. */
.conto__u{display:inline-block;margin-top:3px;font-style:normal;font-size:.75rem;color:var(--dim)}
/* Il prezzo di lancio: e' un motivo per rispondere alla mail, non un contatore.
   Niente "posti rimasti": i dieci sono dieci, e l'undicesimo paga il listino. */
.conto__lancio{display:inline-block;margin-top:6px;color:var(--amber);font-weight:600}

/* ============================================================
   29. CORREZIONI CRO DEL 01/10/2026 (landing /pro)
   ------------------------------------------------------------ */

/* Prezzo di lancio subito sotto il pulsante: e' pricing reale
   (prime 30 licenze), non urgenza finta. */
.sell__launch{
  margin-top:12px;max-width:440px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
  color:var(--muted);text-transform:uppercase;
}
.sell__launch b{color:var(--amber);font-weight:600}

/* Contatore Founding. La scarsita' qui e' VERA e verificabile — conta licenze gia'
   vendute, non un timer — ed e' per questo che il brand la ammette dove vieta i
   contatori finti. Compare in piu' punti: si aggiorna SOLO con
   `python3 ops/contatore-founding.py N`, mai a mano, o si pubblicano due numeri
   diversi nello stesso momento. Nessun token nuovo. */
.founding{
  margin-top:12px;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
  color:var(--muted);text-transform:uppercase;line-height:1.55;
}
.founding b{color:var(--amber);font-weight:600}
.founding--bar{margin-top:3px;font-size:.625rem;letter-spacing:.07em;line-height:1.3}

/* Il prezzo di lancio del Coach sta DENTRO la scheda prodotto, subito sotto la
   cifra. Senza questa riga il margine inferiore di .prod__price (--s5) lo
   staccava dal prezzo e sembrava una nota a se' stante invece che la sua
   condizione. Aggiunta il 02/10 con il listino Coach 129/169. */
.prod__price:has(+ .sell__launch){margin-bottom:10px}
/* dentro la scheda del listino la colonna e' larga: senza questa riga il
   max-width di 440px mandava a capo l'ultimo prezzo da solo. */
.prod__main .sell__launch{max-width:none}

/* UNA SOLA barra fissa sul telefono.
   Sotto gli 820px la .buybar e' attiva in fondo allo schermo. Con anche la
   barra in alto in position:sticky erano due barre fisse contemporaneamente:
   ~110px di viewport mangiati su un telefono. Su desktop la .buybar e'
   nascosta (regola a 821px), quindi li' la barra in alto resta sticky e il
   pulsante d'acquisto resta comunque sempre in vista. */
@media (max-width:820px){
  .top{position:static}
}

/* ============================================================
   30. LE VOCI DEI CLIENTI (01/10/2026)
   ------------------------------------------------------------
   Perche' queste NON sono una griglia a filetti come .quad e .give.
   Il resto della pagina usa celle attaccate separate da 1px: e' la texture
   del foglio di calcolo, e dice "queste cose sono righe della stessa
   tabella". Qui invece sono PERSONE DIVERSE, e attaccarle direbbe il
   contrario. Quindi oggetti separati — ma col vocabolario di sempre: stesso
   filetto --line, stesso raggio --r da 3px, stesso fondo --panel che usa
   gia' .loop. Zero ombra: l'elevazione di questo sito si fa con la linea.

   La virgoletta e' --line-3, non ambra. L'ambra qui sarebbe decorazione, e
   la legge 1 dice che il giallo e' input umano e azione, mai ornamento.

   Il nome sta su margin-top:auto: cosi' le card restano allineate in basso
   anche quando le recensioni hanno lunghezze diverse, senza doverle tagliare.
   ============================================================ */
/*  Il difetto che questo ridisegno corregge: le recensioni si leggevano
    come l'ennesima griglia di schede. Una recensione che sembra una
    feature non fa prova sociale — e' solo altro testo nostro.

    Quattro leve, nessun orpello:

    1. IL FONDO E' PIU' ALTO. Le griglie informative (.quad, .give) hanno
       le celle su --void, lo stesso nero della pagina: sono superficie.
       Queste stanno su --cell, un gradino sopra. E' questo, prima di
       tutto il resto, che le stacca a chi scorre veloce.
    2. IL BORDO SI VEDE. --line-2 al posto del filetto --line: un oggetto
       chiuso, non una cella di tabella.
    3. LE VIRGOLETTE SONO AMBRA. Grandi, in alto a sinistra e in basso a
       destra, a incorniciare. Non violano la legge 1 del design system
       ("il giallo e' l'input umano"): una recensione E' input umano —
       sono le parole del cliente, non le nostre. E' l'unico punto del
       sito in cui l'ambra non segnala un'azione ma una voce.
    4. IL TESTO E' BIANCO E PIU' GRANDE del body. Quello che dice un
       cliente pesa piu' di quello che diciamo noi.

    Niente stelle, niente gradienti, niente vetro, niente Trustpilot. */
.voci{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.voci--due{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}
/* su telefono il distacco fra una voce e l'altra cresce: e' l'unico modo
   di dire "sono cinque oggetti separati" quando sono incolonnati */
@media (max-width:900px){
  .voci,.voci--due{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
}

.voce{
  position:relative;margin:0;
  padding:20px 24px 18px;
  background:var(--cell);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  display:flex;flex-direction:column;gap:12px;
}

/* le due virgolette. `line-height:.75` serve a non farle occupare una riga
   intera: sono un segno, non testo. La seconda e' assoluta in basso a
   destra, e .voce__chi le lascia il posto col padding-right. */
.voce__q{
  display:block;
  font-size:2.25rem;line-height:.75;font-weight:700;
  color:var(--amber);
  -webkit-user-select:none;user-select:none;
}
.voce__q--giu{position:absolute;right:18px;bottom:10px}

/* CORSIVO, e dice una cosa precisa: queste non sono parole nostre.
   E' corsivo VERO — fonts.css porta Inter Italic 400 e 600 latin
   self-hosted. Con un taglio solo il browser inclinerebbe da se' il peso
   mancante (obliqua sintetica), e su una citazione di sei righe si vede.
   Interlinea un filo piu' alta del tondo: il corsivo e' meno aperto e a
   1.6 stretta si impasta. */
.voce__t{
  margin:0;
  font-size:1.0625rem;line-height:1.68;
  font-style:italic;font-weight:400;
  color:var(--white);
}
/* il grassetto marca al massimo due passaggi: se fossero quattro non
   marcherebbe piu' niente. Su fondo bianco basta il peso, non serve
   un secondo colore che entrerebbe in concorrenza con l'ambra. */
.voce__t b{font-weight:600;font-style:italic;color:var(--white)}

/* ⛔ il corsivo si ferma alla citazione. Nome, qualifica e badge restano
   dritti: sono informazione nostra su chi parla, non le sue parole. */
.voce__chi,.voce__nome,.voce__ruolo,.voce__ok{font-style:normal}

.voce__chi{
  margin-top:auto;padding-top:14px;padding-right:46px;
  border-top:1px solid var(--line-2);
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
}
.voce__nome{font-size:.9375rem;font-weight:600;color:var(--paper)}
.voce__ruolo{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);
}

/* ⛔ "Acquisto verificato" va SOLO su chi ha pagato davvero.
   Confermato da Tommy il 01/10: tutti e cinque. Se un domani si aggiunge
   una voce che non e' un cliente pagante — un tester, un collega, un
   commento sotto un reel — questa riga NON ci va: un badge di fiducia
   falso su una card squalifica tutte le altre.
   Raggio --r e non la pillola tonda: 3px e' il raggio del sito, una
   pillola sarebbe l'unico oggetto rotondo della pagina. */
.voce__ok{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:4px;padding:5px 10px;
  background:var(--void);
  border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}

/* il blocco prima del prezzo: stesse regole, un gradino piu' compatto,
   perche' li' non si apre un argomento, si chiude */
.voce--fine{padding:18px 22px 16px}
.voce--fine .voce__t{font-size:1rem}
.voce--fine .voce__q{font-size:2rem}

/* ============================================================
   31. DUE GRIGLIE CHE LASCIAVANO CELLE VUOTE (01/10/2026)
   ------------------------------------------------------------
   Le celle vuote si VEDONO, e non per distrazione: queste griglie
   fanno i filetti col trucco `gap:1px` su `background:var(--line)`,
   quindi dove manca una cella resta scoperto il grigio del fondo.
   Una scheda che non c'e' diventa un rettangolo piu' chiaro.

   .quad — ⛔ NON si puo' semplicemente portarla a 3 colonne.
   Nasce a 4 e per tre pagine su quattro e' giusta: index 4 schede,
   top-set-back-off 4, coach 8. Solo /pro ne ha 3. Forzare 3 colonne
   qui — e questo foglio vale per TUTTE le pagine — sistemerebbe /pro
   e aprirebbe 2 buchi su index, 2 su tsb e 1 su coach.
   Quindi non si sceglie un numero: si contano le schede.
   `:has(.quad__c:nth-child(3):last-child)` prende solo le griglie con
   esattamente tre figli, e si riaggiusta da sola il giorno che qualcuno
   ne aggiunge o ne toglie una.

   .give — otto schede, solo su /pro, con `auto-fit minmax(230px,1fr)`:
   a 1280 ne entravano 5 (8 = 5+3, due celle scoperte) e intorno ai
   900 ne entravano 3 (8 = 3+3+2, una scoperta). Otto e' divisibile per
   4, 2 e 1: si dichiarano quelle tre, e i buchi non esistono a nessuna
   larghezza. La soglia dei 1000px tiene le colonne sopra i 230px, che
   era il minimo gia' scelto da chi l'ha scritta.
   ============================================================ */
@media (min-width:901px){
  .quad:has(.quad__c:nth-child(3):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:1000px){
  .give{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:560px) and (max-width:999px){
  .give{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:559px){
  .give{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   32. LA FASCIA DI ATMOSFERA DELLA CHIUSURA (01/10/2026)
   ------------------------------------------------------------
   Una foto sola, e solo qui. Tre vincoli che l'hanno decisa, e
   nessuno dei tre e' di gusto:

   · LICENZA. La foto e' Pexels: uso commerciale permesso, ma e'
     VIETATO far sembrare che la persona ritratta appoggi il
     prodotto. Quindi non puo' stare accanto alle recensioni, e
     non puo' stare accanto a nessuna frase di risultato.
   · POSIZIONAMENTO. Il vantaggio di questa pagina e' non sembrare
     un infoprodotto fitness. Le foto stock di muscoli sono il modo
     piu' rapido per perderlo — e su Pexels girano parecchio.
   · NIENTE VOLTO. Ritaglio 2:1 sotto il mento: si vede il corpo,
     non la faccia. Coerente con brand-voice.md, e sembra una
     scelta invece di un taglio sbagliato.

   ⛔ Sta su `.end--foto`, NON su `.end`. .end e' il componente di
   chiusura di sette pagine: sulla classe base la stessa foto
   sarebbe comparsa sette volte, cioe' sarebbe diventata un
   elemento di tema. Qui e' un accento, e un accento si usa una
   volta.

   ⛔ Il percorso e' `foto/…` e non `assets/foto/…`: le url() dei
   CSS si risolvono rispetto al FOGLIO, che sta gia' in assets/.
   Con il prefisso l'immagine darebbe 404 senza un solo errore in
   console — solo la fascia che non compare.

   Solo webp (12 e 23 KB). I .jpg accanto non entrano nel deploy:
   un url() non sa scegliere il formato, quindi sarebbero 85 KB
   scaricati da nessuno. Se un browser non leggesse il webp, la
   fascia semplicemente non c'e' e la chiusura resta quella di
   prima: nessun testo diventa illeggibile.
   ============================================================ */
.end--foto{isolation:isolate}
.end--foto::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,#111 0%,rgba(17,17,17,.92) 45%,rgba(17,17,17,.55) 100%),
    url(foto/ba-atmosfera-900.webp) center right/cover no-repeat;
}
@media (min-width:901px){
  .end--foto::before{
    background-image:
      linear-gradient(90deg,#111 0%,rgba(17,17,17,.92) 45%,rgba(17,17,17,.55) 100%),
      url(foto/ba-atmosfera-1800.webp);
  }
}

/* la riga "Dopo averlo provato" fa da titolo: senza h2 non eredita il
   margine di .sec__head, quindi glielo si da' qui */
.sec--aria > .wrap > .label{margin-bottom:var(--s5)}

.legale__thanks{margin-top:.35rem;font-size:.92em;opacity:.78;border-left:3px solid var(--oro,#B7883A);padding-left:.7rem}

.chg__h{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin:2.4rem 0 .6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.10)}
.chg__v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.15rem;font-weight:700;color:#F0BD58;letter-spacing:.02em}
.chg__d{font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;opacity:.55}