.elementor-widget-container .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-container .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-49847 .elementor-element.elementor-element-73c65930{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-49847 .elementor-element.elementor-element-183f9e80{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-image .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-49847 .elementor-element.elementor-element-7bf8779b{text-align:start;}.elementor-49847 .elementor-element.elementor-element-7bf8779b img{width:60%;max-width:100%;}.elementor-49847 .elementor-element.elementor-element-73762a5e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-button .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-button .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-49847 .elementor-element.elementor-element-7a83ee0e .elementor-button{background-color:#000000;padding:0px 0px 0px 0px;}.elementor-49847 .elementor-element.elementor-element-7a83ee0e.elementor-element{--align-self:center;}.elementor-49847 .elementor-element.elementor-element-7a83ee0e .elementor-button-content-wrapper{flex-direction:row;}.elementor-49847 .elementor-element.elementor-element-2af4afbb .elementor-button{background-color:#000000;fill:var( --e-global-color-d997e6b );color:var( --e-global-color-d997e6b );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-d997e6b );border-radius:8px 8px 8px 8px;padding:8px 12px 8px 12px;}.elementor-49847 .elementor-element.elementor-element-2af4afbb.elementor-element{--align-self:center;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}@media(max-width:767px){.elementor-49847 .elementor-element.elementor-element-183f9e80{--width:45%;}.elementor-49847 .elementor-element.elementor-element-7bf8779b img{width:70%;}.elementor-49847 .elementor-element.elementor-element-73762a5e{--width:45%;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}}/* Start custom CSS *//* ============================================================
   RAPAPORT TRADE — Multi-step HubSpot Form Styling
   Ported from Lovable design (lead-form-cards.lovable.app)
   ------------------------------------------------------------
   REVISION NOTES (country dropdown stuck-open fix):
     • Section 7 — removed `overflow: hidden` from .hsfc-PhoneInput
       (it clipped the country list), added `position: relative` as
       the panel's positioning anchor, and moved corner rounding
       onto the child elements instead.
     • Section 8 — .hsfc-DropdownOptions no longer declares
       `display` in its base rule. HubSpot writes inline
       `style="display:none"` WITHOUT a space, so the old
       `:not([style*="display: none"])` guard never excluded it and
       `display: flex !important` overrode the inline hide. Author
       !important beats non-important inline styles, so the panel
       could never close. Both spellings are now handled, plus
       [hidden] and [aria-hidden].
   ------------------------------------------------------------
   Sections:
     1. Design tokens (CSS variables)
     2. Form container & step layout
     3. Progress bar (moved to top, restyled)
     4. Typography (H2, H4, body, privacy)
     5. Field labels & required indicator
     6. Text inputs (text, email)
     7. Phone composite input
     8. Dropdown / combobox
     9. Step 1 — Intent radio cards (3-up, short)
    10. Step 2 — Company checkbox cards
    11. Step 5 — Plan radio cards (2-up, tall, JS-injected)
    12. Navigation buttons
    13. Mobile breakpoints
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
.hsfc-Form {
  --rt-primary: #3538CD;
  --rt-primary-soft: #f5f5fc;
  --rt-primary-glow: rgba(53, 56, 205, 0.12);
  --rt-primary-ring: rgba(53, 56, 205, 0.15);
  --rt-foreground: #111;
  --rt-muted: #4a4a4a;
  --rt-muted-strong: #8a8a8a;
  --rt-border: #d9d9d9;
  --rt-border-soft: #f2f2f2;
  --rt-bg-card: #fff;
  --rt-bg-track: #e5e5e5;
  --rt-radius-sm: 8px;
  --rt-radius-md: 12px;
  --rt-radius-lg: 20px;
  --rt-shadow-soft: 0 1px 3px -1px rgba(15, 23, 42, 0.08),
                    0 2px 8px -2px rgba(15, 23, 42, 0.05);
  --rt-shadow-hover: 0 6px 18px rgba(53, 56, 205, 0.12);
  --rt-font-display: "Funnel Display", "Inter", system-ui, sans-serif;
  --rt-font-sans: "Inter", system-ui, sans-serif;
  --rt-transition: 0.2s ease;
}

/* ============================================================
   2. FORM CONTAINER & STEP LAYOUT
   ============================================================ */
.hsfc-Form {
  font-family: var(--rt-font-sans) !important;
  color: var(--rt-foreground) !important;
}

/* Force inactive steps to stay hidden, regardless of whitespace
   variation in HubSpot's inline style. Both "display: none" and
   "display:none" need to be caught. */
.hsfc-Step[style*="display: none"],
.hsfc-Step[style*="display:none"] {
  display: none !important;
}

/* Style only the visible step.
   We don't set display:flex on .hsfc-Step directly — we let the
   hidden rule above keep inactive steps hidden, and apply layout
   styles to all steps (only matters when one is visible). */
.hsfc-Step:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.hsfc-Step__Content {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.hsfc-Row {
  margin: 0 !important;
}

/* ============================================================
   3. PROGRESS BAR (lifted to top of step content)
   ============================================================ */
/* The Row that wraps the progress bar — this is what needs to move */
.hsfc-Step__Content > .hsfc-Row:has(.hsfc-ProgressBar) {
  order: -1 !important;
  margin-bottom: 16px !important;
}

.hsfc-ProgressBar {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hsfc-ProgressBar__Text {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--rt-muted-strong) !important;
}

.hsfc-ProgressBar__Progress {
  height: 6px !important;
  width: 100% !important;
  background: var(--rt-bg-track) !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  border: none !important;
}

.hsfc-ProgressBar__Progress > div {
  height: 100% !important;
  background: var(--rt-primary) !important;
  border-radius: 9999px !important;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
.hsfc-Form h2.hsfc-Heading {
  font-family: var(--rt-font-display) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--rt-foreground) !important;
  margin: 0 0 4px !important;
}

.hsfc-Form h4.hsfc-Heading {
  font-family: var(--rt-font-sans) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--rt-muted) !important;
  margin: 0 0 8px !important;
  letter-spacing: 0 !important;
}

/* RichText paragraphs (privacy notice, "Talk to Us" link) */
.hsfc-RichText {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--rt-muted) !important;
}

.hsfc-RichText p {
  margin: 0 0 8px !important;
}

.hsfc-RichText a {
  color: var(--rt-primary) !important;
  text-decoration: none !important;
  text-underline-offset: 2px !important;
}

.hsfc-RichText a:hover {
  text-decoration: underline !important;
}

/* ============================================================
   5. FIELD LABELS & REQUIRED INDICATOR
   ============================================================ */
.hsfc-FieldLabel {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--rt-foreground) !important;
  margin: 0 0 6px !important;
  line-height: 1.4 !important;
}

.hsfc-FieldLabel__RequiredIndicator {
  color: var(--rt-primary) !important;
  margin-left: 2px !important;
  font-weight: 500 !important;
}

/* The empty "group label" wrappers above radio/checkbox groups — hide them */
.hsfc-RadioFieldGroup > label.hsfc-FieldLabel:has(> span:empty),
.hsfc-CheckboxFieldGroup > label.hsfc-FieldLabel:has(> span:empty) {
  display: none !important;
}

/* ============================================================
   6. TEXT INPUTS (text, email)
   Step 4: first name, last name, email, company
   ============================================================ */
.hsfc-TextField,
.hsfc-EmailField {
  width: 100% !important;
}

/* Side-by-side first/last name on desktop */
.hsfc-Row:has(> .hsfc-TextField + .hsfc-TextField) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

.hsfc-TextInput {
  width: 100% !important;
  height: 44px !important;
  padding: 0 14px !important;
  background: var(--rt-bg-card) !important;
  border: 1px solid var(--rt-border) !important;
  border-radius: var(--rt-radius-md) !important;
  font-family: var(--rt-font-sans) !important;
  font-size: 14px !important;
  color: var(--rt-foreground) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color var(--rt-transition), box-shadow var(--rt-transition) !important;
  box-sizing: border-box !important;
}

.hsfc-TextInput::placeholder {
  color: var(--rt-muted-strong) !important;
}

.hsfc-TextInput:hover {
  border-color: #b8b8b8 !important;
}

.hsfc-TextInput:focus,
.hsfc-TextInput:focus-visible {
  border-color: var(--rt-primary) !important;
  box-shadow: 0 0 0 3px var(--rt-primary-glow) !important;
}

/* ============================================================
   7. PHONE COMPOSITE INPUT
   Flag + caret + input as a single bordered group.

   FIXED: `overflow: hidden` removed — the country dropdown panel
   renders INSIDE this element, and overflow:hidden clipped it to
   the 44px row height. Corner rounding is now applied to the
   children instead, and `position: relative` anchors the panel.
   ============================================================ */
.hsfc-PhoneInput {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  position: relative !important;      /* anchor for .hsfc-DropdownOptions */
  border: 1px solid var(--rt-border) !important;
  border-radius: var(--rt-radius-md) !important;
  background: var(--rt-bg-card) !important;
  /* overflow: hidden — REMOVED (was clipping the country list) */
  transition: border-color var(--rt-transition), box-shadow var(--rt-transition) !important;
}

.hsfc-PhoneInput:focus-within {
  border-color: var(--rt-primary) !important;
  box-shadow: 0 0 0 3px var(--rt-primary-glow) !important;
}

/* The flag + caret button on the left */
.hsfc-PhoneInput__FlagAndCaret {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  border-right: 1px solid var(--rt-border) !important;
  background: #fafafa !important;
  cursor: pointer !important;
  user-select: none !important;
  outline: none !important;
  /* Round the left corners manually, now that the parent no longer clips */
  border-top-left-radius: var(--rt-radius-md) !important;
  border-bottom-left-radius: var(--rt-radius-md) !important;
}

.hsfc-PhoneInput__FlagAndCaret:hover {
  background: #f2f2f2 !important;
}

.hsfc-PhoneInput__FlagAndCaret__Flag {
  font-size: 18px !important;
  line-height: 1 !important;
}

.hsfc-PhoneInput__FlagAndCaret__Caret {
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid var(--rt-muted) !important;
}

/* Input inside the phone group — strip its own border,
   round the right corners to match the group */
.hsfc-PhoneInput .hsfc-TextInput {
  border: none !important;
  border-radius: 0 var(--rt-radius-md) var(--rt-radius-md) 0 !important;
  height: 44px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.hsfc-PhoneInput .hsfc-TextInput:focus,
.hsfc-PhoneInput .hsfc-TextInput:focus-visible {
  box-shadow: none !important;
  border: none !important;
}

/* ============================================================
   8. DROPDOWN / COMBOBOX
   Country picker on step 4, plus phone country list.

   FIXED: the base rule no longer declares `display`. HubSpot hides
   this panel with an INLINE style written as `display:none` (no
   space). The previous guard, `:not([style*="display: none"])`,
   only matched the spaced variant, so it never excluded the hidden
   state — and because an author !important declaration outranks a
   non-important inline style, `display: flex !important` pinned
   the panel permanently open. Both spellings are now handled,
   along with [hidden] and [aria-hidden="true"].
   ============================================================ */
.hsfc-DropdownInput {
  position: relative !important;
}

.hsfc-DropdownInput .hsfc-TextInput {
  cursor: pointer !important;
  padding-right: 36px !important;
}

.hsfc-DropdownInput__Caret {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

.hsfc-DropdownInput__Caret span {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid var(--rt-muted) !important;
}

/* The floating listbox panel — appearance only, NO `display` here.
   `flex-direction` is inert unless the display rule below applies. */
.hsfc-DropdownOptions {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 50 !important;
  margin-top: 4px !important;
  width: 100% !important;
  min-width: 240px !important;
  max-height: 280px !important;
  background: var(--rt-bg-card) !important;
  border: 1px solid var(--rt-border) !important;
  border-radius: var(--rt-radius-md) !important;
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.18) !important;
  overflow: hidden !important;
  flex-direction: column !important;
}

/* Apply flex layout ONLY when the panel is genuinely open.
   Covers both inline-style spellings plus attribute-based hiding. */
.hsfc-DropdownOptions:not([style*="display: none"]):not([style*="display:none"]):not([hidden]):not([aria-hidden="true"]) {
  display: flex !important;
}

/* Belt and braces — make sure closed stays closed */
.hsfc-DropdownOptions[style*="display: none"],
.hsfc-DropdownOptions[style*="display:none"],
.hsfc-DropdownOptions[hidden],
.hsfc-DropdownOptions[aria-hidden="true"] {
  display: none !important;
}

.hsfc-DropdownOptions__Search {
  padding: 8px !important;
  border-bottom: 1px solid var(--rt-border-soft) !important;
  flex-shrink: 0 !important;
}

.hsfc-DropdownOptions__Search .hsfc-TextInput {
  height: 36px !important;
  font-size: 13px !important;
}

.hsfc-DropdownOptions__List {
  list-style: none !important;
  padding: 4px !important;
  margin: 0 !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.hsfc-DropdownOptions__List__ListItem {
  padding: 8px 12px !important;
  border-radius: var(--rt-radius-sm) !important;
  font-size: 14px !important;
  color: var(--rt-foreground) !important;
  cursor: pointer !important;
  outline: none !important;
}

.hsfc-DropdownOptions__List__ListItem:hover,
.hsfc-DropdownOptions__List__ListItem:focus {
  background: var(--rt-primary-soft) !important;
  color: var(--rt-primary) !important;
}

.hsfc-DropdownOptions__List__ListItem--selected {
  background: var(--rt-primary-soft) !important;
  color: var(--rt-primary) !important;
  font-weight: 500 !important;
}

/* ============================================================
   9 & 11. SHARED RADIO CARD BASE
   Used by both step 1 (intent) and step 5 (plans).
   :has() differentiates the two patterns based on whether
   the JS has injected .plan-card-content
   ============================================================ */
.hsfc-RadioFieldGroup__Options {
  display: grid !important;
  gap: 20px !important;
  margin-top: 16px !important;
}

.hsfc-RadioFieldGroup__Options > div {
  min-width: 0 !important;
  position: relative !important;
}

.hsfc-RadioFieldGroup__Options > div > label.hsfc-FieldLabel {
  border: 1px solid var(--rt-border) !important;
  border-radius: var(--rt-radius-lg) !important;
  background: var(--rt-bg-card) !important;
  cursor: pointer !important;
  transition: border-color var(--rt-transition),
              box-shadow var(--rt-transition),
              background var(--rt-transition),
              transform var(--rt-transition) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.hsfc-RadioFieldGroup__Options > div > label.hsfc-FieldLabel:hover {
  border-color: var(--rt-primary) !important;
  box-shadow: var(--rt-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

.hsfc-RadioFieldGroup__Options input.hsfc-RadioInput,
.hsfc-RadioFieldGroup__Options input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hsfc-RadioFieldGroup__Options > div.is-selected > label.hsfc-FieldLabel {
  border-color: var(--rt-primary) !important;
  background: var(--rt-primary-soft) !important;
  box-shadow: 0 0 0 2px var(--rt-primary-ring) !important;
}

/* === STEP 1 — Plain intent cards (no .plan-card-content) === */
.hsfc-RadioFieldGroup__Options:not(:has(.plan-card-content)) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.hsfc-RadioFieldGroup__Options > div > label.hsfc-FieldLabel:not(:has(.plan-card-content)) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 120px !important;
  padding: 24px 20px !important;
}

.hsfc-RadioFieldGroup__Options > div > label.hsfc-FieldLabel:not(:has(.plan-card-content)) > span {
  display: block !important;
  width: 100% !important;
}

.hsfc-RadioFieldGroup__Options > div > label.hsfc-FieldLabel:not(:has(.plan-card-content)) > span > span {
  display: block !important;
  width: 100% !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  color: var(--rt-foreground) !important;
  font-weight: 500 !important;
}

/* === STEP 5 — Plan cards (.plan-card-content injected by JS) === */
.hsfc-RadioFieldGroup__Options:has(.plan-card-content) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.hsfc-RadioFieldGroup__Options > div > label.hsfc-FieldLabel:has(.plan-card-content) {
  display: block !important;
  text-align: left !important;
  min-height: 420px !important;
  padding: 32px 28px 28px !important;
}

.hsfc-RadioFieldGroup__Options > div > label.hsfc-FieldLabel:has(.plan-card-content) > span.hsfc-FieldLabel__ContentWrapper,
.hsfc-RadioFieldGroup__Options > div > label.hsfc-FieldLabel:has(.plan-card-content) > span:not(.plan-card-content) {
  display: none !important;
}

.plan-card-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.plan-card-eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--rt-muted-strong) !important;
  font-weight: 500 !important;
  margin: 0 0 4px !important;
}

.plan-card-name {
  font-family: var(--rt-font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--rt-foreground) !important;
  margin: 0 0 20px !important;
  line-height: 1.1 !important;
}

.plan-card-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
}

.plan-card-price {
  font-family: var(--rt-font-display) !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: var(--rt-foreground) !important;
}

.plan-card-period {
  font-size: 14px !important;
  color: var(--rt-muted) !important;
  font-weight: 400 !important;
}

.plan-card-billing {
  font-size: 13px !important;
  color: var(--rt-muted-strong) !important;
  margin: 0 0 22px !important;
}

.plan-card-description {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--rt-muted) !important;
  margin: 0 0 22px !important;
  padding-bottom: 22px !important;
  border-bottom: 1px solid var(--rt-border-soft) !important;
  min-height: 3em !important;
}

.plan-card-features-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--rt-foreground) !important;
  margin: 0 0 14px !important;
}

