/* Scalus hero quiz — the default lead capture on every concept site.
   Liquid glass, sits in the right of the hero, adopts the host page's accent.
   Everything is namespaced .hq- and the root uses all:initial, because this is
   injected into unrelated design systems and must never inherit or leak. */

.hq{
  --hq-accent:#C2703D;
  --hq-on-accent:#fff;
  --hq-ink:#12181C;
  --hq-fg:#12181C;
  --hq-fg-2:rgba(18,24,28,.66);
  --hq-fg-3:rgba(18,24,28,.44);
  --hq-line:rgba(18,24,28,.13);
  --hq-line-2:rgba(18,24,28,.26);
  --hq-glass:rgba(255,255,255,.62);
  --hq-glass-2:rgba(255,255,255,.82);
  --hq-glass-line:rgba(255,255,255,.85);
  --hq-glass-hi:rgba(255,255,255,.95);
  --hq-field:rgba(255,255,255,.9);
  --hq-shadow:0 30px 70px -30px rgba(10,20,28,.42),0 4px 14px -6px rgba(10,20,28,.2);
  --hq-s:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hq-e:cubic-bezier(.16,1,.3,1);
  --hq-r:26px;

  all:initial;
  display:block;
  box-sizing:border-box;
  font-family:var(--hq-s);
  color:var(--hq-fg);
  text-align:left;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  width:100%;
  max-width:470px;
  margin-inline:auto;
  border-radius:var(--hq-r);
  overflow:hidden;
  position:relative;
  z-index:5;
  background:var(--hq-glass);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border:1px solid var(--hq-glass-line);
  box-shadow:inset 0 1px 0 var(--hq-glass-hi),var(--hq-shadow);
  animation:hqIn 1.2s var(--hq-e) both;
}
@keyframes hqIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}

/* on a dark hero the glass flips */
.hq.hq-dark{
  --hq-fg:#F2F5F4;
  --hq-fg-2:rgba(242,245,244,.68);
  --hq-fg-3:rgba(242,245,244,.44);
  --hq-line:rgba(242,245,244,.15);
  --hq-line-2:rgba(242,245,244,.3);
  --hq-glass:rgba(255,255,255,.07);
  --hq-glass-2:rgba(255,255,255,.12);
  --hq-glass-line:rgba(255,255,255,.17);
  --hq-glass-hi:rgba(255,255,255,.22);
  --hq-field:rgba(255,255,255,.07);
  --hq-shadow:0 30px 70px -28px rgba(0,0,0,.78),0 4px 14px -6px rgba(0,0,0,.6);
}

.hq *,.hq *::before,.hq *::after{box-sizing:border-box}
.hq p,.hq h2,.hq h3,.hq ul,.hq li{margin:0;padding:0}
.hq ul{list-style:none}
.hq img{max-width:100%;height:auto;display:block;border:0}
.hq button{font:inherit;color:inherit}

/* the client's own logo tops the form */
.hq-brand{
  display:flex;align-items:center;justify-content:center;
  padding:18px 20px 16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--hq-accent) 14%,transparent),transparent);
  border-bottom:1px solid var(--hq-line);
}
.hq-brand img{max-height:44px;width:auto;object-fit:contain}
.hq-brand span{
  font:600 15px/1.2 var(--hq-s);letter-spacing:.02em;color:var(--hq-fg);
}

.hq-live{padding:20px 22px 22px}

.hq-prog{display:flex;gap:5px;margin-bottom:14px}
.hq-prog i{
  flex:1;height:3px;border-radius:3px;background:var(--hq-line);
  transition:background .8s var(--hq-e);
}
.hq-prog i.on{background:var(--hq-accent)}

.hq-step{
  font:600 10.5px/1.4 var(--hq-s);letter-spacing:.16em;text-transform:uppercase;
  color:var(--hq-fg-3);margin-bottom:9px;
}
.hq-q{font:600 20px/1.28 var(--hq-s);letter-spacing:-.015em;color:var(--hq-fg)}
.hq-hint{font-size:13.5px;color:var(--hq-fg-2);margin-top:7px}

