/* ===================================================================
   ARTEMISIA MARKETS — Landing IB
   Mobile first. Palette e font ereditati da artemisiamarkets.com,
   ribaltati su fondo scuro: il logo è argento e oro, nasce per il dark.
   Niente testo sotto i 14px: si legge tutto, anche al telefono.
   =================================================================== */

/* ---------- Font (self-hosted, stessi file del sito madre) ---------- */
@font-face{font-family:'Instrument Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url(../fonts/instrument-400.woff2) format('woff2');}
@font-face{font-family:'Instrument Sans';font-weight:500;font-style:normal;font-display:swap;
  src:url(../fonts/instrument-500.woff2) format('woff2');}
@font-face{font-family:'Instrument Sans';font-weight:600;font-style:normal;font-display:swap;
  src:url(../fonts/instrument-600.woff2) format('woff2');}
@font-face{font-family:'Jakarta';font-weight:500;font-style:normal;font-display:swap;
  src:url(../fonts/jakarta-500.woff2) format('woff2');}
@font-face{font-family:'Jakarta';font-weight:600;font-style:normal;font-display:swap;
  src:url(../fonts/jakarta-600.woff2) format('woff2');}
@font-face{font-family:'Jakarta';font-weight:700;font-style:normal;font-display:swap;
  src:url(../fonts/jakarta-700.woff2) format('woff2');}
@font-face{font-family:'Jakarta';font-weight:800;font-style:normal;font-display:swap;
  src:url(../fonts/jakarta-800.woff2) format('woff2');}

:root{
  --bg:#060b17;
  --bg-2:#0a1122;
  --panel:#0e1729;
  --panel-2:#131e38;

  --line:rgba(201,178,122,.16);
  --line-soft:rgba(255,255,255,.08);
  --line-hard:rgba(255,255,255,.15);

  --ink:#f3f6fb;
  --ink-2:#c2cddf;
  --muted:#8b99b1;      /* alzato: sotto questo non passa il contrasto AA */

  --gold:#c9b27a;
  --gold-hi:#e6d5a8;
  --gold-deep:#8a6d2f;
  --amber:#e8801a;
  --amber-hi:#ff9a3d;

  --up:#22c55e;
  --down:#ef4444;

  --display:'Jakarta',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --shell:72rem;
  --pad:1.25rem;
  --r:14px;
  --r-lg:20px;

  --t:cubic-bezier(.2,.7,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
/* `hidden` deve vincere su qualsiasi display dichiarato dopo (flex, grid...):
   senza questa riga il bottone "Avanti" resta a schermo anche da nascosto. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:var(--body);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}

h1,h2,h3{
  font-family:var(--display);color:var(--ink);
  line-height:1.08;letter-spacing:-.025em;margin:0 0 .6em;text-wrap:balance;
}
h1{font-weight:800;font-size:clamp(1.7rem,7vw,4rem);letter-spacing:-.035em}
h2{font-weight:800;font-size:clamp(2rem,6vw,2.8rem)}
h3{font-weight:700;font-size:clamp(1.2rem,3.4vw,1.5rem)}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.band{padding-block:clamp(3.5rem,11vw,7rem)}
.band--tight{padding-block:clamp(2.4rem,7vw,4rem)}
.band--alt{background:var(--bg-2)}
.hairline{border-top:1px solid var(--line-soft)}

.lede{font-size:1rem;color:var(--ink-2);max-width:46ch}

/* Testata centrata delle sezioni senza illustrazione */
.midhead{max-width:44rem;margin:0 auto clamp(2rem,6vw,3rem);text-align:center}
.midhead .lede{margin-inline:auto}

/* =================================================================
   BOTTONI
   ================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  padding:.95rem 1.5rem;border-radius:12px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;min-height:48px;
  transition:transform .18s var(--t),box-shadow .25s var(--t),background .25s var(--t);
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:linear-gradient(180deg,var(--amber-hi),var(--amber));color:#180a00;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:hover{background:linear-gradient(180deg,#ffa74f,var(--amber-hi))}
.btn--primary:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.btn--ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line-hard)}
.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:var(--gold)}
.btn--lg{padding:1.1rem 1.9rem;font-size:1.08rem;border-radius:13px;min-height:56px}
.btn--block{width:100%}
.btn__arrow{transition:transform .22s var(--t)}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* =================================================================
   HERO — la headline prende tutta la larghezza, sotto due colonne
   ================================================================= */
.hero{
  position:relative;overflow:hidden;
  padding-top:clamp(2rem,7vw,3.5rem);
  padding-bottom:clamp(3rem,9vw,5rem);
  background:
    radial-gradient(90rem 42rem at 80% -14%,rgba(232,128,26,.15),transparent 62%),
    radial-gradient(60rem 34rem at 4% 6%,rgba(201,178,122,.10),transparent 60%),
    var(--bg);
}

.hero__in{display:grid;gap:2.5rem}

.hero__logo{height:40px;width:auto;margin-bottom:clamp(1.8rem,5vw,2.6rem)}
@media (min-width:48em){.hero__logo{height:48px}}

.hero__head h1{margin-bottom:0}
h1 .hl{color:var(--gold-hi)}

.hero__sub{font-size:1rem;color:var(--ink-2);max-width:44ch;margin-bottom:1.8rem}

/* I vantaggi, in elenco */
.wins{list-style:none;margin:0 0 2.2rem;padding:0;display:grid;gap:1.1rem}
.wins li{display:flex;gap:.85rem;align-items:center;font-size:1.125rem;line-height:1.45}
.wins li b{color:var(--ink);font-weight:600}
.wins svg{
  flex:none;width:26px;height:26px;color:var(--gold);
  padding:4px;border-radius:50%;background:rgba(201,178,122,.12);
}

@media (min-width:62em){
  .hero__in{grid-template-columns:1fr 1fr;column-gap:3.5rem;row-gap:3rem;align-items:start}
  .hero__head{grid-column:1/-1}
  .hero__head h1{max-width:21ch}
}

/* ---------- Il quadrante: fin dove arriva il tuo deal ---------- */
.gauge{
  margin:0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:
    radial-gradient(34rem 18rem at 50% 0%,rgba(201,178,122,.10),transparent 68%),
    linear-gradient(180deg,rgba(19,30,56,.9),rgba(10,17,34,.85));
  box-shadow:0 30px 70px -45px #000,inset 0 1px 0 rgba(255,255,255,.05);
  padding:clamp(1.2rem,4vw,2rem);
}
@media (min-width:62em){.gauge{align-self:center}}

/* L'arco si riempie all'ingresso. Senza JS parte gia' pieno. */
.gauge__fill{stroke-dasharray:352;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.6s var(--t)}
.anim .rise:not(.is-in) .gauge__fill{stroke-dashoffset:352}

.gauge__key{
  display:grid;gap:.6rem;margin-top:1.2rem;padding-top:1.2rem;
  border-top:1px solid var(--line-soft);
}
.gauge__k{display:flex;align-items:center;gap:.6rem;font-size:.95rem;color:var(--ink-2)}
.gauge__k b{color:var(--ink);font-weight:600}
.gauge__sw{flex:none;width:12px;height:12px;border-radius:3px}
.gauge__sw--gold{background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi))}
.gauge__sw--grey{background:#b9c5d9}

/* =================================================================
   LOGHI CONTROPARTI
   ================================================================= */
.banks{padding-block:clamp(2.4rem,6vw,3.4rem);background:var(--bg-2);
  border-block:1px solid var(--line-soft)}
.banks__lbl{
  text-align:center;font-size:.95rem;color:var(--muted);
  margin-bottom:1.6rem;padding-inline:var(--pad);line-height:1.5;
}
.banks__lbl p{margin:0}
.banks__lbl b{color:var(--gold);font-weight:600}
.marquee{position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;gap:clamp(2rem,6vw,3.6rem);
  padding-inline:1.5rem;align-items:center}
@media (prefers-reduced-motion:no-preference){
  .marquee__track{animation:slide 46s linear infinite}
  .marquee:hover .marquee__track{animation-play-state:paused}
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee img{
  height:clamp(19px,4.4vw,26px);width:auto;flex:none;
  filter:brightness(0) invert(1);opacity:.58;transition:opacity .3s var(--t);
}
.marquee img:hover{opacity:1}


/* =================================================================
   RECENSIONI (slot da riempire)
   ================================================================= */
.revs{display:grid;gap:1rem}
@media (min-width:44em){.revs{grid-template-columns:repeat(3,1fr)}}
.rev{
  padding:1.5rem 1.4rem;border-radius:var(--r);
  border:1px solid var(--line-soft);background:rgba(255,255,255,.025);
  display:flex;flex-direction:column;gap:1rem;
}
.rev__txt{font-size:1rem;color:var(--ink);line-height:1.6;margin:0}
.rev__who{margin:0;font-size:.92rem;color:var(--gold);font-weight:600;
  font-family:var(--display)}
.rev__who span{display:block;color:var(--muted);font-weight:400;
  font-family:var(--body);font-size:.88rem}

.rev__stars{display:flex;gap:.2rem}
.rev__stars svg{width:17px;height:17px;fill:var(--gold);flex:none}

/* Il testo non l'ha ancora scritto nessun IB vero: finche' e' cosi' la card
   lo dice, ma sottovoce — non deve sembrare un cartello di lavori in corso. */
.rev__nota{
  margin-top:-.4rem;font-size:.78rem;color:var(--muted);opacity:.7;
  font-style:italic;
}

/* =================================================================
   BLOCCO ARGOMENTO (testo + illustrazione)
   ================================================================= */
.arg{display:grid;gap:2.2rem}
@media (min-width:60em){
  .arg{grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
  .arg--flip .arg__fig{order:-1}
}
.arg__copy p{color:var(--ink-2)}
.arg__copy p b{color:var(--ink);font-weight:600}

.arg__fig{
  margin:0;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  background:
    radial-gradient(40rem 20rem at 70% 0%,rgba(201,178,122,.07),transparent 65%),
    linear-gradient(180deg,rgba(19,30,56,.75),rgba(10,17,34,.6));
  padding:clamp(1.2rem,4vw,2rem);
  box-shadow:0 30px 70px -45px #000;
}

/* Alcune figure sono gia' fatte di riquadri: non le chiudo in un'altra card */
.arg__fig--bare{border:0;background:none;box-shadow:none;padding:0}

.ticks{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.9rem}
.ticks li{display:flex;gap:.8rem;align-items:flex-start;font-size:1rem;color:var(--ink-2)}
.ticks svg{flex:none;width:21px;height:21px;margin-top:.14rem;color:var(--gold)}
.ticks--cross svg{color:var(--down)}

/* Il ribaltamento: la frase positiva dopo l'elenco dei problemi */
.turn{
  margin-top:1.5rem;padding:1.1rem 1.25rem;border-radius:var(--r);
  background:rgba(201,178,122,.08);border:1px solid var(--line);
  color:var(--ink-2);font-size:1rem;
}
.turn b{color:var(--gold-hi);font-weight:600}

/* =================================================================
   ILLUSTRAZIONE 1 — lo spread e il margine
   ================================================================= */
.spl{display:grid;gap:1.5rem}
.spl__row{display:grid;gap:.55rem}
.spl__hd{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.spl__who{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink-2)}
.spl__row--us .spl__who{color:var(--gold-hi)}
.spl__tot{font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
.spl__bar{display:flex;height:52px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line-soft);background:rgba(0,0,0,.25)}
.spl__seg{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:.9rem;
  width:var(--w);white-space:nowrap;overflow:hidden;
  font-variant-numeric:tabular-nums;
  /* Il segmento sta gia' alla sua larghezza finale e si svela con una
     mascherina: niente reflow a ogni frame e le cifre dentro non si
     schiacciano, come farebbe uno scaleX. */
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s var(--t);
}
.anim .rise:not(.is-in) .spl__seg{clip-path:inset(0 100% 0 0)}
.spl__seg--broker{background:linear-gradient(180deg,#2c3852,#222c42);color:#a3b2cc}
.spl__seg--you{background:linear-gradient(180deg,#3b2c14,#2a1f0d);color:var(--gold)}
.spl__row--us .spl__seg--you{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#1a1204;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.spl__legend{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.92rem;color:var(--muted);
  padding-top:.6rem;border-top:1px solid var(--line-soft)}
.spl__key{display:inline-flex;align-items:center;gap:.5rem}
.spl__sw{width:12px;height:12px;border-radius:3px;flex:none}

/* =================================================================
   ILLUSTRAZIONE 2 — l'ombrello legale
   ================================================================= */
.umb{width:100%;height:auto;overflow:visible}
.umb .strike{transform-origin:left center;transition:transform .6s var(--t) .6s}
.anim .rise:not(.is-in) .umb .strike{transform:scaleX(0)}

/* =================================================================
   ILLUSTRAZIONE 3 — A-book contro market maker, due pannelli gemelli
   ================================================================= */
.flow{display:grid;gap:1rem}
@media (min-width:30em){.flow{grid-template-columns:1fr 1fr}}
.flow__side{
  border:1px solid var(--line-soft);border-radius:var(--r);
  padding:1.1rem 1rem 1.3rem;background:rgba(0,0,0,.22);
}
.flow__side--bad{border-color:rgba(239,68,68,.24)}
.flow__side--good{border-color:rgba(201,178,122,.32);background:rgba(201,178,122,.05)}
.flow__ttl{
  font-family:var(--display);font-weight:700;font-size:.85rem;
  letter-spacing:.07em;text-transform:uppercase;margin-bottom:1rem;text-align:center;
}
.flow__side--bad .flow__ttl{color:#f4998f}
.flow__side--good .flow__ttl{color:var(--gold-hi)}
.flow svg{width:100%;height:auto;overflow:visible}

@media (prefers-reduced-motion:no-preference){
  .flow-dash{stroke-dasharray:5 7;animation:dash 1.1s linear infinite}
  .flow-dash--slow{animation-duration:2.2s}
}
@keyframes dash{to{stroke-dashoffset:-24}}

/* =================================================================
   CALCOLATORE
   ================================================================= */
.calc{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:
    radial-gradient(50rem 26rem at 85% -10%,rgba(232,128,26,.10),transparent 60%),
    linear-gradient(180deg,rgba(19,30,56,.9),rgba(10,17,34,.9));
  box-shadow:0 40px 90px -50px #000;overflow:hidden;
}
.calc__in{display:grid}
@media (min-width:58em){.calc__in{grid-template-columns:1.02fr .98fr}}
.calc__fields{padding:clamp(1.3rem,4.5vw,2.1rem)}
.calc__out{padding:clamp(1.3rem,4.5vw,2.1rem);background:rgba(0,0,0,.3);
  border-top:1px solid var(--line-soft)}
@media (min-width:58em){.calc__out{border-top:0;border-left:1px solid var(--line-soft)}}

.seg{
  display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;
  background:rgba(0,0,0,.3);border:1px solid var(--line-soft);border-radius:12px;
  margin-bottom:1.6rem;
}
.seg button{
  appearance:none;border:0;background:transparent;color:var(--muted);
  font-family:var(--display);font-weight:600;font-size:.95rem;
  padding:.75rem .5rem;border-radius:9px;cursor:pointer;min-height:44px;
  transition:background .2s var(--t),color .2s var(--t);
}
.seg button[aria-selected="true"]{background:rgba(255,255,255,.09);color:var(--ink)}

.field{margin-bottom:1.6rem}
.field:last-child{margin-bottom:0}
.field__lbl{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem;
  color:var(--ink);margin-bottom:.2rem}
.field__hint{display:block;font-size:.92rem;color:var(--muted);margin-bottom:.75rem;
  line-height:1.5}

.inputwrap{position:relative;display:flex;align-items:center}
.inputwrap__pre,.inputwrap__suf{position:absolute;font-size:1rem;color:var(--muted);
  font-weight:500;pointer-events:none}
.inputwrap__pre{left:1rem}
.inputwrap__suf{right:1rem}
input[type=number],input[type=text],input[type=email]{
  width:100%;appearance:none;-webkit-appearance:none;
  background:rgba(0,0,0,.35);border:1px solid var(--line-hard);border-radius:12px;
  color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.1rem;
  padding:.95rem 1rem;font-variant-numeric:tabular-nums;
  transition:border-color .2s var(--t),box-shadow .2s var(--t);
}
.inputwrap--pre input{padding-left:2.25rem}
.inputwrap--suf input{padding-right:4.6rem}
input:focus{outline:0;border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,128,26,.18)}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.chips button{
  appearance:none;cursor:pointer;background:rgba(255,255,255,.04);
  border:1px solid var(--line-hard);color:var(--ink-2);border-radius:99px;
  padding:.4rem 1rem;min-height:42px;font-size:.95rem;font-weight:500;
  transition:background .2s var(--t),border-color .2s var(--t),color .2s var(--t);
}
.chips button:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.chips button.is-on{background:rgba(201,178,122,.18);border-color:var(--gold);color:var(--gold-hi)}

.slider{margin-top:.6rem}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;
  background:transparent;cursor:pointer;display:block}
input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi))}
input[type=range]::-moz-range-track{height:7px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;
  border-radius:50%;margin-top:-9px;background:#fff;border:3px solid var(--amber);
  box-shadow:0 3px 12px rgba(0,0,0,.6)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;
  background:#fff;border:3px solid var(--amber);box-shadow:0 3px 12px rgba(0,0,0,.6)}
input[type=range]:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.slider__scale{display:flex;justify-content:space-between;font-size:.9rem;
  color:var(--muted);font-variant-numeric:tabular-nums}

.out__lbl{font-size:1rem;color:var(--muted);font-weight:500;margin-bottom:.9rem}
.out__big{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(2.5rem,11vw,3.6rem);color:var(--gold-hi);
  font-variant-numeric:tabular-nums;margin-bottom:.35rem}
.out__unit{font-size:1rem;color:var(--muted);margin-bottom:1.6rem}
.out__grid{display:grid;margin-bottom:1.6rem}
.out__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--line-soft)}
.out__row:last-child{border-bottom:0}
.out__k{font-size:1rem;color:var(--ink-2)}
.out__v{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.out__row--hi{background:rgba(232,128,26,.09);margin-inline:-.85rem;padding-inline:.85rem;
  border-radius:10px;border-bottom:0;margin-block:.4rem}
.out__row--hi .out__k{color:var(--ink);font-weight:600}
.out__row--hi .out__v{color:var(--amber-hi);font-size:1.25rem}

/* =================================================================
   VIDEO TESTIMONIANZE (slot)
   ================================================================= */
.vids{display:grid;gap:1.1rem}
@media (min-width:44em){.vids{grid-template-columns:repeat(3,1fr)}}
.vid{aspect-ratio:9/13;display:grid}
@media (min-width:44em){.vid{aspect-ratio:9/14}}
.vid__ph{
  display:grid;place-items:center;text-align:center;padding:1.5rem;
  border:1px dashed var(--line-hard);border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  color:var(--muted);font-size:.95rem;line-height:1.5;
}
.vid__ph span{opacity:.65}

/* =================================================================
   FORM A STEP
   ================================================================= */
.final{
  background:radial-gradient(60rem 30rem at 50% 0%,rgba(232,128,26,.13),transparent 62%),
    var(--bg-2);
}
#af{max-width:40rem;margin-inline:auto}
#af *{box-sizing:border-box}

.w-card{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(19,30,56,.94),rgba(10,17,34,.94));
  box-shadow:0 40px 90px -50px #000;
}
.w-progress{height:3px;background:rgba(255,255,255,.07)}
/* scaleX invece di width: la barra non contiene testo, niente da deformare
   e niente reflow a ogni step */
.w-progress-fill{height:100%;width:100%;transform:scaleX(.2);transform-origin:left;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));
  transition:transform .45s var(--t)}

.w-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1.2rem,4vw,1.9rem);border-bottom:1px solid var(--line-soft);
  font-size:.92rem;color:var(--muted);
}
.w-count{font-family:var(--display);font-weight:600;color:var(--gold)}

