/**
 * qualify-form.css — the shared qualify funnel's styles. SINGLE SOURCE OF TRUTH.
 *
 * Paired with _layout/qualify-form.html (markup) and /qualify-form.js (behavior).
 * Every page that renders the funnel loads all three; see README section 3c.
 *
 * WHY EVERYTHING IS SCOPED UNDER .hq
 * ----------------------------------
 * These rules used to live inline in qualify.html, where the funnel was the whole
 * page and bare `h1`, `input`, `.btn` selectors were safe. The funnel now also
 * renders as a card inside full marketing pages (the creator landing pages), whose
 * own headings, inputs and buttons must not inherit funnel sizing. So the component
 * owns the `.hq` namespace and reaches nothing outside it — including its design
 * tokens, declared on `.hq` rather than `:root` so the component is self-contained
 * on any host page.
 *
 * Host pages still own their own chrome (body background, logo header, footer) and
 * the `body.on-result` hook the script sets when the result screen opens.
 */

.hq{
  --teal:#52ADA2;
  --teal-dark:#3D8A80;
  --teal-darker:#2A6B62;
  --teal-faint:#F0FBF7;
  --pink:#D0114D;
  --pink-dark:#A50D3D;
  --black:#0D0D0D;
  --gray-900:#1A1A1A;
  --gray-700:#444444;
  --gray-500:#777777;
  --gray-300:#BBBBBB;
  --gray-100:#F0F0F0;
  --gray-50:#F8F8F8;
  --white:#FFFFFF;
  --hq-font:'DM Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --radius:12px;
  --radius-sm:8px;

  font-family:var(--hq-font);
  color:var(--black);
  text-align:left;
}

.hq *{box-sizing:border-box;}
/* Author rules like .btn-back{display:block} override the UA's [hidden] rule,
   so state it explicitly or hidden elements keep rendering. */
.hq [hidden]{display:none !important;}

/* ---------- header row ---------- */
/* One flex row: the host page's own branding or card heading goes in the slot on
   the left, the step counter sits on the right. /qualify puts its logo there;
   a creator page puts the card's "See if you qualify" heading there. */
.hq-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:4px 0 28px;
}
.hq-head img{height:34px;width:auto;display:block;}
.hq .progress{
  font-size:13px;
  font-weight:600;
  color:var(--teal-darker);
  letter-spacing:.02em;
  white-space:nowrap;
}

.hq .bar{
  height:3px;
  background:rgba(82,173,162,.22);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:32px;
}
.hq .bar span{
  display:block;
  height:100%;
  width:0;
  background:var(--teal);
  border-radius:999px;
  transition:width .35s cubic-bezier(.4,0,.2,1);
}

/* ---------- steps ---------- */
.hq .step{display:none;animation:hq-rise .28s ease-out;}
.hq .step.on{display:block;}
@keyframes hq-rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .hq .step{animation:none;}
  .hq .bar span{transition:none;}
}

.hq h1{
  font-size:29px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 8px;
}
.hq .sub{
  font-size:15px;
  color:var(--gray-700);
  margin:0 0 24px;
  line-height:1.5;
}

.hq label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--gray-700);
  margin-bottom:7px;
}

.hq input,.hq select{
  width:100%;
  font-family:var(--hq-font);
  font-size:16px; /* 16px min prevents iOS zoom-on-focus */
  padding:15px 14px;
  border:1.5px solid var(--gray-300);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--black);
  appearance:none;
  -webkit-appearance:none;
}
.hq input:focus,.hq select:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(82,173,162,.18);
}
.hq select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23444' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}
.hq .row{display:flex;gap:12px;}
.hq .row > div{flex:1;min-width:0;}
.hq .field{margin-bottom:16px;}

.hq .note{
  font-size:12.5px;
  color:var(--gray-500);
  margin-top:9px;
  line-height:1.45;
}
.hq .err{
  font-size:13px;
  color:var(--pink);
  font-weight:500;
  margin-top:9px;
  min-height:1px;
}
.hq .err:empty{display:none;}

