:root{
  --green:#2f6b3a;
  --green2:#5d8f62;
  --text:#203126;
  --muted:#66736a;
  --bg:#f7faf7;
  --card:#ffffff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}
.wrap{max-width:860px;margin:auto;padding:18px}
.hero{
  background:linear-gradient(180deg,#fff,#f4f8f4);
  border-radius:24px;
  padding:24px 18px;
  text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.06);
}
.brand{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--green2);font-weight:700}
h1{font-size:34px;line-height:1.05;margin:10px 0 8px;color:var(--green)}
.subtitle{font-size:18px;color:var(--muted);margin:0 auto 18px;max-width:620px}
.product{
  display:block;
  width:min(320px,76vw);
  margin:10px auto 0;
  border-radius:18px;
}
.card{
  background:var(--card);
  border-radius:20px;
  padding:22px;
  margin-top:16px;
  box-shadow:0 6px 22px rgba(0,0,0,.05);
}
h2{font-size:22px;margin:0 0 10px;color:var(--green)}
ul{padding-left:22px;margin:8px 0}
li{margin:7px 0}
.cta{
  display:block;
  width:100%;
  text-align:center;
  background:var(--green);
  color:white;
  text-decoration:none;
  padding:15px 18px;
  border-radius:14px;
  font-weight:700;
  font-size:18px;
  margin-top:14px;
}
.small{font-size:13px;color:#7c887f;text-align:center;margin-top:16px}
a.inline{color:var(--green);font-weight:700}
@media (min-width:700px){
  .hero{padding:34px}
  h1{font-size:44px}
}