/* ============================================================
   hubspot-form.css — restyle the HubSpot embed (hsfc-* light DOM)
   to match the Coast `.lead-form-glass` dark-glass look.

   Embed markup:
     <div class="hs-form-html" data-region=".." data-form-id=".." data-portal-id="..">
   HubSpot injects  form.hsfc-Form  into that div (light DOM, no iframe),
   so these overrides apply. Scope everything under .hs-form-html.
   ============================================================ */

/* ---- card ---- */
.hs-form-html {
  width: 100%;
  max-width: 28.875rem;
}
/* glass CARD lives on .hs-embed (our DOM) so our submit button can sit inside it
   without HubSpot wiping it on re-render. The .hsfc-Form itself stays transparent. */
.hs-embed {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 38.75rem;
  min-height: 22.5rem; /* hold space so the card doesn't pop in while loading */
  padding: var(--space-6);
  background: var(--color-black-50);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(0.625rem);
  backdrop-filter: blur(0.625rem);
}
/* loading state: keep the raw embed markup hidden + show a spinner until the
   HubSpot form has actually rendered (JS adds .is-loaded) */
.hs-embed:not(.is-loaded) .hs-form-html,
.hs-embed:not(.is-loaded) [data-hs-submit] {
  opacity: 0;
  pointer-events: none;
}
.hs-embed:not(.is-loaded)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.875rem;
  height: 1.875rem;
  margin: -0.9375rem 0 0 -0.9375rem;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: hs-spin 0.7s linear infinite;
}
.hs-embed.is-loaded .hs-form-html {
  opacity: 1;
  transition: opacity 0.4s var(--ease);
}
@keyframes hs-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hs-embed:not(.is-loaded)::after {
    animation: none;
  }
}
/* failed state: embed script blocked/never rendered — spinner off, message on */
.hs-embed.is-failed::after {
  content: none;
}
.hs-embed.is-failed .hs-form-html,
.hs-embed.is-failed [data-hs-submit] {
  display: none;
}
.hs-embed__fallback {
  margin: auto;
  max-width: 26rem;
  text-align: center;
  font-size: var(--text-body-size, 1rem);
  line-height: 1.5;
  color: var(--color-white);
  opacity: 0.85;
}
.hs-embed .hs-form-html {
  max-width: none;
}
/* card padding lives on .hs-embed; drop HubSpot's own Step padding so the two
   don't stack into oversized inner gutters */
