/**
 * Civium staging — unified vertical rhythm & section padding.
 * Load AFTER page inline <style> blocks so these rules win.
 */
:root {
  --space-section-y: clamp(80px, 10vh, 96px);
  --space-section-y-md: clamp(72px, 9vh, 88px);
  --space-section-y-sm: clamp(56px, 7vh, 72px);
  --space-section-x: clamp(20px, 4vw, 52px);
  --space-head-gap: clamp(28px, 3.5vh, 40px);
  --space-block-gap: clamp(24px, 3vh, 32px);
  --space-content: 1160px;
  --scroll-pad: 80px;
}

/* —— Anchors (fixed nav) —— */
#platform,
#outcomes,
#team,
#lenses {
  scroll-margin-top: var(--scroll-pad);
}

/* —— Light bands (reset theme-dark body text on cream/white) —— */
body.theme-dark .lenses-sec,
body.theme-dark .band-light,
body.theme-dark .feat,
body.theme-dark .stack,
body.theme-dark .paths,
body.theme-dark .launch,
body.theme-dark .cta-light,
body.theme-dark .timeline {
  color: var(--ink);
}
body.theme-dark .lenses-sec h2,
body.theme-dark .band-light h2,
body.theme-dark .feat h2,
body.theme-dark .stack h2,
body.theme-dark .paths h2,
body.theme-dark .timeline h2,
body.theme-dark .cta-light h2 {
  color: var(--ink);
}
body.theme-dark .lenses-sec h2 i,
body.theme-dark .band-light h2 i,
body.theme-dark .feat h2 i,
body.theme-dark .stack h2 i,
body.theme-dark .paths h2 i,
body.theme-dark .timeline h2 i {
  display: block;
  font-weight: 300;
  font-style: italic;
  color: var(--ink2);
}
body.theme-dark .lenses-sec .stack-dek,
body.theme-dark .band-light .section-dek,
body.theme-dark .feat-dek,
body.theme-dark .paths-sub {
  color: var(--ink2);
}

.lenses-sec,
.band-light,
.cards,
.timeline,
.paths,
.cta-light,
.feat {
  padding-top: var(--space-section-y) !important;
  padding-bottom: var(--space-section-y) !important;
  padding-left: var(--space-section-x) !important;
  padding-right: var(--space-section-x) !important;
}

/* —— Dark bands —— */
.flow,
.cta-sec,
.cta,
.problem,
.platform,
.approach {
  padding-top: var(--space-section-y) !important;
  padding-bottom: var(--space-section-y) !important;
  padding-left: var(--space-section-x) !important;
  padding-right: var(--space-section-x) !important;
}

.launch {
  padding-top: var(--space-section-y-sm) !important;
  padding-bottom: var(--space-section-y-sm) !important;
  padding-left: var(--space-section-x) !important;
  padding-right: var(--space-section-x) !important;
}

/* OBK: standalone strip (other pages) */
.obk-strip {
  padding-top: clamp(32px, 4vh, 48px) !important;
  padding-bottom: clamp(64px, 8vh, 80px) !important;
  padding-left: var(--space-section-x) !important;
  padding-right: var(--space-section-x) !important;
}

/* Home: unified close (CTA + OBK) — padding in index inline CSS */
.home-close {
  padding-left: var(--space-section-x) !important;
  padding-right: var(--space-section-x) !important;
  padding-bottom: clamp(64px, 8vh, 80px) !important;
}

/* —— Heroes (nav clearance) —— */
.hero {
  padding-left: var(--space-section-x) !important;
  padding-right: var(--space-section-x) !important;
}
body.theme-dark > .hero:first-of-type,
body.theme-dark > section.hero:first-of-type {
  padding-top: clamp(96px, 11vh, 120px) !important;
}