.w-body{padding:clamp(1.4rem,4.5vw,2rem)}
.w-step{display:none}
.w-step.active{display:block;animation:wEnter .42s cubic-bezier(.22,1,.36,1)}
@keyframes wEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.w-q{font-size:clamp(1.3rem,4.4vw,1.6rem);margin-bottom:.4rem;line-height:1.2}
.w-sub{font-size:1rem;color:var(--muted);margin-bottom:1.5rem;line-height:1.55}

.w-options{display:grid;gap:.6rem}
.w-option{
  display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;
  padding:1rem 1.1rem;min-height:60px;cursor:pointer;
  background:rgba(255,255,255,.035);border:1px solid var(--line-hard);
  border-radius:12px;color:var(--ink);
  white-space:normal;word-break:break-word;
  transition:border-color .2s var(--t),background .2s var(--t);
}
.w-option:hover{background:rgba(255,255,255,.07);border-color:rgba(201,178,122,.45)}
.w-option.selected{
  border-color:var(--gold);background:rgba(201,178,122,.14);
  box-shadow:inset 0 0 0 1px var(--gold);
}
.w-step.active .w-option{animation:wSlideUp .38s cubic-bezier(.22,1,.36,1) both}
.w-step.active .w-option:nth-child(1){animation-delay:.04s}
.w-step.active .w-option:nth-child(2){animation-delay:.09s}
.w-step.active .w-option:nth-child(3){animation-delay:.14s}
.w-step.active .w-option:nth-child(4){animation-delay:.19s}
.w-step.active .w-option:nth-child(5){animation-delay:.24s}
.w-step.active .w-option:nth-child(6){animation-delay:.29s}
@keyframes wSlideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .w-step.active,.w-step.active .w-option{animation:none}
}

