:root{
  --pgi-green:#1B3735;          /* dark header/footer */
  --pgi-light:#C9D8A8;          /* light green page bg from screenshot */
  --pgi-white:#FFFFFF;
  --pgi-accent:#DDE8D0;
  --radius:16px;
  --shadow:0 8px 22px rgba(0,0,0,.25);
}

/* base */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--pgi-light);     /* PAGE background = light green */
  color:#0f261f;
  font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* header / footer bars (dark) */
.header{background:var(--pgi-green); padding:28px 16px}
.footer-bar{background:var(--pgi-green); margin-top:40px; padding:22px 16px; color:#d6e3df}

.wrap{max-width:1120px;margin:0 auto;display:flex;gap:16px;align-items:center;justify-content:space-between}
.logo{display:flex;gap:14px;align-items:center;justify-content:center;width:100%}
.logo img{height:160px; display:block}        /* bigger logo */
@media (max-width:720px){.logo img{height:110px}}

.badge{font-size:12px;border:1px solid rgba(255,255,255,.35);padding:4px 8px;border-radius:999px}

/* hero & layout */
h1{margin:0;font-size:34px;color:#0f261f}
.small{font-size:13px;opacity:.85}
.main{max-width:1120px;margin:16px auto 56px;padding:0 16px}

/* grid & cards */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:980px){.grid{grid-template-columns:1fr}}
.card{
  background:#fff;color:#0f261f;border-radius:16px;box-shadow:var(--shadow);
  padding:24px;border:1px solid #d9e6e1;display:flex;flex-direction:column
}
.kicker{display:inline-block;font-size:12px;font-weight:800;background:#e8f0e1;padding:4px 8px;border-radius:999px;margin-bottom:10px}
.title{font-weight:800}
.price{font-size:40px;font-weight:900;margin:8px 0 4px}
.per{color:#4a5c58;margin-bottom:12px}
ul{list-style:none;margin:0 0 16px;padding:0}
li{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.check{height:22px;width:22px;border-radius:999px;background:var(--pgi-accent);display:inline-flex;align-items:center;justify-content:center;font-weight:900;color:#0f261f}

/* buttons (with icon) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#1B3735;color:#fff;text-decoration:none;
  padding:12px 16px;border-radius:12px;border:1px solid #0e1d19;font-weight:800;text-align:center
}
.btn.alt{background:transparent;border-color:#1B3735;color:#1B3735}
.btn .icon{height:18px;width:auto;display:block}

/* clickability hardening */
.header, .main, .footer-bar, .wrap, .card { position: relative; z-index: 1; }
a.btn { position: relative; z-index: 10; pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; }
.icon { pointer-events: none; vertical-align: -2px; }