/* ******************************************************************************
*********************************************************************************
Use this file to override any of the CSS styles preset in the themed
stylesheets or you can add your own custom styles.
*********************************************************************************
****************************************************************************** */

/* Test */
















.dnd-section > .row-fluid {
  max-width: 1230px;
}

.dnd-section {
  padding-bottom: 80px;
  padding-top: 80px;
}

.body-container__homepage .dnd-section:nth-child(odd) {
  background-color: #F8FAFC;
}
.page-center {
  max-width: 1230px;
}




html {
  font-size: 24;
}

body {
  color: #536A81;
  font-family: 'Gilroy', sans-serif;
  font-size: 24px;
  font-weight: 400;
}

p {
  font-family: 'Gilroy', sans-serif;
  font-weight: 400;
}

a {
  font-family: 'Gilroy', sans-serif;
  color: rgba(83, 106, 129, 1.0);
}

a:hover,
a:focus {
  color:#efbd3e;
}

a:active {
  color: rgba(123, 146, 169, 1.0);
}

h1 {
  color: #536A81;
  font-family: 'Gilroy', sans-serif;
  font-size: 55px;
  font-weight: 700;
}

@media(max-width: 767px) {
  h1 {
    font-size: 33.0px;
  }
}

h2 {
  color: #536A81;
  font-family: 'Gilroy', sans-serif;
  font-size: 50px;
  font-weight: 700;
}

@media(max-width: 767px) {
  h2 {
    font-size: 25.0px;
  }
}

h3 {
  color: #536A81;
  font-family: 'Gilroy', sans-serif;
  font-size: 40px;
  font-weight: 700;
}

@media(max-width: 767px) {
  h3 {
    font-size: 24.0px;
  }
}

h4 {
  color: #FDA80C;
  font-family: 'Gilroy', sans-serif;
  font-size: 32px;
  font-weight: 700;
}

@media(max-width: 767px) {
  h4 {
    font-size: 22.4px;
  }
}

h5 {
  color: #536A81;
  font-family: 'Gilroy', sans-serif;
  font-size: 24px;
  font-weight: 700;
}
@media(max-width: 767px) {
  h5 {
    font-size: 19.200000000000003px;
  }
}

h6 {
  color: #536A81;
  font-family: 'Gilroy', sans-serif;
  font-size: 18px;
  font-weight: 700;
}






form,
.submitted-message {
  background-color: rgba(239, 245, 249, 1.0);
  font-family: 'Gilroy', sans-serif;
}

h3.form-title {
  background-color: rgba(239, 245, 249, 1.0);
  color: rgba(83, 106, 129, 1.0);
  border-radius: 10px;
}

.hs-button,
.button--primary {
  background-color: rgba(253, 168, 12, 1.0);
  border-color: rgba(253, 168, 12, 1.0);
  border-radius: 10px;
  border-width: 2px;
  color: rgba(255, 255, 255, 1.0);
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.custom-menu-primary ul.submenu.level-1>li:nth-last-child(2){
  background-color: rgba(253, 168, 12, 1.0)!important;
  border-color: rgba(253, 168, 12, 1.0);
}
.hs-button:hover,
.hs-button:focus,
.button--primary:hover,
.button--primary:focus {
  background-color: #FDA80C;
  border-color: #FDA80C;
  color: #FFFFFF;
}

.hs-button:active,
.button--primary:active {
  background-color: rgba(255, 208, 52, 1.0);
  border-color: rgba(255, 208, 52, 1.0);
  color: rgba(255, 255, 255, 1.0);
}

.hs-form label {
  color: rgba(83, 106, 129, 1.0);
}
form h1,
form h2,
form h3,
form h4,
form h5,
form h6,
form a,
form p,
.hs-form-field>label,
form#email-prefs-form .page-header{
  color: rgba(83, 106, 129, 1.0);
}

.hs-form legend {
  color: rgba(68, 68, 68, 1.0);
}

form input,
form select,
form textarea,
.hs-input {
  border-color: rgba(140, 160, 177, 1.0);
  background-color: rgba(255, 255, 255, 1.0);
  color: #8CA0B1;
  border-radius: 10px;
}

form input:focus,
form select:focus,
form textarea:focus,
.hs-input:focus {
  border-color: rgba(140, 160, 177, 1.0);
}

