/* ==========================================================================
   Section primitives — shared layout + typography for content sections
   below the fold (value-props, products, faq, and whatever comes next).
   Component files should compose these instead of redeclaring the same
   container/heading/index rules; only genuinely section-specific bits
   (colors, sizing overrides, one-off layout) belong in the component file.
   Blocks: .section, .section__header, .eyebrow, .section__title,
           .section__subtext, .index-badge
   ========================================================================== */

.section {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: var(--space-8) var(--gutter-inline);
}

/* Modifier for sections built as a centered header + stacked content
   (products, faq) — value-props opts out, its content is a sticky row. */
.section--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
}

.section__header {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}

.eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.section__title {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.section__subtext {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Small numbered label (01, 02…) used ahead of a title/sentence — value
   props items, product modules, FAQ questions. Color is a separate
   modifier since the accent varies by context. */
.index-badge {
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.index-badge--red {
  color: var(--color-red);
}

.index-badge--green {
  color: var(--color-apple-green);
}

/* Generic inline emphasis — dark red text, for a word/phrase worth
   calling out within an otherwise plain sentence (not tied to any one
   component, unlike .hero__accent which also adds italic). */
.text-red-dark {
  color: var(--color-red-dark);
}