/* ═══════════════════════════════════════════════════════════════
   ATLAS LABS — design system

   Type rework: Instrument Sans carries the interface, Archivo is
   reserved for the hero, section heads, product names and prices,
   IBM Plex Mono is demoted to labels and analytical data only.
   Body copy is up to 16px on a lighter grey, headings are ~20%
   smaller, and section padding is down by a third — so a scroll
   covers more ground and the page reads faster.
   ═══════════════════════════════════════════════════════════════ */

/* ── fonts, served from the theme ─────────────────────────────────
   Archivo and Instrument Sans are variable: one file each covers every
   weight the design uses. Latin subset; licences are in assets/fonts. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 900;font-display:swap;
  src:url(../fonts/archivo.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/instrument-sans.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/ibm-plex-mono-500.woff2) format('woff2')}

:root{
  --void:#07090B;
  --deep:#0A0D10;
  --panel:#0E1217;
  --panel2:#131920;
  --panel3:#18202A;
  --line:#171E26;
  --line2:#232E38;
  --line3:#33424E;

  --cyan:#6FD9F7;
  --cyan-hot:#8FE6FF;
  --cyan-deep:#2E9BC4;
  --cyan-sink:#1B6A8A;
  --glow:rgba(111,217,247,.13);
  --glow-hot:rgba(111,217,247,.32);

  --cream:#F4F1E8;
  --paper:#E4EAEF;
  --body:#AEBCC6;      /* lifted from v1's #8494A0 — body copy now passes AA */
  --muted:#8C9AA6;
  --dim:#68767F;
  --faint:#47535D;

  --amber:#E7B25C;
  --green:#4FCB92;
  --red:#E4685B;

  --display:'Archivo',system-ui,sans-serif;
  --sans:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --hair:1px solid var(--line);
  --r:4px;
  --rail:1200px;
  --sec:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--void);color:var(--body);font-family:var(--sans);font-size:16px;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
body.atlas-locked{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--rail);margin:0 auto;padding:0 26px}
.mono{font-family:var(--mono)}

#atlas-field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.8}
.atlas-shell{position:relative;z-index:1}

/* ── labels ───────────────────────────────────────────────────── */
.tag-line{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--dim);
  text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
.tag-line .hex{width:12px;height:14px;flex-shrink:0}
.tag-line .hex path{stroke:var(--cyan);stroke-width:2.4;fill:none}

.pilltag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--paper);
  background:rgba(11,15,19,.86);border:1px solid var(--line2);border-radius:100px;
  padding:8px 14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap}
.pilltag:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);flex-shrink:0}
.pilltag.q{color:var(--dim)}
.pilltag.q:before{background:var(--dim);box-shadow:none}
.codestamp{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--faint);
  text-transform:uppercase}

/* ── buttons ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:13px 22px;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--cyan);background:var(--cyan);color:#04161E;
  transition:box-shadow .2s,background .15s,transform .1s}
.btn:hover{background:var(--cyan-hot);border-color:var(--cyan-hot);box-shadow:0 0 24px var(--glow-hot)}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.btn.ghost{background:rgba(11,15,19,.6);color:var(--cream);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(11,15,19,.9);
  box-shadow:0 0 18px rgba(111,217,247,.12)}
.btn.sm{padding:9px 15px;font-size:13px}
.btn.lg{padding:16px 30px;font-size:15px}
.btn.block{width:100%}
.btn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}
.mini{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12.5px;
  font-weight:500;padding:7px 12px;border-radius:3px;cursor:pointer;
  border:1px solid var(--line2);background:transparent;color:var(--paper);
  transition:border-color .15s,color .15s;white-space:nowrap}
.mini:hover{border-color:var(--cyan);color:var(--cyan)}
.mini.on{border-color:var(--green);color:var(--green)}
.mini svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9}

/* ── header ───────────────────────────────────────────────────────
   Brand, a hairline, the links, then search / cart / account. The
   links are plain anchors with a soft hover and an underline on the
   current page. Below 1080px the links move into the slide-in panel. */
.skip{position:absolute;left:12px;top:-60px;z-index:600;background:var(--cyan);color:#04161E;
  font-weight:700;font-size:14px;padding:10px 16px;border-radius:6px;transition:top .15s}
.skip:focus{top:12px}

.site-head{position:sticky;top:0;z-index:70;background:rgba(7,9,11,.84);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-bottom:var(--hair)}
.head-bar{display:flex;align-items:center;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand .mark{width:28px;height:32px;flex-shrink:0}
.brand .mark path{stroke:var(--cyan);stroke-width:2.4;fill:none}
.brand b{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.13em;
  color:var(--cream);display:block;line-height:1;white-space:nowrap}
.brand b span{color:var(--cyan)}
.brand i{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.27em;
  color:var(--dim);display:block;margin-top:6px;white-space:nowrap}

.site-nav{display:flex;align-items:center;gap:2px;margin-left:8px;padding-left:18px;
  border-left:1px solid var(--line2);min-width:0}
.site-nav a{position:relative;font-family:var(--sans);font-size:14px;font-weight:500;line-height:1;
  color:var(--muted);padding:12px 12px;border-radius:8px;white-space:nowrap;
  transition:color .16s,background .16s}
.site-nav a:hover{color:var(--cream);background:rgba(255,255,255,.05)}
.site-nav a.on{color:var(--cyan)}
.site-nav a.on:after{content:'';position:absolute;left:12px;right:12px;bottom:4px;height:2px;
  border-radius:2px;background:var(--cyan);box-shadow:0 0 10px rgba(111,217,247,.55)}

.head-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.hbtn{width:40px;height:40px;border-radius:10px;border:1px solid transparent;background:transparent;
  color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color .16s,background .16s,border-color .16s}
.hbtn:hover{color:var(--cream);background:rgba(255,255,255,.05);border-color:var(--line2)}
.hbtn svg{width:19px;height:19px}

.cartbtn{position:relative;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 13px 0 12px;
  border:1px solid var(--line2);border-radius:10px;background:rgba(13,17,22,.72);color:var(--cream);
  font-family:var(--sans);font-size:14px;font-weight:600;line-height:1;white-space:nowrap;
  transition:border-color .16s,color .16s,box-shadow .16s}
.cartbtn:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 18px rgba(111,217,247,.14)}
.cartbtn svg{width:19px;height:19px;flex-shrink:0}
.cartbtn.has{border-color:rgba(111,217,247,.45)}

.qbadge{display:inline-block;min-width:20px;height:20px;line-height:20px;padding:0 6px;
  border-radius:100px;background:var(--cyan);color:#04161E;font-family:var(--sans);font-size:11.5px;
  font-weight:700;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:0}
.qbadge[hidden]{display:none}
.qbadge.dark{background:#04161E;color:var(--cyan)}

.burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line2);
  background:rgba(13,17,22,.72);color:var(--cream);align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .16s,color .16s}
.burger:hover{border-color:var(--cyan);color:var(--cyan)}
.burger svg{width:20px;height:20px}

.acct-chip{font-family:var(--sans);font-size:12.5px;padding:7px 12px;border:1px solid var(--line2);
  color:var(--muted);border-radius:100px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.acct-chip:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--faint)}
.acct-chip.ok{border-color:rgba(79,203,146,.4);color:var(--green)}
.acct-chip.ok:before{background:var(--green);box-shadow:0 0 8px var(--green)}

/* messages from WooCommerce, shown under the header on any page */
.atlas-notices{padding-top:18px}
.atlas-notices>*:last-child{margin-bottom:0}


/* Signed-in admins: WordPress pins its black toolbar over the top of
   the page (32px, 46px on tablets, scrolling away on phones). The pinned
   header and the slide-out panels sit below it instead of under it. */
.admin-bar .site-head{top:32px}
.admin-bar .drawer,.admin-bar .navpanel{top:32px}
@media screen and (max-width:782px){
  .admin-bar .site-head,.admin-bar .drawer,.admin-bar .navpanel{top:46px}
}
@media screen and (max-width:600px){
  .admin-bar .site-head{top:0}
  .admin-bar .drawer,.admin-bar .navpanel{top:0;z-index:100000}
  .admin-bar .drawer-scrim,.admin-bar .navscrim{z-index:99999}
}

/* the faint name behind each vial: long names a size down */
.specimen .stagebox .sword.gw-l,.bs-word.gw-l,.pframe .pword.gw-l{transform:translate(-50%,-50%) scale(.8)}
.specimen .stagebox .sword.gw-xl,.bs-word.gw-xl,.pframe .pword.gw-xl{transform:translate(-50%,-50%) scale(.64)}

/* home: made in the USA */
.usa-why{list-style:none;margin:22px 0 0;padding:18px 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 22px;
  border:1px solid var(--line2);border-radius:12px;background:var(--deep)}
.usa-why li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--body)}
.usa-why li b{display:block;color:var(--cream);font-weight:700;font-size:14.5px}
.usa-why svg{flex:0 0 18px;width:18px;height:18px;margin-top:2px;stroke:var(--cyan);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.usa-cards .stat{letter-spacing:-.02em}
@media(max-width:1020px){.usa-why{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.usa-why{grid-template-columns:1fr;padding:16px 18px}}
/* ── HERO ─────────────────────────────────────────────────────── */
.hero{position:relative;padding:70px 0 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:36px;align-items:center;
  min-height:min(660px,78vh)}
.hero .tag-line{margin-bottom:28px}
.display{font-family:var(--display);font-weight:900;letter-spacing:-.038em;line-height:.84;
  text-transform:uppercase}
.display .l1{display:block;color:var(--cream);font-size:clamp(58px,10.4vw,150px)}
.display .l2{display:block;font-size:clamp(58px,10.4vw,150px);
  background:linear-gradient(100deg,var(--cyan-hot) 0%,var(--cyan) 26%,var(--cyan-deep) 62%,var(--cyan-sink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-sub{color:var(--body);font-size:17px;line-height:1.62;max-width:46ch;margin-top:28px}
.hero-cta{display:flex;gap:11px;margin-top:30px;flex-wrap:wrap}
.hero-foot{margin-top:28px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);display:flex;gap:12px;flex-wrap:wrap;
  align-items:center;padding-bottom:56px}
.hero-foot span:not(:last-child):after{content:'·';margin-left:12px;color:var(--line3)}

.orb{position:relative;height:560px;display:flex;align-items:center;justify-content:center}
.orb-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;
  max-width:500px;aspect-ratio:1;pointer-events:none}
.orb-ring svg{width:100%;height:100%;overflow:visible}
.orb-ring .hexline{fill:none;stroke:var(--line2);stroke-width:1}
.orb-ring .hexline.lit{stroke:rgba(111,217,247,.28)}
.orb-ring .spin{transform-origin:50% 50%;animation:orbspin 62s linear infinite}
@keyframes orbspin{to{transform:rotate(360deg)}}
.orb-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:540px;height:540px;
  background:radial-gradient(circle,rgba(111,217,247,.11),transparent 62%);pointer-events:none}
.orb-vial{position:absolute;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.orb-vial.lead{z-index:4}
.orb-vial.lead img{height:370px;filter:drop-shadow(0 30px 58px rgba(0,0,0,.9)) drop-shadow(0 0 46px rgba(111,217,247,.2))}
.orb-vial.mid{z-index:3;left:6%;top:24%}
.orb-vial.mid img{height:188px;opacity:.6;filter:blur(1.4px) drop-shadow(0 16px 30px rgba(0,0,0,.8))}
.orb-vial.far{z-index:2;right:4%;bottom:16%}
.orb-vial.far img{height:138px;opacity:.32;filter:blur(3.2px) drop-shadow(0 10px 20px rgba(0,0,0,.8))}
.orb-node{position:absolute;z-index:5}
.orb-node .hexdot{width:14px;height:16px}
.orb-node .hexdot path{stroke:var(--cyan);stroke-width:2.2;fill:rgba(7,9,11,.9)}
.orb-tag{position:absolute;z-index:6}
.n1{top:14%;right:22%}.n2{bottom:30%;left:14%}
.t1{top:18%;left:-6%}.t2{bottom:34%;right:-8%}.t3{bottom:8%;left:24%}
.c1{position:absolute;bottom:26%;left:6%;z-index:5}
.c2{position:absolute;top:24%;right:8%;z-index:5}
.scrollcue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--faint);
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px}
.scrollcue:after{content:'';width:1px;height:30px;background:linear-gradient(var(--line3),transparent);
  animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3}50%{opacity:1}}

/* ── sections ─────────────────────────────────────────────────── */
.sec{padding:var(--sec) 0;position:relative;border-top:var(--hair)}
.sec.flush{border-top:none}
.sec-head{margin-bottom:34px;display:flex;justify-content:space-between;align-items:flex-end;
  gap:26px;flex-wrap:wrap}
.sec-head h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.2vw,38px);
  line-height:1.06;letter-spacing:-.024em;color:var(--cream);max-width:22ch;margin-top:14px}
.sec-head .sub{color:var(--body);font-size:15px;max-width:62ch;margin-top:12px;line-height:1.62}
.sec-link{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--cyan);
  border-bottom:1px solid rgba(111,217,247,.3);padding-bottom:2px;white-space:nowrap}
.sec-link:hover{border-bottom-color:var(--cyan)}

/* ── BACKDROP WORDMARK — oversized type behind the vials ──────── */
.stage{position:relative;isolation:isolate}
.stage-word{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;
  font-size:clamp(90px,17vw,260px);line-height:.8;white-space:nowrap;pointer-events:none;
  z-index:0;color:transparent;-webkit-text-stroke:1px rgba(111,217,247,.09)}
.stage-word.solid{-webkit-text-stroke:0;color:rgba(244,241,232,.055)}
.stage>*:not(.stage-word){position:relative;z-index:1}

/* ── BEST SELLERS ─────────────────────────────────────────────── */
.bestsellers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bs{background:linear-gradient(180deg,rgba(19,25,32,.9),rgba(10,13,16,.9));
  border:1px solid var(--line2);border-radius:8px;padding:22px;position:relative;
  display:flex;flex-direction:column;transition:border-color .25s,transform .25s}
.bs:hover{border-color:rgba(111,217,247,.34);transform:translateY(-3px)}
.bs-rank{position:absolute;top:16px;left:18px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;color:var(--cyan-deep);z-index:2}
.bs-tag{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--sans);font-size:10.5px;
  font-weight:600;padding:4px 9px;border-radius:100px;background:rgba(111,217,247,.13);
  color:var(--cyan);border:1px solid rgba(111,217,247,.28)}