.hs-embed .hsfc-Step__Content {
  padding: 0 !important;
}
.hs-form-html .hsfc-Form {
  width: 100%;
  padding: 0 !important;
  font-family: Geist, system-ui, -apple-system, sans-serif !important;
  color: var(--color-white) !important;
  background: transparent !important;
  border: 0 !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* HubSpot sets Helvetica on individual elements, beating the .hsfc-Form rule —
   force the site font (Geist) across the whole form */
.hs-form-html .hsfc-Form,
.hs-form-html .hsfc-Form * {
  font-family: Geist, system-ui, -apple-system, sans-serif !important;
}
/* our submit button, sitting inside the .hs-embed card below the fields */
.hs-embed [data-hs-submit] {
  align-self: flex-start;
  margin-top: calc(var(--space-4) - 0.5rem); /* 16px — evens out the field rhythm above */
}

/* ---- phone field: one bordered, transparent pill (flag + number as a unit) ---- */
.hs-embed .hsfc-PhoneInput {
  display: flex;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 4px !important;
}
/* [type] selectors raise specificity above the generic input border rule above,
   so the inner inputs go truly border-less and the field shows ONE border */
.hs-embed .hsfc-PhoneInput input,
.hs-embed .hsfc-PhoneInput input[type="tel"],
.hs-embed .hsfc-PhoneInput input[type="text"] {
  border: 0 !important; /* the outline lives on the container */
  border-radius: 0 4px 4px 0 !important;
}
/* keep a divider between the flag selector and the number field */
.hs-embed .hsfc-PhoneInput input[type="tel"] {
  border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.hs-embed .hsfc-PhoneInput__FlagAndCaret {
  background: transparent !important; /* drop HubSpot's opaque white flag box */
  border: 0 !important;
  border-radius: 4px 0 0 4px !important;
  transition: background var(--t-fast) var(--ease);
  cursor: pointer;
}
/* hover lights ONLY this square (the country selector), not the whole field */
.hs-embed .hsfc-PhoneInput__FlagAndCaret:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
/* select carets are CSS border-triangles — recolor the visible edge white */
.hs-embed .hsfc-PhoneInput__FlagAndCaret__Caret,
.hs-embed .hsfc-DropdownInput__Caret,
.hs-embed .hsfc-DropdownInput__Caret span {
  border-top-color: var(--color-white) !important;
}
/* country dropdown options: left-aligned rows */
.hs-embed .hsfc-DropdownOptions,
.hs-embed .hsfc-DropdownOptions__List__ListItem,
.hs-embed .hsfc-DropdownOptions__List__Li {
  text-align: left !important;
}
/* the SELECT element itself carries the field styling (border/radius/padding from
   the inputs rule); the wrapping div becomes a plain positioning context, and the
   caret is absolutely placed over the field's right edge */
/* `div.` raises specificity above the generic `.hsfc-DropdownInput` border rule */
.hs-embed div.hsfc-DropdownInput {
  position: relative;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.hs-embed .hsfc-DropdownInput .hsfc-TextInput {
  padding-right: 2.5rem !important; /* room for the caret */
}
.hs-embed .hsfc-DropdownInput__Caret {
  position: absolute;
  right: 0.875rem;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* HubSpot ships a stylesheet; neutralise its theme vars where it leaks */
.hs-form-html .hsfc-Step__Content,
.hs-form-html .hsfc-Step {
  background: transparent !important;
  box-shadow: none !important;
}

/* ---- rows / spacing ---- */
/* multi-field rows sit side by side (e.g. First + Last name); single fields fill */
.hs-form-html .hsfc-Row {
  display: flex !important;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}
.hs-form-html .hsfc-Row > * {
  flex: 1 1 0;
  min-width: 0;
}
/* below tablet: multi-field rows (e.g. First + Last) collapse to one column */
@media (max-width: 768px) {
  .hs-form-html .hsfc-Row {
    flex-direction: column;
    gap: var(--space-5);
  }
}
/* mobile: the form card spans full width (16px side gutters via its container) */
@media (max-width: 600px) {
  .hs-embed {
    max-width: none;
  }
}
.hs-form-html .hsfc-Row:last-of-type {
  margin-bottom: 0;
}
/* hidden-field rows (program_interest, honeypot) ship with an inline display:none that
   the !important flex above overrides — they rendered as 0px rows that still carried the
   row margin (~40px dead space above the submit button) */
.hs-form-html .hsfc-Row[style*="display:none"],
.hs-form-html .hsfc-Row[style*="display: none"] {
  display: none !important;
}
/* ---- labels ---- */
.hs-form-html .hsfc-FieldLabel {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  text-align: left !important;
  color: var(--color-white) !important;
}
.hs-form-html .hsfc-FieldLabel__RequiredIndicator {
  margin-left: 2px;
  color: rgba(255, 255, 255, 0.6);
}

/* ---- inputs / selects / textareas ---- */
.hs-form-html .hsfc-TextInput,
.hs-form-html .hsfc-TextArea,
.hs-form-html .hsfc-DropdownInput,
.hs-form-html .hsfc-Dropdown,
.hs-form-html .hsfc-PhoneInput input,
.hs-form-html input[type="text"],
.hs-form-html input[type="email"],
.hs-form-html input[type="tel"],
.hs-form-html input[type="number"],
.hs-form-html select,
.hs-form-html textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--fs-base);
  color: var(--color-white) !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 4px !important; /* match the Coast button radius */
  transition: border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
  box-sizing: border-box;
}
.hs-form-html .hsfc-TextInput::placeholder,
.hs-form-html input::placeholder,
.hs-form-html textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
/* the country-search input sits on the dropdown's WHITE panel — the white
   input text/placeholder/border above would vanish there */
.hs-embed .hsfc-DropdownOptions input {
  color: var(--color-black) !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
}
.hs-embed .hsfc-DropdownOptions input::placeholder {
  color: rgba(0, 0, 0, 0.5);
}
.hs-form-html .hsfc-TextInput:focus,
.hs-form-html input:focus,
.hs-form-html select:focus,
.hs-form-html textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}
/* hover feedback on the field inputs themselves (NOT the phone container, so
   hovering one half of the phone field doesn't light the whole block) */
.hs-embed .hsfc-TextInput:hover,
.hs-embed input:hover,
.hs-embed textarea:hover {
  border-color: rgba(255, 255, 255, 0.45) !important;
}
.hs-form-html select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-7);
}
.hs-form-html select option {
  color: var(--c-text);
}

