:root{
  --ink:#2b3325;
  --muted:#66705b;
  --line:#dde3d5;
  --paper:#ffffff;
  --paper-soft:#f7f9f4;
  --accent:#818e6e;
  --accent-2:#6f7c5e;
  --accent-deep:#4f5a43;
}

*{box-sizing:border-box}

body{
  margin:0;
  color:var(--ink);
  font-family:"Source Sans 3", ui-sans-serif, sans-serif;
  background:
    radial-gradient(860px 360px at 96% -8%, #818e6e2b 0%, transparent 58%),
    radial-gradient(780px 320px at -6% 4%, #6f7c5e1c 0%, transparent 62%),
    #f1f4ed;
}

.wrap{max-width:1120px;margin:30px auto;padding:0 18px}

.brand-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-bottom:14px;
  text-decoration:none;
}
.brand-logo img{
  width:auto;
  height:36px;
  display:block;
}

.hero{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
  margin-bottom:14px;
  align-items:stretch;
}

.hero-copy,.hero-kpi{
  background:linear-gradient(160deg,#ffffff 0%,#f8faf5 100%);
  border:1px solid #d8dfd1;
  border-radius:8px;
  padding:18px;
  color:var(--ink);
}

.eyebrow{
  display:inline-block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#6f7b60;
  border:1px solid #d1d9c7;
  border-radius:999px;
  padding:4px 8px;
}

h1{
  margin:10px 0 8px;
  font-family:"Space Grotesk", ui-sans-serif, sans-serif;
  font-size:40px;
  line-height:1.04;
}

.hero-copy{
  text-align:center;
}

.hero-copy p{
  margin:0 auto;
  max-width:760px;
  font-size:17px;
  color:#596451;
}

.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;justify-content:center}

.btn{
  display:inline-block;
  text-decoration:none;
  border-radius:7px;
  padding:10px 13px;
  font-weight:700;
  border:1px solid transparent;
}

.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:#ffffff;color:var(--accent-deep);border-color:#c8d0be}
.btn-ghost:hover{border-color:#aab59d;background:#f8faf5}

.hero-kpi{display:grid;gap:10px;align-content:center}
.kpi{
  border:1px solid #d8dfd1;
  background:#ffffff;
  border-radius:7px;
  padding:10px 12px;
  text-align:center;
}
.kpi span{display:block;font-size:12px;color:#7b876f}
.kpi b{font-size:20px;color:#3d4933}

.section{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px;
  margin:12px 0;
}

.section-head h2{
  margin:0 0 10px;
  font-family:"Space Grotesk", ui-sans-serif, sans-serif;
  font-size:22px;
  letter-spacing:.1px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.card{
  border:1px solid #d8dfd1;
  background:var(--paper-soft);
  border-radius:7px;
  padding:14px;
  min-height:176px;
  display:flex;
  flex-direction:column;
}
.card.is-clickable{cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease, transform .08s ease}
.card.is-clickable:hover{border-color:#c5cebb;box-shadow:0 8px 20px rgba(43,51,37,.08)}
.card.is-clickable:focus-visible{outline:2px solid #b8c4a8;outline-offset:2px}
.card.is-clickable:active{transform:translateY(1px)}

.chip{
  display:inline-block;
  width:fit-content;
  border-radius:999px;
  border:1px solid #c8d2be;
  background:#eff4e8;
  color:#5c6a4f;
  font-size:11px;
  padding:3px 8px;
}
.chip.live{
  border-color:#b7c6a0;
  background:#e9f0df;
  color:#566447;
}

.card h3{
  margin:10px 0 7px;
  font-family:"Space Grotesk", ui-sans-serif, sans-serif;
  font-size:22px;
  line-height:1.05;
}

.card p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.28;
}

.card-link{
  margin-top:auto;
  padding-top:12px;
  font-weight:700;
  color:var(--accent);
  text-decoration:none;
}
.card-link:hover{color:var(--accent-2)}
.card-link.muted{color:#8a9580}

@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  h1{font-size:33px}
  .grid{grid-template-columns:1fr 1fr}
}

@media (max-width:700px){
  .grid{grid-template-columns:1fr}
}