/**
 * Story framework component styles.
 * Palette: corporate blue, deep navy, white, cool gray, charcoal.
 */

:root {
  --mmp-navy: #0b1d39;
  --mmp-navy-deep: #06152d;
  --mmp-blue: #123f8c;
  --mmp-blue-bright: #1c65d8;
  --mmp-gray-cool: #64748b;
  --mmp-charcoal: #111827;
  --mmp-white: #ffffff;
  --mmp-surface: #f8fafc;
  --mmp-border: #dce4ef;
}

.mmp-story {
  color: var(--mmp-charcoal);
  background: var(--mmp-white);
}

.mmp-story-section {
  position: relative;
}

.mmp-story-section:nth-child(even) {
  background: var(--mmp-surface);
}

.mmp-story-eyebrow {
  color: var(--mmp-blue);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  margin-bottom: 0.75rem;
}

.mmp-story-hero__title,
.mmp-story-section__title,
.mmp-story-final-cta__title {
  color: var(--mmp-navy);
  font-weight: 700;
  line-height: 1.15;
}

.mmp-story-hero__sub,
.mmp-story-final-cta .lead {
  color: var(--mmp-gray-cool);
}

.mmp-story-card,
.mmp-story-plan-step,
.mmp-story-lead-card {
  border: 1px solid var(--mmp-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(11, 29, 57, 0.06);
}

.mmp-story-problem-card {
  background: var(--mmp-white);
  border: 1px solid var(--mmp-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  height: 100%;
}

.mmp-story-stakes {
  background: var(--mmp-navy-deep);
  color: var(--mmp-white);
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
}

.mmp-story-stakes__list {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.mmp-story-plan-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--mmp-blue);
  color: var(--mmp-white);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.mmp-story-final-cta {
  background: linear-gradient(135deg, var(--mmp-navy) 0%, var(--mmp-blue) 100%);
  color: var(--mmp-white);
  border-radius: 1rem;
}

.mmp-story-final-cta__title,
.mmp-story-final-cta .lead,
.mmp-story-risk-reducer {
  color: var(--mmp-white);
}

.mmp-story-final-cta .btn-outline-primary {
  border-color: var(--mmp-white);
  color: var(--mmp-white);
}

.mmp-story-final-cta .btn-outline-primary:hover {
  background: var(--mmp-white);
  color: var(--mmp-navy);
}

.mmp-story-quote {
  border-left: 4px solid var(--mmp-blue);
}

.mmp-story-metric__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--mmp-blue);
  margin-bottom: 0.25rem;
}

.mmp-story-proof-badge .badge {
  background: var(--mmp-blue) !important;
}

.mmp-story .btn-primary {
  background-color: var(--mmp-blue-bright);
  border-color: var(--mmp-blue-bright);
}

.mmp-story .btn-primary:hover {
  background-color: var(--mmp-blue);
  border-color: var(--mmp-blue);
}

.mmp-story .btn-outline-primary {
  color: var(--mmp-blue);
  border-color: var(--mmp-blue);
}

.mmp-story-faq .accordion-button:not(.collapsed) {
  background: #e6f0ff;
  color: var(--mmp-navy);
}

@media (max-width: 375px) {
  .mmp-story-hero__title {
    font-size: 1.75rem;
  }
  .mmp-story .d-flex.gap-3 {
    flex-direction: column;
    align-items: stretch;
  }
  .mmp-story .btn {
    width: 100%;
    text-align: center;
  }
}