.bs-tag.hot{background:rgba(231,178,92,.12);color:var(--amber);border-color:rgba(231,178,92,.3)}
.bs-stage{height:190px;display:flex;align-items:center;justify-content:center;position:relative;
  margin:14px 0 4px;overflow:hidden}
.bs-word{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:900;font-size:58px;letter-spacing:-.05em;
  color:rgba(244,241,232,.055);text-transform:uppercase;white-space:nowrap;line-height:1;
  pointer-events:none}
.bs-stage img{height:170px;position:relative;z-index:1;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.8));transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.bs:hover .bs-stage img{transform:translateY(-7px) scale(1.04)}
.bs h3{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.015em;
  color:var(--cream);line-height:1.15}
.bs .cls{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cyan-deep);margin-top:6px;display:block}
.bs p{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.55}
.bs-meta{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
.bs-meta span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.bs-meta b{color:var(--cyan);font-weight:400}
.bs-foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;
  justify-content:space-between;gap:10px}
.bs-price{font-family:var(--display);font-weight:800;font-size:21px;color:var(--cream)}
.bs-price small{font-family:var(--sans);font-size:11px;font-weight:400;color:var(--faint);
  display:block;margin-top:2px}

/* ── specimen card ────────────────────────────────────────────── */
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:var(--hair);border-radius:6px;overflow:hidden}
.spec-grid.three{grid-template-columns:repeat(3,1fr)}
.specimen{background:var(--deep);position:relative;display:flex;flex-direction:column;
  transition:background .28s}
.specimen:hover{background:var(--panel)}
.specimen .idx{position:absolute;top:14px;left:16px;font-family:var(--mono);font-size:9px;
  letter-spacing:.16em;color:var(--faint);z-index:2}
.specimen .badge{position:absolute;top:12px;right:12px;z-index:2;font-family:var(--sans);
  font-size:10px;font-weight:600;padding:4px 8px;border-radius:100px;
  border:1px solid var(--line2);color:var(--dim);background:rgba(7,9,11,.8)}
.specimen .badge.hot{border-color:rgba(231,178,92,.4);color:var(--amber)}
.specimen .stagebox{height:210px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden}
.specimen .stagebox:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:200px;height:200px;background:radial-gradient(circle,rgba(111,217,247,.14),transparent 62%);
  opacity:0;transition:opacity .35s}
.specimen:hover .stagebox:before{opacity:1}
.specimen .stagebox .sword{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:900;font-size:52px;letter-spacing:-.05em;
  color:rgba(244,241,232,.045);text-transform:uppercase;white-space:nowrap;line-height:1}
.specimen .stagebox img{height:160px;position:relative;z-index:1;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.75));transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.specimen:hover .stagebox img{transform:translateY(-7px) scale(1.03)}
.specimen .info{padding:16px 18px 20px;border-top:var(--hair);display:flex;flex-direction:column;
  gap:8px;flex:1}
.specimen h3{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.015em;
  color:var(--cream);line-height:1.16}
.specimen .cls{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan-deep)}
.specimen dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:2px}
.specimen dt{font-family:var(--mono);font-size:8px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint)}
.specimen dd{font-family:var(--mono);font-size:11.5px;color:var(--paper);margin-top:3px}
.specimen dd.c{color:var(--cyan)}
.specimen .price{font-family:var(--display);font-weight:800;font-size:18px;color:var(--cream);
  margin-top:4px}
.specimen .price small{font-family:var(--sans);font-size:10.5px;font-weight:400;color:var(--faint)}
.specimen .acts{margin-top:auto;padding-top:12px;display:flex;gap:7px}

/* ── PACK / SKU BUTTONS ───────────────────────────────────────── */
.packs{margin-top:22px}
.packs-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-bottom:11px;display:flex;justify-content:space-between;align-items:baseline}
.packs-lbl em{font-style:normal;color:var(--cyan);font-size:11px}
.pack-grid{display:flex;gap:9px;flex-wrap:wrap}
.pack{flex:0 0 auto;min-width:104px;padding:12px 15px;background:var(--deep);
  border:1.5px solid var(--line2);border-radius:6px;cursor:pointer;text-align:left;
  transition:border-color .16s,background .16s,transform .1s;position:relative}
.pack:hover{border-color:var(--line3);background:var(--panel)}
.pack.sel{border-color:var(--cyan);background:rgba(111,217,247,.07);
  box-shadow:0 0 20px rgba(111,217,247,.12)}
.pack:active{transform:translateY(1px)}
.pack b{display:block;font-family:var(--display);font-weight:800;font-size:15px;color:var(--cream);
  line-height:1.1}
.pack .p{display:block;font-family:var(--display);font-weight:700;font-size:14px;
  color:var(--cyan);margin-top:5px}
.pack .sku{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;
  color:var(--faint);margin-top:5px}
.pack.out{opacity:.42;cursor:not-allowed}
.pack.out:after{content:'OUT';position:absolute;top:6px;right:8px;font-family:var(--mono);
  font-size:7.5px;letter-spacing:.1em;color:var(--red)}
.pack .save{position:absolute;top:-8px;right:8px;font-family:var(--sans);font-size:9.5px;
  font-weight:700;background:var(--green);color:#052014;padding:2px 7px;border-radius:100px}

.pricerow{display:flex;align-items:flex-end;gap:16px;margin-top:20px;flex-wrap:wrap}
.bigprice{font-family:var(--display);font-weight:900;font-size:38px;color:var(--cream);
  line-height:1;letter-spacing:-.02em}
.bigprice small{font-family:var(--sans);font-size:12px;font-weight:400;color:var(--faint);
  display:block;margin-top:6px;letter-spacing:0}
.unitprice{font-family:var(--mono);font-size:11.5px;color:var(--muted);padding-bottom:4px}

/* ── EMBEDDED CoA VIEWER ──────────────────────────────────────── */


.coa-missing{border:1px dashed var(--line2);border-radius:6px;padding:28px 24px;text-align:center;
  color:var(--muted);font-size:13.5px;margin-top:18px}

/* ── data table ───────────────────────────────────────────────── */
.tablewrap{border:var(--hair);border-radius:6px;overflow-x:auto;background:var(--deep)}
table.grid{width:100%;border-collapse:collapse;min-width:900px}
table.grid thead th{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:13px 15px;border-bottom:var(--hair);
  background:var(--void);font-weight:400;white-space:nowrap}
table.grid tbody td{padding:14px 15px;border-bottom:var(--hair);vertical-align:middle;font-size:13.5px}
table.grid tbody tr:last-child td{border-bottom:none}
table.grid tbody tr{transition:background .13s}
table.grid tbody tr:hover{background:var(--panel)}
.rowname{display:flex;align-items:center;gap:13px}
.rowname img{width:26px;height:42px;object-fit:contain;flex-shrink:0;opacity:.9}
.rowname b{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--cream);display:block}
.rowname small{font-family:var(--mono);font-size:9px;letter-spacing:.09em;color:var(--faint);
  display:block;margin-top:3px}
td.num{font-family:var(--mono);font-size:11.5px;white-space:nowrap;color:var(--paper)}
td.num small{color:var(--faint);font-size:9.5px;display:block;margin-top:3px;letter-spacing:.08em}
td.num.c{color:var(--cyan)}
td.pricecell{font-family:var(--display);font-weight:700;font-size:15px;color:var(--cream)}
.rowacts{display:flex;gap:7px;justify-content:flex-end}
.availa{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.availa:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);
  box-shadow:0 0 7px rgba(79,203,146,.6);flex-shrink:0}
.availa.low:before{background:var(--amber);box-shadow:0 0 7px rgba(231,178,92,.6)}
.availa.none:before{background:var(--faint);box-shadow:none}
.empty{padding:52px 24px;text-align:center;color:var(--muted);font-size:14px}

/* ── toolbar ──────────────────────────────────────────────────── */
.toolbar{display:flex;flex-direction:column;gap:13px;margin-bottom:22px}
.searchbox{position:relative}
.searchbox svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  stroke:var(--dim);fill:none;stroke-width:1.9}
.searchbox input{width:100%;background:var(--deep);border:1px solid var(--line2);border-radius:5px;
  color:var(--cream);padding:13px 40px;font-family:var(--sans);font-size:14.5px}
.searchbox input::placeholder{color:var(--faint)}
.searchbox input:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 20px rgba(111,217,247,.1)}
.searchbox button{position:absolute;right:11px;top:50%;transform:translateY(-50%);background:none;
  border:none;color:var(--dim);cursor:pointer;font-size:13px;padding:5px}
.filters{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filt{flex:0 0 auto;font-family:var(--sans);font-size:13px;font-weight:500;padding:8px 15px;
  border:1px solid var(--line2);background:transparent;color:var(--muted);border-radius:100px;
  cursor:pointer;white-space:nowrap;transition:all .15s}
.filt:hover{color:var(--cream);border-color:var(--line3)}
.filt.on{background:var(--cyan);border-color:var(--cyan);color:#04161E;font-weight:600}
.filt .c{opacity:.6;font-size:11.5px;margin-left:5px}
.viewtoggle{display:flex;border:1px solid var(--line2);border-radius:5px;overflow:hidden;
  flex-shrink:0;margin-left:auto}
.viewtoggle button{background:transparent;border:none;color:var(--dim);font-family:var(--sans);
  font-size:12.5px;font-weight:500;padding:9px 14px;cursor:pointer}
.viewtoggle button.on{background:var(--panel2);color:var(--cyan)}
.toolrow{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.resultcount{font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap}

/* pagination for large catalogs */
.pager{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:28px;flex-wrap:wrap}
.pager button,.pager a{min-width:36px;height:36px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line2);background:transparent;color:var(--muted);
  border-radius:4px;font-family:var(--mono);font-size:12px;cursor:pointer;padding:0 10px}
.pager button:hover,.pager a:hover{border-color:var(--cyan);color:var(--cyan)}
.pager .on{background:var(--cyan);border-color:var(--cyan);color:#04161E}
.pager .gap{border:none;cursor:default;color:var(--faint)}

/* ── protocol / cards ─────────────────────────────────────────── */
.protocol{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:var(--hair);border-radius:6px;overflow:hidden}
.proto{background:var(--deep);padding:26px 22px;transition:background .28s}
.proto:hover{background:var(--panel)}
.proto .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--cyan-deep);
  margin-bottom:18px;display:block}
.proto .ic{width:32px;height:32px;margin-bottom:16px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--line2);border-radius:4px}
.proto .ic svg{width:16px;height:16px;stroke:var(--cyan);fill:none;stroke-width:1.6}
.proto h3{font-family:var(--display);font-weight:700;font-size:15.5px;margin-bottom:9px;color:var(--cream)}
.proto p{color:var(--muted);font-size:13px;line-height:1.58}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--deep);border:var(--hair);border-radius:6px;padding:24px 22px}
.card .ic{width:32px;height:32px;border:1px solid var(--line2);border-radius:4px;display:flex;
  align-items:center;justify-content:center;margin-bottom:16px}
.card .ic svg{width:16px;height:16px;stroke:var(--cyan);fill:none;stroke-width:1.6}
.card h3{font-family:var(--display);font-weight:700;font-size:16px;margin-bottom:9px;color:var(--cream)}
.card p{color:var(--muted);font-size:13.5px;line-height:1.6}
.card ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.card li{color:var(--muted);font-size:13px;display:flex;gap:10px;line-height:1.5}
.card li:before{content:'';width:4px;height:4px;background:var(--cyan);border-radius:50%;
  margin-top:7px;flex-shrink:0}
.card .stat{font-family:var(--display);font-weight:800;font-size:26px;color:var(--cyan);margin:8px 0 4px}

.marquee{border-top:var(--hair);border-bottom:var(--hair);background:var(--deep);
  overflow:hidden;padding:12px 0}
.mtrack{display:flex;width:max-content;animation:mrun 48s linear infinite}
@keyframes mrun{to{transform:translateX(-50%)}}
.mtrack span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);padding:0 26px;border-right:var(--hair);white-space:nowrap}
.marquee:hover .mtrack{animation-play-state:paused}

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq{border-top:var(--hair)}
.faq details{border-bottom:var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:19px 0;display:flex;justify-content:space-between;
  gap:22px;align-items:flex-start;font-size:16px;font-weight:600;color:var(--cream);
  font-family:var(--sans);transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cyan)}
.faq summary i{font-style:normal;font-family:var(--mono);color:var(--cyan);font-size:16px;
  flex-shrink:0;transition:transform .2s;line-height:1.4}
.faq details[open] summary i{transform:rotate(45deg)}
.faq .ans{color:var(--body);font-size:14.5px;line-height:1.7;padding:0 0 22px;max-width:82ch}
.faq h2.grp{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cyan-deep);margin:38px 0 4px}
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 46px;align-items:start}
.faq-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:34px;padding:22px 26px;border:1px solid var(--line2);border-radius:8px;
  background:var(--deep)}
.faq-cta b{font-family:var(--display);font-weight:700;font-size:17px;color:var(--cream);display:block}
.faq-cta p{font-size:13.5px;color:var(--muted);margin-top:5px}

/* ── closing ──────────────────────────────────────────────────── */
.closing{border:1px solid var(--line2);border-radius:8px;padding:44px;position:relative;
  overflow:hidden;background:linear-gradient(155deg,var(--panel) 0%,var(--void) 62%);
  display:flex;justify-content:space-between;gap:32px;align-items:center;flex-wrap:wrap}
.closing:before{content:'';position:absolute;right:-140px;top:-140px;width:460px;height:460px;
  background:radial-gradient(circle,var(--glow),transparent 64%)}
.closing>*{position:relative}
.closing h2{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.024em;
  line-height:1.08;max-width:19ch;color:var(--cream)}
.closing p{color:var(--body);font-size:14.5px;margin-top:13px;max-width:52ch}

/* ── page hero ────────────────────────────────────────────────── */
.page-hero{border-bottom:var(--hair);padding:52px 0 44px;position:relative;overflow:hidden}
.page-hero:before{content:'';position:absolute;top:-240px;left:50%;transform:translateX(-50%);
  width:900px;height:460px;background:radial-gradient(ellipse at center,var(--glow),transparent 66%)}
