/* ClaimVsDose: the pharmacy lightbox at night. Amber = the claim (label says), mint = the dose (our maths). On cream, they are fills and rules; text stays ink. */
@font-face{font-family:"DM Sans";font-weight:100 1000;font-display:swap;src:url("/assets/fonts/dm-sans-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-weight:100 900;font-display:swap;src:url("/assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("/assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2")}
:root{color-scheme:light;
--night:#0e1f2e;--hair:rgba(245,239,226,.24);--cream:#f5efe2;--cream-2:rgba(245,239,226,.72);--amber:#f2b24a;--mint:#7fe0c3;--mint-rule:#4ccaa5;
--paper:#f7f3ea;--paper-2:#efe9dc;--card:#fff;--ink:#0e1f2e;--ink-2:#4a5862;--grey:#5b6870;--rule:rgba(14,31,46,.13);--rule-2:rgba(14,31,46,.07);
--amber-wash:#fdf2de;--amber-ink:#7a4706;--mint-wash:#e7f8f1;--mint-ink:#0b5c49;
--serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:ui-monospace,Menlo,Consolas,monospace;
--wide:1240px;--col:46rem;--gut:16px;--r:14px;
--shadow:0 1px 1px rgba(14,31,46,.04),0 2px 6px rgba(14,31,46,.05),0 12px 28px -12px rgba(14,31,46,.18);
--glow-a:0 0 .22em rgba(242,178,74,.55),0 0 .8em rgba(242,178,74,.28);--glow-m:0 0 .22em rgba(127,224,195,.5),0 0 .8em rgba(127,224,195,.25);
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
--bars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16'%3E%3Crect width='6' height='16' rx='3' fill='%23f2b24a'/%3E%3Crect x='9' y='6' width='6' height='10' rx='3' fill='%234ccaa5'/%3E%3C/svg%3E")}
@media (min-width:720px){:root{--gut:32px}}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--night);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-text-size-adjust:100%;scroll-padding-top:1rem}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper)}
main{flex:1}
a{color:inherit;text-decoration-color:rgba(14,31,46,.35);text-underline-offset:.18em}
a:hover{text-decoration-color:var(--amber);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.25rem,9vw,4.5rem)}
h2{font-size:clamp(1.45rem,4vw,1.85rem);margin-top:1.8em}
h3{font:600 1.05rem/1.3 var(--sans);margin-top:1.5em}
p,ul,ol,dl{margin:0 0 1em}
strong{font-weight:600}
code,.n,.fig-v,.lb-v{font-variant-numeric:tabular-nums lining-nums}
code{font-family:var(--mono);font-size:.86em}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-4rem;background:var(--amber);color:var(--ink);font-weight:600;padding:.6rem .9rem;border-radius:10px;z-index:50;text-decoration:none}
.skip:focus{top:.6rem}
.sub{display:block;color:var(--ink-2);font-size:.82rem;line-height:1.45}
.nojs{display:none}
html:not(.js) .nojs{display:inline}
html:not(.js) p.nojs{display:block}
html:not(.js) .sort,html:not(.js) .js-only{display:none}

/* Night surfaces: focus ring turns amber */
.dark{background-color:var(--night);color:var(--cream);color-scheme:dark}
.dark a{text-decoration-color:rgba(245,239,226,.4)}
.dark a:hover{text-decoration-color:var(--amber)}
.dark :focus-visible{outline-color:var(--amber)}
.dark .sub{color:var(--cream-2)}
.top,.foot{background-image:var(--grain)}
.hero,.band{background-image:var(--grain),radial-gradient(45% 42% at 84% 52%,rgba(127,224,195,.1),transparent),radial-gradient(50% 50% at 6% 100%,rgba(242,178,74,.07),transparent)}

/* Header. Wordmark "vs" = amber claim bar + mint dose bar */
.top{position:relative;z-index:20;display:flex;align-items:center;gap:1.5rem;padding:.85rem var(--gut)}
.mark{font-family:var(--serif);font-weight:560;font-size:1.4rem;letter-spacing:-.015em;line-height:1;text-decoration:none;white-space:nowrap;color:var(--cream)}
.mark span{display:inline-block;position:relative;width:.86em;height:1em;vertical-align:-.16em;overflow:hidden;color:transparent}
.mark span::before,.mark span::after{content:"";position:absolute;bottom:.16em;left:.16em;width:.21em;height:.72em;border-radius:.11em;background:var(--amber);box-shadow:0 0 .12em rgba(242,178,74,.8)}
.mark span::after{left:.47em;height:.44em;background:var(--mint);box-shadow:0 0 .12em rgba(127,224,195,.8)}
#navigation{margin-left:auto;display:flex;gap:1.15rem;font-size:.93rem}
.nav-more{display:contents}
@media (min-width:1024px){.nav-more{display:flex;gap:1.15rem;padding-left:1.15rem;border-left:1px solid var(--hair)}.nav-more a{font-size:.86rem}}
#navigation a{text-decoration:none;color:var(--cream-2);padding:.25rem 0;border-bottom:2px solid transparent}
#navigation a:hover,#navigation a[aria-current]{color:var(--cream);border-bottom-color:var(--amber)}
.menu{margin-left:auto;width:44px;height:44px;border:1px solid var(--hair);background:none;border-radius:12px;display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer;color:var(--cream)}
.menu span{width:18px;height:2px;border-radius:1px;background:currentColor;transition:transform .2s}
.menu[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1023px){
.js .menu{display:flex}
.js #navigation{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:.25rem var(--gut) 1.25rem;background:var(--night);border-bottom:1px solid var(--hair);box-shadow:0 30px 40px -20px rgba(0,0,0,.55);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.js #navigation.open{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
.js #navigation a{font-family:var(--serif);font-size:1.45rem;color:var(--cream);padding:.7rem 0;border-bottom:1px solid rgba(245,239,226,.1)}
.js #navigation a:hover{border-bottom-color:var(--amber)}
.js .nav-more{display:flex;flex-wrap:wrap;gap:0 1.4rem;padding-top:.4rem}
.js .nav-more a{font:500 1rem var(--sans);color:var(--cream-2);border-bottom:0}
html:not(.js) .top{flex-wrap:wrap}
html:not(.js) #navigation{flex-wrap:wrap;gap:.5rem 1rem;width:100%;margin:.25rem 0 0}
}