/* Challenge hero uses inner shell for side padding */
.hero:has(.hero-shell) {
  padding-top: clamp(88px, 10vh, 104px) !important;
  padding-bottom: clamp(40px, 5vh, 56px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.hero-shell {
  padding-top: clamp(28px, 3.5vh, 36px) !important;
  padding-bottom: clamp(20px, 2.5vh, 28px) !important;
}

/* —— Section headers —— */
.section-head,
.wrap > .kicker:first-child {
  max-width: var(--space-content);
  margin-left: auto;
  margin-right: auto;
}
.section-head {
  margin-bottom: var(--space-head-gap) !important;
}
.section-head .section-dek,
.section-head .stack-dek {
  margin-bottom: 0 !important;
  max-width: 46ch;
}
.lenses-sec > .wrap > .stack-dek {
  margin-bottom: clamp(20px, 2.5vh, 28px) !important;
  max-width: 42ch;
}
.band-light h2,
.lenses-sec h2,
.cards h2,
.timeline h2,
.feat h2 {
  margin-bottom: clamp(16px, 2vh, 22px) !important;
}

/* —— Home —— */
.platform-h2 {
  margin-bottom: clamp(32px, 4vh, 44px) !important;
}
.platform-illus {
  margin-bottom: clamp(28px, 3.5vh, 36px) !important;
}
.platform-illus-cap {
  margin-bottom: 0 !important;
  padding-top: clamp(16px, 2vh, 20px) !important;
}
.ci-step-wheel--dark {
  margin-top: clamp(24px, 3vh, 32px) !important;
  padding-top: clamp(20px, 2.5vh, 28px) !important;
  border-top: 1px solid rgba(246, 242, 236, 0.08);
}
.ci-step-wheel--flow .ci-step-labels {
  margin-bottom: 0 !important;
}
.platform-cta-row {
  margin-top: clamp(28px, 3.5vh, 36px) !important;
}
.paths-h2 {
  margin-bottom: clamp(12px, 1.5vh, 16px) !important;
}
.paths-sub {
  margin-bottom: var(--space-head-gap) !important;
  max-width: 46ch;
}
.paths-tabs > .ci-seg-tablist {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-block-gap) !important;
}
.paths-tabs .p-card:not(.p-card--dark) {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.paths-tabs .p-card--dark {
  padding: clamp(28px, 3.5vh, 36px) !important;
  border-radius: 18px;
}
.paths-tabs .ci-panels {
  min-height: min(320px, 50vh);
}
.paths-tabs .ci-paths-visual {
  margin-bottom: 0 !important;
}
.paths-tabs .p-card {
  padding: clamp(28px, 3.5vh, 36px) clamp(24px, 3vw, 32px) !important;
}
.paths-tabs .p-card p {
  margin-bottom: clamp(24px, 3vh, 28px) !important;
}
.home-close-h2 {
  margin-bottom: clamp(16px, 2vh, 20px) !important;
}
.home-close-body {
  margin-bottom: clamp(28px, 3.5vh, 36px) !important;
}

/* —— Platform —— */
.feat-dek {
  margin-bottom: var(--space-head-gap) !important;
}
.feat-grid {
  gap: clamp(40px, 5vh, 56px) clamp(32px, 4vw, 48px) !important;
  margin-top: clamp(8px, 1vh, 12px) !important;
}
.lenses-sec .ci-seg-tablist,
#outcomes .ci-seg-tablist {
  margin-bottom: var(--space-block-gap) !important;
}
#outcomes .ci-panels {
  min-height: 200px;
}
.cta-solo {
  max-width: var(--space-content);
  margin: 0 auto;
  text-align: center;
}
.cta-solo h2 {
  margin-bottom: clamp(20px, 2.5vh, 24px) !important;
}
.cta-solo > p {
  margin-bottom: clamp(28px, 3.5vh, 36px) !important;
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}
.launch-inner {
  gap: clamp(28px, 3.5vh, 40px) !important;
}

/* —— Challenge —— */
.approach h2 {
  margin-bottom: var(--space-head-gap) !important;
}
.approach .ci-step-wheel {
  margin-bottom: var(--space-head-gap) !important;
}
.approach-illus {
  margin-bottom: clamp(28px, 3.5vh, 36px) !important;
}
.cards h2 {
  margin-bottom: var(--space-head-gap) !important;
}
.ci-snap-rail-wrap {
  margin-top: 0 !important;
}
.ci-details-card summary {
  padding: clamp(20px, 2.5vh, 24px) clamp(22px, 3vw, 28px) !important;
}
.ci-details-card .ci-details-body {
  padding: 0 clamp(22px, 3vw, 28px) clamp(20px, 2.5vh, 24px) !important;
}
.cta-light h2 {
  margin-bottom: clamp(16px, 2vh, 20px) !important;
}
.cta-light p {
  margin-bottom: clamp(28px, 3.5vh, 36px) !important;
}

/* —— Story —— */
.ci-story-journey {
  margin-top: clamp(8px, 1vh, 12px) !important;
  margin-bottom: 0 !important;
}
#team .section-head {
  margin-bottom: var(--space-head-gap) !important;
}
#team .team-grid {
  margin-top: 0 !important;
}
.cta-inner {
  gap: clamp(48px, 6vh, 64px) !important;
}
.cta-sec h2 {
  margin-bottom: clamp(16px, 2vh, 20px) !important;
}
.cta-sec p {
  margin-bottom: clamp(24px, 3vh, 32px) !important;
}

/* —— Join —— */
.join .hero-sub {
  margin-bottom: clamp(40px, 5vh, 48px) !important;
}
.path-tabs {
  margin-bottom: var(--space-head-gap) !important;
}
.path-panel.active {
  gap: clamp(48px, 6vh, 64px) !important;
}
.path-h2 {
  margin-bottom: clamp(12px, 1.5vh, 16px) !important;
}
.path-body {
  margin-bottom: clamp(16px, 2vh, 20px) !important;
}
.path-tags {
  margin-bottom: clamp(24px, 3vh, 28px) !important;
}

/* —— Interaction components —— */
.ci-panel-grid {
  gap: clamp(28px, 3.5vh, 40px) clamp(32px, 4vw, 48px) !important;
}
.ci-step-wheel-head {
  margin-bottom: clamp(20px, 2.5vh, 24px) !important;
}
.ci-step-labels {
  margin-bottom: clamp(16px, 2vh, 20px) !important;
}
.ci-step-dots {
  margin-bottom: clamp(16px, 2vh, 20px) !important;
}
.ci-step-nav {
  margin-top: clamp(20px, 2.5vh, 24px) !important;
}

/* —— Footer —— */
footer {
  padding: clamp(48px, 6vh, 56px) var(--space-section-x) clamp(32px, 4vh, 40px) !important;
}
.foot-top {
  margin-bottom: clamp(24px, 3vh, 28px) !important;
}

/* —— Mobile —— */
@media (max-width: 768px) {
  :root {
    --space-section-y: clamp(64px, 8vh, 80px);
    --space-section-y-sm: clamp(48px, 6vh, 56px);
    --space-head-gap: clamp(24px, 3vh, 32px);
  }

  .hero {
    padding-top: clamp(88px, 10vh, 104px) !important;
  }

  .path-panel.active {
    gap: clamp(36px, 4.5vh, 44px) !important;
  }

  .feat-grid {
    gap: clamp(32px, 4vh, 40px) !important;
  }

  .cta-inner {
    gap: clamp(36px, 4.5vh, 44px) !important;
  }
}