/* HMG Forms — conversational form engine, Signal skin (default theme)
   Scope: everything lives under .hf-scope so the engine can sit inside any LP
   without leaking styles. Per-client themes override the custom properties only. */

.hf-scope{
  /* grounds & surfaces (Signal light) */
  --hf-paper:#e9e6de;
  --hf-panel:#fbfaf6;
  --hf-panel-2:#f4f2ec;
  --hf-glass:rgba(251,250,246,.74);
  /* ink */
  --hf-ink:#1b1d25;
  --hf-ink-soft:#474b59;
  --hf-muted:#878b9a;
  /* feature charcoal */
  --hf-feature:#1c1e27;
  --hf-feature-2:#2a2d39;
  --hf-on-feature:#f3f1ea;
  /* brass, the one accent */
  --hf-brass:#a3762f;
  --hf-brass-soft:#bd9149;
  --hf-brass-tint:rgba(163,118,47,.13);
  --hf-brass-line:rgba(163,118,47,.35);
  /* status */
  --hf-red:#b0453a;
  --hf-red-tint:rgba(176,69,58,.14);
  --hf-green:#4f7355;
  /* hairlines */
  --hf-hair:rgba(27,29,37,.09);
  --hf-hair-strong:rgba(27,29,37,.15);
  /* type */
  --hf-serif:'Fraunces',Georgia,serif;
  --hf-ui:'Space Grotesk','Inter',system-ui,sans-serif;
  --hf-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  /* depth */
  --hf-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 44px -28px rgba(27,29,37,.4);
  --hf-shadow-feature:0 24px 60px -28px rgba(27,29,37,.6);
  --hf-ease:cubic-bezier(.16,1,.3,1);

  font-family:var(--hf-ui);
  color:var(--hf-ink);
  -webkit-font-smoothing:antialiased;
}

/* Signal dark */
.hf-scope[data-hf-theme="dark"]{
  --hf-paper:#121319;
  --hf-panel:#1d1f28;
  --hf-panel-2:#23252f;
  --hf-glass:rgba(18,19,25,.78);
  --hf-ink:#efe9df;
  --hf-ink-soft:#cbc6bc;
  --hf-muted:#8a8e9c;
  --hf-feature:#090a0e;
  --hf-feature-2:#181a22;
  --hf-on-feature:#f1ede4;
  --hf-brass:#d6ad6a;
  --hf-brass-soft:#e2bd80;
  --hf-brass-tint:rgba(214,173,106,.16);
  --hf-brass-line:rgba(214,173,106,.4);
  --hf-red:#e16d5e;
  --hf-red-tint:rgba(225,109,94,.14);
  --hf-green:#82b481;
  --hf-hair:rgba(255,255,255,.1);
  --hf-hair-strong:rgba(255,255,255,.16);
  --hf-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 44px -28px rgba(0,0,0,.7);
  --hf-shadow-feature:0 26px 60px -28px rgba(0,0,0,.85);
}

/* ---------- form root ---------- */

.hf-root{
  position:relative;
  background:var(--hf-paper);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:540px;
  width:100%;
  height:100%;
}
/* Signal corner washes: brass top-left, teal top-right */
.hf-root::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(52% 44% at 0% 0%, rgba(163,118,47,.10), transparent 70%),
    radial-gradient(46% 40% at 100% 0%, rgba(28,138,128,.07), transparent 70%);
}
.hf-scope[data-hf-theme="dark"] .hf-root::before{
  background:
    radial-gradient(52% 44% at 0% 0%, rgba(214,173,106,.08), transparent 70%),
    radial-gradient(46% 40% at 100% 0%, rgba(79,208,196,.05), transparent 70%);
}

/* overlay mode */
.hf-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
}
.hf-overlay .hf-scope{height:100%;}
.hf-overlay .hf-root{height:100%;min-height:0;}
.hf-root:focus{outline:none;}
body.hf-lock{overflow:hidden;}

/* progress */
.hf-progress{
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--hf-hair);
  z-index:4;
}
.hf-progress-fill{
  height:100%;
  width:100%;
  background:var(--hf-brass);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .4s var(--hf-ease);
}

/* brand mark, top-left like the reference */
.hf-brand{
  position:absolute;
  top:20px;left:24px;
  z-index:4;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:15px;
  color:var(--hf-ink);
  text-decoration:none;
}
.hf-brand img,.hf-brand svg{height:26px;display:block;}

