:root{
    --paper:#F3F6F5;      /* assay paper */
    --white:#FFFFFF;
    --ink:#12343B;        /* deep blue-green */
    --ink-soft:#4A6469;
    --rule:#D3DDDB;
    --reagent:#A3245A;    /* the purple-red of a developed test line */
    --water:#2D6F9E;
    --milk:#C0657F;
    --fill:#FFE36E;       /* placeholder highlight */
    --font:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,sans-serif;
    --wrap:1160px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.55}
  a{color:inherit}
  img,svg{display:block;max-width:100%}
  :focus-visible{outline:3px solid var(--reagent);outline-offset:3px;border-radius:4px}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

  /* placeholder marker */
  mark.fill{background:var(--fill);color:var(--ink);padding:0 .25em;border-radius:3px}

  /* ---------- header ---------- */
  .site-header{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:10}
  .site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:22px;letter-spacing:-.01em}
  .logo-mark{width:30px;height:30px}
  .logo .wm{font-weight:800}
  .logo span{color:var(--reagent)}
  .nav{display:flex;align-items:center;gap:28px}
  .nav a{text-decoration:none;font-weight:500;font-size:16px}
  .nav a:hover{color:var(--reagent)}
  .btn{display:inline-block;text-decoration:none;font-weight:700;font-size:16px;padding:13px 22px;border-radius:999px;border:2px solid var(--ink);transition:background .15s,color .15s}
  .btn-solid{background:var(--ink);color:var(--white)}
  .btn-solid:hover{background:var(--reagent);border-color:var(--reagent)}
  .btn-line{background:transparent;color:var(--ink)}
  .btn-line:hover{background:var(--ink);color:var(--white)}
  .nav .btn{padding:9px 18px;color:var(--white)}
  .nav .btn:hover{color:var(--white)}
  .menu-toggle{display:none}

  /* ---------- hero ---------- */
  .hero{padding:72px 0 88px}
  .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
  .hero h1{font-size:clamp(44px,6.4vw,82px);line-height:1.0;letter-spacing:-.03em;font-weight:800;margin:0 0 26px;max-width:11ch}
  .hero p{font-size:21px;color:var(--ink-soft);max-width:34em;margin:0 0 34px}
  .hero-actions{display:flex;flex-wrap:wrap;gap:14px}
  .hero .hero-note{margin:28px 0 0;font-size:15px;color:var(--ink-soft)}

  /* hero photos */
  .hero-photos{position:relative;padding:0 0 60px 40px}

  /* ---------- sections ---------- */
  section.block{padding:88px 0;border-top:1px solid var(--rule)}
  .block h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1;letter-spacing:-.02em;font-weight:800;margin:0 0 14px;max-width:20ch}
  .block .lede{font-size:19px;color:var(--ink-soft);margin:0 0 48px;max-width:38em}

  /* product categories as strips */
  .strips{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
  .strip{display:grid;grid-template-columns:96px 1fr auto;gap:32px;align-items:center;padding:34px 0;border-bottom:1px solid var(--rule)}
  .strip-icon{width:96px;height:56px}
  .strip h3{font-size:26px;margin:0 0 6px;letter-spacing:-.01em}
  .strip p{margin:0;color:var(--ink-soft);max-width:40em}
  .strip .meta{margin-top:10px;font-size:15px}
  .strip a.go{white-space:nowrap;font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
  .strip a.go:hover{color:var(--reagent)}

  /* how to read */
  .read-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .steps{list-style:none;counter-reset:s;margin:0;padding:0}
  .steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:18px;padding:0 0 30px}
  .steps li::before{content:counter(s);width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:800;font-size:20px}
  .steps h3{margin:8px 0 4px;font-size:21px}
  .steps p{margin:0;color:var(--ink-soft)}
  .results{background:var(--white);border:1px solid var(--rule);border-radius:14px;padding:32px}
  .results h3{margin:0 0 22px;font-size:21px}
  .result-row{display:grid;grid-template-columns:70px 1fr;gap:20px;align-items:center;padding:14px 0;border-top:1px solid var(--rule)}
  .result-row:first-of-type{border-top:0}
  .result-row strong{display:block;font-size:18px}
  .result-row span{color:var(--ink-soft);font-size:16px}
  .window{width:70px;height:40px}
  .fineprint{font-size:14px;color:var(--ink-soft);margin:22px 0 0;line-height:1.5}

  /* wholesale */
  .wholesale{background:var(--ink);color:var(--white);border-top:0}
  .wholesale .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}
  .wholesale .lede{color:#B9CBCD;margin-bottom:32px}
  .who{list-style:none;margin:0;padding:0}
  .who li{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:19px}
  .who li:first-child{border-top:1px solid rgba(255,255,255,.18)}
  .wholesale .btn-solid{background:var(--white);color:var(--ink);border-color:var(--white)}
  .wholesale .btn-solid:hover{background:var(--reagent);border-color:var(--reagent);color:var(--white)}

  /* blog */
  .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
  .post{border-top:2px solid var(--ink);padding-top:18px}
  .post .kind{font-size:15px;color:var(--reagent);font-weight:700;margin:0 0 8px}
  .post h3{font-size:22px;line-height:1.25;margin:0 0 10px}
  .post h3 a{text-decoration:none}
  .post h3 a:hover{color:var(--reagent)}
  .post p{margin:0;color:var(--ink-soft);font-size:16px}
  .more{margin-top:40px}

  /* footer */
  .site-footer{border-top:1px solid var(--rule);padding:56px 0 40px;font-size:15px;color:var(--ink-soft)}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
  .site-footer h4{color:var(--ink);font-size:16px;margin:0 0 12px}
  .site-footer ul{list-style:none;margin:0;padding:0}
  .site-footer li{margin:0 0 8px}
  .site-footer a{text-decoration:none}
  .site-footer a:hover{color:var(--reagent)}
  .legal{margin-top:44px;padding-top:20px;border-top:1px solid var(--rule);font-size:14px}


  /* hero photo fallback while images are missing */
  .hero-photos .ph{border-radius:18px;background:#DCE6E4;overflow:hidden}
  .hero-photos .ph img{width:100%;height:100%;object-fit:cover;border-radius:0}
  .ph-main{aspect-ratio:5/6}
  .ph-small{position:absolute;left:0;bottom:0;width:44%;aspect-ratio:1;border:8px solid var(--paper)}

  /* why snapcheckdx */
  .why{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
  .why div{border-top:2px solid var(--ink);padding-top:20px}
  .why h3{font-size:21px;margin:0 0 8px}
  .why p{margin:0;color:var(--ink-soft);font-size:17px}

  /* breadcrumbs + page head */
  .crumbs{font-size:15px;color:var(--ink-soft);margin:0 0 22px}
  .crumbs a{text-decoration:none}
  .crumbs a:hover{color:var(--reagent)}
  .page-head{padding:56px 0 48px}
  .page-head h1{font-size:clamp(40px,5vw,64px);line-height:1.03;letter-spacing:-.03em;font-weight:800;margin:0 0 18px;max-width:16ch}
  .page-head p{font-size:20px;color:var(--ink-soft);margin:0;max-width:38em}

  /* product list on category page */
  .products{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
  .product{background:var(--white);border:1px solid var(--rule);border-radius:16px;display:grid;grid-template-columns:180px 1fr;overflow:hidden}
  .product-fig{background:#EAF0EF;display:grid;place-items:center;padding:20px}
  .product-fig svg{width:86px;height:auto;transform:rotate(-8deg)}
  .product-body{padding:28px}
  .product h2{font-size:26px;margin:0 0 8px;letter-spacing:-.01em}
  .product p{margin:0 0 16px;color:var(--ink-soft);font-size:17px}
  .product .actions{display:flex;flex-wrap:wrap;gap:10px}
  .product .btn{padding:10px 18px;font-size:15px}
  .product.soon{background:transparent;border:2px dashed var(--rule);grid-template-columns:1fr}
  .product.soon .product-body{padding:32px}

  /* compact facts list */
  .facts{margin:0 0 18px;padding:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:16px}
  .facts dt{color:var(--ink-soft)}
  .facts dd{margin:0;font-weight:500}

  /* product detail */
  .pdp{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;padding:56px 0 88px}
  .pdp-fig{background:var(--white);border:1px solid var(--rule);border-radius:20px;display:grid;place-items:center;padding:48px 20px;position:sticky;top:100px}
  .pdp-fig .dipcard{width:min(220px,50vw);height:auto;transform:rotate(-8deg);filter:drop-shadow(0 24px 30px rgba(18,52,59,.16))}
  .pdp h1{font-size:clamp(38px,4.6vw,58px);line-height:1.04;letter-spacing:-.03em;font-weight:800;margin:0 0 16px}
  .pdp .intro{font-size:20px;color:var(--ink-soft);margin:0 0 32px;max-width:32em}
  .pdp .facts{font-size:18px;gap:12px 24px;padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:28px}
  .pdp .hero-actions{margin-bottom:12px}
  .small-note{font-size:15px;color:var(--ink-soft);margin:0}

  /* developing lines (product illustration only) */
  .line-c,.line-t{opacity:0;animation:develop 1.6s ease-out forwards}
  .line-c{animation-delay:.5s}
  .line-t{animation-delay:1.4s}
  @keyframes develop{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion:reduce){.line-c,.line-t{animation:none;opacity:1}}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .nav{display:none}
    .menu-toggle{display:block}
    .menu-toggle summary{list-style:none;cursor:pointer;font-weight:700;padding:8px 14px;border:2px solid var(--ink);border-radius:999px}
    .menu-toggle summary::-webkit-details-marker{display:none}
    .menu-toggle[open] .mobile-nav{display:flex}
    .mobile-nav{display:none;position:absolute;left:0;right:0;top:72px;background:var(--paper);border-bottom:1px solid var(--rule);flex-direction:column;padding:12px 28px 20px}
    .mobile-nav a{padding:12px 0;text-decoration:none;font-weight:500;border-bottom:1px solid var(--rule)}
    .hero{padding:48px 0 64px}
    .hero .wrap,.read-grid,.wholesale .wrap{grid-template-columns:1fr;gap:44px}
    .hero-photos{padding:0 0 40px 24px}
    .strip{grid-template-columns:64px 1fr;gap:20px}
    .strip-icon{width:64px}
    .strip .go-wrap{grid-column:2}
    .posts,.why{grid-template-columns:1fr;gap:32px}
    .why{grid-template-columns:1fr 1fr}
    .products{grid-template-columns:1fr}
    .pdp{grid-template-columns:1fr;gap:36px;padding:32px 0 64px}
    .pdp-fig{position:static;padding:28px 20px}
    .pdp-fig .dipcard{width:130px}
    .foot-grid{grid-template-columns:1fr 1fr}
    section.block{padding:64px 0}
  }

  @media (max-width:560px){
    .why{grid-template-columns:1fr}
    .product{grid-template-columns:1fr}
    .product-fig{padding:24px}
  }

  .mini-card{width:86px;height:auto}
  .site-footer .logo{color:var(--ink)}
  #drug-products{padding-top:56px}
  .steps .sub{margin:10px 0;padding-left:20px;color:var(--ink-soft)}
  .steps .sub li{margin:0 0 8px;display:list-item;counter-increment:none;padding:0}
  .steps .sub li::before{content:none}
  .steps .sub strong{color:var(--ink);font-weight:700}
  .steps p+p{margin-top:8px}
  .results-intro{margin:-10px 0 14px}
  .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
  .faq{border-top:2px solid var(--ink)}
  .faq details{border-bottom:1px solid var(--rule)}
  .faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:700;font-size:19px;position:relative}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:26px;font-weight:500;color:var(--reagent)}
  .faq details[open] summary::after{content:"–"}
  .faq details p{margin:0 0 22px;color:var(--ink-soft);max-width:40em}
  @media (max-width:900px){.faq-grid{grid-template-columns:1fr;gap:24px}}
  .mail-note{margin:16px 0 0;font-size:15px;color:#B9CBCD}
  /* photo variants */
  .product-fig.photo{padding:0;background:#fff}
  .product-fig.photo img{width:100%;height:100%;object-fit:contain;padding:12px}
  .pdp-fig.photo{padding:0;overflow:hidden}
  .pdp-fig.photo img{width:100%;height:auto}
  /* color chart */
  .chart{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 0 8px}
  .chart .sw{display:block;height:34px;border-radius:4px;border:1px solid var(--rule)}
  .chart-labels{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-soft);margin:0 0 14px}
  /* feature row */
  .feature{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
  .feature img{width:100%;height:auto;border-radius:16px;border:1px solid var(--rule)}
  /* notes list */
  .notes{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
  .notes li{padding:18px 0;border-bottom:1px solid var(--rule);color:var(--ink-soft)}
  .notes strong{color:var(--ink)}
  @media (max-width:900px){.feature{grid-template-columns:1fr;gap:28px}}
  /* water */
  .strips-fig{width:min(220px,50vw);height:auto;transform:rotate(-6deg);filter:drop-shadow(0 24px 30px rgba(18,52,59,.14))}
  .param-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
  .param-grid>div{border-top:2px solid var(--ink);padding-top:18px}
  .param-grid h3{margin:0 0 12px;font-size:21px}
  .plist{list-style:none;margin:0 0 14px;padding:0;columns:2;column-gap:20px}
  .plist li{padding:4px 0;break-inside:avoid}
  .tips{margin:0;padding-left:20px;color:var(--ink-soft);font-size:16px}
  .tips li{margin:0 0 10px}
  .sub-h{margin:26px 0 10px !important}
  .mini{margin:0;padding-left:20px;color:var(--ink-soft);font-size:16px}
  .mini li{margin:0 0 8px}
  .table-h{font-size:22px;margin:48px 0 6px}
  .table-wrap{overflow-x:auto;margin:14px 0 0;border:1px solid var(--rule);border-radius:12px;background:var(--white)}
  table.ref{width:100%;border-collapse:collapse;font-size:16px;min-width:720px}
  table.ref th,table.ref td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--rule)}
  table.ref thead th{font-size:14px;color:var(--ink-soft);font-weight:700;background:#F8FAFA}
  table.ref tbody th{font-weight:700;white-space:nowrap}
  table.ref tbody tr:last-child>*{border-bottom:0}
  table.ref td{color:var(--ink-soft)}
  table.ref td:nth-child(2){color:var(--ink);font-weight:500;white-space:nowrap}
  .table-note{margin-top:12px}
  .hardness{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:16px;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--white)}
  .hardness div{padding:18px;border-right:1px solid var(--rule)}
  .hardness div:last-child{border-right:0}
  .hardness strong{display:block;font-size:18px}
  .hardness span{color:var(--ink-soft);font-size:16px}
  .feature img.tall{aspect-ratio:4/5;object-fit:cover;max-height:560px}
  @media (max-width:900px){.param-grid{grid-template-columns:1fr;gap:28px}.hardness{grid-template-columns:1fr 1fr}.hardness div:nth-child(2){border-right:0}.hardness div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
  .product-fig.photo.cover img{object-fit:cover;padding:0}
  .feature .lede{margin-bottom:20px}
  .prose>*{max-width:760px}
  .prose h2{font-size:24px;margin:36px 0 10px}
  .prose h2:first-child{margin-top:0}
  .prose p{color:var(--ink-soft);margin:0 0 12px}