:root{
    --ground:#F6F7F6; --surface:#FFFFFF; --surface-2:#F0F2F1;
    --ink:#181B1C; --muted:#5E6668; --faint:#8A9294; --hair:#E3E6E5;
    --accent:#0F6E63; --accent-ink:#0B534B; --accent-soft:#E4F0ED;
    --ruo:#8A5A24; --ruo-soft:#F3EADD; --btn-fg:#FFFFFF;
    --serif:"Fraunces",Georgia,"Times New Roman",serif;
    --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
    --maxw:1080px;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#0E1211; --surface:#141918; --surface-2:#1B2120;
      --ink:#E7ECEA; --muted:#9AA3A1; --faint:#6E7876; --hair:#242B29;
      --accent:#4FB5A6; --accent-ink:#7EC9BD; --accent-soft:#153029;
      --ruo:#C99A5F; --ruo-soft:#241C10; --btn-fg:#0E1211;
    }
  }
  :root[data-theme="dark"]{
    --ground:#0E1211; --surface:#141918; --surface-2:#1B2120;
    --ink:#E7ECEA; --muted:#9AA3A1; --faint:#6E7876; --hair:#242B29;
    --accent:#4FB5A6; --accent-ink:#7EC9BD; --accent-soft:#153029;
    --ruo:#C99A5F; --ruo-soft:#241C10;
  }
  *{box-sizing:border-box}
  body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
  a{color:inherit}
  h1,h2,h3{font-family:var(--serif); font-weight:500; text-wrap:balance; line-height:1.12; margin:0}
  .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); font-weight:500}
  .muted{color:var(--muted)}
  [hidden]{display:none!important}

  .ribbon{background:var(--surface-2); border-bottom:1px solid var(--hair); font-size:12.5px; color:var(--muted)}
  .ribbon .wrap{padding:9px 28px}
  .ribbon strong{color:var(--ink); font-weight:600}

  header.site{border-bottom:1px solid var(--hair); background:var(--ground); position:sticky; top:0; z-index:20}
  header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; gap:16px}
  .brandwrap{display:flex; flex-direction:column; gap:3px}
  .brand{display:inline-flex; align-items:center; gap:11px; text-decoration:none; cursor:pointer}
  .foot-logo{display:flex; align-items:center; gap:11px}
  .brandmono{width:38px; height:38px; border-radius:10px; background:#FFFFFF; color:#181B1C; border:1px solid #DBE0DE; box-shadow:0 1px 2px rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; white-space:nowrap; font-family:var(--serif); font-weight:700; font-size:21px; letter-spacing:-.03em; flex:none}
  .brandmono .r{color:#0F6E63}
  .foot-logo .brandmono{width:34px; height:34px; font-size:19px}
  .brand .mark{font-family:var(--serif); font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
  .brand .mark b{color:var(--accent-ink); font-weight:600}
  .brandwrap .tag{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-left:49px}
  nav{display:flex; align-items:center; gap:8px}
  nav a.lnk{font-size:13.5px; text-decoration:none; color:var(--muted); font-weight:500; cursor:pointer; padding:8px 15px; border-radius:999px; border:1px solid var(--hair); background:var(--surface); white-space:nowrap; transition:color .15s, border-color .15s, background .15s}
  nav a.lnk:hover{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft)}
  .jump{font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--muted); background:var(--surface-2); border:1px solid var(--hair); border-radius:999px; padding:8px 30px 8px 15px; cursor:pointer; max-width:190px; -webkit-appearance:none; appearance:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%235E6668" stroke-width="2.5" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>'); background-repeat:no-repeat; background-position:right 12px center}
  .jump:hover{border-color:var(--accent); color:var(--ink)}
  .jump:focus{outline:2px solid var(--accent); outline-offset:1px}
  .toggle{background:var(--surface); border:1px solid var(--hair); color:var(--muted); border-radius:999px; width:36px; height:36px; cursor:pointer; font-size:14px; display:grid; place-items:center; flex:none}
  .toggle:hover{color:var(--ink); border-color:var(--accent)}
  @media(max-width:820px){ .brandwrap .tag{display:none} header.site .wrap{flex-wrap:wrap; gap:12px} nav{flex-wrap:wrap; gap:8px 8px} }

  .hero{padding:48px 0 32px; border-bottom:1px solid var(--hair)}
  .hero h1{font-size:clamp(34px,5.2vw,58px); letter-spacing:-.02em; max-width:16ch}
  .hero p.lede{font-size:clamp(17px,2vw,20px); color:var(--muted); max-width:54ch; margin:22px 0 0}
  .ruo-tag{display:inline-flex; align-items:center; gap:7px; margin-top:26px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ruo); background:var(--ruo-soft); border:1px solid color-mix(in srgb,var(--ruo) 30%, transparent); padding:6px 11px; border-radius:5px}

  section{padding:40px 0; border-bottom:1px solid var(--hair)}
  .sec-head{margin-bottom:20px}
  .sec-head h1,.sec-head h2{font-size:clamp(24px,3vw,32px); letter-spacing:-.01em; margin-top:10px; max-width:none}
  .sec-head p{margin:8px 0 0; color:var(--muted); max-width:52ch; font-size:15px}

  .calc{display:grid; grid-template-columns:1.05fr 1fr; gap:0; border:1px solid var(--hair); border-radius:12px; overflow:hidden; background:var(--surface)}
  .calc .inputs{padding:30px}
  .calc .readout{padding:30px; background:var(--surface-2); border-left:1px solid var(--hair)}
  @media(max-width:760px){ .calc{grid-template-columns:1fr} .calc .readout{border-left:none; border-top:1px solid var(--hair)} }
  .field{margin-bottom:20px}
  .field:last-child{margin-bottom:0}
  .field label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
  .inrow{display:flex; gap:10px}
  input[type=number], select.u{width:100%; font-family:var(--mono); font-size:16px; color:var(--ink); background:var(--ground); border:1px solid var(--hair); border-radius:8px; padding:11px 13px}
  input[type=number]:focus, select.u:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
  select.u{width:auto; min-width:88px}
  .out-main{margin-bottom:24px}
  .out-main .k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  .out-main .v{font-family:var(--serif); font-size:clamp(40px,7vw,60px); font-weight:600; color:var(--accent-ink); line-height:1; margin-top:6px; font-variant-numeric:tabular-nums}
  .out-main .v small{font-family:var(--sans); font-size:16px; color:var(--muted); font-weight:500; margin-left:6px}
  .outgrid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:8px; overflow:hidden}
  .outgrid div{background:var(--surface); padding:14px 16px}
  .outgrid .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
  .outgrid .n{font-family:var(--mono); font-size:20px; color:var(--ink); margin-top:4px; font-variant-numeric:tabular-nums}
  .calc-note{font-size:12px; color:var(--faint); margin-top:16px; font-family:var(--mono)}

  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  @media(max-width:760px){ .grid{grid-template-columns:1fr 1fr} }
  @media(max-width:480px){ .grid{grid-template-columns:1fr} }
  .card{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--hair); border-radius:10px; padding:22px; transition:border-color .18s, transform .18s; cursor:pointer}
  .card:hover{border-color:var(--accent); transform:translateY(-2px)}
  .card .cat{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
  .card h3{font-size:21px; margin:10px 0 4px; letter-spacing:-.01em}
  .card .gen{font-family:var(--mono); font-size:11px; color:var(--muted)}
  .card p{margin:10px 0 0; font-size:13px; color:var(--muted)}
  .card .arrow{margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--accent-ink); letter-spacing:.04em}

  .backlink{display:inline-flex; gap:7px; align-items:center; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); text-decoration:none; cursor:pointer; margin-bottom:26px; padding:7px 14px; border:1px solid var(--hair); border-radius:999px; background:var(--surface); transition:border-color .15s, color .15s}
  .backlink:hover{color:var(--accent-ink); border-color:var(--accent)}
  .proto{display:grid; grid-template-columns:1.35fr 1fr; gap:40px; align-items:start}
  @media(max-width:820px){ .proto{grid-template-columns:1fr} }
  .subhd{font-family:var(--serif); font-size:20px; font-weight:600; margin:32px 0 12px; display:flex; align-items:center; gap:10px}
  .subhd::before{content:""; width:16px; height:3px; border-radius:2px; background:var(--accent); flex:none}
  .pcard-fig .subhd::before{background:#0F6E63}
  .body-copy p{max-width:62ch}
  .compound-head{margin-bottom:24px}
  .badges{display:flex; flex-wrap:wrap; gap:8px}
  .side-rail{display:flex; flex-direction:column; gap:22px; position:sticky; top:88px}
  @media(max-width:820px){ .side-rail{position:static} }
  .pcard[id]{scroll-margin-top:96px}
  .toc{background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:20px 22px}
  .toc-h{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:12px}
  .toc ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border-left:2px solid var(--hair)}
  .toc a{display:block; padding:7px 0 7px 16px; margin-left:-2px; border-left:2px solid transparent; font-size:13.5px; line-height:1.3; color:var(--muted); text-decoration:none; transition:color .15s, border-color .15s}
  .toc a:hover{color:var(--ink)}
  .toc a.is-active{color:var(--accent-ink); border-left-color:var(--accent); font-weight:600}
  @media(max-width:820px){ .toc{display:none} }
  .head-struct{background:#FFFFFF; border:1px solid var(--hair); border-radius:16px; padding:22px 24px}
  .head-struct .subhd{color:#12332F; margin-top:0}
  .head-struct .structimg{width:auto; max-width:100%; max-height:260px; margin:0 auto}
  .head-struct .structcap{color:#8A9294}
  .pcard .subhd:not(:first-child){margin-top:22px}
  @media(max-width:820px){
    .side-rail{gap:18px}
    .head-struct{padding:18px 18px}
    .head-struct .structimg{max-height:200px}
  }
  .badge{display:inline-flex; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 32%, transparent); padding:5px 12px; border-radius:999px; font-weight:500}
  .compound-head h1,.compound-head h2{font-size:clamp(30px,4.6vw,44px); margin:14px 0 0; letter-spacing:-.02em; line-height:1.04; max-width:none}
  .gen-sub{margin:9px 0 0; font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink)}
  .card h3{font-weight:600}
  .card:hover h3{color:var(--accent-ink)}
  .card:hover .arrow{color:var(--accent)}
  .byline{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--faint)}
  .byline b{color:var(--muted); font-weight:600}
  .byline .dot{opacity:.5}
  .cta-soft{margin:26px 0 0; padding:18px 22px; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 22%, transparent); border-radius:12px; font-size:14.5px; color:var(--ink); line-height:1.55}
  .cta-soft a{color:var(--accent-ink); font-weight:600; text-decoration:none}
  .cta-soft a:hover{text-decoration:underline}
  .plan-cta{margin-top:16px}
  .plan-cta a{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--btn-fg); background:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:11px 19px; text-decoration:none; font-weight:500}
  .plan-cta a:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
  .recon-buy{margin-top:14px; font-size:13.5px; color:var(--muted)}
  .recon-buy a{color:var(--accent-ink); font-weight:600; text-decoration:none}
  .recon-buy a:hover{text-decoration:underline}
  .hubtable a{color:var(--accent-ink); text-decoration:none; font-weight:500}
  .hubtable a:hover{text-decoration:underline}
  .catbar{display:flex; flex-wrap:wrap; gap:9px; margin:0 0 26px}
  .catchip{font-family:var(--sans); font-size:13px; font-weight:500; padding:8px 15px; border-radius:999px; border:1px solid var(--c,var(--hair)); color:var(--c,var(--muted)); background:transparent; cursor:pointer; transition:background .15s,color .15s; white-space:nowrap}
  .catchip[data-cat="all"]{--c:var(--accent-ink)}
  .catchip:hover{background:color-mix(in srgb,var(--c) 12%,transparent)}
  .catchip.is-active{background:var(--c); color:#fff; border-color:var(--c)}
  .card .catcol{color:var(--c); font-weight:600}
  .card[data-cat]:not([data-cat=""]){border-top:3px solid var(--c)}
  .cardsub{display:block; font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:5px}
  .card.hide{display:none}
  .aka{margin:7px 0 0; font-family:var(--mono); font-size:11.5px; color:var(--faint)}
  .catbadge{color:var(--c); background:color-mix(in srgb,var(--c) 13%,transparent); border-color:color-mix(in srgb,var(--c) 34%,transparent)}
  .catchip.blendtoggle{--c:var(--accent-ink); border-style:dashed; margin-left:6px}
  .blendpill{display:inline-block; margin-left:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; padding:2px 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); vertical-align:middle; text-transform:none}
  .bse-intro{margin:0; color:var(--muted); font-size:14px; max-width:64ch}
  .bse-h{font-family:var(--sans); font-weight:600; font-size:14px; margin:20px 0 9px; letter-spacing:.02em}
  .bse-h.pos{color:#2E8B6F}
  .bse-h.neg{color:#B0701C}
  ul.bse{list-style:none; margin:0; padding:0}
  ul.bse li{position:relative; padding-left:20px; margin:0 0 9px; font-size:14.5px; color:var(--ink); max-width:66ch; line-height:1.55}
  ul.bse li::before{content:""; position:absolute; left:3px; top:9px; width:6px; height:6px; border-radius:50%}
  ul.bse.pos li::before{background:#2E8B6F}
  ul.bse.neg li::before{background:#C08A2E}
  .bse-note{margin:16px 0 0; font-size:12.5px; color:var(--faint); max-width:64ch}
  .refs a{color:var(--accent-ink); text-decoration:none}
  .refs a:hover{text-decoration:underline}
  :root:not([data-theme="light"]) .bse-h.pos, :root[data-theme="dark"] .bse-h.pos{color:#5FBF9E}
  :root:not([data-theme="light"]) .bse-h.neg, :root[data-theme="dark"] .bse-h.neg{color:#D9A24E}
  .cite{font-size:13px; color:var(--muted); border-left:2px solid var(--accent); padding-left:14px; margin:20px 0; max-width:58ch; font-style:italic}

  .dtech .lead{font-size:14px; color:var(--muted); margin:0 0 14px; max-width:62ch}
  .spec{border:1px solid var(--hair); border-radius:10px; overflow:hidden; background:var(--surface)}
  .spec .row{display:grid; grid-template-columns:158px 1fr}
  .spec .row + .row{border-top:1px solid var(--hair)}
  .spec .lbl{background:var(--surface-2); padding:13px 15px; font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
  .spec .val{padding:13px 15px; font-size:14px}
  @media(max-width:520px){ .spec .row{grid-template-columns:1fr} .spec .lbl{border-bottom:1px solid var(--hair)} }

  table.dose{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13px}
  table.dose th, table.dose td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--hair); font-variant-numeric:tabular-nums}
  table.dose th{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500}
  table.dose tr:last-child td{border-bottom:none}
  .modelbtn{margin-top:10px; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 35%, transparent); border-radius:8px; padding:10px 15px; cursor:pointer}
  .modelbtn:hover{border-color:var(--accent)}
  .viewinfo-row{display:flex; flex-wrap:wrap; gap:10px 14px; margin:18px 0 4px}
  .viewinfo-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:fit-content; text-align:center; text-decoration:none; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--btn-fg); background:linear-gradient(135deg, var(--accent), var(--accent-ink)); border-radius:999px; padding:11px 22px; box-shadow:0 3px 12px color-mix(in srgb, var(--accent) 40%, transparent); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
  .viewinfo-btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 55%, transparent); filter:brightness(1.07)}
  .trial-callout{background:var(--surface-2); border:1px solid var(--hair); border-radius:14px; padding:20px 22px; margin:14px 0}
  .trial-callout table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13px}
  .trial-callout td{padding:9px 10px; border-bottom:1px solid var(--hair); vertical-align:top}
  .trial-callout td:first-child{color:var(--faint); font-size:11.5px; letter-spacing:.04em; white-space:nowrap; width:1%}
  .trial-callout tr:last-child td{border-bottom:none}
  .coa-card{background:var(--surface-2); border:1px solid var(--hair); border-radius:14px; padding:20px 22px; margin-top:14px}
  .coa-table td:first-child{color:var(--faint); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; width:1%}
  .coa-actions{margin-top:16px; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center}
  .coa-verify{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted); text-decoration:underline; text-underline-offset:3px}
  .coa-verify:hover{color:var(--accent-ink)}
  .recon-tabs-h{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:2px 0 8px}
  .recon-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
  .rtab{font-family:var(--mono); font-size:13.5px; color:var(--muted); background:var(--surface); border:1px solid var(--hair); border-radius:8px; padding:9px 16px; cursor:pointer; font-variant-numeric:tabular-nums}
  .rtab:hover{border-color:var(--accent); color:var(--ink)}
  .rtab.is-active{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:500}
  .recon-draw{margin:0 0 16px}
  .recon-draw label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
  .recon-draw .inrow{display:flex; gap:10px; max-width:280px}
  .draw-input{font-family:var(--mono); font-size:15px}
  .hsec{border-bottom:none; padding:16px 0}
  .hsec > .wrap{background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:34px 40px}
  @media(max-width:640px){ .hsec > .wrap{padding:26px 22px} }
  .seeall{text-align:center; margin-top:26px}
  .pcard{background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:26px 30px; margin:0 0 16px}
  @media(max-width:640px){ .pcard{padding:22px 20px} }
  .pcard>.subhd:first-child, .pcard>h1:first-child, .pcard>h2:first-child, .pcard>.eyebrow:first-child{margin-top:0}
  .pcard .subhd{margin-top:0}
  .pcard>h2:first-child{margin-top:0}
  .pcard>h1{font-size:clamp(26px,3.2vw,34px); letter-spacing:-.01em; max-width:none; margin-top:10px}
  .pcard>h1:first-child{margin-top:0}
  .pcard-fig{background:#FFFFFF}
  .pcard-fig .subhd{color:#12332F}
  .pcard-fig .structcap{color:#8A9294}
  .structimg{width:100%; max-width:540px; height:auto; display:block; margin:0 auto}
  .structcap{font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:#8A9294; margin-top:10px; text-align:center}
  .lead-p{margin:0; max-width:64ch; font-size:16px; color:var(--muted)}
  .goal{margin:0 0 16px; padding:14px 16px; background:var(--accent-soft); border:1px solid var(--hair); border-left:3px solid var(--accent); border-radius:10px; font-size:14.5px; color:var(--ink); max-width:64ch}
  .goal strong{color:var(--accent-ink); font-weight:600}
  .split-note{margin:12px 0 0; font-size:13px; color:var(--muted); max-width:62ch}
  .related{margin:26px 0 0}
  .related > .subhd{margin-bottom:14px}
  .related .grid{margin-top:0}
  .search{position:relative; display:flex; align-items:center}
  .search::before{content:""; position:absolute; left:13px; top:50%; width:14px; height:14px; transform:translateY(-50%); pointer-events:none; opacity:.55; background:var(--muted); -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain; -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>')}
  .search input{font-family:var(--sans); font-size:13.5px; color:var(--ink); background:var(--surface); border:1px solid var(--hair); border-radius:999px; padding:9px 14px 9px 34px; width:140px; transition:width .18s ease, border-color .15s; -webkit-appearance:none; appearance:none}
  .search input::placeholder{color:var(--faint)}
  .search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); width:220px}
  .search input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
  .search-results{position:absolute; top:calc(100% + 8px); right:0; width:320px; max-width:80vw; background:var(--surface); border:1px solid var(--hair); border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.16); overflow:hidden; z-index:40}
  .search-results a{display:block; padding:10px 14px; text-decoration:none; border-bottom:1px solid var(--hair)}
  .search-results a:last-child{border-bottom:none}
  .search-results a:hover, .search-results a.is-active{background:var(--surface-2)}
  .search-results .s-t{display:block; font-size:14px; color:var(--ink); font-weight:500}
  .search-results .s-k{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-top:2px}
  .search-empty{padding:12px 14px; font-size:13px; color:var(--muted)}
  @media(max-width:720px){ .search input{width:100%} .search{flex:1 1 100%; order:5} .search-results{width:100%} }
  .lit{margin:6px 0 0; padding-left:20px}
  .lit li{margin:9px 0; font-size:14.5px; color:var(--ink); max-width:62ch}
  .refs{margin-top:28px}
  .refs-h{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
  .refs ol{margin:8px 0 0; padding-left:20px}
  .refs li{font-size:12px; color:var(--muted); margin:5px 0; max-width:62ch}
  .impnote{margin-top:26px; font-size:12.5px; color:var(--muted); background:var(--surface-2); border:1px solid var(--hair); border-radius:8px; padding:15px 17px; line-height:1.65}
  .tldr{margin:18px 0 6px; background:var(--surface); border:1px solid var(--accent); border-left:4px solid var(--accent); border-radius:10px; padding:16px 18px; line-height:1.7; font-size:15px}
  .tldr strong{color:var(--accent-ink)}
  .plainbox{margin:10px 0 4px; background:var(--surface-2); border:1px solid var(--hair); border-radius:8px; padding:12px 15px; font-size:14px; line-height:1.65}
  .plainbox b{color:var(--accent-ink)}
  .impnote strong{color:var(--ink)}

  .supplies{background:var(--surface); border:1px solid var(--hair); border-radius:12px; padding:24px; position:sticky; top:88px}
  .supplies h3{font-size:16px; font-family:var(--sans); font-weight:700; letter-spacing:.01em}
  .supply{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--hair)}
  .supply:last-of-type{border-bottom:none}
  .supply .name{font-size:14px; font-weight:500}
  .supply .name span{display:block; font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:2px}
  .vends{display:flex; flex-direction:column; gap:6px; align-items:stretch; flex:none}
  .vsup{display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; text-align:center; text-decoration:none; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--btn-fg); background:linear-gradient(135deg, var(--accent), var(--accent-ink)); border:1px solid transparent; border-radius:8px; padding:10px 16px; box-shadow:0 3px 12px color-mix(in srgb, var(--accent) 40%, transparent); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
  .vsup:hover{transform:translateY(-1px); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 55%, transparent); filter:brightness(1.07)}
  .vsup:active{transform:translateY(0); filter:brightness(.97)}
  .aff-inline{font-size:11.5px; color:var(--faint); margin-top:16px; line-height:1.55}

  .doc{max-width:770px}
  .doc .lead{font-size:16px; color:var(--muted); max-width:64ch}
  .toc{background:var(--surface); border:1px solid var(--hair); border-radius:12px; padding:22px 24px; margin:26px 0 34px}
  .toc .toc-h{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:12px}
  .toc ol{margin:0; padding-left:20px; columns:2; column-gap:34px}
  @media(max-width:600px){ .toc ol{columns:1} }
  .toc li{margin:6px 0; break-inside:avoid}
  .toc a{color:var(--accent-ink); text-decoration:none; font-size:14px; cursor:pointer}
  .toc a:hover{text-decoration:underline}
  .doc h2{font-family:var(--serif); font-weight:500; font-size:26px; letter-spacing:-.01em; margin:42px 0 6px; scroll-margin-top:88px}
  .doc h3{font-family:var(--serif); font-weight:500; font-size:19px; margin:26px 0 6px; scroll-margin-top:88px}
  .doc p{max-width:64ch; margin:10px 0}
  .doc ul, .doc ol.steps{max-width:64ch; padding-left:22px}
  .doc li{margin:7px 0}
  .faq-item{border-top:1px solid var(--hair); padding:22px 0}
  .faq-group > .faq-item:first-of-type{border-top:none}
  .faq-item h3{margin:0 0 8px; scroll-margin-top:88px}
  .faq-item p{margin:8px 0; color:var(--muted)}
  .startlinks{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px}
  .startlinks a{font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink); text-decoration:none; border:1px solid color-mix(in srgb,var(--accent) 40%, transparent); border-radius:8px; padding:10px 15px; cursor:pointer}
  .startlinks a:hover{background:var(--accent-soft)}
  .golink{color:var(--accent-ink); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
  table.dtable{width:100%; border-collapse:collapse; font-size:13.5px; margin:14px 0}
  table.dtable th, table.dtable td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--hair); vertical-align:top}
  table.dtable th{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500}
  table.dtable td:first-child{font-family:var(--mono); font-variant-numeric:tabular-nums}
  .related{margin-top:34px; padding-top:20px; border-top:1px solid var(--hair)}
  .related .toc-h{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
  .related a{display:inline-block; margin:0 18px 8px 0; color:var(--accent-ink); text-decoration:none; font-size:14px; cursor:pointer}
  .related a:hover{text-decoration:underline}
  .post-meta{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:8px 0 18px}
  .blog-card .cat.tag{color:var(--accent-ink)}
  .btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:15px; padding:14px 26px; border-radius:999px; cursor:pointer; text-decoration:none; border:1px solid transparent; transition:background .16s,border-color .16s,transform .16s}
  .btn:hover{transform:translateY(-1px)}
  .btn-primary{background:var(--accent); color:var(--btn-fg); border-color:var(--accent)}
  .btn-primary:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
  .btn-secondary{background:transparent; color:var(--ink); border-color:var(--hair)}
  .btn-secondary:hover{border-color:var(--accent); color:var(--accent-ink)}
  .btn-sm{padding:11px 18px; font-size:13.5px}
  .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
  .newhere{margin-top:16px; font-size:13.5px; color:var(--muted)}
  .trust-line{margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint); text-transform:uppercase; line-height:1.7}
  .paths{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  @media(max-width:720px){ .paths{grid-template-columns:1fr} }
  .path{display:flex; flex-direction:column; gap:8px; text-decoration:none; background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:26px 26px; transition:border-color .15s, transform .15s, box-shadow .15s; cursor:pointer}
  .path:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:0 10px 26px color-mix(in srgb, var(--accent) 18%, transparent)}
  .path-k{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink)}
  .path-t{font-family:var(--serif); font-size:24px; font-weight:600; color:var(--ink); line-height:1.22}
  .vet-note{margin:16px 0 2px}
  .vet-note a{display:block; text-align:center; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:13px; padding:11px 14px; border-radius:10px; line-height:1.35; transition:filter .15s, transform .15s}
  .vet-note a:hover{filter:brightness(1.06); transform:translateY(-1px)}
  .why-wrap{display:grid; grid-template-columns:1.15fr 1fr; gap:44px; align-items:center}
  @media(max-width:820px){ .why-wrap{grid-template-columns:1fr; gap:32px} }
  .why-list{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
  .why-list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; max-width:56ch}
  .why-list .ic{flex:none; width:22px; height:22px; margin-top:1px; color:var(--accent)}
  .why-foot{margin-top:22px; font-size:13.5px; color:var(--muted)}
  .why-visual{background:linear-gradient(160deg, var(--surface), var(--surface-2)); border:1px solid var(--hair); border-radius:16px; padding:28px}
  .wv-top{display:flex; justify-content:space-between; gap:10px; margin-bottom:24px}
  .wv-badge{flex:1; text-align:center; font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
  .wv-badge .ic{display:block; width:20px; height:20px; margin:0 auto 8px; color:var(--accent)}
  .wv-core{text-align:center; border-top:1px solid var(--hair); padding-top:24px}
  .wv-core .shield{width:54px; height:54px; margin:0 auto 12px; color:var(--accent)}
  .wv-core-t{font-family:var(--serif); font-size:20px; font-weight:500}
  .wv-core-s{font-size:13px; color:var(--muted); margin-top:4px}
  .cta-band{background:linear-gradient(135deg,#0C5049,#0A3B36); color:#EAF4F2; border-radius:16px; padding:52px 40px; text-align:center}
  .cta-band h2{color:#fff; font-size:clamp(25px,3.4vw,34px); letter-spacing:-.01em}
  .cta-band p{color:#B7D4CF; max-width:54ch; margin:14px auto 0; font-size:16px}
  .cta-band .cta-row{justify-content:center; margin-top:28px}
  .btn-onband{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
  .btn-onband:hover{background:rgba(255,255,255,.12); border-color:#fff}
  .btn-onband.solid{background:#fff; color:#0A3B36; border-color:#fff}
  .btn-onband.solid:hover{background:#EAF4F2; color:#0A3B36}
  .hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center}
  @media(max-width:820px){ .hero-grid{grid-template-columns:1fr; gap:28px} }
  .hero-art{display:flex; justify-content:center}
  .art-card{width:100%; max-width:340px; background:linear-gradient(160deg,var(--surface),var(--surface-2)); border:1px solid var(--hair); border-radius:20px; padding:22px 22px 14px}
  .art-svg{width:100%; height:auto; display:block; color:var(--ink)}
  .art-svg .vout{fill:none; stroke:currentColor; stroke-width:3; stroke-linejoin:round; stroke-linecap:round}
  .art-svg .liq{fill:var(--accent); opacity:.9}
  .art-svg .fline{stroke:currentColor; stroke-width:2.4; opacity:.5}
  .art-svg .tick{stroke:currentColor; stroke-width:2; opacity:.45; stroke-linecap:round}
  .art-svg .mol{fill:none; stroke:var(--hair); stroke-width:2}
  .art-svg .dot{fill:var(--hair)}
  .art-svg .drop{fill:none; stroke:var(--accent); stroke-width:2.4}
  .art-svg .lbl{fill:var(--faint); font-family:var(--mono); font-size:10px; letter-spacing:.12em}
  .art-svg .lblbig{fill:var(--accent-ink); font-family:var(--mono); font-size:15px; font-weight:500}
  .flow{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:14px}
  @media(max-width:760px){ .flow{grid-template-columns:1fr} .flow-arrow{transform:rotate(90deg); margin:2px auto} }
  .flow-step{background:var(--surface); border:1px solid var(--hair); border-radius:12px; padding:24px 20px; text-align:center}
  .flow-step .ficon{width:42px; height:42px; margin:0 auto 12px; color:var(--accent); display:block}
  .flow-step h3{font-family:var(--serif); font-weight:500; font-size:17px; margin:0 0 6px}
  .flow-step p{font-size:13px; color:var(--muted); margin:0 auto; max-width:28ch}
  .flow-arrow{color:var(--faint); display:flex; justify-content:center}
  .flow-arrow svg{width:24px; height:24px}
  .hero-side{display:flex; flex-direction:column; gap:16px}
  .hero-side .art-card{max-width:none}
  .quick-card{background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:20px}
  .quick-h{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:12px}
  .quick-select{width:100%; font-family:var(--mono); font-size:14px; color:var(--ink); background:var(--ground); border:1px solid var(--hair); border-radius:8px; padding:11px 13px; cursor:pointer}
  .quick-select:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
  .quick-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
  .quick-links a{font-size:12.5px; color:var(--accent-ink); text-decoration:none; border:1px solid var(--hair); border-radius:999px; padding:7px 12px; cursor:pointer}
  .quick-links a:hover{border-color:var(--accent); background:var(--accent-soft)}

  footer{padding:56px 0 40px; background:var(--surface-2); border-top:1px solid var(--hair)}
  .foot-top{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1.7fr; gap:34px}
  @media(max-width:900px){ .foot-top{grid-template-columns:1fr 1fr; gap:32px} }
  @media(max-width:520px){ .foot-top{grid-template-columns:1fr} }
  .foot-brand .mark{font-family:var(--serif); font-size:22px; font-weight:600; letter-spacing:-.01em}
  .foot-brand .mark b{color:var(--accent-ink)}
  .motto{font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink); margin:12px 0 10px}
  .foot-blurb{font-size:12.5px; color:var(--muted); line-height:1.6; max-width:34ch; margin:0}
  .foot-col{display:flex; flex-direction:column; gap:11px}
  .col-h{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:4px}
  .foot-col a{font-size:14px; color:var(--muted); text-decoration:none; cursor:pointer}
  .foot-col a:hover{color:var(--ink)}
  .foot-news p{font-size:12.5px; color:var(--muted); margin:0 0 14px; line-height:1.6; max-width:32ch}
  .news-form{display:flex; gap:8px; flex-wrap:wrap}
  .news-form input{flex:1; min-width:150px; font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--ground); border:1px solid var(--hair); border-radius:8px; padding:11px 13px}
  .news-form input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
  .news-msg{font-size:13px; color:var(--accent-ink); margin-top:12px}
  .foot-disc{margin-top:38px; padding-top:22px; border-top:1px solid var(--hair); font-size:12px; color:var(--muted); line-height:1.7}
  .foot-disc strong{color:var(--ink); font-weight:600}
  .base{border-top:1px solid var(--hair); margin-top:22px; padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
  @media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* quick reference */
.quickref{margin:0; display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:10px; overflow:hidden}
.qr-row{display:grid; grid-template-columns:minmax(150px,34%) 1fr; gap:0; background:var(--surface)}
.qr-row dt{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:11px 14px; background:var(--surface-2); display:flex; align-items:center}
.qr-row dd{margin:0; padding:11px 14px; font-size:14.5px; color:var(--ink); display:flex; align-items:center; gap:9px; flex-wrap:wrap}
@media(max-width:520px){ .qr-row{grid-template-columns:1fr} .qr-row dt{padding-bottom:2px} .qr-row dd{padding-top:4px} }

/* evidence grade */
.gradechip{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; line-height:1}
.gradechip b{display:grid; place-items:center; width:22px; height:22px; border-radius:6px; font-size:12.5px; font-weight:600; color:#fff; background:var(--gc,#5E6668)}
.gradechip .gr-l{font-family:var(--sans); color:var(--muted); letter-spacing:0; text-transform:none; font-size:13px}
.gradechip.gA{--gc:#2E8B6F} .gradechip.gB{--gc:#3F72C4} .gradechip.gC{--gc:#BC6A16} .gradechip.gD{--gc:#9A5561}
.card .gradechip{margin-top:9px}
.gr-link{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); text-decoration:none; border:1px solid var(--hair); border-radius:999px; padding:3px 8px}
.gr-link:hover{border-color:var(--accent); background:var(--accent-soft)}

/* cost table */
.costtable td{white-space:nowrap}
.costtable td:first-child{font-weight:500; white-space:normal}
.costtable td .muted{white-space:nowrap}
.costtable a{color:var(--accent-ink); text-decoration:none; border-bottom:1px solid var(--accent-soft)}
.costtable a:hover{border-bottom-color:var(--accent)}
.verified{display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border-radius:999px; padding:3px 8px; white-space:nowrap}
.untested{font-family:var(--mono); font-size:11px; color:var(--faint); white-space:nowrap}
.vstable th[scope="row"]{text-align:left; font-weight:500; color:var(--muted); font-family:var(--sans); white-space:nowrap}
.vstable td{vertical-align:top}
.vs-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media(max-width:640px){ .vs-grid{grid-template-columns:1fr} }
.vs-h3{font-family:var(--sans); font-size:15px; font-weight:600; margin:18px 0 8px; color:var(--ink)}
.vs-col .vs-h3{margin-top:0}
.fmtpill{display:inline-block; margin-left:8px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--hair); border-radius:999px; padding:2px 8px; vertical-align:middle}
.blog-card h3{margin-top:10px}
.pricenote{font-size:12.5px; color:var(--faint); max-width:62ch; margin:10px 0 0}

/* faq */
.faqlist{border:1px solid var(--hair); border-radius:10px; overflow:hidden}
.faqi{border-bottom:1px solid var(--hair); background:var(--surface)}
.faqi:last-child{border-bottom:0}
.faqi summary{cursor:pointer; padding:13px 16px; font-weight:500; font-size:15px; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center}
.faqi summary::-webkit-details-marker{display:none}
.faqi summary::after{content:"+"; font-family:var(--mono); color:var(--muted); flex:none}
.faqi[open] summary::after{content:"\2013"}
.faqi summary:hover{color:var(--accent-ink)}
.faqi p{margin:0; padding:0 16px 15px; color:var(--muted); font-size:14.5px; max-width:64ch}