/* close (overlay only) */
.hf-close{
  position:absolute;
  top:16px;right:16px;
  z-index:5;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hf-hair-strong);
  border-radius:10px;
  background:var(--hf-glass);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--hf-ink-soft);
  cursor:pointer;
  transition:transform .2s var(--hf-ease), color .2s;
}
.hf-close:hover{transform:translateY(-1px);color:var(--hf-ink);}

/* ---------- question stage ---------- */

.hf-viewport{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  overflow:hidden;
  z-index:1;
}
.hf-card{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:88px 28px 120px;
}
/* motion is an enhancement only: cards are visible by default, the
   animation classes are added at runtime by JS (never gates visibility) */
@media (prefers-reduced-motion:no-preference){
  .hf-card.hf-enter{animation:hf-in .45s var(--hf-ease) both;}
  .hf-card.hf-exit-up{animation:hf-out-up .22s ease-in both;}
  .hf-card.hf-exit-down{animation:hf-out-down .22s ease-in both;}
  .hf-card.hf-enter-down{animation:hf-in-down .45s var(--hf-ease) both;}
}
@keyframes hf-in{from{opacity:0;transform:translateY(34px);}to{opacity:1;transform:none;}}
@keyframes hf-in-down{from{opacity:0;transform:translateY(-34px);}to{opacity:1;transform:none;}}
@keyframes hf-out-up{to{opacity:0;transform:translateY(-30px);}}
@keyframes hf-out-down{to{opacity:0;transform:translateY(30px);}}

.hf-qnum{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--hf-mono);
  font-size:13px;
  color:var(--hf-brass);
  margin-bottom:14px;
}
.hf-qnum svg{display:block;}

.hf-title{
  font-family:var(--hf-serif);
  font-weight:500;
  font-size:clamp(24px,3.4vw,32px);
  line-height:1.22;
  letter-spacing:-.015em;
  margin:0 0 10px;
}
.hf-title .hf-req{color:var(--hf-brass);margin-left:2px;}
.hf-desc{
  font-size:16px;
  line-height:1.5;
  color:var(--hf-ink-soft);
  margin:0 0 26px;
  max-width:56ch;
}

/* ---------- choices ---------- */

.hf-options{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:460px;
  margin-bottom:26px;
}
.hf-option{
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:12px 16px;
  background:var(--hf-panel);
  border:1px solid var(--hf-hair-strong);
  border-radius:12px;
  box-shadow:var(--hf-shadow);
  font-family:var(--hf-ui);
  font-size:17px;
  color:var(--hf-ink);
  cursor:pointer;
  transition:transform .2s var(--hf-ease), border-color .2s, background .2s;
}
.hf-option:hover{transform:translateY(-1px);border-color:var(--hf-brass-line);}
.hf-option:focus-visible{outline:none;border-color:var(--hf-brass);}
.hf-option[aria-checked="true"]{
  border-color:var(--hf-brass);
  background:var(--hf-brass-tint);
}
.hf-key{
  flex:none;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  background:var(--hf-panel-2);
  border:1px solid var(--hf-hair-strong);
  border-radius:6px;
  font-family:var(--hf-mono);
  font-size:12px;
  font-weight:600;
  color:var(--hf-ink-soft);
}
.hf-option[aria-checked="true"] .hf-key{
  background:var(--hf-feature);
  border-color:var(--hf-feature);
  color:var(--hf-on-feature);
}
.hf-option .hf-check{
  margin-left:auto;
  color:var(--hf-brass);
  opacity:0;
  transition:opacity .15s;
}
.hf-option[aria-checked="true"] .hf-check{opacity:1;}

/* ---------- picture choice ---------- */

.hf-options-pic{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  max-width:600px;
}
.hf-option.hf-pic{
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:0;
  overflow:hidden;
  position:relative;
}
.hf-pic-img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  background:var(--hf-panel-2);
}
.hf-pic-label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  font-size:15px;
  text-align:left;
}
.hf-option.hf-pic .hf-check{
  position:absolute;
  top:9px;right:9px;
  margin:0;
  background:var(--hf-panel);
  border-radius:99px;
  padding:3px;
}

/* ---------- rating ---------- */

