/* Story page styles */
.story-hero {
  background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-cream-dark) 100%);
  padding: var(--space-4xl) 0;
}
.story-hero .container { max-width: 900px; }
.story-hero__eyebrow { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 2px; color: var(--color-teal); font-weight: 600; margin-bottom: var(--space-md); }
.story-hero__title { font-size: 2.75rem; margin-bottom: var(--space-lg); line-height: 1.2; }
.story-hero__subtitle { font-size: 1.25rem; color: var(--color-gray-600); max-width: 600px; }
.story-hero__meta { display: flex; align-items: center; gap: var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-gray-200); }
.story-hero__avatar { width: 80px; height: 80px; border-radius: var(--radius-full); background: var(--color-teal); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2rem; font-weight: 600; }
.story-hero__author-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--color-navy); margin: 0; }
.story-hero__author-context { color: var(--color-gray-600); margin: var(--space-xs) 0 0; }
.story-hero__topics { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.topic-tag { display: inline-block; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: var(--color-teal-light); color: var(--color-teal-dark); }
.story-content { padding: var(--space-4xl) 0; }
.story-content .container { max-width: 720px; }
.story-content h2 { font-size: 1.75rem; margin-top: var(--space-3xl); margin-bottom: var(--space-lg); }
.pull-quote { background: var(--color-cream); border-left: 4px solid var(--color-teal); padding: var(--space-xl) var(--space-2xl); margin: var(--space-2xl) calc(-1 * var(--space-lg)); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.pull-quote p { font-family: var(--font-display); font-size: 1.5rem; font-style: italic; color: var(--color-navy); line-height: 1.5; margin: 0; }
.transformation-box { background: var(--color-teal); color: var(--color-white); padding: var(--space-2xl); border-radius: var(--radius-lg); margin: var(--space-2xl) 0; }
.transformation-box__title { color: var(--color-white); font-size: 1.25rem; margin-bottom: var(--space-lg); text-align: center; }
.transformation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
.transformation-item { text-align: center; }
.transformation-item__number { font-family: var(--font-display); font-size: 2rem; font-weight: 700; display: block; }
.transformation-item__label { font-size: 0.875rem; opacity: 0.9; }
.highlight-box { background: var(--color-terracotta-light); border-left: 4px solid var(--color-terracotta); padding: var(--space-xl); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: var(--space-2xl) 0; }
.highlight-box__title { font-size: 1.125rem; color: var(--color-terracotta); margin-bottom: var(--space-md); }
.highlight-box p { color: var(--color-gray-600); margin: 0; }
.key-takeaways { background: var(--color-cream); padding: var(--space-xl); border-radius: var(--radius-md); margin: var(--space-2xl) 0; }
.key-takeaways__title { font-size: 1.125rem; color: var(--color-navy); margin-bottom: var(--space-md); }
.key-takeaways ul { margin: 0; padding-left: var(--space-lg); }
.key-takeaways li { color: var(--color-gray-600); margin-bottom: var(--space-sm); }
.story-cta { background: var(--color-cream); padding: var(--space-3xl) 0; text-align: center; }
.story-cta .container { max-width: 600px; }
.story-cta h2 { margin-top: 0; }
.story-cta p { color: var(--color-gray-600); margin-bottom: var(--space-xl); }
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.related-stories { padding: var(--space-3xl) 0; }
.related-stories h2 { text-align: center; margin-bottom: var(--space-2xl); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.related-card { background: var(--color-white); border-radius: var(--radius-md); padding: var(--space-xl); box-shadow: var(--shadow-sm); transition: all 0.2s ease; }
.related-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.related-card__name { font-size: 1.125rem; margin-bottom: var(--space-sm); }
.related-card__topic { font-size: 0.8125rem; color: var(--color-teal); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-md); }
.related-card__quote { font-family: var(--font-display); font-style: italic; color: var(--color-navy); line-height: 1.5; margin-bottom: var(--space-md); }
.related-card__link { font-size: 0.875rem; font-weight: 600; }
.back-link { text-align: center; padding: var(--space-xl) 0 var(--space-3xl); }

/* What tried list (Amy's story) */
.what-tried { background: var(--color-cream); padding: var(--space-xl); border-radius: var(--radius-md); margin: var(--space-2xl) 0; }
.what-tried__title { font-weight: 600; color: var(--color-navy); margin-bottom: var(--space-md); }
.what-tried__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.what-tried__item { background: var(--color-white); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--color-gray-600); text-align: center; }

/* Amy's letter */
.amys-letter { background: var(--color-cream); padding: var(--space-2xl); border-radius: var(--radius-md); margin: var(--space-2xl) 0; }
.amys-letter__salutation { font-weight: 600; color: var(--color-navy); margin-bottom: var(--space-lg); }
.amys-letter__signature { margin-top: var(--space-xl); font-weight: 600; color: var(--color-navy); }

/* Symptoms box (Carolyn's story) */
.symptoms-box { background: var(--color-cream); padding: var(--space-xl); border-radius: var(--radius-md); margin: var(--space-2xl) 0; }
.symptoms-box__title { font-weight: 600; color: var(--color-navy); margin-bottom: var(--space-md); }
.symptoms-box ul { margin: 0; padding-left: var(--space-lg); }
.symptoms-box li { color: var(--color-gray-600); margin-bottom: var(--space-xs); }

/* Result box (generic) */
.result-box { background: var(--color-teal-light); padding: var(--space-xl); border-radius: var(--radius-md); margin: var(--space-2xl) 0; text-align: center; }
.result-box__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); }
.result-box__item { text-align: center; }
.result-box__label { font-size: 0.875rem; color: var(--color-teal-dark); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-sm); }
.result-box__number { font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--color-teal); display: block; }
.result-box__context { font-size: 0.875rem; color: var(--color-gray-600); margin-top: var(--space-sm); }
.result-box__result { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--color-teal-dark); margin: 0; }
.result-box__text { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--color-navy); margin: 0; }
.result-box p { color: var(--color-navy); font-style: italic; }

