/* =========================================================
   HYPERVEX — Questionario self-coached · design e motion (v2, 30/9/2026)
   ---------------------------------------------------------
   Tutto sotto .sqx (schermata 'onboarding' di js/selfcoached.js). Sempre scuro e cinematico, anche col tema chiaro
   (colori locali qui sotto); l'accento segue quello dell'app (var(--red), --red-hot, --grad…).
   Motion:
   - ingressi sfalsati: .sqx-in .sqx-a con --d (indice) · uscite direzionali: .sqx-leave / .sqx-leave-back
   - selezioni con "pop", spunte che si disegnano (path pathLength=1), interruttori col cursore che scorre (FLIP da JS)
   - bordo conico che gira (@property --sqx-a), riflesso che passa, sfondo ambientale continuo (--ph = fase:
     un ridisegno non lo fa ripartire), rivelazioni allo scroll nel risultato (.sqx-rv → .in)
   Titoli: Barlow Condensed corsivo maiuscolo (Google Fonts, index.html). prefers-reduced-motion: tutto fermo (in fondo).
   ========================================================= */
@property --sqx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.sqx{
  --sqx-d: 'Barlow Condensed', 'Figtree', system-ui, sans-serif;
  --sqx-out: cubic-bezier(.16,1,.3,1);
  --sqx-spring: cubic-bezier(.34,1.56,.64,1);
  --sqx-io: cubic-bezier(.65,0,.35,1);
  --txt:#FFFFFF; --txt-2:#B9B9C7; --txt-3:#7F7F8F;
  --glass: rgba(255,255,255,.045); --glass-2: rgba(255,255,255,.075);
  --edge: rgba(255,255,255,.085); --edge-2: rgba(255,255,255,.14);
  --water: #3AA0FF;
  color: var(--txt);
}

/* ---------- guscio: alto quanto lo schermo, scorre solo lo stage (se proprio serve) ---------- */
.screen.sqx{ position:relative; padding:0; min-height:0; height:100vh; height:100dvh; overflow:hidden; animation:none;
  display:flex; flex-direction:column; isolation:isolate; background:transparent; }
.sqx-shell{ position:relative; z-index:1; flex:1; min-height:0; display:flex; flex-direction:column; width:100%;
  max-width:560px; margin:0 auto; padding-top:calc(var(--safe-t) + 6px); }

