/* Feature guide: existing CheekyBell tokens, native links and readable stories. */
.feature-guide-page { overflow-wrap: anywhere; }
.guide-nav, .guide-hero, .guide-catalog, .guide-stories, .guide-next {
  width: min(100% - 2 * var(--space-lg), 1120px);
  margin-inline: auto;
}
.guide-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.guide-nav a, .feature-guide-page a { text-underline-offset: 0.25em; }
.guide-brand {
  color: var(--color-primary-dark);
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
}
.guide-brand span { display: block; font: 0.75rem var(--font-body); }
.guide-nav nav, .guide-languages { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.guide-nav nav a, .guide-languages a { color: var(--color-text); }
.guide-languages [aria-current] { color: var(--color-primary); font-weight: 700; }
.feature-guide-page a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: var(--space-xs);
}
.guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-2xl);
  padding-block: var(--space-3xl);
}
.guide-eyebrow { color: var(--color-primary); margin-bottom: var(--space-lg); }
.guide-hero h1 {
  font-family: var(--font-headline);
  font-size: clamp(2.4rem, 5.6vw, 4.8rem);
  line-height: 1.07;
  letter-spacing: -0.04em;
  max-width: 13ch;
  margin-bottom: var(--space-lg);
}
.guide-intro { font-size: 1.125rem; max-width: 50ch; }
.guide-hero .btn-group, .guide-next .btn-group { margin-top: var(--space-xl); justify-content: flex-start; }
.feature-guide-page .btn-primary, .feature-discovery .btn-primary {
  background: var(--color-primary-dark);
  color: var(--color-surface-pure);
}
.feature-guide-page .btn-secondary, .feature-discovery .btn-secondary {
  background: transparent;
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary);
}
.feature-guide-page .btn:hover, .feature-discovery .btn:hover {
  box-shadow: none;
  transform: none;
}
.feature-guide-page .btn-primary::after, .feature-discovery .btn-primary::after { display: none; }
.feature-discovery a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: var(--space-xs);
}
.guide-note {
  border-left: 3px solid var(--color-primary);
  padding: var(--space-lg);
  background: var(--color-surface-pure);
}
.guide-note p { margin-block: var(--space-md); }
.guide-note a, .use-case a { color: var(--color-primary-dark); }
.guide-section-intro { max-width: 65ch; margin-bottom: var(--space-xl); }
.guide-section-intro h2, .guide-next h2 {
  font-family: var(--font-headline);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.15;
  margin-block: var(--space-md);
}
.catalog-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-bottom: var(--space-2xl);
}
.catalog-jump a {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-primary-dark);
  background: var(--color-surface-pure);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  text-decoration: none;
}
.catalog-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-2xl);
  padding-block: var(--space-2xl);
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  scroll-margin-top: var(--space-lg);
}
.catalog-heading h2 {
  font-family: var(--font-headline);
  font-size: 1.6rem;
  line-height: 1.2;
  margin-top: var(--space-md);
}
.catalog-list { list-style: none; display: grid; gap: var(--space-lg); }
.catalog-list h3 { font-size: 1.1rem; color: var(--color-primary-dark); }
.catalog-list p { margin-top: var(--space-xs); }
.guide-stories { padding-block: var(--space-3xl); scroll-margin-top: var(--space-lg); }
.use-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.use-case {
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  background: var(--color-surface-pure);
  border-top: 3px solid var(--color-primary);
}
.use-case:last-child { grid-column: 1 / -1; }
.case-index { color: var(--color-primary); font-size: 0.875rem; margin-bottom: var(--space-lg); }
.use-case h3 { font-family: var(--font-headline); font-size: 1.65rem; line-height: 1.2; }
.case-context { margin-block: var(--space-lg); }
.use-case ol { padding-left: var(--space-lg); }
.use-case li + li { margin-top: var(--space-sm); }
.case-purpose { margin-block: var(--space-lg); }
.guide-next { padding-bottom: var(--space-3xl); }
.feature-discovery {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  background: var(--color-surface);
}
.feature-discovery p { margin: var(--space-md) auto var(--space-lg); max-width: 60ch; }
.feature-discovery h2 { font-family: var(--font-headline); font-size: clamp(1.6rem, 4vw, 2.5rem); }
.feature-discovery .btn-group { flex-wrap: wrap; }
.family-language-nav {
  width: min(100% - 2 * var(--space-lg), 1120px);
  margin: var(--space-lg) auto;
  gap: var(--space-sm) var(--space-lg);
}
.family-language-nav a { color: var(--color-primary-dark); }
.family-planning-page .guide-hero h1 { max-width: 17ch; }
.family-planning-page .guide-note h2 { font-size: 1.25rem; }
.plan-steps { margin-top: var(--space-lg); padding-left: var(--space-lg); }
.plan-steps li + li { margin-top: var(--space-sm); }
.plan-privacy-title { margin-block: var(--space-lg) var(--space-sm); }
.family-stories .use-case:last-child { grid-column: auto; }
@media (max-width: 760px) {
  .guide-hero, .catalog-section, .use-case-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-hero { padding-block: var(--space-2xl); gap: var(--space-xl); }
  .catalog-section { gap: var(--space-lg); }
  .guide-nav nav { order: 3; width: 100%; }
  .guide-stories { padding-block: var(--space-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  .feature-guide-page { scroll-behavior: auto; }
  html:has(.feature-guide-page) { scroll-behavior: auto; }
}