/* Home hero */
.hero{padding:.6rem var(--gut) 1.6rem}
.hero-in{max-width:var(--wide);margin:0 auto;display:grid;gap:1.1rem;grid-template-areas:"text" "figs" "cta"}
.hero-text{grid-area:text}
.hero-figs{grid-area:figs;display:grid;gap:.6rem;align-content:start}
.hero h1{font-weight:400;font-size:clamp(36px,9vw,64px);line-height:1.02;letter-spacing:-.022em;margin:0 0 .35em;max-width:12em;text-wrap:balance}
.hero h1 em{color:var(--amber);text-shadow:var(--glow-a);padding-right:.04em}
.subline{font-size:1rem;line-height:1.5;color:var(--cream-2);max-width:44ch;margin:0}
@media (min-width:960px){
.hero{padding:.8rem var(--gut) 1.5rem}
.hero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"text figs" "cta figs";grid-template-rows:auto 1fr;gap:1.6rem 4rem}
.subline{font-size:1.12rem;max-width:56ch}
.hero h1{font-size:52px}
.t-intro{max-width:none;display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.checkcount{flex-basis:100%}
.coverage{flex:1 1 30rem}
.howto[open]{flex-basis:100%}
}
.lightbox{position:relative;overflow:hidden;border:1px solid rgba(245,239,226,.42);border-radius:20px;padding:1rem .9rem 1.15rem;background:radial-gradient(120% 95% at 50% 0%,#1d3d5b,#142d45 55%,#10263a);box-shadow:inset 0 0 0 5px rgba(14,31,46,.55),inset 0 0 0 6px rgba(245,239,226,.1),0 0 70px -18px rgba(127,224,195,.28),0 0 90px -30px rgba(242,178,74,.3)}
.lightbox::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(rgba(245,239,226,.03) 0 1px,transparent 1px 3px)}
.lb-t,.lb-f{position:relative;z-index:1;text-align:center;margin:.1rem auto .5rem;max-width:30ch;font:400 1.15rem/1.3 var(--serif);text-wrap:balance}
.lb-f{margin:.5rem auto 0;max-width:40ch;font:400 .76rem/1.4 var(--sans);color:var(--cream-2)}
.lb-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.25rem;position:relative;z-index:1}
.lb-fig{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;padding:.55rem .2rem .3rem;min-width:0}
.lb-fig::before{content:"";position:absolute;inset:-18% -10% 18%;background:radial-gradient(closest-side,rgba(127,224,195,.2),transparent);pointer-events:none}
.lb-hi::before{background:radial-gradient(closest-side,rgba(242,178,74,.2),transparent)}
.lb-v{position:relative;font-family:var(--serif);font-size:clamp(2.1rem,10vw,4.2rem);line-height:1;letter-spacing:-.02em}
.lb-lo .lb-v{color:var(--mint);text-shadow:var(--glow-m)}
.lb-hi .lb-v{color:var(--amber);text-shadow:var(--glow-a)}
.lb-b,.lb-s{position:relative;font-variant-caps:all-small-caps;letter-spacing:.07em;line-height:1.25}
.lb-b{font-size:1rem;font-weight:600;margin-top:.55rem;color:rgba(245,239,226,.8)}
.lb-s{font-size:.78rem;margin-top:.15rem;color:var(--cream-2)}
.lb-fig:hover .lb-b{text-decoration:underline}
.lb-x{display:flex;flex-direction:column;align-items:center;padding:0 .1rem 1.6rem}
.lb-xv{font-family:var(--serif);font-size:1.4rem;white-space:nowrap;text-shadow:0 0 .5em rgba(245,239,226,.35)}
.lb-xl{font-size:.75rem;color:var(--cream-2)}
.hero-cta{grid-area:cta;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem;margin:0}
@media (max-width:479px){.hero-cta{column-gap:.9rem}}
.btn{display:inline-flex;align-items:center;gap:.55em;min-height:48px;padding:.75rem 1.4rem;border-radius:999px;background:var(--cream);color:var(--night);font-weight:600;text-decoration:none;box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 32px -6px rgba(245,239,226,.5)}
.btn:hover{background:#fff}
.dark .btn-2{font-weight:500;text-decoration-color:var(--amber);text-decoration-thickness:2px;padding:.35rem 0}

/* Paper */
.status{max-width:var(--wide);margin:0 auto;padding:.7rem var(--gut) 0;display:flex;align-items:baseline;gap:.55rem;font-size:.84rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--mint-rule);box-shadow:0 0 0 3px rgba(76,202,165,.22)}
.ledger-section{max-width:var(--wide);margin:0 auto;padding:0 var(--gut)}
.howto{margin:0;font-size:.86rem}
.howto summary{display:inline-block;padding:.35rem 0;font-weight:600;color:var(--ink)}
.howto p,.howto ul{margin:.3rem 0 .4rem;max-width:84ch}
.howto ul{padding-left:1.1rem}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.2rem 0 .7rem;font-size:.86rem}
.chips a{display:inline-flex;align-items:center;gap:.35rem;min-height:36px;padding:.25rem .75rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);text-decoration:none;white-space:nowrap}
.chips a:hover{border-color:var(--ink)}
@media (max-width:719px){.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1*var(--gut));padding-right:var(--gut)}.chips::-webkit-scrollbar{display:none}}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem;margin:0 0 .9rem}
.controls .sortbar{margin:0}
.f-toggle{font:600 .84rem var(--sans);min-height:40px;padding:.4rem .95rem;border:1px solid rgba(14,31,46,.16);border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer}
.f-toggle[aria-expanded="true"]{background:var(--paper-2)}
.controls .filters{flex:1 1 100%;margin:0}
@media (max-width:1199px){.js .controls{position:sticky;top:0;z-index:6;margin:0 calc(-1*var(--gut)) .9rem;padding:.5rem var(--gut);background:var(--paper);box-shadow:0 8px 12px -10px rgba(14,31,46,.25)}html:has(.controls){scroll-padding-top:5rem}}
@media (max-width:719px){.js .controls:not(.f-open) .filters{display:none!important}.controls .filters output{display:none}}
@media (min-width:720px){.f-toggle{display:none!important}}
@media (min-width:960px){.controls .filters{flex:1 1 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem .8rem}.controls .filters label{flex-direction:row;align-items:center;gap:.45rem}.controls .filters select{width:auto;max-width:16rem;min-height:40px}.controls .filters output{padding:0}}
.f-empty{padding:1rem 1.1rem;margin:0 0 1rem;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);color:var(--ink-2)}
.f-reset{margin-left:.4rem;font:600 .86rem var(--sans);min-height:40px;padding:.4rem .95rem;border:1px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer}
.empty{padding:2rem 0;color:var(--ink-2)}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:.7rem .6rem;align-items:end;margin:0 0 1rem}
.filters label,.cmp-pick label{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;font-weight:600;color:var(--ink-2);min-width:0}
.filters label:nth-of-type(3),.filters output{grid-column:1/-1}
.filters select,.cmp-pick select{-webkit-appearance:none;appearance:none;font:500 .9rem var(--sans);color:var(--ink);width:100%;min-width:0;min-height:44px;padding:.55rem 2rem .55rem .85rem;border:1px solid rgba(14,31,46,.18);border-radius:999px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230e1f2e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .85rem center;box-shadow:0 1px 2px rgba(14,31,46,.06);cursor:pointer}
.filters select:hover,.cmp-pick select:hover{border-color:var(--ink)}
.filters output{font-size:.84rem;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:720px){.filters{grid-template-columns:repeat(3,minmax(0,1fr))}.filters label:nth-of-type(3),.filters output{grid-column:auto}.filters output{text-align:right;padding-bottom:.7rem}}

