/* =========================================================
   Hotel Positioning · componenti comuni alle sei pagine /problemi/*
   (si appoggia a style.css: token, .card, .btn, .faq, .form…)
   Stile "Essenziale": riquadri arrotondati senza bordo, mist su bianco
   e bianco su mist; il giallo solo come punta (un tratto, un puntino,
   l'unico elemento "scelto" della sezione).
   ---------------------------------------------------------
   hero     .ph-hero .ph-quote .memo(+ li .v .tot .bad .ok)
   tool     .tool .tool-head .tool-row .tool-out .tool-big .tool-note
            input[type=range].rng  .tgl(button[aria-pressed])
   segnali  .sig-wrap .sig-meter .sig-grid .sig .sig-btn
   ponte    .chain3 .ring3(.here)
   prova    .proof
   offerta  .offer .offer .card
   ========================================================= */

/* ---------- hero ---------- */
.ph-hero{padding:clamp(40px,6vw,90px) 0 clamp(64px,8vw,110px);position:relative;overflow:hidden}
.ph-hero h1{font-size:clamp(36px,4.8vw,72px);margin:22px 0 22px;letter-spacing:-.04em}
.ph-hero h1 q{quotes:"«" "»"}
.ph-hero .pull{margin-bottom:22px}
.ph-hero .lead{margin-bottom:28px}
.ph-hero .split{align-items:start}

/* il foglio dei conti: righe con valore a destra */
.memo{background:var(--mist);border-radius:var(--r);padding:clamp(24px,2.8vw,36px);position:relative;max-width:520px;justify-self:end;width:100%}
.memo .memo-h{font:600 14px/1.3 var(--text);color:var(--muted);display:flex;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.memo .memo-h span:first-child{color:var(--ink)}
.memo ul{list-style:none}
.memo li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.35}
.memo li .v{font:600 15px/1.2 var(--text);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.memo li .v.ok{color:var(--ink)}
.memo li .v.bad{color:var(--red)}
.memo .tot{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap;padding-top:20px;margin-top:2px}
.memo .tot span{font:500 14px var(--text);color:var(--muted)}
.memo .tot b{font:700 clamp(32px,3.6vw,48px)/1 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.memo .memo-f{font:400 14px/1.5 var(--text);color:var(--muted);margin-top:14px}
.memo .stamp-tag{top:-13px;right:24px;background:var(--night);color:#F5F5F7}
@media (max-width:980px){.memo{justify-self:start}}

/* ---------- strumento interattivo (calcolatori, test) ---------- */
.tool{background:var(--mist);color:var(--ink);border-radius:var(--r);overflow:hidden}
.sec.alt .tool{background:var(--white)}
.tool-head{padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,28px) 0;font:600 14px/1.3 var(--text);display:flex;justify-content:space-between;align-items:center;gap:6px 12px;flex-wrap:wrap}
.tool-head em{font-style:normal;font-weight:500;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.tool-head em::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.tool-body{padding:clamp(18px,2.4vw,28px);display:grid;gap:20px}
.tool-row{display:grid;gap:10px}
.tool-row label,.tool-row .lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:500 15px/1.3 var(--text);color:var(--ink-2)}
.tool-row output,.tool-row .val{font:600 19px/1 var(--display);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.tool-row small{font:400 13px/1.45 var(--text);color:var(--muted)}
.tool input[type=number],.tool input[type=text],.tool textarea{width:100%;font:400 17px/1.4 var(--text);color:var(--ink);background:var(--white);border:1px solid var(--line);padding:13px 15px;border-radius:12px;transition:border-color .15s,box-shadow .15s}
.tool textarea{min-height:110px;resize:vertical}
.tool input:focus,.tool textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(0,0,0,.06)}
/* cursore: binario sottile, pomello bianco che galleggia */
.rng{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;cursor:pointer}
.rng::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:var(--mist-2)}
.rng::-moz-range-track{height:4px;border-radius:4px;background:var(--mist-2)}
.rng::-moz-range-progress{height:4px;border-radius:4px;background:var(--ink)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:var(--white);border:0;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.18)}
.rng::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--white);border:0;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.18)}
.sec.alt .tool .rng::-webkit-slider-runnable-track{background:var(--line)}
.rng:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* il risultato: un riquadro bianco dentro il riquadro */
.tool-out{background:var(--white);border-radius:var(--r-sm);margin:0 clamp(10px,1.4vw,14px);padding:clamp(18px,2.4vw,26px);display:grid;gap:8px}
.sec.alt .tool-out{background:var(--mist)}
.tool-out .k{font:500 14px/1.3 var(--text);color:var(--muted)}
.tool-big{font:700 clamp(38px,5vw,64px)/1 var(--display);letter-spacing:-.045em;word-break:break-word;font-variant-numeric:tabular-nums}
.tool-out p{font-size:16px;line-height:1.5;color:var(--ink-2);max-width:52ch}
.tool-out p strong{color:var(--ink);font-weight:600}
.tool-note{font:400 13px/1.55 var(--text);color:var(--muted);padding:16px clamp(18px,2.4vw,28px) 22px}
.tool > .tool-out:last-child{margin-bottom:clamp(10px,1.4vw,14px)}
/* interruttore a pillole */
.tgl{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--mist-2);border-radius:980px;padding:3px}
.tgl button{border:0;background:none;border-radius:980px;padding:8px 15px;font:500 14px/1.2 var(--text);color:var(--ink-2);transition:background .2s,color .2s,box-shadow .2s}
.tgl button:hover{color:var(--ink)}
.tgl button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}