.fn-date-picker .pika-table thead th {
  color: rgba(255, 255, 255, 0.0);
}

.hs-input:-moz-placeholder,
.hs-input::-webkit-input-placeholder,
.hs-field-desc,
.hs-dateinput:before,
.hs-richtext {
  color: #536A81;
}

.hs-richtext {
  font-size: 24;
}

.hs-default-font-element,
.hs-main-font-element {
  font-family: 'Gilroy', sans-serif;
}

.fn-date-picker td.is-today .pika-button {
  color: #494a52;
}

.fn-date-picker td.is-selected .pika-button {
  background: #494a52;
}

.fn-date-picker td .pika-button:hover {
  background-color: #F8FAFC !important;
}





th,
td {
  background-color: rgba(255, 255, 255, 1.0);
  border: 1px solid rgba(73, 74, 82, 1.0);
  color: rgba(73, 74, 82, 1.0);
}

thead th,
thead td {
  background-color: rgba(73, 74, 82, 1.0);
  color: rgba(255, 255, 255, 1.0);
}

tfoot td {
  background-color: rgba(255, 255, 255, 1.0);
  color: rgba(73, 74, 82, 1.0);
}

table,
tbody + tbody {
  border-color: rgba(73, 74, 82, 1.0);
}





header.header {
  background-color: rgba(255, 255, 255, 1.0);
}

.header__container {
  max-width: 1230px;
}

body .custom-menu-primary a {
  color: #374656;
}

body .custom-menu-primary .submenu.level-1 > li:hover > a{
  text-shadow: 1px 0 0 #374656;
}

body .custom-menu-primary a.active-branch {
  text-shadow: 1px 0 0 #374656;
}
body .custom-menu-primary .submenu.level-1 > li.active-branch{
  background-color: rgba(0, 0, 0, 0.0);
}
body .custom-menu-primary .submenu.level-1 > li {
  background-color: ;
}
body .custom-menu-primary .submenu.level-1 > li:hover {
  background-color: rgba(0, 0, 0, 0.0);
}
body .custom-menu-primary .submenu.level-1 > li > a.active-branch {
  text-shadow: 1px 0 0 #374656;
}

body .custom-menu-primary .submenu.level-2 > li > a {
  color: #374656;
}
body .custom-menu-primary .submenu.level-2 {
  background-color: rgba(255, 255, 255, 1.0);
}

body .custom-menu-primary .submenu.level-2 .menu-item .menu-link:hover {
  background-color: rgba(255, 255, 255, 0.0);
  color: #374656;
}
body .custom-menu-primary .submenu.level-2 .menu-item .menu-link.active-branch {
  color: #374656;
  background-color: rgba(255, 255, 255, 0.0);
}







.footer {
  background-color: rgba(55, 70, 86, 1.0);
  color: #fff;
}

.footer__container {
  max-width: 1230px;
}
.footer__copyright ul li,
.footer-content ul li a{
  color: #fff;
}
.footer__copyright ul li:hover a,
.footer-content ul li a:hover{
  color: #fff;
}
.footer__copyright ul li:first-child{
  color: #fff;
}
.footer-content-inner h3,
.social__label {
  color: #fff;
}

.footer__btns li:first-child a,
.footer__btns li:first-child a:hover {
  border-color: rgba(253, 168, 12, 1.0);
  color: #fda80c;
}
.footer__btns li:nth-child(2) a,
.footer__btns li:nth-child(2) a:hover {
  border-color: rgba(255, 255, 255, 1.0);
  color: #fff;
}
.social-list li a{
  background-color: rgba(255, 255, 255, 1.0);
  color: #374656!important;
}





.content-wrapper {
  max-width: 1230px;
}

.blog-post__date {
  border-color: #536A81;
}

.blog-tag-filter__menu-link,
.blog-post__tag-link,
.blog-card__tag-link,
.blog-post__author-name,
.blog-card__title a {
  color: #536A81;
}

.blog-card__tag-link:hover,
.blog-card__title a:hover,
.blog-tag-filter__menu-link:hover,
.blog-post__tag-link:hover,
.blog-post__author-name:hover,
.blog-card__tag-link:focus,
.blog-card__title a:focus,
.blog-tag-filter__menu-link:focus,
.blog-post__tag-link:focus,
.blog-post__author-name:focus {
  color: #2b4259;
}

