/* ==========================================================================
   Frontier Edge — the HubSpot demo form, restyled to match the site.
   js/demo.js asks HubSpot for the form without its theme (css: ''), so HubSpot writes the plain form
   straight into #hs-form on our page. HubSpot still injects a little layout CSS of its own, so every
   rule here is scoped to the #hs-form ID, which outranks it.
   ========================================================================== */

#hs-form { font-size: var(--body-size); line-height: 1.4; color: var(--color-fg); container-type: inline-size; }
#hs-form *, #hs-form *::before, #hs-form *::after { box-sizing: border-box; }

/* ---------- Layout: rows of one or two fields ---------- */
#hs-form .hs-form { display: grid; gap: var(--field-gap); }
#hs-form .hs-form fieldset {
  max-width: none !important; min-width: 0; margin: 0; padding: 0; border: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--field-gap) 16px;
}
#hs-form .hs-form fieldset.form-columns-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#hs-form .hs-form fieldset > .hs-form-field, #hs-form .hs-form fieldset .input { width: auto !important; float: none !important; margin: 0 !important; }
/* paired fields stack once the card is narrow (tablet and phone) */
@container (max-width: 460px) {
  #hs-form .hs-form fieldset.form-columns-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Labels ---------- */
#hs-form .hs-form-field > label {
  display: block; margin-bottom: var(--label-gap);
  font-size: var(--small-size); line-height: 1.4; color: var(--color-fg-2);
}
#hs-form .hs-form-required { margin-left: .2em; color: var(--color-required); }

/* ---------- Inputs, dropdowns, text area ---------- */
#hs-form .hs-input:not([type=checkbox]):not([type=radio]) {
  display: block; width: 100%; margin: 0;
  font: inherit; font-size: var(--body-size); line-height: 1.3; color: var(--color-fg);
  background-color: var(--surface-control); border: 1px solid var(--border-control); border-radius: var(--radius);
  padding: var(--input-pad); outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, background-color .2s ease;
}
#hs-form .hs-input:not([type=checkbox]):focus { border-color: var(--color-focus); background-color: var(--surface-control-focus); }
#hs-form .hs-input.invalid, #hs-form .hs-input.error { border-color: var(--color-invalid) !important; }
#hs-form select.hs-input {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C9CACD' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
#hs-form select.hs-input.is-placeholder { color: var(--color-muted); }
#hs-form select.hs-input option { color: var(--color-fg); background: var(--surface-control); }
#hs-form textarea.hs-input { min-height: 112px; resize: vertical; }

/* ---------- Error messages ---------- */
#hs-form .hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; }
#hs-form .hs-error-msgs li { margin: 0; }
#hs-form .hs-error-msg, #hs-form .hs-error-msgs label { font-size: var(--small-size); line-height: 1.4; color: var(--color-required); }
#hs-form .hs_error_rollup .hs-error-msgs { margin: 0; }

/* ---------- Privacy notice and the communications checkbox ---------- */
#hs-form .legal-consent-container {
  display: grid; gap: 14px;
  font-size: var(--small-size); line-height: 1.6; color: var(--color-muted);
}
#hs-form .legal-consent-container p { margin: 0; }
#hs-form .legal-consent-container a { color: var(--color-fg); }
#hs-form .legal-consent-container .hs-form-field > label { display: none; }
#hs-form .inputs-list { list-style: none; margin: 0; padding: 0; }
#hs-form .inputs-list li { margin: 0; }
#hs-form .hs-form-booleancheckbox-display, #hs-form .hs-form-checkbox-display {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: var(--small-size); line-height: 1.6; color: var(--color-fg-2);
}
#hs-form .hs-form-booleancheckbox-display input, #hs-form .hs-form-checkbox-display input {
  width: var(--checkbox-size); height: var(--checkbox-size); margin: 2px 0 0; flex: none;
  float: none; accent-color: var(--color-checkbox);
}
#hs-form .legal-consent-container .hs-form-booleancheckbox-display > span { display: block; margin-left: 0; }
#hs-form .hs-form-booleancheckbox-display p, #hs-form .hs-form-checkbox-display p { margin: 0; display: inline; }
#hs-form .legal-consent-container legend:empty { display: none; }

/* ---------- reCAPTCHA badge (Google's, unstyleable): just spaced ---------- */
#hs-form .hs_recaptcha { margin-top: 4px; }
/* the page is dark; without this the badge's frame paints as a black box */
#hs-form .grecaptcha-badge, #hs-form .grecaptcha-badge iframe { color-scheme: light; }

/* ---------- Submit: the primary button with its orange mesh ----------
   The mesh sits behind the (transparent) button and swings round on hover, as on every other primary button. */
#hs-form .hs_submit { margin-top: 8px; }
#hs-form .hs_submit .hs-field-desc:empty { display: none; }
#hs-form .hs_submit .actions {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--button-border); border-radius: var(--radius); background: var(--orange-500);
}
#hs-form .hs_submit .actions::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: 260%; aspect-ratio: 1; /* same proportions as the full-width button it replaces */
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  background:
    radial-gradient(28% 28% at 66% 38%, var(--orange-glow-yellow), transparent 70%),
    radial-gradient(26% 26% at 36% 62%, var(--orange-glow-green), transparent 70%),
    radial-gradient(30% 30% at 58% 64%, var(--orange-300), transparent 72%),
    radial-gradient(24% 24% at 40% 36%, var(--orange-600), transparent 70%),
    var(--orange-500);
  transition: transform var(--button-swing-duration) var(--ease-overshoot-button);
}
#hs-form .hs_submit .actions:hover::before, #hs-form .hs_submit .actions:focus-within::before { transform: translate(-50%, -50%) rotate(200deg) scale(1.15); }
#hs-form .hs_submit .actions:hover { filter: brightness(1.05) saturate(1.05); }
#hs-form .hs-button {
  display: block; width: 100%; height: calc(var(--button-height) - 2px); margin: 0; padding: 0 var(--button-pad-x);
  font: inherit; font-size: var(--button-size); letter-spacing: var(--button-tracking); line-height: 1;
  color: #FFFFFF; text-shadow: var(--button-text-shadow);
  background: transparent; border: 0; border-radius: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
#hs-form .hs-button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -4px; }

/* ---------- Thank-you message (written in HubSpot) ---------- */
#hs-form .submitted-message { font-size: var(--lead-size); line-height: var(--lead-leading); color: var(--color-fg); }
#hs-form .submitted-message p { margin: 0 0 12px; }
#hs-form .submitted-message p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  #hs-form .hs_submit .actions::before { transition: none; }
}