/* ==========================================================================
   PROTEUS420 /benefits-v2 — dark theme alternate
   Extends services.css + services-v2.css via .svc-page--nav.ben-page
   ========================================================================== */

.ben-page .ben-hero .svc-hero__lede {
  display: block !important;
  max-width: 36ch !important;
  margin-bottom: 14px !important;
  color: var(--svc-v2-tan) !important;
  font-size: 1.25rem !important;
}

.ben-page .ben-hero .svc-hero__sub {
  display: block !important;
  max-width: 48ch !important;
  margin-bottom: 28px !important;
  color: var(--svc-v2-muted) !important;
}

/* Overview */
.ben-overview {
  padding: clamp(56px, 7vw, 88px) 0;
  background: var(--svc-v2-bg-deep);
  text-align: center;
}

.ben-overview__inner {
  max-width: 760px;
}

.ben-page .ben-overview .svc-eyebrow {
  color: var(--svc-v2-lime) !important;
  margin-bottom: 14px !important;
}

.ben-page .ben-overview h2 {
  margin: 0 auto 18px !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  text-transform: none !important;
  max-width: 18ch;
}

.ben-page .ben-overview h2 .svc-accent {
  color: var(--svc-v2-lime) !important;
}

.ben-page .ben-overview p {
  margin: 0 auto !important;
  max-width: 54ch;
  color: var(--svc-v2-muted) !important;
  font-size: 1.1rem !important;
  line-height: 1.55 !important;
}

/* Benefit sections */
.ben-section {
  padding: clamp(56px, 7vw, 88px) 0;
  background: var(--svc-v2-bg);
}

.ben-section--alt {
  background: var(--svc-v2-bg-deep);
}

.ben-section__head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 32px;
  max-width: 720px;
}

.ben-section__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(197, 223, 54, 0.12);
  border: 1px solid rgba(197, 223, 54, 0.35);
  color: var(--svc-v2-lime);
  font-size: 1.2rem;
}

.ben-page .ben-section__head .svc-eyebrow {
  color: var(--svc-v2-lime) !important;
  margin-bottom: 8px !important;
}

.ben-page .ben-section__head h2 {
  margin: 0 !important;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem) !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  text-transform: none !important;
}

.ben-grid {
  display: grid;
  gap: 16px 18px;
}

.ben-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ben-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  background: var(--svc-v2-panel);
  border: 1px solid var(--svc-v2-line);
  border-radius: 10px;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.ben-card:hover {
  background: #22221e;
  border-color: rgba(197, 223, 54, 0.35);
  transform: translateY(-2px);
}

.ben-page .ben-card h3 {
  margin: 0 0 10px !important;
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  color: var(--svc-v2-tan) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

.ben-page .ben-card p {
  margin: 0 !important;
  color: var(--svc-v2-muted) !important;
  font-size: 1rem !important;
  line-height: 1.45 !important;
}

/* CTA inherits svc-connect; keep aside points readable */
.ben-page .ben-connect .svc-connect__points {
  margin-bottom: 0;
}

@media (max-width: 1199px) {
  .ben-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ben-section__head {
    gap: 14px;
  }

  .ben-section__icon {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
  }

  .ben-grid--4 {
    grid-template-columns: 1fr;
  }
}