/* ---------- buttons ---------- */
.hq .btn{
  display:block;
  width:100%;
  font-family:var(--hq-font);
  font-size:16px;
  font-weight:700;
  padding:16px 20px;
  border:none;
  border-radius:var(--radius-sm);
  background:var(--pink);
  color:var(--white);
  cursor:pointer;
  margin-top:24px;
  text-align:center;
  text-decoration:none;
  transition:background .15s ease;
}
.hq .btn:hover{background:var(--pink-dark);}
.hq .btn:active{transform:translateY(1px);}
.hq .btn:disabled{background:var(--gray-300);cursor:not-allowed;}

.hq .btn-back{
  background:none;
  border:none;
  font-family:var(--hq-font);
  font-size:14px;
  font-weight:500;
  color:var(--gray-500);
  cursor:pointer;
  padding:14px 4px;
  margin-top:6px;
  display:block;
  width:100%;
  text-align:center;
}
.hq .btn-back:hover{color:var(--gray-900);}

.hq .link-quiet{
  background:none;
  border:none;
  font-family:var(--hq-font);
  font-size:14px;
  font-weight:600;
  color:var(--teal-darker);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  padding:14px 4px;
  display:block;
  width:100%;
  text-align:center;
  margin-top:2px;
}
/* Held shut until the field has something in it. Greyed rather than hidden so the
   way out stays visible to anyone looking for it. */
.hq .link-quiet:disabled{
  color:var(--gray-500);
  text-decoration:none;
  cursor:default;
}

/* ---------- typeahead ---------- */
.hq .ta{position:relative;}
.hq .sugg{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  border:1.5px solid var(--gray-300);
  border-radius:var(--radius-sm);
  background:var(--white);
  overflow:hidden;
}
.hq .sugg:empty{display:none;}
.hq .sugg li{
  padding:15px 14px;
  font-size:15.5px;
  cursor:pointer;
  border-bottom:1px solid var(--gray-100);
}
.hq .sugg li:last-child{border-bottom:none;}
.hq .sugg li:hover,.hq .sugg li[aria-selected="true"]{background:var(--teal-faint);}
.hq .sugg .m{color:var(--gray-500);}

.hq .picked{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 14px;
  border:1.5px solid var(--teal);
  background:var(--white);
  border-radius:var(--radius-sm);
  font-size:15.5px;
  font-weight:600;
}
.hq .picked button{
  background:none;
  border:none;
  font-family:var(--hq-font);
  font-size:13px;
  font-weight:600;
  color:var(--teal-darker);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
  padding:4px;
  white-space:nowrap;
}

/* ---------- choice buttons (fallback) ---------- */
.hq .choice{
  display:block;
  width:100%;
  text-align:left;
  font-family:var(--hq-font);
  font-size:16px;
  font-weight:600;
  padding:18px 16px;
  margin-bottom:11px;
  border:1.5px solid var(--gray-300);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--black);
  cursor:pointer;
  line-height:1.35;
  transition:border-color .15s ease,background .15s ease;
}
.hq .choice:hover{border-color:var(--teal);background:var(--teal-faint);}
.hq .choice .hint{
  display:block;
  font-size:13px;
  font-weight:400;
  color:var(--gray-500);
  margin-top:3px;
}

/* ---------- thinking ---------- */
/* A fixed, full-viewport overlay even though it sits inside the component, so the
   checking screen reads the same whether the funnel is the page or a card on one. */
.hq .thinking{
  position:fixed;
  inset:0;
  background:var(--teal-faint);
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px;
  text-align:center;
  z-index:50;
}
.hq .thinking.on{display:flex;}
.hq .spin{
  width:38px;
  height:38px;
  border:3px solid rgba(82,173,162,.25);
  border-top-color:var(--teal);
  border-radius:50%;
  animation:hq-sp .8s linear infinite;
  margin-bottom:22px;
}
@keyframes hq-sp{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.hq .spin{animation-duration:2.4s;}}
.hq .think-line{
  font-size:17px;
  font-weight:600;
  color:var(--gray-900);
  min-height:26px;
}

