/* ============================================================
   CAMO ENERGY — base.css
   Structural + component layer. Everything is driven by tokens
   that themes.css redefines per html[data-style="1..5"].
   Never hardcode a brand color/font here — use a token so all
   five styles can retheme it.
   ============================================================ */

:root{
  /* default tokens (Style 1 fallback) — themes.css overrides */
  --bg:#070908; --surface:#0d100d; --surface-2:#12160f;
  --ink:#eef3ea; --ink-2:#8c968b; --ink-3:#5c655a;
  --accent:#4FE82E; --accent-ink:#04120a; --accent-2:#E8B93A; --accent-2-ink:#1a1305;
  --line:#1e2419; --line-2:#2a3122;
  --font-display:800 1em/1 system-ui,"Helvetica Neue",Arial,sans-serif;
  --font-body:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --dspace:-.03em; --dcase:none; --wm-space:.16em; --wm-case:uppercase;
  --radius:12px; --radius-lg:18px; --btn-radius:8px;
  --maxw:1180px; --nav-h:70px;
  --shadow:0 20px 50px -30px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; text-wrap:balance}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,28px)}
.dfont{font:var(--font-display); letter-spacing:var(--dspace); text-transform:var(--dcase)}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent)}
.muted{color:var(--ink-2)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- buttons ---------- */
.btn{
  cursor:pointer; font:inherit; font-weight:700; font-size:14px; letter-spacing:.04em;
  text-transform:uppercase; padding:14px 26px; border-radius:var(--btn-radius); border:none;
  background:var(--accent); color:var(--accent-ink);
  display:inline-flex; align-items:center; gap:10px; transition:transform .12s ease, filter .15s;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.btn.gold{background:var(--accent-2); color:var(--accent-2-ink)}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line-2)}
.btn.block{width:100%; justify-content:center}
.pwr{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;position:relative;flex:none}
.pwr::before{content:"";position:absolute;left:50%;top:1px;width:2px;height:6px;background:currentColor;transform:translateX(-50%)}

/* ---------- site nav ---------- */
.site-nav{
  display:flex; align-items:center; gap:26px; height:var(--nav-h);
  border-bottom:1px solid var(--line); position:sticky; top:var(--switchbar-h,0); z-index:80;
  background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px);
}
.site-nav .wm{font:var(--font-display); font-size:24px; letter-spacing:var(--wm-space); text-transform:var(--wm-case); color:var(--ink)}
.site-nav .links{display:flex; gap:22px; margin-left:6px}
.site-nav .links a{color:var(--ink-2); font-size:14px; font-weight:600; letter-spacing:.02em}
.site-nav .links a:hover, .site-nav .links a[aria-current="page"]{color:var(--ink)}
.site-nav .cart{margin-left:auto; font:inherit; cursor:pointer; font-size:13px; font-weight:700;
  padding:9px 16px; border-radius:var(--btn-radius); background:var(--accent); color:var(--accent-ink);
  letter-spacing:.03em; text-transform:uppercase; border:none}
@media(max-width:680px){.site-nav .links{display:none}}

/* ---------- hero (generic) ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(56px,9vw,92px) 0 clamp(48px,7vw,72px)}
.hero .decor{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero .wrap{position:relative; z-index:1}
.hero h1{font:var(--font-display); font-size:clamp(40px,8vw,84px); line-height:.98;
  letter-spacing:var(--dspace); text-transform:var(--dcase); color:var(--ink); margin:0 0 20px; max-width:15ch}
.hero .lede{font-size:clamp(16px,2.2vw,20px); color:var(--ink-2); max-width:54ch; margin:0 0 30px}
.hero .eyebrow{margin-bottom:18px}
.herobtns{display:flex; gap:14px; flex-wrap:wrap}

/* ---------- crossroads (index signature): Edge | Glow ---------- */
.crossroads{display:grid; grid-template-columns:1fr 1fr; min-height:min(78vh,760px); position:relative}
.cross-side{padding:clamp(40px,6vw,84px) clamp(28px,5vw,68px); display:flex; flex-direction:column;
  justify-content:center; position:relative; overflow:hidden; transition:flex-grow .4s ease}