/* ---- rich text (intro copy HubSpot may inject) ---- */
.hs-form-html .hsfc-RichText,
.hs-form-html .hsfc-RichText p,
.hs-form-html .hsfc-RichText :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-white) !important;
}
.hs-form-html .hsfc-RichText p {
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

/* ---- consent / checkboxes ---- */
.hs-form-html .hsfc-CheckboxField label,
.hs-form-html .hsfc-Consent,
.hs-form-html .hsfc-Consent * {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.72);
}

/* ---- submit button (matches btn-glass--solid) ---- */
.hs-form-html .hsfc-NavigationRow,
.hs-form-html .hsfc-NavigationRow__Buttons {
  margin: var(--space-5) 0 0;
  padding: 0;
  justify-content: flex-start !important;
  text-align: left !important;
}
/* proxy mode: hide HubSpot's own submit row; a styled Coast [data-hs-submit]
   button sits outside the embed and clicks this hidden button via JS */
.hs-form-html--proxy .hsfc-NavigationRow {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}

/* our proxy button, once JS moves it inside the form card */
.hs-form-html .hsfc-Step__Content [data-hs-submit] {
  margin-top: var(--space-5);
}

/* matches Coast .btn-glass--solid: white, black text, 4px radius, invert on hover */
.hs-form-html .hsfc-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: var(--space-3) var(--space-5) !important;
  font: inherit;
  font-size: var(--fs-regular) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--color-black) !important;
  background: var(--color-white) !important;
  border: 1px solid var(--color-white) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.hs-form-html .hsfc-Button:hover {
  color: var(--color-white) !important;
  background: var(--color-black) !important;
  border-color: var(--color-black) !important;
}
.hs-form-html .hsfc-Button:active {
  transform: translateY(1px);
}

/* everything in the form reads left-aligned — errors AND the post-submit
   confirmation message (which replaces the form and otherwise renders centered) */
.hs-form-html,
.hs-form-html .hsfc-Form,
.hs-form-html .hsfc-Step,
.hs-form-html .hsfc-Step__Content,
.hs-form-html .hsfc-Row,
.hs-form-html .hsfc-ErrorAlert,
.hs-form-html [id$="-error"],
.hs-form-html .hsfc-RichText,
.hs-form-html [class*="onfirmation" i],
.hs-form-html [class*="hankYou" i],
.hs-form-html [class*="uccess" i] {
  text-align: left !important;
}

/* ---- errors ---- */
.hs-form-html .hsfc-ErrorAlert,
.hs-form-html .hsfc-FieldError,
.hs-form-html .hsfc-Field__error,
.hs-form-html [id$="-error"],
.hs-form-html [class*="error" i] {
  color: #ff8084 !important;
  font-size: 12px !important; /* fixed 12 per client; !important beats hsfc's own sheet */
}
.hs-form-html .hsfc-TextInput[aria-invalid="true"],
.hs-form-html input[aria-invalid="true"] {
  border-color: #ff8084;
}

/* HubSpot's "Did you mean name@domain.co?" typo suggestion. It ships as a
   LinkButton inside an InfoAlert and hsfc paints it #253342 — its own dark
   navy, unreadable on our dark glass panel. No "error" in the class, so the
   rule above never caught it. Sized with the field errors it sits next to,
   underlined because it is clickable (it rewrites the email on click). */
.hs-form-html .hsfc-InfoAlert,
.hs-form-html .hsfc-InfoAlert .hsfc-LinkButton {
  color: var(--color-white) !important;
  font-size: 12px !important;
}
.hs-form-html .hsfc-InfoAlert .hsfc-LinkButton {
  text-decoration: underline;
  cursor: pointer;
}

/* ---- success state ---- */
.hs-form-html .hsfc-Form--success,
.hs-form-html .hsfc-DoneMessage,
.hs-form-html .hsfc-ConfirmationMessage {
  color: var(--color-white);
}
/* after submit the fields are gone and only the thank-you remains — center it
   in the card (both axes) instead of leaving it stranded top-left over a big
   empty glass panel. .hs-embed--done is added by main.js when the form's
   submit button disappears (= confirmation rendered). */
.hs-embed.hs-embed--done {
  display: grid;
  place-items: center;
}
.hs-embed.hs-embed--done .hs-form-html,
.hs-embed.hs-embed--done .hs-form-html .hsfc-Form,
.hs-embed.hs-embed--done .hs-form-html .hsfc-Step,
.hs-embed.hs-embed--done .hs-form-html .hsfc-Step__Content,
.hs-embed.hs-embed--done .hs-form-html .hsfc-RichText,
.hs-embed.hs-embed--done .hs-form-html [class*="onfirmation" i],
.hs-embed.hs-embed--done .hs-form-html [class*="uccess" i] {
  text-align: center !important;
}

