/* ==========================================================================
   HubSpot Form Styling & Floating Label System
   --------------------------------------------------------------------------
   Reusable across ANY HubSpot form embed on the page/site. Every selector
   below targets HubSpot's standard structural classes only (.hs-form,
   .hs-form-field, .input, .hs-input, .hs-fieldtype-*, etc.) — never a
   form-instance hash class/id (e.g. .hs-form-<guid>) or a field-name class
   (e.g. .hs_email). That keeps this one file portable across every form on
   the portal.

   Sections:
     1. Design tokens
     2. Base reset / typography (from HubSpot defaults, de-duplicated)
     3. Layout & field sizing
     4. Placeholder hiding
     5. Floating label behavior (docks centered on the top border)
     6. Field-type specific adjustments (select, phone, checkbox/legal, submit)
     7. Validation / error states
     8. Responsive
     9. Static label mode (.hsf-static-labels opt-in modifier)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
/* Shared by both HubSpot rendering engines this file supports: classic
   embeds (.hs-form) and the newer no-code/multi-step form builder
   (.hsfc-Form — see section 10). They're separate <form> roots, not nested
   inside one another, so the token declaration has to be duplicated onto
   both selectors for custom-property inheritance to reach either one. */
.hs-form,
.hsfc-Form,
:root {
  --hsf-font: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hsf-field-height: 48px;
  --hsf-field-radius: 12px;
  --hsf-field-padding-x: 16px;
  --hsf-field-bg: #ffffff;
  --hsf-notch-bg: #ffffff;
  --hsf-border-color: #eceff4;
  --hsf-border-color-focus: #4568f3;
  --hsf-border-color-error: #c87872;
  --hsf-text-color: #415080;
  --hsf-label-color: rgba(65, 80, 128, 0.78);
  --hsf-label-color-float: #212647;
  --hsf-required-color: #f2545b;
  --hsf-field-gap: 24px;
  --hsf-label-font-size: 16px;
  --hsf-label-font-size-float: 14px;
  --hsf-label-line-height: 22px;
  --hsf-button-bg: #4568f3;
  --hsf-button-bg-hover: #212647;
  --hsf-transition: 0.15s ease;
}


/* --------------------------------------------------------------------------
   2. Base reset / typography
   -------------------------------------------------------------------------- */
:root .hs-form {
  width: 100%;
  font-family: var(--hsf-font);
}

.hs-form .hs-main-font-element,
.hs-form .hs-richtext,
.hs-form .hs-field-desc,
.hs-form legend.hs-field-desc {
  font-family: var(--hsf-font);
  color: var(--hsf-label-color);
}

.hs-form .hs-richtext {
  margin-bottom: 1.5rem;
}

/* HubSpot injects a per-embed <style> block, scoped to a unique hash class
   on the form wrapper, that includes its own `fieldset { max-width:500px }`
   rule. That selector ties our specificity exactly (one class + one
   element) and loads later at runtime, so it wins ties by cascade order —
   `!important` is the only reliable way to escape it. */
.hs-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  max-width: 100% !important;
}

/* Required asterisk takes on whatever color the label currently has
   (muted at rest, dark once docked) rather than a fixed red — matches the
   reference design where "*" is not a validation-style color. */
.hs-form .hs-form-required {
  color: inherit;
}


/* --------------------------------------------------------------------------
   3. Layout & field sizing
   -------------------------------------------------------------------------- */

/* Every field wrapper becomes the positioning context for its floating
   label, and carries the vertical rhythm between fields. `!important` on
   width matches this file's existing precedent (see the intl-phone rule
   below) for beating HubSpot's own default form CSS, which otherwise sizes
   `.hs-form-field`/`.input` to something narrower than their container —
   most visible as a large dead gap next to a 2-column field. */
.hs-form .hs-form-field {
  position: relative;
  width: 100% !important;
  margin-bottom: var(--hsf-field-gap);
}

.hs-form .hs-form-field .input {
  position: relative;
  width: 100% !important;
  margin: 0;
}

/* Keep two-column fieldsets side by side on desktop without breaking the
   floating-label positioning. `align-items: start` (rather than grid's
   default `stretch`) keeps both columns at their own natural height even
   when only one field is showing a validation error message below it. */
.hs-form fieldset.form-columns-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--hsf-field-gap);
  width:95% !important;
}

/* Uniform pill size/shape across text, email, tel, select, textarea. */
html .hs-form .hs-input, html .hs-input:not([type=file]) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: var(--hsf-field-height);
  padding: 0 var(--hsf-field-padding-x);
  font-family: var(--hsf-font);
  font-size: 16px;
  line-height: normal;
  color: var(--hsf-text-color);
  background-color: var(--hsf-field-bg);
  border: 1.5px solid var(--hsf-border-color);
  border-radius: var(--hsf-field-radius);
  transition: border-color var(--hsf-transition), box-shadow var(--hsf-transition);
}