.blog-card__tag-link:active,
.blog-card__title a:active,
.blog-tag-filter__menu-link:active,
.blog-post__tag-link:active,
.blog-post__author-name:active {
  color: #7b92a9;
}

.blog-tag-filter__menu-link--active-item:after {
  background-color: #494a52;
}

.blog-pagination__link {
  color: #536A81;
}

.blog-pagination__link--active:after,
.blog-pagination__prev-link:after,
.blog-pagination__next-link:after {
  background-color: #494a52;
}

.blog-post__title {
  color: #536A81;
  font-family:'Gilroy', sans-serif;
  font-size: 50px;
  font-weight: ;
}

.blog-post__author {
  background-color: #F8FAFC;
}

#comments-listing .comment-reply-to {
  color: rgba(#null, 0.0);
}

#comments-listing .comment-reply-to:hover,
#comments-listing .comment-reply-to:focus {
  color: rgba(#null, 0.0);
}

#comments-listing .comment-reply-to:active {
  color: rgba(#null, 0.0);
}










body .icon svg {
  fill: #494a52;
}

body .tns-nav button.tns-nav-active {
  background-color: #494a52;
}

body .tns-nav button:hover,
body .tns-nav button:focus {
  background-color: #494a52;
}

body .social-links__icon {
  background-color: #494a52;
}

body .social-links__icon:hover svg,
body .social-links__icon:focus svg {
  fill: rgba(#null, 0.0);
}

body .social-links__icon:active svg {
  fill: rgba(#null, 0.0);
}

body .team-member__description {
  background-color: #F8FAFC;
}

.page-center {
  max-width: 1230px;
  margin: 0 auto;
}




.body-container__website .dnd-section:nth-child(odd) {
  background-color: {typography=, tables=, buttons=, spacing=, footer=, global_colors=, header=, forms=}
}





/* Flolive HubSpot form overrides — Figma 14871-8371 */

/* Layer order, declared up front so it does not depend on where the rules sit in the
   file. Important declarations resolve earliest-layer-first, so flolive-patch is
   declared first to keep it on top of anything layered that may appear later.
   Must stay above every rule below — only @charset and @import may precede it. */
@layer flolive-patch;

/* tokens — on :root because some pages render the heading outside the form wrapper */
:root {
  --fl-fg-default: #212133;
  --fl-fg-subtle: #657691;
  --fl-fg-muted: #8ca0b1;
  --fl-fg-danger: #dc3e42;
  --fl-border-default: #d1d6e0;
  --fl-border-strong: #8ca0b1;
  --fl-border-danger: #e5484d;
  --fl-bg-danger: #e5484d;
  --fl-bg-accent: #f69c00;
  --fl-bg-accent-muted: #d1d6e0;
  --fl-air-grey: #f4f5f9;
  --fl-space-blue: #161523;
  --fl-gradient: linear-gradient(90deg, #fda60c 0%, #ff5e54 100%);
  --fl-radius-full: 9999px;
  --fl-font: "Gilroy", sans-serif;
}

/* card */
.hs_cos_wrapper_type_form:has(.hs-custom-form) {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  background: #ffffff !important;
  border: 1px solid var(--fl-air-grey) !important;
  border-radius: 16px !important;
  padding: 32px 16px !important;
}

.hs_cos_wrapper_type_form:has(.hs-custom-form) .form-title {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--fl-font) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
  color: var(--fl-space-blue) !important;
  text-transform: none !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Some pages put the heading in a separate header module in the row directly above the
   form instead of the form module's own title field, so it never lands inside the card.
   Matched relationally — no page or module id involved. The better fix is still to move
   the text into the form module's title field, which puts it inside the card as designed. */
.dnd-row:has(+ .dnd-row .hs-custom-form) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--fl-font) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
  color: var(--fl-space-blue) !important;
  text-transform: none !important;
  text-align: left !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
}

/* Draws the card around the heading row and the form row together, since the heading
   lives outside the form wrapper here. Depends on the page's drag-and-drop layout
   rather than on the form, so it is the most brittle rule in this file — drop it as
   soon as the heading can be moved into the form module's title field.
   Anything else added to that column would end up inside the card. */
.dnd-column:has(> .dnd-row + .dnd-row .hs-custom-form) {
  height: fit-content !important;
  align-self: flex-start !important;
  background: #ffffff !important;
  border: 1px solid var(--fl-air-grey) !important;
  border-radius: 16px !important;
  padding: 32px 16px !important;
}

.dnd-column:has(> .dnd-row + .dnd-row .hs-custom-form) .hs_cos_wrapper_type_form {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.hs-custom-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--fl-font) !important;
}

