/* ─── Resonaro design tokens ─────────────────────────────────────── */
:root {
  --rs-bg:        #fbfaf6;
  --rs-surface:   #ffffff;
  --rs-ink:       #2a2823;
  --rs-ink-soft:  #5a5347;
  --rs-ink-faint: #9a958a;
  --rs-primary:   #9bb89b;  /* sage accent */
  --rs-success:   #2e7d52;  /* accessible CTA green */
  --rs-outline:   #d4cfc7;
}

/* ─── Bootstrap 5 CSS variable overrides ────────────────────────── */
:root {
  --bs-body-font-family:  'Nunito', -apple-system, system-ui, sans-serif;
  --bs-body-bg:           var(--rs-bg);
  --bs-body-color:        var(--rs-ink);
  --bs-secondary-color:   var(--rs-ink-soft);
  --bs-tertiary-color:    var(--rs-ink-faint);
  --bs-border-color:      var(--rs-outline);
  --bs-link-color:        var(--rs-primary);
  --bs-link-hover-color:  #7a9b7a;
}

/* ─── Button overrides ───────────────────────────────────────────── */
.btn-success {
  --bs-btn-color:              #fff;
  --bs-btn-bg:                 var(--rs-success);
  --bs-btn-border-color:       var(--rs-success);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           #256644;
  --bs-btn-hover-border-color: #256644;
  --bs-btn-active-bg:          #1e5236;
  --bs-btn-active-border-color:#1e5236;
  --bs-btn-disabled-bg:        var(--rs-success);
  --bs-btn-disabled-border-color: var(--rs-success);
}

.btn-outline-success {
  --bs-btn-color:              var(--rs-success);
  --bs-btn-border-color:       var(--rs-success);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           var(--rs-success);
  --bs-btn-hover-border-color: var(--rs-success);
  --bs-btn-active-color:       #fff;
  --bs-btn-active-bg:          var(--rs-success);
}

.btn-outline-secondary {
  --bs-btn-color:              var(--rs-ink-soft);
  --bs-btn-border-color:       var(--rs-outline);
  --bs-btn-hover-color:        var(--rs-ink);
  --bs-btn-hover-bg:           rgba(42, 40, 35, 0.06);
  --bs-btn-hover-border-color: var(--rs-ink-soft);
  --bs-btn-active-color:       var(--rs-ink);
  --bs-btn-active-bg:          rgba(42, 40, 35, 0.10);
}

/* ─── Navbar ─────────────────────────────────────────────────────── */
.resonaro-navbar {
  background-color: var(--rs-surface);
  border-bottom: 1px solid var(--rs-outline);
}

/* ─── Brand ──────────────────────────────────────────────────────── */
.brand-green {
  color: var(--rs-primary);
  font-family: 'Fraunces', Georgia, serif;
}

/* ─── Hero ───────────────────────────────────────────────────────── */
.hero {
  padding: 80px 0 60px;
}

@media (max-width: 767px) {
  .hero {
    padding: 44px 0 32px;
  }
}

/* ─── Section headings ───────────────────────────────────────────── */
.section-heading {
  font-size: 1.9rem;
}

@media (min-width: 768px) {
  .section-heading {
    font-size: 2.25rem;
  }
}

/* ─── Step cards ─────────────────────────────────────────────────── */
.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: rgba(155, 184, 155, 0.15); /* --rs-primary @ 15% */
  color: var(--rs-success);
  font-size: 2rem;
}

.step-icon-nudge {
  transform: translate(1px, 0);
}

/* ─── Footer ─────────────────────────────────────────────────────── */
.resonaro-footer {
  font-size: 0.78rem;
  color: var(--rs-ink-faint);
  border-top: 1px solid var(--rs-outline);
  padding: 24px 0;
}

.resonaro-footer a {
  color: var(--rs-ink-soft);
  text-decoration: none;
}

.resonaro-footer a:hover {
  text-decoration: underline;
}

/* ─── Misc ───────────────────────────────────────────────────────── */
.note-muted {
  font-size: 0.85rem;
  color: var(--rs-ink-faint);
}