/* Text-like inputs and selects lose their native chrome so the pill shape
   and custom chevron can take over — checkboxes/radios keep native
   rendering (handled separately below) so they stay visible. */
.hs-form input.hs-input:not([type="checkbox"]):not([type="radio"]),
.hs-form select.hs-input,
.hs-form textarea.hs-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.hs-form textarea.hs-input {
  height: auto;
  min-height: 120px;
  border-radius: 12px;
  padding-top: 20px;
  padding-bottom: 16px;
  resize: vertical;
}

.hs-form select.hs-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23415080' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  padding-right: calc(var(--hsf-field-padding-x) + 20px);
}

.hs-form .hs-input:focus {
  outline: none;
  border-color: var(--hsf-border-color-focus);
  box-shadow: 0 0 0 1.5px var(--hsf-border-color-focus);
}

/* Checkboxes/radios: keep native rendering, just make sure they're large
   enough and colored to be clearly visible. */
.hs-form .hs-input[type="checkbox"],
.hs-form .hs-input[type="radio"] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-shrink: 0;
  accent-color: var(--hsf-border-color-focus);
  cursor: pointer;
  padding: 0;
  margin: 2px 8px 0 0;
  border: none;
  background: #ECEFF4;
}


/* --------------------------------------------------------------------------
   4. Placeholder hiding
   -------------------------------------------------------------------------- */

/* The label stands in for the placeholder, so any native placeholder text
   (present or future) stays invisible. */
.hs-form .hs-input::placeholder {
  color: transparent;
}

.hs-form .hs-input:-ms-input-placeholder {
  color: transparent;
}


/* --------------------------------------------------------------------------
   5. Floating label behavior
   -------------------------------------------------------------------------- */

/* Both states below share the same fixed label height + the same
   translateY(-50%), so the only thing that ever changes is `top`. That
   keeps the label perfectly centered in both states and gives a clean,
   single-axis transition between them (no more drifting/overshoot when it
   comes back to rest on an empty field). */
.hs-form .hs-form-field > label {
  position: absolute;
  /* -6px offsets the label's own 6px horizontal padding below, so its text
     lines up flush with the input's own text inset. */
  left: calc(var(--hsf-field-padding-x) - 6px);
  top: 13px;
  /* transform: translateY(-50%); */
  display: flex;
  align-items: center;
  height: var(--hsf-label-line-height);
  margin: 0;
  padding: 0 6px;
  max-width: calc(100% - (var(--hsf-field-padding-x) * 2));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--hsf-font);
  font-size: var(--hsf-label-font-size);
  font-weight: 400;
  line-height: 1;
  color: var(--hsf-label-color);
  background: transparent;
  border-radius: 4px;
  pointer-events: none;
  transition: top var(--hsf-transition), font-size var(--hsf-transition),
    color var(--hsf-transition), background-color var(--hsf-transition);
  z-index: 1;
}

/* HubSpot wraps the label's own text in a <span> (sibling to the
   .hs-form-required <span>) rather than a bare text node. Ellipsis on the
   flex-container label above only clips a direct text node, so give the
   text span its own truncation + let it shrink below its content size. */
.hs-form .hs-form-field > label > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Docked state: focused, or has content — label centers itself directly on
   the top border (not fully above the field) and gets a solid background
   so it cuts a clean notch out of the border line instead of floating
   above it. */
.hs-form .hs-form-field:has(.hs-input:focus) > label,
.hs-form .hs-form-field:has(input.hs-input:not(:placeholder-shown)) > label,
.hs-form .hs-form-field:has(select.hs-input:not(.is-placeholder)) > label {
  top: -11px;
  font-size: var(--hsf-label-font-size-float);
  color: var(--hsf-label-color-float);
  background-color: var(--hsf-notch-bg);
}

/* Textareas dock the same way but rest near the top edge rather than the
   vertical center of the (tall) box. */
.hs-form .hs-form-field:has(textarea.hs-input) > label {
  top: 24px;
}

.hs-form .hs-form-field:has(textarea.hs-input:focus) > label,
.hs-form .hs-form-field:has(textarea.hs-input:not(:placeholder-shown)) > label {
  top: 0;
  font-size: var(--hsf-label-font-size-float);
  color: var(--hsf-label-color-float);
  background-color: var(--hsf-notch-bg);
}


/* --------------------------------------------------------------------------
   6. Field-type specific adjustments
   -------------------------------------------------------------------------- */

/* Select: hide the visible "placeholder" option text until a real value is
   chosen, so the floating label reads as the only thing in the field. */
.hs-form select.hs-input.is-placeholder {
  color: transparent;
}

.hs-form select.hs-input.is-placeholder:focus {
  color: var(--hsf-text-color);
}

/* Intl phone combo (country-code select + tel input) */
.hs-form .hs-fieldtype-intl-phone.hs-input {
  height: var(--hsf-field-height);
  padding: 0;
  background: none;
  border: none;
}

