/* 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. */

/* The pinned mobile bar and any in page link target this by id, and it is
   injected rather than authored, so the sticky header offset has to live here
   or every concept lands it behind its own header. */
#hero-quiz,.hq{scroll-margin-top:96px}
@media (max-width:640px){#hero-quiz,.hq{scroll-margin-top:88px}}

.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}
}