.cross-edge{background:var(--edge-bg,linear-gradient(160deg,#0c130a,#050705)); color:var(--edge-ink,#eef3ea)}
.cross-glow{background:var(--glow-bg,linear-gradient(160deg,#faf3ea,#efe2cd)); color:var(--glow-ink,#241a10)}
.cross-side>*{position:relative; z-index:1}
.cross-art{position:absolute; bottom:-4%; width:72%; max-width:520px; object-fit:contain;
  z-index:0; pointer-events:none; opacity:var(--cross-art-opacity,.95);
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.cross-edge .cross-art{right:-6%}
.cross-glow .cross-art{left:-6%}
.cross-side .eyebrow{margin-bottom:14px}
@media(max-width:680px){.cross-art{position:static; width:70%; max-width:300px; margin:22px auto 0; opacity:.9}}
.cross-edge .eyebrow{color:var(--accent)}
.cross-glow .eyebrow{color:var(--accent-2-ink)}
.cross-side h2{font:var(--font-display); font-size:clamp(30px,4.6vw,58px); letter-spacing:var(--dspace);
  text-transform:var(--dcase); margin:0 0 12px}
.cross-side p{max-width:34ch; margin:0 0 24px; opacity:.9}
.cross-glow h2, .cross-glow p{color:var(--glow-ink,#241a10)}
.seam{position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); z-index:5;
  background:linear-gradient(180deg,transparent,var(--chrome,#B8B8B8),transparent);
  display:flex; align-items:center; justify-content:center}
.seam span{position:absolute; background:var(--bg); color:var(--ink); font:800 13px/1 var(--font-body);
  letter-spacing:.24em; padding:12px 6px; writing-mode:vertical-rl; border:1px solid var(--line-2); border-radius:20px}
@media(max-width:680px){.crossroads{grid-template-columns:1fr}.seam{display:none}}

/* ---------- section ---------- */
.section{padding:clamp(48px,8vw,84px) 0; border-top:1px solid var(--line)}
.section.alt{background:var(--surface)}
.section h2{font:var(--font-display); font-size:clamp(26px,4.5vw,44px); letter-spacing:var(--dspace);
  text-transform:var(--dcase); color:var(--ink); margin:0 0 12px}
.section .sub{color:var(--ink-2); max-width:60ch; margin:0 0 34px; font-size:clamp(15px,2vw,18px)}

/* ---------- dual product feature ---------- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.pcard{border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,34px);
  background:var(--surface); position:relative; overflow:hidden; min-height:280px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:14px}
.pcard .plabel{font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.pcard h3{font:var(--font-display); font-size:clamp(28px,4vw,42px); letter-spacing:var(--dspace); text-transform:var(--dcase)}
.pcard p{color:var(--ink-2); margin:0; max-width:36ch}
.pcard .pimg{position:absolute; right:-6%; top:50%; transform:translateY(-50%); width:46%; max-width:280px; opacity:.96; z-index:0; pointer-events:none}
.pcard>*{position:relative; z-index:1}
@media(max-width:680px){.duo{grid-template-columns:1fr}.pcard .pimg{opacity:.35}}

/* ---------- proof stats ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px}
.stat{border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--bg); position:relative}
.stat .v{font:var(--font-display); font-size:clamp(30px,4vw,38px); letter-spacing:-.02em; color:var(--accent);
  font-variant-numeric:tabular-nums; line-height:1}
.stat .v small{font-size:.5em; letter-spacing:0}
.stat .k{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-top:8px}

/* ---------- buy card ---------- */
.buy{max-width:540px; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,32px); background:var(--surface)}
.buy .bt{font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.buy h3{font:var(--font-display); font-size:clamp(26px,3.5vw,32px); letter-spacing:var(--dspace); text-transform:var(--dcase); margin:8px 0 2px}
.buy .price{font:var(--font-display); font-size:clamp(32px,5vw,42px); letter-spacing:-.02em; color:var(--ink); margin:10px 0}
.buy .price small{font:400 14px/1 var(--font-body); color:var(--ink-2)}
.seg{display:flex; gap:8px; margin:16px 0}
.seg button{flex:1; font:inherit; cursor:pointer; padding:11px; border-radius:var(--btn-radius);
  border:1.5px solid var(--line-2); background:transparent; color:var(--ink-2); font-weight:700; font-size:13px}
.seg button[aria-pressed="true"]{border-color:var(--accent); color:var(--ink); background:color-mix(in srgb,var(--accent) 12%,transparent)}
.flavs{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0}
.flav{font:inherit; font-size:13px; padding:7px 13px; border-radius:999px; border:1px solid var(--line-2);
  color:var(--ink-2); cursor:pointer; background:transparent}
.flav[aria-pressed="true"]{border-color:var(--accent); color:var(--ink); background:color-mix(in srgb,var(--accent) 10%,transparent)}
.flav[disabled]{opacity:.4; cursor:not-allowed; text-decoration:line-through}
.subrow{display:flex; align-items:center; gap:10px; margin:16px 0; padding:14px;
  border:1px dashed var(--line-2); border-radius:var(--btn-radius); color:var(--ink-2); font-size:14px}
.subrow b{color:var(--ink)} .subrow .save{margin-left:auto; font-family:var(--font-mono); color:var(--accent); font-weight:700}

/* ---------- prose (about / long content) ---------- */
.prose{max-width:68ch; margin:0 auto}
.prose p{color:var(--ink-2); font-size:clamp(16px,2vw,18px); margin:0 0 20px}
.prose h3{font:var(--font-display); font-size:clamp(22px,3vw,30px); letter-spacing:var(--dspace); text-transform:var(--dcase); color:var(--ink); margin:36px 0 14px}
.prose blockquote{margin:28px 0; padding:18px 24px; border-left:3px solid var(--accent);
  font-size:clamp(18px,2.4vw,22px); color:var(--ink); font-style:italic}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line); padding:clamp(40px,6vw,56px) 0; background:var(--bg)}
.retail-bridge{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:clamp(20px,3vw,26px);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); margin-bottom:34px}
.retail-bridge .rt{font:var(--font-display); font-size:clamp(20px,3vw,26px); letter-spacing:var(--dspace); text-transform:var(--dcase); color:var(--ink)}
.retail-bridge p{margin:4px 0 0; color:var(--ink-2); font-size:14px}
.fcols{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px}
.fcols .wm{font:var(--font-display); font-size:20px; letter-spacing:var(--wm-space); text-transform:var(--wm-case); color:var(--ink)}
.fcols a{color:var(--ink-2); font-size:13px; display:block; margin:7px 0}
.fcols a:hover{color:var(--ink)}
.fcols p{color:var(--ink-3); font-size:13px; max-width:28ch; margin:8px 0 0}

/* ---------- product hero with visual ---------- */
.hero.has-visual .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.hero .hero-visual{justify-self:center}
.hero .hero-visual img{max-height:min(70vh,560px); width:auto; filter:drop-shadow(0 40px 60px rgba(0,0,0,.45))}
.badge-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.badge{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; padding:8px 14px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--ink-2); background:var(--surface)}
@media(max-width:760px){.hero.has-visual .wrap{grid-template-columns:1fr}.hero .hero-visual{order:-1}}

/* ---------- ingredient / function cards ---------- */
.ing-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.ing-card{border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:var(--surface); display:flex; flex-direction:column; gap:8px}
.ing-card .ing-name{font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.ing-card .dose{font:var(--font-display); font-size:44px; letter-spacing:-.03em; color:var(--accent); line-height:1}
.ing-card .dose .u{font-size:.4em; color:var(--ink-2); letter-spacing:0}
.ing-card .ing-title{font:var(--font-display); font-size:20px; letter-spacing:var(--dspace); text-transform:var(--dcase); color:var(--ink)}
.ing-card .ing-body{color:var(--ink-2); font-size:14px; margin:0}
.ing-card .ing-link{margin-top:auto; padding-top:10px; color:var(--accent); font-weight:600; font-size:13px}
.ing-card .ing-link:hover{text-decoration:underline}
.support-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:22px}
.support-item{display:flex; gap:12px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); font-size:14px; color:var(--ink-2)}
.support-item .sd{font-family:var(--font-mono); color:var(--accent); font-weight:700}

/* ---------- flavor cards ---------- */
.flavor-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.flavor-card{border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--surface); text-align:center; cursor:pointer; transition:transform .15s, border-color .15s}
.flavor-card:hover{transform:translateY(-4px); border-color:var(--accent)}
.flavor-card img{height:200px; width:auto; margin:0 auto 14px; object-fit:contain}
.flavor-card .fname{font:var(--font-display); font-size:22px; letter-spacing:var(--dspace); text-transform:var(--dcase); color:var(--ink)}
.flavor-card .fdesc{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:6px 0 12px}
.flavor-card .fstory{color:var(--ink-2); font-size:14px; text-align:left}

/* ---------- supplement facts panel ---------- */
.facts-wrapper{display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start}
.facts-narrative h3{font:var(--font-display); font-size:clamp(22px,3vw,30px); letter-spacing:var(--dspace); text-transform:var(--dcase); color:var(--ink); margin:0 0 14px}
.facts-narrative p{color:var(--ink-2); margin:0 0 16px}
.facts-narrative .callout{margin-top:20px; padding:16px 20px; border-left:3px solid var(--accent); background:var(--surface); color:var(--ink); font-weight:600}
.facts-panel{border:2px solid var(--ink); border-radius:8px; padding:18px 20px; background:#fff; color:#000; font-family:"Helvetica Neue",Arial,sans-serif}
.facts-panel h4{font-size:26px; font-weight:800; border-bottom:8px solid #000; padding-bottom:4px; margin:0 0 6px}
.facts-panel .serving{font-size:13px; margin-bottom:6px}
.facts-panel hr{border:none; border-top:1px solid #000; margin:6px 0}
.facts-panel hr.thick{border-top:8px solid #000}
.facts-panel .frow{display:flex; justify-content:space-between; font-size:13px; padding:3px 0; border-bottom:1px solid #ccc}
.facts-panel .frow.ind{padding-left:16px} .facts-panel .frow.ind2{padding-left:30px}
.facts-panel .dvh{text-align:right; font-size:12px; font-weight:700; padding:3px 0}
.facts-panel .foot{font-size:11px; margin-top:8px; color:#333}
@media(max-width:760px){.facts-wrapper{grid-template-columns:1fr}.facts-panel{max-width:380px}}

.badge.gold{border-color:color-mix(in srgb,var(--accent-2) 50%,transparent); color:var(--accent-2)}

/* ---------- comparison / receipt block ---------- */
.compare{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden}
.compare .ctitle{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); padding:16px 20px; border-bottom:1px solid var(--line)}
.compare .crow{display:flex; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--line); font-size:14px}
.compare .crow:last-child{border-bottom:none}
.compare .cbrand{color:var(--ink-2)} .compare .cbrand strong{color:var(--ink)}
.compare .cval{text-align:right; font-weight:600}
.compare .cval.good{color:var(--accent)} .compare .cval.bad{color:var(--ink-3)}

/* ---------- notify (launch tease) form ---------- */
.notify{margin-top:14px; padding:16px; border:1px dashed var(--accent-2); border-radius:var(--btn-radius); background:color-mix(in srgb,var(--accent-2) 8%,transparent)}
.notify p{margin:0 0 12px; font-size:13px; color:var(--ink-2)} .notify p strong{color:var(--ink)}
.notify .row{display:flex; gap:8px}
.notify input{flex:1; font:inherit; padding:12px 14px; border-radius:var(--btn-radius); border:1px solid var(--line-2); background:var(--bg); color:var(--ink)}
.notify button{font:inherit; cursor:pointer; font-weight:700; padding:12px 18px; border-radius:var(--btn-radius); border:none; background:var(--accent-2); color:var(--accent-2-ink); white-space:nowrap}
.notify .ok{color:var(--accent); font-size:13px; margin-top:8px}

/* ---------- trades grid ---------- */
.trades-grid{display:flex; flex-wrap:wrap; gap:10px}
.trade{font-family:var(--font-mono); font-size:13px; padding:9px 15px; border:1px solid var(--line-2); border-radius:999px; color:var(--ink-2); background:var(--surface)}

/* ---------- about: acronym reveal ---------- */
.acronym{text-align:center}
.acronym .mark{font:var(--font-display); font-size:clamp(60px,14vw,140px); letter-spacing:var(--wm-space); text-transform:uppercase; color:var(--ink); line-height:1}
.acronym-decode{display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(18px,5vw,54px); margin:28px 0 34px}
.acronym-letter{display:flex; flex-direction:column; align-items:center; gap:6px}
.acronym-letter .l{font:var(--font-display); font-size:32px; color:var(--accent)}
.acronym-letter .w{font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}

/* ---------- about: pulled quote ---------- */
.pquote{max-width:900px; margin:clamp(40px,7vw,72px) auto; padding:0 clamp(18px,4vw,28px); text-align:center}
.pquote p{font:var(--font-display); font-weight:var(--pq-weight,400); font-size:clamp(22px,3.6vw,34px); line-height:1.2;
  letter-spacing:var(--dspace); color:var(--ink); margin:0; font-style:italic; text-wrap:balance}
.pquote .attr{margin-top:18px; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}

/* ---------- about: two-column text+image ---------- */
.twocol{display:grid; grid-template-columns:1fr 340px; gap:44px; align-items:start; margin-top:40px}
.twocol .col p{color:var(--ink-2); margin:0 0 18px} .twocol .col p strong{color:var(--ink)}
.imgph{border:1px dashed var(--line-2); border-radius:var(--radius); background:var(--surface); min-height:280px;
  display:flex; align-items:center; justify-content:center; text-align:center; color:var(--ink-3); font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; padding:20px}
.imgph .flag{display:block; margin-top:8px; color:var(--accent-2)}
@media(max-width:760px){.twocol{grid-template-columns:1fr}}

/* ---------- about: product doctrine tiers ---------- */
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:36px}
.tier{border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:var(--surface)}
.tier .tnum{font-family:var(--font-mono); font-size:13px; color:var(--accent); letter-spacing:.1em}
.tier .ttitle{font:var(--font-display); font-size:24px; letter-spacing:var(--dspace); text-transform:var(--dcase); color:var(--ink); margin:8px 0 10px}
.tier .tbody{color:var(--ink-2); font-size:14px}

/* ---------- about: founder cards ---------- */
.founders{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:36px}
.founder{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden}
.founder .photo{aspect-ratio:1/1; background:linear-gradient(160deg,var(--surface-2),var(--bg)); display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid var(--line)}
.founder .fbody{padding:22px}
.founder .fname{font:var(--font-display); font-size:22px; letter-spacing:var(--dspace); text-transform:var(--dcase); color:var(--ink)}
.founder .ftitle{font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:4px 0 14px}
.founder .fbody p{color:var(--ink-2); font-size:14px; margin:0 0 12px} .founder .fbody p strong{color:var(--ink)}

/* ---------- about: family note / ingredient callout ---------- */
.family-note{max-width:820px; margin:32px 0; padding:24px 28px; border-left:3px solid var(--accent-2); background:var(--surface); border-radius:0 var(--radius) var(--radius) 0}
.family-note p{margin:0} .family-note .who{margin-top:14px; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2)}

/* ---------- reviews ---------- */
.rev-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.rev-card{border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--surface)}
.rev-card .stars{color:var(--accent-2); letter-spacing:2px; margin-bottom:10px}
.rev-card .q{color:var(--ink); font-style:italic; margin:0 0 12px}
.rev-card .attr{font-family:var(--font-mono); font-size:12px; color:var(--ink-2)}
.note-banner{margin-top:22px; padding:14px 18px; border:1px dashed var(--line-2); border-radius:var(--radius); color:var(--ink-2); font-size:13px}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:2px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%; text-align:left; font:inherit; cursor:pointer; background:none; border:none; color:var(--ink);
  font-size:clamp(16px,2vw,19px); font-weight:600; padding:20px 40px 20px 0; position:relative; display:block}
.faq-q::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:24px; color:var(--accent); font-weight:400}
.faq-item.open .faq-q::after{content:"–"}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--ink-2)}
.faq-item.open .faq-a{max-height:400px; padding-bottom:20px}
@media(prefers-reduced-motion:reduce){.faq-a{transition:none}}

/* ---------- bottom CTA ---------- */
.bottom-cta{text-align:center; padding:clamp(56px,9vw,96px) 0; border-top:1px solid var(--line); background:var(--surface)}
.bottom-cta h2{font:var(--font-display); font-size:clamp(32px,6vw,60px); letter-spacing:var(--dspace); text-transform:var(--dcase); color:var(--ink); margin:8px 0 0}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px}