.hs-form .hs-fieldtype-intl-phone.hs-input select,
.hs-form .hs-fieldtype-intl-phone.hs-input input {
  height: 100%;
  border-radius: var(--hsf-field-radius);
}

.hs-form .hs-fieldtype-intl-phone.hs-input select {
  float: left;
  width: 30% !important;
}

.hs-form .hs-fieldtype-intl-phone.hs-input input {
  float: right;
  width: 68% !important;
}

/* HubSpot pre-fills this field with a country-code prefix (e.g. "+1 "), so
   there's no reliable empty state to key off of — the label stays docked. */
.hs-form .hs-form-field:has(.hs-fieldtype-intl-phone) > label {
  top: 0;
  left: calc(30% + var(--hsf-field-padding-x));
  font-size: var(--hsf-label-font-size-float);
  color: var(--hsf-label-color-float);
  background-color: var(--hsf-notch-bg);
}

/* Checkbox / legal consent labels are inline copy, not floating labels —
   explicitly excluded from the floating treatment above and left as
   HubSpot renders them, just laid out so the checkbox stays visible
   alongside (possibly multi-line) copy.

   Making the label itself the flex row (checkbox + text as two flex items)
   is what actually keeps wrapped lines indented under the first line —
   the checkbox's own `flex-shrink: 0` below only does anything once this
   is a real flex container. Without it, the checkbox's height creates a
   plain text-wrap-around-float effect that only "indents" for however many
   lines fit within the checkbox's own height — one short message can look
   fine while a longer one loses the indent on its second line, even though
   both use identical markup/CSS. Flex items get their own independent
   wrapping width regardless of what HubSpot nests inside (span, p, a…). */
.hs-form .hs-form-booleancheckbox-display {
  display: flex !important;
  align-items: flex-start !important;
}

.hs-form .hs-form-booleancheckbox-display span,
.hs-form .inputs-list label, .hs-form-booleancheckbox p {
  position: static;
  transform: none;
  max-width: none;
  overflow: visible;
  white-space: normal;
  pointer-events: auto;
  display: inline !important;
  font-size: 14px !important;
  font-family: var(--hsf-font) !important;
  color: var(--hsf-label-color) !important;
}

.hs-form .inputs-list {
  margin: 0 0 5px;
  padding-left: 0px;
  list-style: none;
}

.hs-form .inputs-list > li {
  padding: 0;
}

/* Submit button — matches the sitewide Filled/Primary button (tw:btn):
   bandwidth-blue-400 fill, navy-primary hover, Figtree Medium 16px. */
.hs-form .hs-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0 auto;
  min-height: 48px;
  padding: 12px 44px 12px 16px;
  font-family: var(--hsf-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  background-color: var(--hsf-button-bg);
  border: none;
  border-radius: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16' fill='none'%3E%3Cpath d='M11.5 1L18.5 8L11.5 15' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 8H1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: background-color 0.15s linear;
}

.hs-form .hs-button:hover,
.hs-form .hs-button:focus {
  background-color: var(--hsf-button-bg-hover);
}

.hs-form .hs-submit .actions {
  margin-top: 6px;
  margin-bottom: 0;
  padding: 0;
}

/* HubSpot's built-in reCAPTCHA badge/link — hidden per design (site already
   discloses reCAPTCHA usage elsewhere / uses invisible verification). */
.hs-form .hs_recaptcha,
.hs-form .grecaptcha-logo {
  display: none;
}


/* --------------------------------------------------------------------------
   7. Validation / error states
   -------------------------------------------------------------------------- */
.hs-form .hs-input.error,
.hs-form .hs-input.invalid {
  border-color: var(--hsf-border-color-error);
}

.hs-form .hs-error-msgs {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  position: static;
}

.hs-form .hs-error-msgs label {
  position: static;
  transform: none;
  height: auto;
  font-size: 12px;
  color: var(--hsf-required-color);
}


/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
/* Matches the project's mobile breakpoint (root CLAUDE.md: mobile is
   everything below the 640px `sm` breakpoint) — the Figma "Contact us"
   frames stack every 2-column row to a single column at that width, not the
   much narrower 400px this previously used. */
@media (max-width: 639px) {
  .hs-form fieldset.form-columns-2,
  .hs-form fieldset.form-columns-3 {
    display: block;
    grid-template-columns: none;
  }

  .hs-form fieldset.form-columns-2 .hs-form-field,
  .hs-form fieldset.form-columns-3 .hs-form-field {
    width: 100%;
    margin-bottom: var(--hsf-field-gap);
  }
}

/* .hs_firstname, .hs_lastname  {
  width: calc(50% - 8px);
}

.hs_firstname {
  float:left
}

.hs_lastname {
  float:right
} */

.legal-consent-container .hs-form-booleancheckbox-display>span {
  margin-left: 0px !important;
      font-size: 14px;
          font-family: var(--hsf-font);
    color: var(--hsf-label-color);
}


