/* ============================================================
   Community page. Reuses the shared panels, values, commitments
   list, route line, and the areas/split/chips blocks in styles.css;
   only layout specific to this page lives here.
   ============================================================ */

.cm-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.cm-hero__grid > * { min-width: 0; }
.cm-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

@media (max-width: 900px) {
  .cm-hero__grid { grid-template-columns: 1fr; }
  .cm-hero__ctas .btn { flex: 1 1 220px; }
}

/* the route with four steps */
.route--four .route__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (prefers-reduced-motion: no-preference) {
  .route--armed .step:nth-child(4) { --d: 1.45s; }
}
@media (max-width: 1000px) {
  .route--four .route__steps { grid-template-columns: 1fr; gap: 40px; padding-left: 68px; }
  .route--four .route__line-wrap { top: 22px; bottom: 60px; left: 13px; right: auto; width: 18px; height: auto; }
  .route--four .route__line { clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent); }
  .route--four.route--armed .route__line-wrap { clip-path: inset(0 0 100% 0); }
  .route--four.route--armed.is-drawn .route__line-wrap { clip-path: inset(0 0 0 0); }
  .route--four .step .plaque { position: absolute; left: -68px; top: 0; }
  .route--four .step h3 { margin-top: 6px; }
}

/* impact note */
.cm-note { max-width: 860px; margin-top: 24px; padding: 16px 20px; border-radius: var(--radius-sm); background: var(--gold-tint); font-weight: 600; color: var(--ink); }