:root {
  color-scheme: light;
  --md-sys-color-primary: #006d3b;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #8ff6b5;
  --md-sys-color-on-primary-container: #00210e;
  --md-sys-color-secondary: #4f6353;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d2e8d4;
  --md-sys-color-on-secondary-container: #0d1f13;
  --md-sys-color-tertiary: #3a6470;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #bdeaf7;
  --md-sys-color-on-tertiary-container: #001f27;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-background: #fbfdf7;
  --md-sys-color-on-background: #191c19;
  --md-sys-color-surface: #fbfdf7;
  --md-sys-color-on-surface: #191c19;
  --md-sys-color-surface-variant: #dde5da;
  --md-sys-color-on-surface-variant: #414941;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f5f8f1;
  --md-sys-color-surface-container: #eff2ec;
  --md-sys-color-surface-container-high: #e9ece6;
  --md-sys-color-outline: #717970;
  --md-sys-color-outline-variant: #c1c9be;
  --md-sys-color-inverse-surface: #2e312d;
  --md-sys-color-inverse-on-surface: #f0f1eb;
  --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, .12), 0 1px 3px 1px rgba(0, 0, 0, .08);
  --md-sys-elevation-2: 0 1px 2px rgba(0, 0, 0, .14), 0 2px 6px 2px rgba(0, 0, 0, .08);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .08);
  --bg: var(--md-sys-color-background);
  --text: var(--md-sys-color-on-background);
  --card: var(--md-sys-color-surface-container-low);
  --card2: var(--md-sys-color-surface-container);
  --panel: var(--md-sys-color-surface-container-low);
  --panel-strong: var(--md-sys-color-surface-container-high);
  --muted: var(--md-sys-color-on-surface-variant);
  --muted2: #5c655c;
  --stroke: var(--md-sys-color-outline-variant);
  --accent: var(--md-sys-color-primary);
  --accent-2: var(--md-sys-color-tertiary);
  --p1: var(--md-sys-color-primary);
  --p2: #247b4a;
  --p3: var(--md-sys-color-tertiary);
  --ok: #0b7d3b;
  --warn: #8a5800;
  --danger: var(--md-sys-color-error);
  --shadow: var(--md-sys-elevation-2);
  --radius: 24px;
  --background: var(--md-sys-color-background);
  --foreground: var(--md-sys-color-on-background);
  --card-foreground: var(--md-sys-color-on-background);
  --primary: var(--md-sys-color-primary);
  --primary-foreground: #ffffff;
  --secondary: var(--md-sys-color-secondary);
  --secondary-foreground: #ffffff;
  --muted-foreground: var(--md-sys-color-on-surface-variant);
  --accent-foreground: #ffffff;
  --destructive: var(--md-sys-color-error);
  --destructive-foreground: #ffffff;
  --border: var(--md-sys-color-outline-variant);
  --ring: var(--md-sys-color-primary);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --md-sys-color-primary: #73d99b;
  --md-sys-color-on-primary: #00391c;
  --md-sys-color-primary-container: #00522b;
  --md-sys-color-on-primary-container: #8ff6b5;
  --md-sys-color-secondary: #b7ccb9;
  --md-sys-color-on-secondary: #233527;
  --md-sys-color-secondary-container: #394b3d;
  --md-sys-color-on-secondary-container: #d2e8d4;
  --md-sys-color-tertiary: #a1ceda;
  --md-sys-color-on-tertiary: #023640;
  --md-sys-color-tertiary-container: #214c57;
  --md-sys-color-on-tertiary-container: #bdeaf7;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-background: #111411;
  --md-sys-color-on-background: #e1e3dd;
  --md-sys-color-surface: #111411;
  --md-sys-color-on-surface: #e1e3dd;
  --md-sys-color-surface-variant: #414941;
  --md-sys-color-on-surface-variant: #c1c9be;
  --md-sys-color-surface-container-lowest: #0c0f0c;
  --md-sys-color-surface-container-low: #191c19;
  --md-sys-color-surface-container: #1d211d;
  --md-sys-color-surface-container-high: #282b27;
  --md-sys-color-outline: #8b9389;
  --md-sys-color-outline-variant: #414941;
  --md-sys-color-inverse-surface: #e1e3dd;
  --md-sys-color-inverse-on-surface: #2e312d;
  --bg: var(--md-sys-color-background);
  --text: var(--md-sys-color-on-background);
  --card: var(--md-sys-color-surface-container-low);
  --card2: var(--md-sys-color-surface-container);
  --panel: var(--md-sys-color-surface-container-low);
  --panel-strong: var(--md-sys-color-surface-container-high);
  --muted: var(--md-sys-color-on-surface-variant);
  --muted2: #aab4a8;
  --stroke: var(--md-sys-color-outline-variant);
  --accent: var(--md-sys-color-primary);
  --accent-2: var(--md-sys-color-tertiary);
  --p1: var(--md-sys-color-primary);
  --p2: #a8d7b5;
  --p3: var(--md-sys-color-tertiary);
  --ok: #73d99b;
  --warn: #eac16c;
  --danger: var(--md-sys-color-error);
  --shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 6px 2px rgba(0, 0, 0, .18);
  --background: var(--md-sys-color-background);
  --foreground: var(--md-sys-color-on-background);
  --card-foreground: var(--md-sys-color-on-background);
  --primary: var(--md-sys-color-primary);
  --primary-foreground: #000000;
  --secondary: var(--md-sys-color-secondary);
  --secondary-foreground: #000000;
  --muted-foreground: var(--md-sys-color-on-surface-variant);
  --accent-foreground: #000000;
  --destructive: var(--md-sys-color-error);
  --destructive-foreground: #000000;
  --border: var(--md-sys-color-outline-variant);
  --ring: var(--md-sys-color-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --md-sys-color-primary: #73d99b;
    --md-sys-color-on-primary: #00391c;
    --md-sys-color-primary-container: #00522b;
    --md-sys-color-on-primary-container: #8ff6b5;
    --md-sys-color-secondary: #b7ccb9;
    --md-sys-color-on-secondary: #233527;
    --md-sys-color-secondary-container: #394b3d;
    --md-sys-color-on-secondary-container: #d2e8d4;
    --md-sys-color-tertiary: #a1ceda;
    --md-sys-color-on-tertiary: #023640;
    --md-sys-color-tertiary-container: #214c57;
    --md-sys-color-on-tertiary-container: #bdeaf7;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-background: #111411;
    --md-sys-color-on-background: #e1e3dd;
    --md-sys-color-surface: #111411;
    --md-sys-color-on-surface: #e1e3dd;
    --md-sys-color-surface-variant: #414941;
    --md-sys-color-on-surface-variant: #c1c9be;
    --md-sys-color-surface-container-lowest: #0c0f0c;
    --md-sys-color-surface-container-low: #191c19;
    --md-sys-color-surface-container: #1d211d;
    --md-sys-color-surface-container-high: #282b27;
    --md-sys-color-outline: #8b9389;
    --md-sys-color-outline-variant: #414941;
    --bg: var(--md-sys-color-background);
    --text: var(--md-sys-color-on-background);
    --card: var(--md-sys-color-surface-container-low);
    --card2: var(--md-sys-color-surface-container);
    --panel: var(--md-sys-color-surface-container-low);
    --panel-strong: var(--md-sys-color-surface-container-high);
    --muted: var(--md-sys-color-on-surface-variant);
    --muted2: #aab4a8;
    --stroke: var(--md-sys-color-outline-variant);
    --accent: var(--md-sys-color-primary);
    --accent-2: var(--md-sys-color-tertiary);
    --p1: var(--md-sys-color-primary);
    --p2: #a8d7b5;
    --p3: var(--md-sys-color-tertiary);
    --ok: #73d99b;
    --warn: #eac16c;
    --danger: var(--md-sys-color-error);
    --shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 6px 2px rgba(0, 0, 0, .18);
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-primary-container) 18%, transparent), transparent 420px),
    var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  letter-spacing: 0;
}