.hf-rating{
  display:flex;
  gap:8px;
  margin-bottom:26px;
}
.hf-star{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  background:transparent;
  border:none;
  border-radius:10px;
  color:var(--hf-hair-strong);
  cursor:pointer;
  transition:transform .18s var(--hf-ease), color .18s;
}
.hf-star svg{display:block;fill:none;}
.hf-star:hover{transform:translateY(-2px);color:var(--hf-brass-soft);}
.hf-star.hf-on{color:var(--hf-brass);}
.hf-star.hf-on svg{fill:currentColor;}
.hf-star:focus-visible{outline:2px solid var(--hf-brass);outline-offset:2px;}

/* ---------- scale / NPS ---------- */

.hf-scale{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
  max-width:560px;
}
.hf-scale-btn{
  min-width:44px;
  height:44px;
  padding:0 10px;
  background:var(--hf-panel);
  border:1px solid var(--hf-hair-strong);
  border-radius:10px;
  box-shadow:var(--hf-shadow);
  font-family:var(--hf-mono);
  font-size:15px;
  color:var(--hf-ink);
  cursor:pointer;
  transition:transform .18s var(--hf-ease), border-color .18s, background .18s;
}
.hf-scale-btn:hover{transform:translateY(-1px);border-color:var(--hf-brass-line);}
.hf-scale-btn:focus-visible{outline:none;border-color:var(--hf-brass);}
.hf-scale-btn[aria-checked="true"]{
  background:var(--hf-feature);
  border-color:var(--hf-feature);
  color:var(--hf-on-feature);
}
.hf-scale-ends{
  display:flex;
  justify-content:space-between;
  max-width:560px;
  margin-bottom:26px;
  font-size:12px;
  color:var(--hf-muted);
}

/* ---------- "Other" free-text ---------- */

.hf-other{
  max-width:460px;
  margin:-14px 0 26px;
}

/* ---------- inputs ---------- */

.hf-fields{
  display:flex;
  flex-wrap:wrap;
  gap:18px 22px;
  max-width:560px;
  margin-bottom:26px;
}
.hf-field{flex:1 1 240px;}
.hf-label{
  display:block;
  font-family:var(--hf-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--hf-muted);
  margin-bottom:6px;
}
.hf-input,.hf-select{
  width:100%;
  font-family:var(--hf-ui);
  font-size:20px;
  color:var(--hf-ink);
  background:transparent;
  border:none;
  border-bottom:2px solid var(--hf-hair-strong);
  border-radius:0;
  padding:6px 2px 8px;
  transition:border-color .2s;
}
.hf-input::placeholder{color:var(--hf-muted);}
.hf-input:focus,.hf-select:focus{outline:none;border-bottom-color:var(--hf-brass);}
.hf-select{cursor:pointer;}
/* long text gets a real box: a growing underline reads as broken past one line */
.hf-textarea{
  border:1px solid var(--hf-hair-strong);
  border-radius:12px;
  background:var(--hf-panel);
  padding:12px 14px;
  font-size:17px;
  line-height:1.5;
  resize:vertical;
  min-height:96px;
}
.hf-textarea:focus{border-color:var(--hf-brass);border-bottom-color:var(--hf-brass);}
input.hf-input[type="date"],input.hf-input[type="time"]{
  font-family:var(--hf-ui);
  min-height:34px;
}
.hf-error{
  display:none;
  margin:-14px 0 20px;
  font-size:13px;
  color:var(--hf-red);
  background:var(--hf-red-tint);
  border-radius:8px;
  padding:7px 12px;
  width:fit-content;
}
.hf-error.hf-show{display:block;}

/* ---------- loading / "analysing your answers" ---------- */
/* The advance is driven by a JS timer, never by an animation event, so this is
   decoration only: if the transition never runs the card still moves on. */

.hf-loading{
  max-width:460px;
  margin-bottom:26px;
}
.hf-loading-bar{
  height:6px;
  background:var(--hf-panel-2);
  border:1px solid var(--hf-hair);
  border-radius:99px;
  overflow:hidden;
}
/* scaleX, not width — same idiom as .hf-progress-fill above. Animating width
   thrashes layout; a transform is compositor-only. */
.hf-loading-fill{
  height:100%;
  width:100%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--hf-brass),var(--hf-brass-soft));
  transform:scaleX(.04);
  transform-origin:0 50%;
  transition:transform 2200ms cubic-bezier(.33,.9,.5,1);
}
.hf-loading-step{
  margin-top:14px;
  font-family:var(--hf-mono);
  font-size:13px;
  color:var(--hf-muted);
  min-height:1.4em;
}
@media (prefers-reduced-motion:reduce){
  .hf-loading-fill{transition:none;}
}