/* ---------- result ---------- */
.hq .price-block{
  background:var(--white);
  border:1.5px solid rgba(82,173,162,.4);
  border-radius:var(--radius);
  padding:22px 20px;
  margin:22px 0 4px;
}
.hq .price-big{
  font-size:36px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
  margin-bottom:8px;
}
.hq .price-big small{font-size:17px;font-weight:600;color:var(--gray-700);letter-spacing:0;}
.hq .price-block p{margin:0;font-size:14.5px;color:var(--gray-700);line-height:1.55;}
/* Billing period toggle. Same class names and treatment as the checkout
   pages, so the funnel reads as one component from /qualify to Stripe. */
.hq .billing{display:flex;flex-direction:column;align-items:center;text-align:center;margin:20px 0 0;}
/* Track in Teal Faint, selected pill in white. Teal stays an accent — the brand
   rule is that it is never a button fill on any surface. */
.hq .hb-toggle{
  display:inline-flex;background:var(--teal-faint);border:1px solid rgba(82,173,162,.35);
  border-radius:999px;padding:5px;gap:4px;
}
.hq .hb-toggle button{
  appearance:none;border:0;background:transparent;font-family:inherit;
  font-size:14.5px;font-weight:700;color:#4A4A4A;padding:10px 22px;
  border-radius:999px;cursor:pointer;transition:background .15s ease,color .15s ease;
}
.hq .hb-toggle button[aria-selected="true"]{
  background:var(--white);color:var(--black);box-shadow:0 1px 3px rgba(13,13,13,.12);
}
/* One slot for both states, height reserved so switching never shifts the page. */
.hq .hb-note{
  font-size:13px;font-weight:700;color:var(--teal-darker);
  margin:8px 0 0;min-height:18px;line-height:1.4;
}
.hq .footnote{font-size:12.5px;color:var(--gray-500);margin-top:14px;line-height:1.5;text-align:center;}

/* The promo line, shown only when a host page supplies data-hq-promo (the creator
   landing pages). Absent on /qualify, which has no code to apply. */
.hq .price-block .promo-note{
  margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(82,173,162,.28);
  font-size:13.5px;font-weight:600;color:var(--teal-darker);line-height:1.5;
}

.hq .pill{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--teal-darker);
  background:rgba(82,173,162,.14);
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:14px;
}

/* ---------- result: selling before the price ----------
   The result screen used to be a price with one paragraph under it. It now makes
   the case first: what the driver would otherwise pay, then HUM's price as the
   alternative, then what it includes. .terms/.section/.includes/details.faq match
   the checkout pages, because the copy inside them is stamped from the same source. */
/* The opening argument. One per driver type; see data-stages in the markup. */
.hq .anchor{
  background:var(--white);
  border-radius:var(--radius);
  padding:16px;
  margin:22px 0 0;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:15px;
  line-height:1.5;
  color:var(--gray-700);
}
.hq .anchor p{margin:0;}
.hq .anchor b{color:var(--black);}
.hq .anchor .anchor-stat{font-weight:600;color:var(--black);}
.hq .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.hq .stats div{background:var(--teal-faint);border-radius:var(--radius-sm);padding:12px;display:flex;flex-direction:column;gap:2px;}
.hq .stats b{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.15;}
.hq .stats span{font-size:13px;line-height:1.35;color:var(--gray-700);}
.hq .price-block .price-label{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-darker);margin:0 0 6px;}
.hq .price-block .terms{font-size:13px;font-weight:600;color:var(--teal-darker);margin:4px 0 0;line-height:1.5;}
.hq .price-block .rate-box{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(82,173,162,.28);}
.hq .rate-box b{color:var(--black);}
.hq .callout{
  background:var(--white);border:1px solid rgba(82,173,162,.28);border-radius:var(--radius-sm);
  padding:14px 16px;margin:18px 0 0;font-size:14.5px;line-height:1.5;color:var(--gray-700);
}
.hq .callout b{color:var(--black);}
/* Testimonials. Verbatim from the Driver Case Study Interviews; first name and city
   only, and never next to an earnings figure. */
