:root{
  --brand: rgb(0 179 110);
  --brand2: rgb(255 122 0);
  --brand3: rgb(20 184 166);
  --ink: rgb(15 23 42);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial; color:var(--ink);
  background: radial-gradient(900px 500px at 15% 12%, rgba(0,179,110,0.12), transparent 60%),
              radial-gradient(900px 500px at 85% 0%, rgba(255,122,0,0.10), transparent 60%),
              #fff;
}
.header{
  padding:24px 28px;
  border-bottom:1px solid rgba(0,0,0,0.10);
  background: linear-gradient(90deg, rgba(0,179,110,0.10), rgba(20,184,166,0.10), rgba(255,122,0,0.10));
}
.brandRow{display:flex; align-items:center; gap:14px}
.logo{width:44px; height:44px; border-radius:14px; border:1px solid rgba(0,0,0,0.10); background:#fff; padding:6px}
.h1{margin:0; font-size:22px; font-weight:800; letter-spacing:-0.02em}
.sub{margin:4px 0 0; font-size:13px; color:rgba(15,23,42,0.75); line-height:1.6}
.main{padding:24px 28px;}
.grid{display:grid; gap:14px; grid-template-columns: 1fr 1fr;}
.card{
  border:1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(10px);
  border-radius:18px;
  padding:16px;
}
.card h2{margin:0 0 8px; font-size:15px}
.card p{margin:0; font-size:13px; line-height:1.75; color:rgba(15,23,42,0.78)}
ul{margin:8px 0 0; padding-inline-start:18px}
li{margin:4px 0; font-size:13px; line-height:1.7; color:rgba(15,23,42,0.78)}
.kpi{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.pill{padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,0.10); background: rgba(0,179,110,0.06); font-size:12px}
.footer{padding:18px 28px; border-top:1px solid rgba(0,0,0,0.10); font-size:12px; color:rgba(15,23,42,0.70)}
.footer a{color:inherit}
@media print{
  body{background:#fff}
  .card{background:#fff}
  a{color:var(--ink); text-decoration:none}
}