.plan-card-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.plan-card-features li {
  font-size: 14px !important;
  color: var(--rt-muted) !important;
  line-height: 1.4 !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
}

.plan-card-features li::before {
  content: '' !important;
  flex-shrink: 0 !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: 3px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233538CD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8.5 6.5 12 13 4.5'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.plan-card-ribbon {
  position: absolute !important;
  top: -10px !important;
  left: 24px !important;
  background: var(--rt-primary) !important;
  color: #fff !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  padding: 5px 10px !important;
  border-radius: 2px !important;
  z-index: 1 !important;
}

/* ============================================================
   10. STEP 2 — CHECKBOX OPTIONS (company type)
   Plain list with custom checkbox indicators — no row boxes.
   Matches Lovable's minimal radio-list pattern.
   ============================================================ */
.hsfc-CheckboxFieldGroup__Options {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-top: 12px !important;
}

.hsfc-CheckboxFieldGroup__Options > div {
  margin: 0 !important;
}

/* Plain row — no border, no background, no padding box */
.hsfc-CheckboxFieldGroup__Options > div > label.hsfc-FieldLabel {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--rt-foreground) !important;
  line-height: 1.5 !important;
  transition: color var(--rt-transition) !important;
}

.hsfc-CheckboxFieldGroup__Options > div > label.hsfc-FieldLabel:hover {
  color: var(--rt-primary) !important;
}