/* --------------------------------------------------------------------------
   9. Static label mode (.hsf-static-labels opt-in modifier)
   --------------------------------------------------------------------------
   `.hsf-static-labels` is a generic, portable modifier — deliberately not
   scoped to any one block — that a consumer applies to whatever element
   wraps its `.hs-form` to opt OUT of the floating-label illusion above and
   into plain, always-visible labels sitting above each field (the "Contact
   us" Figma frames' actual default). Add the class to the form's own
   container, e.g. `<div class="hsf-static-labels"><div class="hs-form">…`.
   -------------------------------------------------------------------------- */
.hsf-static-labels .hs-form .hs-form-field > label {
  position: static;
  left: auto;
  top: auto;
  height: auto;
  max-width: none;
  overflow: visible;
  white-space: normal;
  padding: 0;
  margin: 0 0 4px;
  font-size: var(--hsf-label-font-size-float);
  font-weight: 600;
  color: var(--hsf-label-color-float);
  background: none;
  transition: none;
}

/* Neutralize every docked-state override above — higher specificity (the
   extra .hsf-static-labels class) wins regardless of source order. */
.hsf-static-labels .hs-form .hs-form-field:has(.hs-input:focus) > label,
.hsf-static-labels .hs-form .hs-form-field:has(input.hs-input:not(:placeholder-shown)) > label,
.hsf-static-labels .hs-form .hs-form-field:has(select.hs-input:not(.is-placeholder)) > label,
.hsf-static-labels .hs-form .hs-form-field:has(textarea.hs-input) > label,
.hsf-static-labels .hs-form .hs-form-field:has(textarea.hs-input:focus) > label,
.hsf-static-labels .hs-form .hs-form-field:has(textarea.hs-input:not(:placeholder-shown)) > label,
.hsf-static-labels .hs-form .hs-form-field:has(.hs-fieldtype-intl-phone) > label {
  position: static;
  left: auto;
  top: auto;
  font-size: var(--hsf-label-font-size-float);
  color: var(--hsf-label-color-float);
  background-color: transparent;
}

/* The label no longer stands in for the placeholder, so restore a real one
   in the design's own placeholder styling (text/secondary @ 78% opacity). */
.hsf-static-labels .hs-form .hs-input::placeholder,
.hsf-static-labels .hs-form .hs-input:-ms-input-placeholder {
  color: var(--hsf-label-color);
}

.hsf-static-labels .hs-form select.hs-input.is-placeholder,
.hsf-static-labels .hs-form select.hs-input.is-placeholder:focus {
  color: var(--hsf-label-color);
}

/* No dock to leave clearance for — textareas get the design's plain,
   symmetric-feeling top padding instead of the floating-mode dock gap. */
.hsf-static-labels .hs-form textarea.hs-input {
  padding-top: 16px;
}


/* --------------------------------------------------------------------------
   10. Multi-step / new-generation forms (.hsfc-* structural classes)
   --------------------------------------------------------------------------
   HubSpot's newer no-code form builder (the one that supports native
   multi-step pages) renders a completely different DOM/class system —
   `hsfc-*` classes instead of `.hs-form`/`.hs-input`. Nothing above this
   section applies to it at all. Same portability rule as the rest of this
   file: every selector below targets hsfc's own structural classes, never
   a form/field-instance id (e.g. `#…-2504378440633`) or a field's
   `name="0-1/email"`.

   Labels here are STATIC (always-visible, above the field) rather than the
   floating/docked treatment used above for classic forms — deliberate, not
   a shortcut. Every hsfc input renders with `placeholder=""`, and an empty
   placeholder attribute never satisfies `:placeholder-shown` in any
   browser, so the CSS-only "float up once it has content" trick has no
   reliable signal to key off here (unlike classic forms, which get a real
   placeholder value from HubSpot). Reproducing the floating notch on this
   engine would require real JS (input/blur listeners tracking field
   state) — out of scope until there's a concrete need for it.

   HubSpot documents an official CSS custom-property theming API for this
   form engine (https://developers.hubspot.com/docs/cms/start-building/features/forms/forms)
   — `--hsf-<component>__<property>` variables like `--hsf-button__background-color`.
   Those are set first below, since they're more likely to stay stable
   across HubSpot's own form-engine updates than the reverse-engineered
   `hsfc-*` class selectors that follow. They don't cover everything
   (no hover/focus states, no input height, nothing for the dropdown
   popover or the phone field's flag+caret layout, no way to give Previous
   a different look than Next/Submit) — the class-based rules below fill
   those gaps and, for elements this file's markup actually confirms
   (row/label/input/dropdown/phone/button/progress bar), double as a
   guaranteed-correct fallback in case a given variable isn't actually
   wired up the way its name implies. Checkbox/radio/textarea/alert
   variables are set for forward-looking coverage even though no such
   fields were in the source markup this section was built from — no
   class selectors exist for those since there's no confirmed DOM to
   target, so the variables are the only coverage they get. -------------------------------------------------------------------------- */

