/* Chemical page, second design (cs/templates/chemical_v2.html, founder review 2026-10-30). Loaded only on chemical
   pages, after site.css, so site.css stays inside its size budget. Everything is scoped to main.cv2 or to class
   names only this page uses. Colour still comes only from the cheapest price (green) and the bulk quote (amber). */

/* pack size scale, in the Pack size filter only: seven bars, the first N filled, beside the band's words */
:root{--sz0:#D4D4DA}[data-theme=dark]{--sz0:#45464E}@media (prefers-color-scheme:dark){[data-theme=system]{--sz0:#45464E}}
.sz{display:inline-flex;align-items:flex-end;gap:2px;height:16px;vertical-align:-1px;white-space:nowrap}
.sz i{width:3px;border-radius:1px;background:var(--sz0)}
.sz i:nth-child(1){height:4px}.sz i:nth-child(2){height:6px}.sz i:nth-child(3){height:8px}.sz i:nth-child(4){height:10px}.sz i:nth-child(5){height:12px}.sz i:nth-child(6){height:14px}.sz i:nth-child(7){height:16px}
.sz[data-l="1"] i:nth-child(-n+1),.sz[data-l="2"] i:nth-child(-n+2),.sz[data-l="3"] i:nth-child(-n+3),.sz[data-l="4"] i:nth-child(-n+4),.sz[data-l="5"] i:nth-child(-n+5),.sz[data-l="6"] i:nth-child(-n+6),.sz[data-l="7"] i:nth-child(-n+7){background:var(--sz1,var(--ink2))}

/* bands: a full-width background behind a section that changes from the one beside it, with no sideways scroll */
.cv2 .band{background:var(--surf2);box-shadow:0 0 0 100vmax var(--surf2);clip-path:inset(0 -100vmax)}
.cv2 .bsec{padding:44px 0}
.cv2 .bsec .sec{padding-top:0}
/* the last section is its own spacer: no strip of page colour between a grey band and the grey footer */
.cv2+.foot{margin-top:0}
.cv2 h2{font-size:clamp(23px,2.6vw,29px)}
.cv2 .sec-h{margin-bottom:16px}
.cv2 .sec-h p{font-size:15px}

/* top: name, then the three quick answers in one row */
.cv2 .chead h1{margin:12px 0 10px}
.cv2 .idline{margin:0 0 18px}
.cv2 .qa{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.cv2 .qa{grid-template-columns:repeat(2,minmax(0,1fr))}.cv2 .qa .qbulk{grid-column:1/-1}.cv2 .qa-two .qbulk{grid-column:auto}}
@media (min-width:1000px){.cv2 .qa{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}.cv2 .qa .qbulk{grid-column:auto}.cv2 .qa-two{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.cv2 .ans{padding:18px 18px 16px;border-radius:20px}
@media (min-width:800px){.cv2 .ans{padding:22px 22px 20px}}
/* card titles: plain words, readable at a glance (site.css draws them as small grey capitals) */
.cv2 .ans-tag{display:block;margin:0 0 10px;font:700 16px/1.3 var(--font);letter-spacing:-.005em;text-transform:none;color:var(--ink)}
.cv2 .ans-tag:before{content:none}
.cv2 .ans-main .ans-tag{color:var(--green)}
.cv2 .ans-fig .price-big{--pbig:clamp(46px,5.4vw,64px)}
.cv2 .price-big .per{margin-top:8px;font-size:15px}
.cv2 .ans-spend .ans-fig{font-size:clamp(34px,3.6vw,44px)}
.cv2 .ans-spend .ans-fig>.per{margin-top:6px;font-size:15px}
.cv2 .ans .btn,.qbulk .btn{min-height:44px;margin-top:auto;align-self:flex-start}
.qa-line{margin:12px 0 0;font-size:15px;color:var(--ink2);overflow-wrap:anywhere}
.qa-line b,.qa-line .price{color:var(--ink);font-weight:600}
.qa-at{margin:4px 0 16px;font-size:15px;color:var(--ink2);overflow-wrap:anywhere}
.qa-at b{color:var(--ink);font-weight:600}
.qa-g{color:var(--ink3)}
.qbulk{display:flex;flex-direction:column;min-width:0;margin:0;padding:18px;border-radius:20px;background-color:var(--surf);background-image:linear-gradient(160deg,rgba(255,194,61,.22),rgba(255,194,61,.05) 70%);box-shadow:inset 0 0 0 1px rgba(255,194,61,.7),var(--sh)}
@media (min-width:800px){.qbulk{padding:22px}}
.qb-t{margin:0;font-weight:650;font-size:clamp(20px,2vw,24px);line-height:1.15;letter-spacing:-.025em;text-wrap:balance}
.qb-p{margin:8px 0 16px;font-size:15px;color:var(--ink2);text-wrap:pretty}
@media (min-width:640px) and (max-width:999px){.cv2 .qa:not(.qa-two) .qbulk{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag btn" "t btn" "p btn";column-gap:24px;align-items:center}
  .qa:not(.qa-two) .qbulk .ans-tag{grid-area:tag}.qa:not(.qa-two) .qb-t{grid-area:t}.qa:not(.qa-two) .qb-p{grid-area:p;margin-bottom:0}.cv2 .qa:not(.qa-two) .qbulk .btn{grid-area:btn;margin:0}}
/* Lowest total price: a slim card on a phone, the figure and what it buys on one line */
@media (max-width:639px){.cv2 .ans-spend{padding:14px 16px 16px}.cv2 .ans-spend .ans-tag{margin-bottom:4px}
  .cv2 .ans-spend .ans-fig{font-size:28px;letter-spacing:-.03em}.cv2 .ans-spend .ans-fig>.per{display:inline;margin:0;font-size:15px}
  .cv2 .ans-spend .qa-line{margin-top:6px}.cv2 .ans-spend .qa-at{margin:2px 0 12px}.cv2 .ans-spend .btn{min-height:40px}}
/* a currency code after a price, where the symbol alone could mean several currencies ($93.64 CAD) */
.cc{font-size:max(.62em,11px);font-weight:600;letter-spacing:.02em}
.pnum .cc{align-self:flex-end;margin:0 0 .12em .1em;font-size:.36em;line-height:1}.pnum .cur-r{margin:.05em 0 0 .04em}
.cv2 .pnum.dc .cents:before{content:","}

/* every price: its own band straight after the answers */
.cv2 .prices{margin-top:28px;padding:40px 0 44px}
@media (min-width:800px){.cv2 .prices{padding:48px 0 56px}}
.ptools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"so so fb" "un cu cu";align-items:end;gap:8px;margin:0 0 12px}
.ptools>.pt-f:first-child{grid-area:so}.pt-un{grid-area:un}.pt-cu{grid-area:cu}.pt-fbtn{grid-area:fb}
.ptools.pt-min{display:flex;flex-wrap:wrap}
.pt-min .pt-f select{width:auto}
.pt-f{display:grid;gap:4px;min-width:0;font-size:13px;font-weight:600;color:var(--ink2)}
.pt-f select{width:100%;min-width:0;min-height:42px;padding:0 32px 0 12px;border:0;border-radius:12px;background:var(--surf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236E6E77' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center/12px;box-shadow:inset 0 0 0 1px var(--ring2);color:var(--ink);font:500 15px/1.2 var(--font);-webkit-appearance:none;appearance:none;cursor:pointer;transition:box-shadow .15s}
.pt-f select:hover{box-shadow:inset 0 0 0 1px var(--ink3)}
.pt-fbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 14px;border:0;border-radius:12px;background:var(--surf);box-shadow:inset 0 0 0 1px var(--ring2);color:var(--ink);font:600 15px/1.2 var(--font);cursor:pointer;transition:background .15s,box-shadow .15s}
.pt-fbtn:hover{box-shadow:inset 0 0 0 1px var(--ink3)}
.pt-fbtn[aria-expanded=true]{background:var(--btn);color:var(--btnt);box-shadow:none}
.pt-n{min-width:20px;padding:2px 6px;border-radius:99px;background:var(--btn);color:var(--btnt);font-size:12px;line-height:1.3;text-align:center}
.pt-fbtn[aria-expanded=true] .pt-n{background:var(--btnt);color:var(--btn)}
.pfil{display:grid;gap:10px;margin:0 0 12px;padding:14px 16px;border-radius:16px;background:var(--surf);box-shadow:0 0 0 1px var(--ring2)}
.pf-g{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pf-h{flex:1 0 100%;font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.pf-g button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:0;border-radius:99px;background:var(--fill);color:var(--ink);font:500 14px/1.2 var(--font);text-align:left;cursor:pointer;transition:background .15s,color .15s}
.pf-g button:hover{background:var(--fill2)}
.pf-g button[aria-pressed=true]{background:var(--btn);color:var(--btnt)}
.pf-g button[aria-pressed=true]{--sz0:var(--ink3);--sz1:var(--btnt)}
.pf-n{font-variant-numeric:tabular-nums;color:var(--ink3)}
.pf-g button[aria-pressed=true] .pf-n{color:var(--btnt)}
.pstat{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 10px;font-size:14px;color:var(--ink3)}
.pt-clear{min-height:28px;padding:0 11px;border:0;border-radius:99px;background:var(--fill);color:var(--ink);font:600 13.5px/1.2 var(--font);cursor:pointer;transition:background .15s}
.pt-clear:hover{background:var(--fill2)}
.pnone{margin:0;padding:24px 16px;border-radius:16px;background:var(--surf);box-shadow:0 0 0 1px var(--ring2);text-align:center;color:var(--ink2)}
.cv2 .prices .units-note,.fx-note{margin:-4px 0 12px;font-size:13.5px;color:var(--ink3)}
@media (min-width:800px){
  .ptools{display:flex;flex-wrap:wrap}
  .pt-f select{width:auto}
  .pfil{gap:8px;padding:12px 16px}
  .pf-g{position:relative;padding-left:112px}
  .pf-h{position:absolute;left:0;top:11px}
}
.js .pfil:not(.open){display:none}
html:not(.js) .ptools,html:not(.js) .pfil,html:not(.js) .pstat{display:none}

/* the rows: what you get, who sells it, then the price per unit on the right, the whole row one link */
.pstat.is-all [data-shown]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pstat.is-all{margin:0}
.ptab{display:block;width:100%;border-collapse:separate;border-spacing:0}
.ptab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ptab tbody{display:block;overflow:hidden;border-radius:18px;background:var(--surf);box-shadow:var(--sh)}
.ptab tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pk pr" "st st" "wh wh";gap:2px 12px;align-items:start;padding:12px 14px;border-top:1px solid var(--line);transition:background .15s}
.ptab tbody tr:first-child{border-top:0}
.ptab td,.ptab th{display:block;padding:0;text-align:left;font-weight:inherit}
.ptab tbody tr:hover{background:var(--hov)}
.ptab tr.win{background:var(--gsoft);box-shadow:inset 3px 0 0 var(--gfill)}
.ptab tr.f-out{display:none}
.ptab tbody tr:focus-within{outline:2px solid var(--ink);outline-offset:-2px}
.o-pk{grid-area:pk;min-width:0}
.o-pk b{display:block;font-weight:650;font-size:16px;line-height:1.3;letter-spacing:-.01em;overflow-wrap:anywhere}
.o-tot{display:block;font-size:13.5px;line-height:1.35;color:var(--ink2);font-variant-numeric:tabular-nums}
.o-usd{color:var(--ink3)}
.ptab .o-store{grid-area:st;min-width:0;margin-top:4px;font-size:14px;line-height:1.35}
.ptab .o-name{font-weight:600;font-size:14.5px;overflow-wrap:anywhere;transition:color .15s}
.ptab .o-name:after{content:"";position:absolute;inset:0}
.ptab .o-name:focus-visible{outline:0}
.ptab tr:hover .o-name{color:var(--green)}
.ptab .o-cc{display:inline;font-size:inherit;color:var(--ink3);overflow-wrap:anywhere}
.ptab .o-cc:before{content:" · "}
.ptab .o-what{grid-area:wh;display:flex!important;flex-wrap:wrap;gap:4px;min-width:0;margin-top:6px}
.ptab .chip{padding:3px 8px;font-size:12px;line-height:1.25;white-space:normal}
.ptab .chip-f{background:transparent;box-shadow:inset 0 0 0 1px var(--ring2);color:var(--ink2)}
.ptab .chip-q{color:var(--ink3);font-weight:500}
.ptab .o-price{grid-area:pr;text-align:right!important;white-space:nowrap}
.ptab .o-price .price{display:block;font-weight:650;font-size:21px;line-height:1.1;letter-spacing:-.03em}
.ptab .o-price .per{display:block;margin-top:2px;font-size:12.5px;font-weight:500;line-height:1.3;letter-spacing:0;color:var(--ink2)}
.ptab .win .o-price .price{color:var(--green)}
.ptab tr.oos .o-pk b,.ptab tr.oos .o-price .price,.ptab tr.oos .o-name{color:var(--ink3)}
.ptab .o-go{grid-area:go;justify-self:end;align-self:end;width:18px;height:18px;background:var(--ink3);-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;transition:background .15s}
.ptab tr:hover .o-go{background:var(--ink)}
@media (max-width:799px){.ptab .o-go{display:none}}
@media (min-width:800px){
  .ptab thead{position:static;display:block;width:auto;height:auto;margin:0 0 6px;overflow:visible;clip:auto}
  .ptab tr{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.3fr) 168px 18px;grid-template-areas:"pk st wh pr go";align-items:center;gap:16px;padding:12px 18px}
  .ptab thead tr{padding:0 18px;border:0;font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
  .ptab thead th{grid-area:auto}
  .ptab thead th.num{text-align:right}
  .th-s{display:inline-flex;align-items:center;gap:6px;min-height:24px;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;transition:color .15s}
  .th-s:hover,.ptab [aria-sort] .th-s{color:var(--ink)}
  .th-s:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
  .th-s i{width:8px;height:10px;background:currentColor;-webkit-mask:var(--arr) center/contain no-repeat;mask:var(--arr) center/contain no-repeat;--arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 0l4 4H0zM0 6h8l-4 4z'/%3E%3C/svg%3E")}
  .ptab [aria-sort=ascending] .th-s i{--arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 2l4 5H0z'/%3E%3C/svg%3E")}
  .ptab [aria-sort=descending] .th-s i{--arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M0 3h8L4 8z'/%3E%3C/svg%3E")}
  .ptab .o-store,.ptab .o-what{margin-top:0}
  .ptab .o-cc{display:block;font-size:13.5px}
  .ptab .o-cc:before{content:none}
  .ptab .o-go{align-self:center}
}
.cv2 .more-btn{margin-top:14px}
.cv2 .prices .cite{margin-top:20px}

/* the bulk price chart: a year's price and amount where the pointer or finger is */
.cv2 .bulk{margin:40px 0}
.bkh-plot{touch-action:pan-y}
.bkh-yr.pick .bkh-dot{opacity:1}
.bkh-tip{position:absolute;z-index:2;display:grid;gap:1px;padding:7px 10px;border-radius:10px;background:#fff;color:#18181B;font-size:13px;font-weight:500;line-height:1.3;white-space:nowrap;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);pointer-events:none;transform:translate(-50%,calc(-100% - 12px))}
.bkh-tip b{font-weight:700}
.bkh-tip span{color:#52525B}
.bkh-tip span:first-of-type{color:#18181B;font-weight:600}
.bkh-tip.bkh-lo{transform:translate(-50%,14px)}

/* one tap to open: the solution calculator and the chemical identity (the look of the citation card) */
.cv2 .fold-s{margin:0 0 40px}
.fold summary{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 16px;border-radius:14px;background:var(--surf);box-shadow:inset 0 0 0 1px var(--ring2);cursor:pointer;list-style:none;transition:box-shadow .15s}
.fold summary::-webkit-details-marker{display:none}
.fold summary:hover{box-shadow:inset 0 0 0 1px var(--ink3)}
.fold summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fold-w{flex:1;min-width:0;display:grid;gap:2px}
.cv2 .fold-n{margin:0;font-size:17px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.fold-d{font-size:14px;line-height:1.4;color:var(--ink2);text-wrap:pretty;overflow-wrap:anywhere}
.fold-go{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:700}
.fold-go:after{content:"";width:6px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.fold[open] .fold-go:after{margin-top:3px;transform:rotate(-135deg)}
.fold-off,.fold[open] .fold-on{display:none}
.fold[open] .fold-off{display:inline}
.fold-b{padding:20px 0 4px}
/* compact link rows: similar chemicals and the bulk suppliers, one line apart instead of a card each */
.lrows{margin:0;padding:0;list-style:none}
.lrows a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:44px;padding:11px 0;border-bottom:1px solid var(--line)}
.lrows li:first-child a{border-top:1px solid var(--line)}
.lrows b{min-width:0;font-weight:600;font-size:15px;overflow-wrap:anywhere;transition:color .15s}
.lrows a:hover b{color:var(--green)}
.lrows span{flex:none;font-size:13px;color:var(--ink3);text-align:right}
.cv2 .makers .cards{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:900px){.cv2 .makers .cards{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
.cv2 .makers .cards .card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n a" "d a";column-gap:12px;row-gap:1px;align-items:center;height:auto;padding:10px 0;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--line)}
.cv2 .makers .card>b{grid-area:n;font-size:15px}
.cv2 .makers .card>span{grid-area:d;font-size:13px}
.cv2 .makers .cards .card .mk-ask{grid-area:a;align-self:center;margin:0;padding:0}
.cv2 .makers .cards .card .mk-ask:hover{text-decoration:none;color:var(--ink)}
@media (max-width:899px){.cv2 .makers .cards .card:first-child{border-top:1px solid var(--line)}}
@media (min-width:900px){.cv2 .makers .cards .card:nth-child(-n+2){border-top:1px solid var(--line)}}
.cv2 .pills{gap:6px}
.cv2 .pills a{min-height:36px;padding:0 14px 0 12px;font-size:14.5px}
.cv2 .cols{gap:40px}
.cv2 .dl div{padding:10px 0}
.cv2 .method{margin:28px 0 0}
@media print{.ptools,.pfil,.pstat,.o-go{display:none}.ptab tbody{box-shadow:none;border:1px solid #999}.cv2 .band{box-shadow:none;background:none}}