/* =====================================================================
   QUIZ VARIANT — .hs-embed--quiz  (Figma 10648:7073)
   Light "quiz card": white surface, big question headings, radio options
   as selectable bordered cards. Overrides the dark-glass theme above
   (equal/greater specificity, later in source order).
   ===================================================================== */
.hs-embed--quiz {
  max-width: 37.5rem;
  margin-inline: auto; /* centered card, no side image */
  min-height: 0;
  padding: var(--space-5); /* compact card */
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 1.125rem 3.125rem rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* loading spinner reads dark on the white card */
.hs-embed--quiz:not(.is-loaded)::after {
  border-color: rgba(0, 0, 0, 0.15);
  border-top-color: var(--c-text);
}
.hs-embed--quiz .hsfc-Form {
  color: var(--c-text) !important;
}

/* labels + required marks → dark */
.hs-embed--quiz .hsfc-FieldLabel {
  color: var(--c-text) !important;
}
.hs-embed--quiz .hsfc-FieldLabel__RequiredIndicator {
  color: rgba(0, 0, 0, 0.45);
}

/* contact inputs → light (dark text/border on white) */
.hs-embed--quiz .hsfc-TextInput,
.hs-embed--quiz .hsfc-TextArea,
.hs-embed--quiz .hsfc-PhoneInput input,
.hs-embed--quiz input[type="text"],
.hs-embed--quiz input[type="email"],
.hs-embed--quiz input[type="tel"],
.hs-embed--quiz input[type="number"],
.hs-embed--quiz select,
.hs-embed--quiz textarea {
  color: var(--c-text) !important;
  background-color: var(--color-white) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}
.hs-embed--quiz .hsfc-TextInput::placeholder,
.hs-embed--quiz input::placeholder,
.hs-embed--quiz textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.hs-embed--quiz .hsfc-TextInput:focus,
.hs-embed--quiz input:focus,
.hs-embed--quiz select:focus,
.hs-embed--quiz textarea:focus {
  border-color: var(--c-text) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}
.hs-embed--quiz .hsfc-TextInput:hover,
.hs-embed--quiz input:hover,
.hs-embed--quiz textarea:hover {
  border-color: rgba(0, 0, 0, 0.4) !important;
}
.hs-embed--quiz .hsfc-PhoneInput {
  border-color: rgba(0, 0, 0, 0.2) !important;
}
.hs-embed--quiz .hsfc-PhoneInput input[type="tel"] {
  border-left-color: rgba(0, 0, 0, 0.2) !important;
}
.hs-embed--quiz .hsfc-PhoneInput__FlagAndCaret:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
.hs-embed--quiz .hsfc-PhoneInput__FlagAndCaret__Caret,
.hs-embed--quiz .hsfc-DropdownInput__Caret,
.hs-embed--quiz .hsfc-DropdownInput__Caret span {
  border-top-color: var(--c-text) !important;
}
.hs-embed--quiz select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232b2c2f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ---- quiz questions (radio groups) ---- */
.hs-embed--quiz .hsfc-RadioFieldGroup {
  margin-bottom: calc(var(--space-4) + 4px); /* 20px between questions */
}
/* the QUESTION text (the group's own label) */
/* the DS locks every --fw-* token to 500, so use an explicit 700 here (and on the
   nested spans, where HubSpot sets its own weight) to make the question bolder */
.hs-embed--quiz .hsfc-RadioFieldGroup > .hsfc-FieldLabel,
.hs-embed--quiz .hsfc-RadioFieldGroup > .hsfc-FieldLabel span {
  font-weight: 600 !important;
}
.hs-embed--quiz .hsfc-RadioFieldGroup > .hsfc-FieldLabel {
  margin-bottom: var(--space-3);
  font-size: var(--fs-base); /* 16px */
  line-height: 1.3;
  color: var(--c-text) !important;
}
/* options stack vertically */
.hs-embed--quiz .hsfc-RadioFieldGroup__Options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* each option = selectable bordered card (radio + label on one row) */
.hs-embed--quiz .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}
.hs-embed--quiz .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel:hover {
  border-color: rgba(0, 0, 0, 0.4);
}
/* selected option → emphasized dark border (per Figma) */
.hs-embed--quiz .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel:has(input:checked) {
  border-color: var(--c-text);
  box-shadow: inset 0 0 0 1px var(--c-text);
}
/* HubSpot's stylesheet loads after ours and zeroes the radio border, so the
   custom ring needs !important to survive */
