body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; background: #f6f3ec; color: #111; }
h1, h2 { font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif; letter-spacing: 0.1px; }
.container { max-width: 1040px; margin: 0 auto; padding: 28px 20px; }
a { color: #1f4d3f; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 18px; margin-top: 12px; }

.feature-card {
  display: block;
  background: #fff;
  border: 1px solid #d9d1c3;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 12, 7, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  border-color: #c2b8a7;
  box-shadow: 0 10px 24px rgba(20, 17, 12, 0.08);
}

.card-visual {
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid #e4ddcf;
  background: #f3ecde;
}

.card-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

.card-copy { padding: 16px 18px 18px; }

.eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f6659;
  font-weight: 600;
}

.card-copy h2 { margin: 0 0 8px; font-size: 27px; line-height: 1.15; }
.card-copy p { margin: 0; color: #3f3a31; }

.card-cta {
  margin-top: 14px;
  display: inline-block;
  color: #1f4d3f;
  font-weight: 600;
}

.tabs { margin: 14px 0; display: flex; gap: 8px; }
.tabs button { border: 1px solid #cfc6b8; background: #fff; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-weight: 500; }
.tabs button.active { background: #1f4d3f; color: #fff; border-color: #1f4d3f; }
.hidden { display: none; }
#state-controls { margin-bottom: 12px; }
#state-select { border: 1px solid #cfc6b8; background: #fff; border-radius: 8px; padding: 6px 8px; }
canvas { background: #fff; border: 1px solid #d9d1c3; border-radius: 12px; padding: 8px; }
.company-legend { margin: 12px 0 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #3f3a31; background: #fff; border: 1px solid #d9d1c3; border-radius: 999px; padding: 5px 10px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.table-wrap { margin-top: 10px; overflow-x: auto; background: #fff; border: 1px solid #d9d1c3; border-radius: 12px; }
.coverage-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.coverage-table th, .coverage-table td { padding: 10px 12px; border-bottom: 1px solid #eee7db; text-align: left; }
.coverage-table thead th { background: #faf7f0; color: #4f493f; font-weight: 600; }
.coverage-table tbody tr:last-child td { border-bottom: none; }
.kpis { margin-top: 12px; display: grid; grid-template-columns: repeat(2,minmax(180px,1fr)); gap: 10px; }
.kpi { background: #fff; border: 1px solid #d9d1c3; border-radius: 10px; padding: 11px; }
.kpi .label { color: #5e5a53; font-size: 12px; }
.kpi .value { font-size: 20px; font-weight: 700; }