/**
 * StreamVerse — Contact Options (Email / WhatsApp cards)
 *
 * Card surface reuses the exact language `.pricing-card` already
 * established: solid --color-bg-elevated, 1px --color-border-subtle,
 * --radius-lg, the same border/shadow hover transition — no new card
 * style. The icon badge reuses `.guarantee-banner__icon-wrap`'s own
 * treatment verbatim: a 48px circle in --color-bg-elevated-hover with
 * a subtle --color-accent-glow drop-shadow, --color-accent glyph.
 *
 * Two cards only, centered in a narrower column than the site's full
 * --grid-max-width (matches the same narrower-column approach already
 * used for the FAQ accordion) — two contact options don't need the
 * full 1280px grid to read as balanced.
 */

.contact-options {
  /* Top tightened to 32px total (paired with .contact-hero's
     padding-bottom: 0) to match the Pricing page's own compact
     title-to-cards gap — bottom is left untouched at --space-8 so the
     gap before the Support note below is unaffected. */
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}

.contact-options__inner {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .contact-options__inner {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .contact-options__inner {
    padding-inline: var(--space-7);
  }
}

.contact-options__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .contact-options__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-5);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--duration-micro) var(--ease-standard),
    box-shadow var(--duration-micro) var(--ease-standard);
}

.contact-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card-hover);
}

.contact-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-elevated-hover);
  border: 1px solid var(--color-border-subtle);
  filter: drop-shadow(0 0 8px var(--color-accent-glow));
  flex-shrink: 0;
}

.contact-card__icon {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
}

.contact-card__title {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  line-height: var(--text-h4-line-height);
  font-weight: 600;
  color: var(--color-text-primary);
}

.contact-card__description {
  margin-top: var(--space-1);
  max-width: 32ch;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm-line-height);
  color: #A3AED0;
  /* Absorbs whatever extra height the grid's default row-stretch gives
     this card over its sibling (e.g. one language's copy running
     longer than the other's) — pushes the button down to a matching
     position in both cards without a fixed height anywhere. On mobile
     (single-column, each card sized to its own content) there's no
     extra space to absorb, so this is a no-op there and the button's
     own margin-top below still provides the normal gap. */
  flex-grow: 1;
}

.contact-card__button {
  margin-top: var(--space-5);
}

/* Full-width, easy-to-tap buttons on mobile — matches the same
   convention `.trial-hero__cta` already uses at this breakpoint. */
@media (max-width: 767.98px) {
  .contact-card__button {
    width: 100%;
    justify-content: center;
  }
}