/* ---------- consent ---------- */

.hf-consent{
  max-width:560px;
  margin-bottom:26px;
}
.hf-consent-label{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:14px 16px;
  background:var(--hf-panel);
  border:1px solid var(--hf-hair-strong);
  border-radius:12px;
  box-shadow:var(--hf-shadow);
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.hf-consent-label:hover{border-color:var(--hf-brass-line);}
/* selected state is an enhancement: :has() is unsupported on older engines and
   the native :checked box below still shows the state on its own */
.hf-consent-label:has(.hf-consent-box:checked){
  border-color:var(--hf-brass);
  background:var(--hf-brass-tint);
}
.hf-consent-box{
  flex:none;
  position:relative;
  width:22px;height:22px;
  margin:1px 0 0;
  -webkit-appearance:none;
  appearance:none;
  background:var(--hf-panel-2);
  border:1px solid var(--hf-hair-strong);
  border-radius:6px;
  cursor:pointer;
  transition:background .2s, border-color .2s;
}
.hf-consent-box:checked{background:var(--hf-feature);border-color:var(--hf-feature);}
.hf-consent-box:checked::after{
  content:"";
  position:absolute;
  left:7px;top:3px;
  width:5px;height:10px;
  border:solid var(--hf-on-feature);
  border-width:0 2.2px 2.2px 0;
  transform:rotate(45deg);
}
.hf-consent-box:focus-visible{outline:2px solid var(--hf-brass);outline-offset:2px;}
.hf-consent-text{
  font-size:14px;
  line-height:1.55;
  color:var(--hf-ink-soft);
}
.hf-consent-text a{color:var(--hf-brass);text-underline-offset:2px;}
/* inline on a fields card: sits under the inputs, so it needs less air above
   than the standalone consent card and a quieter box */
.hf-consent-inline{margin:-8px 0 24px;}
.hf-consent-inline .hf-consent-label{padding:12px 14px;gap:11px;}
.hf-consent-inline .hf-consent-text{font-size:13px;line-height:1.5;}

/* ---------- actions ---------- */

.hf-actions{
  display:flex;
  align-items:center;
  gap:14px;
}
.hf-btn{
  font-family:var(--hf-ui);
  font-weight:600;
  font-size:17px;
  background:var(--hf-feature);
  color:var(--hf-on-feature);
  border:none;
  border-radius:10px;
  padding:12px 22px;
  cursor:pointer;
  box-shadow:var(--hf-shadow-feature);
  transition:transform .2s var(--hf-ease), background .2s;
}
.hf-btn:hover{transform:translateY(-1px);background:var(--hf-feature-2);}
.hf-btn:focus-visible{outline:2px solid var(--hf-brass);outline-offset:2px;}
.hf-hint{
  font-family:var(--hf-mono);
  font-size:12px;
  color:var(--hf-muted);
}
@media (hover:none){.hf-hint{display:none;}}

/* end screen link-button */
.hf-btn-link{text-decoration:none;display:inline-block;}

/* ---------- footer nav ---------- */

.hf-nav{
  position:absolute;
  right:18px;bottom:18px;
  z-index:4;
  display:flex;
  gap:6px;
}
.hf-nav button{
  width:36px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:var(--hf-feature);
  color:var(--hf-on-feature);
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:opacity .2s, transform .2s var(--hf-ease);
}
.hf-nav button:hover{transform:translateY(-1px);}
.hf-nav button:disabled{opacity:.35;cursor:default;transform:none;}

.hf-powered{
  position:absolute;
  left:24px;bottom:20px;
  z-index:4;
  font-family:var(--hf-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--hf-muted);
}

/* ---------- responsive ---------- */

@media (max-width:640px){
  .hf-card{padding:76px 20px 110px;}
  .hf-title{font-size:23px;}
  .hf-option{font-size:16px;padding:11px 14px;}
  .hf-input,.hf-select{font-size:17px;}
  .hf-consent-label{padding:13px 14px;gap:11px;}
  .hf-consent-text{font-size:13.5px;}
  .hf-brand{top:16px;left:18px;}
  .hf-powered{display:none;}
}