.hs-embed--quiz .hsfc-RadioInput {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 auto;
  width: 1.125rem !important;
  height: 1.125rem !important;
  margin: 0 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.4) !important; /* visible ring when unselected */
  border-radius: 50% !important;
  background-color: var(--color-white) !important;
  background-image: none !important;
  transition: border-color var(--t-fast) var(--ease);
}
/* selected → black ring + black dot */
.hs-embed--quiz .hsfc-RadioInput:checked {
  border-color: var(--c-text) !important;
  background-image: radial-gradient(circle, var(--c-text) 0 0.3125rem, transparent 0.375rem) !important;
}

/* consent / rich text → dark */
.hs-embed--quiz .hsfc-Consent,
.hs-embed--quiz .hsfc-Consent *,
.hs-embed--quiz .hsfc-CheckboxField label {
  color: rgba(0, 0, 0, 0.6) !important;
}
.hs-embed--quiz .hsfc-RichText,
.hs-embed--quiz .hsfc-RichText p,
.hs-embed--quiz .hsfc-RichText :is(h1, h2, h3, h4, h5, h6) {
  color: var(--c-text) !important;
}
/* category block ("Spatial reasoning…" / "Multiple choice — 1 correct") ships
   inline font sizes from HubSpot — override with !important */
.hs-embed--quiz .hsfc-RichText p span {
  font-size: var(--fs-md) !important; /* 18px */
}
/* the subtext line under a step title (a direct p > span that does NOT wrap the
   title strong) — tighter line-height + muted */
.hs-embed--quiz .hsfc-RichText p > span:not(:has(strong)) {
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.55) !important;
}
.hs-embed--quiz .hsfc-RichText strong,
.hs-embed--quiz .hsfc-RichText strong span,
.hs-embed--quiz .hsfc-RichText p > span:has(strong) {
  font-weight: var(--fw-semibold) !important;
  font-size: var(--fs-h4) !important; /* title big like the question-step headings (last step too) */
  color: var(--c-text) !important; /* titles always dark, even when wrapped in a span */
}
/* errors → readable red on white; success → dark */
.hs-embed--quiz .hsfc-ErrorAlert,
.hs-embed--quiz .hsfc-FieldError,
.hs-embed--quiz [id$="-error"],
.hs-embed--quiz [class*="error" i] {
  color: #d12f2f !important;
  font-size: var(--fs-tiny) !important; /* 12px */
}
.hs-embed--quiz .hsfc-Form--success,
.hs-embed--quiz .hsfc-DoneMessage,
.hs-embed--quiz .hsfc-ConfirmationMessage {
  color: var(--c-text);
}
/* same suggestion on the white quiz card — dark, not white */
.hs-embed--quiz .hsfc-InfoAlert,
.hs-embed--quiz .hsfc-InfoAlert .hsfc-LinkButton {
  color: var(--c-text) !important;
}

/* native HubSpot nav buttons (Next / Previous / Submit) — dark so they read on
   the white quiz card (no Coast proxy button on the multi-step quiz) */