.hq figure.quote{
  background:var(--white);border-radius:var(--radius);padding:20px;margin:20px 0 0;
  display:flex;flex-direction:column;gap:12px;
}
.hq figure.quote::before{
  content:"\201C";font-size:54px;line-height:.7;height:22px;font-weight:800;color:var(--teal-dark);
}
.hq figure.quote blockquote{margin:0;font-size:18px;line-height:1.45;font-weight:500;color:var(--black);}
.hq figure.quote figcaption{font-size:14px;color:var(--gray-700);}
.hq figure.quote figcaption b{color:var(--black);font-weight:600;}
.hq .quote-note{margin:0;padding-top:10px;border-top:1px solid var(--gray-100);font-size:12px;line-height:1.5;color:var(--gray-700);}
.hq .section-sub{margin:-8px 0 14px;font-size:14px;line-height:1.5;color:var(--gray-700);}
.hq .first-clients{list-style:none;counter-reset:fc;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.hq .first-clients li{
  counter-increment:fc;position:relative;background:var(--white);border-radius:var(--radius-sm);
  padding:14px 16px 14px 52px;font-size:14px;line-height:1.5;color:var(--gray-700);
}
.hq .first-clients li::before{
  content:counter(fc);position:absolute;left:16px;top:15px;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--teal);color:var(--teal-darker);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
}
.hq .first-clients li b{display:block;color:var(--black);font-size:15px;margin-bottom:2px;}
.hq .section{margin-top:36px;}
.hq .section h2{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 14px;}
.hq .includes{list-style:none;margin:0;padding:0;}
.hq .includes li{
  background:var(--white);border-radius:var(--radius-sm);padding:14px 16px;margin:0 0 10px;
  font-size:14px;color:var(--gray-700);line-height:1.5;
}
.hq .includes li b{display:block;color:var(--black);font-size:15px;margin-bottom:2px;}
.hq details.faq{background:var(--white);border-radius:var(--radius-sm);margin:0 0 10px;}
.hq details.faq summary{
  font-size:15px;font-weight:600;padding:14px 16px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.hq details.faq summary::-webkit-details-marker{display:none;}
.hq details.faq summary::after{
  content:"";flex:0 0 auto;width:9px;height:9px;margin-top:-4px;
  border-right:2px solid var(--teal-darker);border-bottom:2px solid var(--teal-darker);
  transform:rotate(45deg);transition:transform .18s ease;
}
.hq details.faq[open] summary::after{transform:rotate(-135deg);margin-top:2px;}
.hq details.faq p{margin:0;padding:0 16px 16px;font-size:14px;color:var(--gray-700);line-height:1.6;}
/* Onboarding is shown after the CTA, as progress, so the obligations it involves
   don't arrive at the moment of decision. */
.hq .next-steps{list-style:none;counter-reset:n;margin:0;padding:0;}
.hq .next-steps li{
  counter-increment:n;position:relative;padding:0 0 12px 36px;
  font-size:14.5px;color:var(--gray-700);line-height:1.5;
}
.hq .next-steps li::before{
  content:counter(n);position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--teal);color:var(--teal-darker);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.hq .next-steps li b{color:var(--black);}
.hq .secure{font-size:13px;color:var(--gray-700);text-align:center;margin:10px 0 0;line-height:1.5;}

@media (min-width:600px){
  .hq h1{font-size:34px;}
}