/* Table: white bands at >=1200px, cards below */
table{width:100%;border-collapse:collapse}
.u{display:none}
.sort{all:unset;cursor:pointer;position:relative;padding-right:1.05em}
.sort::after{content:"↕";content:"↕"/"";position:absolute;right:0;bottom:0;color:rgba(14,31,46,.35)}
th[aria-sort="ascending"] .sort::after{content:"↑";content:"↑"/"";color:var(--ink)}
th[aria-sort="descending"] .sort::after{content:"↓";content:"↓"/"";color:var(--ink)}
.sort:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wk{display:block;color:var(--ink-2);font-size:.72rem;margin-top:.2rem;white-space:nowrap}
.ledger-foot{font-size:.84rem;color:var(--ink-2);margin:1rem 0 0;max-width:82ch}
.mk-link{position:relative;z-index:1;text-decoration:none;display:inline-block}
.mk-link:hover .mk{box-shadow:0 0 0 2px rgba(14,31,46,.18)}
/* Can't-check: muted text + dashed reason pill, never a bare dash */
.cant{display:block;font:500 .92rem/1.25 var(--sans);color:var(--ink-2);letter-spacing:0}
.why{position:relative;z-index:1;display:inline-block;margin-left:.4rem;padding:.25rem 0;font:500 .78rem/1.2 var(--sans);color:var(--ink-2)}
.rp{display:inline-block;margin-top:.3rem;font:500 .75rem/1.3 var(--sans);letter-spacing:0;color:var(--grey);border:1px dashed rgba(91,104,112,.6);border-radius:999px;padding:.08rem .5rem;white-space:normal}
.pcl{display:block;margin-top:.35rem;font:400 .75rem/1.35 var(--sans);letter-spacing:0;color:var(--mint-ink)}
.work-parts .wk{white-space:normal}
.src{display:block;margin-top:.25rem;font:500 .75rem/1.2 var(--sans);letter-spacing:0;color:var(--ink-2)}
.per{font:400 .78rem var(--sans);color:var(--ink-2);letter-spacing:0}
.c-name .brand{display:block;font-variant-caps:all-small-caps;letter-spacing:.07em;font-size:.9rem;font-weight:600;color:var(--ink-2);line-height:1.2;margin-bottom:.15rem}
.c-date .pu{display:block;font-weight:600;color:var(--ink)}
.cmp{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.4rem;min-height:40px;font:500 .8rem var(--sans);color:var(--ink-2);cursor:pointer}
.cmp input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--ink);cursor:pointer}
html:not(.js) .c-cmp{display:none}
@media (min-width:1200px){
.ledger{border-collapse:separate;border-spacing:0 6px;margin-top:-6px}
.ledger thead th{position:sticky;top:0;z-index:2;background:var(--paper);text-align:left;vertical-align:bottom;font-size:.76rem;font-weight:600;line-height:1.3;color:var(--ink-2);padding:.8rem .55rem .55rem;border-bottom:1px solid var(--rule)}
.ledger thead .h-cost,.ledger thead .h-serve{max-width:7.5rem}
.ledger thead th[data-key="label"]{box-shadow:inset 0 -3px 0 var(--amber)}
.ledger thead th[data-key="calc"]{box-shadow:inset 0 -3px 0 var(--mint-rule)}
.ledger thead th:not([aria-sort="none"]){color:var(--ink)}
.ledger .n{text-align:right}
.ledger tbody td,.ledger tbody th{background:var(--card);padding:.85rem .55rem 2.7rem;vertical-align:top;font-size:.9rem;text-align:left;font-weight:400}
.ledger .c-name{position:relative}
.ledger .where{position:absolute;left:.55rem;bottom:.85rem;width:calc(min(100vw,var(--wide)) - 7rem);margin:0;font-size:.84rem}
.ledger tbody .n{text-align:right}
.ledger tbody tr>:first-child{border-radius:12px 0 0 12px}
.ledger tbody tr>:last-child{border-radius:0 12px 12px 0}
.ledger tbody tr{filter:drop-shadow(0 1px 1px rgba(14,31,46,.05)) drop-shadow(0 3px 8px rgba(14,31,46,.05));transition:transform .15s,filter .15s}
.ledger tbody tr:hover{transform:translateY(-2px);filter:drop-shadow(0 2px 2px rgba(14,31,46,.06)) drop-shadow(0 10px 18px rgba(14,31,46,.12))}
.ledger .c-no{color:var(--ink-2);font-size:.75rem;width:2rem;padding-right:0}
.ledger .c-name{min-width:12rem}
.ledger .c-recon .mk,.ledger .c-test .mk{white-space:normal;border-radius:12px}
.ledger .c-recon,.ledger .c-test{min-width:8.6rem}
.c-name a{font:500 1.06rem/1.25 var(--serif);text-decoration-color:transparent}
.ledger .c-label,.ledger .c-calc{font-size:1.05rem;font-weight:600;color:var(--amber-ink)}
.ledger .c-calc{color:var(--mint-ink);min-width:8rem}
.ledger .c-calc .wk{white-space:normal;font-weight:400;letter-spacing:-.02em}
.ledger .n .cant,.ledger .n .src{text-align:right}
.ledger .c-cost{font-size:1.2rem;font-weight:700;white-space:nowrap}
.ledger .c-cost .stale{display:table;margin:.3rem 0 0 auto}
.ledger .c-serve{font-size:1rem;font-weight:600;white-space:nowrap}
.ledger .c-serve .per{display:block}
.ledger .c-date{color:var(--ink-2);font-size:.84rem;min-width:8.6rem}
.ledger .sub-f{display:none}
html:has(#ledger){scroll-padding-top:5rem}
.ledger .c-cmp{width:3rem;text-align:center;vertical-align:middle}
.ledger .cmp span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.c-recon .sub,.c-test .sub{margin-top:.25rem}
.ledger tr[data-calc="none"] .c-calc .rp{display:none}
.ledger tr[data-calc="none"] .c-calc .cant{display:inline}
.ledger tr[data-calc="none"] .c-calc .why{display:inline;padding:0}
.t-uniform .c-test,.t-uniform .h-test{display:none}
.is-stale td{color:var(--ink-2)}
}
/* 1200–1359: the table is only just wide enough, so the Form column moves under the product name (it is the filter too) */
@media (min-width:1200px) and (max-width:1359px){.ledger .h-form,.ledger .c-form{display:none}.ledger .sub-f{display:block}}
@media (max-width:1199px){
.ledger,.ledger tbody,.ledger tr,.ledger td,.ledger th{display:block}
.ledger thead,.ledger .c-no{display:none}
.ledger tbody{display:grid;gap:.9rem}
.ledger tbody tr{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"name name name" "label calc cost" "label recon serve" "test test test" "date date cmp";column-gap:.5rem;padding:1rem .9rem .6rem;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.ledger tbody tr[data-calc="none"]{grid-template-areas:"name name name" "label cost cost" "label serve serve" "calc calc calc" "test test test" "date date cmp"}
.ledger tr[data-calc="none"] .c-recon{display:none}
.ledger tr[data-calc="none"] .c-calc{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .45rem;margin-top:.55rem;padding:.4rem .7rem;border-radius:3px 10px 10px 3px;background:var(--paper-2);border-left-color:rgba(91,104,112,.45);color:var(--ink-2);font:400 .8rem/1.4 var(--sans)}
.ledger tr[data-calc="none"] .c-calc::before{display:inline;margin:0;font-size:.75rem}
.ledger tr[data-calc="none"] .c-calc .cant{display:inline;font-size:.84rem}
.ledger tr[data-calc="none"] .c-calc .rp{border:0;padding:0;margin:0;font-size:.8rem;color:var(--ink-2)}
.ledger tr[data-calc="none"] .c-calc .why{margin:0;padding:.2rem 0}
.t-uniform .c-test{display:none!important}
.ledger tbody tr:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.ledger .c-name a:focus-visible{outline:0}
.ledger td,.ledger tbody th{padding:0;font-size:.9rem;text-align:left;font-weight:400;min-width:0}
.c-form{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ledger .c-name{grid-area:name;margin-bottom:.8rem}
.c-name a{font:500 1.3rem/1.18 var(--serif);letter-spacing:-.01em;text-decoration:none}
.c-name a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.c-name .sub{margin-top:.3rem}
.ledger .c-label,.ledger .c-calc,.ledger .c-recon,.ledger .c-cost{padding:.6rem .55rem .55rem .7rem;font:500 1.75rem/1.05 var(--serif);letter-spacing:-.015em;border-left:3px solid var(--mint-rule);background:var(--mint-wash);color:var(--mint-ink)}
.c-label::before,.c-calc::before,.c-cost::before,.c-serve::before{display:block;font:600 .72rem/1.2 var(--sans);letter-spacing:.01em;margin-bottom:.3rem;content:attr(data-h)}
.u{display:block;font:400 .75rem/1.3 var(--sans);color:var(--ink-2);letter-spacing:0;margin-top:.2rem}
.ledger .c-label{grid-area:label;background:var(--amber-wash);border-left-color:var(--amber);border-radius:3px 10px 10px 3px;color:var(--amber-ink)}
.ledger .c-calc{grid-area:calc;border-radius:3px 10px 0 0;padding-bottom:.1rem}
.c-calc .wk{font-size:.75rem;white-space:normal;letter-spacing:-.01em}
.ledger .c-recon{grid-area:recon;border-radius:0 0 10px 3px;padding-top:.35rem;font:400 .9rem var(--sans)}
.c-recon .mk{white-space:normal;font-size:.75rem;padding:.18rem .5rem}
.c-recon .sub{font-size:.72rem;margin-top:.2rem}
.ledger .c-cost{grid-area:cost;font-weight:600;border:0;background:none;color:var(--ink)}
.c-cost::before{color:var(--ink-2)}
.c-cost .stale{margin:.3rem 0 0}
.ledger .c-serve{grid-area:serve;padding:.1rem .55rem 0 .7rem;font:600 1.15rem/1.15 var(--serif);color:var(--ink)}
.c-serve::before{color:var(--ink-2)}
.c-serve .per{display:block;font-size:.75rem;margin-top:.1rem}
.ledger .c-test{grid-area:test;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem;margin-top:.8rem;padding-top:.7rem;border-top:1px dashed var(--rule);font-size:.8rem}
.c-test::before{content:attr(data-h);font-weight:600}
.c-test .sub{display:inline}
.ledger .c-date{grid-area:date;align-self:center;font-size:.8rem;line-height:1.4;color:var(--ink-2);padding:.35rem 0}
.c-date .pu{display:inline}
.c-date .sub{display:inline;font-size:inherit}
.c-date .sub::before{content:" · "}
.ledger .c-cmp{grid-area:cmp;justify-self:end}
/* No RRP recorded yet: the cost cell says so once; the date line would only repeat it */
.ledger tr[data-price="none"] .c-date .rp{display:none}
}
@media (min-width:720px) and (max-width:1199px){.ledger tbody{grid-template-columns:1fr 1fr}}
/* Above the table; order bar; other views */
.t-intro{display:grid;gap:.25rem;margin:.5rem 0 .6rem;font-size:.86rem;line-height:1.5;color:var(--ink-2);max-width:84ch}
.t-intro p{margin:0}
.t-intro strong{color:var(--ink)}
.checkcount{font-size:.92rem;color:var(--ink)}
.coverage{font-size:.8rem}
.sortbar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .8rem}
.sb-l{font-size:.78rem;font-weight:600;color:var(--ink-2);margin-right:.15rem}
.sb-m{display:none}
@media (max-width:479px){.sb-l,.sb-x{display:none}.sb-m{display:inline}.sortbar{gap:.3rem}.sortbar button,.f-toggle{min-height:38px;padding:.35rem .7rem;font-size:.8rem}.controls{gap:.3rem}}
.sortbar button{font:500 .84rem var(--sans);color:var(--ink);min-height:40px;padding:.4rem .95rem;border:1px solid rgba(14,31,46,.16);border-radius:999px;background:var(--card);cursor:pointer}
.sortbar button:hover{border-color:var(--ink)}
.sortbar button[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.browse{display:grid;gap:.55rem;margin:1.6rem 0 0;font-size:.86rem}
.browse p{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0}
.b-l{font-weight:600;color:var(--ink-2);min-width:6.2rem}
.browse a,.pg-links a{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:.3rem .8rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);text-decoration:none;font-size:.86rem;line-height:1.3}
.browse a:hover,.pg-links a:hover{border-color:var(--ink)}
.b-n{font-size:.72rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.b-t{font-size:.76rem;color:var(--ink-2)}
.pg-links{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
/* Compare tray (max two) */
.cmp-tray{position:fixed;z-index:30;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:.6rem;width:min(calc(100% - 24px),40rem);padding:.55rem .55rem .55rem 1rem;border:1px solid var(--hair);border-radius:18px;box-shadow:0 18px 44px -12px rgba(0,0,0,.55)}
.cmp-tray p{flex:1;min-width:0;margin:0;font-size:.84rem;line-height:1.35}
.cmp-tray .btn{min-height:42px;padding:.5rem 1.1rem}
.btn.is-off{opacity:.45;box-shadow:none}
.cmp-clear{background:none;border:0;padding:.5rem .3rem;font:inherit;font-size:.8rem;color:var(--cream-2);text-decoration:underline;cursor:pointer}
body:has(.cmp-tray:not([hidden])) .foot{padding-bottom:6.5rem}
html:has(.cmp-tray:not([hidden])){scroll-padding-bottom:7rem}
.btn[aria-disabled="true"]{cursor:not-allowed}

/* Pills: fills = check marks; outlines = testing and can't-check */
.mk{display:inline-block;font:600 .76rem/1.3 var(--sans);padding:.2rem .62rem;border:1px solid transparent;border-radius:999px;white-space:nowrap;color:var(--ink);letter-spacing:0}
.mk-ok{background:var(--mint)}
.mk-hi{background:var(--amber)}
.mk-na,.mk-t{background:none;border-color:rgba(91,104,112,.55);color:var(--grey)}
/* Mostly checks out: a mint outline, never the full mint fill that means every figure reconciles */
.mk-po{border:1.5px solid var(--mint-rule);color:var(--mint-ink);background:var(--card)}
.dark .mk-po{border-color:var(--mint);color:var(--mint);background:none;box-shadow:0 0 14px -5px rgba(127,224,195,.55)}
.mk-t.mk-ok{border-color:var(--mint-rule);color:var(--mint-ink);background:var(--mint-wash)}
.mk-t.mk-hi{border-color:var(--amber);color:var(--amber-ink);background:var(--amber-wash)}
.dark .mk-ok{box-shadow:0 0 16px -3px rgba(127,224,195,.6)}
.dark .mk-hi{box-shadow:0 0 16px -3px rgba(242,178,74,.6)}
.dark .mk-na,.dark .mk-t{border-color:rgba(245,239,226,.45);color:rgba(245,239,226,.85);background:none;box-shadow:none}
.dark .mk-t.mk-ok{border-color:var(--mint);color:var(--mint)}
.dark .mk-t.mk-hi{border-color:var(--amber);color:var(--amber)}
.stale{display:inline-block;margin-left:.4rem;font:600 .68rem/1.3 var(--sans);color:var(--amber-ink);background:var(--amber-wash);border:1px solid var(--amber);border-radius:999px;padding:.05rem .45rem;vertical-align:middle;letter-spacing:0}
.dark .stale{color:var(--amber);background:none}

/* Divider (.vsr), also above headings on cream pages */
.vsr,.step::before,.page h2::before,.sub-ledger>h2::before{content:"";display:block;height:16px;border:0;margin:0 0 1rem;background:var(--bars) no-repeat 0 100%,linear-gradient(var(--rule),var(--rule)) no-repeat 24px 100%/calc(100% - 24px) 1px}

/* Home: why, key */
.why,.key{max-width:var(--wide);margin:3.2rem auto 0;padding:0 var(--gut)}
.why h2,.key h2{margin-top:0}
.frame p{font-size:1.06rem;line-height:1.65;max-width:64ch;margin:0 0 .9rem}
.frame p+p{color:var(--ink-2)}
@media (min-width:960px){.why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 3rem}.why .vsr{grid-column:1/-1}.why h2{font-size:2.1rem}}
.key{padding-bottom:3.5rem}
.keylist{display:grid;gap:.25rem;font-size:.92rem;max-width:84ch;margin-bottom:1.4rem}
.keylist dt{margin:.6rem 0 0;scroll-margin-top:1rem}
.keylist dd{margin:0;color:var(--ink-2)}
@media (min-width:720px){.keylist{grid-template-columns:max-content 1fr;gap:.8rem 1.2rem}.keylist dt{margin:0}}
.key p{font-size:.9rem;color:var(--ink-2);max-width:84ch}

/* Title band: titleBand() in build.mjs; --pw = column width shared with .page */
.band{padding:1rem var(--gut) 2.4rem}
.band-in{max-width:var(--pw,var(--col));margin:0 auto}
.band h1{font-weight:400;font-size:clamp(36px,8.5vw,64px);line-height:1.04;letter-spacing:-.02em;margin:.2em 0 .35em;text-wrap:balance}
.band .lead{font-size:1.1rem;line-height:1.55;color:var(--cream-2);max-width:60ch;margin:0}
.crumb{font-size:.86rem;color:var(--cream-2);margin:0 0 .5rem}
.sheet{--pw:1040px}
.band-product h1{font-size:clamp(32px,7vw,56px)}
.band-product .lead{font-size:1rem}
.band h1 .brand{display:block;font:600 1.05rem/1.2 var(--sans);font-variant-caps:all-small-caps;letter-spacing:.08em;color:var(--cream-2);margin-bottom:.35rem}
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:1.5rem 0 1rem}
.fig{position:relative;display:flex;flex-direction:column;gap:.2rem;padding:.8rem .7rem .75rem;border:1px solid var(--hair);border-radius:var(--r);background:radial-gradient(120% 100% at 50% 0%,rgba(245,239,226,.06),transparent 70%);overflow:hidden;min-width:0}
.fig::before{content:"";position:absolute;left:-10%;top:5%;width:90%;height:75%;background:radial-gradient(closest-side,rgba(245,239,226,.1),transparent);pointer-events:none}
.fig-label::before{background:radial-gradient(closest-side,rgba(242,178,74,.2),transparent)}
.fig-calc::before{background:radial-gradient(closest-side,rgba(127,224,195,.18),transparent)}
.fig-l,.fig-u{position:relative;font-size:.74rem;color:var(--cream-2);line-height:1.35}
.fig-l{font-weight:600}
.fig-v{position:relative;font-family:var(--serif);font-size:clamp(1.75rem,8vw,3.4rem);line-height:1.02;letter-spacing:-.02em;text-shadow:0 0 .5em rgba(245,239,226,.25)}
.fig-label .fig-v{color:var(--amber);text-shadow:var(--glow-a)}
.fig-calc .fig-v{color:var(--mint);text-shadow:var(--glow-m)}
.fig-off::before{display:none}
.figs-1{grid-template-columns:1fr}
.fig-wide .fig-l{font:500 1.35rem/1.2 var(--serif);color:var(--cream)}
.fig-wide .fig-u{font-size:.9rem;max-width:60ch}
@media (max-width:479px){.figs{grid-template-columns:1fr 1fr}.fig-cost{grid-column:1/-1}.figs.figs-1{grid-template-columns:1fr}.figs-1 .fig{grid-column:auto}}
.marks{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0}
.marks .stale{margin:0}

/* Cream reading column */
.page{max-width:calc(var(--pw,var(--col)) + 2*var(--gut));margin:0 auto;padding:2rem var(--gut) 3.5rem}
.prose .page{font-size:1.0625rem;line-height:1.65}
@media (min-width:720px){.prose .page{font-size:1.125rem}}
.page p,.page li{max-width:68ch;overflow-wrap:break-word}
.page h2{margin-top:2.2em}
.page>h2:first-child{margin-top:.4em}
.prose .page ul:not([class]),.prose .page ol:not([class]){padding-left:1.2rem}
.prose li{margin-bottom:.4rem}
li::marker{color:var(--ink-2)}
.page table p,.page table li{max-width:none}
.checked{font-size:.82rem;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:.9rem;margin-top:2.8rem}
.callout{background:var(--card);border-left:3px solid var(--ink-2);border-radius:4px 12px 12px 4px;padding:.75rem 1rem;font-size:.95rem;margin:.9rem 0 0;box-shadow:var(--shadow)}
.page .ledger-wrap{margin:1rem 0 1.5rem;overflow-x:auto;background:var(--card);border-radius:12px;box-shadow:var(--shadow)}
.plain{font-size:.88rem;line-height:1.45;min-width:36rem}
.plain th,.plain td{text-align:left;vertical-align:top;padding:.65rem .8rem;border-bottom:1px solid var(--rule-2)}
.plain thead th{font-size:.76rem;font-weight:600;color:var(--ink-2);background:var(--paper-2);white-space:nowrap}
.plain tbody tr:last-child>*{border-bottom:0}
.plain .n{text-align:right}
.plain tbody th{font-weight:500}

/* Product page */
.plain-terms{background:var(--card);border-left:5px solid var(--mint-rule);border-radius:6px var(--r) var(--r) 6px;padding:1.1rem 1.2rem .5rem;margin:0 0 .5rem;box-shadow:var(--shadow)}
.plain-terms h2{font-size:1.35rem;margin:0 0 .5rem}
.plain-terms p{font-size:1.05rem;line-height:1.6}
.step{padding:2rem 0 .4rem}
.step h2{margin:0 0 .8rem;font-size:clamp(1.4rem,4vw,1.7rem)}
.plain-terms h2::before,.step h2::before{display:none}
.step h3{margin:1.4rem 0 .5rem}
.step>p,.step li{max-width:68ch}
.tag{display:inline-block;margin:.25rem 0 0 .45rem;padding:.05rem .45rem;border:1px solid rgba(91,104,112,.55);border-radius:999px;font:600 .72rem/1.3 var(--sans);color:var(--grey);vertical-align:middle}
.is-past>*{color:var(--ink-2)}
/* Earlier observations with no price type: history only, greyed, never used in a figure */
.is-legacy>*{color:var(--grey);background:var(--paper-2)}
.is-legacy a{color:inherit}
@media (max-width:719px){.stack tr.is-legacy{background:var(--paper-2);box-shadow:none;border:1px dashed rgba(91,104,112,.45)}.stack tr.is-legacy>*{background:none}}
/* Price basis: the RRP line, the shelf line on product pages */
.rrp-note{font-size:.8rem;color:var(--ink-2)}
.step .rrp-note{font-size:.92rem;margin:0 0 .7rem}
.shelf{margin:0 0 .6rem}
/* Brand pre-notice: dated line and the brand's own reply */
.notice-line{margin:.2rem 0 .9rem;padding:.45rem .8rem;border-left:3px solid var(--grey);background:var(--paper-2);border-radius:3px 10px 10px 3px;font:500 .9rem/1.45 var(--sans);color:var(--ink)}
.brand-reply{margin:0 0 1rem;padding:.8rem 1rem;background:var(--card);border-left:3px solid var(--grey);border-radius:3px 12px 12px 3px;box-shadow:var(--shadow)}
.brand-reply blockquote{margin:0}
.brand-reply blockquote p{margin:0;font-size:.98rem}
.brand-reply figcaption{margin-top:.45rem;font-size:.8rem;color:var(--ink-2)}
.run-n{font-size:.86rem;color:var(--ink-2)}
.toc{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:.9rem 1.1rem .5rem;margin:0 0 1.5rem}
.toc ol{margin:0;padding-left:1.3rem;font-size:.95rem}
.prose .toc li{margin:0 0 .45rem}
@media (min-width:960px){.toc ol{columns:2;column-gap:2.5rem}.prose .toc li{break-inside:avoid}}
.kv{display:grid;gap:.1rem;font-size:.95rem;background:var(--card);border-radius:var(--r);padding:.9rem 1rem;box-shadow:var(--shadow)}
.kv dt{color:var(--ink-2);font-size:.82rem;margin-top:.65rem}
.kv dt:first-child{margin-top:0}
.kv dd{margin:0}
@media (min-width:720px){.kv{grid-template-columns:minmax(12rem,max-content) 1fr;gap:.65rem 1.5rem;padding:1.1rem 1.3rem}.kv dt{margin:0;font-size:.9rem}}
.work,.example{background:var(--card);border-left:3px solid var(--mint-rule);border-radius:3px 12px 12px 3px;box-shadow:var(--shadow)}
.work{display:flex;flex-direction:column;gap:.35rem;padding:.75rem 1rem;margin:0 0 1rem;overflow-x:auto}
.work .wk,.step .tight .wk{font-size:.88rem;color:var(--ink);white-space:normal;margin:0}
.step .tight .wk{display:inline-block}
/* Working lines in plain words, each with its chemistry collapsed under it ("Show the chemistry", closed by default) */
.work-lines{gap:.55rem}
.wline{display:grid;gap:.1rem}
.wl{margin:0;font:500 .98rem/1.45 var(--sans);font-variant-numeric:tabular-nums lining-nums;color:var(--ink)}
.wl-total{padding-top:.45rem;border-top:1px solid var(--rule)}
details.chem{margin:0;font-size:.84rem}
details.chem>summary{width:fit-content;padding:.3rem 0;font-weight:500;color:var(--ink-2);text-decoration:underline;text-decoration-color:rgba(14,31,46,.3);text-underline-offset:.18em}
details.chem>summary:hover{text-decoration-color:var(--mint-rule)}
.chem-in{display:grid;gap:.3rem;margin:.15rem 0 .2rem;padding:.5rem .7rem;background:var(--paper);border-radius:8px;color:var(--ink-2);overflow-wrap:anywhere}
.chem-in p{margin:0;max-width:none;font-size:.84rem;line-height:1.45}
.chem-in .wk{font-size:.84rem;color:var(--ink);white-space:normal;margin:0}
.chem-in .sub{display:inline}
td details.chem{margin-top:.25rem}
.tight{padding-left:1.15rem}
.tight li{margin-bottom:.4rem}
.step .tight a{overflow-wrap:anywhere}

/* Lists */
.plist{list-style:none;padding:0;margin:0 0 1rem}
.plist li{padding:.8rem 0;border-bottom:1px solid var(--rule);max-width:none}
.plist a{font:500 1.15rem/1.3 var(--serif);text-decoration-color:transparent}
.plist .sub{margin-top:.15rem;font-size:.85rem}
.runs{list-style:none;padding:0;margin:0}
.page .run{background:var(--card);border-radius:var(--r);padding:1rem 1.15rem .6rem;margin:0 0 .8rem;box-shadow:var(--shadow);max-width:none}
.run h3{margin:0 0 .4rem}
.run p{font-size:.95rem}
details{font-size:.88rem;margin:0 0 .6rem}
summary{cursor:pointer;color:var(--ink-2);font-weight:500}
.c-name a:hover,.plist a:hover{text-decoration-color:var(--amber)}

/* Product summary */
.sum{display:grid;gap:.85rem;margin:0 0 .6rem}
.sum>div{display:grid;gap:.1rem}
.sum dt{font:600 .78rem/1.3 var(--sans);color:var(--ink-2)}
.sum dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .75rem}
.sum-v{font:500 1.65rem/1.1 var(--serif);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.sum-na{font:500 1rem/1.3 var(--sans);color:var(--ink-2)}
.sum-n{flex:1 1 15rem;font-size:.95rem;line-height:1.5;color:var(--ink-2)}
@media (min-width:720px){.sum>div{grid-template-columns:12.5rem 1fr;align-items:baseline}}
.fig-na{display:block;padding-top:.35rem;font:500 1rem/1.25 var(--sans);letter-spacing:0;color:var(--cream-2);text-shadow:none}
.mark-line{margin:0 0 .6rem}
/* Live worked example */
.example{padding:.9rem 1.1rem .75rem;margin:0 0 1.2rem;font-size:.98rem}
.example p,.example li{max-width:none}
.ex-src{margin:0 0 .6rem}
.ex-steps{padding-left:1.25rem;margin:0 0 .6rem}
.prose .ex-steps li{margin:0 0 .6rem}
.ex-steps .wk{font-size:.84rem;color:var(--ink);white-space:normal;margin:.3rem 0 .15rem}
.ex-more{margin:0;font-size:.88rem}
/* Calculator */
.calc-box{margin:1.4rem 0 1.8rem}
.page>.calc-box:first-child{margin-top:0}
.steps5{padding-left:1.3rem}
.prose .steps5 li{margin-bottom:.3rem}
details.more{font-size:1rem;margin:0 0 1.5rem}
details.more[open]>summary{margin-bottom:.6rem}
.calc{display:grid;gap:1rem;padding:1.1rem 1.1rem 1.25rem;border-radius:20px;background:var(--night) var(--grain);color:var(--cream);box-shadow:inset 0 0 0 1px rgba(245,239,226,.2),0 0 60px -20px rgba(127,224,195,.35)}
.calc-in{display:grid;gap:.35rem}
.calc label{font-size:.85rem;color:var(--cream-2);margin-top:.3rem}
.calc select,.calc input{width:100%;min-height:48px;padding:.6rem .85rem;border:0;border-radius:12px;background:var(--cream);color:var(--ink);font:500 1rem var(--sans)}
.calc :focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.calc-mg{position:relative;display:block}
.calc-mg span{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--ink-2);pointer-events:none}
.calc input{padding-right:3rem;-moz-appearance:textfield;appearance:textfield}
.calc input::-webkit-inner-spin-button,.calc input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.calc-out{display:block;border-top:1px solid var(--hair);padding-top:.9rem}
.calc-v{display:block;font:400 clamp(2.4rem,10vw,3.4rem)/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--mint);text-shadow:var(--glow-m)}
.calc-v.calc-na{font-size:1.6rem;color:var(--cream);text-shadow:none}
.calc-l{display:block;margin:.25rem 0 .4rem;font-size:.85rem;color:var(--cream-2)}
.calc-s,.calc-hint{display:block;margin-top:.35rem;font-size:.92rem;line-height:1.5;color:var(--cream-2)}
.calc-err{display:block;font-size:.95rem;line-height:1.5;color:var(--amber)}
.calc-alts{margin:.4rem 0 0;padding-left:1.1rem;font-size:.9rem;color:var(--cream-2)}
.calc-alts li{margin:0 0 .2rem}
@media (min-width:720px){.calc{grid-template-columns:1fr 1fr;align-items:start}.calc-out{border-top:0;border-left:1px solid var(--hair);padding:.3rem 0 0 1.2rem}}
.calc-ref-h{margin-top:1.6rem}
.page .calc-ref{min-width:0;font-size:.82rem}
.calc-ref th[scope="row"]{font-weight:500}
.calc-ref td,.calc-ref thead th{white-space:nowrap}
.page .calc-ref th,.page .calc-ref td{padding:.55rem .45rem}
.calc-ref .sub{font-size:.72rem}
/* Stacked tables on phones */
@media (max-width:719px){
.page .ledger-wrap:has(.stack){background:none;box-shadow:none;overflow:visible}
.page .plain.stack{min-width:0}
.stack thead{display:none}
.stack,.stack tbody,.stack th,.stack td{display:block}
.stack tr{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .9rem;margin:0 0 .6rem;padding:.8rem .9rem;background:var(--card);border-radius:12px;box-shadow:var(--shadow)}
.stack th,.stack td{padding:0;border:0}
.stack tbody th,.stack td.wide{grid-column:1/-1}
.stack tbody th{font:500 1.05rem/1.3 var(--serif)}
.stack td::before{content:attr(data-l);display:block;margin-bottom:.1rem;font:600 .7rem/1.3 var(--sans);color:var(--ink-2)}
.stack td.n{text-align:left}
.stack td:empty{display:none}
}
/* Form links, changes */
.formlinks{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.5rem}
@media (min-width:720px){.formlinks{grid-template-columns:1fr 1fr}}
.page .formlinks li{max-width:none;margin:0;padding:.75rem .95rem;background:var(--card);border-radius:12px;box-shadow:var(--shadow)}
.formlinks a{font:500 1.08rem/1.3 var(--serif);text-decoration-color:transparent}
.formlinks a:hover{text-decoration-color:var(--amber)}
.ch-day h2{font-size:1.3rem;margin:1.8em 0 .5rem}
.changes{list-style:none;padding:0;margin:0}
.page .changes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.1rem .7rem;align-items:baseline;max-width:none;margin:0;padding:.7rem 0;border-bottom:1px solid var(--rule)}
.changes a{font:500 1.02rem/1.3 var(--serif)}
.ch-t{grid-column:2;font-size:.9rem;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere}
.ch{grid-row:span 2;font:600 .7rem/1.3 var(--sans);white-space:nowrap;padding:.12rem .5rem;border:1px solid rgba(91,104,112,.5);border-radius:999px;color:var(--grey)}
.ch-price,.ch-correction,.ch-artg{border-color:var(--ink);color:var(--ink)}
.ch-added{border-color:var(--mint-rule);background:var(--mint-wash);color:var(--mint-ink)}
/* Form and retailer pages */
.sub-ledger{padding-bottom:1rem}
.sub-ledger>h2{margin:2.4rem 0 .9rem}
.prose-tail{padding-top:1rem}
.band-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin:1.5rem 0 0}
/* Compare two */
.cmp-pick{display:grid;gap:.8rem;margin:0 0 1.3rem}
@media (min-width:720px){.cmp-pick{grid-template-columns:1fr 1fr}}
.cmp-empty{padding:1rem 0;color:var(--ink-2)}
.cmp-table{border-collapse:separate;border-spacing:0;margin:0 0 1rem;background:var(--card);border-radius:14px;box-shadow:var(--shadow);font-size:.92rem;line-height:1.45}
.cmp-table thead th,.cmp-table thead td{position:sticky;top:0;z-index:2;background:var(--night);color:var(--cream);text-align:left;vertical-align:bottom;padding:.8rem}
.cmp-table thead tr>:first-child{border-radius:14px 0 0 0}
.cmp-table thead tr>:last-child{border-radius:0 14px 0 0}
.cmp-h .brand{display:block;font:600 .8rem/1.2 var(--sans);font-variant-caps:all-small-caps;letter-spacing:.07em;color:var(--cream-2)}
.cmp-h a{font:500 1.12rem/1.2 var(--serif);color:var(--cream);text-decoration-color:rgba(245,239,226,.4)}
.cmp-h .cmp-d{display:block;margin-top:.2rem;font:400 .78rem/1.3 var(--sans);color:var(--cream-2)}
.cmp-v .mk{white-space:normal;max-width:100%;border-radius:12px}
.cmp-note{margin:0 0 1rem;color:var(--ink-2)}
.cmp-none{font-weight:400;color:var(--cream-2)}
.cmp-k{width:11rem;padding:.75rem .8rem;text-align:left;vertical-align:top;font:600 .78rem/1.3 var(--sans);color:var(--ink-2)}
.cmp-v{padding:.75rem .8rem;vertical-align:top;border-left:1px solid var(--rule-2);min-width:0;overflow-wrap:anywhere}
.cmp-table tbody tr+tr>*{border-top:1px solid var(--rule-2)}
.cmp-big{display:block;font:500 1.5rem/1.1 var(--serif);font-variant-numeric:tabular-nums lining-nums}
.cmp-v .tight{margin:.1rem 0 .4rem;font-size:.85rem}
@media (max-width:719px){
.cmp-table,.cmp-table thead,.cmp-table tbody{display:block}
.cmp-table{width:100%;table-layout:fixed}
.cmp-table thead{position:sticky;top:0;z-index:2;border-radius:14px 14px 0 0}
.cmp-table thead tr,.cmp-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cmp-table thead th{position:static}
.cmp-corner{display:none}
.cmp-table thead tr>:nth-child(2){border-radius:14px 0 0 0}
.cmp-k{grid-column:1/-1;width:auto;padding:.7rem .8rem 0}
.cmp-v{border-left:0;font-size:.88rem}
.cmp-v+.cmp-v{border-left:1px solid var(--rule-2)}
.cmp-table tbody tr+tr>*{border-top:0}
.cmp-table tbody tr+tr{border-top:1px solid var(--rule-2)}
.cmp-big{font-size:1.3rem}
}
/* Affiliate marker and notice (AFFILIATE-SPEC §5.2) */
.aff{font-size:.82rem;font-variant-caps:all-small-caps;letter-spacing:.04em;color:rgba(14,31,46,.7);white-space:nowrap}
.aff-note{margin:0 0 1rem;padding:.6rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:.88rem;color:var(--ink-2)}