/* ---------- sfondo ambientale ---------- */
.sqx-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:#050507; }
.sqx-bg::after{ content:''; position:absolute; inset:0; background:
    radial-gradient(130% 80% at 50% -12%, color-mix(in srgb, var(--red) 20%, transparent), transparent 62%),
    radial-gradient(120% 70% at 50% 118%, color-mix(in srgb, var(--red-deep, #A6000F) 26%, transparent), transparent 70%),
    radial-gradient(150% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.6)); }
.sqx-orb{ position:absolute; border-radius:50%; will-change:transform; }
.sqx-orb.a{ width:78vmax; height:78vmax; left:-30vmax; top:-38vmax;
  background:radial-gradient(circle, color-mix(in srgb, var(--red) 34%, transparent) 0%, transparent 62%);
  animation:sqxDriftA 24s ease-in-out var(--ph, 0s) infinite alternate; }
.sqx-orb.b{ width:70vmax; height:70vmax; right:-32vmax; bottom:-36vmax;
  background:radial-gradient(circle, color-mix(in srgb, var(--red-deep, #A6000F) 44%, transparent) 0%, transparent 64%);
  animation:sqxDriftB 30s ease-in-out var(--ph, 0s) infinite alternate; }
.sqx-orb.c{ width:44vmax; height:44vmax; left:34%; top:26%;
  background:radial-gradient(circle, rgba(255,255,255,.05), transparent 60%);
  animation:sqxDriftC 36s ease-in-out var(--ph, 0s) infinite alternate; }
.sqx-grid{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 75% 55% at 50% 38%, #000 20%, transparent 78%);
          mask-image:radial-gradient(ellipse 75% 55% at 50% 38%, #000 20%, transparent 78%); }
.sqx-grain{ position:absolute; inset:0; opacity:.07; background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* benvenuto e caricamento: "pista" in prospettiva + linea d'orizzonte che respira */
.sqx-beam{ position:absolute; left:-10%; right:-10%; top:86%; height:2px; opacity:0;
  background:linear-gradient(90deg, transparent, var(--red), #fff, var(--red), transparent);
  box-shadow:0 0 24px 4px color-mix(in srgb, var(--red) 55%, transparent); }
.sqx[data-view="loading"] .sqx-beam{ animation:sqxBeam 6s ease-in-out var(--ph, 0s) infinite; }
.sqx[data-step="welcome"] .sqx-grid, .sqx[data-view="loading"] .sqx-grid{ opacity:.9;
  transform:perspective(520px) rotateX(58deg) translateY(22%) scale(1.6); transform-origin:50% 100%;
  animation:sqxTrack 2.4s linear infinite; }
@keyframes sqxDriftA{ 0%{ transform:translate3d(0,0,0) scale(1); } 100%{ transform:translate3d(12vmax,9vmax,0) scale(1.12); } }
@keyframes sqxDriftB{ 0%{ transform:translate3d(0,0,0) scale(1.08); } 100%{ transform:translate3d(-10vmax,-7vmax,0) scale(.94); } }
@keyframes sqxDriftC{ 0%{ transform:translate3d(-20%,0,0); } 100%{ transform:translate3d(10%,-25%,0); } }
@keyframes sqxBeam{ 0%,100%{ opacity:.25; transform:scaleX(.7); } 50%{ opacity:.75; transform:scaleX(1); } }
@keyframes sqxTrack{ from{ background-position:0 0, 0 0; } to{ background-position:0 46px, 0 0; } }

/* ---------- barra in alto: indietro · progresso · avanti · esci ---------- */
.sqx-top{ flex:none; display:grid; grid-template-columns:42px minmax(0,1fr) 42px 42px; align-items:center; gap:8px; padding:6px 16px 8px; }
.sqx-top.res{ grid-template-columns:42px minmax(0,1fr) 42px; }
.sqx-ib{ width:42px; height:42px; border-radius:14px; display:grid; place-items:center; color:#fff; background:var(--glass);
  border:1px solid var(--edge); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:transform .3s var(--sqx-spring), background .2s, border-color .2s, opacity .25s, box-shadow .3s, filter .25s; }
.sqx-ib .ic{ width:19px; height:19px; }
.sqx-ib:active{ transform:scale(.88); }
.sqx-ib.fwd{ background:var(--grad-flat); border-color:transparent; box-shadow:0 10px 24px -12px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.28); }
.sqx-ib[disabled]{ opacity:.28; pointer-events:none; box-shadow:none; filter:grayscale(1); }
@media (hover:hover){
  .sqx-ib:hover{ background:var(--glass-2); border-color:color-mix(in srgb, var(--red) 50%, transparent); }
  .sqx-ib.fwd:hover{ transform:translateX(2px); background:var(--grad-flat); }
}
.sqx-prog{ min-width:0; padding:0 4px; }
.sqx-prog-t{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; white-space:nowrap;
  font:800 10.5px/1 var(--font); letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3); }
.sqx-prog-t span{ overflow:hidden; text-overflow:ellipsis; }
.sqx-prog-t b{ font-family:var(--sqx-d); font-style:italic; font-weight:800; font-size:15px; letter-spacing:.02em; color:#fff; }
.sqx-prog-t b em{ font-style:italic; color:var(--txt-3); font-size:12px; }
.sqx-res-k{ text-align:center; font:800 11px/1 var(--font); letter-spacing:.2em; text-transform:uppercase; color:var(--txt-2); }
.sqx-bar{ position:relative; height:4px; border-radius:4px; background:rgba(255,255,255,.08); }
.sqx-bar i{ position:absolute; left:0; top:0; bottom:0; min-width:4px; border-radius:4px; background:var(--grad-flat);
  box-shadow:0 0 14px var(--red-glow); transition:width .75s var(--sqx-out); }
.sqx-bar i::after{ content:''; position:absolute; right:-3px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 45%, transparent), 0 0 16px var(--red); }

/* ---------- stage (contenuto) ---------- */
.sqx-stage{ position:relative; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:8px 20px 22px; display:flex; flex-direction:column; }
.sqx-stage::-webkit-scrollbar{ display:none; }
.sqx-page{ width:100%; }
.sqx-page.center{ margin-top:auto; margin-bottom:auto; }
.sqx[data-view="result"] .sqx-stage{ padding-top:16px; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22px); mask-image:linear-gradient(to bottom, transparent 0, #000 22px); }

/* ingressi sfalsati (solo al cambio pagina: la classe .sqx-in la mette js per un disegno) */
.sqx-in .sqx-a{ animation:sqxIn .72s var(--sqx-out) both; animation-delay:calc(min(var(--d, 0), 14) * 55ms + 30ms); }
.sqx-in.back .sqx-a{ animation-name:sqxInBack; }
.sqx-dock.sqx-in .sqx-a{ animation-delay:calc(min(var(--d, 0), 16) * 55ms + 120ms); }
@keyframes sqxIn{ from{ opacity:0; transform:translate3d(22px,10px,0); filter:blur(5px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes sqxInBack{ from{ opacity:0; transform:translate3d(-22px,10px,0); filter:blur(5px); } to{ opacity:1; transform:none; filter:none; } }
/* uscite direzionali (prima del cambio pagina) */
.sqx-stage.sqx-leave > .sqx-page{ animation:sqxOut .18s var(--sqx-io) both; }
.sqx-stage.sqx-leave-back > .sqx-page{ animation:sqxOutBack .18s var(--sqx-io) both; }
@keyframes sqxOut{ to{ opacity:0; transform:translate3d(-30px,0,0); filter:blur(4px); } }
@keyframes sqxOutBack{ to{ opacity:0; transform:translate3d(30px,0,0); filter:blur(4px); } }
/* domanda che compare per una risposta (branching) */
.sqx-reveal{ animation:sqxReveal .6s var(--sqx-out) both; transform-origin:50% 0; }
@keyframes sqxReveal{ from{ opacity:0; transform:translateY(-10px) scaleY(.94); filter:blur(3px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes sqxPop{ 0%{ transform:scale(.9); } 45%{ transform:scale(1.08); } 100%{ transform:scale(1); } }
@keyframes sqxDraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes sqxShake{ 0%,100%{ transform:none; } 20%{ transform:translateX(-7px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(2px); } }
@keyframes sqxSpin{ to{ --sqx-a:360deg; } }
@keyframes sqxSweep{ 0%{ left:-60%; } 40%,100%{ left:140%; } }
@keyframes sqxRing{ 0%{ transform:scale(.72); opacity:.85; } 100%{ transform:scale(2.1); opacity:0; } }

/* ---------- titoli ---------- */
.sqx-head{ margin:4px 0 18px; }
.sqx-kicker{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font:800 11px/1.2 var(--font); letter-spacing:.18em;
  text-transform:uppercase; color:var(--red-hot); }
.sqx-kicker .ic{ width:15px; height:15px; }
.sqx-title{ margin:0; font-family:var(--sqx-d); font-style:italic; font-weight:800; text-transform:uppercase; color:#fff;
  font-size:clamp(33px, 9.4vw, 44px); line-height:.95; letter-spacing:.004em; text-wrap:balance; }
.sqx-title.long{ font-size:clamp(27px, 7.6vw, 36px); line-height:.98; }
.sqx-title.big{ font-size:clamp(50px, 14.5vw, 70px); line-height:.86; }
.sqx-title .red{ color:var(--red); text-shadow:0 0 28px var(--red-glow); }
.sqx-sub{ margin:10px 0 0; max-width:46ch; font-size:14px; line-height:1.5; font-weight:600; color:var(--txt-2); text-wrap:pretty; }

/* ---------- domande ---------- */
.sqx-q{ margin:0 0 18px; }
.sqx-q:last-child{ margin-bottom:0; }
.sqx-ql{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; min-height:20px; }
.sqx-ql label{ font-size:15px; font-weight:800; letter-spacing:-.01em; color:#fff; }
.sqx-ql label small{ margin-left:7px; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3); }
.sqx-ql.solo{ justify-content:flex-end; min-height:0; height:0; margin:0; overflow:visible; }
.sqx-ql label{ flex:1; min-width:0; }
.sqx-opt-tag{ flex:none; padding:3px 8px; border-radius:999px; font-size:9.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-3); border:1px solid var(--edge-2); }
.sqx-q.err .sqx-opt-tag{ display:none; }
.sqx-grid2 .sqx-opt-tag{ display:none; }
.sqx-q.err .sqx-ql.solo{ height:auto; margin-bottom:10px; }
.sqx-qe{ flex:none; padding:4px 9px; border-radius:999px; font-size:11.5px; font-weight:800; color:#fff; white-space:nowrap;
  background:color-mix(in srgb, var(--red) 88%, #000); box-shadow:0 6px 16px -8px var(--red-glow);
  opacity:0; transform:translateY(4px) scale(.9); transition:opacity .2s, transform .35s var(--sqx-spring); pointer-events:none; }
.sqx-q.err .sqx-qe{ opacity:1; transform:none; }
.sqx-help{ margin:-3px 0 10px; font-size:12.5px; line-height:1.45; font-weight:600; color:var(--txt-3); }
.sqx-q.shake{ animation:sqxShake .45s var(--sqx-io); }
.sqx-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; margin:0 0 18px; }
.sqx-grid2:last-child{ margin-bottom:0; }
.sqx-grid2 .sqx-q{ margin:0; min-width:0; display:flex; flex-direction:column; }
.sqx-grid2 .sqx-q > .sqx-num{ margin-top:auto; }
.sqx-grid2 .sqx-ql label small{ display:none; }
.sqx-grid2 .sqx-ql{ flex-wrap:wrap; row-gap:6px; }
.sqx-grid2 .sqx-help{ font-size:11.5px; margin:-4px 0 8px; }

/* spunta disegnata (usata ovunque) */
.sqx-ck{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.sqx-ck path{ stroke-dasharray:1; stroke-dashoffset:0; }
.pop .sqx-ck path{ animation:sqxDraw .45s var(--sqx-out) .06s both; }

/* interruttore a scelte (2-3 opzioni): il cursore scorre (--i = indice, FLIP da js) */
.sqx-seg{ position:relative; display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); padding:4px; border-radius:17px;
  background:var(--glass); border:1px solid var(--edge-2); isolation:isolate; transition:border-color .25s, box-shadow .3s; }
.sqx-seg-k{ position:absolute; z-index:-1; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / var(--n)); border-radius:13px;
  background:var(--grad-flat); box-shadow:0 10px 24px -10px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.28);
  transform:translateX(calc(var(--i, 0) * 100%)); transition:transform .5s var(--sqx-spring), opacity .25s; }
.sqx-seg.none .sqx-seg-k{ opacity:0; }
.sqx-seg button{ min-width:0; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:15px; font-weight:800; color:var(--txt-2); transition:color .3s; }
.sqx-seg button .ic{ width:18px; height:18px; }
.sqx-seg button.on{ color:#fff; }
@media (hover:hover){ .sqx-seg button:not(.on):hover{ color:#fff; } }
.sqx-seg.sm{ padding:3px; border-radius:13px; }
.sqx-seg.sm .sqx-seg-k{ top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / var(--n)); border-radius:10px; }
.sqx-seg.sm button{ height:36px; font-size:13.5px; border-radius:10px; }

/* chip (scelte multiple o tante opzioni corte) */
.sqx-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sqx-chip{ position:relative; display:inline-flex; align-items:center; min-height:42px; padding:0 15px; border-radius:999px;
  font-size:14px; font-weight:800; color:var(--txt-2); background:var(--glass); border:1px solid var(--edge-2);
  transition:transform .3s var(--sqx-spring), background .25s, border-color .25s, color .25s, box-shadow .3s; }
.sqx-chip .ck{ display:inline-grid; place-items:center; width:0; overflow:hidden; transition:width .3s var(--sqx-spring), margin .3s; }
.sqx-chip .ck .sqx-ck{ width:13px; height:13px; }
.sqx-chip.on{ color:#fff; border-color:var(--red); background:color-mix(in srgb, var(--red) 22%, rgba(255,255,255,.03));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent), 0 10px 24px -14px var(--red-glow); }
.sqx-chip.on .ck{ width:15px; margin-right:6px; }
.sqx-chip:active{ transform:scale(.93); }
.sqx-chip.pop{ animation:sqxPop .5s var(--sqx-spring); }
.sqx-chip.nudge{ animation:sqxShake .4s var(--sqx-io); }
@media (hover:hover){ .sqx-chip:not(.on):hover{ color:#fff; border-color:color-mix(in srgb, var(--red) 50%, transparent); } }
.sqx-max{ margin-top:9px; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); }

/* opzioni a scheda (scelta singola con descrizione) */
.sqx-opts{ display:flex; flex-direction:column; gap:9px; }
.sqx-opts.two{ display:grid; grid-template-columns:1fr 1fr; }
.sqx-opt{ position:relative; display:flex; align-items:center; gap:13px; width:100%; min-height:58px; padding:13px 15px; overflow:hidden;
  text-align:left; border-radius:19px; color:#fff; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border:1px solid var(--edge); transition:transform .35s var(--sqx-spring), border-color .25s, background .25s, box-shadow .3s, opacity .3s; }
.sqx-opt::before{ content:''; position:absolute; inset:0; pointer-events:none; transform:translateX(-100%);
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%); transition:transform .8s var(--sqx-out); }
@media (hover:hover){ .sqx-opt:hover::before{ transform:translateX(100%); } .sqx-opt:not(.on):hover{ border-color:color-mix(in srgb, var(--red) 40%, transparent); } }
.sqx-opt:active{ transform:scale(.98); }
.sqx-opt.on{ border-color:var(--red); background:linear-gradient(180deg, color-mix(in srgb, var(--red) 22%, transparent), color-mix(in srgb, var(--red) 7%, transparent));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 15%, transparent), 0 18px 36px -22px var(--red-glow); }
.sqx-opts.has .sqx-opt:not(.on){ opacity:.7; }
.sqx-opt-ic{ flex:none; width:40px; height:40px; border-radius:13px; display:grid; place-items:center; color:var(--red-hot);
  background:rgba(255,255,255,.06); transition:background .3s, color .3s; }
.sqx-opt-ic .ic{ width:20px; height:20px; }
.sqx-opt.on .sqx-opt-ic{ background:var(--grad-flat); color:#fff; box-shadow:0 8px 20px -10px var(--red-glow); }
.sqx-opt-t{ flex:1; min-width:0; }
.sqx-opt-t b{ display:block; font-size:15.5px; font-weight:900; letter-spacing:-.01em; }
.sqx-opt-t span{ display:block; margin-top:3px; font-size:12.5px; line-height:1.4; font-weight:600; color:var(--txt-3); }
.sqx-opt.on .sqx-opt-t span{ color:var(--txt-2); }
.sqx-opts.two .sqx-opt{ justify-content:center; min-height:64px; }
.sqx-opts.two .sqx-opt-t{ flex:none; }
.sqx-opts.two .sqx-opt-t b{ font-family:var(--sqx-d); font-style:italic; font-size:24px; text-transform:uppercase; letter-spacing:.03em; }
.sqx-radio{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; border:2px solid rgba(255,255,255,.22);
  transition:border-color .25s, background .3s, box-shadow .3s; }
.sqx-radio .sqx-ck{ opacity:0; transform:scale(.4) rotate(-20deg); transition:opacity .25s, transform .4s var(--sqx-spring); }
.sqx-radio.sq{ border-radius:8px; }
.sqx-opt.on .sqx-radio, .sqx-tile.on .sqx-radio{ border-color:transparent; background:var(--grad-flat); box-shadow:0 0 14px var(--red-glow); }
.sqx-opt.on .sqx-radio .sqx-ck, .sqx-tile.on .sqx-radio .sqx-ck{ opacity:1; transform:none; }
.sqx-opt.pop{ animation:sqxPop .5s var(--sqx-spring); }
.sqx-opts.two .sqx-radio{ position:absolute; top:10px; right:10px; width:20px; height:20px; }
.sqx-opts.two .sqx-radio .sqx-ck{ width:11px; height:11px; }

/* numeri grandi */
.sqx-num{ position:relative; display:flex; align-items:center; gap:6px; height:60px; padding:0 14px 0 16px; border-radius:18px;
  background:var(--glass); border:1px solid var(--edge-2); transition:border-color .25s, box-shadow .3s, background .25s; }
.sqx-num:focus-within{ border-color:var(--red); background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--red) 18%, transparent), 0 16px 34px -22px var(--red-glow); }
.sqx-num input{ flex:1; min-width:0; width:100%; height:100%; padding:0; border:0; outline:0; background:none; color:#fff;
  font-family:var(--sqx-d); font-style:italic; font-weight:800; font-size:32px; letter-spacing:.01em; }
.sqx-num input::placeholder{ color:rgba(255,255,255,.18); }
.sqx-num .u{ font-size:13px; font-weight:800; color:var(--txt-3); }
.sqx-num .okm{ flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--ok);
  opacity:0; transform:scale(.4); transition:opacity .25s, transform .4s var(--sqx-spring); }
.sqx-num .okm .sqx-ck{ width:12px; height:12px; }
.sqx-q.ok .sqx-num .okm{ opacity:1; transform:none; }
.sqx-num.sm{ height:50px; }
.sqx-num.sm input{ font-size:24px; }

/* testi (16px: sotto, iPhone ingrandisce la pagina al tocco) */
.sqx-txt, .sqx-ta{ display:block; width:100%; border-radius:16px; background:var(--glass); border:1px solid var(--edge-2); color:#fff;
  font:600 16px/1.45 var(--font); outline:0; transition:border-color .25s, box-shadow .3s, background .25s; }
.sqx-txt{ height:54px; padding:0 16px; }
.sqx-ta{ padding:13px 16px; resize:none; min-height:92px; }
.sqx-txt:focus, .sqx-ta:focus{ border-color:var(--red); background:rgba(255,255,255,.07); box-shadow:0 0 0 4px color-mix(in srgb, var(--red) 18%, transparent); }
.sqx-txt::placeholder, .sqx-ta::placeholder{ color:rgba(255,255,255,.28); }
.sqx-count{ margin-top:6px; text-align:right; font-size:11px; font-weight:800; color:var(--txt-3); }
.sqx-q.err .sqx-num, .sqx-q.err .sqx-txt, .sqx-q.err .sqx-ta, .sqx-q.err .sqx-seg, .sqx-q.err .sqx-tiles{ border-color:var(--red);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }

/* attrezzatura a casa: tessere (tocca = ce l'ho) + pesi */
.sqx-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; border-radius:18px; }
.sqx-tile{ display:flex; align-items:center; gap:10px; min-height:54px; padding:10px 12px; border-radius:16px; text-align:left;
  font-size:13.5px; font-weight:800; color:var(--txt-2); background:var(--glass); border:1px solid var(--edge);
  transition:transform .3s var(--sqx-spring), border-color .25s, background .25s, color .25s; }
.sqx-tile.on{ color:#fff; border-color:var(--red); background:color-mix(in srgb, var(--red) 14%, transparent); }
.sqx-tile.pop{ animation:sqxPop .5s var(--sqx-spring); }
.sqx-tile:active{ transform:scale(.96); }
.sqx-eqn{ margin-top:12px; }
.sqx-eqn .sqx-sub{ display:flex; flex-direction:column; min-width:0; }
.sqx-eqn .sqx-sub > .sqx-num{ margin-top:auto; }
.sqx-sub .sqx-help{ display:block; margin:0 0 6px; }
.sqx-eq2{ display:flex; flex-direction:column; gap:14px; }

/* ---------- avvisi ---------- */
.sqx-alert{ display:flex; gap:12px; align-items:flex-start; margin:14px 0 0; padding:14px 16px; border-radius:18px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--red) 16%, transparent), color-mix(in srgb, var(--red) 6%, transparent));
  border:1px solid color-mix(in srgb, var(--red) 45%, transparent); }
.sqx-alert > .ic{ width:22px; height:22px; color:var(--red-hot); flex:none; margin-top:1px; }
.sqx-alert > div{ flex:1; min-width:0; }
.sqx-alert b{ display:block; font-size:14.5px; font-weight:900; margin-bottom:4px; }
.sqx-alert p{ margin:0; font-size:13px; line-height:1.5; color:var(--txt-2); font-weight:600; }
.sqx-alert .sqx-btn2{ margin-top:12px; }
#sqxMinor{ display:none; }
#sqxMinor.show{ display:flex; animation:sqxReveal .6s var(--sqx-out) both; }

/* ---------- dock (bottone principale) ---------- */
.sqx-dock{ flex:none; position:relative; z-index:2; padding:10px 20px calc(16px + var(--safe-b)); }
.sqx-dock::before{ content:''; position:absolute; left:0; right:0; bottom:100%; height:30px; pointer-events:none;
  background:linear-gradient(to top, rgba(5,5,7,.92), transparent); }
.sqx-dock.empty{ padding:0 0 calc(8px + var(--safe-b)); }
.sqx-dock.empty::before{ display:none; }
.sqx-cta-wrap{ position:relative; }
.sqx-cta-wrap::before{ content:''; position:absolute; inset:0; border-radius:18px; border:2px solid var(--red); opacity:0; pointer-events:none;
  animation:sqxCtaPulse 2.4s var(--sqx-out) 2.2s infinite; }
@keyframes sqxCtaPulse{ 0%{ opacity:.9; transform:scale(1); } 100%{ opacity:0; transform:scale(1.08,1.4); } }
.sqx-cta{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:58px; overflow:hidden;
  border-radius:18px; color:#fff; background:var(--grad); font-family:var(--sqx-d); font-style:italic; font-weight:800; font-size:22px;
  letter-spacing:.05em; text-transform:uppercase; box-shadow:0 20px 44px -20px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .35s var(--sqx-spring), filter .3s, box-shadow .3s, opacity .3s; }
.sqx-cta .ic{ width:22px; height:22px; transition:transform .35s var(--sqx-spring); }
.sqx-cta::after{ content:''; position:absolute; top:0; bottom:0; width:38%; left:-60%; pointer-events:none; transform:skewX(-18deg);
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); animation:sqxSweep 3.6s var(--sqx-io) 1.4s infinite; }
@media (hover:hover){ .sqx-cta:hover .ic:last-child{ transform:translateX(5px); } }
.sqx-cta:active{ transform:scale(.97); }
.sqx-cta[disabled]{ filter:grayscale(1) brightness(.5); box-shadow:none; cursor:default; }
.sqx-cta[disabled]::after{ display:none; }
.sqx-cta.shake{ animation:sqxShake .45s var(--sqx-io) !important; }
.sqx-links{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; flex-wrap:wrap; }
.sqx-links .sep{ width:4px; height:4px; border-radius:50%; background:var(--txt-3); opacity:.5; }
.sqx-link{ display:inline-flex; align-items:center; gap:6px; padding:8px 6px; font-size:13.5px; font-weight:800; color:var(--txt-2); transition:color .2s; }
.sqx-link .ic{ width:15px; height:15px; }
.sqx-link:hover{ color:#fff; }
.sqx-link.red{ color:var(--red-hot); }
.sqx-btn2{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px; padding:0 16px; border-radius:16px;
  font-size:15px; font-weight:800; color:#fff; background:var(--glass); border:1px solid var(--edge-2); text-decoration:none;
  transition:transform .3s var(--sqx-spring), background .2s, border-color .2s; }
.sqx-btn2 .ic{ width:18px; height:18px; }
.sqx-btn2:active{ transform:scale(.97); }
@media (hover:hover){ .sqx-btn2:hover{ background:var(--glass-2); border-color:color-mix(in srgb, var(--red) 45%, transparent); } }
.sqx-btn2 small{ color:var(--txt-3); font-weight:700; }
.sqx-fine{ display:block; margin:12px 0 0; font-size:12px; line-height:1.5; font-weight:700; color:var(--txt-3); text-align:center; }
.sqx-fine .ic{ width:14px; height:14px; margin-right:4px; vertical-align:-2px; }

/* ---------- 1) benvenuto ---------- */
.sqx-welcome{ text-align:center; }
.sqx-w-logo{ position:relative; width:76px; height:76px; margin:0 auto 18px; }
.sqx-w-logo img{ position:relative; z-index:2; width:100% !important; height:100% !important; filter:drop-shadow(0 0 22px var(--red-glow)); }
.sqx-w-logo i{ position:absolute; inset:-4px; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--red) 70%, transparent); opacity:0;
  animation:sqxRing 3s var(--sqx-out) infinite; }
.sqx-w-logo i:nth-child(2){ animation-delay:1s; }
.sqx-w-logo i:nth-child(3){ animation-delay:2s; }
.sqx-in .sqx-w-logo{ animation:sqxLogoIn 1s var(--sqx-spring) .05s both !important; }
@keyframes sqxLogoIn{ from{ opacity:0; transform:scale(.35) rotate(-14deg); filter:blur(10px); } to{ opacity:1; transform:none; filter:none; } }
.sqx-welcome .sqx-kicker{ justify-content:center; }
.sqx-hero-t{ margin:0; font-family:var(--sqx-d); font-style:italic; font-weight:900; text-transform:uppercase; color:#fff;
  font-size:clamp(48px, 14vw, 68px); line-height:.9; letter-spacing:.005em; }
.sqx-hero-t .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 .05em .04em; margin:0 -.02em; }
.sqx-hero-t .w > span{ display:inline-block; }
.sqx-in .sqx-hero-t .w > span{ transform:translateY(108%) skewY(7deg); animation:sqxWord .9s var(--sqx-out) forwards;
  animation-delay:calc(var(--d, 0) * 80ms + 380ms); }
@keyframes sqxWord{ to{ transform:none; } }
.sqx-hero-t .red > span{ color:var(--red); background:linear-gradient(180deg, var(--red-hot) 10%, var(--red) 70%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sqx-line{ display:block; width:min(280px, 78%); height:22px; margin:6px auto 12px; overflow:visible; }
.sqx-line path{ fill:none; stroke:var(--red); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0;
  filter:drop-shadow(0 0 6px var(--red)); }
.sqx-in .sqx-line path{ stroke-dashoffset:1; animation:sqxDraw 1.2s var(--sqx-out) .95s forwards; }
.sqx-lead{ max-width:34ch; margin:0 auto 16px; font-size:15px; line-height:1.55; font-weight:600; color:var(--txt-2); }
.sqx-lead b{ color:#fff; }
.sqx-paths{ list-style:none; max-width:430px; margin:0 auto; padding:0; display:flex; flex-direction:column; gap:8px; text-align:left; }
.sqx-paths li{ display:flex; align-items:flex-start; gap:12px; padding:11px 13px; border-radius:16px; background:var(--glass);
  border:1px solid var(--edge); font-size:12.5px; line-height:1.45; font-weight:600; color:var(--txt-2); }
.sqx-paths li b{ display:block; margin-bottom:1px; font-size:13.5px; font-weight:900; color:#fff; }
.sqx-paths .pi{ flex:none; width:32px; height:32px; border-radius:11px; display:grid; place-items:center; color:var(--red-hot);
  background:color-mix(in srgb, var(--red) 16%, transparent); }
.sqx-paths .pi .ic{ width:17px; height:17px; }

/* ---------- 2) cosa vuoi costruire ---------- */
.sqx-hc, .sqx-adv{ position:relative; display:block; width:100%; text-align:left; color:#fff; isolation:isolate; overflow:hidden;
  border-radius:26px; transition:transform .45s var(--sqx-spring), box-shadow .4s, opacity .35s, filter .35s; }
.sqx-hc::before, .sqx-adv::before{ content:''; position:absolute; inset:0; z-index:-1; padding:1.6px; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from var(--sqx-a), rgba(255,255,255,.08) 0deg, var(--red) 60deg, #fff 95deg, var(--red) 130deg, rgba(255,255,255,.08) 200deg, rgba(255,255,255,.08) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:sqxSpin 5s linear infinite; }
.sqx-hc::after, .sqx-adv::after{ content:''; position:absolute; top:-40%; bottom:-40%; width:36%; left:-60%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.13), transparent); transform:skewX(-16deg);
  animation:sqxSweep 5.5s var(--sqx-io) 1.6s infinite; }
.sqx-hc{ padding:15px 18px 16px; margin-bottom:10px; box-shadow:0 26px 60px -34px var(--red-glow);
  background:radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--red) 36%, transparent), transparent 58%), linear-gradient(165deg, #1b0a0f, #0c0b10 62%); }
.sqx-hc-top, .sqx-dc-top, .sqx-adv-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sqx-dc-top{ width:100%; }
.sqx-badge{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px; white-space:nowrap;
  font:900 10.5px/1 var(--font); letter-spacing:.14em; text-transform:uppercase; }
.sqx-badge .ic{ width:13px; height:13px; }
.sqx-badge.hot{ color:#fff; background:var(--grad-flat); box-shadow:0 8px 20px -8px var(--red-glow); }
.sqx-badge.pro{ color:#0b0b10; background:linear-gradient(135deg, #fff, #d4d4de); box-shadow:0 8px 20px -10px rgba(255,255,255,.45); }
.sqx-tick{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; border:2px solid rgba(255,255,255,.22);
  transition:background .3s, border-color .3s, box-shadow .3s, transform .4s var(--sqx-spring); }
.sqx-tick .sqx-ck{ opacity:0; transform:scale(.4); transition:opacity .25s, transform .4s var(--sqx-spring); }
.on .sqx-tick{ background:var(--grad-flat); border-color:transparent; box-shadow:0 0 18px var(--red-glow); }
.on .sqx-tick .sqx-ck{ opacity:1; transform:none; }
.sqx-hc-t{ display:block; margin-top:8px; font-family:var(--sqx-d); font-style:italic; font-weight:900; text-transform:uppercase;
  font-size:clamp(42px, 12vw, 54px); line-height:.9; letter-spacing:.01em;
  background:linear-gradient(180deg, #fff 30%, #ffc2c7); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sqx-hc-k{ display:block; margin-top:6px; font-size:16px; font-weight:900; }
.sqx-hc-s{ display:block; margin-top:4px; font-size:13px; line-height:1.45; font-weight:600; color:var(--txt-2); }
.sqx-hc-f{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.sqx-hc-f i{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:999px; font-style:normal;
  font-size:11.5px; font-weight:800; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); }
.sqx-hc-f .ic{ width:13px; height:13px; color:var(--red-hot); }
.sqx-hc.on{ box-shadow:0 0 0 2px var(--red), 0 30px 70px -30px var(--red-glow); }
.sqx-duo{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sqx-dc{ position:relative; display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:13px 13px 15px; overflow:hidden;
  border-radius:22px; color:#fff; background:linear-gradient(170deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border:1px solid var(--edge);
  transition:transform .45s var(--sqx-spring), border-color .3s, box-shadow .3s, opacity .35s, filter .35s, background .3s; }
.sqx-dc-ic{ width:40px; height:40px; border-radius:13px; display:grid; place-items:center; color:var(--red-hot);
  background:color-mix(in srgb, var(--red) 16%, transparent); }
.sqx-dc-ic .ic{ width:21px; height:21px; }
.sqx-dc .sqx-tick{ width:26px; height:26px; }
.sqx-dc-t{ margin-top:11px; font-family:var(--sqx-d); font-style:italic; font-weight:900; text-transform:uppercase;
  font-size:clamp(22px, 6.3vw, 28px); line-height:.95; letter-spacing:.01em; }
.sqx-dc-k{ margin-top:6px; font-size:13px; line-height:1.3; font-weight:900; }
.sqx-dc-s{ margin-top:4px; font-size:11.5px; line-height:1.42; font-weight:600; color:var(--txt-3); }
.sqx-dc.on{ border-color:var(--red); background:linear-gradient(170deg, color-mix(in srgb, var(--red) 22%, transparent), rgba(255,255,255,.02));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent), 0 22px 44px -26px var(--red-glow); }
.sqx-scopes.has .sqx-hc:not(.on), .sqx-scopes.has .sqx-dc:not(.on){ opacity:.5; filter:saturate(.5); }
@media (hover:hover){
  .sqx-hc:hover, .sqx-dc:hover, .sqx-adv:hover{ transform:translateY(-3px); }
  .sqx-dc:not(.on):hover{ border-color:color-mix(in srgb, var(--red) 45%, transparent); }
  .sqx-scopes.has .sqx-hc:not(.on):hover, .sqx-scopes.has .sqx-dc:not(.on):hover{ opacity:.85; filter:none; }
}
.sqx-hc:active, .sqx-dc:active, .sqx-adv:active{ transform:scale(.975); }
.sqx-hc.pop, .sqx-dc.pop, .sqx-adv.pop{ animation:sqxCardPop .6s var(--sqx-spring); }
@keyframes sqxCardPop{ 0%{ transform:scale(.96); } 50%{ transform:scale(1.025); } 100%{ transform:none; } }

/* ---------- 3) Basic / Advanced ---------- */
.sqx-adv{ padding:15px 18px 16px; box-shadow:0 30px 70px -36px var(--red-glow);
  background:radial-gradient(110% 100% at 0% 0%, color-mix(in srgb, var(--red) 32%, transparent), transparent 55%),
             radial-gradient(90% 90% at 100% 100%, rgba(255,255,255,.07), transparent 60%), linear-gradient(160deg, #180a0e, #0b0b10 70%); }
.sqx-adv-top{ justify-content:flex-start; }
.sqx-adv-t{ display:block; margin-top:10px; font-family:var(--sqx-d); font-style:italic; font-weight:900; text-transform:uppercase;
  font-size:clamp(44px, 12.5vw, 56px); line-height:.88; background:linear-gradient(180deg, #fff 35%, #ffb8be);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.sqx-adv-k{ display:block; margin-top:6px; font-size:15px; font-weight:900; }
.sqx-adv-f{ display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.sqx-adv-f i{ display:flex; align-items:center; gap:10px; font-style:normal; font-size:13px; font-weight:700; color:var(--txt-2); }
.sqx-adv-f .ic{ width:16px; height:16px; flex:none; color:var(--red-hot); }
.sqx-adv-m{ display:flex; align-items:center; gap:6px; margin-top:12px; font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--txt-3); }
.sqx-adv-m .ic{ width:14px; height:14px; }
.sqx-adv-cta{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; height:48px; border-radius:15px; color:#fff;
  background:var(--grad); font-family:var(--sqx-d); font-style:italic; font-weight:800; font-size:19px; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:0 14px 30px -14px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.25); }
.sqx-adv-cta .ic{ width:18px; height:18px; }
.sqx-adv.unlocked .sqx-adv-cta{ color:#0b0b10; background:linear-gradient(135deg, #fff, #e4e4ec); box-shadow:0 14px 30px -16px rgba(255,255,255,.45); }
.sqx-adv.on{ box-shadow:0 0 0 2px var(--red), 0 30px 70px -30px var(--red-glow); }
.sqx-adv.unlocking{ animation:sqxUnlock 1.2s var(--sqx-spring) both; }
.sqx-adv.unlocking .sqx-badge.pro{ animation:sqxPop .7s var(--sqx-spring) .25s both; }
.sqx-adv.unlocking .sqx-adv-cta{ animation:sqxPop .7s var(--sqx-spring) .45s both; }
@keyframes sqxUnlock{ 0%{ transform:scale(.97); box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 70%, transparent); }
  45%{ transform:scale(1.03); box-shadow:0 0 0 18px transparent; } 100%{ transform:none; } }
.sqx-basic{ display:flex; align-items:center; gap:12px; width:100%; margin-top:10px; padding:13px 16px; border-radius:18px; text-align:left;
  color:var(--txt-2); background:transparent; border:1px dashed rgba(255,255,255,.16);
  transition:border-color .25s, background .25s, color .25s, transform .3s var(--sqx-spring); }
.sqx-basic-tx{ flex:1; min-width:0; }
.sqx-basic-tx b{ display:block; font-family:var(--sqx-d); font-style:italic; font-weight:800; font-size:22px; letter-spacing:.03em; text-transform:uppercase; color:#d6d6de; }
.sqx-basic-tx span{ display:block; margin-top:2px; font-size:12px; font-weight:700; color:var(--txt-3); }
.sqx-basic > .ic{ width:18px; height:18px; color:var(--txt-3); }
.sqx-basic:active{ transform:scale(.98); }
.sqx-basic.on{ border-style:solid; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.04); }
@media (hover:hover){ .sqx-basic:hover{ border-color:rgba(255,255,255,.32); color:#fff; } }

/* ---------- PAR-Q ---------- */
.sqx-pqs{ display:flex; flex-direction:column; gap:8px; }
.sqx-pq{ display:grid; grid-template-columns:24px minmax(0,1fr) 112px; align-items:center; gap:10px; padding:10px 10px 10px 12px;
  border-radius:18px; background:var(--glass); border:1px solid var(--edge); transition:border-color .3s, background .3s; }
.sqx-pq .n{ font-family:var(--sqx-d); font-style:italic; font-weight:800; font-size:17px; color:var(--txt-3); transition:color .3s; }
.sqx-pq .q{ font-size:13px; line-height:1.38; font-weight:700; color:#ececf2; }
.sqx-pq .sqx-seg-k{ background:rgba(255,255,255,.17); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
.sqx-pq .sqx-seg.danger .sqx-seg-k{ background:var(--grad-flat); box-shadow:0 8px 20px -8px var(--red-glow); }
.sqx-pq.no{ border-color:rgba(47,208,122,.24); }
.sqx-pq.no .n{ color:var(--ok); }
.sqx-pq.yes{ border-color:color-mix(in srgb, var(--red) 55%, transparent); background:color-mix(in srgb, var(--red) 9%, transparent); }
.sqx-pq.yes .n{ color:var(--red); }
.sqx-pq.pop .sqx-seg{ animation:sqxPop .45s var(--sqx-spring); }

/* ---------- consensi ("patti chiari") ---------- */
.sqx-pacts{ display:flex; flex-direction:column; gap:10px; }
.sqx-pact{ display:flex; align-items:center; gap:14px; width:100%; padding:15px 15px 15px 14px; border-radius:20px; text-align:left; color:#fff;
  background:var(--glass); border:1px solid var(--edge); transition:border-color .3s, background .3s, transform .35s var(--sqx-spring); }
.sqx-pact:active{ transform:scale(.98); }
.sqx-pact-ic{ flex:none; width:42px; height:42px; border-radius:14px; display:grid; place-items:center; color:var(--txt-2); background:rgba(255,255,255,.06); transition:.3s; }
.sqx-pact-ic .ic{ width:20px; height:20px; }
.sqx-pact-tx{ flex:1; min-width:0; }
.sqx-pact-tx b{ display:block; font-size:15px; font-weight:900; }
.sqx-pact-tx span{ display:block; margin-top:3px; font-size:12.5px; line-height:1.4; font-weight:600; color:var(--txt-2); }
.sqx-pact-tx em{ display:block; margin-top:6px; font-style:normal; font-size:11px; font-weight:700; color:var(--txt-3); }
.sqx-pact-bx{ flex:none; width:32px; height:32px; border-radius:11px; display:grid; place-items:center; border:2px solid rgba(255,255,255,.2);
  transition:background .3s, border-color .3s, box-shadow .3s; }
.sqx-pact-bx .sqx-ck{ width:18px; height:18px; opacity:0; }
.sqx-pact.on{ border-color:color-mix(in srgb, var(--red) 60%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--red) 14%, transparent), transparent); }
.sqx-pact.on .sqx-pact-ic{ color:var(--red-hot); background:color-mix(in srgb, var(--red) 20%, transparent); }
.sqx-pact.on .sqx-pact-bx{ border-color:transparent; background:var(--grad-flat); box-shadow:0 0 16px var(--red-glow); }
.sqx-pact.on .sqx-pact-bx .sqx-ck{ opacity:1; }
.sqx-pact.pop .sqx-pact-bx{ animation:sqxPop .55s var(--sqx-spring); }

/* ---------- riepilogo ---------- */
.sqx-sum-hero{ display:flex; align-items:center; gap:12px; margin-bottom:12px; padding:13px 14px; border-radius:20px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--red) 22%, transparent), rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb, var(--red) 40%, transparent); }
.sqx-sum-ic{ flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; background:var(--grad-flat);
  box-shadow:0 10px 24px -12px var(--red-glow); }
.sqx-sum-hero > span:nth-child(2){ flex:1; min-width:0; }
.sqx-sum-hero b{ display:block; font-family:var(--sqx-d); font-style:italic; font-weight:900; font-size:25px; line-height:1; text-transform:uppercase; }
.sqx-sum-hero em{ display:block; margin-top:3px; font-style:normal; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-2); }
.sqx-sum{ margin-bottom:10px; padding:12px 14px 4px; border-radius:20px; background:var(--glass); border:1px solid var(--edge); }
.sqx-sum-h{ display:flex; align-items:center; gap:8px; margin-bottom:4px; font:900 11.5px/1 var(--font); letter-spacing:.14em; text-transform:uppercase; }
.sqx-sum-h .ic{ width:16px; height:16px; color:var(--red-hot); }
.sqx-sum-h span{ flex:1; }
.sqx-sum-h .sqx-link{ padding:4px 2px; font-size:12.5px; letter-spacing:0; text-transform:none; }
.sqx-sum-r{ display:flex; gap:12px; padding:9px 0; border-top:1px solid rgba(255,255,255,.055); font-size:13.5px; }
.sqx-sum-r .k{ flex:0 0 42%; font-weight:700; color:var(--txt-3); }
.sqx-sum-r .v{ flex:1; min-width:0; text-align:right; font-weight:800; color:#fff; overflow-wrap:anywhere; }

/* ---------- caricamento ---------- */
.sqx-load{ text-align:center; }
.sqx-core{ position:relative; width:150px; height:150px; margin:0 auto 26px; display:grid; place-items:center; }
.sqx-core img{ width:62px !important; height:62px !important; filter:drop-shadow(0 0 22px var(--red-glow)); animation:sqxBeat 1.3s var(--sqx-io) infinite; }
.sqx-core i{ position:absolute; inset:0; border-radius:50%; border:2px solid transparent; border-top-color:var(--red);
  border-right-color:color-mix(in srgb, var(--red) 40%, transparent); animation:sqxSpinR 1.4s linear infinite; }
.sqx-core i.r2{ inset:16px; border-top-color:#fff; border-right-color:transparent; border-bottom-color:rgba(255,255,255,.25); animation-duration:2.1s; animation-direction:reverse; }
.sqx-core i.r3{ inset:-14px; border:1px dashed rgba(255,255,255,.14); animation-duration:9s; }
@keyframes sqxSpinR{ to{ transform:rotate(360deg); } }
@keyframes sqxBeat{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.sqx-load-t{ font-family:var(--sqx-d); font-style:italic; font-weight:800; font-size:32px; line-height:1; text-transform:uppercase; }
.sqx-load-l{ list-style:none; max-width:320px; margin:20px auto 0; padding:0; display:flex; flex-direction:column; gap:11px; text-align:left; }
.sqx-load-l li{ display:flex; align-items:center; gap:11px; font-size:14px; font-weight:700; color:var(--txt-3); opacity:.35; transform:translateX(-6px);
  transition:opacity .4s, transform .5s var(--sqx-out), color .4s; }
.sqx-load-l li.on{ opacity:1; transform:none; color:#fff; }
.sqx-load-l .bx{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; border:2px solid rgba(255,255,255,.2); transition:.3s; }
.sqx-load-l .bx .sqx-ck{ width:12px; height:12px; }
.sqx-load-l li .sqx-ck path{ stroke-dashoffset:1; }
.sqx-load-l li.on .bx{ border-color:transparent; background:var(--grad-flat); box-shadow:0 0 12px var(--red-glow); }
.sqx-load-l li.on .sqx-ck path{ stroke-dashoffset:0; transition:stroke-dashoffset .45s var(--sqx-out) .08s; }
.sqx-load-bar{ width:min(280px, 80%); height:4px; margin:24px auto 0; overflow:hidden; border-radius:4px; background:rgba(255,255,255,.08); }
.sqx-load-bar i{ display:block; width:0; height:100%; background:var(--grad-flat); box-shadow:0 0 12px var(--red-glow); animation:sqxFill 2.8s var(--sqx-io) forwards; }
@keyframes sqxFill{ to{ width:100%; } }

/* ---------- risultato ---------- */
.sqx-res-hero{ position:relative; padding-top:4px; }
.sqx-burst{ position:absolute; left:-30px; top:-30px; width:140px; height:140px; pointer-events:none; }
.sqx-burst i{ position:absolute; inset:0; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--red) 60%, transparent); opacity:0; }
.sqx-in .sqx-burst i{ animation:sqxRing 1.6s var(--sqx-out) both; }
.sqx-in .sqx-burst i:nth-child(2){ animation-delay:.25s; }
.sqx-in .sqx-burst i:nth-child(3){ animation-delay:.5s; }
.sqx-rv{ opacity:0; transform:translate3d(0,26px,0); transition:opacity .8s var(--sqx-out), transform .8s var(--sqx-out); }
.sqx-rv.l{ transform:translate3d(-26px,14px,0); }
.sqx-rv.r{ transform:translate3d(26px,14px,0); }
.sqx-rv.in{ opacity:1; transform:none; }
.sqx-kcal{ position:relative; overflow:hidden; margin-top:18px; padding:20px 18px 18px; border-radius:26px; text-align:center;
  background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--red) 30%, transparent), transparent 60%), linear-gradient(180deg, #16080c, #0b0b10);
  border:1px solid color-mix(in srgb, var(--red) 35%, transparent); }
.sqx-kcal-k{ font:800 11px/1 var(--font); letter-spacing:.2em; text-transform:uppercase; color:var(--txt-2); }
.sqx-kcal-n{ display:flex; align-items:baseline; justify-content:center; gap:8px; margin-top:8px; font-family:var(--sqx-d); font-style:italic; font-weight:900; }
.sqx-kcal-n b{ font-size:clamp(78px, 22vw, 104px); line-height:.9; letter-spacing:-.005em; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, #fff 20%, color-mix(in srgb, var(--red) 55%, #fff)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sqx-kcal-n span{ font-size:24px; color:var(--red-hot); text-transform:uppercase; }
.sqx-kcal-adj{ margin-top:8px; font-size:13px; font-weight:700; color:var(--txt-2); }
.sqx-kcal-adj i{ margin-right:5px; padding:3px 8px; border-radius:999px; font-style:normal; font-weight:900; color:#fff; background:color-mix(in srgb, var(--red) 32%, transparent); }
.sqx-macros{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px; }
.sqx-mr{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px 12px; border-radius:20px;
  background:var(--glass); border:1px solid var(--edge); }
.sqx-mr svg{ width:78px; height:78px; transform:rotate(-90deg); }
.sqx-mr circle{ fill:none; stroke-width:7; stroke-linecap:round; }
.sqx-mr .t{ stroke:rgba(255,255,255,.08); }
.sqx-mr .v{ stroke:var(--red); stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset 1.4s var(--sqx-out); transition-delay:calc(var(--d, 0) * 130ms + 250ms); }
.sqx-mr:nth-child(2) .v{ stroke:#FF8A4C; }
.sqx-mr:nth-child(3) .v{ stroke:#FFC94A; }
.sqx-rv.in .sqx-mr .v{ stroke-dashoffset:calc(100 - var(--p)); }
.sqx-mr .c{ position:absolute; left:0; right:0; top:14px; height:78px; display:flex; align-items:center; justify-content:center; gap:1px;
  font-family:var(--sqx-d); font-style:italic; font-weight:800; font-size:25px; }
.sqx-mr .c small{ font-size:13px; color:var(--txt-3); }
.sqx-mr > span{ font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-2); }
.sqx-card{ position:relative; margin-top:12px; padding:16px; border-radius:22px; background:var(--glass); border:1px solid var(--edge); }
.sqx-card-h{ display:flex; align-items:center; gap:9px; margin-bottom:10px; font-family:var(--sqx-d); font-style:italic; font-weight:800;
  font-size:21px; letter-spacing:.02em; text-transform:uppercase; }
.sqx-card-h .ic{ width:20px; height:20px; color:var(--red-hot); }
.sqx-card.warn{ border-color:color-mix(in srgb, var(--warn) 50%, transparent); background:color-mix(in srgb, var(--warn) 8%, transparent); }
.sqx-card.warn .sqx-card-h .ic{ color:var(--warn); }
.sqx-card.warn p{ margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--txt-2); font-weight:600; }
.sqx-card.water{ display:flex; align-items:center; gap:14px; overflow:hidden; }
.sqx-water-ic{ position:relative; z-index:1; flex:none; width:48px; height:48px; border-radius:15px; display:grid; place-items:center; color:var(--water);
  background:color-mix(in srgb, var(--water) 16%, transparent); }
.sqx-card.water > div:last-child{ position:relative; z-index:1; }
.sqx-card-t{ font-size:16px; font-weight:900; }
.sqx-card-t b{ margin-right:4px; font-family:var(--sqx-d); font-style:italic; font-size:30px; font-weight:900; color:var(--water); }
.sqx-card-s{ margin-top:2px; font-size:12.5px; font-weight:600; color:var(--txt-3); }
/* scheda e pasti generati: una riga per seduta / per pasto */
.sqx-days{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.sqx-day{ display:flex; flex-direction:column; gap:3px; padding:11px 12px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--edge); }
.sqx-day b{ font-family:var(--sqx-d); font-style:italic; font-weight:800; font-size:15px; letter-spacing:.02em; text-transform:uppercase; }
.sqx-day span{ font-size:12.5px; line-height:1.4; color:var(--txt-2); font-weight:600; }
.sqx-day em{ font-style:normal; font-size:11.5px; font-weight:800; color:var(--red-hot); letter-spacing:.04em; text-transform:uppercase; }
.sqx-load-slow{ margin:16px auto 0; max-width:300px; font-size:13px; line-height:1.5; font-weight:600; color:var(--txt-2); opacity:0; transition:opacity .5s; }
.sqx-load-slow.on{ opacity:1; }
.sqx-wave{ position:absolute; left:0; right:0; bottom:0; height:52%; pointer-events:none; opacity:.35; overflow:hidden; }
.sqx-wave i{ position:absolute; left:0; bottom:0; width:200%; height:100%; background-repeat:repeat-x; background-size:50% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q 25 5 50 20 T 100 20 T 150 20 T 200 20 V40 H0 Z' fill='%233AA0FF' fill-opacity='.55'/%3E%3C/svg%3E");
  animation:sqxWave 6s linear infinite; }
@keyframes sqxWave{ to{ transform:translateX(-50%); } }
.sqx-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.sqx-list li{ display:flex; gap:10px; font-size:13.5px; line-height:1.45; font-weight:600; color:var(--txt-2); }
.sqx-list .ic{ flex:none; width:16px; height:16px; margin-top:2px; color:var(--red-hot); }
.sqx-kv, .sqx-calc{ display:flex; gap:12px; padding:9px 0; border-top:1px solid rgba(255,255,255,.055); font-size:13.5px; }
.sqx-kv .k, .sqx-calc span{ flex:1; font-weight:700; color:var(--txt-3); }
.sqx-kv .k{ flex:0 0 36%; }
.sqx-kv .v{ flex:1; min-width:0; text-align:right; font-weight:800; color:#fff; overflow-wrap:anywhere; }
.sqx-calc b{ font-weight:900; color:#fff; white-space:nowrap; }
.sqx-calc.tot span{ color:#fff; }
.sqx-calc.tot b{ color:var(--red-hot); font-size:16px; }
.sqx-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:6px; }
.sqx-stat{ padding:12px 6px; border-radius:16px; text-align:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.05); }
.sqx-stat b{ display:block; font-family:var(--sqx-d); font-style:italic; font-weight:900; font-size:27px; line-height:1; }
.sqx-stat b.sm{ font-size:19px; line-height:27px; overflow-wrap:anywhere; }
.sqx-stat span{ display:block; margin-top:5px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); }
.sqx-ai{ display:flex; gap:10px; margin-top:12px; padding:12px 14px; border-radius:16px; font-size:12.5px; line-height:1.5; font-weight:600; color:var(--txt-2);
  border:1px dashed color-mix(in srgb, var(--red) 45%, transparent); background:color-mix(in srgb, var(--red) 6%, transparent); }
.sqx-ai .ic{ flex:none; width:16px; height:16px; margin-top:2px; color:var(--red-hot); }
.sqx-note{ display:flex; gap:10px; margin-top:12px; padding:12px 14px; border-radius:16px; font-size:12px; line-height:1.5; font-weight:600;
  color:var(--txt-3); background:rgba(255,255,255,.03); }
.sqx-note .ic{ flex:none; width:16px; height:16px; }
.sqx-res-acts{ display:flex; flex-direction:column; gap:10px; margin-top:18px; padding-bottom:6px; }

/* ---------- attesa / errore / hai un coach ---------- */
.sqx-center{ text-align:center; }
.sqx-center .sqx-sub{ margin-left:auto; margin-right:auto; }
.sqx-orbit{ position:relative; width:96px; height:96px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; color:var(--red-hot);
  background:radial-gradient(circle, color-mix(in srgb, var(--red) 22%, transparent), transparent 70%); }
.sqx-orbit .ic{ width:38px; height:38px; }
.sqx-orbit::before, .sqx-orbit::after{ content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--red) 50%, transparent);
  animation:sqxRing 2.8s var(--sqx-out) infinite; }
.sqx-orbit::after{ animation-delay:1.4s; }
.sqx-ringwrap{ position:relative; width:190px; height:190px; margin:0 auto 22px; }
.sqx-ringwrap svg{ width:100%; height:100%; transform:rotate(-90deg); }
.sqx-ringwrap circle{ fill:none; stroke-width:8; stroke-linecap:round; }
.sqx-ringwrap .t{ stroke:rgba(255,255,255,.07); }
.sqx-ringwrap .v{ stroke:var(--red); stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--p)); }
.sqx-in .sqx-ringwrap .v{ animation:sqxRingFill 1.6s var(--sqx-out) .2s both; }
@keyframes sqxRingFill{ from{ stroke-dashoffset:100; } }
.sqx-ringwrap .c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sqx-ringwrap .c b{ font-family:var(--sqx-d); font-style:italic; font-weight:900; font-size:44px; line-height:1; }
.sqx-ringwrap .c small{ margin-top:6px; font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3); }
.sqx-when{ margin-top:8px; font-size:13px; font-weight:800; color:#fff; }
.sqx-acts{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }

/* ---------- schermi ---------- */
@media (min-width:700px){
  .sqx-top{ padding:10px 24px 10px; }
  .sqx-stage{ padding:12px 28px 24px; }
  .sqx-dock{ padding:12px 28px calc(22px + var(--safe-b)); }
}
/* telefoni bassi (iPhone SE & co.): tutto un po' più compatto per stare in uno schermo */
@media (max-height:720px){
  .sqx-head{ margin-bottom:14px; }
  .sqx-title{ font-size:clamp(29px, 8.4vw, 38px); }
  .sqx-title.long{ font-size:clamp(25px, 7vw, 32px); }
  .sqx-sub{ font-size:13px; margin-top:8px; }
  .sqx-q{ margin-bottom:14px; }
  .sqx-opt{ min-height:52px; padding:11px 14px; }
  .sqx-num{ height:54px; }
  .sqx-cta{ height:52px; font-size:20px; }
  .sqx-hc-s, .sqx-dc-s{ display:none; }
  .sqx-paths li{ padding:9px 12px; }
  .sqx-hero-t{ font-size:clamp(42px, 12.5vw, 58px); }
  .sqx-adv-f{ gap:5px; margin-top:10px; }
  .sqx-pq{ padding:8px 8px 8px 12px; }
  /* benvenuto */
  .sqx-w-logo{ width:58px; height:58px; margin-bottom:12px; }
  .sqx-line{ height:16px; margin:4px auto 8px; }
  .sqx-lead{ font-size:14px; margin-bottom:12px; }
  .sqx-paths{ gap:6px; }
  .sqx-paths li{ padding:8px 11px; font-size:12px; }
  .sqx-paths li b{ font-size:13px; }
  .sqx-paths .pi{ width:28px; height:28px; }
  /* Basic / Advanced */
  .p-depth .sqx-sub{ display:none; }
  .sqx-adv{ padding:13px 16px 14px; }
  .sqx-adv-t{ font-size:40px; margin-top:8px; }
  .sqx-adv-cta{ height:44px; margin-top:12px; }
  .sqx-adv-m{ margin-top:9px; }
  /* sicurezza (PAR-Q) */
  .sqx-pqs{ gap:6px; }
  .sqx-pq{ padding:6px 7px 6px 10px; gap:8px; grid-template-columns:22px minmax(0,1fr) 104px; }
  .sqx-pq .q{ font-size:12.5px; line-height:1.3; }
  .sqx-pq .sqx-seg.sm button{ height:32px; font-size:13px; }
  .p-parq .sqx-sub{ font-size:12.5px; }
  /* testi lunghi */
  .sqx-ta{ min-height:80px; height:88px; }
}

/* ---------- niente movimento per chi lo chiede ---------- */
@media (prefers-reduced-motion:reduce){
  .sqx-in .sqx-a, .sqx-reveal, .sqx-in .sqx-w-logo{ animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
  .sqx-rv{ opacity:1 !important; transform:none !important; }
  .sqx-in .sqx-hero-t .w > span{ transform:none !important; animation:none !important; }
  .sqx-in .sqx-line path, .sqx-line path{ stroke-dashoffset:0 !important; animation:none !important; }
  .sqx-orb, .sqx-grid, .sqx-beam, .sqx-hc::before, .sqx-adv::before, .sqx-hc::after, .sqx-adv::after, .sqx-cta::after, .sqx-cta-wrap::before,
  .sqx-w-logo i, .sqx-orbit::before, .sqx-orbit::after, .sqx-core i, .sqx-core img, .sqx-wave i, .sqx-load-bar i, .sqx-burst i{ animation:none !important; }
  .sqx-load-bar i{ width:100%; }
}