.hsfc-Form {
  --hsfc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 100%;
  font-family: var(--hsf-font);
  color: var(--hsf-text-color);

  /* --- HubSpot's official theming variables --- */
  --hsf-global__font-family: var(--hsf-font);
  --hsf-global__font-size: 16px;
  --hsf-global__color: var(--hsf-text-color);
  --hsf-global-error__color: var(--hsf-border-color-error);

  --hsf-row__horizontal-spacing: var(--hsf-field-gap);
  --hsf-row__vertical-spacing: var(--hsf-field-gap);
  --hsf-module__vertical-spacing: var(--hsf-field-gap);

  --hsf-button__font-family: var(--hsf-font);
  --hsf-button__font-size: 16px;
  --hsf-button__color: #fff;
  --hsf-button__background-color: var(--hsf-button-bg);
  --hsf-button__background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16' fill='none'%3E%3Cpath d='M11.5 1L18.5 8L11.5 15' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 8H1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hsf-button__border-radius: var(--hsf-field-radius);
  --hsf-button__padding: 12px 44px 12px 16px;
  --hsf-button__box-shadow: none;

  --hsf-richtext__font-family: var(--hsf-font);
  --hsf-richtext__font-size: 16px;
  --hsf-richtext__color: var(--hsf-label-color);

  --hsf-heading__font-family: var(--hsf-font);
  --hsf-heading__color: var(--hsf-label-color-float);
  --hsf-heading__text-shadow: none;

  --hsf-background__background-color: transparent;
  --hsf-background__background-image: none;
  --hsf-background__border-style: none;
  --hsf-background__border-color: transparent;
  --hsf-background__border-radius: 0;
  --hsf-background__border-width: 0;
  --hsf-background__padding: 0;

  --hsf-progressbar-text__font-family: var(--hsf-font);
  --hsf-progressbar-text__font-size: 13px;
  --hsf-progressbar-text__color: var(--hsf-label-color);
  --hsf-progressbar-progressLine__background-color: var(--hsf-border-color-focus);
  --hsf-progressbar-progressLine__background-image: none;
  --hsf-progressbar-progressLine__border-style: none;
  --hsf-progressbar-progressLine__border-color: transparent;
  --hsf-progressbar-progressLine__border-width: 0;
  --hsf-progressbar-trackLine__background-color: var(--hsf-border-color);

  --hsf-erroralert__font-family: var(--hsf-font);
  --hsf-erroralert__font-size: 14px;
  --hsf-erroralert__color: var(--hsf-border-color-error);
  --hsf-infoalert__font-family: var(--hsf-font);
  --hsf-infoalert__font-size: 14px;
  --hsf-infoalert__color: var(--hsf-label-color);

  --hsf-field-label__font-family: var(--hsf-font);
  --hsf-field-label__font-size: var(--hsf-label-font-size-float);
  --hsf-field-label__color: var(--hsf-label-color-float);
  --hsf-field-label-requiredindicator__color: var(--hsf-label-color-float);
  --hsf-field-description__font-family: var(--hsf-font);
  --hsf-field-description__color: var(--hsf-label-color);
  --hsf-field-footer__font-family: var(--hsf-font);
  --hsf-field-footer__color: var(--hsf-label-color);

  --hsf-field-input__font-family: var(--hsf-font);
  --hsf-field-input__color: var(--hsf-text-color);
  --hsf-field-input__background-color: var(--hsf-field-bg);
  --hsf-field-input__placeholder-color: var(--hsf-label-color);
  --hsf-field-input__border-color: var(--hsf-border-color);
  --hsf-field-input__border-width: 1.5px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: var(--hsf-field-radius);
  --hsf-field-input__padding: 14px 16px;

  /* No textarea/checkbox/radio field was in the source markup — mapped
     anyway since there's no other way to cover them if one gets added. */
  --hsf-field-textarea__font-family: var(--hsf-font);
  --hsf-field-textarea__color: var(--hsf-text-color);
  --hsf-field-textarea__background-color: var(--hsf-field-bg);
  --hsf-field-textarea__placeholder-color: var(--hsf-label-color);
  --hsf-field-textarea__border-color: var(--hsf-border-color);
  --hsf-field-textarea__border-width: 1.5px;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: var(--hsf-field-radius);
  --hsf-field-textarea__padding: 16px;

  --hsf-field-checkbox__padding: 2px;
  --hsf-field-checkbox__background-color: var(--hsf-field-bg);
  --hsf-field-checkbox__color: var(--hsf-border-color-focus);
  --hsf-field-checkbox__border-color: var(--hsf-border-color);
  --hsf-field-checkbox__border-width: 1.5px;
  --hsf-field-checkbox__border-style: solid;
  --hsf-field-radio__padding: 2px;
  --hsf-field-radio__background-color: var(--hsf-field-bg);
  --hsf-field-radio__color: var(--hsf-border-color-focus);
  --hsf-field-radio__border-color: var(--hsf-border-color);
  --hsf-field-radio__border-width: 1.5px;
  --hsf-field-radio__border-style: solid;
}