.topbar {
  background: color-mix(in srgb, var(--md-sys-color-surface) 88%, transparent) !important;
  border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
  box-shadow: none;
}

.brand .mark,
.mark {
  border-radius: 16px !important;
  background: var(--md-sys-color-primary-container) !important;
  color: var(--md-sys-color-on-primary-container);
  border: 0 !important;
  box-shadow: var(--md-sys-elevation-1) !important;
}

.btn,
.theme-toggle {
  min-height: 40px;
  border-radius: 20px !important;
  border: 1px solid var(--md-sys-color-outline) !important;
  background: transparent !important;
  color: var(--md-sys-color-primary) !important;
  font-weight: 600;
  box-shadow: none !important;
}

.btn:hover,
.theme-toggle:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent) !important;
  border-color: var(--md-sys-color-primary) !important;
  transform: translateY(-1px);
}

.btn.primary {
  border-color: var(--md-sys-color-primary) !important;
  background: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
}

.btn.primary:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary)) !important;
}

.btn.ghost {
  border-color: transparent !important;
}

.kicker,
.eyebrow,
.pill,
.badge {
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  background: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
}

.hero-card,
.hero,
.card,
.panel,
details {
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  background: var(--md-sys-color-surface-container-low) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

main .hero {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.proof-card,
.muted-box {
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  background: var(--md-sys-color-surface-container) !important;
  border-radius: 20px !important;
}

.icon,
.check,
.hero-check,
.dot {
  background: var(--md-sys-color-primary-container) !important;
  color: var(--md-sys-color-on-primary-container) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
}

.grad {
  background: linear-gradient(90deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.codebox {
  background: var(--md-sys-color-inverse-surface) !important;
  color: var(--md-sys-color-inverse-on-surface) !important;
  border-color: transparent !important;
  border-radius: 16px !important;
}

.codebox .hl {
  color: var(--md-sys-color-primary-container) !important;
}

.codebox .cm {
  color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 70%, transparent) !important;
}

.notice {
  border-color: color-mix(in srgb, var(--warn) 35%, transparent) !important;
  background: color-mix(in srgb, var(--warn) 12%, transparent) !important;
  color: var(--warn) !important;
}

summary {
  color: var(--md-sys-color-on-surface) !important;
}

.chev {
  stroke: var(--md-sys-color-on-surface-variant) !important;
}

footer,
.footer {
  border-top-color: var(--md-sys-color-outline-variant) !important;
  color: var(--md-sys-color-on-surface-variant) !important;
}

.hero-card .img-wrap {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--md-sys-color-primary-container) 70%, white), var(--md-sys-color-tertiary-container)) !important;
}

