/* ============================================================
   MiraChlor-W™ — reconstructed stylesheet
   Dark pharmaceutical theme · droplet motif
   Type: Space Grotesk (display) · Inter (text) · IBM Plex Mono (labels)
   ============================================================ */

:root{
  /* palette */
  --navy:#081420;          /* base background */
  --navy-2:#0c1c2c;        /* raised surface */
  --ink:#e9f1f6;           /* primary text */
  --slate:#8295a4;         /* muted text */
  --ice:#bfe0f0;           /* cool emphasis */
  --halo:#46c4e8;          /* OTC accent — hypochlorous cyan */
  --gold:#f4ce1b;          /* Rx accent */
  --ember:#f2683c;         /* primary CTA / warm accent */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  /* type */
  --serif:'Space Grotesk',system-ui,sans-serif;  /* display */
  --sans:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1100px 600px at 80% -8%,rgba(70,196,232,.10),transparent 60%),
    radial-gradient(900px 500px at -5% 10%,rgba(242,104,60,.07),transparent 55%),
    var(--navy);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.drop{width:18px;height:18px;display:inline-block;vertical-align:middle}

/* ---------- top utility bar ---------- */
.topbar{
  font-family:var(--mono);
  font-size:11.5px;letter-spacing:.04em;
  background:#050d16;
  border-bottom:1px solid var(--line);
  color:var(--slate);
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;height:38px}
.topbar .seg{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar a{transition:color .2s}
.topbar a:hover{color:var(--ink)}
.kclear{color:var(--halo);text-transform:uppercase}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(8,20,32,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{
  font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.brand .drop{width:22px;height:22px}
.brand b{font-weight:700}
.brand sup{font-size:.5em;color:var(--slate);font-weight:500}
/* image logo lockup (LETUS shield + MiraChlor wordmark) */
.brand.brand--img{gap:0}
.brand--img img{height:38px;width:auto;display:block}
@media(max-width:620px){.brand--img img{height:32px}}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:14.5px;color:var(--slate);font-weight:500;transition:color .2s}
.nav a:hover{color:var(--ink)}
.navcta{
  color:var(--ink)!important;border:1px solid var(--line-2);
  padding:9px 16px;border-radius:999px;font-size:13.5px;
  transition:border-color .2s,background .2s;
}
.navcta:hover{border-color:var(--ember);background:rgba(242,104,60,.08)}
.navbuy{
  color:#1a0a04!important;background:var(--ember);border-color:var(--ember);
  font-weight:600;
}
.navbuy:hover{background:#ff7b4f;border-color:#ff7b4f}
.menubtn{
  display:none;background:none;border:1px solid var(--line-2);color:var(--ink);
  width:42px;height:42px;border-radius:10px;font-size:18px;cursor:pointer;
}

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);
}
.eyebrow .idx{color:var(--ember);font-weight:500}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-weight:600;font-size:15px;
  padding:13px 24px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;transition:transform .15s,background .2s,border-color .2s,color .2s;
}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}
.btn--ember{background:var(--ember);color:#1a0a04}
.btn--ember:hover{background:#ff7b4f;transform:translateY(-1px)}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ice);background:rgba(255,255,255,.04)}

/* ---------- hero ---------- */
.hero{position:relative;padding:88px 0 76px;overflow:hidden}
.hero .dropmark,.dropmark{
  position:absolute;right:-120px;top:-80px;
  width:560px;height:640px;opacity:.06;pointer-events:none;
  transform:rotate(8deg);
}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(38px,5.4vw,66px);line-height:1.03;letter-spacing:-.02em;
  margin:22px 0 0;text-wrap:balance;
}
.hero h1 em,h1 em,h2 em{font-style:normal;color:var(--halo)}
.lede{font-size:clamp(17px,1.4vw,20px);color:#c4d2dc;line-height:1.6;max-width:60ch;margin:22px 0 0}
.lede em{font-style:normal;color:var(--ice)}
.cta-row{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.badge{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;
  color:var(--slate);background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:8px;padding:8px 12px;
}
.badge b{color:var(--ice);font-weight:600}

.hero-art{position:relative}
.hero-art img,.phero-art img{
  width:100%;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(160deg,#0e2233,#0a1622);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.hero-art .tag,.phero-art .tag{
  position:absolute;left:18px;bottom:18px;
  font-family:var(--mono);font-size:12px;color:var(--ink);
  background:rgba(5,13,22,.82);border:1px solid var(--line-2);
  border-radius:10px;padding:10px 14px;backdrop-filter:blur(8px);
}
.hero-art .tag b,.phero-art .tag b{display:block;color:var(--halo);font-size:13px;margin-bottom:2px}

/* ---------- slogan band (brand tagline) ---------- */
.slogan-band{
  position:relative;overflow:hidden;text-align:center;
  border-block:1px solid var(--line);
  background:radial-gradient(820px 380px at 50% 130%,rgba(70,196,232,.12),transparent 70%),rgba(255,255,255,.015);
  padding:90px 0 80px;
}
.slogan-drop{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  width:540px;height:620px;fill:var(--halo);opacity:.05;pointer-events:none;
}
.slogan-band .eyebrow{justify-content:center}

/* HOCl molecule field */
.mol-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.mol{position:absolute;opacity:.16;height:auto;aspect-ratio:22/17;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.mol.mbig{width:640px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-6deg);opacity:.09}
.mol.m1{width:220px;top:6%;left:4%;transform:rotate(-12deg);opacity:.20}
.mol.m2{width:140px;top:58%;left:13%;transform:rotate(20deg);opacity:.13}
.mol.m3{width:180px;top:14%;right:7%;transform:rotate(8deg);opacity:.17}
.mol.m4{width:120px;top:64%;right:14%;transform:rotate(-24deg);opacity:.12}
.mol.m5{width:96px;top:4%;left:46%;transform:rotate(28deg);opacity:.10}
.mol.m6{width:120px;bottom:6%;left:43%;transform:rotate(-8deg);opacity:.11}
@media (prefers-reduced-motion:no-preference){
  .mol{animation:molFloat 14s ease-in-out infinite}
  .mol.m2{animation-duration:18s;animation-delay:-3s}
  .mol.m3{animation-duration:16s;animation-delay:-6s}
  .mol.m4{animation-duration:20s;animation-delay:-2s}
  .mol.m5{animation-duration:13s;animation-delay:-8s}
  .mol.m6{animation-duration:17s;animation-delay:-5s}
}
@keyframes molFloat{
  0%,100%{transform:translateY(0) var(--molrot,rotate(0deg))}
  50%{transform:translateY(-14px) var(--molrot,rotate(0deg))}
}
.mol.m1{--molrot:rotate(-12deg)}
.mol.m2{--molrot:rotate(20deg)}
.mol.m3{--molrot:rotate(8deg)}
.mol.m4{--molrot:rotate(-24deg)}
.mol.m5{--molrot:rotate(28deg)}
.mol.m6{--molrot:rotate(-8deg)}
.mol.mbig{--molrot:translate(-50%,-50%) rotate(-6deg)}
@media (max-width:720px){.mol.m2,.mol.m4,.mol.m5{display:none}}
.slogan{
  font-family:var(--serif);font-weight:700;letter-spacing:-.03em;line-height:.98;
  font-size:clamp(42px,8.5vw,108px);margin:22px 0 0;text-wrap:balance;position:relative;
}
.slogan em{font-style:normal;color:var(--halo)}
.formula{display:inline-flex;align-items:center;justify-content:center;gap:16px;
  font-family:var(--mono);font-size:15px;color:var(--slate);flex-wrap:wrap;margin-top:34px}
.formula b{color:var(--halo);font-size:17px}
.formula .plus{color:var(--ember);font-size:19px}

/* ---------- post-market reporting block ---------- */
.report{
  border:1px solid var(--line-2);border-radius:18px;padding:32px 34px;margin-bottom:44px;
  background:linear-gradient(120deg,rgba(242,104,60,.06),rgba(255,255,255,.012));
}
.report-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.report-head .drop{width:20px;height:20px;fill:var(--ember)}
.report-head h5{margin:0;line-height:1;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ice)}
.foot .report>p{margin:0;max-width:none;font-size:14.5px;color:#c4d2dc;line-height:1.6}
.report-rows{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 44px;margin:22px 0}
.report-rows>div{display:flex;flex-direction:column;gap:5px}
.report-rows .rk{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.report-rows a,.report-rows .rv{font-size:16px;color:var(--ink);font-family:var(--serif);font-weight:500;transition:color .2s}
.report-rows a:hover{color:var(--halo)}
.report .medwatch{font-size:13px;color:var(--slate);margin-top:4px;max-width:78ch;line-height:1.6}
.report .medwatch a{color:var(--ice);text-decoration:underline;text-underline-offset:2px}
.report .medwatch a:hover{color:var(--halo)}

/* ---------- sections ---------- */
.section{padding:96px 0}
.section--tight{padding:72px 0}

/* purity heading forced to a single line (viewport-scaled so it never clips) */
#purity .head{white-space:nowrap;font-size:clamp(16px,2.7vw,34px)}
@media(max-width:720px){#purity .head{white-space:normal;font-size:clamp(26px,5.2vw,34px)}}

/* full-width banded sections (tint + top/bottom hairlines) */
.band{background:rgba(255,255,255,.012);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* blended state — sections melt into the page background */
html.no-bands .band{background:transparent;border-top-color:transparent;border-bottom-color:transparent}
html.no-bands .slogan-band{background:none;border-block-color:transparent}
/* motion off */
html.no-reveal .reveal{opacity:1!important;transform:none!important}
.s-head{max-width:820px}
.head{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.02em;
  margin:18px 0 0;text-wrap:balance;
}
.s-head .lede{margin-top:20px}

/* ---------- feature grid ---------- */
.feature-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.feature{padding:30px 26px;border-right:1px solid var(--line)}
.feature:last-child{border-right:none}
.feature .rn{font-family:var(--mono);font-size:13px;color:var(--ember);margin-bottom:14px}
.feature h4{font-family:var(--serif);font-weight:600;font-size:18px;margin:0 0 10px}
.feature p{font-size:14.5px;color:var(--slate);margin:0;line-height:1.55}

/* ---------- purity comparison ---------- */
.purity{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.spec{border-radius:18px;padding:30px;border:1px solid var(--line)}
.spec .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.spec h4{font-family:var(--serif);font-weight:600;font-size:21px;margin:0 0 18px}
.spec.bad{background:rgba(242,104,60,.04);border-color:rgba(242,104,60,.22)}
.spec.bad .lbl{color:var(--ember)}
.spec.good{background:rgba(70,196,232,.05);border-color:rgba(70,196,232,.28)}
.spec.good .lbl{color:var(--halo)}
.species{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.chip{
  font-family:var(--mono);font-size:12.5px;padding:7px 12px;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ice);
}
.chip.x{color:var(--slate);text-decoration:line-through;text-decoration-color:rgba(242,104,60,.6)}
.chip.only{background:rgba(70,196,232,.12);border-color:var(--halo);color:#dff4fb;font-weight:500}
.spec .note{font-size:13.5px;color:var(--slate);margin:0;line-height:1.55}

.patent-card{
  margin-top:22px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:16px;padding:24px 28px;
  background:linear-gradient(120deg,rgba(244,206,27,.05),rgba(255,255,255,.01));
}
.patent-card .pno{
  font-family:var(--mono);font-weight:500;font-size:15px;color:var(--gold);
  border:1px dashed rgba(244,206,27,.5);padding:10px 16px;border-radius:10px;white-space:nowrap;
}
.patent-card p{margin:0;font-size:15px;color:#c4d2dc;flex:1;min-width:260px}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.stat{border-top:2px solid var(--line-2);padding-top:18px}
.stat .n{font-family:var(--serif);font-weight:700;font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:-.02em}
.stat .n.halo{color:var(--halo)}
.stat .n.ember{color:var(--ember)}
.stat .k{font-size:13.5px;color:var(--slate);margin-top:10px;line-height:1.5}

/* ---------- tests ---------- */
.tests{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.test{border:1px solid var(--line);border-radius:14px;padding:24px}
.test .iso{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--slate);text-transform:uppercase}
.test h4{font-family:var(--serif);font-weight:600;font-size:18px;margin:12px 0 12px}
.test .res{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--halo);
  background:rgba(70,196,232,.1);border:1px solid rgba(70,196,232,.3);border-radius:7px;padding:5px 10px;margin-bottom:12px}
.test p{font-size:13.5px;color:var(--slate);margin:0;line-height:1.55}
.lab-note,.disclaim{font-size:12.5px;color:var(--slate);margin-top:26px;max-width:840px;line-height:1.6;font-family:var(--mono)}
.disclaim{font-family:var(--sans);font-style:italic;opacity:.85}

/* ---------- clinical meta ---------- */
.clin-meta,.split.clin{display:grid;grid-template-columns:repeat(3,auto);gap:48px;margin-top:36px}
.clin-meta .m .n{font-family:var(--serif);font-weight:700;font-size:34px;color:var(--ice);line-height:1}
.clin-meta .m .k{font-size:13px;color:var(--slate);margin-top:8px;max-width:30ch}

/* ---------- clinical cases ---------- */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px}
.case{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.015);display:flex;flex-direction:column;
  transition:border-color .25s,transform .25s;
}
.case:hover{border-color:var(--line-2);transform:translateY(-2px)}
.case--wide{grid-column:span 2}
.case figure{margin:0;aspect-ratio:16/9;overflow:hidden;background:#0a1622}
.case--wide figure{aspect-ratio:21/9}
.case figure img{width:100%;height:100%;object-fit:cover}
.case .ph{
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:11.5px;color:var(--slate);
  padding:12px 20px;border-bottom:1px solid var(--line);background:#070f18;
}
.case .ph b{color:var(--halo)}
.case .ph--3{display:grid;grid-template-columns:repeat(3,1fr)}
.case .ph--3 span{text-align:center}
.case .ph--3 span:first-child{color:#46c4e8;font-weight:700}
.case .ph span:first-child{color:#46c4e8;font-weight:700}
.cbody{padding:22px 24px 24px}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ctag{
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;padding:5px 10px;border-radius:6px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--slate);
}
.ctag.gold{color:var(--gold);border-color:rgba(244,206,27,.35);background:rgba(244,206,27,.06)}
.ctag.halo{color:var(--halo);border-color:rgba(70,196,232,.35);background:rgba(70,196,232,.06)}
.cbody h4{font-family:var(--serif);font-weight:600;font-size:19px;margin:0 0 10px;line-height:1.25}
.cbody p{font-size:14.5px;color:#b9c7d1;margin:0;line-height:1.55}
.site{font-family:var(--mono);font-size:12px;color:var(--slate);margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

/* ---------- products ---------- */
.products{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.prod{border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.prod--otc{background:linear-gradient(160deg,rgba(70,196,232,.06),transparent 60%)}
.prod--rx{background:linear-gradient(160deg,rgba(244,206,27,.06),transparent 60%)}
.pimg{aspect-ratio:4/5;background:linear-gradient(160deg,#0e2233,#0a1622);overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover}
.pbody{padding:28px 30px 32px}
.ribbon{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.prod--otc .ribbon{color:var(--halo)}
.prod--rx .ribbon{color:var(--gold)}
.prod h3{font-family:var(--serif);font-weight:700;font-size:26px;margin:0 0 6px}
.prod .for{font-size:14px;color:var(--slate);margin-bottom:18px}
.prod ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.prod li{font-size:14.5px;color:#c4d2dc;padding-left:22px;position:relative;line-height:1.45}
.prod li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--ember)}
.prod--otc li::before{background:var(--halo)}
.prod--rx li::before{background:var(--gold)}
.more{padding-left:0!important;border:none}

/* ---------- timeline ---------- */
.timeline{margin-top:46px;border-left:1px solid var(--line-2);padding-left:0}
.tl{display:grid;grid-template-columns:170px 1fr;gap:30px;padding:26px 0 26px 30px;
  border-bottom:1px solid var(--line);position:relative}
.tl:last-child{border-bottom:none}
.tl::before{content:"";position:absolute;left:-5px;top:34px;width:9px;height:9px;border-radius:50%;
  background:var(--ember);box-shadow:0 0 0 4px var(--navy)}
.tl .yr{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--ice);display:flex;flex-direction:column}
.tl .yr span{font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--slate);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.tl h4{font-family:var(--serif);font-weight:600;font-size:18px;margin:0 0 8px}
.tl p{font-size:14.5px;color:var(--slate);margin:0;line-height:1.55}

/* ---------- split / indications / deflist (sub pages) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.indications{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.indications li{font-size:16px;color:#c4d2dc;padding-left:26px;position:relative}
.indications li::before{content:"✓";position:absolute;left:0;top:0;color:var(--halo);font-weight:700}
.deflist{border-top:1px solid var(--line)}
.deflist .row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.deflist .k{font-family:var(--mono);font-size:13px;color:var(--slate);text-transform:uppercase;letter-spacing:.04em}
.deflist .v{font-size:15.5px;color:#d4e0e8}
.callout{
  border-left:3px solid var(--ember);border-radius:0 12px 12px 0;
  background:rgba(255,255,255,.025);padding:20px 24px;font-size:14.5px;color:#c4d2dc;line-height:1.6;
}
.callout b{color:var(--ink)}

/* ---------- product hero (sub pages) ---------- */
.phero{position:relative;padding:72px 0 60px;overflow:hidden}
.phero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.phero h1{font-family:var(--serif);font-weight:700;font-size:clamp(34px,4.6vw,58px);line-height:1.04;letter-spacing:-.02em;margin:22px 0 0;text-wrap:balance}
.pill{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);
}
.pill.rx{color:var(--gold);border-color:rgba(244,206,27,.4);background:rgba(244,206,27,.06)}
.pill.otc{color:var(--halo);border-color:rgba(70,196,232,.4);background:rgba(70,196,232,.06)}

/* ---------- CTA ---------- */
.cta{
  text-align:center;border:1px solid var(--line-2);border-radius:24px;
  padding:60px 40px;
  background:radial-gradient(700px 300px at 50% -20%,rgba(70,196,232,.12),transparent 70%),var(--navy-2);
}
.cta h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3.4vw,42px);line-height:1.1;letter-spacing:-.02em;margin:0;text-wrap:balance}
.cta .lede{margin-left:auto;margin-right:auto}
.cta .eyebrow{justify-content:center}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:#050d16;padding:64px 0 40px;margin-top:0}
.foot .grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot p{font-size:14px;color:var(--slate);margin:16px 0 0;max-width:38ch;line-height:1.6}
.foot h5{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ice);margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot li a{font-size:14px;color:var(--slate);transition:color .2s}
.foot li a:hover{color:var(--ink)}
.legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--slate);letter-spacing:.03em}

/* ---------- reveal animation ----------
   Hidden state is gated behind html.js so content is ALWAYS visible
   if JS fails or the observer never fires. */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
html.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .nav{display:none}
  .menubtn{display:block}
  .hero .grid,.phero .grid,.split{grid-template-columns:1fr;gap:40px}
  .feature-grid,.tests,.stats{grid-template-columns:repeat(2,1fr)}
  .feature{border-bottom:1px solid var(--line)}
  .feature:nth-child(2n){border-right:none}
  .purity,.products{grid-template-columns:1fr}
  .foot .grid{grid-template-columns:1fr 1fr}
  .clin-meta{grid-template-columns:1fr;gap:24px}
}
@media(max-width:620px){
  .wrap{padding:0 20px}
  .topbar .seg:first-child .kclear{display:none}
  .cases{grid-template-columns:1fr}
  .case--wide{grid-column:span 1}
  .feature-grid,.tests,.stats{grid-template-columns:1fr}
  .feature{border-right:none}
  .tl{grid-template-columns:1fr;gap:8px}
  .deflist .row{grid-template-columns:1fr;gap:4px}
  .foot .grid{grid-template-columns:1fr}
  .legal{flex-direction:column;gap:8px}
}

/* ============================================================
   Contact Form 7 — dark-theme styling (Rx "Request a sample")
   Scoped to .mc-cf7 so it only affects the embedded form.
   ============================================================ */
.mc-cf7 .wpcf7-form p{margin:0 0 14px}
.mc-cf7 label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.mc-cf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.mc-cf7 textarea,
.mc-cf7 select{
  width:100%;margin-top:8px;font-family:var(--sans);font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:12px;
  padding:13px 15px;outline:none;transition:border-color .2s,box-shadow .2s;
}
.mc-cf7 input:focus,.mc-cf7 textarea:focus,.mc-cf7 select:focus{border-color:var(--halo);box-shadow:0 0 0 3px rgba(70,196,232,.15)}
.mc-cf7 textarea{min-height:120px;resize:vertical}
.mc-cf7 .wpcf7-submit{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:15px;
  background:var(--ember);color:#1a0a04;border:1px solid var(--ember);
  padding:13px 26px;border-radius:999px;margin-top:6px;transition:background .2s,transform .15s;
}
.mc-cf7 .wpcf7-submit:hover{background:#ff7b4f;transform:translateY(-1px)}
.mc-cf7 .wpcf7-response-output{border-radius:10px;font-family:var(--sans);font-size:14px;margin:14px 0 0}
.mc-cf7 ::placeholder{color:var(--slate);opacity:.7}