/* Shared SAGE skin for vertical checkup/signup pages.
   Keep page-specific copy and layout, but retire the old purple-first shell. */
:root {
  --sage-ink: #111827;
  --sage-navy: #172033;
  --sage-forest: #1f5f4b;
  --sage-teal: #0f766e;
  --sage-mint: #dcebdd;
  --sage-paper: #fbf7ee;
  --sage-sky: #e8f1f5;
  --sage-gold: #c8892f;
  --sage-clay: #b45f45;
  --sage-line: #d9d4c8;
  --indigo: var(--sage-forest);
  --indigo-light: #2b8a78;
  --indigo-dark: #123d32;
  --violet: var(--sage-clay);
  --emerald: var(--sage-teal);
  --emerald-light: #22a391;
  --amber: var(--sage-gold);
}

body {
  color: var(--sage-ink);
  background:
    linear-gradient(180deg, #eff6ef 0%, var(--sage-paper) 42%, #f7fbfb 100%) !important;
}

.nav {
  background: rgba(251, 247, 238, 0.94) !important;
  border-bottom-color: rgba(31, 95, 75, 0.18) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.logo,
.hero-brand .wordmark {
  background: linear-gradient(135deg, var(--sage-navy), var(--sage-forest) 58%, var(--sage-gold)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.logo span {
  color: var(--sage-navy) !important;
}

.logo img,
.hero-brand img {
  filter: drop-shadow(0 6px 16px rgba(31, 95, 75, 0.18)) !important;
}

.nav-links a:hover,
footer a:hover,
.hero-secondary-cta a {
  color: var(--sage-teal) !important;
}

.btn-primary,
.btn-hero,
.input-row button,
.cta-band .input-row button,
.fix-card .connect-btn {
  background: var(--sage-forest) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-hero:hover,
.input-row button:hover,
.cta-band .input-row button:hover,
.fix-card .connect-btn:hover {
  background: var(--sage-teal) !important;
}

.btn-hero.secondary {
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--sage-navy) !important;
  border-color: var(--sage-line) !important;
}

.hero {
  background:
    linear-gradient(180deg, rgba(239, 246, 239, 0.96) 0%, rgba(251, 247, 238, 0.74) 100%) !important;
  border-bottom: 1px solid rgba(31, 95, 75, 0.12);
}

.eyebrow,
.feature-kicker,
.social-proof .proof-kicker {
  background: rgba(15, 118, 110, 0.11) !important;
  color: var(--sage-forest) !important;
  border: 1px solid rgba(15, 118, 110, 0.16);
}

h1 .grad,
.feature-title .grad,
.fix-hero-title .accent {
  background: linear-gradient(135deg, var(--sage-forest), var(--sage-gold) 52%, var(--sage-clay)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.magic-form,
.feature-card,
.card,
.result-block,
.proof-card,
.trust-badge,
.how-step,
.compare-wrap,
.disc-card {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(31, 95, 75, 0.16) !important;
  box-shadow: 0 18px 48px -28px rgba(23, 32, 51, 0.35), 0 5px 18px rgba(31, 95, 75, 0.06) !important;
}

.feature-card::before {
  background: linear-gradient(90deg, var(--sage-forest), var(--sage-gold), var(--sage-clay)) !important;
}

.feature-bullet,
.post-draft {
  background: rgba(232, 241, 245, 0.62) !important;
  border-color: rgba(31, 95, 75, 0.12) !important;
}

.feature-bullet .b-ico,
.card-icon,
.trust-badge .badge-ico {
  background: linear-gradient(135deg, var(--sage-forest), var(--sage-gold)) !important;
  color: #fff !important;
}

.how,
.info-bucket,
.landscape,
.pledge {
  background: linear-gradient(180deg, rgba(232, 241, 245, 0.82), rgba(251, 247, 238, 0.84)) !important;
  border-color: rgba(31, 95, 75, 0.14) !important;
}

.result-headline,
.sub-cta-band,
.cta-band {
  background: linear-gradient(135deg, var(--sage-navy) 0%, var(--sage-forest) 68%, var(--sage-clay) 100%) !important;
  color: #fff !important;
  box-shadow: 0 24px 60px -28px rgba(23, 32, 51, 0.42) !important;
}

.cta-band .sub-btn,
.sub-cta-band .sub-btn {
  color: var(--sage-navy) !important;
}

.input-row input,
.signup-grid input {
  border-color: rgba(31, 95, 75, 0.22) !important;
}

.input-row input:focus,
.signup-grid input:focus,
.cta-band .input-row input:focus {
  border-color: var(--sage-teal) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

table.compare-table thead th.sage-col,
table.compare-table tbody td.sage-col,
table.compare-table tbody tr.total-row td.sage-col {
  background: rgba(220, 235, 221, 0.48) !important;
  color: var(--sage-forest) !important;
}

.result-block h3,
.distrib-card .d-meta,
.post-draft .platform,
.event-card .when,
.gap-list li::before {
  color: var(--sage-teal) !important;
}

.spinner {
  border-top-color: var(--sage-forest) !important;
}