/* Green + gray utility UI. Blue and violet are secondary accents. */
:root {
  --grass: #8FE13D;
  --blue: #7C9EC5;
  --platinum: #EEEEEF;
  --violet: #720B50;
  --paper: var(--platinum);
  --ink: #18251D;
  --muted: #344336;
  --green: var(--grass);
  --soft: #C6CCC5;
  --field: var(--platinum);
  --title: #153C2B;
  --line: #758373;
}
body { background: var(--paper); color: var(--ink); }
.header, .messenger-titlebar, .utility-title { background: var(--title); color: var(--platinum); }
.header .brand, .header .desktop-nav a, .messenger-site-header .brand,
.messenger-titlebar h2, .utility-title h2, .utility-title .offer-desktop-title { color: var(--platinum); }
.desktop-nav a:hover, .desktop-nav a[aria-current='page'] { background: var(--violet); color: var(--platinum); }
.messenger, .website-offer.utility-panel { background: var(--soft); }
.messenger-paper, .messenger-compose textarea, .messenger-reply-field input,
.messenger-navigation, .inquiry-panel, .offer-pitch,
.hero-calculator .utility-content { background: var(--platinum); color: var(--ink); }
.messenger-statusbar { background: #AEB9AA; border-color: var(--line); }
.messenger-person { border-color: var(--line); }
.button.green, .task-primary { background: var(--grass); color: var(--ink); }
.button.green:hover, .task-primary:hover { background: var(--title); color: var(--platinum); }
.button.dark:hover, .button.outline:hover, .button.small:hover { background: var(--blue); color: var(--ink); }
.button.green .retro-icon { color: currentColor; }
.desktop-nav .retro-icon, .messenger-titlebar .retro-icon,
.utility-title .retro-icon { color: var(--platinum); }
.brand-mark.ascii-cat, .ticker-safe-word,
body[data-page='home'] .messenger-initials { background: var(--grass); color: var(--ink); }
body[data-page='home'] .messenger-site-header .menu-toggle { background: var(--platinum); color: var(--ink); }
.messenger-learn a, .messenger-navigation a, .home-offer a.text-link,
.messenger-email, .messenger-clear, .messenger-statusbar a,
.messenger-statusbar button, .punchline-row #ticker-pause { color: var(--violet); }
body[data-page='home'] .messenger-notice,
body[data-page='home'] .messenger-draft-note,
body[data-page='home'] .messenger-person p,
body[data-page='home'] .messenger-response,
.messenger-hero .bench-receipt, .home-offer .offer-details,
.desktop-text p, .chat-footer { color: var(--muted); }
.desktop-text summary { color: var(--title); }
.qr-options button[aria-pressed='true'] { background: var(--blue); color: var(--ink); }
.qr-options button { background: var(--platinum); color: var(--ink); border-color: var(--line); }
.price-card.care, .example-metrics .new-rate { background: var(--grass); }
.bench-section, .pricing-section { background: var(--soft); }
.workflow-example { border-left-color: var(--blue); }
.promise-section, .keys-section { background: var(--title); color: var(--platinum); }
.promise-section h2, .promise-section h3, .promise-section .company-slogan,
.promise-section p, .promise-grid p, .keys-section h2, .keys-section h3,
.keys-section p { color: var(--platinum); }
.promise-section h2 > span, .keys-section h2 > span { color: var(--grass); }
.promise-section a, .keys-section a { color: var(--platinum); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--violet); }
.header a:focus-visible, .header button:focus-visible,
.messenger-titlebar a:focus-visible, .messenger-titlebar button:focus-visible,
.utility-title button:focus-visible, .promise-section a:focus-visible { outline-color: var(--grass); }
::selection { background: var(--blue); color: var(--ink); }