:root{
  --bg:#F6F7F4;
  --surface:#FFFFFF;
  --ink:#1C2420;
  --muted:#516058;
  --line:#D9E1DB;
  --accent:#3F7D5A;
  --accent2:#8DB89B;
  --sand:#E9E0D2;
  --radius:24px;
  --shadow: 0 18px 40px rgba(28,36,32,.08);
  --shadow-soft: 0 10px 24px rgba(28,36,32,.06);
  --max: 1120px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background: radial-gradient(900px 500px at 15% 10%, rgba(141,184,155,.25), transparent 55%),
              radial-gradient(700px 420px at 88% 18%, rgba(233,224,210,.35), transparent 55%),
              var(--bg);
  line-height:1.5;
}
a{color:inherit}
img{max-width:100%; display:block}
.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:12px; top:12px; width:auto; height:auto; padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; z-index:10}

.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background: rgba(246,247,244,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.brandmark{display:flex; gap:10px; align-items:center; text-decoration:none}
.brandmark__dot{width:14px; height:14px; border-radius:999px; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: var(--shadow-soft)}
.brandmark__name{font-weight:750; letter-spacing:.2px}
.topnav{display:flex; gap:14px; align-items:center}
.topnav a{text-decoration:none; padding:8px 10px; border-radius:12px; color:var(--muted)}
.topnav a:hover{background:rgba(63,125,90,.10); color:var(--ink)}
.topactions{display:flex; gap:10px; align-items:center}
.cartlink{display:flex; gap:10px; align-items:center; text-decoration:none; padding:10px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); box-shadow: var(--shadow-soft)}
.pill{min-width:28px; text-align:center; padding:4px 8px; border-radius:999px; background:rgba(63,125,90,.12); color:var(--ink); font-weight:700; font-size:12px}

.page{max-width:var(--max); margin:0 auto; padding:22px 18px 46px}
.section{margin:26px 0}
.section--alt{padding:18px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.6)); border:1px solid var(--line)}
.section--tight{margin:18px 0}

.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px}
.section__head h1, .section__head h2{margin:0}
.section__head p{margin:0}

.kicker{margin:0 0 10px; color:var(--muted); font-weight:650; letter-spacing:.3px; font-size:13px}
.lede{font-size:18px; color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px; color:var(--muted)}
.fine{font-size:12px; color:var(--muted); margin:10px 0 0}

.hero--split{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:stretch}
.hero__copy{padding:22px; border:1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.82); box-shadow: var(--shadow)}
.hero__copy h1{margin:0 0 10px; font-size:44px; line-height:1.05}
.hero__art{border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); background: rgba(255,255,255,.55); box-shadow: var(--shadow-soft)}
.heroImg{width:100%; height:100%; object-fit:cover; min-height:360px}

.ctaRow{display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 6px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 14px; border-radius:18px; border:1px solid transparent; text-decoration:none; font-weight:750; cursor:pointer}
.btn--solid{background:var(--accent); color:white; box-shadow: var(--shadow-soft)}
.btn--solid:hover{filter:brightness(1.02)}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{background:rgba(63,125,90,.08)}
.textLink{display:inline-block; margin-top:10px; color:var(--accent); font-weight:750; text-decoration:none}
.textLink:hover{text-decoration:underline}

.trustStrip{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px}
.trustStrip__item{padding:12px; border-radius:18px; border:1px solid var(--line); background: rgba(255,255,255,.72)}
.trustStrip__item strong{display:block; margin-bottom:4px}
.trustStrip__item span{color:var(--muted); font-size:13px}

.grid{display:grid; gap:14px}
.grid--2{grid-template-columns: repeat(2, 1fr)}
.grid--3{grid-template-columns: repeat(3, 1fr)}
.grid--4{grid-template-columns: repeat(4, 1fr)}

.card{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.86);
  padding:16px;
  box-shadow: var(--shadow-soft);
}
.card--soft{background: rgba(255,255,255,.70)}
.card--line{background: rgba(255,255,255,.65); box-shadow:none}
.card h2, .card h3{margin:0 0 8px}
.card p{margin:0}

.split{display:grid; grid-template-columns: .9fr 1.1fr; gap:16px; align-items:center}
.split--reverse{grid-template-columns: 1.1fr .9fr}
.split__media{border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-soft)}
.mediaImg{width:100%; height:320px; object-fit:cover}
.split__copy h2{margin:0 0 8px}

.leadPanel{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:start; padding:18px; border-radius: var(--radius); border:1px solid var(--line); background: rgba(255,255,255,.80); box-shadow: var(--shadow-soft)}
.leadForm{display:grid; gap:10px}
.leadForm label{display:grid; gap:6px}
.label{font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.2px}
input, select, textarea{
  width:100%; padding:12px 12px; border-radius:16px; border:1px solid var(--line);
  background: rgba(255,255,255,.92); color:var(--ink);
}
textarea{resize:vertical}