.page-hero .wrap{position:relative}
.page-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.4vw,50px);
  line-height:1.02;letter-spacing:-.028em;color:var(--cream);margin-top:16px}
.page-hero .sub{color:var(--body);font-size:15.5px;max-width:64ch;margin-top:16px;line-height:1.64}
.crumb{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:16px}
.crumb a:hover{color:var(--cyan)}

/* ── product page ─────────────────────────────────────────────── */
.pgrid{display:grid;grid-template-columns:400px 1fr;gap:48px;align-items:start;padding:42px 0 70px}
.pshot{position:sticky;top:88px}
.pframe{border:var(--hair);border-radius:6px;display:flex;align-items:center;justify-content:center;
  padding:34px 20px;position:relative;overflow:hidden;background:var(--deep)}
.pframe:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:300px;height:300px;background:radial-gradient(circle,rgba(111,217,247,.13),transparent 62%)}
.pframe .pword{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:900;font-size:76px;letter-spacing:-.05em;
  color:rgba(244,241,232,.05);text-transform:uppercase;white-space:nowrap;line-height:1}
.pframe img{height:300px;position:relative;filter:drop-shadow(0 24px 46px rgba(0,0,0,.8))}
.pquick{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:var(--hair);border-top:none;overflow:hidden}
.pquick div{background:var(--deep);padding:13px 15px}
.pquick dt{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint)}
.pquick dd{font-family:var(--mono);font-size:12.5px;color:var(--paper);margin-top:5px}
.pquick dd.c{color:var(--cyan)}
.ptitle{font-family:var(--display);font-weight:900;font-size:clamp(30px,4.2vw,46px);line-height:.98;
  letter-spacing:-.03em;color:var(--cream)}
.psyn{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--dim);margin-top:12px;
  line-height:1.65}
.pdesc{color:var(--body);font-size:15px;margin-top:18px;max-width:66ch;line-height:1.64}

.tabs{display:flex;border-bottom:var(--hair);margin-top:34px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);
  font-family:var(--sans);font-size:14px;font-weight:600;padding:13px 16px;cursor:pointer;
  white-space:nowrap;margin-bottom:-1px;transition:color .15s}
.tab:first-child{padding-left:0}
.tab:hover{color:var(--cream)}
.tab.on{color:var(--cyan);border-bottom-color:var(--cyan)}
.pane{display:none;padding-top:26px}
.pane.on{display:block}

.speclist{border-top:var(--hair)}
.specrow{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:12px 0;border-bottom:var(--hair)}
.specrow dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);padding-top:2px}
.specrow dd{font-family:var(--mono);font-size:12.5px;color:var(--paper);word-break:break-word;line-height:1.55}

.panel{background:var(--deep);border:var(--hair);border-radius:6px;padding:24px}
.panel+.panel{margin-top:16px}
.panel .ph{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  margin-bottom:20px;flex-wrap:wrap}
.panel h3{font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--cream)}
.panel .ph p{font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--faint);margin-top:6px}
table.data{width:100%;border-collapse:collapse}
table.data th{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:10px 12px;border-bottom:var(--hair);font-weight:400}
table.data td{padding:12px;border-bottom:var(--hair);font-size:12px;font-family:var(--mono);color:var(--muted)}
table.data tr:last-child td{border-bottom:none}
table.data td:first-child{font-family:var(--sans);font-size:13.5px;color:var(--cream)}
table.data td.res{color:var(--cyan)}
.pass{color:var(--green);font-family:var(--mono);font-size:9px;letter-spacing:.09em}

.flag{border-left:2px solid var(--amber);background:rgba(231,178,92,.05);padding:15px 19px;
  margin-top:20px;font-size:13.5px;color:var(--body);line-height:1.62;border-radius:0 4px 4px 0}
.flag b{color:var(--amber);font-weight:600;display:block;margin-bottom:5px;font-family:var(--sans);
  font-size:13px}
.flag a{color:var(--cyan)}
.info{border-left:2px solid var(--cyan);background:var(--glow);padding:15px 19px;margin-top:20px;
  font-size:13.5px;color:var(--body);line-height:1.62;border-radius:0 4px 4px 0}
.info b{color:var(--cyan);font-weight:600;display:block;margin-bottom:5px;font-family:var(--sans);
  font-size:13px}

.buybox{background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:24px;
  margin-top:28px}
.buybox h3{font-family:var(--display);font-weight:700;font-size:17px;margin-bottom:7px;color:var(--cream)}
.buybox p{color:var(--muted);font-size:13.5px;max-width:58ch;line-height:1.58}
.buybox .row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;align-items:center}
.lockrow{display:flex;gap:14px;align-items:flex-start}
.lockrow>svg{width:20px;height:20px;stroke:var(--amber);fill:none;stroke-width:1.6;flex-shrink:0;margin-top:3px}
.qty{display:flex;align-items:center;border:1px solid var(--line2);border-radius:5px;overflow:hidden;
  background:var(--deep)}
.qty button{background:transparent;border:none;color:var(--cream);width:36px;height:44px;cursor:pointer;
  font-size:16px;font-family:var(--mono)}
.qty button:hover{background:var(--panel2)}
.qty input{width:46px;height:44px;background:transparent;border:none;color:var(--cream);
  text-align:center;font-family:var(--mono);font-size:13px}
.trustrow{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap;padding-top:16px;border-top:var(--hair)}
.trustrow span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.trustrow svg{width:14px;height:14px;stroke:var(--green);fill:none;stroke-width:2}

.stickybar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;
  background:rgba(10,13,16,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line2);
  padding:10px 14px;align-items:center;gap:10px}
.stickybar b{font-family:var(--display);font-weight:700;font-size:13.5px;flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;color:var(--cream)}
.stickybar .sp{font-family:var(--display);font-weight:800;font-size:16px;color:var(--cyan)}

/* ── forms ────────────────────────────────────────────────────── */
.formwrap{max-width:800px;padding:42px 0 80px}
.formwrap.narrow{max-width:470px}
fieldset{border:none;border-top:var(--hair);padding-top:24px;margin-top:32px}
fieldset:first-of-type{margin-top:6px}
legend{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);padding-right:14px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld.full{grid-column:1/-1}
label{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--paper)}
label .opt{color:var(--faint);font-weight:400}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],
select,textarea{background:var(--deep);border:1px solid var(--line2);border-radius:5px;
  color:var(--cream);padding:12px 13px;font-family:var(--sans);font-size:14.5px;width:100%;
  transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);outline:none;
  box-shadow:0 0 18px rgba(111,217,247,.1)}
textarea{resize:vertical;min-height:96px;line-height:1.58}
.hint{font-family:var(--sans);font-size:12px;color:var(--faint);line-height:1.55}
.err{font-family:var(--sans);font-size:12px;color:var(--red);display:none}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--red)}
.fld.bad .err{display:block}
.checks{display:flex;flex-direction:column;margin-top:20px;border:var(--hair);border-radius:5px;
  overflow:hidden}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--body);cursor:pointer;
  background:var(--deep);padding:15px 17px;border-bottom:var(--hair);line-height:1.54}
.chk:last-child{border-bottom:none}
.chk:hover{background:var(--panel)}
.chk input{margin-top:2px;accent-color:var(--cyan);width:16px;height:16px;flex-shrink:0}
.chk b{color:var(--cream);font-weight:600}
.fileup{border:1px dashed var(--line2);border-radius:5px;padding:24px;text-align:center;
  color:var(--muted);font-size:13px;cursor:pointer;transition:border-color .15s}
.fileup:hover{border-color:var(--cyan)}
.fileup b{color:var(--cyan);font-weight:600;display:block;margin-bottom:6px;font-size:13.5px}
.fsubmit{margin-top:32px;padding-top:26px;border-top:var(--hair);display:flex;gap:14px;
  align-items:center;flex-wrap:wrap}
.fsubmit .fnote{font-size:12px;color:var(--faint);max-width:36ch;line-height:1.55}
.formlinks{display:flex;justify-content:space-between;gap:14px;margin-top:18px;font-size:13px;
  flex-wrap:wrap}
.formlinks a{color:var(--cyan)}
.formlinks a:hover{text-decoration:underline}
.notice{border-radius:5px;padding:13px 16px;font-size:13.5px;line-height:1.55;margin-bottom:20px}
.notice.ok{background:rgba(79,203,146,.08);border:1px solid rgba(79,203,146,.3);color:var(--green)}
.notice.bad{background:rgba(228,104,91,.08);border:1px solid rgba(228,104,91,.3);color:var(--red)}

/* ── account portal ───────────────────────────────────────────── */
.acct-grid{display:grid;grid-template-columns:210px 1fr;gap:32px;align-items:start;padding:34px 0 76px}
.acct-nav{position:sticky;top:88px;border:var(--hair);border-radius:6px;overflow:hidden;
  background:var(--deep)}
.acct-nav a{display:flex;align-items:center;gap:10px;padding:12px 15px;font-size:13.5px;
  color:var(--muted);border-bottom:var(--hair);transition:background .15s,color .15s}
.acct-nav a:last-child{border-bottom:none}
.acct-nav a:hover{background:var(--panel);color:var(--cream)}
.acct-nav a.on{background:rgba(111,217,247,.07);color:var(--cyan);box-shadow:inset 2px 0 0 var(--cyan)}
.acct-nav svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.acct-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  margin-bottom:22px;flex-wrap:wrap}
.acct-head h2{font-family:var(--display);font-weight:800;font-size:23px;color:var(--cream)}
.acct-head p{font-size:13.5px;color:var(--muted);margin-top:5px}

/* ── gate ─────────────────────────────────────────────────────── */
.gate{position:fixed;inset:0;z-index:500;background:var(--void);display:flex;align-items:center;
  justify-content:center;padding:24px;overflow:hidden}
.gate-field{position:absolute;inset:0;pointer-events:none}
.gv{position:absolute}
.gv.far img{height:130px;filter:blur(5px);opacity:.22}
.gv.mid img{height:220px;filter:blur(1.6px);opacity:.42}
.gv.near img{height:350px;opacity:.68;filter:drop-shadow(0 24px 48px rgba(0,0,0,.9))}
.gate-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1000px;height:640px;
  background:radial-gradient(ellipse at center,var(--glow),transparent 64%)}
.gate-card{position:relative;z-index:3;background:rgba(11,15,19,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--line2);border-radius:8px;max-width:520px;width:100%;padding:36px}
.gate-card .gm{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.gate-card h2{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.02em;
  line-height:1.14;margin-bottom:12px;color:var(--cream)}
.gate-card>p{color:var(--body);font-size:14px;margin-bottom:22px;line-height:1.6}
.affirm{border:var(--hair);border-radius:5px;overflow:hidden;margin-bottom:22px}
.aff{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;cursor:pointer;
  background:var(--deep);border-bottom:var(--hair);transition:background .15s}
.aff:last-child{border-bottom:none}
.aff:hover{background:var(--panel)}
.aff input{margin-top:2px;accent-color:var(--cyan);width:16px;height:16px;flex-shrink:0}
.aff span{font-size:13.5px;color:var(--body);line-height:1.54}
.aff b{color:var(--cream);font-weight:600}
.gate-row{display:flex;gap:10px;flex-wrap:wrap}
.gate-note{font-size:12px;color:var(--faint);margin-top:20px;line-height:1.6}

/* ── footer ───────────────────────────────────────────────────── */
.site-foot{padding:56px 0 38px;color:var(--faint);font-size:13px;border-top:var(--hair);
  background:var(--deep);position:relative;z-index:1}
.discl{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:var(--hair);border-radius:6px;overflow:hidden;margin-bottom:36px}
.discl div{background:var(--void);padding:19px 20px}
.discl dt{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px}
.discl dd{font-size:12.5px;color:var(--muted);line-height:1.58}
.discl dd b{color:var(--cyan);font-weight:600}
.fgrid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:36px;margin-bottom:38px}
.fgrid h4{font-family:var(--mono);font-size:8.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--dim);margin-bottom:14px;font-weight:400}
.fgrid a{display:block;color:var(--faint);padding:5px 0;font-size:13px}
.fgrid a:hover{color:var(--cyan)}
.legal{border-top:var(--hair);padding-top:24px;font-size:11.5px;line-height:1.75;color:#3B4854;
  max-width:104ch}
.legal b{color:var(--dim);font-weight:600}
.fbot{display:flex;justify-content:space-between;gap:20px;margin-top:22px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;flex-wrap:wrap}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--panel2);border:1px solid var(--cyan);color:var(--cream);padding:13px 20px;
  border-radius:5px;font-size:13.5px;z-index:400;opacity:0;transition:opacity .2s,transform .2s;
  pointer-events:none;max-width:90vw;text-align:center;box-shadow:0 0 30px rgba(111,217,247,.16)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.atlas-view{display:none}
.atlas-view.on{display:block}

