/*
 * Site fixes that must win over the vendored Webflow stylesheet.
 * Loaded AFTER hurst.webflow.shared.*.css — order matters, these are
 * single-class selectors with the same specificity as the rules they override.
 *
 * Keep fixes here rather than editing the Webflow stylesheet, so that file stays
 * a clean vendored copy that can be re-downloaded.
 */

/* ---------------------------------------------------------------------------
 * Partner logo row — homepage "We're proud to work with some great vendors"
 *
 * The Webflow project defined the four-column layout for `.grid` ONLY inside
 * `@media screen and (min-width: 1440px)`. At any narrower width no `.grid` rule
 * existed at all, so it fell back to the `.w-layout-grid` default of
 * `grid-template-columns: 1fr 1fr` and rendered as an oversized 2x2 block.
 *
 * That is a pre-existing bug on the published Webflow site, faithfully carried
 * over by the port — not a regression. Fixed here at every width.
 *
 * `.grid` (bare, no modifier) is used exactly once in the whole site, on this
 * row, so overriding it cannot affect anything else. The grid-area names come
 * from Webflow's per-element rules:
 *   Area-2 = Microsoft, Area = Acronis, Area-3 = SentinelOne, Area-4 = Fortinet
 * ------------------------------------------------------------------------- */
.grid {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: 'Area-2 Area Area-3 Area-4';
  /* .w-layout-grid sets `auto auto`; with all four logos on one row that left an
     empty second track plus a 40px row gap of dead space underneath. */
  grid-template-rows: auto;
  /* Three of the four logos carry `align-self: center` from Webflow, but the
     Microsoft one does not, so it stretched out of line with the others. */
  align-items: center;
  margin-right: 0;
}

/* The logos range from 600px to 2270px wide with aspect ratios from 1.5 to 8.3,
   so they must scale down into their column and keep their proportions. */
.grid > img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
 * Turnstile widget row inside the contact form.
 *
 * .contact-form is a two-column grid (one column at <=991px). The widget is a
 * new child that Webflow knows nothing about, so it must be told to span the
 * full width rather than being auto-placed into a single column next to a field.
 * ------------------------------------------------------------------------- */
.turnstile-row {
  grid-column: 1 / -1;
  /* Reserve the managed widget's height so the Send button does not jump down
     when the challenge finishes rendering. */
  min-height: 65px;
}

/* Four across is unreadable on a phone — drop to a 2x2. */
@media screen and (max-width: 767px) {
  .grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'Area-2 Area'
      'Area-3 Area-4';
    grid-template-rows: auto auto;
    grid-column-gap: 24px;
    grid-row-gap: 32px;
  }
}