/* ============================================
   Contact Sales — Figma redesign (page-scoped)
   Figma: Xqx4i21RchdEoFIOa0RAgQ, node 4391:7498
   Loaded only on /contact-sales/ via is_page('contact-sales').
   Every rule is scoped to body.contact-sales-figma so it never
   leaks into the shared hero / connect-form / sponsor-logos blocks
   used by other pages.
   ============================================ */

body.contact-sales-figma {
  --cs-card-max: 628px;
  --cs-form-max: 530px;
  --cs-border: #e2e8f0;
  --cs-ink: #0a0a0a;
  --cs-muted: #737373;
  --cs-desc: #212121;
  --cs-required: #ff009c;
  --cs-dark: #151515;
}

/* ============================================
   Hero — full dark background, no wave
   The hero keeps its existing background image; we just let the
   image fill the whole section (the shared `negative-indent` style
   normally stops it ~23% from the bottom to make room for the wave)
   and hide the white wave so the band/logos sit flush beneath it.
   ============================================ */
body.contact-sales-figma .hero-section,
body.contact-sales-figma .hero-section .section-bg {
  background-color: #0a0a0a;
}

body.contact-sales-figma .hero-section .section-bg {
  bottom: 0 !important;
}

body.contact-sales-figma .hero-section .wave {
  display: none !important;
}

/* The shared hero `.wrap` shrinks to its content here, which left-aligns
   the card (most visible on mobile). Force it to a centered, full-width
   column capped at the card width. */
body.contact-sales-figma .hero-section .hero-holder {
  display: block;
  padding-bottom: 50px;
}

body.contact-sales-figma .hero-section .wrap {
  display: block;
  width: 100%;
  max-width: var(--cs-card-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

/* ============================================
   Form card
   ============================================ */
body.contact-sales-figma .connect-form {
  width: 100%;
  /* max-width: var(--cs-card-max); */
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-align: center;
}

/* Card header (heading + description) */
body.contact-sales-figma .connect-form .section-heading {
  margin-bottom: 24px;
}

body.contact-sales-figma .connect-form .section-heading h2 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: -2px;
  color: #000;
  text-align: center;
}

body.contact-sales-figma .connect-form .section-heading p {
  max-width: 520px;
  margin: 6px auto 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--cs-desc);
  text-align: center;
}

/* ============================================
   HubSpot form
   ============================================ */
body.contact-sales-figma .connect-form .hbspt-form {
  max-width: var(--cs-form-max);
  margin: 0 auto;
  text-align: left;
}

body.contact-sales-figma .hbspt-form form.hs-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Reset the shared block's field/fieldset margins so the flex gap
   above is the single source of vertical rhythm. */
body.contact-sales-figma .hbspt-form fieldset {
  margin: 0 !important;
}

body.contact-sales-figma .hbspt-form fieldset:not(:last-of-type) .hs-form-field {
  margin-bottom: 0 !important;
}

/* Collapse the hidden tracking fieldsets (GCLID, utm_*) so they don't
   add empty flex-gap rows between Country and Submit. */
body.contact-sales-figma .hbspt-form form fieldset:has(input[type="hidden"]) {
  display: none !important;
}

/* Labels */
body.contact-sales-figma .hbspt-form .hs-form-field > label {
  display: block;
  margin-bottom: 12px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--cs-ink);
}

body.contact-sales-figma .hbspt-form .hs-form-required {
  color: var(--cs-required);
}

/* Inputs + select */
body.contact-sales-figma .hbspt-form .hs-input:not([type="checkbox"]){
  width: 100% !important;
  height: 36px;
  padding: 4px 12px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--cs-ink);
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  outline: none;
}