/* field order — DOM is email, firstname, lastname, jobtitle, company, country, source.
   Fields not listed here keep order 20, so they land after the known ones
   and still stay above the consent block and the button */
.hs-custom-form > * { order: 20 !important; }
.hs-custom-form > .hs_firstname { order: 1 !important; }
.hs-custom-form > .hs_lastname  { order: 2 !important; }
.hs-custom-form > .hs_email     { order: 3 !important; }
.hs-custom-form > .hs_company   { order: 4 !important; }
.hs-custom-form > .hs_jobtitle  { order: 5 !important; }
.hs-custom-form > .hs_phone     { order: 6 !important; }
.hs-custom-form > .hs_hs_persona { order: 7 !important; }
.hs-custom-form > .hs_country   { order: 8 !important; }
/* selects are sometimes wrapped in .hs-dependent-field, so order by what is inside */
.hs-custom-form > .hs-dependent-field:has(.hs_country) { order: 8 !important; }
.hs-custom-form > .hs-dependent-field { order: 9 !important; }
.hs-custom-form > .hs_error_rollup    { order: 30 !important; }
.hs-custom-form > .legal-consent-container { order: 40 !important; }
.hs-custom-form > .hs_submit { order: 50 !important; }

/* field */
.hs-custom-form .hs-form-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.hs-custom-form > .hs-dependent-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.hs-custom-form .hs-form-field[style*="display: none"],
.hs-custom-form .hs-form-field[style*="display:none"] {
  display: none !important;
}

/* label */
.hs-custom-form .hs-form-field > label {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--fl-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  color: var(--fl-fg-subtle) !important;
  text-transform: none !important;
}