/* Search */
.search{margin:1.2rem 0 0}
.search label{display:block;font-size:.9rem;color:var(--cream-2);margin-bottom:.45rem}
.search input{font:inherit;font-size:1.05rem;width:100%;max-width:36rem;min-height:48px;padding:.7rem 1.1rem;border:1px solid rgba(245,239,226,.45);border-radius:999px;background:rgba(245,239,226,.06);color:var(--cream);box-shadow:0 0 30px -12px rgba(245,239,226,.35)}
.search .sub{margin-top:.5rem;min-height:1.2em}
.search-all h2{margin-top:1.4em}

/* How to choose: where-it-sits line, start strip, chooser, stepper, two columns */
.where{display:block;margin-top:.35rem;font:400 .8rem/1.45 var(--sans);color:var(--ink-2);letter-spacing:0}
.w-r{font-weight:600;color:var(--ink)}
.where-top{margin:0 0 1rem;font-size:.95rem}
.where-top .where{margin:.1rem 0 .2rem;font-size:inherit}
.wt-l{font:600 .78rem/1.3 var(--sans);color:var(--ink-2)}
/* Home: the chooser folded into one row ("Narrow it down: pick a form ▸") that opens in place; open, it is one night panel. */
.ch-fold{margin:.65rem 0 .8rem;border-radius:14px;background:var(--night) var(--grain);color:var(--cream);box-shadow:inset 0 0 0 1px rgba(245,239,226,.2),0 0 40px -22px rgba(127,224,195,.35)}
.ch-fold>summary{display:flex;align-items:center;flex-wrap:wrap;gap:.1rem .45rem;min-height:48px;padding:.5rem 3.3rem .5rem 1rem;position:relative;list-style:none;color:var(--cream);font-size:.95rem;border-radius:14px}
.ch-fold>summary::-webkit-details-marker{display:none}
.ch-fold>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ch-fold>summary:hover .chf-i{border-color:var(--cream)}
.chf-t{font:500 1.15rem/1.2 var(--serif)}
.chf-x{color:var(--cream-2)}
.chf-i{position:absolute;right:.8rem;top:50%;width:1.75rem;height:1.75rem;margin-top:-.875rem;display:grid;place-items:center;border:1px solid rgba(245,239,226,.45);border-radius:50%}
.chf-i::before{content:"";width:.42rem;height:.42rem;margin-left:-.12rem;border-right:2px solid;border-bottom:2px solid;transform:rotate(-45deg)}
.ch-fold[open] .chf-i::before{margin:-.18rem 0 0;transform:rotate(45deg)}
/* ≥960: the folded row sits beside the status strip; opened, it takes the full width below it */
.topline{max-width:var(--wide);margin:0 auto;padding:0 var(--gut)}
.topline .status{padding:.7rem 0 0;max-width:none;margin:0}
@media (min-width:960px){.topline{display:flex;flex-wrap:wrap;align-items:center;column-gap:1.5rem}.topline .status{flex:1 1 20rem;padding:0}.topline .ch-fold{flex:0 1 auto;margin:.6rem 0}.topline .ch-fold[open]{flex-basis:100%;margin-top:.2rem}}
.ch-fold .chooser{margin:0;padding-top:.3rem;background:none;box-shadow:none;border-radius:0 0 14px 14px}
.chooser,.stepper{border-radius:20px;background:var(--night) var(--grain);color:var(--cream);box-shadow:inset 0 0 0 1px rgba(245,239,226,.2),0 0 60px -20px rgba(127,224,195,.35)}
.chooser{margin:.8rem 0 1.4rem;padding:1rem 1rem 1.15rem}
.page .chooser{margin:2.2rem 0}
.chooser h2{margin:0 0 .7rem;font-size:1.45rem}
.chooser h2::before{display:none}
.ch-f{border:0;margin:0 0 .8rem;padding:0;min-width:0}
.ch-f legend{display:flex;align-items:center;gap:.5rem;padding:0;margin:0 0 .4rem;font-weight:600;font-size:.95rem}
.ch-qn{display:inline-grid;place-items:center;width:1.55rem;height:1.55rem;border:1px solid var(--hair);border-radius:50%;font:500 .85rem var(--serif)}
.ch-os{display:flex;flex-wrap:wrap;gap:.4rem}
.ch-o{position:relative}
.ch-o input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ch-o>span{display:inline-flex;align-items:center;gap:.4rem;min-height:42px;padding:.35rem .9rem;border:1px solid rgba(245,239,226,.35);border-radius:999px;font-size:.9rem}
.ch-o input:checked+span{background:var(--cream);color:var(--night);border-color:var(--cream);font-weight:600}
.ch-o input:focus-visible+span{outline:2px solid var(--amber);outline-offset:2px}
.ch-o .b-n{color:inherit;opacity:.7}
.ch-hint{margin:.45rem 0 0;font-size:.84rem;color:var(--cream-2)}
.ch-out{border-top:1px solid var(--hair);padding-top:.8rem}
.ch-count{margin:0 0 .6rem;font-weight:600}
.ch-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.page .ch-list li{max-width:none;margin:0}
.ch-card{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:.15rem .7rem;padding:.75rem .85rem;border:1px solid var(--hair);border-radius:14px;background:rgba(245,239,226,.06)}
.ch-card:hover{border-color:rgba(245,239,226,.6)}
.ch-n{grid-row:span 2;font:400 1.7rem/1 var(--serif);text-shadow:0 0 .5em rgba(245,239,226,.4)}
.ch-name{font:500 1.06rem/1.25 var(--serif);text-decoration:none}
.ch-name::after{content:"";position:absolute;inset:0;border-radius:14px}
.ch-name .brand{display:block;font:600 .8rem/1.3 var(--sans);font-variant-caps:all-small-caps;letter-spacing:.07em;color:var(--cream-2)}
.ch-cost{text-align:right;font-size:.74rem;color:var(--cream-2);line-height:1.2}
.ch-v{display:block;font:400 1.55rem/1.05 var(--serif);text-shadow:0 0 .5em rgba(245,239,226,.35);font-variant-numeric:tabular-nums}
.ch-na{display:block;max-width:7rem}
.ch-card .where{grid-column:3/-1;color:var(--cream-2)}
.dark .w-r{color:var(--cream)}
.ch-note,.ch-empty{margin:.8rem 0 0;font-size:.88rem;color:var(--cream-2)}
.ch-more{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.3rem;margin:.9rem 0 0}
.ch-loosen{margin-left:.3rem;min-height:40px;padding:.4rem .95rem;border:1px solid var(--cream);border-radius:999px;background:none;color:var(--cream);font:600 .86rem var(--sans);cursor:pointer}
.js .ch-nojs{display:none}
.ch-nojs .chips a{color:var(--ink)}
.ch-nojs .ledger-wrap{margin:.8rem 0;color:var(--ink);background:var(--card);border-radius:12px;overflow-x:auto}
.ch-nojs .plain{min-width:0}
@media (max-width:719px){.ch-nojs .ledger-wrap{background:none}}
@media (min-width:960px){.ch-on .ch-q{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:0 1.5rem}.ch-list{grid-template-columns:repeat(3,minmax(0,1fr))}.ch-card{grid-template-columns:auto minmax(0,1fr);align-content:start}.ch-n{grid-column:1;grid-row:1}.ch-card .pk{grid-column:1;grid-row:2/span 2;width:28px;margin-top:.5rem}.ch-nm{grid-column:2;grid-row:1}.ch-cost{grid-column:2;text-align:left}.ch-card .where{grid-column:2}.ch-card .w-s{white-space:normal}}
.stepper{list-style:none;counter-reset:st;margin:1rem 0 1rem;padding:.3rem 1.1rem}
.prose .stepper li{counter-increment:st;position:relative;max-width:none;margin:0;padding:1rem 0 .9rem 3rem;border-top:1px solid var(--hair)}
.prose .stepper li:first-child{border-top:0}
.stepper li::before{content:counter(st);position:absolute;left:0;top:.85rem;font:400 2.3rem/1 var(--serif);text-shadow:0 0 .45em rgba(245,239,226,.45)}
.stepper h3{margin:0 0 .25rem;font:500 1.25rem/1.25 var(--serif)}
.stepper p{margin:0}
.stepper p{font-size:1rem;line-height:1.5}
.stepper .st-why{margin-top:.35rem;font-size:.9rem;color:var(--cream-2)}
.w-s{white-space:nowrap}
.ch-compact:not(.ch-picked) .ch-f+.ch-f{display:none}
.answer{font:500 1.2rem/1.4 var(--serif)}
.twocol{display:grid;gap:.7rem;margin:0 0 1.2rem}
@media (min-width:720px){.twocol{grid-template-columns:1fr 1fr}}
.twocol>div{padding:.85rem 1rem .3rem;background:var(--card);border-top:3px solid var(--ink);border-radius:6px 6px var(--r) var(--r);box-shadow:var(--shadow)}
.twocol .col-no{border-top-style:dashed;border-top-color:var(--grey)}
.twocol h3{margin:0 0 .4rem}
.prose .twocol ul{margin:0 0 .6rem;padding-left:1.1rem;font-size:1rem}
.fn{font-size:.84rem;color:var(--ink-2)}
sup{line-height:0}
sup a{padding:0 .15em;font-weight:600;text-decoration:none}
.g-v{font-weight:600;font-variant-numeric:tabular-nums;margin-right:.25rem}
@media (max-width:719px){.glance td.n{grid-column:1/-1}}

