:root{color-scheme:light;--ink:#20282b;--muted:#566369;--line:#d8e0e1;--teal:#006d69;--rose:#f8eeef;--blue:#edf4f7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.5 "Segoe UI",Arial,sans-serif;letter-spacing:0}
a{color:var(--teal)}
button,select,input{font:inherit}
button,a,select,input,summary{touch-action:manipulation}
:focus-visible{outline:3px solid #157d79;outline-offset:3px}
.skip-link{position:absolute;top:-100px;left:12px;z-index:20;background:#fff;padding:8px}
.skip-link:focus{top:8px}
.site-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.header-inner{max-width:1000px;margin:auto;padding:4px 22px;display:flex;align-items:center;justify-content:space-between;min-height:52px}
.brand{font-size:24px;line-height:1;font-weight:800;text-decoration:none;color:var(--ink)}
.brand span{color:var(--teal)}
.site-menu{position:relative;font-size:14px}
.site-menu summary{cursor:pointer;list-style:none;border:1px solid var(--line);padding:9px 10px;border-radius:3px;min-height:44px}
.site-menu summary::-webkit-details-marker{display:none}
.site-menu nav{position:absolute;right:0;top:100%;width:180px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px #20282b16;padding:5px;display:grid}
.site-menu nav a{padding:10px 8px;min-height:44px;text-decoration:none;color:var(--ink)}
.site-menu nav a:hover{background:#eff5f4}
main{max-width:1000px;margin:auto;padding:0 22px 42px}
.intro{padding:17px 0 10px}
.crumbs{font-size:12px;color:var(--muted);margin-bottom:10px}
.crumbs a{color:var(--muted)}
h1{font-size:32px;line-height:1.12;margin:0 0 7px;max-width:none}
.intro-copy{font-size:14px;line-height:1.4;color:var(--muted);max-width:70ch;margin:0}
.product-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;border-top:1px solid var(--line);padding-top:10px}
.product{min-width:0;padding:8px 12px 12px;border-radius:3px;display:flex;flex-direction:column;align-items:flex-start}
.product-1{background:var(--rose)}.product-2{background:var(--blue)}
.product img{width:100%;height:130px;object-fit:contain;mix-blend-mode:multiply}
.product-size{font-size:11px;color:var(--muted);margin:4px 0 1px}
.product h2{font-size:18px;line-height:1.12;margin:0;overflow-wrap:anywhere}
.product-description{font-size:14px;line-height:1.45;margin:9px 0 14px;color:#39484c;overflow-wrap:anywhere}
.price-link{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;min-height:44px;margin-top:auto;padding:5px 8px;border-radius:3px;background:var(--teal);color:#fff;text-decoration:none;font-weight:700;font-size:13px;line-height:1.2}
.price-link:hover{background:#005752}
.retailer{display:block;width:100%;text-align:center;font-size:12px;color:var(--muted);margin-top:5px}
.under-pair{margin:7px 0 19px;color:var(--muted);font-size:12px}
.workspace{border-top:2px solid var(--ink);padding-top:12px;margin-top:14px}
.workspace h2,.guidance h2,.sources h2{font-size:22px;line-height:1.2;margin:0 0 12px}
.controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.js-only{display:none}.js-enabled .js-only{display:flex}
.controls label{display:grid;gap:4px;font-weight:600;font-size:13px}
.controls select,.controls input[type=search]{min-height:44px;border:1px solid #aab8bb;border-radius:3px;background:#fff;color:var(--ink);padding:6px 10px;min-width:150px;max-width:100%}
.controls .toggle{display:flex;align-items:center;gap:7px;min-height:44px;font-weight:400}
.toggle input{width:18px;height:18px;accent-color:var(--teal)}
.result-count{font-size:12px;color:var(--muted);margin:9px 0}
.pair-labels{position:sticky;top:52px;z-index:9;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;background:#fff;border-bottom:1px solid var(--line);padding:4px 0}
.pair-product{display:flex;flex-direction:column;gap:1px;min-width:0;padding:5px 9px;border-radius:2px}
.pair-name{font-size:12px;font-weight:400;color:#39484c;overflow-wrap:anywhere}
.pair-product strong{font-size:15px;color:var(--ink)}
.label-15{background:var(--rose)}.label-20{background:var(--blue)}
.compare-row{padding:9px 0;border-bottom:1px solid var(--line)}
.attribute{font-size:13px;line-height:1.25;margin:0 0 5px;font-weight:700}
.values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.value{min-width:0;padding:7px 9px;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.value-1{background:#fcf6f7}.value-2{background:#f4f8fa}
.section-note,.source-note{font-size:13px;color:var(--muted);margin:0 0 12px;max-width:70ch}
.ingredients{margin-top:32px}
.ingredient-head{position:sticky;top:52px;z-index:9;background:#fff;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:5px 0;border-bottom:1px solid var(--line);font-size:13px;font-weight:700;color:var(--muted)}
.ingredient-controls{grid-template-columns:repeat(2,minmax(0,180px)) minmax(180px,1fr);align-items:end}
.js-enabled .ingredient-controls{display:grid}
.ingredient-controls label{min-width:0}
.ingredient-controls select,.ingredient-controls input[type=search]{width:100%;min-width:0}
.ingredient-list{border-top:0}
.ingredient-row{display:block;padding:16px 0 7px;border-bottom:1px solid var(--line);font-size:14px;scroll-margin-top:125px}
.ingredient-name{font-size:16px;line-height:1.35;margin:0;overflow-wrap:anywhere}
.ingredient-role{font-size:13px;color:var(--teal);font-weight:600;margin:3px 0 6px}
.ingredient-summary{font-size:14px;line-height:1.5;margin:0 0 10px;max-width:78ch}
.ingredient-explanation{margin-top:5px}
.ingredient-explanation summary{cursor:pointer;padding:12px 0;min-height:44px;color:var(--teal);font-weight:600}
.ingredient-explanation p{font-size:14px;line-height:1.55;margin:0 0 12px;max-width:78ch;overflow-wrap:anywhere}
.ingredient-explanation .ingredient-source{font-size:13px;color:var(--muted)}
.ingredient-statuses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;text-align:center;font-size:13px;margin-top:4px}
.ingredient-statuses>span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 5px;overflow-wrap:anywhere}
.presence-symbol{font-size:16px;line-height:1;flex-shrink:0}
.presence-text{line-height:1.3}
.present{color:#0d635e;background:#eef6f4}.absent{color:var(--muted);background:#f2f4f4}
.source-note{margin:12px 0 0}
.empty-state{background:#f3f6f6;padding:14px;margin:10px 0}
.empty-state[hidden],.compare-row[hidden],.ingredient-row[hidden]{display:none}
.empty-state p{margin:0 0 8px}
.empty-state button{background:#fff;border:1px solid var(--teal);color:var(--teal);padding:6px 10px;cursor:pointer}
.guidance{margin-top:34px;border-top:2px solid var(--ink);padding-top:14px}
.guidance details{border-bottom:1px solid var(--line)}
.guidance summary{cursor:pointer;padding:13px 30px 13px 0;font-weight:700;line-height:1.3}
.guidance details p{max-width:70ch;color:#38474b;font-size:14px;margin:0 0 16px}
.sources{margin-top:34px;border-top:1px solid var(--line);padding-top:14px;font-size:13px;color:var(--muted)}
.sources h2{font-size:18px;color:var(--ink)}
.sources ul{padding-left:19px}
.site-footer{border-top:1px solid var(--line);padding:12px 22px;display:flex;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted);max-width:1000px;margin:auto}
.site-footer p{margin:0}
@media(max-width:500px){
  main{padding:0 12px 30px}.header-inner{padding:3px 12px;min-height:50px}
  .brand{font-size:22px}.intro{padding:10px 0 7px}.crumbs{margin-bottom:6px;font-size:11px}
  h1{font-size:22px;max-width:none;margin-bottom:5px}.intro-copy{font-size:14px;line-height:1.3}
  .product-pair{gap:6px;padding-top:7px}.product{padding:4px 6px 7px}.product img{height:100px}
  .product-size{font-size:12px;margin-top:1px}.product h2{font-size:16px}
  .product-description{font-size:14px;line-height:1.4;margin:8px 0 12px}
  .price-link{font-size:13px;padding:4px;min-height:44px}
  .under-pair{margin:5px 0 14px;font-size:11px}
  .workspace h2,.guidance h2{font-size:19px}
  .pair-labels,.ingredient-head{top:50px}.controls{gap:7px}.controls select{min-width:125px}
  .value{font-size:14px;padding:6px}.attribute{font-size:14px}
  .ingredient-row,.ingredient-statuses{gap:5px}
  .ingredient-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ingredient-search-label{grid-column:1/-1}
  .pair-name{font-size:11px}
}
@media(max-width:350px){.product h2{font-size:16px}.price-link{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}