.hs-custom-form .hs-form-field > label > span {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.hs-custom-form .hs-form-field > label .hs-form-required {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  color: var(--fl-fg-danger) !important;
}

/* fallback label text — applies only while HubSpot renders the label span empty,
   so a real label configured in the form always wins */
.hs-custom-form .hs-form-field > label > span:empty::before {
  font-family: var(--fl-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  color: var(--fl-fg-subtle) !important;
  text-transform: none !important;
}

/* the asterisk is scoped to the fields that get an injected label, otherwise a field
   with no label text of its own would render a lone red star */
.hs-custom-form .hs-form-field:is(.hs_firstname, .hs_lastname, .hs_email, .hs_company,
  .hs_jobtitle, .hs_phone, .hs_hs_persona, .hs_country,
  .hs_how_did_you_hear_about_us_agile):has(.hs-input[required]) > label > span:empty::after {
  content: "*" !important;
  font-family: var(--fl-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  color: var(--fl-fg-danger) !important;
}

.hs-custom-form .hs_firstname > label > span:empty::before { content: "First name" !important; }
.hs-custom-form .hs_lastname  > label > span:empty::before { content: "Last name" !important; }
.hs-custom-form .hs_email     > label > span:empty::before { content: "Email" !important; }
.hs-custom-form .hs_company   > label > span:empty::before { content: "Company name" !important; }
.hs-custom-form .hs_jobtitle  > label > span:empty::before { content: "Job title" !important; }
.hs-custom-form .hs_phone     > label > span:empty::before { content: "Phone number" !important; }
.hs-custom-form .hs_hs_persona > label > span:empty::before { content: "Company type" !important; }
.hs-custom-form .hs_country   > label > span:empty::before { content: "Country" !important; }
.hs-custom-form .hs_how_did_you_hear_about_us_agile > label > span:empty::before { content: "How did you hear about us" !important; }

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

.hs-custom-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  background-color: #ffffff !important;
  border: 1px solid var(--fl-border-default) !important;
  border-radius: var(--fl-radius-full) !important;
  padding: 11px 16px !important;
  margin: 0 !important;
  font-family: var(--fl-font) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  color: var(--fl-fg-default) !important;
  text-transform: none !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.15s ease !important;
}

.hs-custom-form textarea.hs-input {
  border-radius: 24px !important;
  min-height: 96px !important;
  resize: vertical !important;
}

.hs-custom-form .hs-input::placeholder {
  color: var(--fl-fg-muted) !important;
  opacity: 1 !important;
  font-family: var(--fl-font) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  text-transform: none !important;
}

.hs-custom-form input.hs-input:hover,
.hs-custom-form input.hs-input:focus,
.hs-custom-form textarea.hs-input:hover,
.hs-custom-form textarea.hs-input:focus {
  border-color: var(--fl-border-strong) !important;
}

/* fallback placeholder text — self-disables once HubSpot placeholders are set
   to the Figma copy (the rules only match the current uppercase "LABEL*" ones) */
.hs-custom-form input.hs-input[placeholder$="*"]::placeholder {
  color: transparent !important;
}

.hs-custom-form .input:has(input.hs-input[placeholder$="*"]:placeholder-shown)::after {
  position: absolute !important;
  left: 17px !important;
  right: 17px !important;
  top: 12px !important;
  font-family: var(--fl-font) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 24px !important;
  color: var(--fl-fg-muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
}

.hs-custom-form .hs_firstname .input:has(input[placeholder$="*"]:placeholder-shown)::after { content: "Enter your first name" !important; }
.hs-custom-form .hs_lastname  .input:has(input[placeholder$="*"]:placeholder-shown)::after { content: "Enter your last name" !important; }
.hs-custom-form .hs_email     .input:has(input[placeholder$="*"]:placeholder-shown)::after { content: "Enter email address" !important; }
.hs-custom-form .hs_company   .input:has(input[placeholder$="*"]:placeholder-shown)::after { content: "Enter your company name" !important; }
.hs-custom-form .hs_jobtitle  .input:has(input[placeholder$="*"]:placeholder-shown)::after { content: "Enter your job title" !important; }
.hs-custom-form .hs_phone     .input:has(input[placeholder$="*"]:placeholder-shown)::after { content: "Enter your phone number" !important; }

/* select — native element stays for validation and submit, UI comes from .fl-select */
.hs-custom-form select.hs-input {
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23657691' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 20px center !important;
  background-size: 12px 7px !important;
  cursor: pointer !important;
}

.hs-custom-form select.hs-input.is-placeholder { color: var(--fl-fg-muted) !important; }

.hs-custom-form select.hs-input option {
  color: var(--fl-fg-default) !important;
  font-family: var(--fl-font) !important;
  font-size: 18px !important;
}

.hs-custom-form .input.fl-select-host > select.hs-input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.fl-select {
  position: relative !important;
  width: 100% !important;
}

.fl-select__trigger {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 11px 16px !important;
  margin: 0 !important;
  background-color: #ffffff !important;
  border: 1px solid var(--fl-border-default) !important;
  border-radius: var(--fl-radius-full) !important;
  font-family: var(--fl-font) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 24px !important;
  color: var(--fl-fg-default) !important;
  text-align: left !important;
  text-transform: none !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.15s ease !important;
}

.fl-select__trigger:hover,
.fl-select[data-open="true"] .fl-select__trigger {
  border-color: var(--fl-border-strong) !important;
}

.fl-select__value {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.fl-select__value[data-placeholder="true"] {
  color: var(--fl-fg-muted) !important;
}

.fl-select__chevron {
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23657691' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 7px !important;
}

.fl-select[data-open="true"] .fl-select__chevron {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 6L6 1L11 6' stroke='%23212133' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.fl-select__menu {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 30 !important;
  display: none !important;
  flex-direction: column !important;
  max-height: 274px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 4px !important;
  margin: 0 !important;
  background-color: #ffffff !important;
  border: 1px solid var(--fl-air-grey) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 4px -2px rgba(16, 16, 16, 0.06), 0 4px 12px -2px rgba(16, 16, 16, 0.08) !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--fl-bg-accent-muted) transparent !important;
}

.fl-select[data-open="true"] .fl-select__menu {
  display: flex !important;
}

.fl-select__menu::-webkit-scrollbar { width: 10px !important; }
.fl-select__menu::-webkit-scrollbar-track { background: transparent !important; }
.fl-select__menu::-webkit-scrollbar-thumb {
  background-color: var(--fl-bg-accent-muted) !important;
  border: 3px solid transparent !important;
  background-clip: content-box !important;
  border-radius: var(--fl-radius-full) !important;
}

.fl-select__option {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-family: var(--fl-font) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 24px !important;
  color: var(--fl-fg-default) !important;
  cursor: pointer !important;
}

.fl-select__option:hover {
  background-color: var(--fl-air-grey) !important;
}

.fl-select__option-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.fl-select__option[aria-selected="true"]::after {
  content: "" !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='11' viewBox='0 0 14.5 10.3333' fill='none'%3E%3Cpath d='M1 5.16667L5.16667 9.33333L13.5 1' stroke='%23f69c00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 11px !important;
}

/* error */
.hs-custom-form .hs-input.invalid:not([type="checkbox"]):not([type="radio"]),
.hs-custom-form .hs-input.error:not([type="checkbox"]):not([type="radio"]),
.hs-custom-form .input:has(select.hs-input.invalid) .fl-select__trigger,
.hs-custom-form .input:has(select.hs-input.error) .fl-select__trigger {
  border-color: var(--fl-border-danger) !important;
}

.hs-custom-form .hs-error-msgs {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.hs-custom-form .hs-error-msgs li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.hs-custom-form .hs-error-msg,
.hs-custom-form .hs-error-msgs label {
  display: block !important;
  font-family: var(--fl-font) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  color: var(--fl-fg-danger) !important;
  text-transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Neither is in the design: .hs_error_rollup is HubSpot's form-wide summary, which
   lands right under the last select, and the consent field carries its own message
   under the checkbox. Hidden rather than removed, so the checkbox error rule above
   can still detect them through :has(). */
.hs-custom-form .hs_error_rollup,
.hs-custom-form .legal-consent-container .hs-error-msgs {
  display: none !important;
}

/* consent */
.hs-custom-form .legal-consent-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hs-custom-form .legal-consent-container .hs-richtext {
  font-family: var(--fl-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  color: var(--fl-fg-subtle) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hs-custom-form .legal-consent-container .hs-richtext p {
  margin: 0 !important;
  font: inherit !important;
  color: inherit !important;
}

.hs-custom-form .legal-consent-container .hs-richtext a {
  color: inherit !important;
  font-weight: 300 !important;
  text-decoration: underline !important;
  text-underline-position: from-font !important;
}

/* checkbox */
.hs-custom-form .inputs-list,
.hs-custom-form .hs-form-booleancheckbox {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hs-custom-form .hs-form-booleancheckbox-display {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.hs-custom-form .hs-form-booleancheckbox-display > input[type="checkbox"] {
  box-sizing: border-box !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 0 !important;
  margin: 3px !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--fl-border-default) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.hs-custom-form .hs-form-booleancheckbox-display > input[type="checkbox"]:checked {
  background-color: var(--fl-bg-accent) !important;
  border-color: var(--fl-bg-accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1.4 4.3L3.8 6.7L8.6 1.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 8px 6.4px !important;
}

/* HubSpot never adds .invalid to the consent checkbox the way it does for the other
   fields — it only injects .hs-error-msgs into the container — so the error state is
   read from that instead.
   Scoped to the whole form on purpose: ticking the box clears its own error straight
   away, so "error + ticked" never exists at field level, while Figma (14857:203) shows
   the ticked box filled #e5484d in the error frame. Only field-level messages count —
   .hs_error_rollup stays in the DOM for good after the first failed submit, so matching
   any .hs-error-msgs would leave the box red even once every field is valid. Narrow this to
   `.hs-form-field:has(.hs-error-msgs)` to have a ticked box go back to accent as soon
   as it is valid, regardless of the rest of the form.
   Higher specificity than the :checked rule above, so the error fill replaces the
   accent fill; the tick image comes from :checked and survives. */
.hs-custom-form:has(.hs-form-field .hs-error-msgs) .hs-form-booleancheckbox-display > input[type="checkbox"]:checked,
.hs-custom-form .hs-form-booleancheckbox-display > input[type="checkbox"].invalid:checked,
.hs-custom-form .hs-form-booleancheckbox-display > input[type="checkbox"].error:checked {
  background-color: var(--fl-bg-danger) !important;
  border-color: var(--fl-border-danger) !important;
}

/* not in the design — Figma leaves an unticked box in its default grey. Kept for
   consistency with the other fields; delete these three lines for strict parity. */
.hs-custom-form .hs-form-field:has(.hs-error-msgs) .hs-form-booleancheckbox-display > input[type="checkbox"]:not(:checked) {
  border-color: var(--fl-border-danger) !important;
}

.hs-custom-form .hs-form-booleancheckbox-display > span {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-family: var(--fl-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  color: var(--fl-fg-subtle) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hs-custom-form .hs-form-booleancheckbox-display .hs-form-required { display: none !important; }

.hs-custom-form .hs-fieldtype-booleancheckbox > label,
.hs-custom-form .hs-fieldtype-booleancheckbox > label > span::before,
.hs-custom-form .hs-fieldtype-booleancheckbox > label > span::after {
  content: none !important;
  display: none !important;
}

/* submit */
.hs-custom-form .hs_submit,
.hs-custom-form .hs_submit .actions {
  margin: 0 !important;
  padding: 0 !important;
}

.hs-custom-form .hs_submit .actions { display: block !important; }

.hs-custom-form .hs-button.primary,
.hs-custom-form input[type="submit"].hs-button {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  background: var(--fl-gradient) !important;
  border: 0 !important;
  border-radius: var(--fl-radius-full) !important;
  font-family: var(--fl-font) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  text-align: center !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: filter 0.15s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.hs-custom-form .hs-button.primary:hover,
.hs-custom-form .hs-button.primary:focus {
  background: var(--fl-gradient) !important;
  filter: brightness(1.05) !important;
  color: #ffffff !important;
  border: 0 !important;
}

.hs-custom-form:has(.hs-input.invalid) .hs-button.primary,
.hs-custom-form .hs-button.primary:disabled,
.hs-custom-form .hs-button.primary.disabled,
.hs-custom-form .hs-button.primary[disabled] {
  background: var(--fl-bg-accent-muted) !important;
  color: var(--fl-fg-muted) !important;
  filter: none !important;
}

/* misc */
/* Chrome paints the autofill background outside background-color — that is why the
   field computes #fff and still looks grey — so it can only be covered with an inset
   shadow. The :not() pair is required: without it this rule is (0,3,0) and loses to
   the base rule's `box-shadow: none !important` at (0,4,0), and the grey stays.
   Prefixed and unprefixed forms are kept in separate rules on purpose — one unknown
   selector in a list makes a browser drop the whole rule. */
.hs-custom-form .hs-input:-webkit-autofill:not([type="checkbox"]):not([type="radio"]),
.hs-custom-form .hs-input:-webkit-autofill:hover:not([type="checkbox"]):not([type="radio"]),
.hs-custom-form .hs-input:-webkit-autofill:focus:not([type="checkbox"]):not([type="radio"]),
.hs-custom-form .hs-input:-webkit-autofill:active:not([type="checkbox"]):not([type="radio"]) {
  -webkit-text-fill-color: var(--fl-fg-default) !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  caret-color: var(--fl-fg-default) !important;
  font-size: 18px !important;
}

.hs-custom-form .hs-input:autofill:not([type="checkbox"]):not([type="radio"]) {
  -webkit-text-fill-color: var(--fl-fg-default) !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  caret-color: var(--fl-fg-default) !important;
  font-size: 18px !important;
}

.hs-custom-form .hs-field-desc,
.hs-custom-form legend.checkbox-desc {
  display: none !important;
}

/* Some pages carry legacy per-module CSS with #id selectors and !important that no
   class selector can outrank. An important declaration inside a cascade layer does
   outrank an unlayered one — layer order is compared before specificity — so the
   properties those rules clobber are restated here.
   Kept as a separate block on purpose: a browser without @layer support drops only
   this block, and everything above still applies. */
@layer flolive-patch {
  .dnd-row:has(+ .dnd-row .hs-custom-form) :is(h1, h2, h3, h4, h5, h6) {
    font-size: 24px !important;
    color: var(--fl-space-blue) !important;
  }

  .hs-custom-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
    padding: 11px 16px !important;
    margin: 0 !important;
    line-height: 24px !important;
  }

  .hs-custom-form select.hs-input {
    padding-right: 44px !important;
  }

  .hs-custom-form .hs-error-msg,
  .hs-custom-form .hs-error-msgs label,
  .hs-custom-form .hs_error_rollup .hs-error-msgs .hs-main-font-element {
    line-height: 16px !important;
  }

  .hs-custom-form .hs-button.primary,
  .hs-custom-form input[type="submit"].hs-button {
    padding: 0 16px !important;
    font-weight: 300 !important;
    text-align: center !important;
  }
}