/******* Do not edit this file *******
Code Snippets Manager
Saved: Aug 29 2026 | 07:04:59 */
@charset "UTF-8";
/* ==========================================================================
   FlashGlobal — HubSpot form theme
   Renderer: developer embed (light DOM) — js.hsforms.net/forms/embed/developer/
   Scope: .flashGlobal-HubspotForms > .hs-form-html > .hsfc-* markup
   Values from the Figma export.

   !important throughout: HubSpot injects its stylesheet at runtime, so it
   lands after this file in source order with higher specificity.
   ========================================================================== */
.flashGlobal-HubspotForms {
  --fg-font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fg-orange:       #DC582A;
  --fg-orange-hover: #c44a20;
  --fg-text:         #FFFFFF;
  --fg-muted:        rgba(255, 255, 255, 0.5);
  --fg-field-bg:     rgba(255, 255, 255, 0.05);
  --fg-field-border: rgba(255, 255, 255, 0.2);
  --fg-panel-bg:     #1d2635;
  /* opaque — dropdown panel overlays the page */
  --fg-hover:        rgba(255, 255, 255, 0.1);
}
/* ---------- layout ---------- */
.flashGlobal-HubspotForms .hsfc-Form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
/* ---------- field labels: Inter 700 / 14px / 0.1em / uppercase ----------
   Scoped to .hsfc-FieldLabel, NOT bare `label`, so checkbox and radio
   option labels keep their sentence case automatically.                  */
.flashGlobal-HubspotForms .hsfc-FieldLabel, .flashGlobal-HubspotForms .hsfc-FieldLabel span, .flashGlobal-HubspotForms legend {
  font-family: var(--fg-font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--fg-text) !important;
}
.flashGlobal-HubspotForms .hsfc-FieldLabel {
  display: block !important;
  margin: 0 0 8px 0 !important;
}
.flashGlobal-HubspotForms .hsfc-FieldLabel__RequiredIndicator {
  color: var(--fg-orange) !important;
}
/* ---------- inputs, selects, textarea (40px tall) ----------
   background-COLOR, not the shorthand: the shorthand resets
   background-image, which erases any icon HubSpot paints on a field.   */
.flashGlobal-HubspotForms input[type="text"], .flashGlobal-HubspotForms input[type="email"], .flashGlobal-HubspotForms input[type="tel"], .flashGlobal-HubspotForms input[type="number"], .flashGlobal-HubspotForms input[type="url"], .flashGlobal-HubspotForms input[type="password"], .flashGlobal-HubspotForms input[type="search"], .flashGlobal-HubspotForms select, .flashGlobal-HubspotForms textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: var(--fg-field-bg) !important;
  border: 1px solid var(--fg-field-border) !important;
  border-radius: 0 !important;
  color: var(--fg-text) !important;
  font-family: var(--fg-font) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  padding: 9px 10px !important;
  box-shadow: none !important;
}
.flashGlobal-HubspotForms textarea {
  min-height: 113px !important;
  padding: 10px !important;
  resize: vertical !important;
}
.flashGlobal-HubspotForms input::placeholder, .flashGlobal-HubspotForms textarea::placeholder {
  color: var(--fg-muted) !important;
  opacity: 1 !important;
}
.flashGlobal-HubspotForms input:focus, .flashGlobal-HubspotForms select:focus, .flashGlobal-HubspotForms textarea:focus {
  outline: none !important;
  border-color: var(--fg-orange) !important;
  box-shadow: 0 0 0 1px rgba(220, 88, 42, 0.6) !important;
}
/* ==========================================================================
   DROPDOWN
   Structure:
   .hsfc-DropdownField
     .hsfc-FieldLabel
     .hsfc-DropdownInput
       input.hsfc-TextInput.hsfc-TextInput--button[role=combobox][readonly]
       .hsfc-DropdownInput__Caret > span > span
     .hsfc-DropdownOptions
       .hsfc-DropdownOptions__Search > input.hsfc-TextInput[role=searchbox]
       ul.hsfc-DropdownOptions__List[role=listbox]
         li.hsfc-DropdownOptions__List__ListItem[role=option]
   ========================================================================== */
