/* ═══ Qualifier styling. Every value here is yours to change. Keep the
   class names and the two transitions (.q-body height, .q-s.on opacity/
   transform) — the animation depends on them. Map the five vars below to
   your own palette. ═══

   Warm paper, deep ink-navy, one neutral grotesque.
   Behaviour untouched. */
.q{
  --q-surface:#fff; --q-ink:#17191C; --q-soft:#45484D; --q-faint:#6B6F76;
  --q-line:#E4DCCC; --q-accent:#16293F; --q-accent-d:#0D1B2B; --q-accent-soft:#EAEFF5;
  --q-err:#8E2A16; --q-radius:10px;
  min-width:0;color:var(--q-ink)
}
.q *, .q *::before, .q *::after{box-sizing:border-box}
.q-top{margin-bottom:22px}
.q-bar{height:4px;background:#EDE7DA;border-radius:99px;overflow:hidden}
.q-bar span{display:block;height:100%;width:10%;background:var(--q-accent);border-radius:99px;
  transition:width .42s cubic-bezier(.4,0,.2,1)}
.q-step{font-size:11.5px;letter-spacing:.145em;text-transform:uppercase;font-weight:700;
  color:#8A6413;margin-top:11px}
.q-body{overflow:hidden;transition:height .28s cubic-bezier(.4,0,.2,1)}
.q-s{display:none}
.q-s.on{display:block;transition:opacity .2s ease,transform .2s ease}
.q-s h3{font-family:var(--serif);letter-spacing:-.022em;
  font-weight:700;
  font-size:clamp(20px,2.4vw,26px);line-height:1.2;letter-spacing:-.018em;
  margin:0 0 18px;color:var(--q-ink)}
.q-in{width:100%;font:inherit;font-size:16px;color:var(--q-ink);background:var(--q-surface);
  border:1px solid var(--q-line);border-radius:var(--q-radius);padding:15px 17px;
  -webkit-appearance:none;appearance:none;min-width:0}
.q-in::placeholder{color:#9BA0A7}
.q-in:focus{outline:none;border-color:var(--q-accent);box-shadow:0 0 0 3px var(--q-accent-soft)}
.q-back{appearance:none;background:none;border:0;font:inherit;font-size:13.6px;color:var(--q-faint);
  cursor:pointer;display:inline-block;width:auto;text-align:left;padding:13px 0 0}
.q-back:hover{color:var(--q-ink)}
.q-err{font-size:13.8px;color:var(--q-err);margin-top:10px;display:none}
.q-done p{font-size:15.6px;color:var(--q-soft);line-height:1.6;margin:0 0 13px}
.q-done:focus{outline:none}
.q-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.q-body,.q-bar span,.q-s.on{transition:none!important}}

/* The agreement sits at the moment of submission rather than in a footer
   link nobody clicks — browsewrap is weak, this is the click that matters. */
.q-agree{margin:.7rem 0 0;font-size:.82rem;line-height:1.5;color:var(--muted)}
.q-agree a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(102,106,113,.45)}
.q-agree a:hover{color:var(--ink);text-decoration-color:var(--ink)}