#sondaggio-stile{
  --navy:#101F3C;
  --celeste:#BAD2EC;
  --celeste-deep:#8FB4D9;
  --paper:#F4F7FA;
  --muted:rgba(16,31,60,.55);
  --faint:rgba(16,31,60,.30);
  --display:"Cormorant Garamond",Georgia,serif;
  --ui:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sh:0 2px 8px rgba(16,31,60,.07), 0 8px 24px rgba(16,31,60,.06);
  --sh-on:0 4px 12px rgba(16,31,60,.14), 0 12px 32px rgba(16,31,60,.10);
  --col:640px;
}
#sondaggio-stile *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#sondaggio-stile{
  position:fixed;inset:0;z-index:99990;
  background:var(--paper);color:var(--navy);
  font-family:var(--ui);
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  overscroll-behavior:none;
}
html.ss-lock,body.ss-lock{overflow:hidden;height:100%}

#sondaggio-stile .bar{position:relative;height:2px;background:rgba(16,31,60,.07);flex:0 0 auto}
#sondaggio-stile .bar span{position:absolute;inset:0 auto 0 0;width:0;background:var(--navy);transition:width .5s cubic-bezier(.22,.8,.28,1)}
#sondaggio-stile .topmeta{
  flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
  width:100%;max-width:calc(var(--col) + 48px);margin:0 auto;
  padding:14px 24px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
#sondaggio-stile .brandmark{font-family:var(--display);font-style:italic;font-size:16px;letter-spacing:.01em;text-transform:none;color:var(--navy)}

#sondaggio-stile .stage{flex:1 1 auto;position:relative;overflow:hidden}
#sondaggio-stile .screen{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:22px 24px 12px;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
#sondaggio-stile .inner{width:100%;max-width:var(--col);margin:0 auto;position:relative}
#sondaggio-stile .screen.in{animation:ssIn .34s cubic-bezier(.22,.9,.3,1) both}
#sondaggio-stile .screen.out{animation:ssOut .2s ease-in both;pointer-events:none}
@keyframes ssIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ssOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){
  #sondaggio-stile .screen.in,#sondaggio-stile .screen.out{animation-duration:.01s}
  #sondaggio-stile .bar span{transition:none}
}

#sondaggio-stile .ghost{
  display:var(--ghost,block);
  position:absolute;top:-6px;right:0;
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:112px;line-height:1;color:var(--celeste);opacity:.42;
  pointer-events:none;user-select:none;
}
#sondaggio-stile .eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--celeste-deep);margin:0 0 12px;font-weight:600}
#sondaggio-stile h1.q{font-family:var(--display);font-weight:400;font-size:clamp(26px,7vw,38px);line-height:1.15;letter-spacing:-.01em;margin:0 0 8px;max-width:21ch;position:relative}
#sondaggio-stile .hint{font-size:13.5px;color:var(--muted);margin:0 0 20px;line-height:1.5}

#sondaggio-stile .opts{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
#sondaggio-stile .opts.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#sondaggio-stile .opts.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
#sondaggio-stile .opt{
  display:flex;align-items:center;gap:12px;width:100%;
  border:none;border-radius:16px;background:#fff;box-shadow:var(--sh);
  padding:17px 18px;font-size:15px;font-weight:500;line-height:1.4;text-align:left;letter-spacing:-.005em;
  font-family:var(--ui);color:var(--navy);cursor:pointer;
  transition:box-shadow .2s,background .2s,transform .12s;
}
#sondaggio-stile .grid .opt,#sondaggio-stile .grid2 .opt{
  min-height:82px;flex-direction:column;justify-content:center;text-align:center;
  padding:14px 8px;font-size:13.5px;font-weight:500;line-height:1.3;gap:0;
}
#sondaggio-stile .grid2 .opt{min-height:76px;font-size:14.5px}
#sondaggio-stile .opt:active{transform:scale(.985)}
#sondaggio-stile .opt[aria-pressed="true"]{background:var(--celeste);box-shadow:var(--sh-on)}
#sondaggio-stile .opt:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
#sondaggio-stile .opt .dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:rgba(16,31,60,.12);transition:background .2s}
#sondaggio-stile .grid .opt .dot,#sondaggio-stile .grid2 .opt .dot{display:none}
#sondaggio-stile .opt[aria-pressed="true"] .dot{background:var(--navy)}