/* Custom checkbox indicator — small rounded square */
.hsfc-CheckboxFieldGroup__Options input.hsfc-CheckboxInput {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid var(--rt-border) !important;
  border-radius: 4px !important;
  background: var(--rt-bg-card) !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: border-color var(--rt-transition), background var(--rt-transition) !important;
}

.hsfc-CheckboxFieldGroup__Options input.hsfc-CheckboxInput:hover {
  border-color: var(--rt-primary) !important;
}

.hsfc-CheckboxFieldGroup__Options input.hsfc-CheckboxInput:focus-visible {
  outline: 2px solid var(--rt-primary) !important;
  outline-offset: 2px !important;
}

.hsfc-CheckboxFieldGroup__Options input.hsfc-CheckboxInput:checked {
  background: var(--rt-primary) !important;
  border-color: var(--rt-primary) !important;
}

.hsfc-CheckboxFieldGroup__Options input.hsfc-CheckboxInput:checked::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8.5 6.5 12 13 4.5'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px !important;
}

/* Selected text emphasis */
.hsfc-CheckboxFieldGroup__Options > div.is-selected > label.hsfc-FieldLabel,
.hsfc-CheckboxFieldGroup__Options > div:has(input:checked) > label.hsfc-FieldLabel {
  color: var(--rt-foreground) !important;
  font-weight: 500 !important;
}