/* button row sits a bit tighter under the last field */
.hs-embed--quiz .hsfc-NavigationRow {
  margin-top: var(--space-5) !important;
}
/* Previous / Next (or Submit) — equal width, pushed to opposite ends */
.hs-embed--quiz .hsfc-NavigationRow__Buttons {
  display: flex !important;
  gap: var(--space-4);
  justify-content: space-between !important;
}
.hs-embed--quiz .hsfc-NavigationRow__Buttons .hsfc-Button {
  flex: 1 1 0 !important;
}
.hs-embed--quiz .hsfc-Button {
  color: var(--color-white) !important;
  background: var(--c-text) !important;
  border-color: var(--c-text) !important;
  transition: background-color 0.1s ease, color 0.1s ease,
    border-color 0.1s ease !important; /* faster hover */
}
.hs-embed--quiz .hsfc-Button:hover {
  color: var(--color-white) !important;
  background: var(--color-taupe) !important; /* brown hover */
  border-color: var(--color-taupe) !important;
  transform: none !important; /* no lift on hover */
  box-shadow: none !important;
}
.hs-embed--quiz .hsfc-Button:active {
  transform: none !important;
}
/* Submit (last step) — light green, distinct from the dark Next/Previous */
.hs-embed--quiz .hsfc-Button[type="submit"] {
  background: #6cce93 !important;
  border-color: #6cce93 !important;
  color: var(--c-text) !important;
}
.hs-embed--quiz .hsfc-Button[type="submit"]:hover {
  background: #57bd80 !important;
  border-color: #57bd80 !important;
  color: var(--c-text) !important;
}
/* disabled state (any button: Next / Previous / Submit) — muted, no hover */
.hs-embed--quiz .hsfc-Button:disabled,
.hs-embed--quiz .hsfc-Button[disabled],
.hs-embed--quiz .hsfc-Button[aria-disabled="true"],
.hs-embed--quiz .hsfc-Button:disabled:hover,
.hs-embed--quiz .hsfc-Button[disabled]:hover,
.hs-embed--quiz .hsfc-Button[aria-disabled="true"]:hover {
  background: #e6e6e6 !important; /* light grey when not clickable */
  border-color: #e6e6e6 !important;
  color: rgba(0, 0, 0, 0.4) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Previous (back) button — outline: black border + black text; fills black on hover.
   It's the only nav button without an aria-busy attribute (Next/Submit have it) */
.hs-embed--quiz .hsfc-NavigationRow__Buttons .hsfc-Button:not([aria-busy]) {
  background: transparent !important;
  border-color: var(--c-text) !important;
  color: var(--c-text) !important;
}
.hs-embed--quiz .hsfc-NavigationRow__Buttons .hsfc-Button:not([aria-busy]):hover {
  background: var(--c-text) !important;
  border-color: var(--c-text) !important;
  color: var(--color-white) !important;
}

/* tighter rows between contact fields on the final step */
.hs-embed--quiz .hsfc-Row {
  margin-bottom: var(--space-4) !important;
}
/* question rows: drop the row's own bottom gap — the RadioFieldGroup margin
   handles spacing between questions (otherwise the gap is doubled) */
.hs-embed--quiz .hsfc-Row:has(.hsfc-RadioFieldGroup) {
  margin-bottom: 0 !important;
}
/* category/description block: more room before the first question */
.hs-embed--quiz .hsfc-Row:has(.hsfc-RichText) {
  margin-bottom: var(--space-6) !important;
}
/* progress-bar row: tight top + bottom */
.hs-embed--quiz .hsfc-Row:has(.hsfc-ProgressBar) {
  margin-top: 0 !important;
  margin-bottom: var(--space-3) !important;
}
/* ---- multi-step progress bar ---- */
.hs-embed--quiz .hsfc-ProgressBar {
  margin-bottom: 0;
}
.hs-embed--quiz .hsfc-ProgressBar__Text {
  color: rgba(0, 0, 0, 0.5);
  font-size: var(--fs-small);
}
/* the track: barely visible behind the fill */
.hs-embed--quiz .hsfc-ProgressBar__Progress {
  background: rgba(0, 0, 0, 0.06) !important;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
/* the fill: brand taupe (brown) */
.hs-embed--quiz .hsfc-ProgressBar__Progress > div {
  background: var(--color-taupe) !important;
  border-radius: var(--radius-pill);
}

/* ---- video background behind the quiz card (like the contact sections) ---- */
.section--quiz-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh; /* the quiz section fills at least the viewport */
  padding-block: var(--space-7); /* trim the oversized default section padding */
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically center the form/result card */
}
.section--quiz-media .quiz-media {
  position: absolute;
  inset: 0;
  z-index: 0; /* non-negative — never let a layer escape a transform context */
  background: var(--color-taupe); /* fallback before the poster/video paints */
}
.section--quiz-media .quiz-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(43, 44, 47, 0.55) 0%,
    rgba(43, 44, 47, 0.4) 50%,
    rgba(43, 44, 47, 0.65) 100%
  );
}
.section--quiz-media .container {
  position: relative;
  z-index: 2;
}

/* =====================================================================
   CUSTOM APTITUDE QUIZ — .cquiz
   Our own form (assets/js/aptitude-quiz.js), rendered below the HubSpot
   embed. Mirrors the .hs-embed--quiz card + option-card look using the
   same design tokens, but with our own (non-.hsfc) class names.
   ===================================================================== */
/* dedicated results page: back link 120px under the header, card 56px later */
.section--results {
  padding-top: 4rem; /* 64px under the header */
}
/* short page: stretch main so the footer pins to the viewport bottom
   (body already has min-height:100svh from the reset) */
body:has(.section--results) {
  display: flex;
  flex-direction: column;
}
body:has(.section--results) main {
  flex: 1;
}
.results-back {
  display: flex; /* block-level so the 56px gap below actually applies */
  width: fit-content;
  margin-inline: auto; /* centered above the card */
  margin-bottom: 3.5rem;
}
/* dedicated results page: the card + a next-step button under it */
.results-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.cquiz {
  max-width: 37.5rem;
  margin-inline: auto;
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 1.125rem 3.125rem rgba(0, 0, 0, 0.08);
  color: var(--c-text);
}

