/*
2026-05-22 v0.0.1 - leave toggle positioning to inline controls.
LIFE-plan-layer.css, version: 0.0.1
CDX=true
[LAYERSv0]: L3
Toggle: remove this stylesheet link or turn off the page checkbox to return to base styling.
*/

:root {
  --l4v-navy: #0d2130;
  --l4v-blue: #7dc1ff;
  --l4v-ice: #f1f2f2;
  --l4v-white: #ffffff;
  --l4v-gray: #8f8f8f;
  --l4v-red: #cf2027;
  --slate: var(--l4v-navy);
  --slate-mid: #183348;
  --teal: #1d67cd;
  --teal-lt: #e9f5ff;
  --teal-mid: var(--l4v-blue);
  --gold: var(--l4v-red);
  --gold-lt: #fff0f1;
  --parchment: var(--l4v-ice);
  --linen: #e2e2e2;
  --white: var(--l4v-white);
  --ink: var(--l4v-navy);
  --ink-mid: rgba(13, 33, 48, 0.68);
  --ink-lt: rgba(13, 33, 48, 0.42);
  --border: rgba(13, 33, 48, 0.14);
  --border-md: rgba(13, 33, 48, 0.24);
}

html,
body {
  font-family: Avenir, "Avenir Next", Roboto, Arial, Helvetica, sans-serif !important;
}

body {
  background: var(--l4v-ice) !important;
  color: var(--l4v-navy) !important;
}

h1,
h2,
h3,
.hero-h1,
.section-h,
.hdr-title,
.sec-h,
.tier-total-amt,
.pay-amt,
.nav-wordmark,
.footer-brand-name {
  font-family: Avenir, "Avenir Next", Roboto, Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

nav,
.hdr,
.demo-banner,
.cta-banner,
footer,
.phase-hdr {
  background: var(--l4v-navy) !important;
  color: var(--l4v-white) !important;
}

nav a,
.nav-wordmark,
.nav-wordmark span,
.footer-brand-name,
.footer-brand-name span {
  color: var(--l4v-white) !important;
}

.nav-cta,
.btn-primary,
.btn-white,
.tab.on,
.cta {
  background: var(--l4v-navy) !important;
  border-color: var(--l4v-blue) !important;
  color: var(--l4v-white) !important;
}

.btn-ghost,
.service-link,
a {
  color: var(--l4v-navy) !important;
}

.hero,
.services-wrap,
.process-wrap,
.faq-wrap,
.body,
.tier,
.week-rows,
.service-card,
.process-step,
.testimonial-card,
.faq-item,
.why-item,
.pay-cell {
  background-color: var(--l4v-white) !important;
  border-color: var(--border) !important;
}

.hero-eyebrow,
.section-eye,
.hdr-eye,
.eye,
.wk-num,
.pay-phase,
.tier-name,
.service-h,
.trust-num,
.step-num,
.why-num {
  color: var(--l4v-blue) !important;
}

.service-icon svg {
  stroke: var(--l4v-blue) !important;
}

.trust-strip,
.teal-box,
.wk-num,
.tab:hover,
.pay-cell.highlight,
.milestone,
.milestone .wk-num {
  background: var(--teal-lt) !important;
}

.css-toggle input,
#life-css-toggle {
  accent-color: var(--l4v-blue);
}