/* Closing CTA: Blueprint to Bluelight.
   Section is transparent (main's light strip supplies the surface).
   The inner .cta-band__grid card keeps the dark Blueprint treatment. */

.cta-band {
  padding-block: clamp(4rem, 7vw, 5rem);
  background-color: transparent;
  position: relative;
}

.cta-band > .cta-band__bg { position: relative; z-index: 1; }

.cta-band__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 48rem;
}

.cta-band__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-display);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-foreground);
  /* Tailwind max-w-2xl (42rem) + text-wrap: balance so the browser
     evens out line widths instead of orphaning the last word. Same
     pattern as .stage-map__heading. */
  max-width: 42rem;
  text-wrap: balance;
  text-transform: capitalize;
}

/* Gradient-highlighted accent inside the heading. Matches
   .hero__title-accent so both sections read as one voice. */
.cta-band__heading-accent {
  background: linear-gradient(90deg, var(--brand-teal) 0%, var(--brand-blue) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.cta-band__deck {
  margin: 0.5rem 0 0;
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--color-muted-foreground);
  max-width: 56ch;
}

/* --- Dual-column split. Dark card stands out on the light strip. - */

.cta-band__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid color-mix(in oklch, var(--on-dark-foreground) 10%, transparent);
  border-radius: var(--radius-xl);
  background: var(--surface-dark-gradient);
  overflow: hidden;

  /* Children inside this dark card read the on-dark palette */
  --color-foreground: var(--on-dark-foreground);
  --color-muted-foreground: var(--on-dark-muted-foreground);
  --color-border: var(--on-dark-border);
  --color-accent: var(--on-dark-accent);
  --color-accent-foreground: var(--on-dark-accent-foreground);
  --color-primary: var(--on-dark-foreground);
  --color-primary-foreground: var(--surface-dark-999);
}

.cta-band__col {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-right: 1px solid var(--color-border);
}
.cta-band__col:last-child { border-right: 0; }

.cta-band__col-eyebrow {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-medium);
  color: var(--brand-teal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cta-band__col-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: var(--font-weight-display);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-foreground);
  /* Authors write column titles in sentence case; capitalize the
     first letter of each word at render time so the CTA band reads
     consistently across every page that uses it. */
  text-transform: capitalize;
}

.cta-band__list {
  list-style: none;
  margin: 0.25rem 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.cta-band__list-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--color-muted-foreground);
  line-height: var(--lh-snug);
}

.cta-band__list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--brand-teal);
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

.cta-band__col-cta { margin-top: auto; }
.cta-band__col-cta .btn { width: 100%; justify-content: center; }

@media (max-width: 720px) {
  .cta-band__grid { grid-template-columns: 1fr; }
  .cta-band__col {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .cta-band__col:last-child { border-bottom: 0; }
}