/* ── responsive ───────────────────────────────────────────────── */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:16px;min-height:0}
  .orb{height:400px;order:-1}
  .orb-vial.lead img{height:270px}
  .orb-vial.mid img{height:132px}
  .orb-vial.far img{height:98px}
  .t1{left:-2%}.t2{right:-2%}
  .display .l1,.display .l2{font-size:clamp(50px,12vw,100px)}
  .spec-grid,.spec-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .protocol,.g4{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr;gap:30px}
  .pshot{position:static}
  .pframe img{height:240px}
  .discl{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .acct-grid{grid-template-columns:1fr}
  .acct-nav{position:static;display:flex;overflow-x:auto}
  .acct-nav a{border-bottom:none;border-right:var(--hair);white-space:nowrap}
  .acct-nav a.on{box-shadow:inset 0 -2px 0 var(--cyan)}
  .faq-cols{grid-template-columns:1fr;gap:0}
}
@media(max-width:860px){
  .g3{grid-template-columns:1fr}
}
@media(max-width:760px){
  :root{--sec:52px}
  .wrap{padding:0 18px}
  .hero{padding:38px 0 0}
  .display .l1,.display .l2{font-size:clamp(44px,15vw,68px)}
  .hero-sub{font-size:15.5px;margin-top:20px}
  .hero-cta .btn{flex:1 1 auto}
  .protocol,.g2,.g4{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .specrow{grid-template-columns:1fr;gap:4px}
  .closing{padding:28px 22px}
  .closing h2{font-size:24px}
  .orb{height:300px}
  .orb-vial.lead img{height:210px}
  .pack{min-width:88px;padding:10px 12px}
  .stage-word{font-size:clamp(64px,22vw,120px)}

  /* best sellers become a swipeable row instead of three tall cards */
  .bestsellers{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -18px;padding:4px 18px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bestsellers::-webkit-scrollbar{display:none}
  .bs{flex:0 0 82%;scroll-snap-align:center}
  .bs:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   v3 — trust bar, account menu, quote drawer, motion, CoA chrome
   ═══════════════════════════════════════════════════════════════ */

/* ── TOP BAR ──────────────────────────────────────────────────────
   Quiet proof points left, one message right. On a phone it shows the
   message alone (or two proof points when there is no message) rather
   than abbreviations nobody can decode. */
.trustbar{background:#0A0E13;border-bottom:1px solid var(--line)}
.trustbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:36px}
.tb-left{display:flex;align-items:center;list-style:none;min-width:0}
.tb-item{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:11.5px;
  font-weight:500;letter-spacing:.07em;color:var(--muted);text-transform:uppercase;white-space:nowrap;
  padding:0 16px;border-left:1px solid var(--line2);line-height:1}
.tb-item:first-child{padding-left:0;border-left:none}
.tb-item svg{width:13px;height:13px;color:var(--cyan);stroke-width:2.6;flex-shrink:0}
.tb-right{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:11.5px;
  font-weight:600;letter-spacing:.07em;color:var(--cyan);text-transform:uppercase;white-space:nowrap;line-height:1}
.tb-right svg{width:15px;height:15px;flex-shrink:0}
@media(max-width:1180px){ .tb-item.p4{display:none} }
@media(max-width:920px){
  .trustbar .wrap{justify-content:center;min-height:34px}
  .trustbar.has-msg .tb-left{display:none}
  .trustbar:not(.has-msg) .tb-right{display:none}
  .tb-item.p3{display:none}
  .tb-item,.tb-right{font-size:10.5px;letter-spacing:.06em}
}

/* ── ACCOUNT MENU ─────────────────────────────────────────────── */
.acct-wrap{position:relative}
.avatar{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);
  background:var(--panel2);color:var(--cyan);font-family:var(--display);font-weight:800;
  font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .16s,box-shadow .16s;flex-shrink:0}
.avatar:hover{border-color:var(--cyan);box-shadow:0 0 16px rgba(111,217,247,.2)}
.avatar.ok{background:rgba(111,217,247,.12);border-color:rgba(111,217,247,.4)}
.acct-menu{position:absolute;top:calc(100% + 10px);right:0;width:276px;z-index:120;
  background:rgba(13,17,22,.98);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line2);
  border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.6);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s,transform .18s,visibility .18s}
.acct-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.am-head{padding:16px 18px;border-bottom:var(--hair);display:flex;gap:12px;align-items:center}
.am-head .avatar{width:40px;height:40px;font-size:15px;cursor:default}
.am-head b{display:block;font-family:var(--sans);font-weight:600;font-size:14px;color:var(--cream);
  line-height:1.3}
.am-head small{display:block;font-size:12px;color:var(--faint);margin-top:2px;
  word-break:break-all;line-height:1.35}
.am-status{padding:13px 18px;border-bottom:var(--hair);background:rgba(111,217,247,.04)}
.am-status .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.am-status b{font-size:12.5px;font-weight:600;color:var(--cyan)}
.am-status span{font-family:var(--mono);font-size:11px;color:var(--muted)}
.am-status p{font-size:11.5px;color:var(--faint);margin-top:7px;line-height:1.45}
.am-bar{height:4px;border-radius:100px;background:var(--line2);margin-top:9px;overflow:hidden}
.am-bar i{display:block;height:100%;border-radius:100px;
  background:linear-gradient(90deg,var(--cyan-deep),var(--cyan));transition:width .6s ease}
.am-links{padding:6px}
.am-links a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:6px;
  font-size:13.5px;color:var(--body);transition:background .14s,color .14s}
.am-links a:hover{background:var(--panel2);color:var(--cream)}
.am-links svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.am-links .sep{height:1px;background:var(--line);margin:6px 4px}
.am-links a.out{color:var(--dim)}
.am-links a.out:hover{color:var(--red)}

/* ── CART DRAWER ──────────────────────────────────────────────── */
.drawer-scrim{position:fixed;inset:0;background:rgba(4,6,8,.7);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  z-index:190;opacity:0;visibility:hidden;
  transition:opacity .28s,visibility .28s}
.drawer-scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:200;
  background:var(--deep);border-left:1px solid var(--line2);display:flex;flex-direction:column;
  transform:translateX(100%);visibility:hidden;
  transition:transform .34s cubic-bezier(.32,.72,.28,1),visibility .34s;
  box-shadow:-24px 0 60px rgba(0,0,0,.5)}
.drawer.open{transform:translateX(0);visibility:visible}
.dr-head{padding:18px 20px 18px 22px;border-bottom:var(--hair);display:flex;align-items:center;
  gap:14px;flex-shrink:0}
.dr-head h2{font-family:var(--display);font-weight:800;font-size:20px;color:var(--cream);line-height:1.1}
.dr-count{font-family:var(--sans);font-weight:500;font-size:14px;color:var(--muted);margin-left:4px}
.dr-close{margin-left:auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--line2);
  background:transparent;color:var(--muted);cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:border-color .16s,color .16s}
.dr-close:hover{border-color:var(--cyan);color:var(--cyan)}
.dr-close svg{width:16px;height:16px;stroke-width:2.2}

/* free-shipping progress */
.dr-ship{padding:14px 22px;border-bottom:var(--hair);background:rgba(111,217,247,.045);flex-shrink:0}
.dr-ship[hidden]{display:none}
.dr-ship p{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--paper)}
.dr-ship svg{width:17px;height:17px;color:var(--cyan);flex-shrink:0}
.dr-ship .track{height:5px;border-radius:100px;background:var(--line2);margin-top:10px;overflow:hidden}
.dr-ship .track i{display:block;height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--cyan-deep),var(--cyan));transition:width .5s ease}
.dr-ship.hit{background:rgba(79,203,146,.06)}
.dr-ship.hit p,.dr-ship.hit svg{color:var(--green)}
.dr-ship.hit .track i{background:linear-gradient(90deg,#2F9E6E,var(--green))}

.dr-body{flex:1;overflow-y:auto;padding:6px 22px;scrollbar-width:thin;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch}
.dr-body::-webkit-scrollbar{width:6px}
.dr-body::-webkit-scrollbar-thumb{background:var(--line2);border-radius:100px}
.dr-line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:16px 0;
  border-bottom:var(--hair);align-items:start;transition:background .4s}
.dr-line:last-child{border-bottom:none}
.dr-line.is-new{animation:drNew 1.8s ease}
@keyframes drNew{0%{background:rgba(111,217,247,.13)}100%{background:transparent}}
.dr-thumb{width:64px;height:78px;border:var(--hair);border-radius:8px;background:var(--panel);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.dr-thumb img{max-height:64px;max-width:52px;width:auto;object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.6))}
.dr-info{min-width:0}
.dr-name{font-family:var(--display);font-weight:700;font-size:15px;color:var(--cream);
  display:block;line-height:1.25;overflow-wrap:anywhere}
a.dr-name:hover{color:var(--cyan)}
.dr-chips{display:flex;gap:6px;flex-wrap:wrap}
.dr-chip{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--cyan);background:rgba(111,217,247,.1);border:1px solid rgba(111,217,247,.24);
  padding:3px 8px;border-radius:100px;margin-top:7px}
.dr-chip.warn{color:var(--amber);background:rgba(231,178,92,.1);border-color:rgba(231,178,92,.28)}
.dr-ctl{display:flex;align-items:center;gap:14px;margin-top:11px}
.dr-qty{display:flex;align-items:center;border:1px solid var(--line2);border-radius:8px;
  overflow:hidden;background:var(--void)}
.dr-qty button{width:34px;height:34px;background:transparent;border:none;color:var(--cream);
  cursor:pointer;font-family:var(--sans);font-size:17px;line-height:1;transition:background .14s}
.dr-qty button:hover:not(:disabled){background:var(--panel2)}
.dr-qty button:disabled{opacity:.3;cursor:not-allowed}
.dr-qty span{min-width:32px;text-align:center;font-family:var(--sans);font-size:14px;font-weight:600;
  color:var(--cream);font-variant-numeric:tabular-nums}
.dr-rm{background:none;border:none;color:var(--dim);font-family:var(--sans);font-size:12.5px;
  cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:3px;transition:color .14s}
.dr-rm:hover{color:var(--red)}
.dr-price{text-align:right;white-space:nowrap;transition:opacity .2s}
.dr-price b{font-family:var(--display);font-weight:800;font-size:15.5px;color:var(--cream);
  font-variant-numeric:tabular-nums}
.dr-price small{display:block;font-family:var(--sans);font-size:11px;font-weight:400;
  color:var(--faint);margin-top:3px}
.dr-line.is-busy .dr-price{opacity:.35}

.dr-empty{text-align:center;padding:64px 16px}
.dr-empty svg{width:46px;height:46px;stroke:var(--line3);fill:none;stroke-width:1.3;margin:0 auto 18px;
  stroke-linecap:round;stroke-linejoin:round}
.dr-empty b{display:block;font-family:var(--display);font-weight:700;font-size:18px;
  color:var(--cream);margin-bottom:8px}
.dr-empty p{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:22px}
.dr-loading{display:flex;justify-content:center;padding:70px 0}

.dr-foot{border-top:1px solid var(--line2);padding:16px 22px calc(16px + env(safe-area-inset-bottom));
  flex-shrink:0;background:var(--void)}
.dr-foot[hidden]{display:none}
.dr-note{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:8px;
  background:rgba(111,217,247,.06);border:1px solid rgba(111,217,247,.18);margin-bottom:14px}
.dr-note[hidden]{display:none}
.dr-note svg{width:15px;height:15px;stroke:var(--cyan);fill:none;stroke-width:1.9;
  flex-shrink:0;margin-top:1px}
.dr-note p{font-size:12px;color:var(--body);line-height:1.5}
.dr-note.warn{background:rgba(231,178,92,.06);border-color:rgba(231,178,92,.22)}
.dr-note.warn svg{stroke:var(--amber)}
.dr-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;
  font-size:13.5px;color:var(--green)}
.dr-row[hidden]{display:none}
.dr-row em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;opacity:.8;margin-left:4px}
.dr-row b{font-weight:600;font-variant-numeric:tabular-nums}
.dr-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dr-total span{font-size:14px;color:var(--muted)}
.dr-total b{font-family:var(--display);font-weight:800;font-size:25px;color:var(--cream);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dr-fine{font-size:12px;color:var(--faint);margin:4px 0 14px}
.dr-actions{display:flex;flex-direction:column;gap:8px}
.dr-keep{display:block;width:100%;background:none;border:none;color:var(--dim);font-family:var(--sans);
  font-size:13px;padding:12px 0 2px;cursor:pointer;transition:color .15s}
.dr-keep:hover{color:var(--cream)}

/* a small spinner, used wherever something is on its way */
.spin{display:inline-block;width:22px;height:22px;border:2px solid var(--line2);border-top-color:var(--cyan);
  border-radius:50%;animation:atlasspin .8s linear infinite}
@keyframes atlasspin{to{transform:rotate(360deg)}}

/* ── AUTH SPLIT — fixes the empty right half on sign-in ───────── */
.auth{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line2);
  border-radius:12px;overflow:hidden;margin:36px 0 80px;background:var(--deep)}
.auth-form{padding:40px}
.auth-form h2{font-family:var(--display);font-weight:800;font-size:24px;color:var(--cream);
  margin-bottom:7px}
.auth-form>p{font-size:14px;color:var(--muted);margin-bottom:26px;line-height:1.55}
.auth-side{padding:40px;background:linear-gradient(160deg,var(--panel) 0%,var(--void) 70%);
  border-left:1px solid var(--line2);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center}
.auth-side:before{content:'';position:absolute;top:-120px;right:-120px;width:360px;height:360px;
  background:radial-gradient(circle,var(--glow),transparent 66%)}
.auth-side>*{position:relative}
.auth-side h3{font-family:var(--display);font-weight:800;font-size:19px;color:var(--cream);
  margin-bottom:18px;line-height:1.24}
.auth-side ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.auth-side li{display:flex;gap:12px;font-size:13.5px;color:var(--body);line-height:1.5}
.auth-side li svg{width:17px;height:17px;stroke:var(--cyan);fill:none;stroke-width:2;
  flex-shrink:0;margin-top:2px}
.auth-side li b{color:var(--cream);font-weight:600;display:block;margin-bottom:2px}
.auth-vial{position:absolute;right:-40px;bottom:-30px;opacity:.16;pointer-events:none}
.auth-vial img{height:280px;filter:blur(1px)}
@media(max-width:900px){
  .auth{grid-template-columns:1fr;margin:24px 0 60px}
  .auth-side{border-left:none;border-top:1px solid var(--line2);padding:30px}
  .auth-form{padding:30px 24px}
  .auth-vial{display:none}
}