.hq-opts{display:grid;gap:8px;margin:17px 0 4px}
.hq-opt{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  padding:13px 15px;border-radius:15px;
  background:var(--hq-glass-2);border:1px solid var(--hq-line);
  font-size:14.5px;line-height:1.45;color:var(--hq-fg);
  transition:border-color .5s,background .5s,transform .6s var(--hq-e);
}
.hq.hq-dark .hq-opt{background:rgba(255,255,255,.05)}
.hq-opt:hover{border-color:var(--hq-line-2);transform:translateY(-1px)}
.hq-opt:active{transform:scale(.985)}
.hq-opt.on{
  border-color:var(--hq-accent);
  background:color-mix(in srgb,var(--hq-accent) 13%,transparent);
}
.hq-dot{
  flex:0 0 auto;width:17px;height:17px;border-radius:50%;
  border:1.6px solid var(--hq-line-2);position:relative;transition:border-color .5s;
}
.hq-opt.on .hq-dot{border-color:var(--hq-accent)}
.hq-opt.on .hq-dot::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--hq-accent);
  animation:hqPop .5s var(--hq-e) both;
}
@keyframes hqPop{from{transform:scale(0)}to{transform:scale(1)}}

.hq-fields{display:grid;gap:11px;margin:17px 0 4px}
.hq-f label{
  display:block;font:600 10.5px/1.4 var(--hq-s);letter-spacing:.1em;text-transform:uppercase;
  color:var(--hq-fg-3);margin-bottom:6px;
}
.hq-f input{
  width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--hq-line);
  background:var(--hq-field);color:var(--hq-fg);
  font:400 15px/1.4 var(--hq-s);
  transition:border-color .5s,box-shadow .6s var(--hq-e);
}
.hq-f input::placeholder{color:var(--hq-fg-3)}
.hq-f input:focus{
  outline:none;border-color:var(--hq-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--hq-accent) 16%,transparent);
}

.hq-foot{display:flex;align-items:center;gap:10px;margin-top:16px}
.hq-back{
  background:none;border:0;padding:6px 2px;cursor:pointer;
  font:400 13px/1 var(--hq-s);color:var(--hq-fg-3);text-decoration:underline;
  text-underline-offset:3px;transition:color .5s;
}
.hq-back:hover{color:var(--hq-fg)}
.hq-next{
  margin-left:auto;cursor:pointer;border:0;
  padding:14px 24px;border-radius:100px;
  background:var(--hq-accent);color:var(--hq-on-accent);
  font:600 14px/1 var(--hq-s);
  box-shadow:0 8px 24px -8px color-mix(in srgb,var(--hq-accent) 70%,transparent);
  transition:transform .7s var(--hq-e),filter .4s,opacity .4s;
}
.hq-next:hover{transform:translateY(-2px);filter:brightness(1.06)}
.hq-next:active{transform:scale(.97)}
.hq-next:disabled{
  cursor:not-allowed;transform:none;box-shadow:none;
  background:transparent;color:var(--hq-fg-3);
  border:1px solid var(--hq-line);
}

.hq-priv{margin-top:13px;font-size:11.5px;line-height:1.55;color:var(--hq-fg-3)}

/* result */
.hq-res{padding:22px}
.hq-badge{
  display:inline-block;font:600 10px/1 var(--hq-s);letter-spacing:.16em;text-transform:uppercase;
  color:var(--hq-on-accent);background:var(--hq-accent);padding:7px 12px;border-radius:100px;
}
.hq-res h3{font:600 21px/1.25 var(--hq-s);letter-spacing:-.015em;margin-top:14px;color:var(--hq-fg)}
.hq-res > p{font-size:14.5px;line-height:1.7;color:var(--hq-fg-2);margin-top:10px}
.hq-list{display:grid;gap:9px;margin:16px 0 18px}
.hq-list li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--hq-fg-2)}
.hq-list svg{flex:0 0 auto;width:15px;height:15px;margin-top:3px;color:var(--hq-accent)}
.hq-res-cta{display:flex;gap:10px;flex-wrap:wrap}
.hq-again{
  background:none;cursor:pointer;padding:14px 20px;border-radius:100px;
  border:1px solid var(--hq-line-2);color:var(--hq-fg);
  font:600 14px/1 var(--hq-s);transition:background .5s,transform .6s var(--hq-e);
}
.hq-again:hover{background:var(--hq-glass-2)}
.hq-disc{margin-top:15px;font-size:11.5px;line-height:1.6;color:var(--hq-fg-3)}

.hq-fade{animation:hqFade .55s var(--hq-e) both}
@keyframes hqFade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .hq,.hq-fade,.hq-opt.on .hq-dot::after{animation:none}
  .hq *{transition:none !important}
}

/* the host hero becomes two columns when it was not already */
.hq-host-2col{
  display:grid !important;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr) !important;
  gap:clamp(28px,4vw,60px) !important;
  align-items:center !important;
}
@media(max-width:900px){
  .hq-host-2col{grid-template-columns:minmax(0,1fr) !important}
  .hq{max-width:none;margin-top:28px}
}