.w-ico{flex:none;font-size:1.25rem;line-height:1}
.w-label{flex:1;min-width:0;font-size:1.02rem;font-weight:500;line-height:1.4}
.w-check{
  flex:none;width:24px;height:24px;border-radius:50%;display:none;
  align-items:center;justify-content:center;font-size:.8rem;
  background:var(--gold);color:#1a1204;font-weight:700;
}
.w-option.selected .w-check{display:flex;animation:wPop .25s cubic-bezier(.22,1,.36,1)}
@keyframes wPop{from{transform:scale(0)}to{transform:scale(1)}}

.w-field{margin-bottom:1.2rem}
.w-lbl{display:block;font-family:var(--display);font-weight:600;font-size:1rem;
  color:var(--ink);margin-bottom:.45rem}
.w-lbl span{color:var(--muted);font-weight:400}
#af input[type=text]{font-family:var(--body);font-weight:500;font-size:16px}
#af input[type=text]::placeholder{color:#75839b}
.w-inputwrap{position:relative;display:flex;align-items:center}
.w-pre{position:absolute;left:1rem;font-size:1.05rem;color:var(--muted);
  font-weight:600;pointer-events:none}
.w-inputwrap input{padding-left:2.3rem}
.w-hint{display:block;font-size:.9rem;color:var(--muted);margin-top:.4rem}