/* ── CoA VIEWER, rebuilt chrome ───────────────────────────────── */
.coadoc{border:1px solid var(--line2);border-radius:10px;overflow:hidden;margin-top:18px;
  background:var(--panel);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.coadoc-top{display:flex;align-items:center;gap:14px;padding:14px 16px;
  background:linear-gradient(180deg,var(--panel2),var(--deep));border-bottom:1px solid var(--line2);
  flex-wrap:wrap}
.coadoc-id{display:flex;align-items:center;gap:11px;min-width:0}
.coadoc-id .ic{width:34px;height:34px;border-radius:7px;background:rgba(111,217,247,.1);
  border:1px solid rgba(111,217,247,.26);display:flex;align-items:center;justify-content:center;
  flex-shrink:0}
.coadoc-id .ic svg{width:16px;height:16px;stroke:var(--cyan);fill:none;stroke-width:1.8}
.coadoc-id b{display:block;font-family:var(--sans);font-weight:600;font-size:13.5px;color:var(--cream);
  line-height:1.25}
.coadoc-id small{display:block;font-family:var(--mono);font-size:10px;color:var(--faint);
  margin-top:3px;letter-spacing:.05em}
.coadoc-verify{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:11px;
  font-weight:600;color:var(--green);background:rgba(79,203,146,.1);
  border:1px solid rgba(79,203,146,.3);padding:5px 10px;border-radius:100px;white-space:nowrap}
.coadoc-verify svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6}
.coadoc-tools{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.coadoc-stage{position:relative;background:#15181c}
.coadoc-frame{width:100%;height:600px;border:none;display:block;background:#15181c;
  transition:height .3s ease}
.coadoc-frame.tall{height:900px}
.coadoc-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;background:var(--panel);pointer-events:none;
  transition:opacity .4s;font-size:12.5px;color:var(--muted)}
.coadoc-load.gone{opacity:0}
.coadoc-load .spin{width:26px;height:26px;border:2px solid var(--line2);border-top-color:var(--cyan);
  border-radius:50%;animation:coaspin .8s linear infinite}
@keyframes coaspin{to{transform:rotate(360deg)}}
.coadoc-fb{padding:44px 26px;text-align:center}
.coadoc-fb b{display:block;font-family:var(--display);font-weight:700;font-size:16px;
  color:var(--cream);margin-bottom:8px}
.coadoc-fb p{font-size:13px;color:var(--muted);max-width:44ch;margin:0 auto 18px;line-height:1.55}
.coadoc-foot{display:flex;align-items:center;gap:14px;padding:11px 16px;border-top:1px solid var(--line2);
  background:var(--deep);font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--faint);flex-wrap:wrap;text-transform:uppercase}
.coadoc-foot .dot{width:4px;height:4px;border-radius:50%;background:var(--line3)}

/* CoA strip on the pack row — per-SKU certificate access */
.skucoa{display:flex;align-items:center;gap:12px;margin-top:14px;padding:11px 14px;
  border:1px solid var(--line);border-radius:7px;background:var(--deep);flex-wrap:wrap}
.skucoa svg{width:15px;height:15px;stroke:var(--cyan);fill:none;stroke-width:1.8;flex-shrink:0}
.skucoa span{font-size:12.5px;color:var(--muted)}
.skucoa b{color:var(--cream);font-weight:600}
.skucoa .mono{color:var(--cyan);font-size:11.5px}
.skucoa a{margin-left:auto}

/* ── MOTION ───────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s}
.reveal.d5{transition-delay:.35s}.reveal.d6{transition-delay:.42s}

/* button shine on hover */
.btn{position:relative;overflow:hidden}
.btn:before{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
.btn:hover:before{left:130%}
.btn.ghost:before{background:linear-gradient(100deg,transparent,rgba(111,217,247,.14),transparent)}

/* card lift */
.card:hover{transform:translateY(-2px)}
.card{transition:background .25s,border-color .25s,transform .25s}

/* vial idle float */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.orb-vial.lead img{animation:floaty 7s ease-in-out infinite}
.orb-vial.mid img{animation:floaty 9s ease-in-out .8s infinite}
.orb-vial.far img{animation:floaty 11s ease-in-out 1.6s infinite}

/* number count-up */
.countup{font-variant-numeric:tabular-nums}

/* pack button pop */
.pack.sel{animation:packpop .28s cubic-bezier(.3,1.5,.5,1)}
@keyframes packpop{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}


/* header shadow once scrolled */
.site-head{transition:box-shadow .25s,background .25s}
.site-head.stuck{box-shadow:0 10px 34px rgba(0,0,0,.44);background:rgba(7,9,11,.94)}

/* skeleton shimmer for lazy images */
@keyframes shim{to{background-position:200% 0}}

/* ── MOBILE PASS ──────────────────────────────────────────────── */
@media(max-width:760px){
  .acct-menu{position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;z-index:150;
    border-radius:14px 14px 0 0;transform:translateY(100%);border-left:none;border-right:none;
    border-bottom:none;padding-bottom:env(safe-area-inset-bottom)}
  .acct-menu.open{transform:translateY(0)}
  .coadoc-frame{height:420px}
  .coadoc-frame.tall{height:620px}
  .coadoc-top{gap:10px;padding:12px}
  .coadoc-tools{margin-left:0;width:100%}
  .coadoc-tools .mini{flex:1;justify-content:center}
  .skucoa{flex-direction:column;align-items:flex-start;gap:9px}
  .skucoa a{margin-left:0;width:100%;justify-content:center}
  .pack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .pack{min-width:0;width:100%;padding:11px 8px;text-align:center}
  .pack b{font-size:13.5px}
  .pack .p{font-size:13px}
  .pack .sku{font-size:7.5px}
  .pack .save{right:50%;transform:translateX(50%);font-size:8.5px;padding:2px 6px}
  .pquick{grid-template-columns:1fr 1fr}
  .page-hero{padding:34px 0 30px}
  .sec-head{margin-bottom:24px}
  .sec-head h2{font-size:24px}
  .faq summary{font-size:15px;padding:16px 0}
  .faq .ans{font-size:14px}
  .site-foot{padding:40px 0 30px}
  .fgrid{grid-template-columns:1fr 1fr;gap:26px 20px}
  .fgrid>div:first-child{grid-column:1 / -1}
  .legal{font-size:11px}
  .toast{bottom:auto;top:76px;font-size:13px;padding:12px 16px}
}

/* pointer-coarse: bigger tap targets everywhere */
@media(hover:none){
  .mini{padding:9px 14px;font-size:13px}
  .filt{padding:10px 16px}
  .specimen:hover .stagebox img{transform:none}
  .card:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   v4 — offer modal, tooltips, auth polish, progress, back-to-top
   ═══════════════════════════════════════════════════════════════ */

/* ── OFFER MODAL ──────────────────────────────────────────────── */
.offer-scrim{position:fixed;inset:0;background:rgba(4,6,8,.76);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  z-index:300;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.offer-scrim.open{opacity:1;visibility:visible}
.offer{position:fixed;top:50%;left:50%;z-index:310;width:min(880px,calc(100vw - 32px));
  max-height:min(92vh,860px);display:grid;grid-template-columns:0.82fr 1fr;
  background:var(--deep);border:1px solid var(--line2);border-radius:16px;overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.7);
  transform:translate(-50%,-46%) scale(.96);opacity:0;visibility:hidden;
  transition:opacity .34s cubic-bezier(.2,.8,.3,1),transform .34s cubic-bezier(.2,.8,.3,1),visibility .34s}
.offer.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.offer-x{position:absolute;top:14px;right:14px;z-index:4;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line2);background:rgba(10,13,16,.8);color:var(--muted);cursor:pointer;
  font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .18s}
.offer-x:hover{border-color:var(--red);color:var(--red);transform:rotate(90deg)}

.offer-art{position:relative;overflow:hidden;
  background:linear-gradient(165deg,#101a22 0%,#080b0e 72%);border-right:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center}
.offer-art:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:340px;height:340px;background:radial-gradient(circle,rgba(111,217,247,.2),transparent 64%)}
.offer-word{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:900;font-size:150px;letter-spacing:-.06em;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(111,217,247,.2);pointer-events:none}
.offer-art img{position:relative;height:300px;
  filter:drop-shadow(0 26px 54px rgba(0,0,0,.85)) drop-shadow(0 0 40px rgba(111,217,247,.22));
  animation:floaty 7s ease-in-out infinite}

.offer-body{padding:34px 34px 30px;overflow-y:auto;scrollbar-width:thin}
.offer-body::-webkit-scrollbar{width:6px}
.offer-body::-webkit-scrollbar-thumb{background:var(--line2);border-radius:100px}
.offer-body h2{font-family:var(--display);font-weight:900;font-size:32px;letter-spacing:-.028em;
  line-height:1.04;color:var(--cream);margin:14px 0 10px}
.offer-body>div>p{font-size:14px;color:var(--body);line-height:1.6;margin-bottom:22px}
.offer-body .fld{margin-bottom:14px}
.offer-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.offer-chk{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--muted);
  cursor:pointer;line-height:1.5;margin-top:12px;padding:11px 13px;border:1px solid var(--line);
  border-radius:7px;background:var(--panel);transition:border-color .16s,background .16s}
.offer-chk:hover{border-color:var(--line3);background:var(--panel2)}
.offer-chk input{margin-top:2px;accent-color:var(--cyan);width:16px;height:16px;flex-shrink:0}
.offer-chk em{display:block;font-style:normal;color:var(--faint);font-size:11.5px;margin-top:4px}
.offer-chk.bad{border-color:var(--red)}
#atlas-offer-submit{margin-top:18px}
.offer-decline{display:block;width:100%;background:none;border:none;color:var(--faint);
  font-family:var(--sans);font-size:12.5px;padding:12px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;transition:color .15s}
.offer-decline:hover{color:var(--muted)}
.offer-fine{font-size:11.5px;color:var(--faint);line-height:1.6;margin-top:14px}

.offer-tick{width:56px;height:56px;border-radius:50%;background:rgba(79,203,146,.12);
  border:1px solid rgba(79,203,146,.36);display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;animation:tickpop .45s cubic-bezier(.3,1.5,.5,1)}
.offer-tick svg{width:26px;height:26px;stroke:var(--green);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
@keyframes tickpop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.codebox{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:10px;
  background:linear-gradient(120deg,rgba(111,217,247,.1),rgba(111,217,247,.03));
  border:1px dashed rgba(111,217,247,.4);margin:20px 0 4px;flex-wrap:wrap}
.codebox span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint)}
.codebox b{font-family:var(--display);font-weight:900;font-size:23px;letter-spacing:.04em;
  color:var(--cyan);flex:1}
.offer-tab{position:fixed;right:20px;bottom:74px;z-index:96;display:inline-flex;align-items:center;
  gap:9px;padding:13px 20px;border:none;border-radius:100px;cursor:pointer;
  background:linear-gradient(135deg,var(--cyan-hot),var(--cyan) 55%,var(--cyan-deep));
  color:#04161E;font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 10px 30px rgba(111,217,247,.34);transform:translateY(20px) scale(.9);opacity:0;
  pointer-events:none;transition:transform .42s cubic-bezier(.2,1.3,.4,1),opacity .3s,box-shadow .2s}
.offer-tab.show{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.offer-tab:hover{box-shadow:0 14px 40px rgba(111,217,247,.5)}
.offer-tab:active{transform:translateY(1px) scale(.99)}
/* a slow pulse so it reads as an offer, not furniture */
.offer-tab:after{content:'';position:absolute;inset:0;border-radius:100px;
  border:2px solid var(--cyan);opacity:0;pointer-events:none;animation:tabpulse 3.4s ease-out infinite}
@keyframes tabpulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.22);opacity:0}}
body.hasbar .offer-tab{bottom:132px}
.offer-tab:hover{box-shadow:0 10px 34px rgba(111,217,247,.45)}
.offer-tab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}

@media(max-width:820px){
  .offer{grid-template-columns:1fr;max-height:94vh;width:calc(100vw - 24px)}
  .offer-art{height:150px;border-right:none;border-bottom:1px solid var(--line2)}
  .offer-art img{height:132px}
  .offer-word{font-size:88px}
  .offer-body{padding:24px 22px 22px}
  .offer-body h2{font-size:25px}
  .offer-row{grid-template-columns:1fr}
  .offer-tab{right:14px;bottom:70px;padding:11px 16px;font-size:12.5px}
  body.hasbar .offer-tab{bottom:126px}
}

/* ── TOOLTIPS ─────────────────────────────────────────────────── */
[data-tip]{position:relative}
[data-tip]:after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(-4px);white-space:nowrap;pointer-events:none;
  background:var(--panel2);color:var(--cream);border:1px solid var(--line2);
  font-family:var(--sans);font-size:11.5px;font-weight:500;padding:6px 10px;border-radius:5px;
  opacity:0;transition:opacity .18s,transform .18s;z-index:130;
  box-shadow:0 8px 22px rgba(0,0,0,.5)}
[data-tip]:before{content:'';position:absolute;top:calc(100% + 4px);left:50%;
  transform:translateX(-50%);border:5px solid transparent;border-bottom-color:var(--line2);
  opacity:0;transition:opacity .18s;pointer-events:none;z-index:131}
[data-tip]:hover:after,[data-tip]:focus-visible:after{opacity:1;transform:translateX(-50%) translateY(0)}
[data-tip]:hover:before,[data-tip]:focus-visible:before{opacity:1}
[data-tip-left]:after{left:auto;right:0;transform:translateY(-4px)}
[data-tip-left]:hover:after{transform:translateY(0)}
[data-tip-left]:before{left:auto;right:14px;transform:none}
@media(hover:none){[data-tip]:after,[data-tip]:before{display:none}}

/* ── AUTH POLISH ──────────────────────────────────────────────── */
.pwwrap{position:relative}
.pwwrap input{padding-right:64px}
.pwtoggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;
  border:none;color:var(--dim);font-family:var(--sans);font-size:11.5px;font-weight:600;
  cursor:pointer;padding:6px 9px;border-radius:4px;transition:color .15s,background .15s}
