*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0c2419;color:#c2d3c6;
  font:17px/1.78 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding-bottom:0}
a{color:#d4a437} a:hover{color:#8cc63f}
img{max-width:100%;height:auto;display:block}
.w{max-width:1080px;margin:0 auto;padding:0 20px}
.rd{max-width:760px;margin:0 auto}

/* header */
.hd{position:sticky;top:0;z-index:80;background:#081a12;border-bottom:1px solid rgba(190,220,195,.15)}
.hdin{display:flex;align-items:center;gap:20px;height:66px}
.lg img{height:28px;width:auto}
.nv{display:flex;gap:19px;margin-left:auto;flex-wrap:wrap}
.nv a{color:#8ea595;font-size:14.5px;font-weight:600;text-decoration:none}
.nv a:hover,.nv a[aria-current=page]{color:#d4a437}
.cta{background:#d4a437;color:#081a12!important;font-weight:800;padding:10px 21px;border-radius:4px;
  font-size:14px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
.cta:hover{background:#8cc63f;color:#081a12!important}

/* hero */
.hero{background:linear-gradient(160deg,#081a12 0%,#0c2419 60%,#102e20 100%);
  padding:64px 0 52px;text-align:center;border-bottom:1px solid rgba(190,220,195,.15)}
.kick{display:inline-block;border:1px solid #d4a437;color:#d4a437;font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;padding:6px 15px;border-radius:2px;margin-bottom:20px}
h1{color:#f4f7f2;font-size:clamp(30px,4.5vw,48px);line-height:1.11;margin:0 0 18px;font-weight:800;
  letter-spacing:-.025em}
h1 em{font-style:normal;color:#d4a437}
.dek{font-size:18px;color:#8ea595;margin:0 auto 26px;max-width:60ch}
.hb{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.gh{border:1px solid rgba(190,220,195,.15);color:#f4f7f2!important;padding:9px 21px;border-radius:4px;font-weight:600;
  font-size:14px;text-decoration:none}
.gh:hover{border-color:#d4a437}

/* full-bleed alternating bands — the signature */
.band{padding:46px 0;border-bottom:1px solid rgba(190,220,195,.15)}
.band:nth-of-type(even){background:#102e20}
.band h2{color:#f4f7f2;font-size:clamp(23px,2.9vw,32px);line-height:1.2;margin:0 0 16px;
  font-weight:800;letter-spacing:-.018em;scroll-margin-top:84px}
.band h3{color:#d4a437;font-size:19px;margin:26px 0 9px;font-weight:700}
p{margin:0 0 17px} ul,ol{margin:0 0 18px;padding-left:22px} li{margin-bottom:9px}
strong{color:#f4f7f2}

/* numbered step markers */
.steps{counter-reset:st;list-style:none;margin:24px 0;padding:0}
.steps li{counter-increment:st;position:relative;padding:0 0 20px 62px;margin:0}
.steps li::before{content:counter(st);position:absolute;left:0;top:-6px;width:44px;height:44px;
  border-radius:50%;border:2px solid #d4a437;color:#d4a437;font-weight:800;font-size:17px;
  display:grid;place-items:center;background:#081a12}
.steps b{display:block;color:#f4f7f2;margin-bottom:4px;font-size:17px}
.steps .t{display:inline-block;color:#8cc63f;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:6px}

/* compare cards */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.cmp>div{background:#163826;border:1px solid rgba(190,220,195,.15);border-radius:10px;padding:18px 20px}
.cmp h3{margin:0 0 10px;font-size:15.5px;letter-spacing:.04em;text-transform:uppercase}
.cmp ul{margin:0;padding-left:19px;font-size:15px} .cmp li{margin-bottom:7px}
.cmp .a h3{color:#8cc63f} .cmp .b h3{color:#d4a437}

.note{background:#163826;border-left:4px solid #d4a437;border-radius:0 10px 10px 0;padding:18px 22px;
  margin:22px 0}
.note.alt{border-left-color:#8cc63f}
.note h3{margin-top:0;color:#f4f7f2}

.tw{overflow-x:auto;margin:24px 0;border:1px solid rgba(190,220,195,.15);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:480px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(190,220,195,.15)}
th{background:#081a12;color:#d4a437;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
tr:last-child td{border-bottom:0} td:first-child{color:#f4f7f2;font-weight:600}

details{background:#163826;border:1px solid rgba(190,220,195,.15);border-radius:9px;padding:15px 19px;margin-bottom:10px}
summary{cursor:pointer;font-weight:700;color:#f4f7f2;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:#d4a437;font-weight:800}
details[open] summary::after{content:"\2212"}
details p{margin:11px 0 0;color:#8ea595}

/* footer */
.ft{background:#081a12;border-top:2px solid #d4a437;padding:42px 0 28px;font-size:14px;color:#8ea595}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;margin-bottom:26px}
.fg h4{color:#f4f7f2;font-size:14px;margin:0 0 12px}
.fg a{color:#8ea595;display:block;margin-bottom:8px;text-decoration:none}
.fg a:hover{color:#d4a437}
.lgl{border-top:1px solid rgba(190,220,195,.15);padding-top:18px;font-size:12.8px;line-height:1.7}
.so{display:flex;gap:10px;margin-top:14px}
.so a{width:34px;height:34px;border-radius:6px;background:rgba(255,255,255,.07);
  display:grid;place-items:center;margin:0}
.so a:hover{background:rgba(255,255,255,.14)}
.so svg{width:17px;height:17px;display:block}

/* sticky bottom CTA — mobile only, another structural signature */
.dock{display:none}
@media(max-width:820px){
  .cmp{grid-template-columns:1fr} .fg{grid-template-columns:1fr 1fr}
  body{padding-bottom:64px}
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;background:#081a12;
    border-top:1px solid rgba(190,220,195,.15);padding:10px 16px;gap:12px;align-items:center}
  .dock span{color:#c2d3c6;font-size:13.5px;flex:1}
  .dock a{white-space:nowrap}
}
@media(max-width:700px){
  .nv{display:none} .hdin{height:58px} .hero{padding:46px 0 38px}
  .fg{grid-template-columns:1fr} .steps li{padding-left:54px}
  .steps li::before{width:38px;height:38px;font-size:15px}
}