/* The site's own styles: only what HubSpot used to provide around the theme. The theme's CSS
   (assets/theme/) is the exported CSS, unedited except that url() references point at local files. */

/* The "Partner with us" popup: HubSpot's web interactive slid in at the bottom right, 337 by
   638 px, 10 px from the edges, with no overlay. */
#ll-popup[hidden] {
  display: none !important;
}
#ll-popup {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 2147483000;
}
#ll-popup .ll-popup-frame {
  width: 337px;
  height: 638px;
  max-height: calc(100vh - 20px);
  overflow: auto;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
}
#ll-popup .ll-popup-doc {
  min-height: 100%;
  position: relative;
}
/* HubSpot's interactive CSS sizes the document 100vh, which inside its 638 px iframe was the frame;
   here it is the window, so the content sat lower than HubSpot showed it and the frame scrolled on
   any window. The document is as tall as the frame or its content instead, as in the iframe. */
#ll-popup .ll-popup-frame .ll-popup-doc {
  height: auto;
}
/* The page theme's sections are padded 80 px (template_theme-overrides.css); the slide-in's logo row
   carries the same class, and in HubSpot's iframe the theme never reached it. */
#ll-popup .ll-popup-doc .dnd-section {
  padding: 0;
}
#ll-popup #interactive-close-button {
  cursor: pointer;
}
/* HubSpot's close button sat in the slide-in's content, so whenever the frame scrolls (on a
   window too short for its 638 px, it shrinks to the window) it scrolled away with the form.
   popup.ts moves it beside the frame (before it), where it stays at the top right; these are the
   exported rules (popup-interactive.css) for its new place. */
#ll-popup > #interactive-close-button-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  padding: 10px;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0);
  cursor: pointer;
}
#ll-popup > #interactive-close-button-container #interactive-close-button {
  display: flex;
  width: 19px;
  height: 19px;
  color: rgba(247, 250, 252, 1);
  stroke-width: 4px;
}

/* HubSpot's form styles for the popup (its "canvas" theme with the interactive's colors). The
   page's theme CSS styles every form globally, so these are written against #ll-popup to win. */
#ll-popup form {
  font-family: arial, helvetica, sans-serif;
  color: #fafafa;
  text-align: left;
  margin: 0;
}
#ll-popup fieldset {
  max-width: none !important;
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0 16px;
}
#ll-popup fieldset > .hs-form-field {
  flex: 1 1 0;
  min-width: 0;
}
#ll-popup .hs-form-field {
  margin-bottom: 18px;
}
#ll-popup .hs-form-field > label {
  display: block;
  font:
    15px/20px arial,
    helvetica,
    sans-serif;
  color: #fafafa;
  text-transform: none;
  letter-spacing: normal;
  margin: 0 0 4px;
  padding: 0;
}
#ll-popup .hs-form-required {
  color: #f2545b;
  margin-left: 4px;
}
#ll-popup .hs-input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font:
    16px/22px arial,
    helvetica,
    sans-serif;
  color: #33475b;
  background: #f5f8fa;
  border: 1px solid #cbd6e2;
  border-radius: 3px;
  text-transform: none;
}
#ll-popup textarea.hs-input {
  height: auto;
  min-height: 64px;
  padding: 9px 10px;
  resize: vertical;
}
#ll-popup .hs-input::placeholder {
  color: #8a9bb0;
  text-transform: uppercase;
}
#ll-popup .hs-input:focus {
  outline: none;
  border-color: rgba(0, 208, 228, 0.5);
  box-shadow: 0 0 4px 1px rgba(0, 208, 228, 0.3);
}
#ll-popup .hs-input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: #c87872;
}
#ll-popup .hs_submit .actions {
  margin: 4px 0 0;
  padding: 0;
  text-align: left;
}
#ll-popup .hs-button {
  font:
    700 14px/14px arial,
    helvetica,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: normal;
  color: #fff;
  background: #e23525;
  border: 1px solid #e23525;
  border-radius: 3px;
  padding: 12px 24px;
  cursor: pointer;
  width: auto;
  height: auto;
}
#ll-popup .ll-form-error {
  color: #f2545b;
  font-size: 14px;
  margin-top: 10px;
}
#ll-popup .submitted-message {
  color: #fafafa;
  font:
    15px/1.4 arial,
    helvetica,
    sans-serif;
}

/* Forms on the page, while the forms island has them: the thank-you replaces the fields; the
   error sits under the button. */
form[data-form] [hidden] {
  display: none !important;
}
form[data-form][data-state='sent'] > *:not(.ll-form-thanks) {
  display: none !important;
}
form[data-form] .ll-form-error {
  margin-top: 12px;
  color: #f2545b; /* HubSpot's error red */
}
form[data-form] .ll-turnstile:empty {
  display: none;
}
form[data-form] .ll-turnstile iframe {
  margin: 0 0 12px;
}
form[data-form][data-state='submitting'] .hs-button {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

/* The eligibility lookup's empty state and spinner (HubSpot's spun forever on no match). */
.hubdb_section .ll-eligibility-empty {
  padding: 12px 10px;
  color: #2d3748;
  font-size: 16px;
}
.hubdb_section .ll-eligibility-spinner {
  padding: 12px 10px;
  text-align: center;
}
.hubdb_section .ll-eligibility-spinner::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid #e0e0e0;
  border-top-color: #e23525;
  border-radius: 50%;
  animation: ll-spin 0.8s linear infinite;
}
@keyframes ll-spin {
  to {
    transform: rotate(360deg);
  }
}

