:root{
  --fg-green:#177A3B;
  --fg-dark:#111111;
  --fg-light:#f6f7f8;
}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;color:var(--fg-dark);background:#fff}
a{color:var(--fg-green);text-decoration:none}
header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #eef1f3}
.container{max-width:1100px;margin:0 auto;padding:0 18px}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand img{display:block;height:28px;width:auto}
nav a{margin:0 10px}
.btn{display:inline-block;padding:12px 16px;border-radius:14px;border:1px solid var(--fg-green);}
.btn-primary{background:var(--fg-green);color:#fff}
.btn-outline{background:#fff;color:var(--fg-green)}
.btn-secondary{background:#e9f3ed;color:var(--fg-dark);border-color:#cde6d6}
.hero{background:#f3f5f7;padding:48px 0}
.hero h1{font-size:44px;line-height:1.05;margin:0 0 12px}
.hero p{font-size:18px;max-width:720px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}
.card{background:#fff;border:1px solid #eef1f3;border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.04)}
.card h3{margin-top:0}
.footer{padding:24px 0;border-top:1px solid #eef1f3;margin-top:40px}
.sound-toggle{font-size:16px;line-height:1;padding:8px 10px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;cursor:pointer}
.sound-toggle[aria-pressed="true"]{background:var(--fg-green);color:#fff;border-color:var(--fg-green)}
/* Bay columns */
.bay-columns{display:grid;grid-template-columns:1fr 1fr; gap:18px}
@media (max-width: 768px){
  .cards{grid-template-columns:1fr}
  .bay-columns{display:block}
  .bay-columns>div{width:100%!important;margin-bottom:1.5rem}
  .hero h1{font-size:36px}
}
/* Modal */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;z-index:60}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.modal-card{position:relative;margin:6vh auto;max-width:560px;background:#fff;border-radius:14px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.modal-x{position:absolute;top:10px;right:12px;font-size:22px;background:none;border:0;cursor:pointer}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid .full{grid-column:1 / -1}
label{display:flex;flex-direction:column;font-size:14px;gap:6px}
input, textarea{border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px}
/* Table compare */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #eef1f3;padding:10px 12px;text-align:left}
.table th{background:#f7faf9}
.badge-hero{display:flex;align-items:center;gap:18px}
.badge-hero img{height:72px;width:auto}

/* --- Refinements --- */
h1{margin:18px 0 8px}
h2{margin:30px 0 10px}
h3{margin:12px 0 8px}
.section{padding:28px 0}
.hero .container{display:flex;align-items:center;gap:20px}
.card{background:linear-gradient(180deg,#ffffff 0%, #fbfdfb 100%);}
.card .muted{color:#6a7580;font-size:14px}
.kpi-list li{margin:6px 0}
/* Buttons visual uplift */
.btn{box-shadow:0 4px 12px rgba(23,122,59,.06)}
.btn:hover{filter:brightness(0.98)}
/* Modal watermark */
.modal-card{
  background-image:url('/assets/images/wordmark.svg');
  background-repeat:no-repeat;
  background-position: 96% 92%;
  background-size: 160px auto;
  background-blend-mode: multiply;
  opacity:0.99;
}
/* Bland page containers spacing */
.page-body{min-height:48vh;padding-top:10px}
/* Table tweak */
.table th,.table td{font-size:14px}
/* Badges for cards */
.badge{display:inline-block;background:#e9f3ed;color:#177A3B;padding:4px 8px;border-radius:999px;font-size:12px;margin-bottom:8px}