/* ChainNovaLabs — design system
   Clinical / premium / navy + silver. No patriotic, no gimmicks.
   ----------------------------------------------------------------------- */

:root{
  --navy:#0B2D5C;
  --navy-dk:#06204A;
  --navy-lt:#1A3870;
  --blue:#1E63C5;
  --blue-soft:#3B82F6;
  --steel:#5C6B82;
  --steel-dk:#3F4A5C;
  --silver:#C8D0DC;
  --silver-lt:#E8ECF2;
  --paper:#F4F6FA;
  --paper-soft:#FAFBFD;
  --white:#FFFFFF;
  --ink:#1C2B45;
  --ink-soft:#3D4D6A;
  --muted:#7A8699;
  --line:#E1E6EE;
  --success:#1B8A5A;
  --warn:#C77A1A;
  --danger:#B8312A;

  --shadow-sm: 0 1px 2px rgba(11,45,92,0.06);
  --shadow:    0 1px 2px rgba(11,45,92,0.05), 0 4px 12px rgba(11,45,92,0.06);
  --shadow-lg: 0 4px 14px rgba(11,45,92,0.08), 0 24px 48px rgba(11,45,92,0.10);
  --shadow-xl: 0 6px 20px rgba(11,45,92,0.10), 0 40px 80px rgba(11,45,92,0.14);

  --r-sm:8px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;

  --max: 1280px;
  --max-narrow: 980px;
  --pad: clamp(20px, 5vw, 56px);

  --t: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper-soft);
  color:var(--ink);
  font: 400 17px/1.65 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.005em;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none;transition:color .18s var(--t)}
a:hover{color:var(--navy)}
hr{border:0;height:1px;background:var(--line);margin:32px 0}