/* The Game Locator, which replaces the Netlify iframe: it fills the iframe's 16:9 box on wide
   screens, and on a phone grows to at least 640 px (the old embed was 219 px tall there). */
.ll-locator-frame > .ll-locator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .ll-locator-frame {
    padding-bottom: 0 !important;
    overflow: visible !important;
  }
  .ll-locator-frame > .ll-locator {
    position: relative;
    height: auto;
    min-height: 640px;
  }
}

/* HubSpot's renderer laid the consent checkbox line out tighter than the theme CSS alone does:
   the box at the top of a 14 px line and the label right after it. */
form[data-form] .legal-consent-container .hs-form-booleancheckbox-display {
  line-height: 14px;
}
form[data-form] .legal-consent-container .hs-form-booleancheckbox-display > span {
  margin-left: 0 !important;
}

/* /fireside-registration: HubSpot rendered this form with its newer (v4) form styles, which the
   export could not take; these approximate them from the captured page. */
form[data-form='campaign-fireside-registration'] {
  font-family:
    Inter,
    -apple-system,
    'Segoe UI',
    Helvetica,
    Arial,
    sans-serif;
  color: #33475b;
  text-align: center;
  max-width: 1216px;
  margin: 0 auto;
}
form[data-form='campaign-fireside-registration'] .hs-form-field {
  margin: 0 0 40px;
}
form[data-form='campaign-fireside-registration'] .hs-form-field > label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #33475b;
  text-transform: none;
  margin: 0 0 18px;
}
form[data-form='campaign-fireside-registration'] .hs-form-required {
  color: #f2545b;
}
form[data-form='campaign-fireside-registration'] .hs-field-desc {
  font-size: 12px;
  line-height: 18px;
  color: #516f90;
  margin: -10px 0 12px;
}
form[data-form='campaign-fireside-registration'] .hs-input {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 0 10px;
  font:
    14px Inter,
    -apple-system,
    'Segoe UI',
    Helvetica,
    Arial,
    sans-serif;
  color: #33475b;
  background: #fff;
  border: 1px solid #cbd6e2;
  border-radius: 3px;
}
form[data-form='campaign-fireside-registration'] textarea.hs-input {
  height: 150px;
  background: #f5f8fa;
  border-color: #f5f8fa;
  padding: 10px;
}
form[data-form='campaign-fireside-registration'] .legal-consent-container {
  font-size: 13px;
  line-height: 22px;
  color: #33475b;
  text-transform: none;
}
form[data-form='campaign-fireside-registration'] .legal-consent-container .hs-richtext,
form[data-form='campaign-fireside-registration'] .legal-consent-container .hs-richtext p {
  font-size: 13px;
  line-height: 22px;
  color: #33475b;
  text-transform: none;
  margin: 0 0 14px;
}
form[data-form='campaign-fireside-registration'] .legal-consent-container .hs-form-field {
  margin: 0 0 14px;
}
form[data-form='campaign-fireside-registration'] .hs-submit .actions {
  text-align: center;
  margin-top: 40px;
}
form[data-form='campaign-fireside-registration'] .hs-button {
  font:
    700 13px/1 Inter,
    -apple-system,
    'Segoe UI',
    Helvetica,
    Arial,
    sans-serif;
  color: #fff;
  background: #b45f06;
  border: 0;
  border-radius: 3px;
  padding: 15px 24px;
  text-transform: uppercase;
}
form[data-form='campaign-fireside-registration'] .hs-form-field > label,
form[data-form='campaign-fireside-registration'] .hs-field-desc {
  text-align: center !important;
}
form[data-form='campaign-fireside-registration'] .hs-form-required {
  display: inline !important;
}
/* The page's own module CSS colors a v2 form's button (#E69138, by id); the v4 form ignored it. */
#hs_cos_wrapper_module_1639760392376319 form[data-form='campaign-fireside-registration'] .hs-button {
  background-color: #b45f06 !important;
  color: #fff !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
form[data-form='campaign-fireside-registration'] .legal-consent-container .hs-form-booleancheckbox-display {
  line-height: 14px;
  font-weight: 400 !important;
  text-align: center;
  display: block;
}
form[data-form='campaign-fireside-registration'] .legal-consent-container .hs-form-booleancheckbox-display > span {
  margin-left: 0 !important;
  font:
    400 13px Inter,
    -apple-system,
    'Segoe UI',
    Helvetica,
    Arial,
    sans-serif !important;
  color: #33475b;
  text-transform: none !important;
}
form[data-form='campaign-fireside-registration'] .legal-consent-container .hs-form-booleancheckbox-display input {
  float: left;
}

/* The footer signup sits on the black band, but its consent text and its thank-you kept the theme's
   dark body color (#1a202c) and could not be read without selecting them (on HubSpot too). They take
   the form's own label color instead. */
form[data-form='newsletter'] .legal-consent-container,
form[data-form='newsletter'] .legal-consent-container p,
form[data-form='newsletter'] .submitted-message,
form[data-form='newsletter'] .submitted-message p {
  color: #ccc;
}

/* The theme's loading image belonged to HubSpot's search; the eligibility island has its own spinner. */
.hubdb_section .loading {
  display: none;
}