:root{font-family:system-ui,sans-serif;color:#18352c;background:#f8faf7;line-height:1.65}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1120px;margin:auto;padding:24px}header,nav,.actions,footer{display:flex;gap:24px;align-items:center}header{justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-weight:750;text-decoration:none}.brand img{width:42px;height:42px;border-radius:12px}a{color:#046a4e;text-underline-offset:4px}.button{display:inline-block;background:#046a4e;color:white;padding:12px 20px;border-radius:10px;font-weight:650;text-decoration:none}.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;padding:64px 0}h1{font-size:clamp(2.3rem,5vw,4.3rem);line-height:1.08;letter-spacing:-.04em;margin:16px 0 24px}h2{line-height:1.25}p{color:#4a6258}.eyebrow,.step{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:750;color:#046a4e}.small{font-size:.85rem}.preview,article,.support{background:white;border:1px solid #dce7de;border-radius:20px;padding:28px}.metric{font-size:2.7rem;font-weight:750}.metric small{display:block;font-size:.85rem;font-weight:400}.sample-row{display:flex;justify-content:space-between;padding:18px 0;border-bottom:1px solid #e6eee8}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0 48px}.support{background:#eaf4ed;margin:40px 0}.document{max-width:760px;margin:32px auto}.document h1{font-size:2.7rem}.document h2{margin-top:32px}footer{border-top:1px solid #dce7de;flex-wrap:wrap;font-size:.85rem}a:focus-visible{outline:3px solid #ba701b;outline-offset:5px}@media(max-width:700px){header{align-items:flex-start;gap:16px;flex-wrap:wrap}nav{gap:16px}.hero{grid-template-columns:1fr;gap:28px;padding:32px 0}.cards{grid-template-columns:1fr}.actions{flex-wrap:wrap}main,header,footer{padding:20px}}

/* Public interactions and compact layouts */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 24px; }
button, summary { font: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
button { min-width: 44px; min-height: 44px; border: 1px solid #b9cfc2; border-radius: 10px; background: #fff; color: #18352c; }
button:hover { background: #eaf4ed; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, summary:focus-visible { outline: 3px solid #ba701b; outline-offset: 4px; }
.button { min-height: 44px; transition: background .18s ease, transform .18s ease; }
.button:hover { background: #034d39; transform: translateY(-2px); }
.button:active { transform: translateY(0); }
nav a:not(.button), footer a { display: inline-flex; min-height: 44px; align-items: center; }
.demo-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; }
.demo-tabs button { flex: 1; padding: 8px 12px; }
.demo-tabs button[aria-pressed="true"] { color: white; background: #046a4e; border-color: #046a4e; }
.preview { box-shadow: 0 20px 60px #18352c0d; min-width: 0; }
.preview section { min-height: 260px; }
.preview [hidden] { display: none; }
.quantity { display: flex; gap: 10px; align-items: center; }
.quantity output { min-width: 24px; text-align: center; font-weight: 700; }
.sample-row { gap: 12px; }
.sample-row small { color: #4a6258; }
.metric { font-variant-numeric: tabular-nums; margin-top: 20px; }
.metric small { line-height: 1.5; }
.stock-warning { color: #86500b; }
.faq { max-width: 800px; margin: 64px auto; }
.faq details { border-bottom: 1px solid #dce7de; padding: 8px 0; }
.faq summary { padding: 16px 4px; font-weight: 650; min-height: 48px; }
.faq details p { padding: 0 4px 16px; margin: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; padding: 12px; background: white; z-index: 10; }
.skip-link:focus { top: 12px; }
h1, h2, h3 { overflow-wrap: anywhere; text-wrap: balance; }
article, .hero > div { min-width: 0; }
@media (max-width: 1000px) { .hero { gap: 28px; } .cards { gap: 14px; } article { padding: 22px; } }
@media (max-width: 700px) {
  .brand { max-width: 100%; font-size: .95rem; }
  header nav { width: 100%; justify-content: space-between; }
  .hero { padding-top: 24px; }
  .preview { padding: 22px; }
  .preview section { min-height: 240px; }
  .actions { gap: 16px; }
  .actions > a { min-height: 44px; display: inline-flex; align-items: center; }
  .metric { font-size: 2.25rem; }
  footer { gap: 12px 20px; }
  footer > span { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } .button:hover { transform: none; } }

/* Retail landing page */
:root { background:#faf9f5; color:#173e31; }
header,main,footer { max-width:1240px; }
header { padding-top:24px; padding-bottom:24px; border-bottom:1px solid #e2e6dc; }
.brand { font-size:.95rem; max-width:300px; line-height:1.35; }
nav { gap:22px; }
nav a { text-decoration:none; font-size:.9rem; font-weight:600; }
.hero { grid-template-columns:1.05fr 1fr; gap:56px; padding:70px 0 80px; }
.hero h1 { font-size:clamp(2.9rem,5.4vw,4.9rem); line-height:1.06; letter-spacing:-.055em; }
.hero h1 em { font-style:normal; color:#047857; }
.hero-copy > p { max-width:490px; font-size:1.08rem; }
.hero-copy .hero-note { font-size:.83rem; margin-top:22px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; letter-spacing:.1em; font-size:.74rem; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#047857; box-shadow:0 0 0 4px #04785712; }
.hero-visual { position:relative; min-width:0; }
.hero-visual > img { display:block; width:100%; height:530px; object-fit:cover; border-radius:140px 20px 20px 20px; }
.photo-caption { position:absolute; bottom:28px; left:24px; right:24px; color:white; font-weight:600; text-shadow:0 1px 5px #000; padding:16px; background:#123b2dc9; border-radius:12px; }
.floating-note { position:absolute; top:35px; left:-30px; display:flex; gap:12px; align-items:center; background:white; border:1px solid #e2e6dc; padding:18px 22px; border-radius:16px; box-shadow:0 15px 40px #123b2d1a; }
.floating-note small { display:block; color:#4a6258; font-size:.75rem; }
.note-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#eaf4ed; color:#046a4e; }
.button { border-radius:9px; display:inline-flex; gap:20px; align-items:center; justify-content:center; }
.text-link { font-weight:650; text-decoration:none; display:inline-flex; align-items:center; gap:12px; min-height:44px; }
.text-link:hover { text-decoration:underline; }
.benefit-strip { border-top:1px solid #dce7de; border-bottom:1px solid #dce7de; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:24px 0; color:#4a6258; font-size:.88rem; text-align:center; }
.demo-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:100px 0; }
.demo-copy h2,.shop-story h2,#how-it-works > h2,.faq > h2 { font-size:clamp(1.8rem,3.3vw,2.8rem); letter-spacing:-.035em; }
.demo-copy p { max-width:440px; }
.preview { border-radius:22px; padding:32px; background:#fff; border:1px solid #d3e1d5; }
.preview h2 { font-size:1.3rem; }
.preview h3 { font-size:1rem; }
.preview .metric { color:#046a4e; }
.preview .metric small { color:#4a6258; }
#how-it-works { padding:32px 0; }
#how-it-works > h2 { max-width:620px; }
.cards article { transition:transform .22s ease,box-shadow .22s ease; }
.cards article:hover { transform:translateY(-4px); box-shadow:0 14px 30px #18352c0a; }
.step { display:block; font-size:2rem; letter-spacing:-.04em; color:#047857; }
.cards h3 { font-size:1.18rem; }
.shop-story { display:grid; grid-template-columns: .9fr 1.1fr; gap:70px; align-items:center; margin:40px 0 70px; }
.shop-story img { width:100%; height:370px; object-fit:cover; border-radius:20px; }
.shop-story p { max-width:530px; }
.feature-cards article { background:transparent; border:0; border-top:2px solid #d3e1d5; border-radius:0; padding:24px 0; }
.feature-cards h2 { font-size:1.3rem; }
.support { padding:50px; background:#173e31; color:white; border:0; }
.support h2 { font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.035em; margin:20px 0; }
.support p { color:#dce7de; max-width:670px; }
.support .eyebrow { color:#c2ddca; }
.support .button { background:#fff; color:#173e31; margin-top:14px; }
.support .button:hover { background:#eaf4ed; }
.faq { max-width:850px; margin:90px auto; }
.faq summary::marker { color:#047857; }
footer { padding-top:30px; padding-bottom:30px; }
@media(max-width:1000px) {
  .hero { gap:32px; }.hero-visual > img { height:460px; }
  .floating-note { left:-12px; padding:14px; }
  .demo-section,.shop-story { gap:36px; }
  nav { gap:14px; }.section-link { display:none; }
}
@media(max-width:700px) {
  .hero { grid-template-columns:1fr; padding:40px 0; gap:40px; }
  .hero h1 { font-size:clamp(2.7rem,10vw,4rem); }
  .hero-visual > img { height:350px; border-radius:70px 16px 16px 16px; }
  .floating-note { left:12px; top:16px; }
  .photo-caption { left:16px; right:16px; bottom:16px; font-size:.85rem; }
  .benefit-strip { grid-template-columns:repeat(2,1fr); gap:16px; font-size:.8rem; }
  .demo-section,.shop-story { grid-template-columns:1fr; gap:28px; padding:60px 0; }
  .shop-story { margin:0; }.shop-story img { height:280px; }
  .preview { padding:22px; }.support { padding:28px; }
  .faq { margin:60px auto; }.feature-cards { margin-top:0; }
  header { gap:18px; }header nav { justify-content:flex-start; gap:20px; }
}
@media(prefers-reduced-motion:reduce) { .cards article { transition:none; }.cards article:hover { transform:none; } }

/* Lightweight perspective layers, without a WebGL canvas. */
.hero-visual, .preview {
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .35s ease-out, box-shadow .35s ease-out;
}
.hero-visual::before {
  content: ''; position:absolute; inset:16px -10px -16px 16px;
  border:1px solid #aec7b6; border-radius:140px 20px 20px 20px;
  background:#e3ece1; transform:translateZ(-20px); z-index:-1;
}
.floating-note { transform:translateZ(45px); }
.photo-caption { transform:translateZ(25px); }
.preview .demo-tabs, .preview .metric { transform:translateZ(18px); }
.preview.depth-active { box-shadow:0 28px 65px #173e3124; }
.button { box-shadow:0 4px 0 #023e2d, 0 8px 18px #173e3115; }
.button:active { transform:translateY(3px); box-shadow:0 1px 0 #023e2d; }
.support .button { box-shadow:0 4px 0 #a8c4ae; }
@media(max-width:700px) { .hero-visual::before { inset:10px -5px -10px 10px; border-radius:70px 16px 16px 16px; } }
@media(prefers-reduced-motion:reduce), (hover:none), (pointer:coarse) {
  .hero-visual, .preview { transform:none; transition:none; transform-style:flat; }
  .floating-note, .photo-caption, .preview .demo-tabs, .preview .metric { transform:none; }
  .hero-visual::before { transform:none; }
  .button:hover, .button:active, .cards article:hover { transform:none; }
}