:root{
  --sage:#6B8F71; --sage-dark:#4F7057; --cream:#F5F1E8; --cream-2:#EDE6D5;
  --charcoal:#2C3E2D; --ink:#1F2A20; --rust:#B85450; --muted:#7A7566;
  --line:#DDD3BE; --shadow:0 6px 24px rgba(44,62,45,.08);
  --cat-fda:#3D8B54; --cat-comp:#C9A24B; --cat-res:#B85450; --cat-hrt:#D48449; --cat-other:#6B8F71;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--sage-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;color:var(--charcoal);font-weight:600;line-height:1.2;margin:0 0 .4em}
h1{font-size:1.9rem;letter-spacing:-.01em}
h2{font-size:1.4rem}
h3{font-size:1.15rem}
em.tag{font-style:italic;color:var(--muted)}

/* Top nav */
.topnav{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:env(safe-area-inset-top) 8px 8px;background:rgba(245,241,232,.92);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.topnav .brand{text-align:center;color:var(--charcoal)}
.brand-title{display:block;font-family:'Playfair Display',serif;font-weight:600;font-size:1.02rem;line-height:1}
.brand-sub{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.topnav button{background:none;border:0;font-size:1.5rem;color:var(--charcoal);height:44px;width:44px;border-radius:12px}
.topnav button:hover{background:var(--cream-2)}
.back{visibility:hidden}
.back.show{visibility:visible}

/* Drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:78%;max-width:320px;background:var(--cream);z-index:40;padding:80px 20px 20px;box-shadow:var(--shadow);transform:translateX(100%);transition:transform .2s ease}
.drawer[hidden]{display:block}
.drawer.open{transform:translateX(0)}
.drawer a{display:block;padding:14px 8px;border-bottom:1px solid var(--line);font-size:1.05rem;color:var(--charcoal)}
.drawer-scrim{position:fixed;inset:0;background:rgba(31,42,32,.35);z-index:35}
.drawer-scrim[hidden]{display:none}

/* App container */
.app{max-width:720px;margin:0 auto;padding:16px 16px 100px}

/* Home hero */
.hero{padding:20px 4px 8px}
.hero h1{font-size:2.1rem}
.hero .tagline{color:var(--muted);font-size:1.02rem;font-style:italic;margin-top:4px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.tile{display:block;padding:22px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);color:var(--charcoal)}
.tile:hover{text-decoration:none;transform:translateY(-1px)}
.tile .icon{font-size:1.6rem}
.tile .title{font-family:'Playfair Display',serif;font-size:1.15rem;margin-top:8px;line-height:1.15;display:block}
.tile .sub{display:block;color:var(--muted);font-size:.82rem;margin-top:4px}

/* Section header */
.section-head{margin:8px 0 14px}
.section-head .kicker{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-dark)}
.section-head h1{margin-top:4px}
.section-head p{color:var(--muted);margin:.25em 0 0}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.chip{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.85rem;color:var(--charcoal);cursor:pointer}
.chip.active{background:var(--charcoal);color:var(--cream);border-color:var(--charcoal)}
.search{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff;margin-bottom:12px}

/* List cards */
.card-list{display:grid;grid-template-columns:1fr;gap:10px}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 14px;color:var(--charcoal);box-shadow:var(--shadow)}
.card:hover{text-decoration:none}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card h3{margin:0 0 4px;font-size:1.08rem}
.card .aliases{color:var(--muted);font-size:.82rem}
.card .meta{color:var(--muted);font-size:.82rem;margin-top:6px}

/* Badges */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#fff;white-space:nowrap}
.badge.fda{background:var(--cat-fda)}
.badge.comp{background:var(--cat-comp);color:#3A2E00}
.badge.res{background:var(--cat-res)}
.badge.hrt{background:var(--cat-hrt)}
.badge.other{background:var(--cat-other)}

/* Detail */
.detail-header{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.detail-header h1{font-size:1.8rem;margin-bottom:6px}
.detail-header .aliases{color:var(--muted);font-size:.9rem;margin-bottom:8px}

.pane{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.pane h3{margin-top:0;font-size:1.05rem}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:.95rem}
.kv dt{color:var(--muted);font-weight:500}
.kv dd{margin:0;color:var(--ink)}

.warn{border-left:4px solid var(--rust);background:#FBEEEC;color:#5A2523;padding:10px 12px;border-radius:8px;margin:8px 0;font-size:.92rem}
.warn.soft{border-color:var(--cat-comp);background:#FBF4E0;color:#4A3900}
.warn.info{border-color:var(--sage-dark);background:#EAF1EA;color:#1E3A22}

.sources li{margin:4px 0;word-break:break-all;font-size:.9rem}

/* Affiliate */
.affiliate{border:2px solid var(--sage);background:#EAF1EA;border-radius:14px;padding:14px;margin:12px 0}
.affiliate h3{color:var(--sage-dark);margin-top:0}
.affiliate .btn{display:inline-block;margin-top:8px;padding:10px 16px;background:var(--sage-dark);color:#fff;border-radius:10px;font-weight:600}
.affiliate .btn:hover{text-decoration:none;background:var(--charcoal)}
.affiliate .ftc{font-size:.78rem;color:#4A5A4B;margin-top:8px;font-style:italic}

/* Seeds attribution */
.seeds{border-left:4px solid var(--cat-comp);background:#FBF4E0;padding:10px 12px;border-radius:8px;margin-bottom:8px}
.seeds .cite{font-size:.78rem;color:#665200;font-style:italic;margin-top:6px}

/* Product grid */
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.product{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.product h3{font-size:1rem;margin:0 0 4px}
.product .price{color:var(--charcoal);font-weight:600;margin:6px 0}
.product .form{color:var(--muted);font-size:.8rem}
.product .btn{margin-top:auto;padding:9px 12px;background:var(--sage-dark);color:#fff;border-radius:10px;text-align:center;font-size:.9rem;font-weight:600}
.product .ftc{font-size:.72rem;color:var(--muted);margin-top:6px;font-style:italic}

/* Goals */
.goal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.goal{display:block;padding:20px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);color:var(--charcoal)}
.goal .icon{font-size:1.5rem}
.goal .title{font-family:'Playfair Display',serif;font-size:1.05rem;margin-top:6px;display:block;line-height:1.2}
.goal .count{color:var(--muted);font-size:.78rem;margin-top:4px;display:block}

/* Stack detail */
.component{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:8px}
.component strong{color:var(--charcoal)}
.component .timing{color:var(--muted);font-size:.9rem;margin-top:2px}

/* Footer */
.footer{position:sticky;bottom:0;background:var(--charcoal);color:var(--cream);padding:10px 16px calc(10px + env(safe-area-inset-bottom));text-align:center;z-index:10}
.footer-disc{color:var(--cream);font-size:.82rem;font-weight:600;display:block}
.footer-disc:hover{color:#fff;text-decoration:underline}
.footer-meta{color:#B5B29F;font-size:.7rem;margin-top:4px}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(20,28,20,.6);z-index:100;display:flex;align-items:flex-end;justify-content:center;padding:20px;overflow-y:auto}
.modal[hidden]{display:none}
.modal-card{background:var(--cream);border-radius:20px 20px 20px 20px;max-width:640px;width:100%;padding:24px;box-shadow:0 -8px 40px rgba(0,0,0,.3);max-height:calc(100vh - 40px);overflow-y:auto;margin:auto}
.modal-body{white-space:pre-wrap;font-size:.95rem;line-height:1.55;color:var(--ink)}
.modal-body h2{margin-top:0}
.modal-actions{margin-top:16px;display:flex;gap:10px;justify-content:flex-end}
.modal-actions button{padding:10px 18px;border-radius:10px;border:0;font:inherit;font-weight:600;cursor:pointer}
.modal-actions .primary{background:var(--charcoal);color:var(--cream)}
.modal-actions .ghost{background:transparent;color:var(--muted)}

/* Provider list */
.provider-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.provider-item h3{margin-top:0}
.provider-item a{word-break:break-all}

@media(min-width:520px){
  .tiles,.goal-grid{grid-template-columns:1fr 1fr}
  .product-grid{grid-template-columns:1fr 1fr 1fr}
}