/* ==========================================================================
   IMPERVORA -- FLEXIBLE PAYMENT OPTIONS

   Gold usage follows the brand standard: #C6A667 is the systemic UI gold used
   for rules, accents and the button. #C8A35A is reserved for the brand name
   itself and is deliberately NOT used here -- the brand-gold filter treats the
   IMPERVORA mention in the reassurance line on its own.

   The fade-in is not defined here either. This section is a direct child of
   .entry-content, so the homepage reveal observer already fades it in and
   draws the gold rule under its h2.
   ========================================================================== */

.impervora-pay {
  background: #FFFFFF;
  /* 92px of closing space minus the CTA's 38px bottom margin: the gap below
     the button is what it always was, but the button's own margins are equal. */
  padding: 88px 24px 54px;
  text-align: center;
}

/* ---------- Type ---------- */

.impervora-pay__title {
  margin: 0 0 14px;
  color: #0E0E0E;
  font-size: 38px;
  font-weight: 300;
  letter-spacing: 4px;
}

.impervora-pay__subtitle {
  max-width: 620px;
  margin: 0 auto 52px;
  color: #4A4A4A;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
}

/* ---------- Logo strip ---------- */

.impervora-pay__methods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Each mark sits in an identical box so the logos read as one row regardless
   of how differently the source SVGs are proportioned. */
.impervora-pay__method {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 96px;
  height: 56px;
  padding: 0 16px;
  margin: 0;
  background: #FFFFFF;
  border: 1px solid rgba(14, 14, 14, 0.10);
  border-radius: 3px;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Equal height, natural width -- never distorted. */
.impervora-pay__logo {
  display: block;
  width: auto;
  height: 26px;
  max-width: 100%;
  object-fit: contain;
}

.impervora-pay__tag {
  color: #4A4A4A;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (hover: hover) {
  .impervora-pay__method:hover {
    transform: translateY(-4px);
    border-color: rgba(198, 166, 103, 0.75);
    box-shadow: 0 10px 26px rgba(14, 14, 14, 0.09);
  }
}

/* ---------- Trust badges ---------- */

.impervora-pay__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 44px;
  max-width: 900px;
  margin: 56px auto 0;
  padding: 30px 0 0;
  border-top: 1px solid rgba(198, 166, 103, 0.34);
  list-style: none;
}

.impervora-pay__badge {
  margin: 0;
  color: #0E0E0E;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.impervora-pay__check {
  margin-right: 9px;
  color: #C6A667;
  font-size: 15px;
  font-weight: 400;
}

/* ---------- Reassurance + call to action ---------- */

.impervora-pay__reassurance {
  max-width: 730px;
  margin: 42px auto 0;
  color: #4A4A4A;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}

/* Centred by its own flex container rather than by the section's inherited
   text-align, so the button cannot be knocked off axis by any future rule that
   sets text-align on the section's paragraphs.

   CRITICAL -- the full-width reset below is the actual centring fix, not the
   flexbox above. This element is a <p>, and the design system caps every
   homepage paragraph with `.home p { max-width: 68ch }` (impervora.css) as a
   reading-measure rule. Astra's reset then pins margin-left/right to 0, so the
   capped box hugged the LEFT edge of the section and justify-content merely
   centred the button inside that narrow left-aligned column -- 216px left of
   true centre at 1440px, 64px at 820px. The sibling
   .impervora-pay__reassurance never showed the bug only because it carries
   `margin: ... auto ...`.

   The selector is deliberately doubled up. `.home p` scores (0,1,1) and beats a
   bare `.impervora-pay__cta` at (0,1,0), so the single-class form silently lost
   the max-width battle; `.impervora-pay .impervora-pay__cta` scores (0,2,0) and
   wins. Do not simplify it back, and do not drop width/max-width/auto margins:
   the CTA is a button row, not body copy, and must span the full section so the
   button centres on the section axis rather than on a text column.

   The 38px margin is symmetric -- equal space above and below the button. Each
   breakpoint's bottom padding on .impervora-pay is reduced by the same 38px, so
   the band's overall height and its gap to the next section are unchanged. */
.impervora-pay .impervora-pay__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 38px auto;
  padding: 0;
  float: none;
}

/* Matches the homepage's existing button treatment: square-ish corners, ink on
   champagne gold, and a DARKEN on hover per the brand rule. */
.impervora-pay__button {
  display: inline-block;
  max-width: 100%;
  padding: 17px 36px;
  text-align: center;
  border-radius: 2px;
  background-color: #C6A667;
  color: #0E0E0E;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition:
    background-color 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.impervora-pay__button:hover,
.impervora-pay__button:focus {
  background-color: #B08F4E;
  color: #0E0E0E;
  text-decoration: none;
  transform: translateY(-2px);
}

.impervora-pay__button:focus-visible {
  outline: 2px solid #C6A667;
  outline-offset: 4px;
}

/* ---------- Tablet ---------- */

@media (max-width: 921px) {
  .impervora-pay {
    /* 72px minus the CTA's 38px bottom margin. */
    padding: 68px 20px 34px;
  }

  .impervora-pay__title {
    font-size: 31px;
    letter-spacing: 3px;
  }

  .impervora-pay__subtitle {
    margin-bottom: 40px;
    font-size: 16px;
  }

  .impervora-pay__badges {
    gap: 16px 32px;
    margin-top: 44px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 544px) {
  .impervora-pay {
    /* 58px minus the CTA's 38px bottom margin. */
    padding: 54px 18px 20px;
  }

  .impervora-pay__title {
    font-size: 26px;
    letter-spacing: 2px;
  }

  .impervora-pay__methods {
    gap: 12px;
  }

  .impervora-pay__method {
    min-width: 0;
    /* Two per row, accounting for the 12px gap. */
    flex: 0 1 calc(50% - 6px);
    height: 50px;
    padding: 0 10px;
  }

  .impervora-pay__logo {
    height: 22px;
  }

  /* Stacked so each badge reads as its own line rather than wrapping mid-phrase. */
  .impervora-pay__badges {
    flex-direction: column;
    gap: 14px;
    font-size: 12px;
  }

  .impervora-pay__reassurance {
    font-size: 15px;
  }

  /* Stays a content-width pill at mobile. It used to go display:block, which
     stretched it edge to edge; as a flex item that declaration no longer does
     anything anyway, because flex items size to their content on the main
     axis. Padding is the same 16px/24px it always was. */
  .impervora-pay__button {
    padding: 16px 24px;
  }
}

/* The section's own hover/transition motion respects the reduced-motion
   preference; the reveal itself is already handled by the motion layer. */
@media (prefers-reduced-motion: reduce) {
  .impervora-pay__method,
  .impervora-pay__button {
    transition: none;
  }

  .impervora-pay__method:hover,
  .impervora-pay__button:hover {
    transform: none;
  }
}