:root {
  --emerald: #0A6847;
  --black: #000000;
  --cream: #F8F0E3;
  --gold: #D4AF37;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', -apple-system, sans-serif; color: var(--black); }
.headline { font-family: 'Bricolage Grotesque', -apple-system, sans-serif; }
a { text-decoration: none; }
img { max-width: 100%; display: block; }

/* Nav */
.cap-nav { position: absolute; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 24px 40px; }
.cap-nav img { height: 37px; width: auto; }
.cap-nav a { color: rgba(248,240,227,0.8); font-size: 14px; font-weight: 500; }
.cap-nav a:hover { color: var(--cream); }

/* Hero */
.cap-hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat; }
.cap-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.6) 50%, rgba(10,104,71,0.5) 100%); }
.cap-hero-inner { position: relative; max-width: 720px; margin: 0 auto; padding: 80px 40px 0; text-align: center; }
.cap-eyebrow { font-family: 'Bricolage Grotesque', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.cap-hero h1 { margin: 20px 0 0; font-size: 44px; font-weight: 800; line-height: 1.1; color: var(--cream); }
.cap-hero-sub { margin: 24px auto 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: rgba(248,240,227,0.85); }
.cap-trust { margin: 24px auto 0; max-width: 560px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 8px; font-size: 14px; color: rgba(248,240,227,0.8); }
.cap-trust span { display: flex; align-items: center; gap: 6px; }
.cap-cta-row { margin-top: 36px; }
.cap-btn-gold { display: inline-block; border-radius: 999px; background: var(--gold); color: #000; padding: 14px 32px; font-size: 14px; font-weight: 700; }
.cap-btn-gold:hover { background: #c29d2e; }

/* Value strip */
.cap-value-strip { background: var(--emerald); padding: 24px 40px; }
.cap-value-strip-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cap-value-strip-grid p { text-align: center; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(248,240,227,0.9); margin: 0; }

/* Section shared */
.cap-section { padding: 80px 40px; }
.cap-section-inner { max-width: 1100px; margin: 0 auto; }
.cap-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.cap-split-img { position: relative; border-radius: 24px; overflow: hidden; height: 420px; }
.cap-split-img img { width: 100%; height: 100%; object-fit: cover; }
.cap-why { background: var(--cream); }
.cap-why h2 { margin: 16px 0 0; font-size: 32px; font-weight: 700; }
.cap-why p { margin-top: 24px; font-size: 16px; line-height: 1.7; color: rgba(0,0,0,0.7); }
.cap-badges { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cap-badge { border: 1px solid rgba(10,104,71,0.15); background: #fff; border-radius: 16px; padding: 20px 16px; text-align: center; font-size: 14px; font-weight: 600; color: var(--emerald); }

/* Products */
.cap-products { background: #fff; text-align: center; }
.cap-products h2 { margin: 16px 0 0; font-size: 32px; font-weight: 700; }
.cap-products-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.cap-product-card { border: 1px solid rgba(0,0,0,0.1); border-radius: 16px; padding: 40px 24px; }
.cap-product-card .cap-jar { width: 44px; height: 72px; margin: 0 auto 24px; background: rgba(10,104,71,0.08); border: 1.5px solid var(--emerald); border-radius: 8px; position: relative; }
.cap-product-card .cap-jar::before { content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:12px; height:8px; background:var(--gold); border-radius:2px; }
.cap-product-card h3 { font-size: 17px; font-weight: 700; margin: 0; }
.cap-product-card p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: rgba(0,0,0,0.6); }
.cap-empty { grid-column: 1 / -1; font-size: 14px; color: rgba(0,0,0,0.5); }

/* Community */
.cap-community { background: var(--cream); }

/* How it works */
.cap-how { background: #000; text-align: center; }
.cap-how h2 { margin: 16px 0 0; font-size: 32px; font-weight: 700; color: var(--cream); }
.cap-steps { margin-top: 56px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; text-align: left; }
.cap-step-n { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; font-weight: 800; color: var(--gold); margin: 0; }
.cap-step h3 { margin: 12px 0 0; font-size: 15px; font-weight: 700; color: var(--cream); }
.cap-step p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: rgba(248,240,227,0.6); }
.cap-how-closing { margin: 56px auto 0; max-width: 640px; font-size: 14px; line-height: 1.7; color: rgba(248,240,227,0.5); }

/* Final CTA */
.cap-final { position: relative; padding: 96px 40px; text-align: center; overflow: hidden; background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat; }
.cap-final::before { content: ""; position: absolute; inset: 0; background: rgba(10,104,71,0.9); }
.cap-final-inner { position: relative; }
.cap-final h2 { font-size: 32px; font-weight: 700; color: var(--cream); margin: 0; }
.cap-final p { margin: 16px auto 0; max-width: 380px; font-size: 14px; color: rgba(248,240,227,0.8); }
.cap-final-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.cap-final-actions a.secondary { color: rgba(248,240,227,0.8); font-size: 14px; font-weight: 600; }
.cap-final-actions a.secondary:hover { color: var(--cream); text-decoration: underline; }

/* Footer */
.cap-footer { background: #000; padding: 40px; }
.cap-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.cap-footer img { height: 26px; width: auto; }
.cap-footer p { margin: 0; font-size: 12px; color: rgba(248,240,227,0.5); }

@media (max-width: 860px) {
  .cap-split, .cap-badges, .cap-products-grid { grid-template-columns: 1fr; }
  .cap-steps { grid-template-columns: repeat(2, 1fr); }
  .cap-hero h1 { font-size: 32px; }
}