/* =====================================================================
   HF Copisteria — sim.css
   Home §4: simulazione del configuratore su iPhone (partial home-sim.php, JS sim.js).
   Agente "simulazione". Usa solo i token di base.css.

   Due layout:
   - STATICO (base): senza JS, con prefers-reduced-motion, senza GSAP (.sim--static):
     i 5 passi in lista, ogni passo accanto (desktop) o sopra (mobile) alla sua schermata.
   - LIVE (.js:not(.reduced-motion) .sim:not(.sim--static)): traccia sticky 5×100svh,
     testi a sinistra, iPhone in CSS a destra (mobile: colonna unica).
   Dentro lo schermo tutto è in em: 1em = 16 pt di un iPhone largo 393 pt.
   ===================================================================== */

.sim {
  position: relative;
  background: var(--bg-alt);
  color: var(--ink);
}

/* ---------- Testi (comuni) ---------- */
.sim-eyebrow { margin-bottom: 8px; }
.sim-title {
  font-size: var(--fs-h2);
  line-height: 1.07;
  letter-spacing: -.02em;
  font-weight: 600;
}
.sim-title-2 { display: block; }
.sim-steps { list-style: none; padding: 0; margin: 0; }
.sim-step-text {
  font-size: clamp(19px, 15.29px + .952vw, 28px);
  line-height: 1.25;
  letter-spacing: -.015em;
  font-weight: 600;
  color: var(--ink-2);
  max-width: 21em;
  text-wrap: pretty;
}
.sim-step-text strong { color: var(--ink); font-weight: 600; }
.sim-step-n { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.sim-ctas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 26px;
}
.sim-ctas .link-cta { font-size: 17px; }
.sim-dots { display: none; }

/* =====================================================================
   Schermate del telefono (comuni ai due layout)
   ===================================================================== */
.sim-scr {
  --top: 1.25em;
  position: relative;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.25;
  letter-spacing: -.012em;
  text-align: left;
  padding-top: var(--top);
  -webkit-user-select: none; user-select: none;
}
.sim-scr svg { display: block; }
.sim-num { font-variant-numeric: tabular-nums; }