/* ---------- i dieci segnali ---------- */
.sig-wrap{display:grid;grid-template-columns:320px 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.sig-meter{position:sticky;top:96px;background:var(--night);color:#F5F5F7;border-radius:var(--r);padding:26px;display:grid;gap:14px;z-index:5}
.sig-meter .k{font:500 14px/1.3 var(--text);color:#A1A1A6}
.sig-meter .score{font:700 clamp(64px,7vw,96px)/.9 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.sig-meter .score small{font-size:.36em;font-weight:600;color:#86868B;letter-spacing:-.02em;margin-left:2px}
.sig-bar{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.sig-bar i{height:6px;border-radius:3px;background:#3A3A3C;transition:background .25s}
.sig-bar i.on{background:var(--yellow)}
.sig-msg{font-size:16px;line-height:1.45;color:#D2D2D7;min-height:4.4em}
.sig-msg b{color:#F5F5F7;font-weight:600}
.sig-meter .btn{width:100%;display:none;--bg:#F5F5F7;--fg:#1D1D1F}
.sig-meter .btn:hover{--bg:#fff}
.sig-meter.hot .btn{display:flex}
.sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sig{background:var(--white);border-radius:var(--r);padding:26px 26px 24px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.sig:hover{box-shadow:var(--sh-lg)}
.sig .n{font:600 14px/1 var(--text);color:var(--muted);font-variant-numeric:tabular-nums}
.sig h3{font-size:clamp(20px,1.9vw,24px)}
.sig p{font-size:16px;line-height:1.5;color:var(--ink-2)}
.sig .pk{font-weight:600;color:var(--ink);padding-top:12px;border-top:1px solid var(--line)}
.sig-btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;border:0;background:var(--mist);color:var(--ink);border-radius:980px;padding:8px 15px 8px 9px;font:500 14px/1.2 var(--text);transition:background .2s,color .2s}
.sig-btn::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);flex:none}
.sig-btn:hover{background:var(--mist-2)}
.sig-btn[aria-pressed="true"]{background:var(--night);color:#F5F5F7}
.sig-btn[aria-pressed="true"]::before{box-shadow:none;background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5' fill='none' stroke='%231D1D1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.sig.on{box-shadow:inset 0 0 0 2px var(--ink)}
@media (max-width:1080px){.sig-grid{grid-template-columns:1fr}}
@media (max-width:860px){
  .sig-wrap{grid-template-columns:1fr}
  .sig-meter{top:68px;grid-template-columns:auto 1fr;align-items:center;gap:8px 16px;padding:14px 18px;border-radius:var(--r-sm);box-shadow:0 10px 30px rgba(0,0,0,.18)}
  .sig-meter .k{grid-column:1 / -1}
  .sig-meter .score{font-size:46px}
  .sig-meter .sig-msg{min-height:0;font-size:14px}
  .sig-meter .sig-bar{grid-column:1 / -1}
  .sig-meter .btn{grid-column:1 / -1;padding:12px 14px;font-size:15px}
  /* spazio in fondo: a fine lista il contatore si posa qui e non copre l'ultimo segnale */
  .sig-grid{padding-bottom:220px}
}

/* ---------- ponte: il sintomo non è la malattia ---------- */
.chain3{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:stretch;margin:6px 0 clamp(48px,6vw,72px)}
.ring3{background:#1C1C1E;border-radius:var(--r);padding:24px;position:relative}
.ring3 .k{font:500 14px var(--text);color:#A1A1A6}
.ring3 h3{margin:10px 0 6px;font-size:clamp(22px,2.2vw,28px)}
.ring3 p{font-size:15.5px;line-height:1.45;color:#A1A1A6}
.ring3.here{background:#F5F5F7;color:#1D1D1F}
.ring3.here p{color:#424245}
.ring3.here .k{color:#6E6E73}
.ring3.here::after{content:"Siete qui";position:absolute;top:-12px;right:20px;background:var(--yellow);color:#1D1D1F;border-radius:980px;padding:6px 11px;font:600 12px/1 var(--text)}
.chain3 .lk{display:grid;place-items:center;font:300 24px var(--text);color:#6E6E73}
@media (max-width:860px){.chain3{grid-template-columns:1fr}.chain3 .lk{height:36px;transform:rotate(90deg)}}

/* ---------- prova ---------- */
.proof{display:grid;grid-template-columns:1.2fr .8fr;background:var(--mist);border-radius:28px;overflow:hidden}
.proof .l{padding:clamp(26px,3.4vw,44px)}
.proof .r{padding:clamp(26px,3.4vw,44px);background:var(--night);color:#F5F5F7;display:flex;flex-direction:column;justify-content:center;gap:14px}
.proof .r .kicker{color:#A1A1A6}
.proof .r b{font:700 clamp(40px,4.6vw,64px)/1 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.proof .r b s{font-size:.5em;font-weight:600;color:#86868B;text-decoration-thickness:2px;text-decoration-color:#86868B;margin-right:6px;letter-spacing:-.03em}
.proof .r .case-honest{font:400 13.5px/1.55 var(--text);color:#A1A1A6;border-top:1px solid #3A3A3C;padding-top:16px}
.proof h3{font-size:clamp(24px,2.6vw,34px);margin:14px 0 20px}
.proof ol{list-style:none;display:grid;gap:14px;counter-reset:pr}
.proof ol li{counter-increment:pr;display:grid;grid-template-columns:30px 1fr;gap:14px;font-size:17px;line-height:1.45;color:var(--ink-2)}
.proof ol li::before{content:counter(pr);width:30px;height:30px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;font:700 14px var(--display);color:var(--ink)}
@media (max-width:900px){.proof{grid-template-columns:1fr}}

/* ---------- offerta compatta ---------- */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.offer .card{display:flex;flex-direction:column;gap:14px}
.offer .price{font:700 clamp(44px,5vw,68px)/1 var(--display);letter-spacing:-.045em}
.offer .price small{font:500 15px var(--text);letter-spacing:0;color:var(--muted);margin-left:8px}
.offer .check-list{gap:10px}
.offer .check-list li{font-size:16px}
.offer .btn{margin-top:auto;align-self:stretch}
.offer .card.ink .kicker b{color:#F5F5F7}
.offer .card.ink .btn{--bg:#F5F5F7;--fg:#1D1D1F}
.offer .card.ink .btn:hover{--bg:#fff}
.offer .card.ink .check-list li::before{background-color:#F5F5F7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5' fill='none' stroke='%231D1D1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.offer-more{margin-top:28px;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;font:500 16px var(--text)}
.offer-more a{text-decoration:none;color:var(--ink)}
.offer-more a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){.offer{grid-template-columns:1fr}}

/* ---------- candidatura ---------- */
.cand{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:start}
.cand .check-list{margin-top:26px}
/* etichetta del form condiviso: stile inline del partial, qui riportata allo stile essenziale */
.form legend.lab{font:500 14px/1.3 var(--text)!important;letter-spacing:0!important;text-transform:none!important}
@media (max-width:900px){.cand{grid-template-columns:1fr}}

/* parole evidenziate dai test: il tratto giallo, non il riquadro */
mark.gen{background:linear-gradient(transparent 70%,var(--yellow) 70%,var(--yellow) 94%,transparent 94%);color:inherit;padding:0 1px}

@media (prefers-reduced-motion:reduce){.sig{transition:none}}