/* ============================================================
   12. NAVIGATION BUTTONS
   All share .hsfc-Button class. Differentiate by position:
   - Last button = primary (Next / Continue / See Plans / Submit)
   - First-of-two = ghost (Previous)
   ============================================================ */
.hsfc-NavigationRow {
  margin-top: 16px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--rt-border-soft) !important;
}

.hsfc-NavigationRow__Buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* When there's only one button, push it to the right */
.hsfc-NavigationRow__Buttons:has(> .hsfc-Button:only-child) {
  justify-content: flex-end !important;
}

/* Base button reset */
.hsfc-Button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0 24px !important;
  font-family: var(--rt-font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  border-radius: var(--rt-radius-md) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: background var(--rt-transition),
              border-color var(--rt-transition),
              color var(--rt-transition),
              box-shadow var(--rt-transition),
              transform var(--rt-transition) !important;
  outline: none !important;
}

.hsfc-Button:focus-visible {
  box-shadow: 0 0 0 3px var(--rt-primary-glow) !important;
}

/* Primary — last button in the row */
.hsfc-NavigationRow__Buttons > .hsfc-Button:last-child {
  background: var(--rt-primary) !important;
  color: #fff !important;
  border-color: var(--rt-primary) !important;
}

.hsfc-NavigationRow__Buttons > .hsfc-Button:last-child:hover {
  background: #2c2eb3 !important;
  border-color: #2c2eb3 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(53, 56, 205, 0.25) !important;
}