.hero-card .img-wrap::before {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 84%, transparent) !important;
  border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 65%, transparent) !important;
}

.hero-bubble,
.hero-badge {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 88%, transparent) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
  border-radius: 20px !important;
}

.hero-bubble small,
.hero-badge small {
  color: var(--md-sys-color-on-surface-variant) !important;
}

.hero-phone {
  background: var(--md-sys-color-surface-container-lowest) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
}

.hero-phone::after {
  background: linear-gradient(135deg, var(--md-sys-color-primary-container), var(--md-sys-color-primary)) !important;
}

.hero-flow {
  background: linear-gradient(90deg, transparent, var(--md-sys-color-tertiary), var(--md-sys-color-primary)) !important;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent) !important;
}

.hero-flow::after {
  border-color: var(--md-sys-color-primary) !important;
}

.hero-chip {
  background: var(--md-sys-color-inverse-surface) !important;
  color: var(--md-sys-color-inverse-on-surface) !important;
}

@media (max-width: 640px) {
  .btn,
  .theme-toggle {
    min-height: 44px;
  }
}

/* High-contrast readability pass for Material 3 landing/download pages. */
:root {
  --md-readable-muted: #283028;
}

:root[data-theme="dark"] {
  --md-readable-muted: #d7ded4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-readable-muted: #d7ded4;
  }
}

h1,
h2,
h3,
strong,
.brand .name strong,
.money,
.card h3,
.panel strong {
  color: var(--md-sys-color-on-surface) !important;
}

p,
li,
.lead,
.small,
.mini,
.hero-note,
.section-title p,
.card p,
.proof-card p,
.meta,
.footer,
footer {
  color: var(--md-readable-muted) !important;
}

a:not(.btn) {
  color: var(--md-sys-color-primary) !important;
  text-decoration-color: color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent);
}

.kicker,
.eyebrow {
  font-weight: 700;
}

.card,
.panel,
.proof-card,
.muted-box,
details {
  color: var(--md-sys-color-on-surface) !important;
}

.grad {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--md-sys-color-primary) !important;
}

.hero-card .img-wrap {
  background: linear-gradient(135deg, color-mix(in srgb, var(--md-sys-color-primary-container) 78%, var(--md-sys-color-surface)), color-mix(in srgb, var(--md-sys-color-tertiary-container) 82%, var(--md-sys-color-surface))) !important;
}

.hero-card .img-wrap::before {
  background: var(--md-sys-color-surface-container-lowest) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
}

.hero-bubble,
.hero-badge {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 96%, var(--md-sys-color-surface)) !important;
  color: var(--md-sys-color-on-surface) !important;
  text-shadow: none !important;
}

.hero-bubble strong,
.hero-badge strong {
  color: var(--md-sys-color-on-surface) !important;
}

.hero-bubble small,
.hero-badge small {
  color: var(--md-readable-muted) !important;
}