/* ChemicalSuppliers, "Clean board" look (2026-10-29). Search front and centre, prices easy to read. Light by
   default, dark is a choice in the header; dark only in spurts (the savings ticker, the flip board, the closing
   search band). Splashes of colour come from the uses and the kinds of store. Geist and Geist Mono, served from
   our own site. Mobile first. */
@font-face{font-family:"Geist";src:url(fonts/geist.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geistmono.woff2) format("woff2");font-weight:300 800;font-display:swap}
:root{color-scheme:light;
  --bg:#FBFBFC;--surf:#fff;--surf2:#F3F3F5;--fill:#EDEDF0;--fill2:#E4E4E8;--hov:rgba(24,24,27,.055);--ring:rgba(0,0,0,.06);--ring2:rgba(0,0,0,.1);
  --ink:#18181B;--ink2:#52525B;--ink3:#6E6E77;--line:#E7E7EA;--green:#0A7A46;--gfill:#0B8A4F;--gsoft:rgba(11,138,79,.08);
  --btn:#18181B;--btnt:#fff;--btnh:#000;--panel:#18181B;--red:#C4372D;--amber:#FFC23D;--ph:#7C7C85;--grid:rgba(24,24,27,.11);--dot:#DEDEE3;
  --azc:11,138,79;--azm:1;--barc:#B9BAC2;--bar:#EFEFF2;--fw:rgba(24,24,27,.13);--fw0:rgba(24,24,27,0);
  --sh:0 0 0 1px rgba(0,0,0,.05),0 18px 40px -16px rgba(0,0,0,.12);--bring:rgba(0,0,0,.55);--hl:linear-gradient(90deg,#FFD25E,#FFC23D);
  --font:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,Consolas,monospace;
  /* older names, kept so every page and form keeps working */
  --wall:var(--bg);--wall2:var(--fill);--tag:var(--surf);--sale:var(--amber);--field:var(--surf);--board:var(--panel);--hi:var(--hov);--cond:var(--font);--shadow:var(--sh)}
[data-theme=dark]{color-scheme:dark;
  --bg:#0E0F11;--surf:#17181B;--surf2:#121316;--fill:#26272C;--fill2:#303137;--hov:rgba(255,255,255,.07);--ring:rgba(255,255,255,.08);--ring2:rgba(255,255,255,.14);
  --ink:#F4F4F5;--ink2:#B4B4BC;--ink3:#8E8E98;--line:#2A2B30;--green:#3DD68C;--gfill:#2BB673;--gsoft:rgba(61,214,140,.12);
  --btn:#F4F4F5;--btnt:#18181B;--btnh:#fff;--panel:#232429;--red:#F2766B;--ph:#8A8A93;--grid:rgba(255,255,255,.08);--dot:#34353B;
  --azc:61,214,140;--azm:.62;--barc:#4A4B52;--bar:#26272C;--fw:rgba(255,255,255,.1);--fw0:rgba(255,255,255,0);
  --sh:0 0 0 1px rgba(255,255,255,.07),0 18px 40px -16px rgba(0,0,0,.6);--bring:rgba(255,255,255,.09);--hl:rgba(255,194,61,.4)}
@media (prefers-color-scheme:dark){[data-theme=system]{color-scheme:dark;
  --bg:#0E0F11;--surf:#17181B;--surf2:#121316;--fill:#26272C;--fill2:#303137;--hov:rgba(255,255,255,.07);--ring:rgba(255,255,255,.08);--ring2:rgba(255,255,255,.14);
  --ink:#F4F4F5;--ink2:#B4B4BC;--ink3:#8E8E98;--line:#2A2B30;--green:#3DD68C;--gfill:#2BB673;--gsoft:rgba(61,214,140,.12);
  --btn:#F4F4F5;--btnt:#18181B;--btnh:#fff;--panel:#232429;--red:#F2766B;--ph:#8A8A93;--grid:rgba(255,255,255,.08);--dot:#34353B;
  --azc:61,214,140;--azm:.62;--barc:#4A4B52;--bar:#26272C;--fw:rgba(255,255,255,.1);--fw0:rgba(255,255,255,0);
  --sh:0 0 0 1px rgba(255,255,255,.07),0 18px 40px -16px rgba(0,0,0,.6);--bring:rgba(255,255,255,.09);--hl:rgba(255,194,61,.4)}}
/* use and store colours: --c is the colour, --t/--d its light tint and dark text, --tk/--dk the dark-mode pair */
.use,.mu,.stat,.uhead{--ut:var(--t);--ud:var(--d)}
[data-theme=dark] :is(.use,.mu,.stat,.uhead){--ut:var(--tk);--ud:var(--dk)}
@media (prefers-color-scheme:dark){[data-theme=system] :is(.use,.mu,.stat,.uhead){--ut:var(--tk);--ud:var(--dk)}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{display:flex;flex-direction:column;min-height:100vh;margin:0;overflow-x:clip;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased}
main{flex:1 0 auto;width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
p a:not([class]),dd a:not([class]),.doc li a:not([class]){text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .15s}
p a:not([class]):hover,dd a:not([class]):hover,.doc li a:not([class]):hover{color:var(--green)}
button{font:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tick :focus-visible,.board :focus-visible,.end :focus-visible,.bulk :focus-visible{outline-color:#fff}
.end .search :focus-visible{outline-color:var(--ink)}
::selection{background:rgba(255,194,61,.45)}
img,svg{max-width:100%}
p{margin:0 0 12px}
sub{font-size:.72em;line-height:0}
p,li,dd,td,th{overflow-wrap:break-word}
.sr,.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
.num{font-variant-numeric:tabular-nums lining-nums}
.mono{font-family:var(--mono);font-size:.92em}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.wrap{max-width:1176px;padding:0 24px}}
.skip{position:absolute;left:12px;top:-80px;z-index:100;padding:12px 16px;border-radius:12px;background:var(--btn);color:var(--btnt);font-weight:600}
.skip:focus{top:12px}

/* type */
h1{margin:14px 0;font-weight:650;font-size:clamp(32px,5.4vw,56px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance;overflow-wrap:anywhere}
.h1-long{font-size:clamp(26px,3.8vw,42px)}
h2{margin:0 0 12px;font-weight:650;font-size:clamp(24px,3vw,32px);line-height:1.1;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:anywhere}
h3{margin:0 0 6px;font-weight:600;font-size:18px;line-height:1.25;letter-spacing:-.015em;overflow-wrap:anywhere}
.lede{max-width:62ch;margin:0 0 24px;font-size:clamp(16px,1.8vw,19px);line-height:1.5;color:var(--ink2);text-wrap:pretty}
.lede b{color:var(--ink);font-weight:600}
.sub{max-width:64ch;margin:0 0 20px;font-size:16px;color:var(--ink2);text-wrap:pretty}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:22px 0 0;font-size:14px;color:var(--ink3)}
.crumbs a{color:var(--ink2);transition:color .15s}
.crumbs a:hover{color:var(--green)}
.crumbs span{min-width:0;overflow-wrap:anywhere}
.live{width:8px;height:8px;border-radius:50%;background:var(--gfill);flex:none;animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(11,138,79,.45)}70%,100%{box-shadow:0 0 0 9px rgba(11,138,79,0)}}
@keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(43,214,123,.5)}70%,100%{box-shadow:0 0 0 9px rgba(43,214,123,0)}}
@keyframes mq{to{transform:translateX(-50%)}}

/* savings ticker (home only) */
.tick{position:relative;z-index:31;display:flex;align-items:center;height:36px;overflow:hidden;background:#131417;color:#9B9CA3;font-size:13px}
.tk-l{position:relative;z-index:1;display:flex;align-items:center;gap:9px;flex:none;height:100%;margin:0;padding:0 18px 0 max(16px,calc(50vw - 564px));background:#131417;box-shadow:14px 0 14px -2px #131417;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#ECECEE;white-space:nowrap}
@media (min-width:700px){.tk-l{padding-left:max(24px,calc(50vw - 564px))}}
.tk-l .live,.bh .live,.fchip .live{background:#2BD67B;animation-name:pulse2}
.tk-m{flex:1;min-width:0;overflow:hidden}
.tk-t{display:flex;width:max-content;animation:mq 80s linear infinite}
.tick:hover .tk-t{animation-play-state:paused}
.tk-t a{display:flex;align-items:center;gap:9px;padding-right:22px;white-space:nowrap;transition:color .15s}
.tk-t a:after{content:"";width:4px;height:4px;margin-left:13px;border-radius:50%;background:#45464D}
.tk-t a:hover{color:#E4E4E7}
.tk-t b{font:600 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#F4F4F5}
.tk-t em{font:600 13px/1 var(--mono);font-style:normal;color:var(--amber)}
.tk-t .tg{padding:3px 7px;border-radius:6px;background:rgba(43,214,123,.13);color:#34D982;font-weight:600;font-size:12px}
@media (max-width:640px){.tk-l{display:none}.tick{height:34px}}

/* header */
.top{position:sticky;top:0;z-index:30;background:var(--surf);border-bottom:1px solid var(--ring2);box-shadow:0 1px 2px rgba(0,0,0,.03);transition:box-shadow .25s}
.top.on{box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 28px -16px rgba(0,0,0,.28)}
.top .wrap{position:relative;display:flex;align-items:center;gap:14px;height:68px}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;font-size:17px;letter-spacing:-.025em;white-space:nowrap}
.brand span{color:var(--ink3)}
.brand svg{width:26px;height:26px;flex:none}
.mnav{display:none;align-self:stretch;margin-left:14px}
.mi{display:flex;align-items:center}
.ml{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:11px;font-size:15px;font-weight:500;color:var(--ink2);white-space:nowrap;transition:background .15s,color .15s}
.cv{width:10px;height:10px;opacity:.55;transition:transform .2s}
.mi:hover .ml,.mi:focus-within .ml{background:var(--hov);color:var(--ink)}
.mi:hover .cv,.mi:focus-within .cv{transform:rotate(180deg)}
.mp{position:absolute;top:100%;left:16px;right:16px;z-index:1;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s .12s,transform .16s .12s,visibility 0s .28s}
.mi:hover .mp,.mi:focus-within .mp{z-index:2;opacity:1;visibility:visible;transform:none;transition:opacity .18s .09s,transform .18s .09s,visibility 0s .09s}
.mpi{max-width:900px;margin:0 auto;padding:22px;border-radius:24px;background:var(--surf);box-shadow:0 0 0 1px var(--ring),0 2px 4px rgba(0,0,0,.03),0 34px 70px -26px rgba(0,0,0,.34)}
.mh{display:block;margin:0 0 12px;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.pa{display:grid;grid-template-columns:auto minmax(0,1fr) 196px;gap:30px}
.mleg,.azk{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:12.5px;color:var(--ink3)}
.mleg i,.azk i{display:block;width:84px;height:8px;border-radius:99px;background:linear-gradient(90deg,rgba(var(--azc),calc(.07*var(--azm))),rgba(var(--azc),calc(.85*var(--azm))))}
.maz{display:grid;grid-template-columns:repeat(9,34px);gap:5px}
.maz a,.azg a,.az a{background:rgba(var(--azc),calc(var(--a,.12)*var(--azm)));box-shadow:inset 0 0 0 1px rgba(var(--azc),.13);color:var(--ink);transition:transform .15s,box-shadow .15s}
.maz a:hover,.azg a:hover,.az a:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(var(--azc),.35),0 10px 18px -10px rgba(var(--azc),.8)}
.maz a{display:flex;align-items:center;justify-content:center;height:34px;border-radius:9px;font:600 14px/1 var(--mono)}
.mlist{margin:0;padding:0;list-style:none}
.mlist a{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 -10px;padding:8px 10px;border-radius:10px;font-size:14.5px;font-weight:500;transition:background .15s}
.mlist a:hover{background:var(--hov)}
.mlist span{font:500 12px/1 var(--mono);color:var(--ink3);white-space:nowrap}
.mcard{display:flex;flex-direction:column;padding:20px;border-radius:18px;background:radial-gradient(120% 90% at 100% 0,rgba(255,194,61,.2),transparent 60%),var(--panel);color:#fff}
.mcard b{font-weight:650;font-size:38px;line-height:1;letter-spacing:-.045em}
.mcard span{margin:8px 0 18px;font-size:13.5px;line-height:1.45;color:#A1A1AA}
.mcard em{display:flex;align-items:center;gap:7px;margin-top:auto;font-style:normal;font-weight:600;font-size:14px;color:var(--amber);transition:gap .2s}
.mcard:hover em{gap:10px}
.mcard em svg{width:14px;height:14px}
.pu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mu{display:flex;align-items:center;gap:12px;min-width:0;padding:12px;border-radius:16px;background:var(--ut);transition:transform .15s,box-shadow .15s}
.mu:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px var(--c)}
.mu .ic{width:38px;height:38px;border-radius:11px}
.mu .ic svg{width:19px;height:19px}
.mu b{display:block;font-weight:600;font-size:14.5px;line-height:1.25}
.mu small{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--ud)}
.mu.all{justify-content:space-between;background:var(--panel);color:#fff}
.mu.all small{color:#A1A1AA}
.arr{display:flex;align-items:center;justify-content:center;flex:none;border-radius:50%}
.mu.all .arr{width:34px;height:34px;background:var(--amber);color:#18181B}
.mu.all .arr svg{width:14px;height:14px}
.ps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.mc{display:flex;justify-content:space-between;align-items:center;gap:10px;transition:color .15s}
.mc:hover{color:var(--ink)}
.mc span{color:var(--ink3)}
.msl,.mkind{margin:0 0 18px;padding:0;list-style:none}
.msl:last-child{margin-bottom:0}
.msl a{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14.5px;color:var(--ink2);transition:color .15s}
.msl a:hover{color:var(--ink)}
.msl i,.mkind i,.legend i,.sc .k i,.facts i,.fcol a i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.mkind{font-size:13.5px;color:var(--ink2)}
.mkind li{display:flex;align-items:center;gap:9px;padding:5px 0}
.mkind span{margin-left:auto;font:500 12px/1 var(--mono);color:var(--ink3)}
.tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.hs{position:relative;display:none;align-items:center;gap:9px;flex:1;max-width:340px;height:40px;padding:0 12px;border-radius:12px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--ring);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .25s,transform .25s,visibility .25s}
.hs svg{width:16px;height:16px;flex:none;color:var(--ink2)}
.hs input{flex:1;min-width:0;padding:0;border:0;outline:0;background:transparent;font:500 16px var(--font);color:var(--ink);-webkit-appearance:none;appearance:none}
.hs input::placeholder{color:var(--ph);opacity:1}
.hs input::-webkit-search-cancel-button{display:none}
.hs:focus-within{background:var(--surf);box-shadow:0 0 0 1.5px var(--ink2),0 0 0 5px var(--hov)}
.hs .results{left:-8px;right:-8px;min-width:300px}
.top.s .hs{opacity:1;visibility:visible;transform:none}
.tbtn,.hsbtn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border:0;border-radius:11px;cursor:pointer;transition:background .15s,color .15s}
.tbtn{background:transparent;color:var(--ink2)}
.tbtn:hover{background:var(--hov);color:var(--ink)}
.tbtn svg{width:18px;height:18px}
.hsbtn{display:none;background:var(--btn);color:var(--btnt)}
.hsbtn svg{width:17px;height:17px}
.mbtn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px;border:0;border-radius:11px;background:var(--fill);color:var(--ink);font:600 14.5px/1 var(--font);cursor:pointer;transition:background .15s}
.mbtn:hover{background:var(--fill2)}
.mbtn svg{width:16px;height:16px}
@keyframes pop{from{opacity:0;transform:scale(.85)}}
@media (min-width:900px){.mnav,.hs{display:flex}.hs{margin-left:auto}.tools{margin-left:0}.mbtn{display:none}}
@media (max-width:899px){.top.s .hsbtn{display:inline-flex;animation:pop .22s ease-out}}
@media (max-width:420px){.top .tbtn{display:none}}
@media (max-width:379px){.top .wrap{gap:10px}.mbtn{width:38px;padding:0;justify-content:center}.mbtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* phone menu */
.sheet{position:fixed;inset:0;z-index:60;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--bg)}
.sheet.op{animation:shin .22s ease-out}
@keyframes shin{from{opacity:0;transform:translateY(-10px)}}
.sh-top{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 16px;background:var(--surf);border-bottom:1px solid var(--ring2);box-shadow:0 8px 20px -16px rgba(0,0,0,.3)}
.sh-x{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:12px;background:var(--fill);color:var(--ink);cursor:pointer}
.sh-x svg{width:16px;height:16px}
.sh-in{padding:18px 16px 36px}
.sh-in section{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.sh-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 14px;font-weight:650;font-size:22px;letter-spacing:-.03em}
.sh-h span{font:500 13px/1 var(--mono);color:var(--ink3)}
.sh-az{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.sh-az a{height:42px;font-size:15px}
.sh-uses{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.sh-c{margin:0;padding:0;list-style:none}
.sh-c a{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:500}
.sh-c small{font:500 12.5px/1 var(--mono);color:var(--ink3)}
.sh-ab{display:flex;flex-wrap:wrap;gap:8px}
.sh-ab a{padding:10px 15px;border-radius:99px;background:var(--surf);box-shadow:0 0 0 1px var(--ring2);font-size:14.5px;font-weight:500;color:var(--ink2)}
.sh-theme{display:flex;align-items:center;gap:10px;margin-top:24px;padding:13px 16px;border:0;border-radius:14px;background:var(--fill);color:var(--ink);font:600 15px/1 var(--font);cursor:pointer}
.sh-theme svg{width:18px;height:18px}
@media (min-width:500px){.sh-uses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.sheet{display:none!important}}

/* search */
.isearch{max-width:640px;margin:18px 0 0}
.search{position:relative;z-index:5;display:flex;align-items:center;gap:10px;height:52px;padding:0 6px 0 15px;border-radius:16px;background:var(--surf);box-shadow:0 0 0 1px var(--ring2),0 8px 18px -12px rgba(0,0,0,.14);text-align:left;transition:box-shadow .2s,transform .2s}
.search:focus-within{box-shadow:0 0 0 1.5px var(--ink2),0 0 0 5px var(--hov),0 8px 18px -12px rgba(0,0,0,.14)}
.search .mag{flex:none;width:20px;height:20px;color:var(--ink2)}
.search input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:transparent;font:500 16px/1.2 var(--font);color:var(--ink);-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--ph);opacity:1}
.search input::-webkit-search-cancel-button{display:none}
.find-btn{flex:none;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;border:0;border-radius:11px;background:var(--btn);color:var(--btnt);font:600 15px/1 var(--font);cursor:pointer;transition:background .15s}
.find-btn:hover{background:var(--btnh)}
.find-btn svg{width:16px;height:16px;transition:transform .2s}
.find-btn:hover svg{transform:translateX(2px)}
.search-big{max-width:700px;height:74px;margin:0 auto;padding:0 9px 0 24px;gap:12px;border-radius:24px;box-shadow:0 0 0 1px var(--ring2),0 2px 2px rgba(0,0,0,.03),0 10px 20px -8px rgba(0,0,0,.09),0 32px 64px -22px rgba(0,0,0,.22)}
.search-big:focus-within{transform:translateY(-1px);box-shadow:0 0 0 1.5px var(--ink2),0 0 0 6px var(--hov),0 10px 20px -8px rgba(0,0,0,.1),0 36px 70px -22px rgba(0,0,0,.26)}
.search-big .mag{width:22px;height:22px;color:var(--ink)}
.search-big input{font-size:18px;letter-spacing:-.01em}
.search-big .find-btn{height:56px;padding:0 24px;border-radius:17px;font-size:16px}
.kbd{flex:none;padding:5px 8px;border:1px solid var(--line);border-bottom-width:2px;border-radius:7px;font:500 12px/1 var(--mono);color:var(--ink3)}
@media (max-width:640px){.kbd{display:none}}
@media (max-width:480px){.search-big{height:62px;padding:0 7px 0 15px;gap:9px;border-radius:20px}.search-big input{font-size:16px}.search-big .find-btn{height:48px;padding:0 15px;border-radius:14px}.search-big .find-btn svg{display:none}}
@media (max-width:340px){.search-big .mag{display:none}}
.results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;max-height:min(60vh,420px);margin:0;padding:6px;overflow:auto;list-style:none;border-radius:18px;background:var(--surf);color:var(--ink);box-shadow:0 0 0 1px var(--ring2),0 24px 48px -16px rgba(0,0,0,.3);text-align:left}
.results li a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px}
.results li[aria-selected=true] a,.results li a:hover{background:var(--hov)}
.r-name{font-weight:600;overflow-wrap:anywhere}
.r-meta{font-size:14px;color:var(--ink3)}
.r-none{padding:10px 12px;color:var(--ink2)}
.r-none a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.try{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:18px 0 0;font-size:14px;color:var(--ink3)}
.tc{padding:6px 13px;border-radius:99px;background:var(--surf);box-shadow:0 0 0 1px var(--ring2);font-weight:500;color:var(--ink2);transition:color .15s,box-shadow .15s}
.tc:hover{color:var(--ink);box-shadow:0 0 0 1px var(--ink3)}

/* home hero */
.hero{position:relative;isolation:isolate;padding:46px 0 0;text-align:center}
.bgfx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgfx:before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--grid) 1px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:radial-gradient(64% 44% at 50% 28%,#000 18%,transparent 74%);mask-image:radial-gradient(64% 44% at 50% 28%,#000 18%,transparent 74%)}
.bgfx:after{content:"";position:absolute;inset:0;background:radial-gradient(34% 24% at 30% 30%,rgba(11,138,79,.12),transparent 70%),radial-gradient(34% 24% at 70% 24%,rgba(255,194,61,.2),transparent 70%)}
.pill{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:7px 14px 7px 12px;border-radius:99px;background:var(--surf);box-shadow:0 0 0 1px var(--ring),0 6px 16px -8px rgba(0,0,0,.12);font-size:13.5px;font-weight:500;color:var(--ink2)}
.pill b{font-weight:600;color:var(--ink)}
.pill .sep{width:1px;height:13px;background:var(--line)}
.hero h1{margin:0 0 18px;font-weight:660;font-size:clamp(34px,9.8vw,84px);line-height:1;letter-spacing:-.052em}
.hl{position:relative;z-index:0;display:inline-block}
.hl:before{content:"";position:absolute;left:-.07em;right:-.07em;bottom:.04em;z-index:-1;height:.42em;border-radius:.1em;background:var(--hl);transform-origin:0 50%;transform:skewX(-8deg) scaleX(0);animation:mark .9s .45s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes mark{to{transform:skewX(-8deg) scaleX(1)}}
.hero .lede{max-width:600px;margin:0 auto 26px;text-wrap:balance}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:22px 0 0;padding:0;list-style:none;font-size:14px;font-weight:500;color:var(--ink2)}
.trust li{display:flex;align-items:center;gap:7px}
.trust svg,.fchk svg{width:16px;height:16px;flex:none}
@media (max-width:480px){.hero{padding-top:34px}.pill{margin-bottom:18px;font-size:12.5px}.hero h1{margin-bottom:16px}.hero .lede{margin-bottom:22px}.try{margin-top:14px}.trust{gap:6px 16px;margin-top:18px;font-size:13.5px}}

/* flip board */
.board{position:relative;max-width:1040px;margin:40px auto 0;padding:20px 22px 16px;border-radius:28px;background:radial-gradient(120% 120% at 50% -30%,#202227 0%,#131417 58%,#111214 100%) #111214;color:#fff;text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px var(--bring),0 22px 40px -20px rgba(0,0,0,.4),0 50px 90px -40px rgba(0,0,0,.5)}
.board:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(460px circle at var(--mx,50%) var(--my,-30%),rgba(255,255,255,.055),transparent 62%)}
.bh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;margin:0 0 14px;padding:0 12px;font:600 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8C8E95}
.bh span{display:flex;align-items:center;gap:9px;color:#ECECEE}
.bcols,.brow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto 86px 16px;gap:22px;align-items:center}
.brow{grid-template-areas:"nm st pz ct go";padding:11px 12px;border-radius:14px;transition:background .2s}
.brow:hover{background:rgba(255,255,255,.045)}
.bcols{padding:0 12px 9px;border-bottom:1px solid rgba(255,255,255,.07);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8C8E95}
.bcols span:nth-child(3),.bcols span:nth-child(4){text-align:right}
.brows{margin:6px 0 0;padding:0;list-style:none}
.bnm{grid-area:nm;min-width:0}
.bnm b{display:block;font:600 14px/1.25 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#F4F4F5;overflow-wrap:anywhere}
.board .alt{display:block;margin-top:3px;font-size:13px;color:#8C8E95;overflow-wrap:anywhere}
.bst{grid-area:st;min-width:0;font-size:15px;color:#C9CACF;overflow-wrap:anywhere}
.board .pz{grid-area:pz;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.board .pz small{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#8C8E95}
.board .ct{grid-area:ct;text-align:right;font:500 13px/1 var(--mono);color:#A3A5AC}
.board .go{grid-area:go;width:16px;height:16px;color:var(--amber);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.brow:hover .go{opacity:1;transform:none}
.bnm,.bst,.board .ct,.board .pz small{transition:opacity .25s}
.swap .bnm,.swap .bst,.swap .ct,.swap .pz small{opacity:0}
.board .tl{display:flex;gap:4px}
.fl{position:relative;display:block;width:32px;height:46px;overflow:hidden;border-radius:6px;background:linear-gradient(180deg,#2C2E33 0%,#26282C 50%,#212327 50%,#1C1E21 100%) #212327;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.55);color:var(--amber);font:600 27px/46px var(--mono);font-style:normal;text-align:center;text-shadow:0 0 14px rgba(255,194,61,.28)}
.fl:after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);z-index:2;height:2px;background:rgba(0,0,0,.6);box-shadow:0 1px 0 rgba(255,255,255,.035)}
.fl:before{content:attr(data-p);position:absolute;left:0;right:0;top:0;z-index:3;height:50%;overflow:hidden;visibility:hidden;background:linear-gradient(180deg,#303237,#282A2E);transform-origin:50% 100%}
.fl.fx:before{visibility:visible;animation:fold 80ms linear forwards}
@keyframes fold{from{transform:perspective(160px) rotateX(0)}to{transform:perspective(160px) rotateX(-88deg);filter:brightness(.45)}}
.bf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 18px;margin:12px 0 0;padding:14px 12px 2px;border-top:1px solid rgba(255,255,255,.07);font-size:13.5px;color:#8C8E95}
.bf b{color:#E4E4E7;font-weight:600;font-variant-numeric:tabular-nums}
.bf a{display:inline-flex;align-items:center;gap:7px;min-height:24px;color:var(--amber);font-weight:500;transition:gap .2s}
.bf a:hover{gap:10px}
.bf a svg{width:14px;height:14px}
@media (max-width:760px){.board{margin-top:36px;padding:16px 12px 12px;border-radius:22px}.bcols,.board .alt,.board .ct,.board .go{display:none}.brow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm pz" "st pz";gap:3px 12px;padding:10px 8px}.bh,.bf{padding-left:8px;padding-right:8px}.bnm b,.bst{font-size:13px}.bst{color:#9B9CA3}.board .pz{gap:5px}.board .pz small{letter-spacing:.05em}.board .tl{gap:3px}.fl{width:24px;height:35px;border-radius:4px;font-size:20px;line-height:35px}}
@media (max-width:360px){.fl{width:21px;height:32px;font-size:18px;line-height:32px}}

/* store names marquee */
.marq{margin:50px 0 0;padding:0 0 8px}
.marq p{margin:0 0 16px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.trk{display:flex;width:max-content;animation:mq 60s linear infinite}
.mq:hover .trk{animation-play-state:paused}
.trk span{padding-right:48px;font-weight:600;font-size:18px;letter-spacing:-.025em;color:var(--ink3);white-space:nowrap}

/* sections */
.sec{padding-top:56px}
.home .sec{padding-top:104px}
.sec-gap{margin-top:24px}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin:0 0 28px}
.head>div{max-width:640px;min-width:0}
.eye{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font:600 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.eye:before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}
.head h2,.end h2{margin:0;font-size:clamp(30px,4.4vw,48px);line-height:1.04;letter-spacing:-.045em}
.head .sub{max-width:none;margin:12px 0 0;font-size:17px}
.more{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:var(--surf);box-shadow:0 0 0 1px var(--ring2);font-weight:600;font-size:15px;white-space:nowrap;transition:box-shadow .15s,gap .2s}
.more:hover{gap:11px;box-shadow:0 0 0 1px var(--ink3),0 6px 16px -8px rgba(0,0,0,.18)}
.more svg{width:14px;height:14px}
.card{min-width:0;border-radius:28px;background:var(--surf);box-shadow:var(--sh)}
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:0 0 20px}
.sec-h h2{flex:1 1 auto;margin:0}
.sec-h p{flex:1 0 100%;max-width:64ch;margin:6px 0 0;color:var(--ink2);text-wrap:pretty}
.sec-h-next{margin-top:32px}

/* compare */
.tabs{display:inline-flex;gap:4px;max-width:100%;padding:4px;overflow-x:auto;border-radius:14px;background:var(--bar);box-shadow:inset 0 0 0 1px var(--ring)}
.tabs button{flex:none;padding:9px 15px;border:0;border-radius:10px;background:transparent;font-weight:550;font-size:14.5px;color:var(--ink2);white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--surf);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--ring)}
@media (max-width:640px){.head .tabs{scrollbar-width:none}.head .tabs::-webkit-scrollbar{display:none}.tabs button{padding:9px 12px;font-size:14px}}
.cmpw{overflow:hidden}
.cmp{display:grid;grid-template-columns:minmax(0,1fr);transition:opacity .18s}
.cmpp{transition:opacity .18s}.cmp.fade{opacity:0}
.js .cmpp:not(.on){display:none}
.cmpp+.cmpp{border-top:1px solid var(--line)}
@media (min-width:920px){.cmp{grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr)}}
.sum{position:relative;padding:28px 26px;background:linear-gradient(160deg,var(--gsoft),transparent 62%);border-bottom:1px solid var(--line)}
@media (min-width:920px){.sum{border-bottom:0;border-right:1px solid var(--line)}}
.sum .cn{margin:0;font-weight:650;font-size:26px;letter-spacing:-.035em;overflow-wrap:anywhere}
.sum .cm{margin:3px 0 0;font-size:14px;color:var(--ink3)}
.sum .band{display:inline-block;margin:14px 0 0;padding:5px 10px;border-radius:8px;background:var(--gsoft);font-size:13px;font-weight:500;color:var(--green);text-wrap:pretty}
@media (max-width:640px){.cta .cn2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.sum .lbl{margin:24px 0 6px;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.sum .cbig{margin:0;font-weight:650;font-size:clamp(56px,7vw,76px);line-height:1;letter-spacing:-.05em;font-variant-numeric:lining-nums proportional-nums}
.sum .per{margin:8px 0 0;font-size:15px;color:var(--ink2)}
.sum .per b{color:var(--ink);font-weight:600}
.sum .x{margin:18px 0 22px;padding:12px 14px;border-radius:14px;background:var(--surf);box-shadow:0 0 0 1px var(--ring);font-size:14.5px;color:var(--ink2)}
.sum .x b{color:var(--red);font-weight:650}
.cta{display:flex;justify-content:center;align-items:center;gap:9px;min-height:52px;padding:0 20px;border-radius:99px;background:var(--btn);color:var(--btnt);font-weight:600;font-size:15.5px;text-align:center;transition:background .15s}
.cta:hover{background:var(--btnh)}
.cta svg{width:15px;height:15px}
.ctags{margin:0;padding:10px 26px 14px;list-style:none}
.ctag{display:grid;grid-template-columns:36px minmax(0,1fr) minmax(0,1.2fr) 150px;gap:16px;align-items:center;padding:15px 0;border-top:1px solid var(--line)}
.ctag:first-child{border-top:0}
.jarc{display:flex;align-items:flex-end;justify-content:center;height:38px}
.jar{display:block;width:auto}
.jar .lid{fill:var(--ink2)}
.jar .body{fill:var(--surf);stroke:var(--ink2);stroke-width:1.3}
.jar .lv{fill:var(--fill2)}
.ctag.lo .jar .lv{fill:rgba(var(--azc),.5)}
.ctag .who{min-width:0}
.ctag .who b{display:block;font-weight:600;font-size:15.5px;overflow-wrap:anywhere}
.ctag .who span{display:block;font-size:13px;color:var(--ink3)}
.bw{min-width:0}
.bw span{display:block;margin:0 0 7px;font-size:13px;color:var(--ink2);overflow-wrap:anywhere}
.bar{display:block;height:8px;overflow:hidden;border-radius:4px;background:var(--bar)}
.bar i{display:block;width:0;height:100%;border-radius:4px;background:var(--barc);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.lo .bar i{background:var(--gfill)}
.ctag .pp{text-align:right}
.ctag .pp b{display:block;font-weight:650;font-size:17px;font-variant-numeric:tabular-nums}
.ctag .pp span{display:block;margin-top:2px;font-size:12.5px;color:var(--red)}
.ctag.lo .pp span{color:var(--green);font-weight:600}
@media (max-width:640px){.sum{padding:22px 18px}.ctags{padding:4px 18px 10px}.ctag{grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"j w p" "j b b";gap:8px 12px}.jarc{grid-area:j;align-self:start;height:34px}.ctag .who{grid-area:w}.bw{grid-area:b}.ctag .pp{grid-area:p}}

/* what we cover */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden}
.stat{position:relative;padding:30px 26px 28px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.si{display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin:0 0 18px;border-radius:13px;background:var(--ut)}
.si svg{width:21px;height:21px;fill:none;stroke:var(--c);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.stat b{display:block;font-weight:650;font-size:clamp(36px,4.6vw,54px);line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:10px;font-size:15px;color:var(--ink2);text-wrap:balance}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:400px){.stat{padding:22px 16px 20px}.si{margin-bottom:14px}}

/* uses */
.uses{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,256px),1fr));gap:14px}
.use{position:relative;display:flex;flex-direction:column;min-height:206px;padding:22px 20px 20px;border-radius:24px;background:var(--ut);box-shadow:inset 0 0 0 1px var(--ring);transition:transform .25s,box-shadow .25s}
.use:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--ring2),0 18px 36px -18px var(--c)}
.ic{display:flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border-radius:14px;background:var(--c);box-shadow:0 8px 18px -8px var(--c)}
.ic svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aisle{position:absolute;top:24px;right:20px;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ud)}
.use h2,.use h3{margin:18px 0 0;font-weight:640;font-size:19px;line-height:1.2;letter-spacing:-.025em}
.use .n{margin:4px 0 0;font-size:14px;font-weight:600;color:var(--ud)}
.use .ex{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink2);text-wrap:pretty}
.use.all{justify-content:space-between;background:var(--panel);color:#fff;box-shadow:none}
.use.all h3{margin:0;font-size:22px}
.use.all p{margin:8px 0 0;font-size:14.5px;color:#A1A1AA}
.use.all .arr{width:46px;height:46px;background:var(--amber);color:#18181B;transition:transform .25s}
.use.all:hover .arr{transform:translateX(4px)}
.use.all .arr svg{width:18px;height:18px}
@media (max-width:640px){.uses{gap:10px}.use{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;min-height:0;padding:16px;border-radius:20px}.use .ic{grid-row:1/4}.use h2,.use h3{margin:0;padding-right:58px;font-size:17px}.use .n{margin:2px 0 0}.use .ex{margin:6px 0 0;font-size:13px}.aisle{top:18px;right:16px}.use.all{display:flex;flex-direction:row;align-items:center;gap:14px}.use.all h3{padding:0;font-size:19px}.use.all p{margin:4px 0 0;font-size:13.5px}}
@media (max-width:400px){.aisle{display:none}.use h2,.use h3{padding-right:0;text-wrap:balance}}

/* same chemical, two prices */
.pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:16px}
.pair{padding:24px 22px 22px;transition:transform .2s,box-shadow .2s}
.pair:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--ring2),0 22px 44px -18px rgba(0,0,0,.2)}
.pair h3{margin:0;font-weight:640;font-size:20px;letter-spacing:-.03em;transition:color .15s}
.pair:hover h3{color:var(--green)}
.pct{display:flex;align-items:baseline;gap:8px;margin:14px 0 20px;font-size:15px;color:var(--ink2)}
.pct b{font-weight:680;font-size:46px;line-height:1;letter-spacing:-.05em;color:var(--green)}
.pair .pl{margin:0 0 12px}
.pair .pl:last-child{margin:0}
.pair .pl p{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin:0 0 8px}
.pair .pl small{display:block;margin:0 0 3px;font-size:12px;color:var(--ink3)}
.pair .pl em{display:block;min-width:0;font-style:normal;font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.pv{flex:none;text-align:right}
.pv b{display:block;font-weight:650;font-size:16px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pl.lo .pv b{color:var(--green)}

/* sold by the most stores */
.pops{display:grid;grid-template-columns:minmax(0,1fr);gap:0 36px;margin:0;padding:8px 26px;list-style:none}
@media (min-width:640px){.pops{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.pops{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pop{display:grid;grid-template-columns:minmax(0,1fr) auto 66px;gap:14px;align-items:center;padding:15px 4px;border-bottom:1px solid var(--line)}
.pop:hover .pn{color:var(--green)}
.pn{font-weight:550;font-size:15.5px;overflow-wrap:anywhere;transition:color .15s}
.dots{position:relative;width:84px;height:6px;background:radial-gradient(circle,var(--dot) 2px,transparent 2.5px) 0 0/6px 6px repeat-x}
.dots:before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--n)*6px);background:radial-gradient(circle,var(--gfill) 2px,transparent 2.5px) 0 0/6px 6px repeat-x}
.pc{text-align:right;white-space:nowrap;font:500 13px/1 var(--mono);color:var(--ink2)}
@media (max-width:400px){.pops{padding:4px 18px}}
@media (max-width:639px){.pop{grid-template-columns:minmax(0,1fr) auto 58px;gap:10px}.dots{width:56px;background-size:4px 4px;background-image:radial-gradient(circle,var(--dot) 1.5px,transparent 2px)}.dots:before{width:calc(var(--n)*4px);background-size:4px 4px;background-image:radial-gradient(circle,var(--gfill) 1.5px,transparent 2px)}}

/* A to Z: tiles shaded by how many chemicals each letter has */
.azg{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.azg a{display:flex;flex-direction:column;justify-content:space-between;height:86px;padding:12px 14px;border-radius:16px}
.azg b{font:600 22px/1 var(--mono)}
.azg span{font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.azk i{width:120px}
@media (max-width:760px){.azg{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.azg a{height:62px;padding:8px;border-radius:12px}.azg b{font-size:17px}.azg span{font-size:11px}}
.az{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.az a{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 9px;border-radius:11px;font:600 15px/1 var(--mono)}
.az a[aria-current=page]{background:var(--btn);color:var(--btnt);box-shadow:none}
.az-sub{margin-top:14px}
.az-sub a{font:600 14px/1 var(--font)}

/* stores */
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 18px;padding:0;list-style:none;font-size:13.5px;color:var(--ink2)}
.legend li{display:flex;align-items:center;gap:7px}
.legend i{width:9px;height:9px}
.scs{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:641px){.scs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.scs{grid-template-columns:repeat(3,minmax(0,1fr))}.scs-home{grid-template-columns:repeat(4,minmax(0,1fr))}}
.scs>li{min-width:0}
.sc{display:flex;flex-direction:column;gap:12px;height:100%;padding:18px 18px 16px;border-radius:20px;background:var(--surf);box-shadow:0 0 0 1px var(--ring2);transition:box-shadow .2s,transform .2s}
.sc:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--ring2),0 14px 30px -16px rgba(0,0,0,.25)}
.sc>div{min-width:0}
.sc-n{display:block;font-weight:620;font-size:17px;letter-spacing:-.02em;overflow-wrap:anywhere;transition:color .15s}
.sc:hover .sc-n{color:var(--green)}
.sc .k{display:flex;align-items:center;gap:7px;margin:3px 0 0;font-size:13px;color:var(--ink3)}
.sc .co{margin:2px 0 0 15px;font-size:13px;color:var(--ink3)}
.sc dl{display:flex;gap:22px;margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line)}
.sc dt{font-size:12px;color:var(--ink3)}
.sc dd{margin:2px 0 0;font-weight:640;font-size:17px;font-variant-numeric:tabular-nums}
.sc-date{font-size:13px;color:var(--ink3)}
.scs-full .sc{padding:20px 20px 16px}
.scs-full .sc-n{font-size:20px}
.scs-full .sc dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.scs-full .sc dd{font-size:22px;letter-spacing:-.03em}
.sc.sx{justify-content:space-between}
.sc.sx p{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink3);text-wrap:pretty}
.sc.sx .arr{width:38px;height:38px;background:var(--surf);color:var(--ink);box-shadow:0 0 0 1px var(--ring2)}
.sc.sx .arr svg{width:15px;height:15px}
.sc.all{background:var(--panel);color:#fff;box-shadow:none}
.sc.all:hover .sc-n{color:#fff}
.sc.all p{color:#A1A1AA}
.sc.all .arr{background:var(--amber);color:#18181B;box-shadow:none}
.sc.bot{background:var(--surf2);box-shadow:0 0 0 1px var(--ring)}
@media (max-width:640px){.scs-home{gap:8px}.scs-home .sc{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:16px}.scs-home .sc-n{font-size:16px}.scs-home .sc dl{flex:none;flex-direction:column;gap:6px;margin:0;padding:0;border:0;text-align:right}.scs-home .sc dt{font-size:11.5px}.scs-home .sc dd{margin:1px 0 0;font-size:15px}.scs-home .sc dl div+div{display:none}.scs-home .sc.sx p{margin-top:3px}}

/* closing search band */
.end{position:relative;isolation:isolate;overflow:hidden;margin-top:110px;padding:72px 24px;border-radius:32px;background:#131417;color:#fff;text-align:center;box-shadow:0 0 0 1px var(--bring)}
.end:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 60% at 22% 20%,rgba(43,214,123,.22),transparent 70%),radial-gradient(40% 60% at 80% 90%,rgba(255,194,61,.24),transparent 70%)}
.end h2{max-width:720px;margin:0 auto;color:#fff}
.end .sub{max-width:520px;margin:14px auto 30px;color:#A1A1AA}
.end .search{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -20px rgba(0,0,0,.6)}
.end .try{color:#8C8E95}
.end .tc{background:rgba(255,255,255,.06);color:#D4D4D8;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.end .tc:hover{background:rgba(255,255,255,.12);color:#fff}
@media (max-width:480px){.end{margin:84px -16px 0;padding:52px 16px;border-radius:0;box-shadow:none}}

/* chemical page */
.chead h1{margin:16px 0 12px}
.ct-sub{display:block;margin-top:.3em;font-size:max(17px,.4em);font-weight:500;line-height:1.2;letter-spacing:-.015em;color:var(--ink2)}
.idline{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.idline div{display:flex;align-items:baseline;gap:7px;padding:6px 12px;border-radius:99px;background:var(--surf);box-shadow:0 0 0 1px var(--ring2)}
.idline dt{font:500 11.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.idline dd{margin:0;font-weight:600;font-size:14.5px}
.shelf{position:relative}
.answers{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:800px){.answers{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px}.answers.answers-one{grid-template-columns:minmax(0,1fr)}}
.ans{display:flex;flex-direction:column;min-width:0;margin:0;padding:22px 18px 18px;border-radius:24px;background:var(--surf);box-shadow:var(--sh)}
@media (min-width:800px){.ans{padding:32px 30px 28px}}
.ans-main{background:linear-gradient(160deg,var(--gsoft),transparent 62%),var(--surf);box-shadow:inset 0 0 0 1px rgba(var(--azc),.2),var(--sh)}
.ans-tag{display:flex;align-items:center;gap:8px;margin:0 0 14px;font:600 11.5px/1.2 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink3)}
.ans-tag:before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor;flex:none}
.ans-main .ans-tag{color:var(--green)}
.ans-fig{margin:0}
.ans-fig .price-big{--pbig:clamp(64px,10vw,116px)}
.ans-spend .ans-fig{font-weight:650;font-size:clamp(44px,6vw,64px);line-height:1;letter-spacing:-.045em;overflow-wrap:anywhere}
.ans-spend .ans-fig>.per{display:block;margin-top:10px;font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink2)}
.ans-basis{margin:10px 0 0;font-size:14px;color:var(--ink3)}
.ans-at{margin:14px 0 0;font-size:17px}
.ans-at b{font-weight:600}
.ans-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:14px 0 20px;font-size:15px}
.ans-facts div{display:contents}
.ans-facts dt{color:var(--ink3)}
.ans-facts dd{min-width:0;margin:0;font-weight:600;overflow-wrap:anywhere}
.ans .btn{margin-top:auto;align-self:flex-start}
.ans-rare-t{margin:0 0 10px;font-weight:650;font-size:clamp(22px,2.6vw,28px);line-height:1.15;letter-spacing:-.03em;overflow-wrap:anywhere}
.ans-rare-p{margin:0;color:var(--ink2);overflow-wrap:anywhere}
.price-big{display:block;font-weight:650;line-height:1;letter-spacing:-.05em}
.price-big .pnum{display:inline-flex;align-items:flex-start;font-size:calc(var(--pbig,clamp(64px,11vw,116px))*var(--k,1));line-height:.78}
.price-big .per{display:block;margin-top:16px;font-size:clamp(16px,1.8vw,19px);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink2)}
.pnum .cur{margin:.05em .03em 0 0;font-size:.62em;line-height:1}
.pnum .cents{display:inline-flex}
.pnum .cents:before{content:"."}
.roll{display:inline-block;height:1em;overflow:hidden;line-height:1}
.roll i{display:block;font-style:normal;line-height:1;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.roll i:before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";white-space:pre;display:block}
.qual{max-width:90ch;margin:18px 0 0;font-size:14px;color:var(--ink3)}
.note{max-width:90ch;margin:16px 0;padding:13px 16px;border-radius:14px;background:var(--surf);box-shadow:inset 3px 0 0 var(--ink3),0 0 0 1px var(--ring2);font-size:15px;color:var(--ink2)}
.note strong{color:var(--ink)}
.note--law{box-shadow:inset 3px 0 0 var(--red),0 0 0 1px var(--ring2)}
.note-find{margin-top:14px}
.units{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:36px 0 0}
.units-label{font-weight:600;font-size:15px}
.seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:14px;background:var(--bar);box-shadow:inset 0 0 0 1px var(--ring)}
.seg button{min-height:38px;padding:0 13px;border:0;border-radius:10px;background:transparent;color:var(--ink2);font:500 14.5px/1 var(--font);cursor:pointer;transition:background .15s,color .15s}
.seg button:hover{background:var(--hov);color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--btn);color:var(--btnt)}
.units-note{flex:1 0 100%;margin:0;font-size:14px;color:var(--ink3)}

/* every price: one card, a row per store */
.prices{margin-top:36px}
.offers{display:block;width:100%;border-collapse:separate;border-spacing:0}
.offers thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.offers tbody{display:block;overflow:hidden;border-radius:20px;background:var(--surf);box-shadow:var(--sh)}
.offers tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"store price" "what price" "go go";gap:8px 14px;padding:16px;border-top:1px solid var(--line)}
.offers tbody tr:first-child{border-top:0}
.offers tr.win{background:linear-gradient(90deg,var(--gsoft),transparent 75%);box-shadow:inset 3px 0 0 var(--gfill)}
.offers td,.offers th{display:block;padding:0;text-align:left;font-weight:inherit}
.o-store{grid-area:store;min-width:0}
.o-what{grid-area:what;min-width:0;font-size:14px;color:var(--ink2);overflow-wrap:anywhere}
.o-price{grid-area:price;align-self:start;text-align:right!important}
.o-go{grid-area:go}
.o-go .btn{width:100%}
.o-name{display:inline-block;min-height:24px;font-weight:600;font-size:16.5px;line-height:1.3;overflow-wrap:anywhere;transition:color .15s}
.o-name:hover{color:var(--green)}
.o-cc{display:block;font-size:13px;color:var(--ink3)}
.o-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.chip{display:inline-block;padding:4px 9px;border-radius:99px;background:var(--fill);color:var(--ink);font-weight:600;font-size:12.5px;line-height:1.2;white-space:nowrap}
.chip-win{background:var(--green);color:var(--surf)}
.chip-oos{background:var(--fill);color:var(--ink)}
.o-pack{display:block;margin-top:2px;font-weight:600;font-size:15px;color:var(--ink)}
.o-price .price{display:block;font-weight:650;font-size:28px;line-height:1.05;letter-spacing:-.035em;white-space:nowrap}
.o-price .per{display:block;margin-top:4px;font-size:13px;font-weight:500;line-height:1.3;letter-spacing:0;color:var(--ink2);white-space:normal}
.win .o-price .price{color:var(--green)}
.o-k{display:block;margin-bottom:4px;font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.less{display:inline-block;margin-top:8px;padding:3px 9px;border-radius:99px;background:var(--gsoft);color:var(--green);font-weight:600;font-size:13px}
.offers-win tr{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"store store" "their next"}
.offers-win .w-their,.offers-win .w-next{text-align:left!important}
.offers-win .w-their{grid-area:their}
.offers-win .w-next{grid-area:next}
.offers-win .o-price .price{font-size:24px}
@media (min-width:800px){
  .offers thead{position:static;display:block;width:auto;height:auto;margin:0 0 8px;overflow:visible;clip:auto}
  .offers tr{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 170px 150px;grid-template-areas:"store what price go";align-items:center;gap:20px;padding:16px 20px}
  .offers thead tr{padding:0 20px;border:0;font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
  .offers thead th{grid-area:auto}
  .offers thead th.num{text-align:right}
  .o-go{text-align:right!important}
  .o-go .btn{width:auto}
  .offers-win tr{grid-template-columns:minmax(0,1fr) 200px 200px;grid-template-areas:"store their next"}
  .offers-win .w-their,.offers-win .w-next{text-align:right!important}
  .offers .o-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
.js .prices.clip tr.extra{display:none}
html:not(.js) .more-btn{display:none}
.more-btn{margin-top:16px}
.cols{display:grid;gap:56px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}}
.cards{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
@media (min-width:600px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cards a,.cards .card{display:flex;flex-direction:column;gap:3px;height:100%;padding:14px 16px;border-radius:16px;background:var(--surf);box-shadow:0 0 0 1px var(--ring2);transition:box-shadow .15s,transform .15s}
.cards a:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--ring2),0 12px 24px -14px rgba(0,0,0,.3)}
.cards a:hover b{color:var(--green)}
.cards b{font-weight:600;overflow-wrap:anywhere;transition:color .15s}
.cards span{font-size:14px;color:var(--ink3)}
/* bulk suppliers (US makers and distributors): a fact list, longer ones fold away behind Show all */
.js .makers.clip li.extra{display:none}
.mk-own{margin:16px 0 0;color:var(--ink2)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pills a{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 16px 0 14px;border-radius:99px;background:var(--surf);box-shadow:0 0 0 1px var(--ring2);font-weight:500;font-size:15px;transition:box-shadow .15s,color .15s}
.pills a:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--gfill));flex:none}
.pills a:hover{color:var(--green);box-shadow:0 0 0 1px var(--ink3)}
.ident{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:800px){.ident{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}
.dl{margin:0;padding:4px 20px;border-radius:20px;background:var(--surf);box-shadow:var(--sh)}
.dl div{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr);gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.dl div:first-child{border-top:0}
.dl dt{font-size:15px;color:var(--ink3)}
.dl dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.plate{display:flex;justify-content:center;margin:0;padding:16px;border-radius:20px;background:#fff;box-shadow:var(--sh)}
.plate svg{width:100%;height:auto;max-width:300px}
.method{max-width:90ch;margin:44px 0 0;font-size:14px;color:var(--ink3)}

/* store pages */
.shead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px;margin:0 0 24px}
.shead h1{margin-bottom:14px}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.facts span{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;background:var(--surf);box-shadow:0 0 0 1px var(--ring2);font-size:14px;font-weight:500;color:var(--ink2)}
.own{margin:22px 0 0}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0;padding:0;overflow:hidden;list-style:none;border-radius:24px;background:var(--surf);box-shadow:var(--sh)}
.strip>li{display:flex;flex-direction:column;gap:8px;margin:0;padding:24px 22px 22px;border-left:1px solid var(--line)}
.strip>li:first-child{border-left:0}
.strip b{display:block;font-weight:650;font-size:clamp(36px,4.6vw,54px);line-height:1;letter-spacing:-.045em;overflow-wrap:anywhere}
.strip span{font-size:15px;color:var(--ink2)}
.strip .sale b{color:var(--green)}
.strip-doc{max-width:560px}
@media (max-width:560px){.strip{grid-auto-flow:row}.strip>li{flex-direction:row;align-items:baseline;gap:12px;padding:16px 18px;border-left:0;border-top:1px solid var(--line)}.strip>li:first-child{border-top:0}.strip b{font-size:34px}}
.rows{display:grid;gap:8px;grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
@media (min-width:600px){.rows-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.rows-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rows a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;height:100%;min-height:48px;padding:13px 16px;border-radius:14px;background:var(--surf);box-shadow:0 0 0 1px var(--ring);transition:box-shadow .15s}
.rows a:hover{box-shadow:0 0 0 1px var(--ring2),0 8px 18px -12px rgba(0,0,0,.25)}
.rows a:hover .rn{color:var(--green)}
.rn{min-width:0;font-weight:500;overflow-wrap:anywhere;transition:color .15s}
.rc{flex:none;font:500 12.5px/1.5 var(--mono);color:var(--ink3);white-space:nowrap}

/* letter pages */
.lhead{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:center;margin:18px 0 22px}
.big-letter{display:flex;align-items:center;justify-content:center;min-width:76px;height:84px;padding:0 14px;border-radius:20px;background:radial-gradient(120% 90% at 100% 0,rgba(255,194,61,.22),transparent 60%),var(--panel);color:#fff;font:600 48px/1 var(--mono);box-shadow:0 14px 28px -14px rgba(0,0,0,.5)}
.lhead h1{margin:0}
.lhead .lede{grid-column:1/-1;margin:16px 0 0}
.lgroup{margin-top:34px}
.az-h{margin:0 0 14px;scroll-margin-top:84px;font-size:clamp(26px,3.2vw,36px)}
.az-h small{font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink3)}
.totop{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:600;color:var(--ink2);transition:color .15s}
.totop:hover{color:var(--green)}

/* use pages */
.uhead{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:center;margin:18px 0 0}
.uhead .ic{width:60px;height:60px;border-radius:18px}
.uhead .ic svg{width:30px;height:30px}
.uhead h1{margin:0}
.uhead .lede{grid-column:1/-1;margin:16px 0 12px}
.uselist{margin:0;padding:0;overflow:hidden;list-style:none;border-radius:20px;background:var(--surf);box-shadow:var(--sh)}
.uselist li+li{border-top:1px solid var(--line)}
.uselist a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:16px 20px;transition:background .15s}
.uselist a:hover{background:var(--hov)}
.uselist a:hover b{color:var(--green)}
.ul-main{display:flex;flex-direction:column;gap:2px;flex:1 1 150px;min-width:0}
.ul-main b{font-weight:600;font-size:17px;overflow-wrap:anywhere;transition:color .15s}
.ul-role{font-size:14px;color:var(--ink2)}
.ul-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;text-align:right}
.ul-side .price{display:block;font-weight:650;font-size:24px;line-height:1.05;letter-spacing:-.03em}
.ul-side .per{display:block;font-size:13px;font-weight:500;line-height:1.3;letter-spacing:0;color:var(--ink2)}
.ul-n{font-size:13px;color:var(--ink3)}

/* plain pages */
.doc{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:800px){.doc{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.doc section{min-width:0;padding:22px 20px 20px;border-radius:24px;background:var(--surf);box-shadow:var(--sh)}
.doc h2{margin:0 0 8px;font-size:clamp(21px,2.4vw,26px)}
.doc p{margin:0 0 10px;color:var(--ink2)}
.doc .btn{margin-top:4px}
.doc pre{margin:6px 0 0;padding:12px 14px;overflow-x:auto;border-radius:12px;background:var(--surf2);box-shadow:inset 0 0 0 1px var(--ring);color:var(--ink);font:500 13.5px/1.5 var(--mono)}
.doc-steps{counter-reset:ds}
.doc-steps section{counter-increment:ds;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px}
.doc-steps section:before{content:counter(ds);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--gsoft);color:var(--green);font:600 18px/1 var(--mono)}
.after{margin:30px 0 0;font-size:16px;color:var(--ink2)}
.nf{max-width:760px;margin:40px auto 0;padding:40px 20px 32px;border-radius:28px;background:var(--surf);box-shadow:var(--sh);text-align:center}
@media (min-width:800px){.nf{padding:52px 48px 40px}}
.nf-code{margin:0 0 4px;font:600 clamp(80px,14vw,140px)/1 var(--mono);letter-spacing:-.04em;color:var(--green)}
.nf h1{margin:0 0 12px}
.nf .lede{max-width:600px;margin:0 auto 26px}
.nf-links{justify-content:center;margin-top:28px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;max-width:100%;padding:0 22px;border:0;border-radius:99px;font:600 15.5px/1.2 var(--font);text-align:center;cursor:pointer;overflow-wrap:anywhere;transition:background .15s,box-shadow .15s,color .15s}
.btn-ink{background:var(--btn);color:var(--btnt)}
.btn-ink:hover{background:var(--btnh)}
.btn-sale{background:var(--amber);color:#18181B;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.btn-sale:hover{background:#FFD25E}
.btn-line{background:var(--surf);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ring2)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink3)}
.btn-small{min-height:42px;padding:0 16px;font-size:14.5px}
.btn-ext:after{content:"";width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* footer */
.foot{position:relative;margin-top:88px;overflow:hidden;background:var(--surf2);border-top:1px solid var(--line)}
.ftop{display:grid;grid-template-columns:minmax(0,1.45fr) repeat(4,minmax(0,1fr));gap:32px;padding-top:56px;padding-bottom:44px}
.fbrand>p:first-of-type{max-width:300px;margin:14px 0 0;font-size:14.5px;color:var(--ink2);text-wrap:pretty}
.fchk{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none;font-size:14px;font-weight:500;color:var(--ink2)}
.fchk li{display:flex;align-items:center;gap:8px}
.fchip{display:inline-flex;align-items:center;gap:8px;margin:20px 0 0;padding:7px 12px;border-radius:99px;background:var(--surf);box-shadow:0 0 0 1px var(--ring);font-size:13px;font-weight:500;color:var(--ink2)}
.fh{margin:4px 0 14px;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.fcol ul{margin:0;padding:0;list-style:none}
.fcol ul+.fh{margin-top:26px}
.fcol li{margin:0 0 6px}
.fcol a{display:inline-flex;align-items:center;gap:8px;min-height:26px;font-size:14.5px;color:var(--ink2);transition:color .15s}
.fcol a:hover{color:var(--ink)}
.fcol a small{min-width:20px;padding:2px 6px;border-radius:6px;background:var(--surf);box-shadow:0 0 0 1px var(--ring);font:500 11.5px/1.2 var(--mono);color:var(--ink3);text-align:center}
.fbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:20px;padding-bottom:22px;font-size:13.5px;color:var(--ink3)}
.fbar:before{content:"";position:absolute;top:0;left:16px;right:16px;border-top:1px solid var(--line)}
@media (min-width:700px){.fbar:before{left:24px;right:24px}}
.fcp{display:flex;align-items:center;gap:20px}
.fup{display:inline-flex;align-items:center;gap:6px;min-height:24px;font-weight:500;color:var(--ink2);transition:color .15s}
.fup:hover{color:var(--ink)}
.fup svg{width:14px;height:14px}
.fword{max-width:1160px;margin:6px auto -.2em;padding:0 16px;font-weight:700;font-size:min(11.2vw,132px);line-height:.95;letter-spacing:-.055em;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;background:linear-gradient(180deg,var(--fw) 15%,var(--fw0) 88%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fword span{background:linear-gradient(180deg,rgba(var(--azc),.22) 15%,rgba(var(--azc),0) 88%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:1000px){.ftop{grid-template-columns:repeat(4,minmax(0,1fr))}.fbrand{grid-column:1/-1}}
@media (max-width:640px){.ftop{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;padding-top:44px}.fcp{justify-content:space-between;width:100%}}

/* reveal on scroll */
.rvo .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rvo .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .live,.trk,.tk-t{animation:none}
  .hl:before{animation:none;transform:skewX(-8deg)}
  .fl.fx:before{animation:none;visibility:hidden}
  .trk{width:max-content;padding-left:16px}
  .mq{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}.mq::-webkit-scrollbar{display:none}
  .trk span[aria-hidden],.tk-t a[aria-hidden]{display:none}
  .rvo .rv{opacity:1;transform:none;transition:none}
  .bar i,.roll i,.cv{transition:none}
  .mp{transform:none!important}
  .sheet.op{animation:none}
}
@media print{.top,.tick,.sheet,.units,.more-btn,.skip,.foot .fword,.isearch{display:none}.ans,.offers tbody,.dl{box-shadow:none;border:1px solid #999}}

/* Bulk quotes (2026-10-29, BLUEPRINT section 3): the "Buying in bulk?" band on every chemical page and the one
   quote form at /quote/. Also the supplier sign-up at /for-suppliers/ and the pop-up a chemical page opens. */
.bulk{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:center;margin:28px 0 0;padding:22px 20px;border-radius:24px;background:radial-gradient(60% 140% at 100% 0,rgba(255,194,61,.16),transparent 60%),var(--panel);color:#fff}
.bulk h2{margin:0 0 6px;font-size:clamp(23px,2.8vw,30px);color:#fff}
.bulk p{max-width:60ch;margin:0;color:#A1A1AA;text-wrap:pretty;overflow-wrap:anywhere}
.bulk .btn{justify-self:start}
@media (min-width:720px){.bulk{grid-template-columns:minmax(0,1fr) auto;gap:28px;padding:26px 30px}}
.qform,.f-done{max-width:760px}
@media (min-width:800px){.qform,.f-done{grid-template-columns:minmax(0,1fr)}}
.qform h2,.f-done h2{font-size:clamp(21px,2.4vw,26px)}
.doc .q-sum{margin:0;padding:13px 16px;border-radius:14px;background:var(--surf);box-shadow:inset 3px 0 0 var(--red),0 0 0 1px var(--ring2);font-weight:600;color:var(--ink)}
.f{display:grid;gap:6px;min-width:0;margin:0 0 16px}
.f label{font-weight:600;font-size:15px}
.f-opt{font-weight:400;color:var(--ink3)}
.f input:not([type=checkbox]),.f select,.f textarea{width:100%;min-width:0;min-height:48px;padding:11px 14px;border:0;border-radius:12px;background:var(--surf);box-shadow:inset 0 0 0 1px var(--ring2);color:var(--ink);font:500 16px/1.3 var(--font);transition:box-shadow .15s}
.f input:not([type=checkbox]),.f textarea{-webkit-appearance:none;appearance:none}
.f textarea{resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:var(--ph);opacity:1}
.f input:hover,.f select:hover,.f textarea:hover{box-shadow:inset 0 0 0 1px var(--ink3)}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px var(--hov)}
.f input[aria-invalid=true],.f select[aria-invalid=true],.f textarea[aria-invalid=true],.f [aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--red)}
.doc .f-err{margin:0;font-size:14px;font-weight:500;color:var(--red)}
.doc .f-err:empty{display:none}
.f-row{display:grid;gap:0 14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.f-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.doc .f-hint{margin:-6px 0 16px;font-size:14px;color:var(--ink3)}
.f-check{grid-template-columns:24px minmax(0,1fr);align-items:start;gap:4px 12px}
.f-check input{width:24px;height:24px;margin:0;accent-color:var(--gfill)}
.f-check label{font-weight:400;color:var(--ink2);text-wrap:pretty}
.f-check .f-err{grid-column:1/-1}
.q-go{width:100%;margin-top:4px}
.q-go:disabled{opacity:.65;cursor:progress}
.doc .q-send-e{margin-top:10px}
.doc .q-free{margin:10px 0 0}
@media (min-width:600px){.q-go{width:auto}}
.f-done h3{margin:22px 0 10px;text-wrap:balance}
.q-show{box-shadow:0 0 0 1px var(--line)}
.q-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.f-group{min-width:0;margin:0 0 16px;padding:0;border:0}
.f-group legend{margin:0 0 8px;padding:0;font-weight:600;font-size:15px}
.chks{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.chks{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.chk{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 14px;border-radius:12px;background:var(--surf);box-shadow:inset 0 0 0 1px var(--ring2);font-weight:500;overflow-wrap:anywhere;cursor:pointer;transition:box-shadow .15s,background .15s}
.chk:hover{box-shadow:inset 0 0 0 1px var(--ink3)}
.chk input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--gfill)}
.chk:has(input:checked){background:var(--gsoft);box-shadow:inset 0 0 0 1.5px var(--gfill)}
.f-group[aria-invalid=true] .chk{box-shadow:inset 0 0 0 1.5px var(--red)}
.f-group .f-err{margin-top:8px}
.perks{display:grid;gap:10px;max-width:60ch;margin:0 0 22px;padding:0;list-style:none}
.perks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-weight:500}
.perks li:before{content:"\2713";display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--gfill);color:#fff;font-weight:700;font-size:12px}
/* the pop-up (bulk quotes on a chemical page): full screen on a phone, a centred window on a computer */
.modal{inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;overflow:hidden;border:0;background:var(--bg);color:var(--ink)}
.modal[open]{display:flex;flex-direction:column}
.modal::backdrop{background:rgba(10,11,12,.55)}
@media (min-width:800px){.modal{width:min(820px,calc(100% - 48px));height:fit-content;max-height:calc(100% - 48px);margin:auto;border-radius:24px;box-shadow:0 0 0 1px var(--ring),0 40px 90px -24px rgba(0,0,0,.55)}}
.m-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 20px;background:var(--surf);border-bottom:1px solid var(--ring2)}
.m-title{margin:0;font-weight:650;font-size:20px;line-height:1.2;letter-spacing:-.025em;overflow-wrap:anywhere}
.m-x{flex:none;width:44px;height:44px;border:0;border-radius:12px;background:var(--fill);color:var(--ink);font:500 24px/1 var(--font);cursor:pointer;transition:background .15s}
.m-x:hover{background:var(--fill2)}
.m-body{flex:1 1 auto;min-height:0;padding:16px 16px 28px;overflow-y:auto;overscroll-behavior:contain}
@media (min-width:800px){.m-body{padding:22px 26px 30px}}
.m-wait{margin:20px 0;color:var(--ink2)}
html.m-open{overflow:hidden}
.modal .shelf{padding-top:0}
.modal .lede{margin:0 0 14px;font-size:16px}
.modal .qform,.modal .f-done{max-width:none}
/* a file to upload (a supplier's price list), and what we found in it */
.f input[type=file]{padding:8px;border:1.5px dashed var(--barc);box-shadow:none;cursor:pointer}
.f input[type=file]:hover{border-color:var(--ink3);box-shadow:none}
.f input[type=file]::file-selector-button{min-height:38px;margin:0 12px 0 0;padding:0 14px;border:0;border-radius:10px;background:var(--fill);color:var(--ink);font:600 14px/1 var(--font);cursor:pointer;transition:background .15s}
.f input[type=file]:hover::file-selector-button{background:var(--fill2)}
.f-found{margin:-4px 0 16px;padding:12px 14px;border-radius:12px;background:var(--gsoft);overflow-wrap:anywhere}
.f-found p{margin:0 0 6px}
.f-found .f-hint{margin:6px 0 0}
.f-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.f-chips li{max-width:100%;padding:4px 10px;border-radius:99px;background:var(--surf);box-shadow:0 0 0 1px var(--ring2);font-size:14px;font-weight:500}

/* Tools (growth/gaps-and-tools.md, 2026-10-29): the bulk price line and price chart inside the "Buying in bulk?"
   band, the calculators, the /bulk-prices/ page and the pages under /tools/. Merge into site.css; it uses only the
   site's own tokens and parts (.card, .f, .results, .rows, .strip, .dl, .btn). */

/* bulk price line: on the dark band, so fixed light colours like the band's own */
.bk{margin:12px 0 16px;padding:0 0 16px;border-bottom:1px solid rgba(255,255,255,.16)}
.bulk .bk-fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;color:#F1F2F3;font-weight:700;font-size:17px}
.bk-lab{flex:1 0 100%;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#C9CDD1}
.bk-fig b{font-weight:900;font-stretch:62%;font-size:clamp(46px,6vw,64px);line-height:.92;color:var(--amber)}
.bk-alt{flex:1 0 100%;color:#C9CDD1;font-weight:600;font-size:15px}
.bulk .bk-gap{margin-top:10px;color:#F1F2F3}
.bk-gap b{color:var(--amber);font-weight:800}
.bulk .bk-src{margin-top:8px;font-size:13px;line-height:1.45}
.bk-src a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.bk-src a:hover{color:var(--amber)}

/* price by year: one line, labels in HTML beside the stretched SVG so text never scales */
.bkh{margin:16px 0 14px}
.bulk .bkh-cap{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#C9CDD1}
.bulk .bkh-sum{margin:6px 0 14px;color:#F1F2F3;font-size:15px}
.bkh-plot{position:relative;height:120px;margin:0 60px 0 44px}
@media (min-width:800px){.bkh-plot{height:150px}}
.bkh-plot svg{display:block;width:100%;height:100%;overflow:visible}
.bkh-grid{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1;vector-effect:non-scaling-stroke}
.bkh-line{fill:none;stroke:var(--amber);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.bkh-yr rect{fill:transparent}
.bkh-dot{fill:none;stroke:var(--amber);stroke-width:8;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0}
.bkh-yr:hover .bkh-dot,.bkh-on{opacity:1}
.bkh-y,.bkh-v{position:absolute;transform:translateY(-50%);font-size:12px;font-weight:700;line-height:1;color:#C9CDD1;white-space:nowrap;font-variant-numeric:tabular-nums}
.bkh-y{right:100%;padding-right:8px}
.bkh-v{left:100%;padding-left:10px;font-size:13px;color:#F1F2F3}
.bulk .bkh-x{display:flex;justify-content:space-between;max-width:none;margin:6px 60px 0 44px;font-size:12px;font-weight:700;color:#C9CDD1}
.bkh-t{margin-top:12px}
.bkh-t summary{width:max-content;cursor:pointer;font-size:14px;line-height:24px;font-weight:700;color:#F1F2F3}
.bkh-t summary:hover{color:var(--amber)}
.bkh-t table{margin-top:8px;border-collapse:collapse;font-size:14px;color:#F1F2F3;font-variant-numeric:tabular-nums}
.bkh-t th,.bkh-t td{padding:5px 0 5px 22px;text-align:right;font-weight:600;border-bottom:1px solid rgba(255,255,255,.1)}
.bkh-t th:first-child{padding-left:0;text-align:left}
.bkh-t thead th{font-size:12px;font-weight:800;color:#C9CDD1}

/* the calculator */
.sol-box{padding:18px}
@media (min-width:800px){.sol-box{padding:26px 28px}}
.sol-in{display:grid;gap:0 18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.sol-in{grid-template-columns:repeat(2,minmax(0,1fr))}.sol-in .sol-wide{grid-column:1/-1}}
@media (min-width:700px) and (max-width:959px){.dil-in .f:last-child{grid-column:1/-1}}
@media (min-width:960px){.dil-in{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sol-pair{display:grid;grid-template-columns:minmax(64px,.7fr) minmax(0,2fr);gap:8px}
.sol-find{position:relative}
.sol-find .results{margin-top:4px}
.results li[role=option] a{cursor:pointer}
.sol-err{color:var(--red);font-size:14px;font-weight:600;margin:0 0 12px}
#solution .sec-h p{overflow-wrap:anywhere}
.sol-err:empty{display:none}
.sol-out{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:4px 0 0}
@media (min-width:800px){.sol-out{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sol-out>div{display:flex;flex-direction:column;gap:4px;min-width:0;background:var(--surf2);border-radius:18px;padding:16px 18px}
.sol-out>.sale{background:var(--sale);color:#18181B}  /* amber in both themes, so its words stay dark */
.sol-out>.sale dt,.sol-out>.sale .sol-sub{color:#3F3F46}
.sol-out>.sale .btn-ink{background:#18181B;color:#fff}
.sol-out>.sale .btn-ink:hover{background:#000}
.sol-out dt{font-size:14px;font-weight:700;color:var(--ink2)}
.sol-out dd{margin:0;overflow-wrap:anywhere}
.sol-big{font-weight:900;font-stretch:62%;font-size:clamp(42px,5vw,56px);line-height:.95;font-variant-numeric:tabular-nums lining-nums}
.sol-sub{font-size:14px;color:var(--ink2);text-wrap:pretty}
.sol-out .btn{margin-top:8px}
.sol-wait .sol-out{opacity:.4}
.sol-tip{font-size:14px;color:var(--ink2);margin:14px 0 0;max-width:70ch;text-wrap:pretty}

/* tool and bulk price pages */
.t-head{margin:24px 0 28px}
.t-head .lede{margin:16px 0 0}
.t-strip{margin-bottom:8px}
.t-strip b{flex:none}  /* a phone lays the strip in rows: keep "67" and "19×" whole */
@media (min-width:700px){.t-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
.t-rows b{min-width:0;overflow-wrap:anywhere}
.t-rows .rc{white-space:normal;text-align:right;max-width:55%}
.t-rows a{align-items:center}
.t-rv{flex:none;max-width:50%;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.t-rv b{font-size:15px;font-variant-numeric:tabular-nums}
.t-rv small{font:500 12.5px/1.4 var(--mono);color:var(--ink3)}
.t-rv small span{white-space:nowrap}  /* "in 1 litre" never leaves "litre" alone */
.t-more .rc{font:400 13.5px/1.45 var(--font);max-width:50%}
.bp{width:100%;border-collapse:separate;border-spacing:0;display:block}
.bp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bp tbody{display:grid;gap:10px}
.bp tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"name name" "bulk shop" "x x";gap:12px 14px;background:var(--surf);color:var(--ink);border-radius:20px;box-shadow:var(--sh);padding:16px 18px}
.bp th,.bp td{display:block;padding:0;text-align:left;font-weight:inherit;min-width:0;overflow-wrap:anywhere}
.bp-name{grid-area:name}
.bp-bulk{grid-area:bulk}
.bp-shop{grid-area:shop}
.bp-x{grid-area:x;display:flex!important;align-items:baseline;gap:10px;border-top:1px solid var(--line);padding-top:10px!important}
.bp-name a{font-weight:800;font-size:18px;text-decoration:none;padding:2px 0}
.t-strip a[download]{padding:3px 0}
.bp-name a:hover{color:var(--red)}
.bp th span,.bp td span{display:block;font-size:13px;color:var(--ink3);line-height:1.35;margin-top:2px}
.bp td b{display:block;font-weight:900;font-stretch:62%;font-size:min(36px,8.4vw);line-height:1;white-space:nowrap}
.bp .bp-k{font-weight:700;color:var(--ink2);margin:0 0 4px}
.bp-x b{font-size:30px}
.bp-x .bp-k{margin:0}
.bp td .bp-h{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--ink2);font-weight:600}
.bp-spark{flex:none;width:64px;height:20px;overflow:visible}
.bp-spark path{fill:none;stroke:var(--ink2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
@media (min-width:800px){
  .bp thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:block;margin-bottom:6px}
  .bp thead tr{background:none;box-shadow:none;padding:0 18px;font-size:13px;font-weight:800;color:var(--ink3)}
  .bp tr{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) 130px;grid-template-areas:"name bulk shop x";align-items:center;gap:18px;padding:14px 18px}
  .bp thead th{grid-area:auto}
  .bp .num{text-align:right}
  .bp-x{display:block!important;border:0;padding-top:0!important}
  .bp td .bp-h{justify-content:flex-end}
  .bp td .bp-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* /tools/ pages: steps, and the hub's cards */
.t-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:st}
@media (min-width:800px){.t-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.t-steps li{position:relative;padding:14px 18px 14px 58px;border-radius:20px;background:var(--surf);box-shadow:var(--sh);color:var(--ink2);counter-increment:st;text-wrap:pretty}
.t-steps li::before{content:counter(st);position:absolute;left:16px;top:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--amber);color:#18181B;font-size:15px;font-weight:800}
.t-steps b{color:var(--ink)}
/* /tools/ hub, in the home page's look: hero, tool cards with a dark answer screen, the bulk board, sources */
/* a jump to the bulk box or the calculator lands below the sticky header (69px), the box's own top in view */
#h-bulk{scroll-margin-top:118px}
#solution{scroll-margin-top:40px}
.t-hero{padding-top:30px}
.t-hero h1{font-size:clamp(34px,9.4vw,76px)}
.t-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t-tools{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin:44px 0 0;padding:0;list-style:none}
@media (min-width:760px){.t-tools{grid-template-columns:repeat(3,minmax(0,1fr))}}
.t-tool{position:relative;display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;padding:8px;transition:transform .2s,box-shadow .2s}  /* subgrid: the screens in a row line up */
.t-tool:hover{transform:translateY(-2px);box-shadow:var(--sh),0 0 0 1px var(--ring2)}
.t-tool:focus-within{box-shadow:var(--sh),0 0 0 2px var(--green)}
.t-scr,.t-bkv{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0;padding:16px 18px 18px;border-radius:21px;background:radial-gradient(120% 120% at 50% -30%,#202227 0%,#131417 58%,#111214 100%) #111214;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.07);color:#fff}
.t-sl{margin:0;font:600 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#ECECEE;text-wrap:balance}
.t-sv{display:flex;flex-direction:column;gap:7px;margin:0}
.t-sv .tl{display:flex;gap:4px}
.t-su{font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#8C8E95}
.t-sx{margin:auto 0 0;padding-top:10px;text-wrap:balance;align-self:stretch;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px;color:#A3A5AC}
.t-cb{display:flex;flex-direction:column;gap:6px;flex:1;padding:16px 12px 10px}
.t-cb h2{margin:0;font-size:25px;font-weight:700;line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
.t-cb h2 a{text-decoration:none;transition:color .15s}
.t-tool h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}  /* the whole card opens the tool */
.t-tool:hover h2 a{color:var(--green)}
.t-cb p{margin:0;font-size:15px;color:var(--ink2);text-wrap:pretty}
.t-cb .t-go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;font-weight:600;color:var(--green);transition:gap .2s}
.t-tool:hover .t-go{gap:10px}
.t-go svg{width:14px;height:14px}
.t-bulk{max-width:none;margin:14px 0 0;padding:18px 14px 16px}
.t-bk{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);padding:4px 4px 0}
.t-bkt h2{margin:0 0 10px;font-size:clamp(26px,3.6vw,40px);line-height:1.06;letter-spacing:-.04em;color:#fff;text-wrap:balance}
.t-bkt h2 a{color:inherit;text-decoration:none;transition:color .15s}
.t-bkt h2 a:hover{color:var(--amber)}
.t-bkt p{margin:0;font-size:15.5px;color:#A3A5AC;text-wrap:pretty}
.t-bkt .t-bkl{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:14px}
.t-bkl a{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-weight:600;color:var(--amber);transition:gap .2s}
.t-bkl a:hover{gap:10px}
.t-bkl a svg{width:14px;height:14px}
.t-bkl a.t-dl{color:#ECECEE;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.t-bkv{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.t-spk{display:block;width:100%;height:60px;margin-top:6px;overflow:visible}
.t-spk path{fill:none;stroke:var(--amber);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.t-spx{display:flex;justify-content:space-between;gap:10px;align-self:stretch;margin:0;font:500 11px/1.3 var(--mono);color:#8C8E95}
.t-spm{color:#ECECEE;text-align:center}
@media (min-width:600px){.t-bulk{padding:20px 22px 20px}.t-bk{padding:4px 12px 4px}}
@media (min-width:900px){.t-bk{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px}.t-spk{height:76px}}
.t-src{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
@media (min-width:760px){.t-src{grid-template-columns:repeat(3,minmax(0,1fr))}}
.t-src li{display:flex;flex-direction:column;gap:6px;padding:22px}
.t-src b{font-size:17px}
.t-src span{font-size:15px;color:var(--ink2);text-wrap:pretty}

/* Cite this price (growth/cite-this-price.md): one closed line at the foot of the price table; open, the lines for a
   report and the reference in one style at a time */
.cite{margin-top:24px;border-block:1px solid var(--line)}
.cite [hidden]{display:none!important}
.cite summary{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;min-height:56px;padding:8px 0;cursor:pointer;list-style:none;font-size:15.5px;line-height:22px;font-weight:700;color:var(--ink)}
.cite summary::-webkit-details-marker{display:none}
.cite summary::after{content:"";flex:none;width:7px;height:7px;margin:0 4px 3px auto;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.cite[open] summary::after{margin-bottom:-3px;transform:rotate(-135deg)}
.cite summary:hover{color:var(--green)}
.cite-q{font-weight:500;color:var(--ink2)}
.cite-b{display:grid;gap:10px;padding:2px 0 24px}
.cite-h{margin:10px 0 0;font-size:12.5px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.cite-tabs{display:flex;gap:6px}
.cite-tabs button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--surf);box-shadow:inset 0 0 0 1px var(--ring2);font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.cite-tabs button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.cite-tabs button[aria-pressed=true]{background:var(--ink);color:var(--bg);box-shadow:none}
.cite-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 16px;padding:14px 16px;border-radius:12px;background:var(--fill)}
.cite-st{flex-basis:100%;margin:0;font-size:13px;font-weight:700;color:var(--ink2)}
.cite-js .cite-st{display:none}
.cite-t{flex:1 1 320px;min-width:0;margin:0;font-size:15px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.cite-bib{font:13px/1.6 var(--mono);white-space:pre-wrap}
.cite-copy{flex:none}
.cite-note{margin:2px 0 0;font-size:13.5px;color:var(--ink3)}