.hsfc-NavigationRow__Buttons > .hsfc-Button:last-child:active {
  transform: translateY(0) !important;
}

/* Ghost — Previous (only when there are 2 buttons) */
.hsfc-NavigationRow__Buttons:has(> .hsfc-Button + .hsfc-Button) > .hsfc-Button:first-child {
  background: transparent !important;
  color: var(--rt-muted) !important;
  border-color: transparent !important;
}

.hsfc-NavigationRow__Buttons:has(> .hsfc-Button + .hsfc-Button) > .hsfc-Button:first-child:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--rt-foreground) !important;
}

/* Disabled state */
.hsfc-Button[aria-busy="true"],
.hsfc-Button:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ============================================================
   13. MOBILE BREAKPOINTS
   ============================================================ */
@media (max-width: 767px) {
  .hsfc-Form h2.hsfc-Heading {
    font-size: 26px !important;
  }

  /* First/last name stack on mobile */
  .hsfc-Row:has(> .hsfc-TextField + .hsfc-TextField) {
    grid-template-columns: 1fr !important;
  }

  /* Step 1 intent cards stack */
  .hsfc-RadioFieldGroup__Options:not(:has(.plan-card-content)) {
    grid-template-columns: 1fr !important;
  }

  /* Step 5 plan cards stack */
  .hsfc-RadioFieldGroup__Options:has(.plan-card-content) {
    grid-template-columns: 1fr !important;
  }

  .hsfc-RadioFieldGroup__Options > div > label.hsfc-FieldLabel:has(.plan-card-content) {
    min-height: auto !important;
    padding: 28px 24px !important;
  }

  .plan-card-name { font-size: 24px !important; }
  .plan-card-price { font-size: 34px !important; }

  /* Buttons on mobile */
  .hsfc-Button {
    height: 44px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
  }
}

/* ============================================================
   14. SMS CHECKBOX
   ============================================================ */
   /* Target the inline styled span inside HubSpot checkbox fields */
.hsfc-CheckboxInput + span span[style] {
    background-color: transparent !important;
    color: #000000 !important;
    margin-left: 9px;
    margin-bottom: 8px;;
}

/* Target the link text as well */
.hsfc-CheckboxInput + span span[style] a {
    color: #444CE7 !important;
    text-decoration: underline;
}/* End custom CSS */