/* =========================================================
   /install · install.css (P5)
   Solo posizione, spazi e classi della pagina (in-). Colori, font e ombre
   vengono dai token di site.css. Niente backdrop-filter.
   ========================================================= */

/* ---------- 1. hero: scelta del telefono ---------- */
.in-hero{overflow-x:clip}
.in-hero .install-in{align-items:start}
.in-hero .install-copy{min-width:0;max-width:620px}
.in-hero .h1{max-width:12ch}
.in-hero .lead{margin-top:24px;max-width:26.5em}   /* la prima frase su una riga, "Scegli il tuo telefono" sotto */
.in-hero .inapp.is-on{margin:28px 0 0}
.in-hero .os-toggle{margin:36px 0 34px}
.in-hero .in-note{margin-top:26px;max-width:34em}
.in-hero .cta-row{margin-top:34px}
/* come negli altri hero: il bottone rosso fa un solo riflesso dopo l'ingresso */
.js.is-loaded .in-hero .cta-row .btn-primary::after{animation:shine 1.1s var(--ease-out) 1.7s 1 backwards}
html.is-shot .in-hero .cta-row .btn-primary::after{animation:none}

/* con JS: si vede solo il telefono scelto (prima che widgets.js metta hidden, niente salto) */
.js .in-hero:has(button[data-os="ios"][aria-pressed="true"]) [data-for="android"],
.js .in-hero:has(button[data-os="ios"][aria-pressed="true"]) [data-os-only="android"],
.js .in-hero:has(button[data-os="android"][aria-pressed="true"]) [data-for="ios"],
.js .in-hero:has(button[data-os="android"][aria-pressed="true"]) [data-os-only="ios"]{display:none}
/* senza JS: niente scelta, tutti e due i percorsi uno sotto l'altro */
html:not(.js) .in-hero .os-toggle{display:none}
html:not(.js) .in-hero .in-steps{margin-top:36px}
.in-os-h{margin:0 0 16px;font:600 19px/1.25 var(--f-head);letter-spacing:-.02em;color:var(--text)}
html:not(.js) .in-os-h+.steps{margin-bottom:36px}
.js .in-os-h{display:none}

/* i passi del telefono scelto entrano uno dopo l'altro (anche a ogni cambio di telefono) */
.js .in-st{animation:in-st .7s var(--ease-out) calc(var(--i) * 90ms + 60ms) both}
@keyframes in-st{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.is-shot .in-st{animation:none}
.is-calm .in-st{animation-name:in-st-calm}
@keyframes in-st-calm{from{opacity:0}to{opacity:1}}

/* telefono + luce */
.in-phone{justify-self:center;width:100%;padding-top:clamp(0px,2vw,24px)}
.in-hero .install-phone .dev.phone{width:min(100%,320px)}
.in-hero .install-phone .light{inset:-10% -8%}
.in-phone-cap{position:relative;margin-top:30px;text-align:center}
@media (min-width:1024px){
  .in-hero .install-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
@media (max-width:1023px){
  .in-hero .install-copy{max-width:640px}
  .in-hero .install-phone{order:0}                      /* sul telefono prima i passi, poi l'app */
  .in-hero .install-phone .dev.phone{width:min(50vw,230px)}
  .in-hero .install-phone .light{inset:-6% 0}
}
@media (max-width:719px){
  .in-hero .os-toggle{margin:28px 0 30px}
  .in-hero .cta-row .btn{width:100%}
  .in-phone{padding-top:8px}
}

/* ---------- 2-3. titoli di sezione: titolo a sinistra, frase a destra (desktop) ---------- */
@media (min-width:1024px){
  .in-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:end;gap:0 clamp(32px,5vw,96px);max-width:none}
  .in-head>*+*{margin-top:0}
  .in-head .body-lg{padding-bottom:.35em}
}
.in-reasons li{gap:14px}
.in-why-x{display:block;max-width:24em;font:400 16px/1.55 var(--f-body);letter-spacing:0;color:var(--text-2)}
.in-why-note{margin-top:28px;max-width:40em}
.in-acc .tlinks{margin-top:32px}

/* ---------- 4. sul computer: una riga, con la barra del browser ---------- */
.in-desk-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);align-items:center;gap:28px clamp(32px,4vw,72px)}
.in-desk-copy .tlinks{margin-top:14px}
.in-bar{display:flex;align-items:center;gap:14px;height:62px;padding:0 10px 0 20px;border-radius:var(--r-btn);background:var(--cell);border:1px solid var(--line-2);box-shadow:var(--sh-plate);min-width:0}
.in-bar-dots{display:flex;gap:6px;flex:none}
.in-bar-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-3)}
.in-bar-field{position:relative;flex:1;display:flex;align-items:center;gap:3px;height:42px;padding:0 18px;border-radius:var(--r-btn);background:var(--bg);border:1px solid var(--line);min-width:0;overflow:hidden}
.in-bar-url{font:600 17px/1 var(--f-body);letter-spacing:-.01em;color:var(--text);white-space:nowrap}
.in-bar-caret{flex:none;width:2px;height:20px;border-radius:2px;background:var(--red)}
/* la barra "scrive" l'indirizzo quando entra in vista, poi il cursore resta fermo */
.js .in-bar:not(.in) .in-bar-url{clip-path:inset(0 100% 0 0)}
.js .in-bar .in-bar-url{transition:clip-path 1s steps(16,end) .35s}
.js .in-bar:not(.in) .in-bar-caret{opacity:0}
.js .in-bar .in-bar-caret{transition:opacity .3s ease 1.35s}
.is-calm .in-bar .in-bar-url{clip-path:none!important;transition:opacity .6s ease .3s}
.is-calm.js .in-bar:not(.in) .in-bar-url{opacity:0}
@media (max-width:1023px){
  .in-desk-in{grid-template-columns:minmax(0,1fr)}
  .in-bar{max-width:460px}
}
@media (max-width:719px){
  .in-bar{height:56px;padding-left:16px}
  .in-bar-field{height:38px;padding:0 14px}
  .in-bar-url{font-size:15.5px}
}

/* ---------- 5. domande: titolo a sinistra (fermo), risposte a destra ---------- */
.in-faq-head .small{margin-top:18px}
@media (min-width:1024px){
  .in-faq-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:0 clamp(40px,6vw,120px);align-items:start}
  .in-faq-head{position:sticky;top:calc(var(--head) + 40px)}
  .in-faq .faq{border-top:1px solid var(--line)}
}
@media (max-width:1023px){
  .in-faq .faq{margin-top:36px;border-top:1px solid var(--line)}
}

/* ---------- 6. ultima riga: la virgola resta attaccata alla parola sottolineata ---------- */
.in-nw{white-space:nowrap}