/* ---------- buy layout with visual ---------- */
.buy-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:center; max-width:1000px; margin:0 auto}
.buy-visual{justify-self:center}
.buy-visual img{max-height:440px; width:auto; filter:drop-shadow(0 30px 50px rgba(0,0,0,.4))}
.buy .perks{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; font-size:13px; color:var(--ink-2)}
.buy .addbtn{width:100%; margin-top:14px; cursor:pointer; font:inherit; font-weight:800; font-size:15px; letter-spacing:.05em;
  text-transform:uppercase; padding:16px; border-radius:var(--btn-radius); border:none; background:var(--accent); color:var(--accent-ink)}
.buy .addbtn[disabled]{opacity:.5; cursor:not-allowed}
.buy .avail-note{font-size:12px; color:var(--ink-2); margin-top:8px; text-align:center; min-height:1em}
@media(max-width:760px){.buy-wrap{grid-template-columns:1fr}.buy .perks{grid-template-columns:1fr}}

/* ---------- retailers: locator ---------- */
.locator{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start}
.map-panel{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:22px}
.map-title{font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:14px}
.wv-map-svg{width:100%; height:auto; display:block}
.state-outline{fill:var(--bg); stroke:var(--line-2); stroke-width:2}
.retail-pin{fill:var(--accent)}
.city-dot{fill:var(--ink); r:4}
.city-label{fill:var(--ink); font-family:var(--font-mono); font-size:11px; text-anchor:middle; letter-spacing:.04em}
.expansion-label{fill:var(--ink-3); font-family:var(--font-mono); font-size:9px; text-anchor:middle; letter-spacing:.06em}
.map-legend{display:flex; gap:20px; margin-top:14px; font-size:12px; color:var(--ink-2)}
.legend-item{display:flex; align-items:center; gap:8px}
.legend-pin{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.legend-city{width:10px;height:10px;border-radius:50%;background:var(--ink)}
.map-note{margin-top:14px; font-size:12px; color:var(--ink-3)} .map-note strong{color:var(--ink-2)}
.list-panel{display:flex; flex-direction:column; gap:12px}
.search-box{display:flex; align-items:center; gap:10px; border:1px solid var(--line-2); border-radius:var(--btn-radius); padding:0 14px; background:var(--surface)}
.search-box svg{color:var(--ink-3); flex:none}
.search-input{flex:1; font:inherit; border:none; background:none; color:var(--ink); padding:13px 0; outline:none}
.result-count{font-family:var(--font-mono); font-size:12px; color:var(--ink-2)} .result-count strong{color:var(--accent)}
.retailer-list{display:flex; flex-direction:column; gap:10px; max-height:520px; overflow-y:auto}
.retailer-item{border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; background:var(--surface)}
.retailer-name{font-weight:700; color:var(--ink)}
.retailer-address, .retailer-city{font-size:13px; color:var(--ink-2)}
.retailer-city{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; margin-top:2px}
.retailer-tags{display:flex; gap:6px; margin-top:10px}
.retailer-tag{font-size:11px; font-family:var(--font-mono); padding:3px 9px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2)}
.no-results{padding:20px; color:var(--ink-2); font-size:14px; text-align:center}
.list-footer-note{font-size:12px; color:var(--ink-3); text-align:center}
@media(max-width:820px){.locator{grid-template-columns:1fr}}