.w-plain{
  appearance:none;background:none;border:0;cursor:pointer;padding:.6rem 0;
  color:var(--muted);font-size:.95rem;text-decoration:underline;
  text-underline-offset:3px;min-height:44px;
}
.w-plain:hover{color:var(--gold)}

.w-consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;
  color:var(--muted);line-height:1.5;cursor:pointer;margin-top:1.2rem}
.w-consent input{flex:none;width:20px;height:20px;margin-top:.15rem;accent-color:var(--amber)}
.w-consent a{color:var(--gold)}

/* slide informativa condizionale */
.w-slide{text-align:center}
.w-slide__ico{font-size:2.4rem;margin-bottom:.8rem}
.w-slide__bar{height:3px;background:rgba(255,255,255,.08);border-radius:99px;
  overflow:hidden;margin-top:1.6rem}
.w-slide__bar i{display:block;height:100%;width:0;background:var(--gold)}

.w-rejection,.w-thanks{padding:clamp(1.8rem,6vw,2.6rem);text-align:center}
.w-rejection .w-sub,.w-thanks .w-sub{margin-inline:auto;max-width:34ch}

.w-nav{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem clamp(1.2rem,4vw,1.9rem);border-top:1px solid var(--line-soft);
  background:rgba(0,0,0,.2);
}
.w-back{
  appearance:none;background:none;border:0;cursor:pointer;
  color:var(--muted);font-size:.98rem;font-weight:500;padding:.6rem .2rem;min-height:44px;
}
.w-back:hover{color:var(--ink)}
.w-next{margin-left:auto}
.w-note{margin-top:1rem;font-size:.92rem;color:#fca5a5;text-align:center}
.w-note code{background:rgba(255,255,255,.07);padding:.1rem .35rem;border-radius:4px}

/* =================================================================
   FOOTER
   ================================================================= */
.foot{background:var(--bg);border-top:1px solid var(--line-soft);
  padding-block:clamp(2.4rem,7vw,3.4rem);font-size:.95rem;color:var(--muted)}
.foot img{height:34px;width:auto;margin-bottom:1.6rem}
.foot__risk{
  border:1px solid var(--line-soft);border-radius:var(--r);
  padding:1.1rem 1.2rem;background:rgba(255,255,255,.02);
  font-size:.92rem;line-height:1.6;margin-bottom:1.4rem;max-width:60rem;
}
.foot__legal{font-size:.9rem;line-height:1.6;max-width:60rem}
.foot__legal a{color:var(--gold)}

/* =================================================================
   CTA MOBILE FISSA
   ================================================================= */
.stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:.65rem var(--pad);
  padding-bottom:calc(.65rem + env(safe-area-inset-bottom,0px));
  background:rgba(6,11,23,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-soft);
  transform:translateY(110%);transition:transform .35s var(--t);
}
.stickycta.is-on{transform:translateY(0)}
@media (min-width:62em){.stickycta{display:none}}
body.has-sticky{padding-bottom:5.5rem}
@media (min-width:62em){body.has-sticky{padding-bottom:0}}

/* =================================================================
   ENTRATA IN SCENA
   Lo stato di partenza nascosto esiste solo se il JS ha marcato <html>:
   senza JS, con reduced-motion o in uno screenshot la pagina e' completa.
   ================================================================= */
@media (prefers-reduced-motion:no-preference){
  .anim .rise{opacity:0;transform:translateY(18px);
    transition:opacity .7s var(--t),transform .7s var(--t)}
  .anim .rise.is-in{opacity:1;transform:none}
  .anim .draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
    transition:stroke-dashoffset 1.4s var(--t)}
  .anim .is-in .draw{stroke-dashoffset:0}
}