#sondaggio-stile .scale{display:flex;gap:9px;margin-bottom:12px}
#sondaggio-stile .scale button{flex:1;height:72px;border:none;border-radius:16px;background:#fff;box-shadow:var(--sh);font-family:var(--display);font-size:26px;color:var(--navy);cursor:pointer;transition:background .2s,box-shadow .2s,color .2s}
#sondaggio-stile .scale button[aria-pressed="true"]{background:var(--navy);color:#fff;box-shadow:var(--sh-on)}
#sondaggio-stile .scale button:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
#sondaggio-stile .scalelabels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}

#sondaggio-stile .field{width:100%;border:none;border-radius:14px;background:#fff;box-shadow:var(--sh);font-family:var(--display);font-size:22px;color:var(--navy);padding:15px 17px;outline:none;transition:box-shadow .2s}
#sondaggio-stile .field::placeholder{color:var(--faint)}
#sondaggio-stile .field:focus{box-shadow:var(--sh-on)}
#sondaggio-stile textarea.field{resize:none;line-height:1.35;min-height:110px;font-size:20px}
#sondaggio-stile .count{font-size:11px;color:var(--faint);text-align:right;margin-top:8px}
#sondaggio-stile .sub{font-size:12px;color:var(--muted);margin:14px 0 8px;letter-spacing:.02em}
#sondaggio-stile .other{margin-top:10px;display:none}
#sondaggio-stile .other.on{display:block}
#sondaggio-stile .stack{display:flex;flex-direction:column;gap:10px}

#sondaggio-stile .foot{flex:0 0 auto;background:linear-gradient(to top,var(--paper) 70%,rgba(244,247,250,0))}
#sondaggio-stile .footinner{
  display:flex;align-items:center;gap:10px;
  width:100%;max-width:var(--col);margin:0 auto;padding:12px 24px 22px;
}
#sondaggio-stile .next{border:none;background:var(--navy);color:#fff;border-radius:14px;padding:15px 28px;font-size:14px;font-weight:600;letter-spacing:.02em;font-family:var(--ui);cursor:pointer;box-shadow:var(--sh);transition:background .2s,color .2s,opacity .2s}
#sondaggio-stile .next.skip{background:#E4E9F0;color:var(--muted);box-shadow:none}
#sondaggio-stile .next:disabled{opacity:.3;cursor:default}
#sondaggio-stile .back{border:none;background:none;color:var(--faint);font-size:13px;font-family:var(--ui);cursor:pointer;padding:14px 4px}
#sondaggio-stile .tip{margin-left:auto;font-size:11px;color:var(--faint)}
@media (max-width:420px){#sondaggio-stile .tip{display:none}}

#sondaggio-stile .center{max-width:28ch}
#sondaggio-stile .lede{font-size:15px;line-height:1.55;color:var(--muted);margin:0 0 26px;max-width:34ch}
#sondaggio-stile .rule{width:44px;height:1px;background:var(--celeste-deep);margin:0 0 20px}
#sondaggio-stile h1.big{font-family:var(--display);font-weight:400;font-size:clamp(38px,12vw,62px);line-height:1.02;letter-spacing:-.02em;margin:0 0 8px}
#sondaggio-stile h1.big em{font-style:italic;color:var(--celeste-deep)}
#sondaggio-stile .err{color:#9B2C2C;font-size:13px;margin-top:12px;display:none}
#sondaggio-stile .err.on{display:block}

/* desktop: contenuto centrato, mai attaccato ai bordi */
@media (min-width:760px){
  #sondaggio-stile{--col:660px}
  #sondaggio-stile .screen{padding:40px 48px 20px}
  #sondaggio-stile .topmeta{padding:20px 48px 0;max-width:calc(var(--col) + 96px)}
  #sondaggio-stile .footinner{padding:16px 48px 28px;max-width:calc(var(--col) + 96px)}
  #sondaggio-stile .ghost{font-size:132px;top:-14px}
  #sondaggio-stile h1.q{font-size:38px}
  #sondaggio-stile .opt{padding:18px 20px;font-size:15.5px}
  #sondaggio-stile .grid .opt{min-height:96px;font-size:15px}
  #sondaggio-stile .scale button{height:84px;font-size:30px}
}
@media (min-width:1200px){
  #sondaggio-stile{--col:700px}
}