.section {
  background: #09090b;
  padding: var(--space-section-lg, 100px) 0;
  margin-bottom: 30px;
  margin-right: 24px;
  margin-left: 24px;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
}

/* Ambient depth: calm, near-static light (stable mood) instead of the more
   energetic red glow used on How It Works, plus a matching vignette. */
.section::before {
  content: "";
  position: absolute;
  top: -18%;
  left: 50%;
  width: 58%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(200, 16, 46, 0.05) 40%, rgba(0, 0, 0, 0) 68%);
  transform: translateX(-50%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  animation: infraGlowDrift 14s ease-in-out infinite alternate;
}

.section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  z-index: 0;
}

@keyframes infraGlowDrift {
  0% {
    transform: translateX(-52%) translateY(0);
    opacity: 0.7;
  }
  100% {
    transform: translateX(-48%) translateY(10px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section::before {
    animation: none;
  }
}

/*
 * Single page-alignment wrapper. Numbers verified against the Footer's real
 * rendered content container (elementor-element-e183a77) with Playwright at
 * 320-2560px: that row sits flush at a 20px gutter up to a 1420px cap, then
 * centers beyond it, dropping to a 10px gutter under ~1024px. max-width:1420
 * + padding:20px reproduces the same edge as a 20px-gutter + inner
 * max-width:1380px pair in one box (no nested max-width needed). Kept
 * byte-identical to WingsHowItWorks.module.css's .sectionShell.
 */
.sectionShell {
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 5vw;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .sectionShell {
    padding: 0 24px;
  }
}

.header {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 56px auto;
  text-align: center;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 16px;
}

.title {
  font-size: clamp(28px, 3.2vw, 46px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  color: #ffffff !important;
  margin: 0;
}

/* Capability row — editorial columns divided by hairline rules, matching
   How It Works' language but unnumbered (these aren't sequential steps). */
.grid {
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.card {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 30px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  transition: border-color 0.4s ease;
}

.card:first-child {
  padding-left: 0;
  border-left: none;
}

.icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 26px;
  transition: border-color 0.4s ease, color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}

.card:hover .icon {
  border-color: rgba(200, 16, 46, 0.55);
  color: #ffffff;
  background: rgba(200, 16, 46, 0.12);
  box-shadow: 0 0 18px rgba(200, 16, 46, 0.28);
}

.cardTitle {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.82) !important;
  margin: 0 0 10px 0;
  transition: color 0.4s ease;
}

.card:hover .cardTitle {
  color: #ffffff !important;
}

.cardDesc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  transition: color 0.4s ease;
}

.card:hover .cardDesc {
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 1024px) {
  .section {
    padding: var(--space-section, 64px) 0;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 28px;
  }

  .card {
    border-left: none;
    padding: 0;
  }

  .card:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    padding-top: 28px;
  }
}

@media (max-width: 600px) {
  /* var(--space-section) floors at a fixed 40px on any phone width (no
     further breakpoint-based step-down), and .sectionShell's horizontal
     padding otherwise stays fixed at 24px below 1024px — both read as
     inconsistent with the rhythm every other Wings section settles into on
     mobile. Normalized to match: 44px/44px vertical, and the shared
     --dm-mobile-gutter (10px) horizontal.

     .section's own margin-left/right also stays fixed at 24px below 1024px
     (set at the top of this file, for the card's inset from the viewport
     edge). Stacked with .sectionShell's padding that put the card's content
     34px from the screen edge on phones — noticeably narrower than the
     Footer's real 10px edge gutter (--dm-mobile-gutter, see globals.css's
     .dm-section-container). Moving the full 10px gutter onto .section's
     margin reproduces that same 10px screen-to-card edge, so the card sits
     flush with its neighbors. .sectionShell then gets its own small 10px
     breathing-room padding (independent of the outer gutter) so the eyebrow,
     heading, icons, card titles/descriptions, and dividers (which span
     .card's full width) aren't flush against the card's inner edge. */
  .section {
    padding-top: 44px;
    padding-bottom: 44px;
    margin-left: var(--dm-mobile-gutter, 10px);
    margin-right: var(--dm-mobile-gutter, 10px);
  }

  .sectionShell {
    padding-left: 10px;
    padding-right: 10px;
  }

  .grid {
    display: flex;
    flex-direction: column;
  }

  .card {
    padding: 28px 0;
  }

  .card:first-child {
    padding-top: 0;
  }

  .card:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }

  .card:last-child {
    padding-bottom: 0;
  }
}