:root {
  --bg: #fbf6ef;
  --bg-deep: #f0e6d8;
  --bg-mint: #EAF3ED;
  --bg-sunrise: #fff1e6;
  --surface: #fffdf9;
  --surface2: #eadfce;
  --ink: #1f2a28;
  --text: #243230;
  --muted: #5a6562;
  --accent: #2F5D4A;
  --accent-bright: #8FB39A;
  --accent-soft: #E4F0E8;
  --accent2: #3D5C4A;
  --sage: #8FB39A;
  --forest: #2F5D4A;
  --coral: #e07a5f;
  --coral-deep: #c45c40;
  --gold: #e9b44c;
  --gold-soft: #fff3cc;
  --warm: #e07a5f;
  --warm-soft: #ffe8df;
  --warn: #9a5b12;
  --crisis-bg: linear-gradient(105deg, #2F5D4A 0%, #3D7359 50%, #4A7A5C 100%);
  --crisis-text: #f7fffe;
  --radius: 18px;
  --shadow: 0 10px 32px rgba(47, 93, 74, 0.09);
  --shadow-pop: 0 12px 28px rgba(224, 122, 95, 0.18);
  --max: 960px;
  --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-display: Georgia, "Times New Roman", "Palatino Linotype", Palatino, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(900px 420px at 0% -5%, rgba(233, 180, 76, 0.28) 0%, transparent 55%),
    radial-gradient(800px 380px at 100% 0%, rgba(95, 143, 116, 0.22) 0%, transparent 50%),
    radial-gradient(700px 360px at 80% 40%, rgba(224, 122, 95, 0.12) 0%, transparent 45%),
    var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 1.02rem;
}
a { color: var(--accent2); text-underline-offset: 2px; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--warm);
  outline-offset: 2px;
}
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 99;
  background: var(--warm); color: #1a120c;
  padding: .55rem 1rem; border-radius: 8px; font-weight: 700;
}
.crisis-bar {
  background: var(--crisis-bg);
  color: var(--crisis-text);
  padding: .9rem 1.1rem;
  text-align: center;
  font-size: .95rem;
  line-height: 1.45;
  box-shadow: 0 4px 18px rgba(47, 93, 74, 0.25);
}
.crisis-bar a {
  color: #ffffff;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.crisis-bar .crisis-sub { display: block; margin-top: .2rem; font-size: .86rem; opacity: .95; }
header.site {
  background: rgba(255, 253, 249, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--surface2);
  padding: 1rem 1.35rem;
  display: flex; flex-wrap: wrap; gap: .85rem 1.25rem;
  align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 20;
}
.logo {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.2rem; color: var(--ink); text-decoration: none;
  letter-spacing: -0.02em;
}
.logo span { color: var(--accent); }
nav {
  display: flex; flex-wrap: wrap; gap: .35rem .15rem; align-items: center;
}
nav a {
  color: var(--muted); text-decoration: none;
  margin-left: .55rem; font-size: .92rem; font-weight: 600;
  padding: .35rem .45rem; border-radius: 8px;
}
nav a:hover { color: var(--ink); background: var(--bg-deep); }
main { max-width: var(--max); margin: 0 auto; padding: 2rem 1.25rem 3.5rem; }
h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  line-height: 1.22; margin: 0 0 .9rem; font-weight: 700; color: var(--ink);
}
h2 {
  font-family: var(--font-display);
  font-size: 1.4rem; margin: 2.25rem 0 .8rem; color: var(--accent); font-weight: 700;
}
h3 { font-size: 1.08rem; margin: 1.1rem 0 .4rem; color: var(--ink); }
.lead { font-size: 1.12rem; color: var(--muted); margin-bottom: 1.35rem; max-width: 40rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--surface2);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
  margin: 1.1rem 0;
  box-shadow: var(--shadow);
}
.card.urgent {
  border-color: transparent;
  background:
    linear-gradient(135deg, #E4F0E8 0%, #fffdf9 42%, #ffe8df 78%, #fff3cc 100%);
  box-shadow: var(--shadow);
}
.hero {
  padding: 1.9rem 1.55rem 1.7rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(47, 93, 74, 0.12);
}
.hero::before {
  content: "";
  position: absolute; inset: auto -20% -40% auto;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(233, 180, 76, 0.35), transparent 68%);
  pointer-events: none;
}
.hero-kicker {
  display: inline-block;
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #2A5342; background: linear-gradient(90deg, #C5D9CB, #fde68a);
  padding: .35rem .75rem; border-radius: 999px; margin-bottom: .9rem;
}
.hero-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
  margin-top: 1.35rem;
}
.path-card {
  display: flex; flex-direction: column; gap: .35rem;
  text-decoration: none; color: inherit;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 1.05rem 1.1rem;
  min-height: 7.4rem;
  box-shadow: var(--shadow);
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(135deg, #5F8F74, #e9b44c 55%, #e07a5f);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: transform .15s ease, box-shadow .15s ease;
}
.path-card:nth-child(1) { background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #2F5D4A, #5F8F74); }
.path-card:nth-child(2) { background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #e9b44c, #e07a5f); }
.path-card:nth-child(3) { background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #2F5D4A, #8FB39A); }
.path-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop);
  color: inherit;
}
.path-card strong { color: var(--ink); font-size: 1.05rem; }
.path-card span { color: var(--muted); font-size: .9rem; line-height: 1.4; }
.path-card .path-go { margin-top: auto; color: var(--accent); font-weight: 800; font-size: .88rem; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.btn {
  display: inline-block;
  background: linear-gradient(135deg, #2F5D4A 0%, #5F8F74 55%, #3D7359 100%);
  color: #ffffff !important;
  font-weight: 800;
  text-decoration: none;
  padding: .8rem 1.3rem;
  border-radius: 999px;
  margin: .25rem .4rem .25rem 0;
  border: none;
  cursor: pointer;
  font-size: .95rem;
  box-shadow: 0 6px 16px rgba(47, 93, 74, 0.28);
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn.secondary {
  background: #fff;
  color: #2F5D4A !important;
  border: 2px solid #5F8F74;
  box-shadow: 0 4px 12px rgba(95, 143, 116, 0.15);
}
.btn.secondary:hover { background: var(--accent-soft); }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--surface2);
  border-radius: var(--radius);
  padding: 1.15rem 1.15rem 1.15rem 3.6rem;
  margin: .85rem 0;
  position: relative;
  box-shadow: var(--shadow);
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 1.05rem; top: 1.15rem;
  width: 2rem; height: 2rem;
  background: linear-gradient(145deg, #2F5D4A, #5F8F74);
  color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem;
  box-shadow: 0 4px 10px rgba(47, 93, 74, 0.35);
}
.steps > li:nth-child(2)::before { background: linear-gradient(145deg, #c45c40, #e07a5f); box-shadow: 0 4px 10px rgba(224, 122, 95, 0.35); }
.steps > li:nth-child(3)::before { background: linear-gradient(145deg, #b45309, #e9b44c); box-shadow: 0 4px 10px rgba(233, 180, 76, 0.4); }
.steps > li:nth-child(4)::before { background: linear-gradient(145deg, #2F5D4A, #8FB39A); box-shadow: 0 4px 10px rgba(47, 93, 74, 0.35); }
.steps > li:nth-child(odd) { background: linear-gradient(180deg, #fff 0%, #F2F7F3 100%); }
.steps > li:nth-child(even) { background: linear-gradient(180deg, #fff 0%, #fff7ed 100%); }
.steps > li > h3 {
  margin: 0 0 .55rem;
  font-size: 1.12rem;
  color: var(--ink);
  font-family: var(--font-display);
}
.steps .clean { margin: .35rem 0 .55rem; }
.steps .clean li { margin: .35rem 0; }
.state-picker {
  display: flex; flex-wrap: wrap; gap: .65rem; align-items: end;
  margin: 1rem 0 .5rem;
}
.state-picker label { display: block; font-weight: 700; margin-bottom: .35rem; color: var(--ink); }
.state-picker select {
  min-width: min(100%, 280px);
  padding: .72rem .85rem;
  border-radius: 10px;
  border: 1px solid var(--surface2);
  background: #fff;
  color: var(--text);
  font-size: 1rem;
}
.state-picker-fallback {
  margin-top: 1rem;
}
.state-picker-fallback summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--accent2);
}
.state-picker-fallback ul {
  margin: .75rem 0 0;
  padding-left: 1.2rem;
  columns: 2;
  gap: 1.5rem;
}
@media (max-width: 560px) {
  .state-picker-fallback ul { columns: 1; }
}
.state-list a {
  display: block;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--surface2);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow);
}
.state-list a:hover { border-color: var(--accent); }
.state-list a small { display: block; color: var(--muted); font-weight: 500; margin-top: .3rem; }
.meta { color: var(--muted); font-size: .9rem; }
.tag {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .75rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  margin-right: .35rem;
  font-weight: 700;
}
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .75rem .35rem; border-bottom: 1px solid var(--surface2); vertical-align: top; }
th { color: var(--muted); font-weight: 700; width: 28%; }
.pricing .card { text-align: center; }
.pricing .price { font-size: 1.85rem; font-weight: 800; color: var(--accent); margin: .5rem 0; }
.pricing .price small { font-size: .85rem; color: var(--muted); font-weight: 600; }
footer {
  border-top: 1px solid var(--surface2);
  background: #ebe2d6;
  padding: 2.25rem 1.25rem;
  color: var(--muted);
  font-size: .9rem;
}
footer .inner { max-width: var(--max); margin: 0 auto; }
footer a { color: var(--accent2); }
footer .prof-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: .78rem;
  color: #7a7168;
  text-decoration: none;
}
footer .prof-link:hover { color: var(--muted); text-decoration: underline; }
.disclaimer {
  background: var(--bg-deep);
  border-radius: 12px;
  padding: .95rem 1.05rem;
  font-size: .88rem;
  color: var(--muted);
  margin-top: 2rem;
}
form.signup label { display: block; margin: .75rem 0 .3rem; font-weight: 700; color: var(--ink); }
form.signup input[type=email], form.signup input[type=text], form.signup input[type=number],
form.signup input[type=date], form.signup select, form.signup textarea {
  width: 100%; max-width: 420px;
  padding: .72rem .85rem;
  border-radius: 10px;
  border: 1px solid var(--surface2);
  background: #fff;
  color: var(--text);
  font-size: 1rem;
}
form.signup textarea { min-height: 100px; max-width: 100%; }
.note { font-size: .88rem; color: var(--warn); }
ul.clean { padding-left: 1.2rem; }
ul.clean li { margin: .45rem 0; }
.source { font-size: .82rem; color: var(--muted); }
.featured-provider {
  margin-top: 1.75rem;
  padding: 1rem 1.1rem;
  border: 1px dashed #cfc3b4;
  border-radius: 12px;
  background: #faf6f0;
}
.featured-provider .fp-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8a8076;
  margin: 0 0 .45rem;
  font-weight: 700;
}
.featured-provider .fp-disclosure {
  font-size: .72rem;
  color: #8a8076;
  margin: .65rem 0 0;
  line-height: 1.4;
}
.featured-provider .fp-empty {
  font-size: .9rem;
  color: var(--muted);
  margin: 0;
}
.card.newsletter h2 { font-size: 1.25rem; color: var(--ink); }
.card.newsletter { margin-top: 1.75rem; background: linear-gradient(160deg, #fffdf9, #f3eade); }
.about-founder[hidden] { display: none !important; }
.tracker-privacy {
  background: var(--accent-soft);
  border: 1px solid #c5ddd4;
  border-radius: 12px;
  padding: .95rem 1.05rem;
  font-size: .92rem;
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.tracker-privacy strong { color: var(--accent); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .85rem;
  margin: 1rem 0 1.25rem;
}
.stat {
  background: #fff;
  border: 1px solid var(--surface2);
  border-radius: 14px;
  padding: 1.05rem;
  text-align: center;
}
.stat .num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.stat .label {
  display: block;
  font-size: .84rem;
  color: var(--muted);
  margin-top: .4rem;
}
.milestone-list { list-style: none; padding: 0; margin: 0; }
.milestone {
  border: 1px solid var(--surface2);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin: .7rem 0;
  background: #fff;
}
.milestone.reached {
  border-color: #9cc9b8;
  background: linear-gradient(165deg, var(--accent-soft) 0%, #fff 70%);
}
.milestone-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .35rem;
}
.milestone-badge {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .22rem .55rem; border-radius: 999px;
  background: var(--bg-deep); color: var(--muted); font-weight: 800;
}
.milestone.reached .milestone-badge { background: var(--accent); color: #fff; }
.milestone p { margin: 0; color: var(--muted); font-size: .94rem; }
.tracker-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.btn.ghost {
  background: transparent; color: var(--muted) !important;
  border: 1px solid var(--surface2); font-weight: 700; box-shadow: none;
}
.btn.ghost:hover { border-color: var(--muted); color: var(--ink) !important; }
.btn.danger-outline {
  background: transparent; color: #8b3d3d !important;
  border: 1px solid #d4a5a5; font-weight: 700; box-shadow: none;
}
fieldset.tracker-fields { border: none; padding: 0; margin: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.error-msg { color: #8b3d3d; font-size: .9rem; margin: .5rem 0 0; }
#tracker-dashboard:focus { outline: 3px solid var(--warm); outline-offset: 4px; }

.grid > .card:nth-child(4n+1) { border-top: 3px solid #5F8F74; }
.grid > .card:nth-child(4n+2) { border-top: 3px solid #e9b44c; }
.grid > .card:nth-child(4n+3) { border-top: 3px solid #e07a5f; }
.grid > .card:nth-child(4n+4) { border-top: 3px solid #8FB39A; }
.card.newsletter {
  background: linear-gradient(145deg, #EAF3ED 0%, #fffdf9 45%, #fff7ed 100%) !important;
  border: 1px solid rgba(47, 93, 74, 0.18);
}
.card.newsletter .btn { background: linear-gradient(135deg, #c45c40, #e07a5f 60%, #e9b44c); box-shadow: var(--shadow-pop); }
.state-list a { border-top: 3px solid #5F8F74; }
.stat .num { background: linear-gradient(120deg, #2F5D4A, #e07a5f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.milestone.reached { border-color: #8FB39A; }
.milestone.reached .milestone-badge { background: linear-gradient(135deg, #2F5D4A, #5F8F74); }
.icon-dot {
  display: inline-block; width: .65rem; height: .65rem; border-radius: 50%;
  margin-right: .4rem; vertical-align: middle;
  background: linear-gradient(135deg, #5F8F74, #e9b44c);
}
section.band-mint { background: var(--bg-mint); border-radius: var(--radius); padding: 1.25rem 1.2rem; margin: 1.5rem 0; }
section.band-sunrise { background: var(--bg-sunrise); border-radius: var(--radius); padding: 1.25rem 1.2rem; margin: 1.5rem 0; }
@media (max-width: 720px) {
  .hero-paths { grid-template-columns: 1fr; }
  nav a { margin-left: .15rem; font-size: .86rem; }
  main { padding: 1.35rem 1rem 2.75rem; }
  .hero { padding: 1.35rem 1.15rem; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  header.site { padding: .85rem 1rem; }
}