/* barra di navigazione dell'app */
.sim-nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 2.75em;
  padding: 0 1.1em 0 1em;
}
.sim-nav-brand { display: flex; align-items: center; gap: .45em; font-size: 1.0625em; font-weight: 600; letter-spacing: -.02em; }
.sim-wheel {
  width: 1.15em; height: 1.15em; border-radius: 50%;
  background: var(--spectrum);
  -webkit-mask: radial-gradient(circle, transparent 0 27%, #000 29%);
  mask: radial-gradient(circle, transparent 0 27%, #000 29%);
}
.sim-nav-back { display: flex; align-items: center; gap: .15em; font-size: 1.0625em; color: var(--action); }
.sim-nav-back::before {
  content: ""; width: .6em; height: .6em; margin-right: .1em;
  border-left: .13em solid currentColor; border-bottom: .13em solid currentColor;
  transform: rotate(45deg); border-radius: .05em;
}
.sim-nav-cart { position: relative; color: var(--ink); }
.sim-cart { width: 1.55em; height: 1.55em; }
.sim-badge {
  position: absolute; top: -.3em; right: -.45em;
  min-width: 1.15em; height: 1.15em; padding: 0 .3em;
  border-radius: 99px; background: var(--action); color: #fff;
  font-size: .75em; font-weight: 600; line-height: 1.15em; text-align: center;
  box-shadow: 0 0 0 .15em #fff;
}

/* avanzamento (spettro HF) */
.sim-prog { height: .1875em; margin: 0 1.25em; border-radius: 99px; background: var(--ctrl); overflow: hidden; }
.sim-prog i { display: block; height: 100%; background: var(--spectrum-line); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

.sim-body { padding: .8em 1.25em 0; }
.sim-large { font-size: 2.125em; line-height: 1.12; font-weight: 600; letter-spacing: -.024em; }
.sim-lead { font-size: .9375em; line-height: 1.3; color: var(--ink-2); margin-top: .2em; }
.sim-label { font-size: .8125em; font-weight: 600; color: var(--ink-2); margin: 1.25em 0 .55em; letter-spacing: -.005em; }
.sim-label--row { display: flex; justify-content: space-between; }
.sim-label-v { display: inline-grid; color: var(--ink); font-weight: 400; }
.sim-xf { grid-area: 1 / 1; text-align: right; opacity: 0; }
.sim-xf.is-on { opacity: 1; }

/* anello di selezione e spunta (stato finale = .is-on; il JS parte dallo stato iniziale) */
.sim-ring {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 .125em var(--action);
  opacity: 0;
}
.sim-ring.is-on { opacity: 1; }
.sim-check {
  position: absolute; top: .55em; right: .55em;
  width: 1.3em; height: 1.3em; border-radius: 50%;
  background: var(--action);
  display: grid; place-items: center;
  opacity: 0; transform: scale(.4);
}
.sim-check.is-on { opacity: 1; transform: none; }
.sim-check svg, .sim-ok-ico svg { width: .8em; height: .8em; }
.sim-check path, .sim-ok-ico path { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 1 · catalogo */
.sim-cat { display: grid; grid-template-columns: 1fr 1fr; gap: .625em; margin-top: 1.05em; }
.sim-tile {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 6.6em;
  padding: .8em .8em .75em;
  border-radius: 1em;
  background: var(--bg-alt);
}
.sim-ico { width: 1.7em; height: 1.7em; color: var(--ink); margin-bottom: auto; }
.sim-tile-name { font-size: .9375em; font-weight: 600; margin-top: .7em; letter-spacing: -.015em; }
.sim-tile-da { font-size: .75em; line-height: 1.25; color: var(--ink-2); margin-top: .1em; }
.sim-tile--eco .sim-ico, .sim-tile--eco .sim-tile-name { color: var(--eco); }

/* 2 · rilegatura e colore */
.sim-stage {
  margin-top: .85em;
  height: 9.6em;
  display: grid; place-items: center;
  border-radius: 1em;
  background: linear-gradient(180deg, #f5f5f7, #ececf0);
}
.sim-book {
  position: relative;
  width: 5em; height: 6.7em;
  border-radius: .16em .34em .34em .16em;
  overflow: hidden;
  box-shadow: .35em .45em .9em -.25em rgba(0,0,0,.4), 0 .08em .15em rgba(0,0,0,.25);
}
.sim-cover { position: absolute; inset: 0; }
.sim-cover--blu { background: linear-gradient(90deg, #16224a, #1f2f5c 30%, #26386a 70%, #1f2f5c); }
.sim-cover--bordeaux { background: linear-gradient(90deg, #4b111c, #6d1a2a 30%, #7b2333 70%, #6d1a2a); opacity: 0; }
.sim-cover--bordeaux.is-on { opacity: 1; }
.sim-spine { position: absolute; left: 0; top: 0; bottom: 0; width: .42em; background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(255,255,255,.1) 60%, rgba(0,0,0,.18)); }
.sim-letters {
  position: absolute; left: .5em; right: 0; top: 1.3em;
  display: flex; flex-direction: column; align-items: center; gap: .35em;
  opacity: 0;
}
.sim-letters.is-on { opacity: 1; }
.sim-letters b { font-size: .44em; font-weight: 600; letter-spacing: .16em; white-space: nowrap; }
.sim-letters i { width: 1.8em; height: .06em; background: currentColor; opacity: .8; }
.sim-letters small { font-size: .4em; letter-spacing: .14em; }
.sim-letters--oro { color: #dcb866; }
.sim-letters--argento { color: #d3d6da; }

.sim-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.sim-opt {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 3.75em;
  padding: .55em .7em;
  border-radius: .85em;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
.sim-opt-t { font-size: .8125em; font-weight: 600; padding-right: 1.5em; line-height: 1.2; }
.sim-opt-s { font-size: .75em; color: var(--ink-2); margin-top: .1em; }
.sim-radio {
  position: absolute; top: .6em; right: .6em;
  width: 1.05em; height: 1.05em; border-radius: 50%;
  box-shadow: inset 0 0 0 .09em rgba(0,0,0,.25);
}
.sim-radio i {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 26%, var(--action) 29%);
  opacity: 0; transform: scale(.5);
}
.sim-radio i.is-on { opacity: 1; transform: none; }

.sim-swatches { display: flex; gap: .8em; padding-left: .2em; }
.sim-sw {
  position: relative;
  width: 1.85em; height: 1.85em; border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 .3em .5em rgba(255,255,255,.12);
}
.sim-sw-ring { position: absolute; inset: -.26em; border-radius: 50%; border: .11em solid var(--action); opacity: 0; }
.sim-sw-ring.is-on { opacity: 1; }

.sim-seg {
  --n: 2;
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
  height: 2.2em; padding: .15em;
  border-radius: 99px;
  background: var(--ctrl);
}
.sim-seg--3 { --n: 3; }
.sim-seg--4 { --n: 4; }
.sim-seg-thumb {
  position: absolute; top: .15em; bottom: .15em; left: .15em;
  width: calc((100% - .3em) / var(--n));
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 .06em .25em rgba(0,0,0,.13), 0 0 0 .03em rgba(0,0,0,.04);
}
.sim-seg-o { position: relative; z-index: 1; text-align: center; font-size: .8125em; font-weight: 600; white-space: nowrap; }
.sim-seg-o.is-off { color: var(--ink-3); font-weight: 400; }
.sim-seg--mini { width: 7.6em; height: 1.95em; }
.sim-seg--mini .sim-seg-o { font-size: .75em; }
.sim-seg--4 .sim-seg-o { font-size: .75em; }

/* barra in basso */
.sim-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: .7em 1.25em 2.15em;
  background: rgba(255,255,255,.96);
  box-shadow: 0 -1px 0 rgba(0,0,0,.08);
}
.sim-bar-l { display: flex; flex-direction: column; }
.sim-bar-l small { font-size: .75em; color: var(--ink-2); }
.sim-bar-l b { font-size: 1.3em; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.sim-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75em; padding: 0 1.3em;
  border-radius: 99px;
  background: var(--action); color: #fff;
  font-size: .9375em; white-space: nowrap;
}
.sim-bar--full .sim-cta { width: 100%; }

/* 3 · pagine e copie */
.sim-chip {
  display: inline-flex; align-items: center; gap: .45em;
  margin-top: .55em; padding: .3em .75em;
  border-radius: 99px; background: var(--bg-alt);
  font-size: .8125em; color: var(--ink-2);
}
.sim-chip i { width: .75em; height: .75em; border-radius: 50%; background: #6d1a2a; }
.sim-list { margin-top: 1em; padding: 0 .9em; border-radius: 1em; background: var(--bg-alt); }
.sim-label + .sim-list { margin-top: 0; }
.sim-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75em;
  min-height: 3.05em;
}
.sim-row + .sim-row { box-shadow: 0 -1px 0 rgba(0,0,0,.08); }
.sim-row > span:first-child { font-size: .9375em; }
.sim-step-ctl {
  display: flex; align-items: center; gap: .1em;
  padding: .15em; border-radius: 99px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.sim-step-ctl > span:first-child { font-size: 1em; }
.sim-sbtn {
  display: grid; place-items: center;
  width: 1.9em; height: 1.9em; border-radius: 50%;
  color: var(--action); font-size: 1.05em; line-height: 1;
}
.sim-step-ctl b { min-width: 2.3em; text-align: center; font-weight: 600; font-size: .9375em; }
.sim-eco { color: var(--eco); }
.sim-toggle { position: relative; width: 3.2em; height: 1.95em; border-radius: 99px; background: rgba(120,120,128,.2); }
.sim-toggle i { position: absolute; top: .15em; left: .15em; width: 1.65em; height: 1.65em; border-radius: 50%; background: #fff; box-shadow: 0 .1em .3em rgba(0,0,0,.18); }
.sim-total { display: flex; flex-direction: column; gap: .2em; margin-top: 1.15em; }
.sim-price { font-size: 2.3em; line-height: 1.04; font-weight: 700; letter-spacing: -.035em; }
.sim-unit, .sim-qty { font-size: .8125em; color: var(--ink-2); }
.sim-when { font-size: .8125em; font-weight: 600; color: var(--open-ink); margin-top: .25em; }
.sim-lines { margin-top: .95em; padding-top: .7em; box-shadow: 0 -1px 0 rgba(0,0,0,.08); display: flex; flex-direction: column; gap: .35em; }
.sim-line { display: flex; justify-content: space-between; gap: 1em; font-size: .75em; color: var(--ink-2); }
.sim-line span:last-child { color: var(--ink); }
.sim-bar-s { font-size: .875em; font-weight: 600; }

/* 4 · caricamento */
.sim-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em;
  height: 9.2em; margin-top: 1em;
  border: .09em dashed rgba(0,0,0,.26); border-radius: 1em;
  background: var(--bg-soft);
}
.sim-drop-ico { width: 2.2em; height: 2.2em; color: var(--action); margin-bottom: .2em; }
.sim-drop-t { font-size: .9375em; font-weight: 600; }
.sim-drop-s { font-size: .75em; color: var(--ink-2); }
.sim-pill {
  display: inline-flex; align-items: center;
  margin-top: .45em; padding: .45em 1.05em;
  border-radius: 99px; background: var(--action); color: #fff;
  font-size: .8125em; white-space: nowrap;
}
.sim-pill--o { background: transparent; color: var(--action); box-shadow: inset 0 0 0 .08em var(--action); }
.sim-file {
  display: flex; align-items: center; gap: .75em;
  margin-top: .8em; padding: .75em .85em;
  border-radius: 1em; background: var(--bg-alt);
}
.sim-pdf {
  flex: none;
  display: flex; align-items: flex-end; justify-content: center;
  width: 3.9em; height: 4.9em; padding-bottom: .7em;
  border-radius: .55em; background: #fff;
  box-shadow: inset 0 0 0 .09em rgba(0,0,0,.12);
  font-size: .5625em; font-weight: 600; letter-spacing: .04em; color: var(--tag);
}
.sim-file-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15em; }
.sim-file-n { font-size: .875em; font-weight: 600; }
.sim-file-m { font-size: .75em; color: var(--ink-2); }
.sim-up { height: .25em; margin-top: .35em; border-radius: 99px; background: rgba(0,0,0,.1); overflow: hidden; }
.sim-up i { display: block; height: 100%; background: var(--action); transform-origin: 0 50%; }
.sim-done { display: flex; align-items: center; gap: .65em; margin-top: .85em; padding: 0 .2em; }
.sim-done b { display: block; font-size: .875em; font-weight: 600; }
.sim-done small { display: block; font-size: .75em; color: var(--ink-2); }
.sim-thumbs { display: flex; gap: .5em; }
.sim-pg {
  position: relative; flex: 1;
  aspect-ratio: 210 / 297;
  display: flex; flex-direction: column; gap: .32em;
  padding: .55em .45em;
  border-radius: .2em; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 .15em .4em rgba(0,0,0,.08);
}
.sim-pg i { display: block; height: .12em; border-radius: 1px; background: rgba(0,0,0,.18); }
.sim-pg i:nth-child(2n) { width: 80%; }
.sim-pg em { display: block; height: 1.6em; border-radius: .12em; background: linear-gradient(135deg, #00a4e4, #1b4fa3 45%, #92278f 70%, #f58220); }
.sim-pg--cover { justify-content: center; align-items: center; }
.sim-pg--cover b { font-size: .3em; letter-spacing: .08em; font-weight: 600; text-align: center; }
.sim-pg--more { justify-content: center; align-items: center; background: var(--bg-alt); box-shadow: none; font-size: .75em; font-weight: 600; color: var(--ink-2); }
.sim-ok-ico { flex: none; display: grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--open); }

/* 5 · carrello */
.sim-item {
  display: flex; align-items: flex-start; gap: .8em;
  margin-top: .9em; padding: .85em;
  border-radius: 1em; background: var(--bg-alt);
}
.sim-thumb {
  position: relative; flex: none;
  width: 2.5em; height: 3.3em;
  border-radius: .12em .28em .28em .12em;
  background: linear-gradient(90deg, #4b111c, #6d1a2a 25%, #7b2333);
  box-shadow: .15em .2em .4em rgba(0,0,0,.25);
}
.sim-thumb::after { content: ""; position: absolute; left: .7em; right: .45em; top: 1em; height: .08em; background: #dcb866; box-shadow: 0 .3em 0 #dcb866; }
.sim-item-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12em; }
.sim-item-b b { font-size: .9375em; font-weight: 600; }
.sim-item-b small { font-size: .75em; color: var(--ink-2); line-height: 1.25; }
.sim-item-b .sim-item-f { color: var(--open-ink); }
.sim-item-p { font-size: .9375em; font-weight: 700; white-space: nowrap; }
.sim-row--radio { gap: .7em; padding: .45em 0; }
.sim-row--radio .sim-radio { position: relative; top: auto; right: auto; flex: none; }
.sim-row-b { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sim-row-b > span { font-size: .875em; }
.sim-row-b small { font-size: .75em; color: var(--open-ink); }
.sim-free { font-size: .8125em; font-weight: 600; color: var(--open-ink); }
.sim-muted { font-size: .8125em; color: var(--ink-3); }
.sim-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1em; font-size: .9375em; font-weight: 600; }
.sim-sum small { font-size: .8em; font-weight: 400; color: var(--ink-2); }
.sim-sum b { font-size: 1.3em; font-weight: 700; letter-spacing: -.02em; }
.sim-pay { display: grid; place-items: center; }
.sim-pay-l, .sim-pay-w { grid-area: 1 / 1; }
.sim-pay-w { display: flex; align-items: center; gap: .55em; opacity: 0; }
.sim-spin {
  width: 1.15em; height: 1.15em; border-radius: 50%;
  background: conic-gradient(from 0deg, #fff0, #fff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .2em), #000 calc(100% - .18em));
  mask: radial-gradient(farthest-side, transparent calc(100% - .2em), #000 calc(100% - .18em));
}
.sim-dim { position: absolute; inset: 0; background: rgba(0,0,0,.3); }
.sim-sheet {
  position: absolute; left: .45em; right: .45em; bottom: .45em;
  display: flex; flex-direction: column; align-items: center; gap: .3em;
  padding: .55em 1.4em 1.9em;
  border-radius: 2.4em;
  background: #fff;
  text-align: center;
  box-shadow: 0 -.2em 1.6em rgba(0,0,0,.14);
}
.sim-grab { width: 2.3em; height: .3em; border-radius: 99px; background: rgba(0,0,0,.16); margin-bottom: 1em; }
.sim-okbig { width: 3.6em; height: 3.6em; margin-bottom: .45em; overflow: visible; }
.sim-okbig circle { fill: var(--open); transform-origin: 26px 26px; }
.sim-okbig path { fill: none; stroke: #fff; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 33; stroke-dashoffset: 0; }
.sim-sheet-t { font-size: 1.3em; font-weight: 600; letter-spacing: -.02em; }
.sim-sheet-o { font-size: .875em; color: var(--ink-2); }
.sim-sheet-o span { color: var(--ink); font-weight: 600; }
.sim-sheet-r { font-size: .8125em; line-height: 1.4; margin-top: .25em; }
.sim-sheet .sim-pill { margin-top: .9em; font-size: .875em; padding: .55em 1.2em; }

/* cromature del telefono: solo nel layout live */
.sim-key, .sim-status, .sim-island, .sim-home, .sim-ripple, .sim-finger, .sim-glare { display: none; }

/* =====================================================================
   STATICO (base): lista con le schermate
   ===================================================================== */
.sim-sticky { padding-block: var(--section-y); }
.sim-grid {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 20px;
}
.sim-copy, .sim-steps, .sim-device, .sim-phone, .sim-bezel, .sim-screen, .sim-scrs { display: contents; }
.sim-head { grid-row: 1; margin-bottom: 12px; }
.sim-step { grid-row: calc(2 + 2 * var(--k)); padding-top: 28px; }
.sim-scr { grid-row: calc(3 + 2 * var(--k)); }
.sim-ctas { grid-row: 12; margin-top: 28px; }
.sim-step[data-sim-step="0"], .sim-scr[data-scr="0"] { --k: 0; }
.sim-step[data-sim-step="1"], .sim-scr[data-scr="1"] { --k: 1; }
.sim-step[data-sim-step="2"], .sim-scr[data-scr="2"] { --k: 2; }
.sim-step[data-sim-step="3"], .sim-scr[data-scr="3"] { --k: 3; }
.sim-step[data-sim-step="4"], .sim-scr[data-scr="4"] { --k: 4; }
.sim-scr {
  --sw: min(300px, 78vw);
  width: var(--sw);
  aspect-ratio: 393 / 730;
  font-size: calc(var(--sw) / 24.5625);
  border-radius: 2.6em;
  box-shadow: 0 0 0 .55em #1d1d1f, 0 0 0 .7em #b9b6b1, 0 2em 3em -1.5em rgba(0,0,0,.25);
  margin: .7em;
  justify-self: center;
}
@media (min-width: 834px) {
  .sim-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); row-gap: 64px; align-items: center; }
  .sim-head { grid-column: 1 / -1; }
  .sim-step { grid-row: calc(2 + var(--k)); grid-column: 1; padding-top: 0; }
  .sim-scr { grid-row: calc(2 + var(--k)); grid-column: 2; }
  .sim-ctas { grid-row: 7; grid-column: 1 / -1; margin-top: 0; }
}

/* =====================================================================
   LIVE: traccia sticky + iPhone in CSS
   ===================================================================== */
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-track { height: 500svh; }
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-sticky {
  position: sticky; top: 0;
  height: 100svh;
  padding: var(--nav-h) 0 0;
  overflow: clip;
}
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-grid {
  height: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 100%;
  column-gap: clamp(32px, 5vw, 96px);
  align-items: center;
  justify-items: stretch;
}
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-copy {
  display: flex; flex-direction: column; align-items: flex-start;
  grid-row: 1; grid-column: 1;
  max-width: 520px;
}
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-head { grid-row: auto; grid-column: auto; margin-bottom: 36px; }
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-steps { display: grid; width: 100%; }
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-step { grid-area: 1 / 1; padding: 0; overflow: clip; overflow-clip-margin: 4px; }
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-step:not([data-sim-step="0"]) { opacity: 0; }
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-step-text { min-height: 3.75em; }
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-step-n { display: none; }
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-dots { display: flex; margin: 26px 0 0 -4px; }
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-ctas { grid-row: auto; grid-column: auto; margin-top: 30px; }

/* pillole di avanzamento */
.sim-dot { position: relative; width: 44px; height: 44px; margin-right: -6px; cursor: pointer; }
.sim-dot::before, .sim-dot i {
  content: ""; position: absolute; left: 5px; right: 5px; top: 50%;
  height: 4px; margin-top: -2px; border-radius: 2px;
}
.sim-dot::before { background: rgba(0,0,0,.14); }
.sim-dot i { background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.sim-dot:hover::before { background: rgba(0,0,0,.24); }
.sim-dot:focus-visible { outline-offset: -4px; }

/* dispositivo */
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-device {
  display: block;
  position: relative;
  grid-row: 1; grid-column: 2;
  height: 100%;
  container-type: size;
  cursor: pointer;
}
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-phone {
  --pw: min(calc(100cqw - 24px), calc((100cqh - 40px) / 2.075), 372px);
  display: block;
  position: absolute; left: 50%; top: 50%;
  width: var(--pw); height: calc(var(--pw) * 2.075);
  margin: calc(var(--pw) * -1.0375) 0 0 calc(var(--pw) * -.5);
  border-radius: calc(var(--pw) * .178);
  /* titanio naturale */
  background:
    linear-gradient(135deg, #e6e4e0 0%, #a9a59f 14%, #eceae6 30%, #8e8a84 50%, #d8d5d0 68%, #9d9993 84%, #dedbd6 100%);
  box-shadow:
    inset 0 0 0 .5px rgba(0,0,0,.35),
    inset 0 1px 1.5px rgba(255,255,255,.75),
    0 1px 2px rgba(0,0,0,.08),
    0 22px 44px -18px rgba(0,0,0,.26),
    0 60px 110px -40px rgba(0,0,0,.3);
}
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-key {
  display: block;
  position: absolute;
  width: calc(var(--pw) * .012);
  border-radius: 2px;
  background: linear-gradient(90deg, #8b8781, #dcd9d4 45%, #a29e98);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2);
}
.sim-key--action, .sim-key--up, .sim-key--down { left: calc(var(--pw) * -.0105); border-radius: 2px 0 0 2px; }
.sim-key--power, .sim-key--cam { right: calc(var(--pw) * -.0105); border-radius: 0 2px 2px 0; }
.sim-key--action { top: 17.5%; height: 4.6%; }
.sim-key--up { top: 25%; height: 7.6%; }
.sim-key--down { top: 34.2%; height: 7.6%; }
.sim-key--power { top: 27%; height: 11.5%; }
.sim-key--cam { top: 58.5%; height: 6.5%; background: linear-gradient(90deg, #6f6b66, #b9b5b0 50%, #7f7b76) !important; }

.js:not(.reduced-motion) .sim:not(.sim--static) .sim-bezel {
  display: block;
  position: absolute; inset: calc(var(--pw) * .012);
  padding: calc(var(--pw) * .026);
  border-radius: calc(var(--pw) * .166);
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 calc(var(--pw) * .01) rgba(0,0,0,.9);
}
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-screen {
  --sw: calc(var(--pw) * .924);
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--pw) * .14);
  background: #fff;
  font-size: calc(var(--sw) / 24.5625);
  isolation: isolate;
}
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-scrs { display: block; position: absolute; inset: 0; }
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-scr {
  --top: 3.375em;
  position: absolute; inset: 0;
  width: auto; aspect-ratio: auto; margin: 0;
  justify-self: stretch; align-self: stretch; /* abspos + inset:0: niente centratura del layout statico */
  border-radius: 0;
  box-shadow: -.4em 0 1.4em rgba(0,0,0,.07);
  font-size: 1em;
  grid-row: auto;
}
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-scr:not([data-scr="0"]) { visibility: hidden; }

/* barra di stato, isola, indicatore home, riflesso */
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-status {
  display: flex; justify-content: space-between; align-items: center;
  position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  height: 3.375em; padding-top: .25em;
  pointer-events: none;
}
.sim-time, .sim-sys { width: 8.3em; display: flex; justify-content: center; align-items: center; }
.sim-time { font-size: 1.0625em; width: 7.8em; font-weight: 600; letter-spacing: -.01em; padding-left: .35em; }
.sim-sys { gap: .3em; padding-right: .35em; }
.sim-sys svg { height: .72em; width: auto; fill: currentColor; }
.sim-batt { position: relative; width: 1.6em; height: .78em; border-radius: .25em; box-shadow: inset 0 0 0 .07em rgba(0,0,0,.4); padding: .12em; }
.sim-batt i { display: block; height: 100%; width: 78%; border-radius: .12em; background: var(--ink); }
.sim-batt::after { content: ""; position: absolute; right: -.17em; top: 50%; width: .1em; height: .28em; margin-top: -.14em; border-radius: 0 .1em .1em 0; background: rgba(0,0,0,.4); }
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-island {
  display: block;
  position: absolute; top: .69em; left: 50%; z-index: 6;
  width: 7.8em; height: 2.3em; margin-left: -3.9em;
  border-radius: 99px;
  background: #000;
}
.sim-island::after {
  content: ""; position: absolute; right: .8em; top: 50%;
  width: .75em; height: .75em; margin-top: -.375em; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #3a4a6b 0 12%, #10141c 35%, #050608 70%);
}
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-home {
  display: block;
  position: absolute; left: 50%; bottom: .5em; z-index: 5;
  width: 8.4em; height: .32em; margin-left: -4.2em;
  border-radius: 99px; background: #111;
}
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-glare {
  display: block;
  position: absolute; inset: 0; z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 20%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 72%, rgba(255,255,255,.05) 88%, rgba(255,255,255,0) 100%);
}

/* dito finto + onda del tocco (posizionati dal JS con x/y) */
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-finger,
.js:not(.reduced-motion) .sim:not(.sim--static) .sim-ripple {
  display: block;
  position: absolute; left: 0; top: 0;
  width: 2.9em; height: 2.9em; margin: -1.45em 0 0 -1.45em;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0; visibility: hidden;
}
.sim-finger {
  z-index: 9;
  background: rgba(60,60,67,.24);
  box-shadow: 0 0 0 .12em rgba(255,255,255,.9), 0 .3em .9em rgba(0,0,0,.2);
  will-change: transform;
}
.sim-ripple { z-index: 7; background: rgba(0,113,227,.22); }

/* ---------- LIVE mobile: colonna unica, testo compatto sopra, telefono sotto ---------- */
@media (max-width: 833px) {
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-track { height: 450svh; }
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 4px;
  }
  /* mentre la traccia è pinnata la barra CTA mobile si nasconde (site.js, [data-cta-hide]):
     il telefono usa tutta l'altezza e resta sopra il bordo, con il margine della home indicator */
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-sticky { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-copy { grid-row: 1; grid-column: 1; max-width: none; padding-top: 14px; }
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-device { grid-row: 2; grid-column: 1; cursor: default; }
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-phone { --pw: min(calc(100cqw - 24px), calc((100cqh - 16px) / 2.075), 340px); }
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-head { margin-bottom: 10px; }
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-eyebrow {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-title { font-size: 26px; line-height: 1.1; }
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-step-text { font-size: 17px; line-height: 1.3; min-height: 3.9em; max-width: none; }
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-dots { margin: 2px 0 0 -4px; height: 24px; }
  .sim-dot { height: 24px; }
  .sim-dot::after { content: ""; position: absolute; inset: -10px 0; }
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-ctas { margin-top: 8px; gap: 8px 20px; }
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-ctas .btn { min-height: 36px; padding: 8px 15px; font-size: 14px; }
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-ctas .link-cta { font-size: 14px; }
}
@media (max-width: 833px) and (max-height: 700px) {
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-title { font-size: 22px; }
  .js:not(.reduced-motion) .sim:not(.sim--static) .sim-step-text { font-size: 15px; }
}