/* One-off test: HubSpot's own docs example declares these on `:root`
   rather than a form-scoped selector, so duplicating them here to rule
   out whether that specific scope matters. Expectation going in: it
   shouldn't — the form still renders in a cross-origin iframe
   (frame.html on HubSpot's domain), and CSS custom properties can't
   cross an iframe document boundary regardless of which selector
   declares them on the parent page's side. If this test proves that
   wrong, delete this comment; if it confirms it (most likely), this
   block and the one above are both dead until the embed itself stops
   being an iframe — see the CLAUDE.md note on this. Literal values here
   instead of var(--hsf-font) etc., since those tokens are only defined
   on .hsfc-Form/.hs-form, not on :root itself. */
:root {
  --hsf-global__font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hsf-global__font-size: 16px;
  --hsf-global__color: #415080;
  --hsf-global-error__color: #c87872;

  --hsf-row__horizontal-spacing: 24px;
  --hsf-row__vertical-spacing: 24px;
  --hsf-module__vertical-spacing: 24px;

  --hsf-button__font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hsf-button__font-size: 16px;
  --hsf-button__color: #fff;
  --hsf-button__background-color: #4568f3;
  --hsf-button__background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16' fill='none'%3E%3Cpath d='M11.5 1L18.5 8L11.5 15' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 8H1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hsf-button__border-radius: 12px;
  --hsf-button__padding: 12px 44px 12px 16px;
  --hsf-button__box-shadow: none;

  --hsf-richtext__font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hsf-richtext__font-size: 16px;
  --hsf-richtext__color: rgba(65, 80, 128, 0.78);

  --hsf-heading__font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hsf-heading__color: #212647;
  --hsf-heading__text-shadow: none;

  --hsf-background__background-color: transparent;
  --hsf-background__background-image: none;
  --hsf-background__border-style: none;
  --hsf-background__border-color: transparent;
  --hsf-background__border-radius: 0;
  --hsf-background__border-width: 0;
  --hsf-background__padding: 0;

  --hsf-progressbar-text__font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hsf-progressbar-text__font-size: 13px;
  --hsf-progressbar-text__color: rgba(65, 80, 128, 0.78);
  --hsf-progressbar-progressLine__background-color: #4568f3;
  --hsf-progressbar-progressLine__background-image: none;
  --hsf-progressbar-progressLine__border-style: none;
  --hsf-progressbar-progressLine__border-color: transparent;
  --hsf-progressbar-progressLine__border-width: 0;
  --hsf-progressbar-trackLine__background-color: #eceff4;

  --hsf-erroralert__font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hsf-erroralert__font-size: 14px;
  --hsf-erroralert__color: #c87872;
  --hsf-infoalert__font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hsf-infoalert__font-size: 14px;
  --hsf-infoalert__color: rgba(65, 80, 128, 0.78);

  --hsf-field-label__font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hsf-field-label__font-size: 14px;
  --hsf-field-label__color: #212647;
  --hsf-field-label-requiredindicator__color: #212647;
  --hsf-field-description__font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hsf-field-description__color: rgba(65, 80, 128, 0.78);
  --hsf-field-footer__font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hsf-field-footer__color: rgba(65, 80, 128, 0.78);

  --hsf-field-input__font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hsf-field-input__color: #415080;
  --hsf-field-input__background-color: #ffffff;
  --hsf-field-input__placeholder-color: rgba(65, 80, 128, 0.78);
  --hsf-field-input__border-color: #eceff4;
  --hsf-field-input__border-width: 1.5px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: 12px;
  --hsf-field-input__padding: 14px 16px;

  --hsf-field-textarea__font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hsf-field-textarea__color: #415080;
  --hsf-field-textarea__background-color: #ffffff;
  --hsf-field-textarea__placeholder-color: rgba(65, 80, 128, 0.78);
  --hsf-field-textarea__border-color: #eceff4;
  --hsf-field-textarea__border-width: 1.5px;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: 12px;
  --hsf-field-textarea__padding: 16px;

  --hsf-field-checkbox__padding: 2px;
  --hsf-field-checkbox__background-color: #ffffff;
  --hsf-field-checkbox__color: #4568f3;
  --hsf-field-checkbox__border-color: #eceff4;
  --hsf-field-checkbox__border-width: 1.5px;
  --hsf-field-checkbox__border-style: solid;
  --hsf-field-radio__padding: 2px;
  --hsf-field-radio__background-color: #ffffff;
  --hsf-field-radio__color: #4568f3;
  --hsf-field-radio__border-color: #eceff4;
  --hsf-field-radio__border-width: 1.5px;
  --hsf-field-radio__border-style: solid;
}