/* category block — title + note line */
.cquiz__cat {
  border: 0;
  margin: 0 0 var(--space-5);
  padding: 0;
}
.cquiz__cat + .cquiz__cat {
  margin-top: var(--space-6);
}
.cquiz__cat-head {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-1); /* 4px below the title block */
}
.cquiz__cat-title {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--c-text);
}
.cquiz__cat-note {
  margin: var(--space-4) 0; /* 16px above and below */
  font-size: var(--fs-md);
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.55);
}

/* one question (fieldset/legend, no native chrome) */
.cquiz__q {
  border: 0;
  margin: 0 0 calc(var(--space-4) + 4px);
  padding: 0;
  min-inline-size: 0; /* fieldset default min-width:auto breaks flex/overflow */
}
.cquiz__q-label {
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
  padding: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
}

/* MC options — vertical stack of selectable bordered cards */
.cquiz__options {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.cquiz__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}
.cquiz__option:hover {
  border-color: rgba(0, 0, 0, 0.4);
}
.cquiz__option:has(input:checked) {
  border-color: var(--c-text);
  box-shadow: inset 0 0 0 1px var(--c-text);
}
.cquiz__option-text {
  line-height: 1.3;
}

/* custom radio ring + dot (same as the HubSpot quiz radios) */
.cquiz__radio {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1.5px solid rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  background-color: var(--color-white);
  background-image: none;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.cquiz__radio:checked {
  border-color: var(--c-text);
  background-image: radial-gradient(circle, var(--c-text) 0 0.3125rem, transparent 0.375rem);
}
.cquiz__radio:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
}

/* Likert (5-point) scale row — bordered option-cards like the MC options,
   with the number to the RIGHT of the radio */
.cquiz__scale {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.cquiz__scale-opt {
  flex: 0 0 auto; /* size to content, don't stretch across the container */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 1.25rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.cquiz__scale-opt:hover {
  border-color: rgba(0, 0, 0, 0.4);
}
.cquiz__scale-opt:has(input:checked) {
  border-color: var(--c-text);
  box-shadow: inset 0 0 0 1px var(--c-text);
}
.cquiz__scale-num {
  font-size: var(--fs-base);
  color: var(--c-text);
}
/* scale radios: black ring (checked dot already uses --c-text) */
.cquiz__radio--scale {
  border-color: var(--c-text);
}

/* contact block — its own step, no top divider */
.cquiz__contact {
  margin-top: 0;
}
/* more space under the contact-step title before the fields */
.cquiz__contact .cquiz__cat-title {
  margin-bottom: 1.25rem;
}
.cquiz__field {
  margin-bottom: var(--space-4);
}
.cquiz__field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}
.cquiz__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  color: var(--c-text);
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
}
.cquiz__input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.cquiz__input:hover {
  border-color: rgba(0, 0, 0, 0.4);
}
.cquiz__input:focus {
  border-color: var(--c-text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
  outline: none;
}
/* validation error — red border + red helper text */
.cquiz__req {
  color: #d12f2f;
}
.cquiz__field-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  line-height: 1.3;
  text-align: left;
  color: #d12f2f;
}
.cquiz__field--error .cquiz__input {
  border-color: #d12f2f;
}
.cquiz__field--error .cquiz__input:focus {
  border-color: #d12f2f;
  box-shadow: 0 0 0 3px rgba(209, 47, 47, 0.14);
}

/* submit */
.cquiz__actions {
  margin-top: var(--space-5);
}
.cquiz__submit {
  width: 100%;
}

/* ---- multi-step: one step visible at a time ---- */
.cquiz__step {
  display: none;
}
.cquiz__step.is-active {
  display: block;
}