body.contact-sales-figma .hs-form-booleancheckbox-display{
  margin-top: 20px;
  color: var(--cs-ink);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
  
body.contact-sales-figma .sponsor-logos-section .container{
  width: 100%;
  max-width: 100%;
  padding: 0 3% !important;
  border-top: 1px solid #404040;
}

body.contact-sales-figma .hbspt-form .hs-input::placeholder {
  color: var(--cs-muted);
}

body.contact-sales-figma .hbspt-form .hs-input:focus {
  border-color: #94a3b8;
}

body.contact-sales-figma .hbspt-form select.hs-input {
  height: 36px;
  -webkit-appearance: none;
  appearance: none;
}

body.contact-sales-figma .hbspt-form textarea.hs-input {
  height: auto;
}

/* First name / Last name share one row */
body.contact-sales-figma .hbspt-form fieldset.form-columns-2 {
  display: flex;
  gap: 20px;
}

body.contact-sales-figma .hbspt-form fieldset.form-columns-2 .hs-form-field {
  width: 50% !important;
  float: none !important;
  padding: 0 !important;
}

body.contact-sales-figma .hbspt-form fieldset.form-columns-2 .hs-form-field .input {
  margin: 0 !important;
}

/* Country sits at roughly half width on desktop (per Figma) */
@media (min-width: 601px) {
  body.contact-sales-figma .hbspt-form .hs-fieldtype-select .input {
    max-width: 277px;
  }
}

/* Submit — black pill, centered */
body.contact-sales-figma .hbspt-form .hs-submit {
  margin-top: 8px;
}

body.contact-sales-figma .hbspt-form .hs-submit .actions {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

body.contact-sales-figma .hbspt-form .hs-button {
  width: auto;
  min-width: 170px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 34px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  background: #000;
  border: 0;
  border-radius: 55px;
  box-shadow: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

body.contact-sales-figma .hbspt-form .hs-button:hover {
  color: #fff;
  background: #000;
  opacity: 0.85;
}

/* Privacy line below the form */
body.contact-sales-figma .connect-form .privacy-policy-form {
  display: block;
  margin-top: 16px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--cs-desc);
  text-align: center;
}

body.contact-sales-figma .connect-form .privacy-policy-form a {
  color: var(--cs-desc);
  text-decoration: underline;
}

/* ============================================
   "Trusted by leading companies worldwide" band
   Added above the existing logo strip. Rendered via CSS so the
   shared sponsor-logos block is not modified for other pages.
   ============================================ */
body.contact-sales-figma .sponsor-logos-section {
  position: relative;
}

body.contact-sales-figma main > p {
  display: block;
  padding: 28px 24px;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  background: var(--cs-dark);
  margin: 0!important;
}

/* Dark logo strip — mirrors the block's built-in dark-mode styling so the
   strip matches the dark "Trusted by…" band above it and the dark footer
   below. Scoped to the page so we don't toggle the global `.dark-mode`
   class (which would also darken the white form card). Dark logo variants
   come through the block's existing dark-mode-img swap. */
body.contact-sales-figma .sponsor-logos-section,
body.contact-sales-figma .sponsor-logos__wrapper,
body.contact-sales-figma .sponsor-logo-item {
  background-color: var(--cs-dark) !important;
  border-color: #404040 !important;
}


body.contact-sales-figma .sponsor-logos-section .light-mode-img {
  display: none !important;
}

body.contact-sales-figma .sponsor-logos-section .dark-mode-img {
  display: block !important;
  filter: none !important;
}

/* wpautop leaves an empty trailing <p> after the block content; drop it so
   the dark logo strip sits flush against the footer (no white sliver). */
body.contact-sales-figma .sponsor-logos-section ~ p {
  display: none;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 767px) {
  body.contact-sales-figma .connect-form {
    padding: 20px;
  }

  body.contact-sales-figma .connect-form .section-heading h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  body.contact-sales-figma .sponsor-logos-section::before {
    padding: 16px 20px;
    font-size: 18px;
    line-height: 28px;
  }
}

@media (max-width: 600px) {
  body.contact-sales-figma .hbspt-form fieldset.form-columns-2 {
    flex-direction: column;
    gap: 16px;
  }

  body.contact-sales-figma .hbspt-form fieldset.form-columns-2 .hs-form-field {
    width: 100% !important;
  }

  body.contact-sales-figma .hbspt-form .hs-fieldtype-select .input {
    max-width: none;
  }
}