:root { color-scheme: light; --paper:#f3f4ee; --surface:#fff; --ink:#18231b; --muted:#526054; --line:#d6ded3; --lime:#d7f5b5; --green:#347443; }
* { box-sizing:border-box; }
html { scroll-padding-top:2rem; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:1rem; line-height:1.65; }
a { color:inherit; text-underline-offset:.25em; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--green); outline-offset:5px; }
.wrap { width:min(1160px,calc(100% - 3rem)); margin-inline:auto; }
.skip-link { position:absolute; left:1rem; top:-5rem; z-index:2; padding:.7rem 1rem; background:var(--lime); }
.skip-link:focus { top:1rem; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.4rem; border-bottom:1px solid var(--line); }
.wordmark { font-size:1.75rem; font-weight:850; letter-spacing:-.07em; text-decoration:none; }
.wordmark span { color:var(--green); }
nav { display:flex; align-items:center; flex-wrap:wrap; gap:1.75rem; font-size:.875rem; font-weight:650; }
nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
nav a:hover { text-decoration:underline; }
.nav-demo { gap:1rem; }
.hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:3rem; padding-block:5rem 5.5rem; }
.eyebrow { margin:0 0 1.1rem; color:var(--muted); font-size:.875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3,p { overflow-wrap:break-word; }
h1 { margin:0; font-size:clamp(2.65rem,5.6vw,4.6rem); line-height:1.05; font-weight:750; letter-spacing:-.065em; }
h1 span { color:var(--green); }
.intro { max-width:32rem; margin:1.75rem 0; font-size:1.12rem; color:var(--muted); }
.button { display:inline-flex; min-height:52px; padding:.8rem 1.25rem; align-items:center; justify-content:space-between; gap:2rem; border-radius:6px; text-decoration:none; font-weight:650; }
.primary { color:var(--paper); background:var(--ink); }
.primary:hover { background:var(--green); }
.small { font-size:.875rem; color:var(--muted); }
.hero-note { margin-block:.85rem 0; }
.hero-photo { margin:0; overflow:hidden; border-radius:8px; background:var(--ink); color:var(--paper); }
.hero-photo img { display:block; width:100%; height:auto; aspect-ratio:1.05; object-fit:cover; }
figcaption { padding:1.2rem 1.5rem; font-weight:650; }
figcaption span { display:block; margin-top:.4rem; max-width:30rem; color:#c8d3c5; font-size:.8rem; font-weight:400; }
.section-heading { margin-bottom:2.4rem; }
h2 { margin:0; font-size:clamp(1.8rem,3.4vw,2.9rem); line-height:1.14; letter-spacing:-.045em; font-weight:700; }
h3 { margin:.9rem 0 .65rem; font-size:1.25rem; line-height:1.35; letter-spacing:-.02em; }
.approach { padding-block:2rem 5rem; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; }
.principles article { border-top:1px solid var(--line); padding-top:1.3rem; }
.principles p { margin:0; color:var(--muted); }
.step { font-size:.875rem; color:var(--green); font-weight:750; letter-spacing:.06em; }
.demo-section { background:var(--ink); color:var(--paper); padding-block:4.5rem; }
.demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.demo-copy .eyebrow { color:var(--lime); }
.demo-copy > p:not(.eyebrow) { max-width:32rem; color:#cad6c6; }
.demo-copy h2 { font-size:clamp(2rem,4vw,3.25rem); }
.demo-disclosure { padding-top:1rem; border-top:1px solid #4c5b4d; }
.demo-card { padding:1.65rem; border-radius:10px; color:var(--ink); background:var(--surface); }
.demo-card-heading { display:flex; gap:1rem; justify-content:space-between; align-items:start; margin-bottom:1.4rem; }
.demo-card-heading .eyebrow { margin-bottom:.35rem; }
.demo-card-heading h3 { margin:0; }
.sample-label { padding:.25rem .6rem; border:1px solid var(--line); border-radius:4px; font-size:.8rem; font-weight:700; }
fieldset { min-width:0; padding:0; margin:0; border:0; }
legend { padding:0 0 .75rem; color:var(--muted); font-size:.875rem; }
.ingredient { display:flex; gap:.9rem; align-items:center; padding:1rem 0; border-top:1px solid var(--line); cursor:pointer; }
.ingredient input { width:21px; height:21px; flex-shrink:0; accent-color:var(--green); }
.ingredient strong { display:block; font-size:1rem; font-weight:650; }
.ingredient small { display:block; color:var(--muted); font-size:.875rem; }
.ingredient .price { margin-left:auto; white-space:nowrap; font-weight:650; }
.ingredient:has(input:checked) strong,.ingredient:has(input:checked) .price { text-decoration:line-through; color:var(--muted); }
.ingredient:has(input:disabled) { cursor:default; }
.demo-result { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.3rem; margin-top:1rem; padding:1rem; background:var(--lime); border-radius:6px; }
.demo-result strong { font-size:1.6rem; letter-spacing:-.03em; }
.demo-result .small { grid-column:1/-1; }
.reset { display:block; padding:.5rem .1rem; min-height:44px; margin:.5rem 0 0 auto; background:none; color:var(--ink); border:0; text-decoration:underline; text-underline-offset:.25rem; font-size:.875rem; cursor:pointer; }
.reset:disabled { opacity:.5; cursor:default; }
.status-section { padding-block:5rem; }
.status-list { margin:0; }
.status-list > div { display:grid; grid-template-columns:1fr 1.4fr; gap:3rem; padding-block:1.5rem; border-top:1px solid var(--line); }
.status-list dt { font-weight:700; font-size:1.15rem; }
.status-list dd { margin:0; color:var(--muted); }
.status-tag { display:block; margin-bottom:.5rem; width:fit-content; padding:.15rem .55rem; border-radius:4px; background:var(--lime); font-size:.8rem; font-weight:650; }
.status-tag.pending { background:#e2e7df; }
.partner-section { border-top:1px solid var(--line); padding-block:3.5rem 4rem; }
.partner-section p:not(.eyebrow) { max-width:50rem; color:var(--muted); }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.5rem; border-top:1px solid var(--line); }
.site-footer p { font-size:.875rem; color:var(--muted); }
@media(max-width:850px) { .hero { gap:2rem; } .demo-grid { gap:2rem; } .principles { gap:1.5rem; } nav { gap:1rem; } }
@media(max-width:650px) {
  .wrap { width:calc(100% - 2rem); }
  .site-header { align-items:flex-start; flex-direction:column; gap:.5rem; padding-block:1rem; }
  nav { width:100%; justify-content:space-between; gap:.6rem; }
  .hero { grid-template-columns:1fr; padding-block:2.8rem 3rem; }
  h1 { font-size:clamp(2.65rem,10vw,4rem); }
  .hero-photo img { aspect-ratio:1.5; }
  .principles,.demo-grid { grid-template-columns:1fr; }
  .approach { padding-block:1rem 3rem; }
  .demo-section { padding-block:3rem; }
  .demo-card { padding:1.2rem; }
  .status-section { padding-block:3rem; }
  .status-list > div { grid-template-columns:1fr; gap:.75rem; }
  .site-footer { align-items:start; flex-direction:column; gap:.3rem; }
  .site-footer p { margin:.35rem 0; }
}
@media(prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
@media print { .skip-link,nav,.reset { display:none; } body,.demo-section { background:white; color:black; } .demo-copy > p:not(.eyebrow),.demo-copy .eyebrow { color:black; } .hero,.demo-grid { gap:1rem; } .hero { padding-block:1rem; } .hero-photo { max-width:20rem; } }