/* progress bar — Text above the track (matches HubSpot's order/look) */
.cquiz__progress {
  margin-bottom: 1.25rem;
}
.cquiz__progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.cquiz__progress-step,
.cquiz__progress-text {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}
.cquiz__progress-track {
  height: 0.75rem;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.cquiz__progress-fill {
  height: 100%;
  width: 0;
  background: var(--color-taupe);
  border-radius: var(--radius-pill);
  transition: width var(--t-slow) var(--ease);
}

/* nav row — Previous / Next, equal width, opposite ends */
.cquiz__nav {
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  margin-top: var(--space-5);
}
.cquiz__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  border: 1px solid var(--c-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.cquiz__btn-arrow {
  flex: 0 0 auto;
  width: 0.375rem;
  height: 0.75rem;
  margin-inline-start: 4px; /* a touch more space from the label */
}
.cquiz__btn--back .cquiz__btn-arrow {
  margin-inline: 0 4px; /* arrow is on the left for Previous */
}
/* Previous: arrow points left */
.cquiz__btn--back .cquiz__btn-arrow {
  transform: rotate(180deg);
}
.cquiz__btn[hidden] {
  display: none;
}
/* Next (default) — dark fill, taupe (brown) hover */
.cquiz__btn--next {
  color: var(--color-white);
  background: var(--c-text);
  border-color: var(--c-text);
}
.cquiz__btn--next:hover {
  background: var(--color-taupe);
  border-color: var(--color-taupe);
}
/* Finish (last step) — light green, distinct from the dark Next */
.cquiz__btn--submit {
  background: #6cce93;
  border-color: #6cce93;
  color: var(--c-text);
}
.cquiz__btn--submit:hover {
  background: #57bd80;
  border-color: #57bd80;
  color: var(--c-text);
}
/* Previous — outline; fills dark on hover */
.cquiz__btn--back {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-text);
}
.cquiz__btn--back:hover {
  background: var(--c-text);
  color: var(--color-white);
}

/* "skip the rest" link under the nav */
.cquiz__skip {
  display: block;
  margin: var(--space-3) auto 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--fs-small);
  color: rgba(0, 0, 0, 0.5);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cquiz__skip[hidden] {
  display: none;
}
.cquiz__skip:hover {
  color: var(--c-text);
}

/* ---- result / thank-you screen ---- */
/* band colors (green ≥ / yellow ≥ / red <) drive a per-element --band */
.cquiz__band--green { --band: #6cce93; }
.cquiz__band--yellow { --band: #e0a400; }
.cquiz__band--red { --band: #d12f2f; }

.cquiz__result {
  text-align: center;
}
.cquiz__result-title {
  margin: 0 0 1.25rem; /* 20px gap to the message below */
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}
.cquiz__result-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--band);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--band) 14%, transparent);
}
.cquiz__result-total-label {
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}
.cquiz__result-total-value {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}
.cquiz__result-list {
  display: flex;
  flex-direction: column;
  /* no bottom margin — keep the card's top/bottom padding equal */
}
/* plain table rows separated by a simple divider — no cards/borders */
.cquiz__result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.cquiz__result-row:last-child {
  border-bottom: 0;
}
.cquiz__result-cat {
  color: var(--c-text);
  line-height: 1.3;
}
/* score = plain text, no color/pill */
.cquiz__result-score {
  flex: 0 0 auto;
  font-weight: var(--fw-medium);
  color: var(--c-text);
}
.cquiz__result-msg {
  margin: 0 0 var(--space-5); /* muted, sits under the title before the gauge */
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.5;
}
/* skipped state has nothing after the message — drop the pre-gauge gap */
.cquiz__result-msg:last-child {
  margin-bottom: 0;
}
.cquiz__result-fallback {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: #d12f2f; /* only shown when the submission failed after retries */
}

/* disabled nav buttons (submit in flight) — muted, no hover (mirrors the
   .hs-embed--quiz .hsfc-Button disabled treatment) */
.cquiz__btn:disabled,
.cquiz__btn:disabled:hover {
  background: #e6e6e6;
  border-color: #e6e6e6;
  color: rgba(0, 0, 0, 0.4);
  cursor: not-allowed;
}

/* inline submit-failure block under the nav on the contact step:
   red message + full-width "Try again" + "See results anyway" link */
.cquiz__submit-fallback {
  margin-top: var(--space-4);
  text-align: center;
}
.cquiz__submit-fallback .cquiz__result-fallback {
  margin: 0 0 var(--space-3);
}
.cquiz__submit-fallback .cquiz__result-fallback a {
  color: inherit; /* the tel: link stays red with the message */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cquiz__submit-fallback .cquiz__btn {
  width: 100%;
}

/* ---- result gauge (270° arc with animated rainbow fill) ---- */
.cquiz__gauge {
  width: min(100%, 23.75rem);
  margin: 0 auto var(--space-4);
}
.cquiz__gauge-svg {
  display: block;
  width: 100%;
  height: auto;
}
.cquiz__gauge-fill {
  transition: stroke-dashoffset 1.2s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .cquiz__gauge-fill {
    transition: none;
  }
}
.cquiz__gauge-label {
  font-family: Geist, system-ui, -apple-system, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: var(--c-text);
}
.cquiz__gauge-total {
  font-family: Geist, system-ui, -apple-system, sans-serif;
  font-size: 3.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  fill: var(--c-text);
}
.cquiz__gauge-sub {
  font-family: Geist, system-ui, -apple-system, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  fill: var(--c-text);
}