.hsfc-RichText,
.hsfc-RichText p {
  font-family: var(--hsf-font);
  color: var(--hsf-label-color);
}

/* The intro copy's bold first line (e.g. "Let's connect you to our team.")
   reads as a de facto heading — give it the dark/docked label color so it
   contrasts against the muted body copy below it. */
.hsfc-RichText strong {
  color: var(--hsf-label-color-float);
}

.hsfc-Heading {
  margin: 0 0 var(--hsf-field-gap);
  font-family: var(--hsf-font);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--hsf-label-color-float);
}

/* Every field row (one field, or several side-by-side) is a plain
   `.hsfc-Row` — there's no column-count modifier class like classic's
   `.form-columns-2`. An auto-fit grid handles a 1-field row and a
   multi-field row with the same rule instead of needing one per count. */
.hsfc-Row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-items: start;
  gap: var(--hsf-field-gap);
  margin-bottom: var(--hsf-field-gap);
}

.hsfc-Row:last-child {
  margin-bottom: 0;
}

/* Static field label — see the section banner above for why this doesn't
   float like the classic-form labels do. */
.hsfc-FieldLabel {
  display: block;
  margin: 0 0 4px;
  font-family: var(--hsf-font);
  font-size: var(--hsf-label-font-size-float);
  font-weight: 600;
  color: var(--hsf-label-color-float);
}

.hsfc-FieldLabel__RequiredIndicator {
  color: inherit;
}

/* Uniform pill skin — hsfc uses one `.hsfc-TextInput` class for every text,
   email, tel, dropdown-trigger, and dropdown-search input (unlike classic,
   which special-cases each native input type), so most of the visual work
   happens in this single rule. */