h1,h2,h3,h4,h5,h6{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  color:var(--navy);
  margin:0 0 .5em;
  letter-spacing:-0.02em;
  line-height:1.12;
}
h1{font-weight:700; font-size: clamp(36px, 5.2vw, 64px); letter-spacing:-0.04em; color:#0F172A; line-height:1.08}
h2{font-weight:700; font-size: clamp(26px, 3.2vw, 40px); letter-spacing:-0.03em; color:#0F172A}
h3{font-weight:800; font-size: clamp(22px, 2.2vw, 28px); letter-spacing:-0.018em}
h4{font-weight:700; font-size: 19px}
p{margin:0 0 1em}
.lede{font-size: clamp(18px, 1.6vw, 22px); line-height:1.55; color:#2A3447; font-weight:500}

.eyebrow{
  display:inline-block;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
  background:rgba(30,99,197,.10);
  border:1px solid rgba(30,99,197,.20);
  padding:7px 14px;
  border-radius:999px;
}
.eyebrow.navy{ color:var(--navy); background:rgba(11,45,92,.06); border-color:rgba(11,45,92,.16) }

.container{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.container.narrow{max-width:var(--max-narrow)}
.section{padding: clamp(56px, 8vw, 112px) 0}
.section--tight{padding: clamp(40px, 6vw, 72px) 0}

/* ============ TOP COMPLIANCE BAR ============ */
.topbar{
  background:var(--navy-dk);
  color:#C7D2E0;
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  padding:9px 16px;
  text-align:center;
}
.topbar strong{color:#fff; font-weight:700}

/* ============ HEADER / NAV ============ */
.site-header{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; gap:24px;
  padding:14px 0;
}
.nav .brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.nav .brand-mark{width:38px;height:38px}
.nav .brand-text{font-weight:900; font-size:20px; letter-spacing:-0.02em; line-height:1}
.nav .brand-text .a{color:var(--navy)}
.nav .brand-text .b{color:var(--steel)}
.nav .brand-text .c{color:var(--navy)}
.nav .brand-sub{font-size:9.5px; letter-spacing:.32em; color:var(--steel); font-weight:700; text-transform:uppercase; margin-top:2px}

.nav-spacer{flex:1}

.nav-links{display:flex; gap:6px; align-items:center}
.nav-links a{
  color:var(--ink); font-weight:600; font-size:15px;
  padding:8px 14px; border-radius:10px;
  letter-spacing:-0.005em;
}
.nav-links a:hover{ background:var(--paper); color:var(--navy) }
.nav-links a.active{ background:var(--paper); color:var(--navy) }

.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--navy); color:#fff !important;
  font-weight:700; font-size:14px;
  padding:11px 18px; border-radius:10px;
  letter-spacing:.01em;
  border:1px solid var(--navy);
  transition: transform .15s var(--t), box-shadow .2s var(--t);
}
.nav-cta:hover{ background:var(--navy-lt); transform:translateY(-1px); box-shadow:var(--shadow) }

.nav-burger{
  display:none; background:transparent; border:0;
  width:42px; height:42px; border-radius:10px;
  padding:0; cursor:pointer;
}
.nav-burger:hover{background:var(--paper)}
.nav-burger span{display:block; width:22px; height:2px; background:var(--navy); margin:5px auto; transition: all .2s var(--t)}

@media (max-width: 920px){
  .nav-links, .nav-cta{display:none}
  .nav-burger{display:block}
  .nav-links.open{
    display:flex; flex-direction:column; align-items:stretch;
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding: 12px 20px 20px; gap:4px;
    box-shadow:var(--shadow-lg);
  }
  .nav-links.open a{padding:14px}
  .nav-links.open .nav-cta{display:inline-flex; justify-content:center; margin-top:8px}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:15px; letter-spacing:.01em;
  padding:14px 24px; border-radius:12px;
  border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition: transform .15s var(--t), box-shadow .2s var(--t), background .2s, color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{ background:var(--navy); color:#fff; border-color:var(--navy) }
.btn--primary:hover{ background:var(--navy-lt); color:#fff; box-shadow:var(--shadow-lg) }
.btn--blue{ background:var(--blue); color:#fff; border-color:var(--blue) }
.btn--blue:hover{ background:#1751A8; color:#fff; box-shadow:var(--shadow-lg) }
.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--silver) }
.btn--ghost:hover{ background:var(--paper); color:var(--navy); border-color:var(--steel) }
.btn--light{ background:#fff; color:var(--navy); border-color:var(--line) }
.btn--light:hover{ box-shadow:var(--shadow); border-color:var(--silver) }
.btn--lg{padding:16px 28px; font-size:16px}
.btn--sm{padding:10px 16px; font-size:13px}
.btn--block{display:flex; width:100%}

.btn-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* ============ HERO (full-bleed video background) ============ */
.hero{
  position:relative; overflow:hidden;
  background:#06122A;
  border-bottom:1px solid rgba(255,255,255,.06);
  min-height: clamp(540px, 80vh, 760px);
  display:flex; align-items:center;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  z-index: 0;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* soft left-side wash so headline reads, but not so heavy that the flag disappears */
    linear-gradient(90deg, rgba(6,18,42,.62) 0%, rgba(6,18,42,.42) 30%, rgba(6,18,42,.18) 60%, rgba(6,18,42,.05) 100%),
    /* subtle bottom darkening to anchor the trust stats row */
    linear-gradient(180deg, rgba(6,18,42,.10) 0%, rgba(6,18,42,0) 40%, rgba(6,18,42,.30) 100%);
}
.hero .container{ position:relative; z-index:2; width:100% }
.hero-content{
  max-width: 720px;
  padding: clamp(56px, 8vw, 96px) 0;
  color:#fff;
}
.hero h1{
  color:#fff; margin-top:18px;
  text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.45);
}
.hero .lede{
  margin-top:18px; max-width:580px;
  color: #E6EBF3;
  text-shadow: 0 1px 18px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.55);
}
.hero .btn-row{margin-top:32px}

.eyebrow.eyebrow--on-dark{
  color:#9DC2FF;
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost-on-dark{
  background: rgba(255,255,255,.08);
  color:#fff;
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost-on-dark:hover{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.5);
  color:#fff;
}

.hero-trust{
  display:flex; gap: 28px; flex-wrap:wrap; align-items:center;
  margin-top:40px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,.16);
  color:#B8C4D6; font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.hero-trust b{
  display:block; color:#fff; font-size:22px; letter-spacing:-0.02em;
  text-transform:none; margin-bottom:2px; font-weight:900;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.hero-trust > div{min-width:120px}

@media (max-width: 700px){
  .hero{ min-height: 600px }
  .hero-content{ padding: 56px 0 }
  .hero-overlay{
    background:
      linear-gradient(180deg, rgba(6,18,42,.78) 0%, rgba(6,18,42,.62) 40%, rgba(6,18,42,.85) 100%);
  }
}

/* ============ TRUST STRIP ============ */
.trust-strip{
  background:var(--white);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:36px 0;
}
.trust-row{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:32px;
  align-items:center;
}
.trust-item{
  display:flex; align-items:center; gap:16px;
  font-size:14px; font-weight:500; color:var(--ink-soft);
  line-height:1.45;
}
.trust-ic{width:52px; height:52px; flex:0 0 52px}
.trust-item strong{display:block; color:var(--navy); font-weight:800; font-size:15.5px; letter-spacing:-0.005em; margin-bottom:2px}
@media (max-width: 820px){
  .trust-row{grid-template-columns: repeat(2, 1fr); gap:24px}
}

/* ============ CATEGORY GRID ============ */
.cat-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
}
@media (max-width: 980px){ .cat-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 580px){ .cat-grid{grid-template-columns: 1fr} }

.cat-card{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:30px 28px 26px;
  text-decoration:none;
  color:inherit;
  transition: transform .3s var(--t), border-color .2s, box-shadow .3s var(--t);
}
.cat-card:hover{ transform: translateY(-4px); border-color:var(--silver); box-shadow:var(--shadow-lg) }
.cat-card-ic{margin-bottom:18px}
.cat-card .cat-ic{width:64px; height:64px}
.cat-card h3{ margin:0 0 8px; font-size:20px; letter-spacing:-0.015em}
.cat-card p{margin:0; color:var(--ink-soft); font-size:15px; line-height:1.55}
.cat-card .count{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:22px;
  font-size:13px; font-weight:700; color:var(--blue);
  letter-spacing:.04em;
}
.cat-card .count .arrow{ transition: transform .25s var(--t); display:inline-block }
.cat-card:hover .count .arrow{ transform: translateX(4px) }

/* ============ PRODUCT GRID ============ */
.prod-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:22px;
}
@media (max-width: 1080px){ .prod-grid{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 820px){  .prod-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 480px){  .prod-grid{grid-template-columns: 1fr} }

.prod-card{
  display:flex; flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  text-decoration:none; color:inherit;
  transition: transform .25s var(--t), border-color .2s, box-shadow .25s var(--t);
}
.prod-card:hover{ transform:translateY(-3px); border-color:var(--silver); box-shadow:var(--shadow-lg) }
.prod-card .pic{
  aspect-ratio: 1/1;
  background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.prod-card .pic img{ width:108%; height:auto; transform: scale(1.05); transition: transform .35s var(--t) }
.prod-card:hover .pic img{ transform: scale(1.10) }
.prod-card .body{ padding:18px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto }
.prod-card .body h3{
  margin:0; font-size:18px; font-weight:800; letter-spacing:-0.018em; color:var(--navy);
}
.prod-card .card-cat{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.14em;
  font-weight:700; color:var(--steel);
  padding-top:12px; margin-top:6px;
  border-top:1px solid var(--line);
}
.prod-card .blurb{
  font-size:13.5px; color:var(--ink-soft); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(13.5px * 1.5 * 2);
}
.prod-card .dose-chips{
  display:flex; flex-wrap:wrap; gap:5px;
  margin-top:4px;
}
.prod-card .dose-chip{
  font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--navy);
  background:var(--paper);
  border:1px solid var(--line);
  padding:3px 8px; border-radius:6px;
  white-space:nowrap;
}
.prod-card .price-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
}
.prod-card .price{ font-weight:900; color:var(--navy); font-size:20px; letter-spacing:-0.018em; line-height:1 }
.prod-card .price small{ font-weight:600; color:var(--muted); font-size:12px; letter-spacing:.02em; margin-left:2px }
.prod-card .price--inquire{ font-size:15px; font-weight:800; color:var(--blue); letter-spacing:.01em }
.prod-card .price--inquire small{ color:var(--blue); opacity:.85; font-weight:700; font-size:11px; letter-spacing:.04em }
.prod-card .view{ font-size:13px; font-weight:700; color:var(--blue); letter-spacing:.02em }

/* ============ PILLARS ============ */
.pillar-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:22px;
}
@media (max-width: 1024px){ .pillar-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 520px){ .pillar-grid{grid-template-columns: 1fr} }
.pillar{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 28px 28px; text-align:left;
  transition: transform .3s var(--t), border-color .2s, box-shadow .3s var(--t);
}
.pillar:hover{ transform: translateY(-3px); border-color:var(--silver); box-shadow:var(--shadow-lg) }
.pillar-ic{margin-bottom:18px}
.pillar .trust-ic{width:60px; height:60px}
.pillar h3{font-size:19px; margin-bottom:10px; letter-spacing:-0.015em}
.pillar p{color:var(--ink-soft); font-size:15px; margin:0; line-height:1.6}

/* ============ SHOP PAGE ============ */
.shop-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items:start;
}
@media (max-width: 880px){
  .shop-layout{grid-template-columns: 1fr}
}
.filter-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px; position:sticky; top:96px;
}
.filter-card h4{
  font-size:13px; font-weight:700; color:var(--navy);
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px;
}
.filter-list{ list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:2px }
.filter-list a{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 12px; border-radius:8px; color:var(--ink); font-size:14.5px;
  font-weight:500;
}
.filter-list a:hover{ background:var(--paper) }
.filter-list a.active{ background:var(--navy); color:#fff }
.filter-list a.active span{ color:#fff; opacity:.7 }
.filter-list a span{ color:var(--muted); font-size:12px; font-weight:700 }
.filter-search{
  width:100%; padding:11px 14px; border-radius:10px;
  border:1px solid var(--line); background:var(--paper-soft);
  font: inherit; font-size:14px; color:var(--ink);
  margin-bottom:18px;
}
.filter-search:focus{outline:none; border-color:var(--blue); background:#fff}

.shop-head{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-bottom:24px;
}
.shop-head .count{ color:var(--steel); font-size:14px; font-weight:600 }
.shop-head .filter-toggle{ display:none }
@media (max-width: 880px){
  .filter-card{display:none; position:static}
  .filter-card.open{display:block; margin-bottom:24px}
  .shop-head .filter-toggle{display:inline-flex}
}

/* ============ PDP ============ */
.pdp{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items:start;
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
@media (max-width: 900px){ .pdp{grid-template-columns: 1fr} }

.pdp-gallery{
  background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding: clamp(8px, 1.4vw, 18px);
  position:sticky; top:96px;
}
.pdp-gallery .main{
  aspect-ratio: 1/1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border-radius: var(--r);
}
.pdp-gallery .main img{ width:100%; height:auto; transform: scale(1.04); transition: transform .35s var(--t) }
.pdp-gallery .main:hover img{ transform: scale(1.08) }

/* PREVIEW: horizontal flat-label layout (only used on the one product Joel is reviewing). */
.pdp-gallery--label{ padding: clamp(16px, 2vw, 28px); background:#fff }
.pdp-gallery--label .main{
  aspect-ratio: 8 / 3;
  background:#fff;
}
.pdp-gallery--label .main img{ width:100%; height:auto; transform:none }
.pdp-gallery--label .main:hover img{ transform:none }

.pdp-info .breadcrumb{
  font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--steel);
  margin-bottom:12px;
}
.pdp-info .breadcrumb a{ color:var(--steel) }
.pdp-info .breadcrumb a:hover{ color:var(--navy) }
.pdp-info h1{ font-size: clamp(32px, 4vw, 48px); margin-bottom:8px }
.pdp-info .dose-line{
  display:flex; gap:10px; align-items:center; margin-bottom:18px;
}
.pdp-info .dose-line .pill{
  background:var(--paper); border:1px solid var(--line);
  padding:6px 12px; border-radius:999px;
  font-weight:700; font-size:14px; color:var(--navy); letter-spacing:.02em;
}
.pdp-info .blurb{ color:var(--ink-soft); font-size:17px; line-height:1.6 }
.pdp-price-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px; margin-top:24px;
}
.pdp-price-card .price{
  font-weight:900; font-size: clamp(34px, 4vw, 44px); color:var(--navy);
  letter-spacing:-0.025em; line-height:1;
  display:flex; align-items:baseline; gap:10px;
}
.pdp-price-card .price-per{
  font-size: 13px; font-weight: 600; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase;
}
.pdp-price-card .price-note{ color:var(--muted); font-size:13.5px; margin-top:10px }
.pdp-price-card .btn-row{ margin-top:18px }
.pdp-attr{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:14px;
  margin-top:22px;
}
.pdp-attr .row{
  display:flex; gap:10px; align-items:center;
  font-size:14px; color:var(--ink-soft);
}
.pdp-attr .row .ic{width:18px;height:18px;color:var(--blue); flex:0 0 18px}
.pdp-attr .row b{color:var(--navy); font-weight:700}

.research-banner{
  background: linear-gradient(180deg, #FFF7E8, #FCEFD2);
  border:1px solid #F0D78E;
  border-radius:var(--r);
  padding:14px 18px;
  margin: 22px 0 0;
  font-size:13.5px; color:#6E4E0E; font-weight:600; line-height:1.5;
  display:flex; gap:12px; align-items:flex-start;
}
.research-banner svg{flex:0 0 22px; color:#A77600; margin-top:1px}
.research-banner strong{color:#5C3F03; display:block; margin-bottom:3px; font-weight:800; letter-spacing:.01em}

.dose-switcher{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px }
.dose-switcher a{
  padding:9px 14px; border-radius:10px;
  border:1px solid var(--line); color:var(--ink); font-size:14px; font-weight:700;
  background:#fff;
}
.dose-switcher a:hover{ border-color:var(--silver); color:var(--navy) }
.dose-switcher a.active{ background:var(--navy); color:#fff; border-color:var(--navy) }
.dose-switcher-label{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--steel); margin-top:18px; margin-bottom:6px;
}

/* PDP info-cards section under fold */
.pdp-details{
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--line);
}

/* ===== Quality Documents block ===== */
.quality-docs{
  background: linear-gradient(135deg, #F4F7FC 0%, #EAF0FA 100%);
  border: 1px solid #DAE3F2;
  border-radius: var(--r-lg);
  padding: 28px;
  margin-bottom: 32px;
}
.qd-head{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin-bottom: 20px;
}
.qd-head h3{
  margin:0; font-size:20px; letter-spacing:-0.018em; color:var(--navy);
}
.qd-status{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--blue);
  background: rgba(30,99,197,.10);
  border: 1px solid rgba(30,99,197,.20);
  padding: 6px 12px; border-radius: 999px;
}
.qd-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;
  margin-bottom: 22px;
}
@media (max-width: 600px){ .qd-grid{grid-template-columns: 1fr} }
.qd-row{
  display:flex; flex-direction:column; gap:2px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #E1E8F2;
  border-radius: var(--r-sm);
}
.qd-label{
  font-size: 11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color: var(--steel);
}
.qd-value{
  font-size: 14.5px; font-weight: 600; color: var(--navy); line-height: 1.4;
}
.qd-note{
  margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft);
}

/* ===== Product Specifications table ===== */
.specs{
  background: #fff; border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px;
  margin-bottom: 32px;
}
.specs h3{
  margin: 0 0 18px; font-size:20px; letter-spacing:-0.018em; color:var(--navy);
}
.spec-table{
  width:100%; border-collapse:collapse;
  font-size: 14.5px;
}
.spec-table th, .spec-table td{
  text-align:left; padding: 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec-table th{
  font-size: 12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color: var(--steel); width: 36%; padding-right: 16px;
}
.spec-table td{ color: var(--ink); line-height: 1.55 }
.spec-table tr:last-child th, .spec-table tr:last-child td{ border-bottom: 0 }
@media (max-width: 600px){
  .spec-table th{ width: 42% }
}

/* ===== Detail cards ===== */
.detail-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:22px;
}
@media (max-width: 820px){ .detail-grid{grid-template-columns: 1fr} }
.detail-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px;
  transition: transform .25s var(--t), border-color .2s, box-shadow .25s var(--t);
}
.detail-card:hover{ transform: translateY(-2px); border-color: var(--silver); box-shadow: var(--shadow-lg) }
.detail-card h3{font-size:18px; margin-bottom:10px; letter-spacing:-0.015em}
.detail-card p{margin:0; color:var(--ink-soft); font-size:15px; line-height:1.6}
.detail-card .ic{width:32px;height:32px;color:var(--blue); margin-bottom:14px}

/* ============ ABOUT PAGE: CALLOUT QUOTE ============ */
.callout{
  position:relative;
  background: linear-gradient(135deg, #F4F7FC 0%, #EAF0FA 100%);
  border:1px solid #DAE3F2;
  border-radius: var(--r-xl);
  padding: 40px 48px 36px;
  margin: 0 0 56px;
}
.callout-mark{
  position:absolute;
  top: -8px; left: 36px;
  font-family: Georgia, serif;
  font-size: 120px; line-height:1;
  color: var(--blue); opacity: .22;
  font-weight: 900;
  pointer-events:none;
}
.callout-quote{
  font-size: 22px; line-height:1.5;
  color: var(--navy); font-weight:600;
  letter-spacing:-0.015em;
  margin: 0 0 18px;
  font-style: italic;
}
.callout-attr{
  font-size: 13px; font-weight:700;
  color: var(--steel); letter-spacing:.14em;
  text-transform: uppercase;
}

/* ============ CHECKLIST (About page quality standard) ============ */
.check-list{
  display:flex; flex-direction:column; gap:14px;
  margin: 16px 0 32px;
}
.check-item{
  display:flex; gap:14px; align-items:flex-start;
  padding: 16px 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--r);
}
.check-item .check{
  flex:0 0 28px; width:28px; height:28px;
  background: linear-gradient(135deg, #1E63C5, #0B2D5C);
  color:#fff; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900;
  margin-top:1px;
  box-shadow: 0 4px 10px rgba(30,99,197,.25);
}
.check-item div{font-size:15.5px; line-height:1.6; color:var(--ink-soft)}
.check-item strong{color:var(--navy); font-weight:700}

/* ============ STATS ROW (Lab Testing) ============ */
.stat-row{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:18px;
  padding: 32px 32px;
  background: linear-gradient(135deg, #F4F7FC 0%, #EAF0FA 100%);
  border:1px solid #DAE3F2;
  border-radius: var(--r-xl);
}
.stat{ text-align:center; padding: 8px 0 }
.stat-num{
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-lbl{
  font-size: 12px; font-weight:700;
  color: var(--steel); letter-spacing:.14em;
  text-transform: uppercase;
}
@media (max-width: 720px){
  .stat-row{grid-template-columns: repeat(2, 1fr); gap:24px; padding:28px}
}

/* ============ PROCESS STEPS (Process page) ============ */
.process-steps{
  display:flex; flex-direction:column;
  gap: 0;
}
.step{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  align-items:flex-start;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
}
.step:last-child{border-bottom: 0}
.step-num{
  font-size: 56px; font-weight: 900;
  letter-spacing: -0.04em; line-height: 1;
  color: transparent;
  background: linear-gradient(135deg, #1E63C5, #0B2D5C);
  -webkit-background-clip: text;
  background-clip: text;
}
.step-body h3{
  font-size: clamp(22px, 2.2vw, 26px);
  margin-bottom: 10px;
  letter-spacing: -0.018em;
}
.step-body p{
  font-size: 16.5px; line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 640px){
  .step{grid-template-columns: 1fr; gap:8px; padding: 28px 0}
  .step-num{ font-size: 44px }
}

/* ============ FAQ SECTION LABELS ============ */
.faq-section-label{
  display:flex; align-items:center; gap:12px;
  font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue);
  margin: 40px 0 16px;
}
.faq-section-label::after{
  content:''; flex:1; height:1px; background:var(--line);
}
.faq-section-label:first-of-type{margin-top: 0}

/* ============ FAQ ACCORDION ============ */
.faq-list{display:flex; flex-direction:column; gap:10px}
.faq{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:0;
}
.faq summary{
  list-style:none; cursor:pointer;
  padding:18px 22px;
  font-weight:700; font-size:16px; color:var(--navy);
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; width:10px;height:10px;
  border-right:2px solid var(--navy); border-bottom:2px solid var(--navy);
  transform: rotate(45deg); transition: transform .2s var(--t);
  flex:0 0 10px;
}
.faq[open] summary::after{ transform: rotate(-135deg) }
.faq .body{ padding: 0 22px 20px; color:var(--ink-soft); font-size:15.5px; line-height:1.6 }

/* ============ FOOTER ============ */
.footer{
  background:var(--navy-dk); color:#B8C4D6;
  padding: clamp(48px, 6vw, 80px) 0 0;
  margin-top: clamp(48px, 6vw, 96px);
}
.footer-grid{
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:40px;
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
@media (max-width: 880px){ .footer-grid{grid-template-columns: 1fr 1fr; gap:32px} }
@media (max-width: 480px){ .footer-grid{grid-template-columns: 1fr} }
.footer h5{
  font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; margin-bottom:16px;
}
.footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.footer a{color:#B8C4D6; font-size:14.5px}
.footer a:hover{color:#fff}
.footer-brand .brand-text{ color:#fff; font-size:22px; font-weight:900; letter-spacing:-0.02em }
.footer-brand .brand-text .a, .footer-brand .brand-text .c{color:#fff}
.footer-brand .brand-text .b{color:#8FA3BE}
.footer-brand p{ color:#8FA3BE; font-size:14.5px; line-height:1.6; margin-top:14px; max-width:320px }

.footer-disclaimer{
  padding: 28px 0;
  font-size:12.5px; line-height:1.65; color:#8FA3BE;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 28px;
}
.footer-disclaimer strong{color:#D7E0EC; font-weight:700}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding: 22px 0 30px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:13px; color:#8FA3BE;
}
.footer-bottom .legal-links{display:flex; gap:18px; flex-wrap:wrap}

/* ============ COMPLIANCE / DOC PAGES ============ */
.doc-hero{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 80% -10%, rgba(30,99,197,.10), transparent 60%),
    radial-gradient(ellipse at -10% 120%, rgba(11,45,92,.08), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--paper-soft) 100%);
  border-bottom:1px solid var(--line);
  padding: clamp(64px, 8vw, 112px) 0 clamp(48px, 6vw, 80px);
  overflow:hidden;
}
.doc-hero::before{
  content:'';
  position:absolute; inset:0;
  background: url('/assets/amino-chain-bg.svg') no-repeat center / cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 48%, rgba(0,0,0,.4) 60%, #000 75%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 48%, rgba(0,0,0,.4) 60%, #000 75%, #000 100%);
  pointer-events:none;
  z-index:0;
}
.doc-hero > .container{ position:relative; z-index:1 }
.doc-hero .eyebrow{margin-bottom:18px}
.doc-hero h1{margin-bottom:16px; max-width: 900px}
.doc-hero .lede{max-width:720px; font-size: clamp(18px, 1.7vw, 22px); line-height:1.55}
.hero-anchor-row{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:28px;
}
.anchor-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:700; letter-spacing:.02em;
  color:var(--navy);
  background:rgba(255,255,255,.7);
  border:1px solid rgba(11,45,92,.18);
  padding:9px 16px; border-radius:999px;
  text-decoration:none;
  transition: background .2s, border-color .2s, transform .2s var(--t);
  backdrop-filter: blur(4px);
}
.anchor-pill:hover{
  background:#fff;
  border-color:rgba(11,45,92,.35);
  transform: translateY(-1px);
}
.doc-body{
  max-width:780px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) 0;
  font-size:17px; line-height:1.75; color:var(--ink-soft);
}
.doc-body h2{ font-size: clamp(24px, 2.4vw, 30px); margin: 52px 0 18px; color:var(--navy); letter-spacing:-0.02em }
.doc-body h2:first-of-type{ margin-top: 0 }
.doc-body h3{ font-size:21px; margin: 32px 0 12px; color:var(--navy); letter-spacing:-0.018em }
.doc-body ul, .doc-body ol{ padding-left: 24px; margin: 0 0 22px }
.doc-body li{ margin-bottom: 8px; padding-left: 4px }
.doc-body strong{ color:var(--ink); font-weight:700 }
.doc-body em{ color:var(--ink-soft) }
.doc-body .updated{
  display:inline-block; padding:7px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  color:var(--steel); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom: 24px;
}

/* ============ CTA SECTION ============ */
.cta-band{
  background:
    radial-gradient(ellipse at 80% 50%, rgba(30,99,197,.35), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dk) 100%);
  color:#fff;
  border-radius: var(--r-xl);
  padding: clamp(40px, 5vw, 72px);
  display:grid; grid-template-columns: 1.5fr 1fr; gap:32px; align-items:center;
  overflow:hidden; position:relative;
}
.cta-band h2{color:#fff; margin:0}
.cta-band p{color:#B8C4D6; margin: 12px 0 0; font-size:18px; line-height:1.55}
.cta-band .btn-row{justify-content:flex-end}
.cta-band .btn--ghost{color:#fff; border-color:rgba(255,255,255,.3)}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5)}
.cta-band .btn--light{background:#fff; color:var(--navy)}
@media (max-width: 760px){
  .cta-band{grid-template-columns:1fr; padding:32px; text-align:left}
  .cta-band .btn-row{justify-content:flex-start}
}

/* ============ AGE GATE / RESEARCH MODAL ============ */
.age-gate{
  position:fixed; inset:0; z-index:200;
  background: rgba(6,15,30,.86);
  backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
}
.age-gate-card{
  background:#fff;
  border-radius: var(--r-xl);
  max-width: 540px;
  width: 100%;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-xl);
  position:relative;
}
.age-gate-card .mark{width:56px;height:56px; margin-bottom:18px}
.age-gate-card h2{font-size:26px; margin-bottom:10px}
.age-gate-card p{font-size:16px; line-height:1.6; color:var(--ink-soft)}
.age-gate-card .agree-list{
  background:var(--paper-soft); border:1px solid var(--line);
  border-radius: var(--r); padding: 18px 20px; margin: 16px 0 22px;
}
.age-gate-card .agree-list label{
  display:flex; align-items:flex-start; gap:12px;
  padding: 8px 0; font-size:14.5px; line-height:1.5; color:var(--ink);
}
.age-gate-card input[type=checkbox]{
  width:18px;height:18px; margin-top:2px; accent-color: var(--navy);
}
.age-gate-card .btn-row{margin-top:6px}

/* ============ UTILITY ============ */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center}
@media (max-width: 760px){ .grid-2{grid-template-columns:1fr} }

.text-center{text-align:center}
.section-head{ max-width: 760px; margin: 0 auto 56px; text-align:center }
.section-head .eyebrow{margin-bottom:16px}
.section-head h2{margin-bottom:16px}
.section-head .lede{font-size:18px; color:var(--ink-soft); line-height:1.55}

.divider-dot{
  display:flex; align-items:center; gap:14px;
  color:var(--steel); font-weight:700; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase;
}
.divider-dot::before, .divider-dot::after{
  content:''; flex:1; height:1px; background:var(--line);
}

.spinner{
  width:22px; height:22px; border-radius:50%;
  border:2.5px solid rgba(11,45,92,.18);
  border-top-color: var(--navy);
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg) } }

/* ============ ANIMATIONS ============ */
.fade-in{ opacity:0; transform: translateY(12px); animation: fadeIn .6s var(--t) forwards }
@keyframes fadeIn{ to{ opacity:1; transform:none } }
.fade-in.d1{animation-delay:.06s}
.fade-in.d2{animation-delay:.12s}
.fade-in.d3{animation-delay:.18s}
.fade-in.d4{animation-delay:.24s}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* ============ MOBILE-ONLY POLISH ============
   Desktop is locked. These rules only kick in on tablet/phone widths.
   Goal: comfortable rhythm, cleaner stacking, premium feel at 375px. */

/* --- Tablet down (≤768px) --- */
@media (max-width: 768px){
  /* Tighten section padding everywhere */
  .section{ padding: 56px 0 }
  .section--tight{ padding: 40px 0 }
  .section-head{ margin-bottom: 28px; text-align:left }
  .section-head h2{ font-size: 28px }
  .section-head .lede{ font-size: 16px }

  /* Container side padding stays comfortable */
  .container{ padding-left: 20px; padding-right: 20px }
}

/* --- Phone (≤640px) — the big mobile polish pass --- */
@media (max-width: 640px){

  /* ===== TYPOGRAPHY ===== */
  h1{ font-size: 32px; line-height: 1.1; letter-spacing: -0.03em }
  h2{ font-size: 24px; line-height: 1.15; letter-spacing: -0.02em }
  h3{ font-size: 19px }
  .lede{ font-size: 16px; line-height: 1.55 }
  .eyebrow{ font-size: 10.5px; padding: 6px 12px }

  /* ===== HEADER / NAV ===== */
  .nav{ padding: 10px 0; gap: 12px }
  .nav .brand-mark{ width:34px; height:34px }
  .nav .brand-text{ font-size: 17px }
  .nav .brand-sub{ font-size: 8.5px; letter-spacing: .28em }
  .topbar{ font-size: 11px; padding: 8px 14px; line-height: 1.45 }

  /* ===== BUTTONS ===== */
  .btn{ padding: 12px 20px; font-size: 14.5px }
  .btn--lg{ padding: 14px 22px; font-size: 15px }
  .btn-row{ gap: 10px }

  /* ===== HOMEPAGE HERO (dark video bg) =====
     Keep some breathing room above + below so the flag/vial video shows
     around the text. Buttons stay side-by-side, sized to content. */
  .hero{ min-height: 560px; padding: 0 }
  .hero-content{ padding: 40px 0 40px; max-width: 100% }
  .hero h1{ font-size: 30px; line-height: 1.08; margin-top: 14px }
  .hero .lede{ font-size: 15px; line-height: 1.5; margin-top: 14px; max-width: 100% }
  .hero .btn-row{
    margin-top: 22px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: auto;
  }
  .hero .btn-row .btn{
    width: auto;
    padding: 10px 16px;
    font-size: 13.5px;
  }
  .hero .btn-row .btn--lg{ padding: 11px 18px; font-size: 14px }
  .hero-trust{
    margin-top: 26px; padding-top: 18px;
    gap: 14px 20px;
    font-size: 10.5px;
  }
  .hero-trust > div{ min-width: 0; flex: 1 1 44% }
  .hero-trust b{ font-size: 16px; margin-bottom: 1px }

  /* ===== DOC HERO (Process/About/FAQ etc.) ===== */
  .doc-hero{ padding: 48px 0 44px }
  .doc-hero::before{
    -webkit-mask-image: none; mask-image: none;
    opacity: 0.30;
  }
  .doc-hero .eyebrow{ margin-bottom: 14px }
  .doc-hero h1{ font-size: 32px; line-height: 1.1; margin-bottom: 14px }
  .doc-hero .lede{ font-size: 16px; line-height: 1.55; max-width: 100% }

  /* Anchor pills under process hero */
  .hero-anchor-row{ gap: 8px; margin-top: 22px }
  .anchor-pill{ font-size: 12px; padding: 7px 12px }

  /* ===== TRUST STRIP (homepage 4-icon row) ===== */
  .trust-strip{ padding: 28px 0 }
  .trust-row{ grid-template-columns: 1fr; gap: 14px }
  .trust-item{ font-size: 14px; gap: 14px }
  .trust-ic{ width: 44px; height: 44px; flex-basis: 44px }
  .trust-item strong{ font-size: 15px }

  /* ===== CATEGORY GRID (homepage 9 categories) ===== */
  .cat-card{ padding: 24px 22px 22px }
  .cat-card h3{ font-size: 18px }
  .cat-card p{ font-size: 14px }
  .cat-card .cat-ic{ width: 52px; height: 52px }

  /* ===== STAT ROW (4 numbers) ===== */
  .stat-row{ grid-template-columns: 1fr 1fr; gap: 18px 14px; padding: 22px 18px }
  .stat-num{ font-size: 28px }
  .stat-lbl{ font-size: 11px; letter-spacing: .12em }

  /* ===== PROCESS STEPS ===== */
  .step{ padding: 22px 0; gap: 4px }
  .step-num{ font-size: 38px; line-height: 1; margin-bottom: 4px }
  .step-body h3{ font-size: 19px; margin-bottom: 8px }
  .step-body p{ font-size: 15px; line-height: 1.6 }

  /* ===== PILLAR GRID ===== */
  .pillar{ padding: 24px 22px }
  .pillar h3{ font-size: 18px }
  .pillar p{ font-size: 14.5px; line-height: 1.55 }
  .pillar-ic{ margin-bottom: 14px }

  /* ===== CALLOUT QUOTE ===== */
  .callout{ padding: 30px 24px 26px; margin-bottom: 36px }
  .callout-mark{ font-size: 88px; top: -4px; left: 18px }
  .callout-quote{ font-size: 18px; line-height: 1.5 }
  .callout-attr{ font-size: 12px; letter-spacing: .12em }

  /* ===== DOC BODY PROSE ===== */
  .doc-body h2{ font-size: 22px; margin-top: 32px }
  .doc-body h3{ font-size: 18px; margin-top: 24px }
  .doc-body p{ font-size: 15.5px; line-height: 1.7 }

  /* ===== PRODUCT CARD (mobile, 2-up grid) =====
     Override the default 1-col-at-480px rule so users can scan 2 cards
     per row on phones — faster scrolling, looks more like a real catalog. */
  .prod-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px }
  .prod-card .body{ padding: 12px 12px 12px; gap: 6px }
  .prod-card .body h3{ font-size: 15.5px; letter-spacing: -0.015em }
  .prod-card .blurb{ font-size: 12px; line-height: 1.45; -webkit-line-clamp: 2; min-height: calc(12px * 1.45 * 2) }
  .prod-card .dose-chips{ gap: 4px; margin-top: 2px }
  .prod-card .dose-chip{ font-size: 10px; padding: 2px 6px }
  .prod-card .price{ font-size: 16px }
  .prod-card .price small{ font-size: 11px }
  .prod-card .price--inquire{ font-size: 12.5px }
  .prod-card .view{ display: none }
  .prod-card .price-row{ padding-top: 10px; justify-content: flex-start }
  .prod-card .card-cat{ font-size: 9px; padding-top: 8px; margin-top: 4px; letter-spacing: .12em }
  /* Disable the picture zoom on mobile — looks weird without a hover state */
  .prod-card .pic img{ width: 100%; transform: none }

  /* ===== SHOP / CATALOG ===== */
  .shop-head{ flex-wrap: wrap; gap: 12px; margin-bottom: 20px }
  .shop-head .count{ font-size: 13.5px }
  .filter-card{ padding: 22px 18px; border-radius: 14px }
  .filter-search{ font-size: 14.5px }

  /* ===== PDP (product detail page) ===== */
  .pdp{ padding-top: 24px; padding-bottom: 24px; gap: 24px }
  .pdp-gallery{ position: static; padding: 8px; border-radius: 14px }
  .pdp-info h1{ font-size: 30px; line-height: 1.1 }
  .pdp-info .blurb{ font-size: 15.5px; line-height: 1.6 }
  .pdp-price-card{ padding: 20px; margin-top: 20px }
  .pdp-price-card .price{ font-size: 30px }
  .pdp-price-card .btn-row{ flex-direction: column; align-items: stretch; gap: 10px }
  .pdp-price-card .btn{ width: 100%; justify-content: center }
  .pdp-attr{ grid-template-columns: 1fr; gap: 10px }
  .research-banner{ font-size: 13px; padding: 12px 14px }
  .dose-switcher a{ padding: 8px 12px; font-size: 13.5px }
  .quality-docs, .specs, .detail-card{ padding: 22px 20px }
  .qd-head h3, .specs h3{ font-size: 17px }
  .qd-value{ font-size: 14px }
  .spec-table{ font-size: 13.5px }
  .spec-table th, .spec-table td{ padding: 10px 0 }

  /* ===== CTA BAND ===== */
  .cta-band{ padding: 28px 22px; border-radius: 16px }
  .cta-band h2{ font-size: 24px }
  .cta-band p{ font-size: 15.5px }
  .cta-band .btn-row{ flex-direction: column; align-items: stretch; gap: 10px; width: 100% }
  .cta-band .btn--lg{ width: 100%; justify-content: center }

  /* ===== FAQ ===== */
  .faq summary{ font-size: 15px; padding: 16px 18px }
  .faq .body{ font-size: 14.5px; padding: 0 18px 18px }
  .faq-section-label{ font-size: 12px; margin: 32px 0 14px }

  /* ===== CHECKLIST (About page) ===== */
  .check-item{ padding: 14px 16px; gap: 12px }
  .check-item div{ font-size: 14.5px; line-height: 1.55 }

  /* ===== FOOTER ===== */
  .footer{ padding-top: 44px }
  .footer-grid{ gap: 32px; padding-bottom: 32px }
  .footer-brand p{ font-size: 13.5px }
  .footer h5{ margin-bottom: 12px }
  .footer a{ font-size: 14px }
  .footer-disclaimer{ font-size: 12px; padding: 22px 0; margin-top: 20px }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 0 26px; font-size: 12.5px }
}

/* --- Tiny phones (≤380px) — final squeeze --- */
@media (max-width: 380px){
  h1{ font-size: 28px }
  .doc-hero h1, .hero h1{ font-size: 28px }
  .container{ padding-left: 16px; padding-right: 16px }
  .hero-trust > div{ flex-basis: 100% }
  .stat-row{ grid-template-columns: 1fr }
}