/* ==========================================================================
   deccentral.com — site-owned structural CSS (Story 1.2.1).
   Page STRUCTURE only, the sibling-proven pattern (KB fgl-frontend-pattern:
   sites own "unlimited genuinely-custom files"): hero, section rhythm, card
   grid, audience list. Every color/space/type value is a framework token;
   no rule restyles an fgl/ component. 48rem below is the framework md
   breakpoint CONSTANT (breakpoints are deliberately not tokens).
   Hero/grid primitives are a vituno promotion candidate once a second site
   wants them — build-site-local-first rule.
   ========================================================================== */

/* Page canvas: fgl/base.css owns it since vituno v0.3 (Story 4.2.4 — the
   2026-07-21 hub-inbox ask, delivered); the interim site-side body rule was
   removed at that import bump per its staged removal path. */

/* Hero */
.hero {
  padding-block: var(--space-9) var(--space-8);
  text-align: center;
}
.hero__kicker {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-secondary);
  margin: 0 0 var(--space-3);
}
.hero__title {
  font-size: var(--fs-display-1);
  line-height: var(--lh-display-1);
  margin: 0 auto var(--space-4);
  max-width: var(--content-wide);
}
.hero__lede {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-muted);
  max-width: var(--measure);
  margin: 0 auto;
}
.hero__cta {
  margin-top: var(--space-6);
}
.hero__note {
  font-size: var(--fs-caption);
  color: var(--ink-muted);
  margin-top: var(--space-3);
}

/* Section rhythm */
.section {
  padding-block: var(--space-8);
}
.section--alt {
  background: var(--surface-elevated);
  border-block: 1px solid var(--border-subtle);
}
.section__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin: 0 0 var(--space-4);
}
.section__prose {
  max-width: var(--measure);
}
.section__prose p {
  margin: 0 0 var(--space-4);
}

/* Card grid (3-up on md+, stacked below) */
.card-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
@media (min-width: 48rem) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Audience list */
.audience {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.audience__role {
  font-weight: var(--fw-semibold);
}