.pwtoggle:hover{color:var(--cyan);background:var(--panel2)}
.pwmeter{margin-top:9px}
.pwbar{height:4px;border-radius:100px;background:var(--line2);overflow:hidden;display:flex;gap:3px}
.pwbar i{flex:1;background:var(--line2);border-radius:100px;transition:background .3s}
.pwbar.s1 i:nth-child(1){background:var(--red)}
.pwbar.s2 i:nth-child(-n+2){background:var(--amber)}
.pwbar.s3 i:nth-child(-n+3){background:#8FD07A}
.pwbar.s4 i{background:var(--green)}
.pwlabel{font-size:11.5px;color:var(--faint);margin-top:6px;display:flex;justify-content:space-between;
  gap:10px}
.pwlabel b{font-weight:600}
.pwbar.s1+.pwlabel b{color:var(--red)}
.pwbar.s2+.pwlabel b{color:var(--amber)}
.pwbar.s3+.pwlabel b{color:#8FD07A}
.pwbar.s4+.pwlabel b{color:var(--green)}
.pwrules{list-style:none;margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.pwrules li{display:flex;gap:7px;align-items:center;font-size:11.5px;color:var(--faint);
  transition:color .2s}
.pwrules li:before{content:'';width:13px;height:13px;border-radius:50%;border:1.5px solid var(--line3);
  flex-shrink:0;transition:all .2s}
.pwrules li.ok{color:var(--green)}
.pwrules li.ok:before{border-color:var(--green);background:var(--green);
  box-shadow:inset 0 0 0 2px var(--deep)}
.fld.good input{border-color:rgba(79,203,146,.5)}
.fld .tick{position:absolute;right:12px;top:38px;color:var(--green);opacity:0;transition:opacity .2s;
  pointer-events:none}
.fld.good .tick{opacity:1}
.fld{position:relative}

.auth-steps{display:flex;gap:8px;margin-bottom:22px}
.auth-step{flex:1;height:3px;border-radius:100px;background:var(--line2);position:relative}
.auth-step.on{background:var(--cyan)}
.auth-step.done{background:var(--cyan-deep)}
.auth-sent{text-align:center;padding:14px 0}
.auth-sent .ic{width:58px;height:58px;border-radius:50%;background:rgba(111,217,247,.1);
  border:1px solid rgba(111,217,247,.32);display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;animation:tickpop .45s cubic-bezier(.3,1.5,.5,1)}
.auth-sent .ic svg{width:26px;height:26px;stroke:var(--cyan);fill:none;stroke-width:1.8}
.auth-sent h3{font-family:var(--display);font-weight:800;font-size:20px;color:var(--cream);
  margin-bottom:9px}
.auth-sent p{font-size:13.5px;color:var(--body);line-height:1.6;max-width:40ch;margin:0 auto}
.auth-sent .mail{font-family:var(--mono);font-size:12.5px;color:var(--cyan);display:block;margin-top:9px}

/* ── SCROLL PROGRESS + BACK TO TOP ────────────────────────────── */
.progress{position:fixed;top:0;left:0;height:2px;z-index:400;width:0;
  background:linear-gradient(90deg,var(--cyan-deep),var(--cyan));
  box-shadow:0 0 10px rgba(111,217,247,.6);transition:width .1s linear}
.totop{position:fixed;right:20px;bottom:20px;z-index:95;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line2);background:rgba(13,17,22,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .26s,transform .26s,visibility .26s,border-color .16s,color .16s}
.totop.show{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{border-color:var(--cyan);color:var(--cyan)}
.totop svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
body.hasbar .totop{bottom:78px}

/* ── TOAST TYPES ──────────────────────────────────────────────── */
.toast{display:flex;align-items:center;gap:10px;text-align:left}
.toast svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;flex-shrink:0}
.toast.ok{border-color:var(--green);color:var(--green)}
.toast.bad{border-color:var(--red);color:var(--red)}

/* ── IMAGE FADE-IN, no layout shift ───────────────────────────── */
img[data-fade]{opacity:0;transition:opacity .5s ease}
img[data-fade].in{opacity:1}

/* ── PRINT — purchasing offices print certificates and quotes ── */
@media print{
  #atlas-field,.trustbar,.site-head,.site-foot,.drawer,.drawer-scrim,.offer,.offer-scrim,
  .offer-tab,.totop,.progress,.gate,.scrollcue,.stickybar,.tabs,.marquee,.navpanel,.navscrim,
  .searchpop,.search-scrim,.skip,.toast{display:none!important}
  body{background:#fff;color:#111}
  .pane{display:block!important;page-break-inside:avoid}
  .panel,.card,.specimen{border-color:#ccc;background:#fff}
  h1,h2,h3,b,.ptitle{color:#000}
  .coadoc-frame{height:auto;min-height:520px}
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:10px;color:#666}
  .wrap{max-width:none;padding:0}
}

/* ═══════════════════════════════════════════════════════════════
   v7 — product page mobile, consolidated
   One authoritative block at the end of the file so nothing earlier
   can override it. The previous passes were spread across four
   separate 760px blocks and were fighting each other.
   ═══════════════════════════════════════════════════════════════ */

/* Grid children need min-width:0 or long mono strings (a molecular
   formula, a sequence) refuse to shrink and push the page sideways. */
.pgrid,.auth,.acct-grid{min-width:0}
.pgrid>*,.auth>*,.acct-grid>*{min-width:0}
.pmain,.pshot,.acct-main{min-width:0;max-width:100%}

.psyn,.pdesc,.ptitle{overflow-wrap:anywhere}
.specrow dd,.pquick dd{overflow-wrap:anywhere}
table.data td,table.grid td{overflow-wrap:anywhere}

@media(max-width:860px){
  /* product */
  .pgrid{grid-template-columns:1fr;gap:24px;padding:26px 0 60px}
  .pshot{position:static}
  .pframe{padding:26px 16px}
  .pframe img{height:min(240px,52vw)}
  .pframe .pword{font-size:clamp(44px,14vw,68px)}
  .pquick{grid-template-columns:1fr 1fr}
  .pquick div{padding:11px 13px}
  .ptitle{font-size:clamp(26px,7.6vw,38px);line-height:1.02}
  .psyn{font-size:10.5px;margin-top:10px}
  .pdesc{font-size:14.5px;margin-top:14px}

  /* tabs scroll inside the page, never outside it */
  .tabs{margin-top:26px;gap:2px;-webkit-overflow-scrolling:touch}
  .tab{padding:12px 13px;font-size:13px}
  .tab:first-child{padding-left:0}
  .pane{padding-top:20px}

  /* spec rows read as label-over-value */
  .specrow{grid-template-columns:1fr;gap:3px;padding:11px 0}
  .specrow dt{font-size:9px}
  .specrow dd{font-size:12.5px}

  /* certificate */
  .coadoc-frame{height:400px}
  .coadoc-frame.tall{height:600px}
  .coadoc-top{padding:12px;gap:10px}
  .coadoc-id b{font-size:12.5px}
  .coadoc-tools{margin-left:0;width:100%;gap:6px}
  .coadoc-tools .mini{flex:1;justify-content:center;padding:9px 8px}
  .coadoc-foot{font-size:9px;gap:9px;padding:10px 12px}

  /* pack buttons */
  .packs{margin-top:18px}
  .pack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .pack{min-width:0;width:100%;padding:11px 7px;text-align:center}
  .pack b{font-size:13px;line-height:1.15}
  .pack .p{font-size:12.5px;margin-top:4px}
  .pack .sku{font-size:7.5px;margin-top:4px;overflow-wrap:anywhere}
  .pack .save{right:auto;left:50%;transform:translateX(-50%);font-size:8px;padding:2px 6px;top:-7px}

  /* buy box: stack rather than squeeze */
  .buybox{padding:18px 16px}
  .bigprice{font-size:28px}
  .buybox .row{gap:8px}
  .buybox .row .qty{width:100%;justify-content:space-between}
  .buybox .row .btn{flex:1 1 100%;width:100%}
  .lockrow{gap:11px}
  .trustrow{gap:9px 14px;padding-top:13px}
  .trustrow span{font-size:11.5px}
  .skucoa{padding:11px 12px}

  .stickybar.on{display:flex}
  body.hasbar{padding-bottom:70px}
}

@media(max-width:430px){
  .pack-grid{grid-template-columns:repeat(2,1fr)}
  .pquick{grid-template-columns:1fr}
  .bigprice{font-size:25px}
  .pframe img{height:min(200px,54vw)}
  .coadoc-frame{height:330px}
  .tab{font-size:12.5px;padding:11px 10px}
}

/* nothing may scroll the page sideways */
html,body{max-width:100%;overflow-x:clip}
.wrap,.pgrid,.buybox,.panel,.coadoc,.specimen{max-width:100%}
img,svg,iframe,table{max-width:100%}

/* ═══════════════════════════════════════════════════════════════
   v8 — product page, rebuilt
   Badge row, price range, trust strip, CoA band, size buttons,
   quantity + primary CTA, accordion detail. Same reading order as
   the storefront it sits next to.
   ═══════════════════════════════════════════════════════════════ */

.pbadges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.pbadge{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:100px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--line2);color:var(--muted);background:var(--panel);white-space:nowrap}
.pbadge.lead{background:rgba(111,217,247,.13);border-color:rgba(111,217,247,.4);color:var(--cyan)}
.pbadge.tick:before{content:'✓';font-weight:700;color:var(--cyan)}
.pbadge.warn{background:rgba(231,178,92,.12);border-color:rgba(231,178,92,.35);color:var(--amber)}

.prange{display:flex;align-items:baseline;gap:12px;margin:18px 0 4px;flex-wrap:wrap}
.prange .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint)}
.prange .amt{font-family:var(--display);font-weight:900;font-size:clamp(28px,4.4vw,40px);
  color:var(--cyan);letter-spacing:-.02em;line-height:1}
.prange .amt .dash{color:var(--dim);font-weight:700;margin:0 4px}

.ptrust{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-top:var(--hair);border-bottom:var(--hair);margin:24px 0}
.ptrust div{background:var(--void);padding:18px 12px;text-align:center}
.ptrust svg{width:20px;height:20px;stroke:var(--cyan);fill:none;stroke-width:1.6;margin:0 auto 9px}
.ptrust b{display:block;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--cream)}
.ptrust span{display:block;font-size:11.5px;color:var(--faint);margin-top:3px}

.coaband{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:10px;
  border:1px solid var(--line2);background:var(--panel);margin:22px 0;
  transition:border-color .18s,background .18s;flex-wrap:wrap}
.coaband:hover{border-color:rgba(111,217,247,.42);background:var(--panel2)}
.coaband>svg{width:20px;height:20px;stroke:var(--cyan);fill:none;stroke-width:1.7;flex-shrink:0}
.coaband b{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--cream)}
.coaband .flag2{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:100px;
  background:rgba(79,203,146,.13);border:1px solid rgba(79,203,146,.34);color:var(--green);
  white-space:nowrap}

.sizeblock{border:1px solid var(--line2);border-radius:12px;padding:22px;background:var(--panel);
  margin-top:24px}
.sizeblock .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-bottom:12px;display:flex;justify-content:space-between;
  align-items:baseline;gap:12px}
.sizeblock .lbl em{font-style:normal;color:var(--cyan);font-size:11.5px}

.selrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;border-radius:8px;background:var(--deep);border:1px solid var(--line);
  margin-top:16px;flex-wrap:wrap}
.selrow .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint)}
.selrow .v{font-family:var(--display);font-weight:700;font-size:15px;color:var(--cream)}
.selrow .p{margin-left:auto;font-family:var(--display);font-weight:900;font-size:22px;
  color:var(--cyan);letter-spacing:-.01em}

.qtyrow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.qtyrow .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint)}
.btn-primary{width:100%;margin-top:16px;padding:17px 24px;font-size:15.5px;font-weight:700;
  border-radius:8px;letter-spacing:.01em}
.btn-primary svg{width:17px;height:17px}
.buynote{text-align:center;font-size:12px;color:var(--faint);margin-top:12px;line-height:1.55}
.buynote b{color:var(--muted);font-weight:600}

.ruo{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:9px;
  background:rgba(231,178,92,.07);border:1px solid rgba(231,178,92,.3);margin-top:20px}
.ruo svg{width:17px;height:17px;stroke:var(--amber);fill:none;stroke-width:2;flex-shrink:0;margin-top:1px}
.ruo p{font-size:12.5px;font-weight:600;color:var(--amber);letter-spacing:.02em;line-height:1.5;
  text-transform:uppercase}

/* accordion detail sections */
.pacc{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.pacc details{border:1px solid var(--line2);border-radius:10px;background:var(--deep);overflow:hidden}
.pacc summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-family:var(--sans);font-size:15px;font-weight:600;
  color:var(--cream);transition:background .16s}
.pacc summary::-webkit-details-marker{display:none}
.pacc summary:hover{background:var(--panel)}
.pacc summary .chev{width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .22s,
  border-color .16s,background .16s}
.pacc summary .chev svg{width:12px;height:12px;stroke:var(--cyan);fill:none;stroke-width:2.4}
.pacc details[open] summary .chev{transform:rotate(180deg);background:rgba(111,217,247,.12);
  border-color:rgba(111,217,247,.4)}
.pacc .accbody{padding:0 20px 20px;border-top:1px solid var(--line)}
.pacc .accbody>*:first-child{margin-top:16px}

@media(max-width:860px){
  .pbadges{gap:6px;margin-bottom:16px}
  .pbadge{font-size:10.5px;padding:6px 11px}
  .prange .amt{font-size:clamp(24px,7vw,32px)}
  .ptrust{grid-template-columns:1fr;margin:18px 0}
  .ptrust div{padding:14px 12px;display:flex;align-items:center;gap:12px;text-align:left}
  .ptrust svg{margin:0}
  .coaband{padding:14px 15px;gap:11px}
  .coaband .flag2{margin-left:0;width:100%;justify-content:center}
  .sizeblock{padding:16px}
  .selrow .p{margin-left:0;width:100%}
  .pacc summary{padding:15px 16px;font-size:14.5px}
  .pacc .accbody{padding:0 16px 16px}
}

/* ═══════════════════════════════════════════════════════════════
   v8b — narrow overrides, last in the file
   The v8 product block is a 860px query, so it would otherwise
   override the earlier 430px rules on a small phone. Restating the
   narrow cases here keeps the cascade in the right order.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:430px){
  .pack-grid{grid-template-columns:repeat(2,1fr)}
  .pquick{grid-template-columns:1fr}
  .pframe img{height:min(200px,54vw)}
  .coadoc-frame{height:330px}
  .tab{font-size:12.5px;padding:11px 10px}
  .prange .amt{font-size:clamp(22px,7.6vw,28px)}
  .pbadge{font-size:10px;padding:5px 10px}
  .ptrust div{padding:12px 11px}
  .sizeblock{padding:14px}
  .selrow{padding:12px 13px}
  .selrow .p{font-size:19px}
  .btn-primary{padding:15px 18px;font-size:14.5px}
  .pacc summary{font-size:14px;padding:14px}
}

/* ═══════════════════════════════════════════════════════════════
   v9 — mobile navigation
   The old mobile nav just unhid the desktop list, so the "•"
   separators between links became stray bullets down the page and
   nothing was tappable. This is a real slide-in panel.
   ═══════════════════════════════════════════════════════════════ */

.navscrim{position:fixed;inset:0;z-index:80;background:rgba(4,7,10,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .26s,visibility .26s}
.navscrim.on{opacity:1;visibility:visible}

.navpanel{position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);z-index:81;
  background:var(--deep);border-left:1px solid var(--line2);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.85,.3,1);
  display:flex;flex-direction:column;overscroll-behavior:contain;
  box-shadow:-24px 0 60px rgba(0,0,0,.6)}