/* Challenges box (Jane's story) */
.challenges-box { background: var(--color-cream); padding: var(--space-xl); border-radius: var(--radius-md); margin: var(--space-2xl) 0; }
.challenges-box__title { font-weight: 600; color: var(--color-navy); margin-bottom: var(--space-md); }
.challenges-box ul { margin: 0; padding-left: var(--space-lg); }
.challenges-box li { color: var(--color-gray-600); margin-bottom: var(--space-xs); }

/* Breakthrough box (Stephanie's story) */
.breakthrough-box { background: var(--color-teal-light); border-left: 4px solid var(--color-teal); padding: var(--space-xl); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: var(--space-2xl) 0; }
.breakthrough-box__title { font-size: 1.125rem; color: var(--color-teal-dark); margin-bottom: var(--space-md); }
.breakthrough-box p { font-family: var(--font-display); font-style: italic; color: var(--color-navy); margin: 0; }

/* Memory box (Stephanie's story) */
.memory-box { background: var(--color-cream); padding: var(--space-xl); border-radius: var(--radius-md); margin: var(--space-2xl) 0; }
.memory-box__title { font-weight: 600; color: var(--color-navy); margin-bottom: var(--space-md); }
.memory-box p { color: var(--color-gray-600); margin-bottom: var(--space-md); }
.memory-box p:last-child { margin-bottom: 0; }

/* Timeline (Stephanie's story) */
.timeline { margin: var(--space-2xl) 0; padding-left: var(--space-xl); border-left: 2px solid var(--color-teal); }
.timeline__item { position: relative; padding-bottom: var(--space-xl); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ''; position: absolute; left: calc(-1 * var(--space-xl) - 5px); top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--color-teal); }
.timeline__age { font-weight: 600; color: var(--color-teal); margin-bottom: var(--space-xs); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px; }
.timeline__content { color: var(--color-gray-600); margin: 0; }

/* Stat highlight (Trina's story) */
.stat-highlight { background: var(--color-teal); color: var(--color-white); padding: var(--space-2xl); border-radius: var(--radius-lg); margin: var(--space-2xl) 0; text-align: center; }
.stat-highlight__number { font-family: var(--font-display); font-size: 4rem; font-weight: 700; display: block; }
.stat-highlight__label { font-size: 1.25rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; display: block; margin-bottom: var(--space-md); }
.stat-highlight__context { font-style: italic; opacity: 0.9; margin: 0; }

/* Journey steps (Trina's story) */
.journey-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin: var(--space-2xl) 0; }
.journey-step { text-align: center; }
.journey-step__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--color-teal); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin: 0 auto var(--space-md); }
.journey-step__title { font-size: 1.125rem; font-weight: 600; color: var(--color-navy); margin-bottom: var(--space-sm); }
.journey-step__text { color: var(--color-gray-600); font-size: 0.9375rem; margin: 0; }

/* Crisis box (Trina's story) */
.crisis-box { background: var(--color-terracotta-light); border: 2px solid var(--color-terracotta); padding: var(--space-xl); border-radius: var(--radius-md); margin: var(--space-2xl) 0; }
.crisis-box__title { font-weight: 600; color: var(--color-terracotta); margin-bottom: var(--space-md); }
.crisis-box p { color: var(--color-gray-600); margin-bottom: var(--space-sm); }
.crisis-box p:last-child { margin-bottom: 0; }

/* Client story boxes (Matt's story) */
.client-story { background: var(--color-cream); padding: var(--space-xl); border-radius: var(--radius-md); margin: var(--space-lg) 0; }
.client-story__title { font-weight: 600; color: var(--color-navy); margin-bottom: var(--space-md); }
.client-story p { color: var(--color-gray-600); margin-bottom: var(--space-sm); }
.client-story p:last-child { margin-bottom: 0; }

/* Simple transformation grid (Jodi's story) */
.transformation-grid--simple { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); margin: var(--space-2xl) 0; }
.transformation-card { background: var(--color-cream); padding: var(--space-xl); border-radius: var(--radius-md); text-align: center; }
.transformation-card__label { font-size: 0.875rem; color: var(--color-teal); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: var(--space-sm); }
.transformation-card__text { color: var(--color-gray-600); margin: 0; }

@media (max-width: 900px) {
  .story-hero__title { font-size: 2rem; }
  .story-hero__meta { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
  .transformation-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: 1fr; }
  .what-tried__list { grid-template-columns: repeat(2, 1fr); }
  .journey-steps { grid-template-columns: 1fr; }
  .transformation-grid--simple { grid-template-columns: 1fr; }
}