/* Pack illustrations (decorative, aria-hidden): our own drawing, one shape per dose form; the body colour says the form.
   Shapes and gradients are a sprite of <symbol>s in each page; the label words are SVG text, sized in viewBox units. */
.pk-sprite{position:absolute;width:0;height:0;overflow:hidden}
.pk{display:block;flex:none;width:44px;height:auto;aspect-ratio:100/120;overflow:visible}
.pk text{text-anchor:middle}
.pk-b{font-family:var(--sans);font-weight:700;letter-spacing:.45px;fill:#4a5862}
.pk-n{font-family:var(--serif);font-weight:500;letter-spacing:-.25px;fill:#0e1f2e}
.pk-u{font-family:var(--sans);font-weight:600;letter-spacing:0;fill:#4a5862}
.pk-f{font-family:var(--serif);font-style:italic;fill:#4a5862}
.pk-x{font-family:var(--sans);font-weight:500;fill:#5b6870}
.f-glycinate{color:#9dd3c0}.f-citrate{color:#ead083}.f-oxide,.f-mixed{color:#8597a5}.f-aspartate{color:#bba9db}.f-phosphate{color:#dcc8a4}
.f-chloride{color:#a6c3da}.f-malate{color:#e5b8a0}.f-threonate{color:#cca9bb}.f-taurate{color:#8dbdba}.f-orotate{color:#c6c892}.f-amino_acid_chelate_unspecified{color:#adc0b0}.f-other{color:#b8bfc4}
.dark .pk{filter:drop-shadow(0 0 10px rgba(127,224,195,.16))}
/* in the list: left of the name on wide screens, small top-left on a card */
.nmw{display:flex;align-items:flex-start;gap:.65rem}
.nm{min-width:0}
.c-name .pk{width:38px;margin-top:.15rem}
.nm .tag-notice{display:table;margin:.4rem 0 0}
@media (min-width:1200px){.ledger .c-name .pk{width:40px}}
/* chooser results */
.ch-nm{min-width:0}
.ch-nm .ch-name{display:block}
.ch-card .pk{grid-row:span 2;width:30px;align-self:start;margin-top:.1rem}
.ch-nm .tag-notice{display:table;margin:.3rem 0 0;border-color:rgba(245,239,226,.5);color:var(--cream)}
/* compare: one above each column head */
.cmp-table thead .cmp-h{vertical-align:top}
.cmp-h .pk{width:46px;margin:0 0 .45rem}
/* product page: the first tile of the lightbox strip */
.figs-pk{grid-template-columns:minmax(0,.78fr) repeat(3,minmax(0,1fr))}
.figs-1.figs-pk{grid-template-columns:minmax(0,9rem) minmax(0,1fr)}
.fig-pk{position:relative;display:flex;align-items:flex-end;justify-content:center;min-width:0;padding:.2rem 0 0}
.fig-pk::before{content:"";position:absolute;left:0;right:0;top:10%;bottom:0;background:radial-gradient(closest-side,rgba(245,239,226,.13),transparent);pointer-events:none}
.pk-lg{position:relative;width:min(100%,104px)}
@media (max-width:719px){.figs-pk{grid-template-columns:1fr 1fr}.figs-pk .fig-cost{grid-column:auto}.pk-lg{width:min(100%,92px)}}

/* Recall notice: neutral, never a mark colour */
.notice-box{margin:0 0 1.1rem;padding:.85rem 1.1rem .8rem 1rem;background:var(--card);border-left:4px solid var(--ink);border-radius:5px var(--r) var(--r) 5px;box-shadow:var(--shadow)}
.notice-box p{margin:0;max-width:72ch;font-size:1rem;line-height:1.55}
.notice-box strong{font-weight:700}
.notice-box .notice-link{margin-top:.45rem;font-size:.92rem}
.tag-notice{border-color:var(--ink);color:var(--ink);font-weight:600}
/* the same tag where the product is spotlit: the hero lightbox (on night), the glance table and the compare column heads */
.lb-fig .tag-notice{margin:.2rem 0 0 .4rem;border-color:rgba(245,239,226,.55);color:var(--cream);letter-spacing:0;vertical-align:.1em}
.glance .tag-notice{margin-left:.35rem}
.cmp-h .tag-notice{display:table;margin:.4rem 0 0}
.plist .tag-notice{margin-left:.4rem}

/* Footer */
.foot{padding:2.6rem var(--gut) 2.4rem;font-size:.92rem;color:var(--cream-2)}
.foot-in{max-width:var(--wide);margin:0 auto}
.foot-grid{display:grid;gap:1.6rem 3rem;padding-bottom:2rem;border-bottom:1px solid var(--hair)}
.foot .mark{font-size:1.75rem}
.foot-id p{max-width:36ch;margin:.7rem 0 0}
.foot-links{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:.55rem 1.5rem;align-content:start}
.foot-links a{color:var(--cream);text-decoration:none;min-width:0}
.foot-mail{grid-column:1/-1;overflow-wrap:anywhere}
.foot-links a:hover{text-decoration:underline;text-decoration-color:var(--amber)}
.foot-legal{margin:1.2rem 0 0;font-size:.8rem;line-height:1.6;max-width:92ch}
.foot-legal strong{display:block;font:500 1.1rem/1.4 var(--serif);color:var(--cream);margin-bottom:.3rem}
@media (min-width:720px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.foot-links{justify-content:end}}

/* Lit figures switch on like a tube warming up */
@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
.lb-v,.lb-xv,.fig-v{animation:lb-on 1.1s ease-out both}
.lb-hi .lb-v,.fig-calc .fig-v{animation-delay:.18s}
.lb-xv,.fig-cost .fig-v{animation-delay:.32s}
}
@keyframes lb-on{0%{opacity:.12;text-shadow:none}9%{opacity:1}14%{opacity:.3}22%{opacity:1}27%{opacity:.55}36%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.top,.foot,.filters,.skip,.hero-cta{display:none}.dark{background:none;color:#000}.lb-v,.fig-v,.hero h1 em{text-shadow:none;color:#000}}