.navpanel.on{transform:none}

.navpanel-top{display:flex;align-items:center;gap:12px;padding:18px 20px;
  border-bottom:1px solid var(--line);flex-shrink:0}
.navpanel-top .mk{display:flex;align-items:center;gap:9px}
.navpanel-top .mk svg{width:24px;height:28px}
.navpanel-top .mk svg path{stroke:var(--cyan);stroke-width:2.2;fill:none}
.navpanel-top b{font-family:var(--display);font-weight:800;font-size:15px;color:var(--cream);
  letter-spacing:.1em}
.navpanel-top b span{color:var(--cyan)}
.navclose{margin-left:auto;width:36px;height:36px;border-radius:9px;border:1px solid var(--line2);
  background:var(--panel);color:var(--body);display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0}
.navclose:hover{border-color:var(--cyan);color:var(--cyan)}
.navclose svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}

.navpanel-links{flex:1;overflow-y:auto;padding:10px 0;-webkit-overflow-scrolling:touch}
.navpanel-links a{display:flex;align-items:center;gap:14px;padding:15px 20px;
  font-family:var(--sans);font-size:16px;font-weight:500;color:var(--paper);
  border-bottom:1px solid var(--line);transition:background .15s,color .15s;position:relative}
.navpanel-links a:last-child{border-bottom:none}
.navpanel-links a:active{background:var(--panel)}
.navpanel-links a:hover{background:var(--panel);color:var(--cream)}
.navpanel-links a.on{color:var(--cyan);background:rgba(111,217,247,.06)}
.navpanel-links a.on:before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;
  border-radius:0 3px 3px 0;background:var(--cyan)}
.navpanel-links a .ic{width:20px;height:20px;flex-shrink:0;opacity:.85}
.navpanel-links a .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.navpanel-links a .arw{margin-left:auto;width:14px;height:14px;stroke:var(--faint);fill:none;
  stroke-width:2.2;flex-shrink:0}

.navpanel-foot{flex-shrink:0;padding:18px 20px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;gap:9px}
.navpanel-foot .btn{width:100%;justify-content:center}
.navpanel-foot .who{display:flex;align-items:center;gap:11px;padding-bottom:13px;
  margin-bottom:4px;border-bottom:1px solid var(--line)}
.navpanel-foot .who .av{width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--cyan),var(--cyan-deep));color:#04161E;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-weight:800;font-size:14px}
.navpanel-foot .who b{display:block;font-size:14px;color:var(--cream);font-weight:600}
.navpanel-foot .who span{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.navpanel-foot .trust{display:flex;flex-wrap:wrap;gap:7px 14px;padding-top:12px;
  border-top:1px solid var(--line);margin-top:4px}
.navpanel-foot .trust span{font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}

body.navlock{overflow:hidden}


/* ═══════════════════════════════════════════════════════════════
   v11 — the store
   Add-to-cart buttons, catalog cards as cards, the product buy box,
   header search, WooCommerce messages, order history, contact.
   Cart and checkout pages are in woo.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── add-to-cart buttons ──────────────────────────────────────── */
.mini.add{background:var(--cyan);border-color:var(--cyan);color:#04161E;font-weight:600;
  transition:background .15s,border-color .15s,box-shadow .2s,opacity .15s}
.mini.add:hover{background:var(--cyan-hot);border-color:var(--cyan-hot);color:#04161E;
  box-shadow:0 0 18px var(--glow-hot)}
.mini.add svg{width:14px;height:14px;stroke-width:2}
.mini.add:disabled{background:transparent;border-color:var(--line2);color:var(--dim);cursor:not-allowed;
  box-shadow:none}
.mini,.btn{-webkit-tap-highlight-color:transparent}
.btn svg{flex-shrink:0}

/* working… */
.is-busy{pointer-events:none;position:relative}
.is-busy>svg,.is-busy>span{opacity:0}
.is-busy:after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid rgba(4,22,30,.25);border-top-color:#04161E;border-radius:50%;
  animation:atlasspin .7s linear infinite}
.btn.ghost.is-busy:after{border-color:var(--line3);border-top-color:var(--cyan)}
.btn.is-busy:before{display:none}
/* …done */
.mini.add.is-done,.btn.is-done{background:var(--green);border-color:var(--green);color:#052014;box-shadow:none}
.is-done>svg{display:none}
.is-done>span:before{content:'\2713\00a0'}

/* badge bounce when something lands in the cart */
@keyframes badgepop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.qbadge.pop{animation:badgepop .4s cubic-bezier(.3,1.4,.5,1)}

/* ── catalog cards ────────────────────────────────────────────────
   Separate cards rather than one ruled sheet, so a filtered or
   part-filled row looks deliberate instead of leaving blank cells. */
.spec-grid{gap:14px;background:none;border:none;border-radius:0;overflow:visible}
.spec-grid.is-empty,.tablewrap.is-empty{display:none}
.specimen{border:1px solid var(--line2);border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,rgba(17,22,28,.92),rgba(10,13,16,.92));
  transition:border-color .22s,transform .22s,background .22s}
.specimen:hover{border-color:rgba(111,217,247,.36);transform:translateY(-3px);
  background:linear-gradient(180deg,rgba(19,25,32,.95),rgba(11,14,18,.95))}
.specimen .info{border-top:var(--hair)}
.specimen dl{padding-top:2px}
.specimen dd.av{color:var(--green)}
.specimen dd.av.low{color:var(--amber)}
.specimen dd.av.none{color:var(--dim)}
.specimen .badge.off{color:var(--dim)}
.specimen .badge.sale{border-color:rgba(79,203,146,.4);color:var(--green)}
.specimen.is-out .stagebox img{opacity:.45;filter:grayscale(.6) drop-shadow(0 16px 30px rgba(0,0,0,.75))}
.specimen .price{display:flex;align-items:baseline;gap:7px;margin-top:6px;font-size:20px}
.specimen .price small{font-size:11px;order:0}
.specimen .price s{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--faint)}
.specimen .acts{gap:8px;padding-top:14px}
.specimen .acts .mini{justify-content:center;padding:9px 13px}
.specimen .acts .mini.add{flex:1}

.bs-tag.off{background:transparent;color:var(--dim);border-color:var(--line2)}
.bs-acts{display:flex;gap:7px;flex-shrink:0}
.bs-price small{display:inline;margin-left:6px}

/* ── catalog toolbar ──────────────────────────────────────────── */
.toolrow.tools2{justify-content:space-between}
.tools2 .resultcount{margin-right:auto}
.sortbox{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;color:var(--dim)}
.sortbox select{width:auto;padding:8px 30px 8px 12px;font-size:13px;border-radius:5px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C9AA6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center/13px}
.viewtoggle{margin-left:0}
.empty b{display:block;font-family:var(--display);font-weight:700;font-size:17px;color:var(--cream);margin-bottom:6px}
.empty span{display:block;font-size:13px;color:var(--faint)}
.empty .mini{margin-top:16px}
td.pricecell small{font-family:var(--sans);font-size:11px;font-weight:400;color:var(--faint)}
.rowname img{transition:none}

/* ── product page: price, stock, buy box ──────────────────────── */
.pstock{font-family:var(--sans);font-size:12px;font-weight:600;padding:5px 11px;border-radius:100px;
  border:1px solid rgba(79,203,146,.34);background:rgba(79,203,146,.1);color:var(--green);
  align-self:center;white-space:nowrap}
.pstock.low{border-color:rgba(231,178,92,.36);background:rgba(231,178,92,.1);color:var(--amber)}
.pstock.none{border-color:var(--line2);background:transparent;color:var(--dim)}
.selrow .p{display:inline-flex;align-items:baseline;gap:9px}
.selrow .p s{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--faint)}
.selrow .p s:empty{display:none}
.unitnote{font-size:12px;color:var(--faint);margin-top:8px;text-align:right;min-height:0}
.unitnote span:empty{display:none}
.qtyrow .qty{border-radius:8px}
.qtyrow .qty button{width:42px;height:46px;font-size:18px}
.qtyrow .qty input{width:52px;height:46px;font-size:15px;font-weight:600;font-family:var(--sans);padding:0}
.qtyrow .qty input:focus{box-shadow:none}
.btn-primary{min-height:56px}
.btn-primary svg{width:19px;height:19px}
.buyperks{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:18px;padding-top:16px;
  border-top:var(--hair)}
.buyperks li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.buyperks svg{width:16px;height:16px;color:var(--cyan);flex-shrink:0}
.handlist{list-style:none;display:flex;flex-direction:column;gap:13px}
.handlist li{display:flex;gap:13px;color:var(--muted);font-size:13.5px;line-height:1.6}
.handlist li:before{content:'';width:5px;height:5px;background:var(--cyan);border-radius:50%;
  margin-top:8px;flex-shrink:0}
.related{border-top:var(--hair)}
.related .spec-grid.rel-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}
.related .spec-grid.rel-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.admin-hint{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;
  color:var(--amber);background:rgba(231,178,92,.08);border:1px dashed rgba(231,178,92,.4);
  border-radius:5px;padding:5px 9px;margin:8px 0 2px;line-height:1.5}
.atlas-vial-thumb{object-fit:contain}
.pbadge.lead{text-transform:uppercase}
/* an odd number of quick facts: the last one takes the full row */
.pquick div:last-child:nth-child(odd){grid-column:1 / -1}

/* "Add to cart" buttons sit in a small form of their own (it is what
   makes them work without the script); the form takes up no room */
.addform{display:contents}

/* sizes are radio buttons inside their labels */
.pack{display:block;-webkit-tap-highlight-color:transparent}
.pack input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pack:has(input:checked){border-color:var(--cyan);background:rgba(111,217,247,.07);box-shadow:0 0 20px rgba(111,217,247,.12)}
.pack:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}
form.sizeblock{display:block}

/* with scripts off: each size shows its own price, and the quantity is typed */
html:not(.js) .selrow,html:not(.js) .unitnote,html:not(.js) [data-qty-step]{display:none}
html:not(.js) .qtyrow .qty input{border-radius:8px}

/* the buy box now sits straight under the price */
.sizeblock{margin-top:20px}
.sizeblock + .ptrust{margin-top:22px}
/* one size: no chooser, just what it is (the chooser stays in the page for the script) */
.sizeblock.one .packs,.sizeblock.one .selrow,.sizeblock.one .unitnote{display:none}
.onesize{display:flex;align-items:baseline;gap:10px}
.onesize .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.onesize b{font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--cream)}
.onesize .sku{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--faint)}
.sizeblock.one .qtyrow{margin-top:14px;padding-top:14px;border-top:var(--hair)}
/* "View cart" appears once there is something in it */
.sizeblock .viewcart{margin-top:9px;gap:9px}
.sizeblock .viewcart:not(.has){display:none}

/* the bar that follows a phone down the product page */
.stickybar{padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:12px;
  transform:translateY(105%);transition:transform .28s cubic-bezier(.3,.8,.3,1)}
.stickybar.on{transform:none}
.stickybar .sb-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.stickybar .sb-info b{display:block;flex:none}
.stickybar .sb-info>span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickybar .sp{font-family:var(--sans);font-weight:700;font-size:12.5px;color:var(--cyan)}
.stickybar .btn{flex-shrink:0;padding:12px 18px;font-size:14px;border-radius:8px}

/* ── header search ────────────────────────────────────────────── */
.search-scrim{position:fixed;inset:0;background:rgba(4,6,8,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  z-index:210;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.search-scrim.open{opacity:1;visibility:visible}
.searchpop{position:fixed;top:72px;left:50%;z-index:220;width:min(640px,calc(100vw - 28px));
  max-height:min(76vh,640px);display:flex;flex-direction:column;background:var(--deep);
  border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7);
  transform:translate(-50%,-10px);opacity:0;visibility:hidden;
  transition:opacity .2s,transform .2s,visibility .2s}
.searchpop.open{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sp-bar{display:flex;align-items:center;gap:12px;padding:6px 14px 6px 18px;border-bottom:var(--hair);flex-shrink:0}
.sp-bar>svg{width:19px;height:19px;color:var(--dim);flex-shrink:0}
.sp-bar input{flex:1;border:none;background:transparent;padding:14px 0;font-size:16px;border-radius:0;min-width:0;
  color:var(--cream);caret-color:var(--cyan);font-family:var(--sans);outline:none;-webkit-appearance:none;appearance:none}
.sp-bar input:focus{box-shadow:none;border:none}
.sp-bar input::placeholder{color:var(--faint)}
.sp-bar input::-webkit-search-cancel-button{display:none}
.sp-close{background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0}
.sp-close kbd{font-family:var(--mono);font-size:10.5px;color:var(--dim);border:1px solid var(--line2);
  border-radius:5px;padding:4px 7px;background:var(--panel)}
.sp-close:hover kbd{color:var(--cyan);border-color:var(--cyan)}
.sp-results{flex:1;overflow-y:auto;padding:8px;scrollbar-width:thin;overscroll-behavior:contain}
.sp-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);padding:10px 12px 8px}
.sp-row{display:flex;align-items:center;gap:14px;padding:9px 12px;border-radius:9px;
  transition:background .12s}
.sp-row:hover,.sp-row.cur{background:var(--panel2)}
.sp-row img{width:34px;height:44px;object-fit:contain;flex-shrink:0;opacity:1!important}
.sp-row span{flex:1;min-width:0}
.sp-row b{display:block;font-family:var(--display);font-weight:700;font-size:15px;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-row small{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.sp-row em{font-style:normal;font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--cyan);
  white-space:nowrap}
.sp-note{padding:28px 16px;text-align:center;font-size:13.5px;color:var(--muted);line-height:1.6}
.sp-note a{color:var(--cyan)}
.sp-foot{border-top:var(--hair);padding:12px 18px;flex-shrink:0;background:var(--void)}
.sp-foot a{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--cyan)}
.sp-foot svg{width:14px;height:14px}