.filters{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0}
.chipRow{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:10px 12px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.72); cursor:pointer; font-weight:700; color:var(--muted)}
.chip:hover{background: rgba(63,125,90,.08); color:var(--ink)}
.chip.is-on{background: rgba(63,125,90,.12); border-color: rgba(63,125,90,.25); color:var(--ink)}
.sortLabel{display:grid; gap:6px}

.noteCard{padding:18px; border-radius: var(--radius); border:1px solid var(--line); background: rgba(255,255,255,.75)}
.noteCard h2{margin:0 0 10px}
.noteCard p{margin:0 0 10px}
.noteCard p:last-child{margin-bottom:0}

.productShell{display:grid; grid-template-columns: .95fr 1.05fr; gap:16px; align-items:start}
.mediaFrame{border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow)}
.productImg{width:100%; height:420px; object-fit:cover}
.mediaMeta{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.badge{font-size:12px; font-weight:800; padding:6px 10px; border-radius:999px; background: rgba(63,125,90,.12)}
.badge--line{background: transparent; border:1px solid var(--line); color:var(--muted)}
.crumb{display:inline-block; margin-bottom:10px; color:var(--muted); text-decoration:none}
.crumb:hover{text-decoration:underline}
.price{font-size:22px; font-weight:850; margin:10px 0 8px}
.specGrid{display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin:14px 0}
.spec{border-radius:18px; border:1px solid var(--line); padding:12px; background: rgba(255,255,255,.72)}
.spec__k{display:block; font-size:12px; color:var(--muted); font-weight:750}
.spec__v{display:block; font-weight:750}
.buyRow{display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin:14px 0}
.qty{display:grid; gap:6px; min-width:120px}

.cartLayout{display:grid; grid-template-columns: 1.35fr .65fr; gap:14px; align-items:start}
.cartPanel{border:1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.78); padding:14px}
.cartTable{display:grid; gap:10px}
.cartRow{display:grid; grid-template-columns: 1fr auto auto; gap:10px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:18px; background: rgba(255,255,255,.85)}
.cartRow__title{font-weight:850}
.cartRow__meta{font-size:12px; color:var(--muted)}
.cartRow__right{display:flex; gap:8px; align-items:center}
.iconBtn{border:1px solid var(--line); background:transparent; border-radius:14px; padding:10px 12px; cursor:pointer; font-weight:850}
.iconBtn:hover{background: rgba(63,125,90,.08)}

.summaryPanel{display:grid; gap:12px}
.summaryBox{border:1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.78); padding:14px}
.sumRow{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed rgba(81,96,88,.25)}
.sumRow--total{border-bottom:none; font-size:18px}
.leadForm--boxed{border:1px solid var(--line); border-radius: var(--radius); padding:14px; background: rgba(255,255,255,.84)}

.timeline{border:1px solid var(--line); border-radius: var(--radius); padding:18px; background: rgba(255,255,255,.78)}
.steps{margin:10px 0 0; padding-left:18px}
.steps li{margin:8px 0}

.legal h2{margin:18px 0 8px}
.legal p{margin:0 0 10px}

.successCard{border-radius: var(--radius); border:1px solid var(--line); background: rgba(255,255,255,.84); box-shadow: var(--shadow); padding:18px}
.successCard h1{margin:0 0 10px}

.sitefoot{margin-top:30px; border-top:1px solid var(--line); background: rgba(255,255,255,.65)}
.sitefoot__grid{max-width:var(--max); margin:0 auto; padding:18px; display:grid; grid-template-columns: 1.2fr .8fr .8fr 1.2fr; gap:14px}
.sitefoot__col h3, .sitefoot__col h4{margin:0 0 10px}
.footlist{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.footlist a{text-decoration:none; color:var(--muted)}
.footlist a:hover{color:var(--ink); text-decoration:underline}
.sitefoot__bar{border-top:1px solid var(--line); padding:14px 18px}
.sitefoot__bar p{max-width:var(--max); margin:0 auto}

@media (max-width: 980px){
  .hero--split{grid-template-columns:1fr}
  .heroImg{min-height:260px}
  .grid--4{grid-template-columns: repeat(2, 1fr)}
  .grid--3{grid-template-columns: repeat(2, 1fr)}
  .split, .split--reverse{grid-template-columns:1fr}
  .leadPanel{grid-template-columns:1fr}
  .productShell{grid-template-columns:1fr}
  .cartLayout{grid-template-columns:1fr}
  .sitefoot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .grid--2, .grid--3{grid-template-columns:1fr}
  .sitefoot__grid{grid-template-columns:1fr}
  .topnav{display:none}
}