/* --- caret: drawn explicitly, since HubSpot's is CSS-only empty spans --- */
.flashGlobal-HubspotForms .hsfc-DropdownInput {
  position: relative !important;
}
.flashGlobal-HubspotForms .hsfc-DropdownInput__Caret {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  transition: transform 0.15s ease !important;
}
/* hide HubSpot's own caret shape inside it */
.flashGlobal-HubspotForms .hsfc-DropdownInput__Caret span {
  display: none !important;
}
/* flip it when the menu is open */
.flashGlobal-HubspotForms .hsfc-TextInput--button[aria-expanded="true"] ~ .hsfc-DropdownInput__Caret {
  transform: translateY(-50%) rotate(180deg) !important;
}
/* leave room so long values don't run under the caret */
.flashGlobal-HubspotForms .hsfc-TextInput--button {
  padding-right: 34px !important;
  cursor: pointer !important;
}
/* --- panel (wraps search + list) --- */
.flashGlobal-HubspotForms .hsfc-DropdownOptions {
  background-color: var(--fg-panel-bg) !important;
  border: 1px solid var(--fg-field-border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
/* --- search row (this div is the white block, not the input) --- */
.flashGlobal-HubspotForms .hsfc-DropdownOptions__Search {
  background-color: var(--fg-panel-bg) !important;
  padding: 8px !important;
  border-bottom: 1px solid var(--fg-field-border) !important;
}
.flashGlobal-HubspotForms .hsfc-DropdownOptions__Search .hsfc-TextInput {
  background-color: var(--fg-field-bg) !important;
  border: 1px solid var(--fg-field-border) !important;
  color: var(--fg-text) !important;
  padding: 7px 10px !important;
}
/* --- list: no chrome of its own --- */
.flashGlobal-HubspotForms .hsfc-DropdownOptions__List {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  list-style: none !important;
  max-height: 240px !important;
  overflow-y: auto !important;
}
/* --- option rows --- */
.flashGlobal-HubspotForms .hsfc-DropdownOptions__List__ListItem {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 12px !important;
  font-family: var(--fg-font) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--fg-text) !important;
  cursor: pointer !important;
}
.flashGlobal-HubspotForms .hsfc-DropdownOptions__List__ListItem:hover, .flashGlobal-HubspotForms .hsfc-DropdownOptions__List__ListItem[aria-selected="true"] {
  background-color: var(--fg-hover) !important;
}
/* ---------- native <select> fallback (OS-rendered, cannot be transparent) ---------- */
.flashGlobal-HubspotForms select option {
  background-color: var(--fg-panel-bg) !important;
  color: var(--fg-text) !important;
}
/* ---------- submit button: #DC582A, square, 52px tall ---------- */
.flashGlobal-HubspotForms button[type="submit"], .flashGlobal-HubspotForms input[type="submit"] {
  background-color: var(--fg-orange) !important;
  color: #FFFFFF !important;
  font-family: var(--fg-font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px !important;
  min-width: 294px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}
.flashGlobal-HubspotForms button[type="submit"]:hover, .flashGlobal-HubspotForms input[type="submit"]:hover {
  background-color: var(--fg-orange-hover) !important;
}
/* ---------- errors ---------- */
.flashGlobal-HubspotForms [class*="rror"] {
  color: #FF8A6B !important;
  font-family: var(--fg-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* ---------- Chrome autofill ---------- */
.flashGlobal-HubspotForms input:-webkit-autofill, .flashGlobal-HubspotForms input:-webkit-autofill:hover, .flashGlobal-HubspotForms input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--fg-panel-bg) inset !important;
  caret-color: var(--fg-text) !important;
}
/* ==========================================================================
   PHONE FIELD
   Structure:
   .hsfc-PhoneField
     label.hsfc-FieldLabel
     .hsfc-PhoneInput
       .hsfc-PhoneInput__FlagAndCaret
         span.hsfc-PhoneInput__FlagAndCaret__Flag
         div.hsfc-PhoneInput__FlagAndCaret__Caret
       input.hsfc-TextInput[type=tel]
     .hsfc-DropdownOptions          <- country list, styled by the block above

   The wrapper carries the border/fill so the flag block and the input read
   as one 40px control.
   ========================================================================== */
.flashGlobal-HubspotForms .hsfc-PhoneInput {
  display: flex !important;
  align-items: center !important;
  background-color: var(--fg-field-bg) !important;
  border: 1px solid var(--fg-field-border) !important;
  border-radius: 0 !important;
}
.flashGlobal-HubspotForms .hsfc-PhoneInput:focus-within {
  border-color: var(--fg-orange) !important;
  box-shadow: 0 0 0 1px rgba(220, 88, 42, 0.6) !important;
}
.flashGlobal-HubspotForms .hsfc-PhoneInput__FlagAndCaret {
  background-color: transparent !important;
  border: none !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 6px 0 10px !important;
  cursor: pointer !important;
}
.flashGlobal-HubspotForms .hsfc-PhoneInput__FlagAndCaret__Caret {
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}
.flashGlobal-HubspotForms .hsfc-PhoneInput .hsfc-TextInput {
  background-color: transparent !important;
  border: none !important;
  flex: 1 1 auto !important;
}
.flashGlobal-HubspotForms .hsfc-PhoneInput .hsfc-TextInput:focus {
  border: none !important;
  box-shadow: none !important;
}
/* ==========================================================================
   CHECKBOXES
   Actual structure:
   .hsfc-CheckboxFieldGroup
     label.hsfc-FieldLabel            <- GROUP label (stays uppercase)
     .hsfc-CheckboxFieldGroup__Options[role=group]
       div
         label.hsfc-FieldLabel        <- OPTION label (sentence case)
           input.hsfc-CheckboxInput[type=checkbox]
           span > span                <- option text

   Both labels share .hsfc-FieldLabel, so option labels are scoped by their
   __Options ancestor. That is (0,3,x) specificity, which beats the general
   .hsfc-FieldLabel rule above without needing :has().

   Figma: 18x18 box, 2px radius.
     unchecked — fill rgba(255,255,255,0.05), border rgba(255,255,255,0.2)
     checked   — same fill, border #DC582A, checkmark #DC582A (never filled)
   ========================================================================== */
/* --- the box --- */
.flashGlobal-HubspotForms .hsfc-CheckboxInput, .flashGlobal-HubspotForms input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--fg-field-border) !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  transition: border-color 0.12s ease !important;
}
.flashGlobal-HubspotForms .hsfc-CheckboxInput:hover, .flashGlobal-HubspotForms input[type="checkbox"]:hover {
  border-color: rgba(255, 255, 255, 0.4) !important;
}
.flashGlobal-HubspotForms .hsfc-CheckboxInput:checked, .flashGlobal-HubspotForms input[type="checkbox"]:checked {
  border-color: var(--fg-orange) !important;
  background-color: var(--fg-orange) !important;
  background-size: 12px 12px !important;
}
.flashGlobal-HubspotForms .hsfc-CheckboxInput:focus-visible, .flashGlobal-HubspotForms input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(220, 88, 42, 0.6) !important;
}
/* --- option list: 8px between rows --- */
.flashGlobal-HubspotForms .hsfc-CheckboxFieldGroup__Options {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.flashGlobal-HubspotForms .hsfc-CheckboxFieldGroup__Options > div {
  margin: 0 !important;
  padding: 0 !important;
}
/* --- option row: label wraps input + text --- */
.flashGlobal-HubspotForms .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  /* Figma indent; set to 0 to align with fields */
  min-height: 24px !important;
  margin: 0 !important;
  cursor: pointer !important;
}
/* --- option text: sentence case, overrides the field-label rule --- */
.flashGlobal-HubspotForms .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel, .flashGlobal-HubspotForms .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel span {
  font-family: var(--fg-font) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--fg-text) !important;
}
/* ==========================================================================
   RADIOS — by analogy with the checkbox structure above. Not verified
   against live markup; if this form gains a radio group, confirm the
   class names the same way (outerHTML on [class*="Radio"]).
   ========================================================================== */
.flashGlobal-HubspotForms .hsfc-RadioInput, .flashGlobal-HubspotForms input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--fg-field-border) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}
.flashGlobal-HubspotForms .hsfc-RadioInput:checked, .flashGlobal-HubspotForms input[type="radio"]:checked {
  border-color: var(--fg-orange) !important;
  background-image: radial-gradient(circle, var(--fg-orange) 0 4px, transparent 5px) !important;
}
.flashGlobal-HubspotForms .hsfc-RadioFieldGroup__Options {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.flashGlobal-HubspotForms .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  min-height: 24px !important;
  margin: 0 !important;
  cursor: pointer !important;
}
.flashGlobal-HubspotForms .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel, .flashGlobal-HubspotForms .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel span {
  font-family: var(--fg-font) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--fg-text) !important;
}