/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-6xl: 72rem;
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-black: 900;
    --tracking-wide: 0.025em;
    --radius-lg: 0.5rem;
    --radius-2xl: 1rem;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    /* Fallbacks are geometric/neutral grotesques rather than a bare
       sans-serif, so a font that fails to load degrades to something with
       similar proportions instead of Times or the system UI face. */
    --font-gotham: "Gotham", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-metropolis: "Metropolis", "Gotham", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --color-red: #D22730;
    --color-dark: #222529;
    --color-grey-light: #F6F5F5;
    --color-grey-dark: #EAEAEA;

    /* ---------- Button tokens ----------
       Every button on the page (subnav, CTA pair, footer CTA, hero form
       submit) had its own padding, weight and radius, and two of them
       pinned a fixed 52px height. Those heights clipped the label as soon
       as the font or copy changed, so the height is now a result of the
       padding rather than a fixed value: 16 + (16 x 1.25) + 16 = 52px,
       matching the design without hard-coding it.

       These are the single source of truth — change them here and every
       button follows. Values below are the Figma spec: medium weight,
       32px left/right, 16px top/bottom. */
    --btn-padding-block: 1rem;      /* 16px */
    --btn-padding-inline: 2rem;     /* 32px */
    --btn-font-size: 1rem;
    --btn-font-weight: 500;         /* medium */
    --btn-line-height: 1.25;
    --btn-radius: 999px;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .absolute {
    position: absolute;
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-full {
    height: 100%;
  }
  .w-38 {
    width: calc(var(--spacing) * 38);
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-360 {
    max-width: calc(var(--spacing) * 360);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-evenly {
    justify-content: space-evenly;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-11 {
    gap: calc(var(--spacing) * 11);
  }
  .bg-black\/50 {
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .bg-grey-dark {
    background-color: var(--color-grey-dark);
  }
  .bg-grey-light {
    background-color: var(--color-grey-light);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .text-center {
    text-align: center;
  }
  .text-white {
    color: var(--color-white);
  }
  .max-md\:order-1 {
    @media (width < 48rem) {
      order: 1;
    }
  }
  .max-md\:order-2 {
    @media (width < 48rem) {
      order: 2;
    }
  }
  .max-md\:order-3 {
    @media (width < 48rem) {
      order: 3;
    }
  }
  /* .max-md\:hidden {
    @media (width < 48rem) {
      display: none !important;
    }
  } */
   
  .max-md\:flex-col {
    @media (width < 48rem) {
      flex-direction: column;
    }
  }
  .max-md\:flex-col-reverse {
    @media (width < 48rem) {
      flex-direction: column-reverse;
    }
  }
  .max-sm\:w-full {
    @media (width < 40rem) {
      width: 100%;
    }
  }
  .max-sm\:justify-between {
    @media (width < 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:mt-8 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 8);
    }
  }
  .sm\:mb-12 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 12);
    }
  }
  .sm\:mb-16 {
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing) * 16);
    }
  }
  .sm\:gap-8 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .sm\:gap-16 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .sm\:py-8 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .sm\:py-16 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .sm\:pt-16 {
    @media (width >= 40rem) {
      padding-top: calc(var(--spacing) * 16);
    }
  }
  .sm\:pb-20 {
    @media (width >= 40rem) {
      padding-bottom: calc(var(--spacing) * 20);
    }
  }
  .md\:mt-8 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 8);
    }
  }
  .md\:mb-12 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 12);
    }
  }
  .md\:mb-16 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 16);
    }
  }
  .md\:ml-auto {
    @media (width >= 48rem) {
      margin-left: auto;
    }
  }
  .md\:w-1\/2 {
    @media (width >= 48rem) {
      width: calc(1/2 * 100%);
    }
  }
  .md\:w-1\/3 {
    @media (width >= 48rem) {
      width: calc(1/3 * 100%);
    }
  }
  .md\:max-w-lg {
    @media (width >= 48rem) {
      max-width: var(--container-lg);
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:items-start {
    @media (width >= 48rem) {
      align-items: flex-start;
    }
  }
  .md\:gap-8 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .md\:py-24 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .lg\:mb-20 {
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 20);
    }
  }
  .lg\:mb-32 {
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 32);
    }
  }
  .lg\:w-1\/2 {
    @media (width >= 64rem) {
      width: calc(1/2 * 100%);
    }
  }
  .lg\:w-1\/4 {
    @media (width >= 64rem) {
      width: calc(1/4 * 100%);
    }
  }
  .lg\:gap-16 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .lg\:py-24 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .lg\:py-32 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 32);
    }
  }
  .lg\:pt-28 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 28);
    }
  }
  .lg\:pb-32 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 32);
    }
  }
  .xl\:max-w-xl {
    @media (width >= 80rem) {
      max-width: var(--container-xl);
    }
  }
  .\32 xl\:max-w-2xl {
    @media (width >= 96rem) {
      max-width: var(--container-2xl);
    }
  }
}
@layer utilities {
  .container {
    position: relative;
    margin-inline: auto;
    max-width: var(--container-6xl);
    padding-inline: calc(var(--spacing) * 4);
  }
}
@layer components {
  /* ------------------------------------------------------------------
     Brand fonts — served from the HubSpot file manager (portal 4476870).

     Previously these pointed at the Marketo domain (pages.biamp.com) and
     two things were wrong:

     1. The Metropolis src used format('otf'), which is not a valid CSS
        format keyword — it is 'opentype'. A browser that cannot parse
        the format hint discards that whole src entry, so Metropolis
        never loaded and every h1-h3 rendered in the fallback face.
     2. The old host's CORS behaviour was unverified. Fonts are
        CORS-restricted, so a font can be fetched and then rejected.
        The hubspotusercontent CDN returns Access-Control-Allow-Origin: *
        (verified against these URLs), so that risk is gone.

     Note the family is Gotham, not Gotham SSm ("Screen Smart") as the
     old declarations claimed — the portal holds standard Gotham, which
     is a different cut with tighter spacing and a shorter x-height.

     These are .otf, the only format uploaded. That works everywhere via
     format('opentype') but is uncompressed: the four Gotham weights are
     ~615KB combined, against roughly 160KB as woff2. Converting Gotham
     to woff2 is the single biggest performance win available on this
     page — swap the url() and format() here if that gets done.

     Only the four weights the page actually uses are declared. Gotham
     has no italics in the portal, so italic text is synthesised by the
     browser rather than pointing at files that do not exist.
     ------------------------------------------------------------------ */
  @font-face {
    font-family: 'Metropolis';
    src: url('https://4476870.fs1.hubspotusercontent-na1.net/hubfs/4476870/Metropolis-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Gotham';
    src: url('https://4476870.fs1.hubspotusercontent-na1.net/hubfs/4476870/Gotham-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Gotham';
    src: url('https://4476870.fs1.hubspotusercontent-na1.net/hubfs/4476870/Gotham-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Gotham';
    src: url('https://4476870.fs1.hubspotusercontent-na1.net/hubfs/4476870/Gotham-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Gotham';
    src: url('https://4476870.fs1.hubspotusercontent-na1.net/hubfs/4476870/Gotham-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    font-family: var(--font-gotham);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: 1.5;
    line-height: 1.5;
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
    color: var(--color-black);
  }
  h1, h2, h3, h4, h5, h6, p, ul, ol {
    margin-block: calc(var(--spacing) * 4);
  }
  section {
    position: relative;
  }
  h1, h2, h3 {
    font-family: var(--font-metropolis) !important;
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black) !important;
    --tw-tracking: calc(var(--tracking-wide) * -1);
    letter-spacing: calc(var(--tracking-wide) * -1);
    text-transform: uppercase !important;
  }
  h1 {
    font-size: 40px !important;
    @media (width >= 40rem) {
      font-size: 48px !important;
    }
    @media (width >= 64rem) {
      font-size: 56px !important;
    }
  }
  h2 {
    font-size: 32px !important;
    @media (width >= 40rem) {
      font-size: 36px !important;
    }
    @media (width >= 64rem) {
      font-size: 40px !important;
    }
  }
  h3 {
    font-size: 24px !important;
    @media (width >= 40rem) {
      font-size: 28px !important;
    }
    @media (width >= 64rem) {
      font-size: 34px !important;
    }
  }
  h4 {
    font-size: 20px;
    --tw-leading: 1.5;
    line-height: 1.5;
    @media (width >= 40rem) {
      font-size: 24px;
    }
    @media (width >= 64rem) {
      font-size: 28px;
    }
  }
  h5, h6 {
    font-size: 18px;
    --tw-leading: 1.4;
    line-height: 1.4;
    @media (width >= 48rem) {
      font-size: 20px;
    }
  }
  h5 {
    color: var(--color-red);
  }
  #banner-text h5 {
    color: var(--color-white);
  }
  h6 {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  a {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    &:hover {
      @media (hover: hover) {
        color: var(--color-red);
      }
    }
  }
  .no-outerspace * {
    &:first-child {
      margin-top: calc(var(--spacing) * 0);
    }
    &:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .button {
    display: inline-block;
    border: none !important;
    /* Was a 0.5rem radius and a lighter weight, which made the stock theme
       button the odd one out next to the pill CTAs. Now on the shared
       tokens like every other button. */
    border-radius: var(--btn-radius) !important;
    background-color: var(--color-red) !important;
    padding-inline: var(--btn-padding-inline) !important;
    padding-block: var(--btn-padding-block) !important;
    --tw-leading: var(--btn-line-height);
    line-height: var(--btn-line-height);
    --tw-font-weight: var(--btn-font-weight);
    font-weight: var(--btn-font-weight) !important;
    color: var(--color-white) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to !important;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
    --tw-duration: 300ms; !important
    transition-duration: 300ms !important;
    --tw-ease: var(--ease-in-out) !important;
    transition-timing-function: var(--ease-in-out) !important;
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-dark) !important;
      }
    }
  }
  #banner-bg img {
    position: absolute;
    top: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    z-index: 10;
    height: 100% !important;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  .nav a {
    display: block;
    padding-block: calc(var(--spacing) * 4);
    text-decoration: none !important;
    --tw-font-weight: var(--font-weight-normal) !important;
    font-weight: var(--font-weight-normal) !important;
    color: var(--color-black) !important;
      &:hover {
        @media (hover: hover) {
          color: var(--color-red) !important;
        }
      }
  }
  .benefit-image img {
    border-radius: var(--radius-2xl);
    object-fit: cover;
    object-position: center;
    @media (width < 48rem) {
      aspect-ratio: 4/3;
    }
    @media (width >= 48rem) {
      height: 500px !important;
    }
    @media (width >= 48rem) {
      width: 100%;
    }
  }
  #logos-imgs img {
    height: calc(var(--spacing) * 12) !important;
    max-width: calc(var(--spacing) * 20) !important;
    object-fit: contain;
    object-position: center;
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    &:hover {
      @media (hover: hover) {
        --tw-grayscale: grayscale(0%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
      }
    }
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 20) !important;
    }
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 30) !important;
    }
  }
  .video {
    aspect-ratio: var(--aspect-video);
    overflow: hidden;
    border-radius: var(--radius-2xl);
  }
  .video iframe {
    height: 100%;
    width: 100%;
  }
  .resource-links {
    display: block;
    max-height: calc(var(--spacing) * 80);
    max-width: calc(var(--spacing) * 48);
  }
  .resource-links img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  .testimonial .video {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .testimonial-text * {
    margin: calc(var(--spacing) * 0) !important;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@media (max-width: 48rem) {
  .subnav-button {
    display: none !important;
  }
}

.hsfc-NavigationRow {
  margin-top: 0 !important;
}