.hsfc-TextInput {
  box-sizing: border-box;
  width: 100%;
  height: var(--hsf-field-height);
  padding: 0 var(--hsf-field-padding-x);
  font-family: var(--hsf-font);
  font-size: 16px;
  line-height: normal;
  color: var(--hsf-text-color);
  background-color: var(--hsf-field-bg);
  border: 1.5px solid var(--hsf-border-color);
  border-radius: var(--hsf-field-radius);
  transition: border-color var(--hsf-transition), box-shadow var(--hsf-transition);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.hsfc-TextInput:focus {
  outline: none;
  border-color: var(--hsf-border-color-focus);
  box-shadow: 0 0 0 1.5px var(--hsf-border-color-focus);
}

/* HubSpot's own invalid state is a real `aria-invalid` attribute in the
   rendered DOM (confirmed in the markup this section was built from) —
   keyed off that directly rather than guessing at an internal hsfc class
   name for the same state. */
.hsfc-TextInput[aria-invalid="true"] {
  border-color: var(--hsf-border-color-error);
}

.hsfc-TextInput--button {
  cursor: pointer;
}

/* Dropdown field: a custom combobox trigger + popover listbox, not a
   native <select> — the trigger gets the same pill skin as any other
   `.hsfc-TextInput` above; caret and popover are styled on their own. */
.hsfc-DropdownInput {
  position: relative;
}

.hsfc-DropdownInput .hsfc-TextInput--button {
  padding-right: calc(var(--hsf-field-padding-x) + 20px);
}

.hsfc-DropdownInput__Caret {
  position: absolute;
  top: 0;
  right: var(--hsf-field-padding-x);
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.hsfc-DropdownInput__Caret span {
  display: block;
  width: 14px;
  height: 9px;
  background-color: var(--hsf-text-color);
  -webkit-mask-image: var(--hsfc-chevron);
  mask-image: var(--hsfc-chevron);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Popover panel — HubSpot toggles visibility itself via inline
   `display:none/block`; this only styles its appearance. The country list
   this was built from renders 190+ <li> items in one shot, so a capped,
   scrollable list is load-bearing, not just a nicety. */
.hsfc-DropdownOptions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  overflow: hidden;
  background-color: var(--hsf-field-bg);
  border: 1.5px solid var(--hsf-border-color);
  border-radius: var(--hsf-field-radius);
  box-shadow: 0 12px 24px rgba(33, 38, 71, 0.12);
}

.hsfc-DropdownOptions__Search {
  padding: 8px;
  border-bottom: 1.5px solid var(--hsf-border-color);
}

.hsfc-DropdownOptions__Search .hsfc-TextInput {
  height: 40px;
}

.hsfc-DropdownOptions__List {
  margin: 0;
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
}

.hsfc-DropdownOptions__List__ListItem {
  padding: 10px 12px;
  border-radius: calc(var(--hsf-field-radius) - 4px);
  font-family: var(--hsf-font);
  font-size: 14px;
  color: var(--hsf-text-color);
  cursor: pointer;
}

.hsfc-DropdownOptions__List__ListItem:hover,
.hsfc-DropdownOptions__List__ListItem:focus {
  background-color: var(--hsf-border-color);
}

.hsfc-DropdownOptions__List__ListItem--selected {
  font-weight: 600;
  color: var(--hsf-label-color-float);
  background-color: var(--hsf-border-color);
}

/* Phone field: a flag/caret country trigger + tel input sharing one pill —
   same "outer wrapper owns the border, inner input sits flush" technique
   as the classic intl-phone rule in section 6 above. */
.hsfc-PhoneInput {
  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--hsf-field-height);
  background-color: var(--hsf-field-bg);
  border: 1.5px solid var(--hsf-border-color);
  border-radius: var(--hsf-field-radius);
  overflow: hidden;
  transition: border-color var(--hsf-transition), box-shadow var(--hsf-transition);
}

.hsfc-PhoneInput:has(.hsfc-TextInput:focus) {
  border-color: var(--hsf-border-color-focus);
  box-shadow: 0 0 0 1.5px var(--hsf-border-color-focus);
}

.hsfc-PhoneInput__FlagAndCaret {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 var(--hsf-field-padding-x);
  cursor: pointer;
  border-right: 1.5px solid var(--hsf-border-color);
}

.hsfc-PhoneInput__FlagAndCaret__Caret {
  display: block;
  width: 10px;
  height: 6px;
  background-color: var(--hsf-text-color);
  -webkit-mask-image: var(--hsfc-chevron);
  mask-image: var(--hsfc-chevron);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* The tel input sits flush inside the pill the wrapper already draws —
   same override shape as `.hs-input` losing its own border in the classic
   intl-phone rule. */
.hsfc-PhoneInput .hsfc-TextInput {
  flex: 1;
  height: auto;
  border: none;
  border-radius: 0;
}

.hsfc-PhoneInput .hsfc-TextInput:focus {
  box-shadow: none;
}

.hsfc-PhoneInput .hsfc-DropdownOptions {
  left: auto;
  width: 280px;
}

/* Progress bar ("1/2" + fill track). The fill's own inline `width: n%`
   comes from HubSpot; the transition here just makes step changes animate
   instead of snapping. */
.hsfc-ProgressBar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hsfc-ProgressBar__Text {
  flex-shrink: 0;
  font-family: var(--hsf-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--hsf-label-color);
}

.hsfc-ProgressBar__Progress {
  flex: 1;
  height: 6px;
  overflow: hidden;
  background-color: var(--hsf-border-color);
  border-radius: 999px;
}

.hsfc-ProgressBar__Progress > div {
  height: 100%;
  background-color: var(--hsf-border-color-focus);
  border-radius: inherit;
  transition: width 0.3s ease;
}

/* Next/submit button — matches the classic form's `.hs-button` treatment
   (and the sitewide Filled/Primary `tw:btn`) exactly: bandwidth-blue-400
   fill, navy-primary hover, same arrow icon. */
.hsfc-NavigationRow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.hsfc-NavigationRow__Buttons {
  display: flex;
  gap: 12px;
}

.hsfc-Button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  box-sizing: border-box;
  cursor: pointer;
  min-height: 48px;
  padding: 12px 44px 12px 16px;
  font-family: var(--hsf-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  background-color: var(--hsf-button-bg);
  border: none;
  border-radius: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16' fill='none'%3E%3Cpath d='M11.5 1L18.5 8L11.5 15' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 8H1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: background-color 0.15s linear;
}

.hsfc-Button:hover,
.hsfc-Button:focus {
  background-color: var(--hsf-button-bg-hover);
}

/* Previous/Back button — confirmed from the final step's markup that
   HubSpot reuses this exact same `.hsfc-Button` class for every nav
   button (Next, Previous, Submit) with no modifier class to key off, so
   this is distinguished purely by position: when two buttons share a
   `.hsfc-NavigationRow__Buttons` wrapper, the first is always "Previous"
   and the last is always the forward action (Next on early steps,
   Submit on the last one). A lone button (step 1, no Previous yet) is
   both first and last, so `:not(:last-child)` keeps it out of this rule
   and it stays the primary/forward look above. */
.hsfc-NavigationRow__Buttons .hsfc-Button:first-child:not(:last-child) {
  color: var(--hsf-border-color-focus);
  background-color: #fff;
  background-image: none;
  padding: 12px 24px;
  border: 1.5px solid var(--hsf-border-color-focus);
}

.hsfc-NavigationRow__Buttons .hsfc-Button:first-child:not(:last-child):hover,
.hsfc-NavigationRow__Buttons .hsfc-Button:first-child:not(:last-child):focus {
  color: #fff;
  background-color: var(--hsf-border-color-focus);
}


/* --------------------------------------------------------------------------
   10a. Responsive (.hsfc-* forms)
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .hsfc-Row {
    grid-template-columns: 1fr;
  }
}