/* Shared Alpha home-page color combination — applied site-wide */
:root {
  --navy: #0b2a4a;
  --navy-deep: #071f38;
  --navy-mid: #123a62;
  --green: #1a7a4c;
  --green-dark: #14603c;
  --green-soft: #e8f5ee;
  --green-glow: rgba(26, 122, 76, 0.35);
  --green-bright: #1f8f58;
  --ink: #1a2332;
  --muted: #5a6a7a;
  --line: #e2e8f0;
  --bg: #f4f7fb;
  --bg-soft: #eef2f6;
  --white: #ffffff;
  --shadow: 0 12px 32px rgba(11, 42, 74, 0.08);
  --shadow-lg: 0 24px 64px rgba(11, 42, 74, 0.12);
  --radius: 10px;
  --font: "Manrope", system-ui, sans-serif;
  --display: "Outfit", "Manrope", system-ui, sans-serif;
  --container: 1180px;
  --nav-h: 78px;

  /* Legacy accents → home green palette */
  --trust-navy: #0b2a4a;
  --trust-green: #1a7a4c;
  --gold: #1a7a4c;
  --gold-bright: #1f8f58;
  --gold-soft: #e8f5ee;
  --gold-light: #1f8f58;
  --gold-dark: #14603c;
  --yellow: #1a7a4c;
  --yellow-dark: #14603c;
}

/* Shared CTA variants that used gold/yellow */
.btn--gold,
.btn--primary.btn--gold {
  background: var(--green) !important;
  color: var(--white) !important;
}

.btn--gold:hover,
.btn--primary.btn--gold:hover {
  background: var(--green-dark) !important;
  color: var(--white) !important;
}

/* Icon perk bars (why-bar etc.): keep a single row */
.why-bar__grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
}

.why-bar__item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Five-up benefits: always one row on desktop/tablet */
.benefits-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (max-width: 640px) {
  .benefits-grid--five {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .benefits-grid--five > :nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 16rem);
  }
}