/* ── messages from WooCommerce ────────────────────────────────────
   "Coupon applied", "Sorry, only 2 left". Both the classic markup and
   the newer banner markup, so it is styled whichever a version uses. */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner{
  list-style:none;margin:0 0 18px;padding:14px 18px;border-radius:10px;font-size:14px;line-height:1.55;
  color:var(--paper);background:rgba(111,217,247,.07);border:1px solid rgba(111,217,247,.26);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.woocommerce-message,.wc-block-components-notice-banner.is-success{background:rgba(79,203,146,.07);
  border-color:rgba(79,203,146,.32)}
.woocommerce-error,.wc-block-components-notice-banner.is-error{background:rgba(228,104,91,.07);
  border-color:rgba(228,104,91,.36);display:block}
.woocommerce-error li{list-style:none;padding:2px 0}
.woocommerce-error li+li{margin-top:4px}
.woocommerce-message:focus,.woocommerce-info:focus,.woocommerce-error:focus{outline:none}
.woocommerce-message a,.woocommerce-info a,.woocommerce-error a,
.wc-block-components-notice-banner a{color:var(--cyan);font-weight:600}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button,
.wc-block-components-notice-banner .button{order:2;margin-left:auto;display:inline-flex;align-items:center;
  font-size:13px;font-weight:600;padding:8px 14px;border-radius:6px;border:1px solid var(--line2);
  color:var(--cream);background:rgba(11,15,19,.6);white-space:nowrap}
.woocommerce-message .button:hover,.woocommerce-info .button:hover{border-color:var(--cyan);color:var(--cyan)}
.wc-block-components-notice-banner>svg{width:20px;height:20px;flex-shrink:0;fill:currentColor;
  background:none!important;padding:0!important}
.wc-block-components-notice-banner__content{flex:1}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.atlas-restricted{margin:0 0 16px}

/* ── checkout progress (cart → checkout → confirmation) ───────── */
.costeps{list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 2px}
.costeps li{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13px;
  font-weight:500;color:var(--faint)}
.costeps li+li:before{content:'';width:26px;height:1px;background:var(--line3);margin-right:1px}
.costeps li span{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line3);
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:11.5px;
  font-weight:700;line-height:1}
.costeps li.on{color:var(--cream)}
.costeps li.on span{border-color:var(--cyan);background:var(--cyan);color:#04161E}
.costeps li.done{color:var(--body)}
.costeps li.done span{border-color:var(--green);background:rgba(79,203,146,.14);color:var(--green);font-size:11px}
.costeps li a:hover{color:var(--cyan)}
.woo-hero{padding:38px 0 30px}
.woo-hero h1{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.woo-hero .costeps{margin-bottom:0}

/* ── account: orders ──────────────────────────────────────────── */
.ocard{border:1px solid var(--line2);border-radius:12px;background:var(--deep);overflow:hidden}
.ocard+.ocard{margin-top:14px}
.ocard header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;
  background:var(--panel);border-bottom:var(--hair)}
.ocard .oid{margin-right:auto}
.ocard .oid b{display:block;font-family:var(--display);font-weight:800;font-size:16px;color:var(--cream)}
.ocard .oid span{display:block;font-size:12.5px;color:var(--faint);margin-top:3px}
.ocard .ototal{font-family:var(--display);font-weight:800;font-size:17px;color:var(--cream);
  font-variant-numeric:tabular-nums}
.ostatus{font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:100px;white-space:nowrap;
  border:1px solid var(--line2);color:var(--muted);background:var(--deep)}
.ostatus.s-processing,.ostatus.s-on-hold{border-color:rgba(111,217,247,.36);color:var(--cyan);background:rgba(111,217,247,.08)}
.ostatus.s-completed{border-color:rgba(79,203,146,.36);color:var(--green);background:rgba(79,203,146,.08)}
.ostatus.s-pending,.ostatus.s-failed{border-color:rgba(231,178,92,.4);color:var(--amber);background:rgba(231,178,92,.08)}
.ostatus.s-cancelled,.ostatus.s-refunded{color:var(--dim)}
.oitems{list-style:none}
.oitems li{display:grid;grid-template-columns:34px 1fr auto auto;gap:14px;align-items:center;
  padding:12px 20px;border-bottom:var(--hair)}
.oitems img{width:30px;height:42px;object-fit:contain}
.oitems .on{min-width:0;font-size:14px;font-weight:600;color:var(--cream)}
.oitems .on a:hover{color:var(--cyan)}
.oitems .on small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--faint);margin-top:3px}
.oitems .oq{font-size:13px;color:var(--muted);white-space:nowrap}
.oitems b{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--cream);white-space:nowrap}
.ocard footer{display:flex;gap:16px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;
  padding:14px 20px 16px}
.ometa{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.ometa span{font-size:12.5px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.ometa em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);display:inline-block;min-width:92px}
.ometa .onote{color:var(--paper)}
.ometa a{color:var(--cyan)}
.oacts{display:flex;gap:8px;align-items:center;flex-shrink:0}
.qempty{text-align:center;padding:64px 24px;border:1px dashed var(--line2);border-radius:12px}
.qempty h3{font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:10px;color:var(--cream)}
.qempty p{color:var(--muted);font-size:14px;margin-bottom:22px}

/* account details: a link inside a hint, and room above "Change password" */
.hint a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.acct-main form .frow + fieldset{margin-top:28px}

/* FAQ group headings: the rule was written for a heading inside .faq,
   and the page prints it just before */
h2.grp{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cyan);margin:46px 0 14px}
h2.grp:first-child{margin-top:0}

/* ── contact ──────────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.contact-form{margin-top:0}
.contact-side{display:flex;flex-direction:column;gap:14px}
.contact-form textarea{min-height:150px}
/* a field for scripts to fill in; people never see it */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ── footer details ───────────────────────────────────────────── */
.fblurb{max-width:36ch;line-height:1.76;margin-top:18px}
.fbot a{color:inherit}
.fbot a:hover{color:var(--cyan)}
.discl dd a b{text-decoration:underline;text-underline-offset:3px}
.legal{max-width:none}

/* links inside running text on the content pages */
.atlas-content{color:var(--body);font-size:15.5px;line-height:1.74}
.atlas-content a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.atlas-content h2,.atlas-content h3,.atlas-content h4{font-family:var(--display);color:var(--cream);margin:1.7em 0 .55em;line-height:1.2}
.atlas-content h2{font-size:23px}
.atlas-content h3{font-size:18.5px}
.atlas-content h4{font-size:16px}
.atlas-content>:first-child{margin-top:0}
.atlas-content p,.atlas-content ul,.atlas-content ol,.atlas-content table,.atlas-content blockquote{margin-bottom:1.05em}
.atlas-content ul,.atlas-content ol{padding-left:1.3em}
.atlas-content li{margin:.32em 0}
.atlas-content strong,.atlas-content b{color:var(--cream);font-weight:600}
.atlas-content img{max-width:100%;height:auto;border-radius:8px}
.atlas-content blockquote{border-left:2px solid var(--cyan);padding:2px 0 2px 18px;color:var(--paper)}
.atlas-content table{width:100%;border-collapse:collapse;font-size:14.5px}
.atlas-content th,.atlas-content td{border-bottom:var(--hair);padding:10px 12px 10px 0;text-align:left;vertical-align:top}
.atlas-content th{color:var(--cream);font-weight:600}
.atlas-content hr{border:none;border-top:var(--hair);margin:2em 0}

/* the avatar button holds an icon when nobody is signed in */
.avatar{width:40px;height:40px;border-radius:10px}
.avatar svg{width:18px;height:18px}
.avatar.in{background:rgba(111,217,247,.12);border-color:rgba(111,217,247,.4)}
.am-head .avatar{border-radius:10px}
.am-links svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* the logo mark on the entry screen (it was only drawn inside .brand) */
.gm .mark{width:26px;height:30px;flex-shrink:0}
.gm .mark path{stroke:var(--cyan);stroke-width:2.4;fill:none}

/* The "Get 15% off" button used to float over the bottom corner of the
   page, which is where the Add to cart buttons end up as you scroll.
   It is a slim tab on the edge of the screen instead, in the gutter. */
.offer-tab,body.hasbar .offer-tab{right:0;bottom:auto;top:46%;padding:9px 16px;font-size:12.5px;gap:8px;
  border-radius:10px 10px 0 0;transform-origin:100% 100%;transform:rotate(-90deg) translateY(100%);
  box-shadow:0 0 22px rgba(111,217,247,.26)}
.offer-tab.show,.offer-tab.show:active{transform:rotate(-90deg)}
.offer-tab.show:hover{transform:rotate(-90deg) translateY(-3px);box-shadow:0 0 30px rgba(111,217,247,.42)}
.offer-tab:after{display:none}

/* nothing floats over an open menu, cart, search or popup */
body.atlas-locked .offer-tab,body.atlas-locked .totop,body.atlas-locked .stickybar,
body.navlock .offer-tab,body.navlock .totop,body.navlock .stickybar{opacity:0;pointer-events:none}

/* iPhones zoom the whole page when a focused field's text is under 16px,
   and do not zoom back out. Touch screens get 16px in every field. */
@media(hover:none) and (pointer:coarse){
  input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],
  input[type=number],input[type=search],input[type=url],select,textarea,
  .sortbox select,.qtyrow .qty input{font-size:16px}
}

/* ── v11 responsive ───────────────────────────────────────────── */
@media(max-width:1080px){
  .site-nav{display:none}
  .burger{display:inline-flex}
  .related .spec-grid.rel-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid{grid-template-columns:1fr}
}
@media(min-width:1081px){
  .navpanel,.navscrim{display:none}
}
@media(max-width:760px){
  .head-bar{height:60px;gap:8px}
  .brand{gap:10px}
  .brand .mark{width:25px;height:29px}
  .brand b{font-size:16px}
  .brand i{font-size:7px;letter-spacing:.2em;margin-top:5px}
  .head-right{gap:6px}
  .acct-wrap{display:none}                 /* account lives in the menu panel on a phone */
  .hbtn,.burger,.cartbtn{width:40px;height:40px}
  .hbtn{border-color:var(--line2);background:rgba(13,17,22,.72)}
  .cartbtn{padding:0;justify-content:center}
  .cartbtn .lbl{display:none}
  .cartbtn .qbadge{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;line-height:19px;
    padding:0 5px;font-size:11px;box-shadow:0 0 0 2px var(--void)}
  .searchpop{top:10px;max-height:calc(100dvh - 20px)}
  .sp-close{padding:4px}
  .sp-close kbd{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
    font-size:0;border-radius:8px}
  .sp-close kbd:before{content:'\2715';font-size:13px;line-height:1}

  /* two cards across, trimmed to what a thumb needs */
  .spec-grid,.spec-grid.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .specimen .stagebox{height:138px}
  .specimen .stagebox img{height:106px}
  .specimen .stagebox .sword{font-size:34px}
  .specimen .idx{display:none}
  .specimen .badge{top:9px;right:9px;font-size:9.5px;padding:3px 7px;max-width:calc(100% - 18px);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .specimen .info{padding:12px 12px 13px;gap:6px}
  .specimen h3{font-size:14.5px;line-height:1.2}
  .specimen .cls,.specimen dl{display:none}
  .specimen .price{font-size:17px;margin-top:2px}
  .specimen .acts{padding-top:10px}
  .specimen .acts .mini:not(.add){display:none}
  .specimen .acts .mini.add{padding:11px 8px;font-size:13px}
  .specimen:hover{transform:none}

  .bs-foot{flex-wrap:wrap}
  .toolrow.tools2{gap:8px}
  .tools2 .resultcount{flex-basis:100%;order:3}
  .sortbox span{display:none}
  .oitems li{grid-template-columns:30px 1fr auto;padding:12px 16px}
  .oitems .oq{grid-column:2;grid-row:2;font-size:12px}
  .oitems b{grid-row:1 / span 2;grid-column:3}
  .ocard header,.ocard footer{padding-left:16px;padding-right:16px}
  .ometa em{display:block;min-width:0;margin-bottom:1px}
  .costeps li+li:before{width:14px}
  .costeps{gap:7px}
  .woo-hero{padding:26px 0 22px}
  .woocommerce-message .button,.woocommerce-info .button{margin-left:0}
  .dr-body{padding:4px 16px}
  .dr-head,.dr-ship{padding-left:16px;padding-right:16px}
  .dr-foot{padding-left:16px;padding-right:16px}
  .dr-line{grid-template-columns:56px 1fr auto;gap:12px}
  .dr-thumb{width:56px;height:70px}
  .toast{left:14px;right:14px;transform:translateY(-20px);max-width:none}
  .toast.show{transform:translateY(0)}

  .selrow .p{margin-left:auto;width:auto}
  .scrollcue{display:none}                 /* it sat on top of the line above it; a phone needs no hint to scroll */

  /* the catalog on a phone: get to the products sooner */
  .catalog-hero{padding:20px 0 18px}
  .catalog-hero .sub,.catalog-hero .tag-line{display:none}
  .catalog-hero h1{font-size:27px;margin-top:10px}
  .catalog-sec{padding-top:22px}
  /* a plain lot number is on the spec sheet; only stock news earns the corner */
  .specimen .badge:not(.off):not(.hot):not(.sale){display:none}

  .offer-tab,body.hasbar .offer-tab{top:44%;padding:8px 13px;font-size:12px;gap:7px;border-radius:9px 9px 0 0}
  .offer-tab svg{width:14px;height:14px}
}

/* ═══════════════════════════════════════════════════════════════
   NARROW OVERRIDES — must stay the last media query in this file
   Wider breakpoints (760px, 860px) also match a small phone, so
   anything appended after this block would silently beat it. New
   narrow rules go here, not in a new block at the end.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:430px){
  .pack-grid{grid-template-columns:repeat(2,1fr)}
  .pquick{grid-template-columns:1fr}
  .pframe img{height:min(200px,54vw)}
  .coadoc-frame{height:330px}
  .tab{font-size:12.5px;padding:11px 10px}
  .prange .amt{font-size:clamp(22px,7.6vw,28px)}
  .pbadge{font-size:10px;padding:5px 10px}
  .ptrust div{padding:12px 11px}
  .sizeblock{padding:14px}
  .selrow{padding:12px 13px}
  .selrow .p{font-size:19px}
  .btn-primary{padding:15px 18px;font-size:14.5px}
  .pacc summary{font-size:14px;padding:14px}
  .display .l1,.display .l2{font-size:clamp(38px,15vw,58px)}
  .brand i{display:none}
  .head-bar{gap:6px}
  .specimen .acts .mini.add svg{display:none}
  .costeps li{font-size:12px}
  .dr-total b{font-size:22px}
  .pquick{grid-template-columns:1fr 1fr}
  .pquick div{padding:10px 12px}
  .onesize .sku{display:none}
}