:root {
  --navy: #14271f;
  --teal: #184d3b;
  --teal-light: #e4efe8;
  --slate: #66756e;
  --bg: #f5f1e8;
  --green: #237d57;
  --paper: #fffdf8;
  --mint: #b9f1d5;
  --brand-line: rgba(20, 39, 31, .14);
}

body { background: var(--bg); color: var(--navy); }

header {
  background:
    radial-gradient(650px 220px at 85% 0, rgba(185, 241, 213, .14), transparent 65%),
    linear-gradient(135deg, #102b21, #184d3b);
}

header .brand,
header h1,
h1, h2, h3 { letter-spacing: -.02em; }

header .brand,
header h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }

header a { color: #b9f1d5; }
.panel, .modal, .plan, .status-card { border-color: var(--brand-line); }
.panel, .modal, .plan { background: var(--paper); }
.panel { border-radius: 22px; box-shadow: 0 24px 55px rgba(28, 62, 49, .08); }
.btn, .btn-check { border-radius: 999px; background: var(--teal); box-shadow: none; }
.btn.secondary, .btn-clear { background: var(--paper); border-color: var(--brand-line); }
input, select, textarea { border-color: var(--brand-line); border-radius: 12px; background: #fff; }
input:focus, select:focus, textarea:focus { border-color: #36845f; box-shadow: 0 0 0 3px rgba(54, 132, 95, .14); }
.tabs button, .plan { border-color: var(--brand-line); }
.tabs button.active { background: var(--teal-light); border-color: var(--teal); }
.trial-card { background: #e4efe8; border-color: #c8dfd1; }
.plan.best::after { background: var(--teal); }
.fine a, .link-btn { color: var(--teal); }
footer a { color: var(--teal); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}