/* ---------- retailers: buyer bridge ---------- */
.buyer{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start}
.buyer-perks{display:flex; flex-direction:column; gap:16px; margin-top:24px}
.buyer-perk{display:flex; gap:12px; font-size:15px; color:var(--ink-2)} .buyer-perk strong{color:var(--ink)}
.buyer-perk .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;margin-top:7px}
.buyer-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:28px}
.buyer-card .ce{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.buyer-card h3{font:var(--font-display); font-size:24px; letter-spacing:var(--dspace); text-transform:var(--dcase); color:var(--ink); margin:8px 0 12px}
.buyer-card p{color:var(--ink-2); font-size:14px}
.buyer-contact{display:block; margin:18px 0; padding:18px; border:1px solid var(--line-2); border-radius:var(--btn-radius); background:var(--bg)}
.buyer-contact .bl{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.buyer-contact .be{font:var(--font-display); font-size:20px; color:var(--accent); margin:4px 0; letter-spacing:-.01em; text-transform:none}
.buyer-contact .bn{font-size:13px; color:var(--ink-2)}
@media(max-width:820px){.buyer{grid-template-columns:1fr}}

/* ---------- style switcher bar (injected by switcher.js) ---------- */
.camo-switchbar{position:sticky; top:0; z-index:1000; background:#0a0b0d; border-bottom:1px solid #24262b;
  display:flex; align-items:center; gap:14px; padding:8px 14px; flex-wrap:wrap;
  font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
.camo-switchbar .lbl{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#8a8f98;
  font-family:ui-monospace,Menlo,monospace; white-space:nowrap}
.camo-switchbar .lbl b{color:#fff}
.camo-switchbar .opts{display:flex; gap:6px; flex-wrap:wrap}
.camo-switchbar button{font:inherit; cursor:pointer; border:1px solid #2c2f36; background:#15171b; color:#c9ccd2;
  padding:6px 12px; border-radius:8px; font-size:13px; display:flex; align-items:center; gap:7px; transition:transform .12s,border-color .15s,background .15s}
.camo-switchbar button:hover{transform:translateY(-1px); border-color:#41454e; color:#fff}
.camo-switchbar button .n{font-family:ui-monospace,Menlo,monospace; font-size:11px; color:#6b7079}
.camo-switchbar button[aria-pressed="true"]{background:#fff; color:#0a0b0d; border-color:#fff}
.camo-switchbar button[aria-pressed="true"] .n{color:#0a0b0d}
.camo-switchbar .tag{font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:2px 6px; border-radius:5px; font-family:ui-monospace,monospace}
.camo-switchbar .tag.safe{background:rgba(79,232,46,.14); color:#7ef05f}
.camo-switchbar .tag.bold{background:rgba(232,150,58,.16); color:#f0a35f}
.camo-switchbar button[aria-pressed="true"] .tag{background:rgba(0,0,0,.08); color:#0a0b0d}
.camo-switchbar .hint{margin-left:auto; font-size:11px; color:#6b7079; font-family:ui-monospace,Menlo,monospace}
@media(max-width:700px){.camo-switchbar .lbl,.camo-switchbar .hint{display:none}}

/* ============================================================
   SHARED NAV (.nav3) — 3-col: left links | centered logo | right links+cart
   ============================================================ */
header:has(>.nav3){position:sticky; top:var(--switchbar-h,0); z-index:80;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px)}
.nav3{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:var(--nav-h); gap:16px; position:relative}
.nav3 .nav-left,.nav3 .nav-right{display:flex; align-items:center; gap:clamp(14px,2.4vw,28px)}
.nav3 .nav-left{justify-self:start}
.nav3 .nav-right{justify-self:end}
.nav3 .nav-left a,.nav3 .nav-right a{color:var(--ink-2); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap}
.nav3 .nav-left a:hover,.nav3 .nav-right a:hover,.nav3 a[aria-current="page"]{color:var(--ink)}
.nav3 .nav-logo{justify-self:center; display:flex; align-items:center}
.nav3 .nav-logo img{height:calc(var(--nav-h) - 14px); width:auto; max-width:none}
.nav3 .nav-cart{font:inherit; cursor:pointer; font-size:12px; font-weight:700; padding:9px 14px; border-radius:var(--btn-radius);
  background:var(--accent); color:var(--accent-ink); letter-spacing:.04em; text-transform:uppercase; border:none; white-space:nowrap}
.nav3 .nav-burger{display:none; font:inherit; font-size:24px; line-height:1; cursor:pointer; background:none; border:none; color:var(--ink); padding:8px; justify-self:start}
@media(max-width:900px){.nav3 .nav-left a,.nav3 .nav-right a{font-size:11px; letter-spacing:.06em}.nav3 .nav-left,.nav3 .nav-right{gap:12px}}
@media(max-width:680px){
  .nav3{grid-template-columns:44px 1fr 44px; grid-template-rows:var(--nav-h); height:auto; row-gap:0}
  .nav3 .nav-burger{display:block; grid-column:1; grid-row:1}
  .nav3 .nav-logo{grid-column:2; grid-row:1}
  .nav3 .nav-right{display:contents}
  .nav3 .nav-cart{grid-column:3; grid-row:1; justify-self:end; padding:8px 10px; font-size:11px}
  .nav3 .nav-left,.nav3 .nav-right a{display:none}
  /* open: all links stack as full-width rows below the bar */
  .nav3.open .nav-left{display:flex; flex-direction:column; align-items:stretch; gap:0; grid-column:1/-1; grid-row:2}
  .nav3.open .nav-right a{display:block; grid-column:1/-1}
  .nav3.open .nav-left a,.nav3.open .nav-right a{padding:14px 2px; font-size:13px; border-top:1px solid var(--line)}
  .nav3.open{padding-bottom:8px}
}

/* ============================================================
   SPLIT HERO — full-bleed EDGE | GLOW landing
   ============================================================ */
.split-hero{position:relative; display:grid; grid-template-columns:1fr 1fr; overflow:hidden;
  height:calc(100svh - var(--nav-h)); min-height:620px; background:#000;
  transition:grid-template-columns .6s cubic-bezier(.2,.7,.2,1)}
.split-hero[data-active="edge"]{grid-template-columns:1.22fr .78fr}
.split-hero[data-active="glow"]{grid-template-columns:.78fr 1.22fr}
.split-half{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center; overflow:hidden; color:#fff; padding:0 16px clamp(28px,5vh,56px); min-width:0;
  transition:filter .5s ease, opacity .5s ease}
.split-half:focus-visible{outline:3px solid var(--accent); outline-offset:-6px}
.split-half .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease}
.split-half::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55) 100%)}
.split-glow::after{background:linear-gradient(180deg,transparent 45%,rgba(40,24,4,.5) 100%)}
.split-half>*:not(.bg){position:relative; z-index:1}
.split-half.is-active .bg{transform:scale(1.05); filter:brightness(1.08) saturate(1.1)}
.split-half.is-dim{opacity:.55; filter:grayscale(.85)}
.split-word{display:block; height:auto; margin:0 0 2px; padding:0; width:auto}
.split-edge .split-word{width:clamp(240px,36vw,540px);
  filter:drop-shadow(0 0 26px color-mix(in srgb,var(--hero-edge,var(--accent)) 50%,transparent)) drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.split-glow .split-word{width:clamp(160px,24vw,350px);
  filter:drop-shadow(0 0 26px color-mix(in srgb,var(--hero-glow,var(--accent-2)) 50%,transparent)) drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.split-sub{font-weight:600; font-size:clamp(12px,1.6vw,22px); letter-spacing:.34em; text-transform:uppercase; margin:6px 0 clamp(12px,2.5vh,26px); padding-left:.34em;
  text-shadow:0 2px 12px rgba(0,0,0,.6)}
.split-glow .split-sub{text-shadow:0 2px 12px rgba(40,24,4,.55)}
.pwr-vid{width:clamp(100px,10vw,140px); height:clamp(100px,10vw,140px); border-radius:50%; object-fit:cover; display:block;
  background:#000; box-shadow:0 0 34px -4px color-mix(in srgb,var(--accent) 55%,transparent); transition:transform .3s ease}
.split-glow .pwr-vid{box-shadow:0 0 34px -4px color-mix(in srgb,var(--accent-2) 55%,transparent)}
.split-half.is-active .pwr-vid{transform:scale(1.08)}
.split-label{margin-top:12px; font-weight:700; font-size:clamp(12px,1.2vw,16px); letter-spacing:.3em; padding-left:.3em; text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.7)}
.split-seam{position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); z-index:5; pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--chrome,#B8B8B8) 20%,var(--chrome,#B8B8B8) 80%,transparent);
  box-shadow:0 0 14px rgba(255,255,255,.25); transition:left .6s cubic-bezier(.2,.7,.2,1)}
.split-hero[data-active="edge"] .split-seam{left:61%}
.split-hero[data-active="glow"] .split-seam{left:39%}
@media(max-width:680px){
  .split-hero{grid-template-columns:1fr; grid-template-rows:55svh 55svh; height:auto; min-height:0}
  .split-hero[data-active]{grid-template-columns:1fr}
  .split-glow{order:-1}
  .split-half{min-height:420px}
  .split-edge .split-word{width:min(66vw,320px)}
  .split-glow .split-word{width:min(44vw,210px)}
  .split-sub{letter-spacing:.26em; font-size:12px}
  .pwr-vid{width:96px; height:96px}
  .split-seam{display:none}
}
@media(prefers-reduced-motion:reduce){
  .split-hero,.split-half,.split-half .bg,.pwr-vid,.split-seam{transition:none}
}