/* Pepsoma — Version A “Clinical”: navy, periwinkle, cream and olive-yellow
   Light / dark follows the device by default. The header toggle stamps
   data-theme="light" | "dark" on <html> to override it. */

/* ---------- light tokens ---------- */
:root {
  color-scheme: light;
  --bg: #ffffff; --bg-soft: #f5f7fd; --bg-tint: #e9edfb; --cream: #f7f0d4;
  --surface: #ffffff; --surface-2: #f1f4fc; --surface-glass: rgba(255,255,255,.92);
  --text: #1b2d74; --muted: #56607f; --faint: #646f94;
  --line: #e1e6f5; --line-2: #cfd7f0;
  --lav: #dfe4f8; --lav-strong: #c3cdf2; --lav-deep: #9aaae6;
  --accent: #5a73d8; --accent-soft: rgba(90,115,216,.12);
  --yellow: #d8d85a; --yellow-hover: #cccc45; --yellow-soft: #f1f1c8; --yellow-tint: #fbfbea; --yellow-line: #bdbd3c; --on-yellow: #1b2d74;
  --primary: #1b2d74; --primary-hover: #2b3f8f; --primary-text: #ffffff;
  --secondary: #dfe4f8; --secondary-text: #1b2d74;
  --success: #2e8a5b; --danger: #c2334d; --focus: #5a73d8;
  --header-bg: rgba(255,255,255,.86);
  --shadow: 0 18px 50px rgba(27,45,116,.10); --shadow-lg: 0 30px 80px rgba(27,45,116,.16);
  --glow: rgba(90,115,216,.18);
  --wordmark: rgba(27,45,116,.06);
  --chrom: #5a73d8;
  --radius: 12px; --radius-lg: 20px; --radius-btn: 999px;
  --font-body: 'DM Sans', system-ui, sans-serif; --font-head: 'DM Sans', system-ui, sans-serif; --font-serif: 'Fraunces', Georgia, serif;
  --header-h: 80px;
  --ease-spring: cubic-bezier(.34,1.25,.64,1); --ease-out: cubic-bezier(.2,.7,.2,1); --ease-expo: cubic-bezier(.16,1,.3,1);
}

/* ---------- dark tokens (device preference) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1026; --bg-soft: #0f1630; --bg-tint: #152040; --cream: #0e1430;
    --surface: #121a36; --surface-2: #1a2447; --surface-glass: rgba(18,26,54,.9);
    --text: #eef1ff; --muted: #a5aecb; --faint: #7a84a4;
    --line: #232e55; --line-2: #313e6b;
    --lav: #1f2a5a; --lav-strong: #34448a; --lav-deep: #5468c0;
    --accent: #8fa0ee; --accent-soft: rgba(143,160,238,.14);
    --yellow: #d8d85a; --yellow-hover: #e6e670; --yellow-soft: #23240f; --yellow-tint: #1c1d0c; --yellow-line: #7c7c2a; --on-yellow: #0b1026;
    --primary: #c9d2ff; --primary-hover: #dde3ff; --primary-text: #0b1433;
    --secondary: #1f2a5a; --secondary-text: #eef1ff;
    --success: #6fcf97; --danger: #ff7b93; --focus: #8fa0ee;
    --header-bg: rgba(11,16,38,.82);
    --shadow: 0 18px 50px rgba(0,0,0,.35); --shadow-lg: 0 30px 80px rgba(0,0,0,.5);
    --glow: rgba(143,160,238,.22);
    --wordmark: rgba(238,241,255,.05);
    --chrom: #9fb0ff;
  }
}
/* ---------- dark tokens (explicit toggle) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1026; --bg-soft: #0f1630; --bg-tint: #152040; --cream: #0e1430;
  --surface: #121a36; --surface-2: #1a2447; --surface-glass: rgba(18,26,54,.9);
  --text: #eef1ff; --muted: #a5aecb; --faint: #7a84a4;
  --line: #232e55; --line-2: #313e6b;
  --lav: #1f2a5a; --lav-strong: #34448a; --lav-deep: #5468c0;
  --accent: #8fa0ee; --accent-soft: rgba(143,160,238,.14);
  --yellow: #d8d85a; --yellow-hover: #e6e670; --yellow-soft: #23240f; --yellow-tint: #1c1d0c; --yellow-line: #7c7c2a; --on-yellow: #0b1026;
  --primary: #c9d2ff; --primary-hover: #dde3ff; --primary-text: #0b1433;
  --secondary: #1f2a5a; --secondary-text: #eef1ff;
  --success: #6fcf97; --danger: #ff7b93; --focus: #8fa0ee;
  --header-bg: rgba(11,16,38,.82);
  --shadow: 0 18px 50px rgba(0,0,0,.35); --shadow-lg: 0 30px 80px rgba(0,0,0,.5);
  --glow: rgba(143,160,238,.22);
  --wordmark: rgba(238,241,255,.05);
  --chrom: #9fb0ff;
}

/* ---------- base ---------- */
html { background: var(--bg); }
body { font-size: 16.5px; background: var(--bg); color: var(--text); }
html.theme-anim body, html.theme-anim body * { transition: background-color .45s ease, border-color .45s ease, color .3s ease !important; }
::selection { background: var(--lav-strong); color: var(--text); }
h1, h2, h3 { font-weight: 500; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.lead { color: var(--muted); font-size: 1.15rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.btn { letter-spacing: .02em; }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 10px 24px var(--glow); }
.btn-secondary:hover { background: var(--lav-strong); }
.btn-ghost { border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-yellow { background: var(--yellow); color: #1b2d74; font-weight: 500; font-size: 1.05rem; }
.btn-yellow .serif { font-weight: 500; }
.btn-yellow:hover { background: var(--yellow-hover); }
.btn-pill { padding: 12px 22px; }
.pill-y { display: inline-block; background: var(--yellow); color: #1b2d74; font-weight: 700; font-size: .72rem; padding: 4px 10px; border-radius: 99px; }
.yc { width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); display: inline-grid; place-items: center; flex: none; margin-top: 1px; }
.yc .icon { width: 13px; height: 13px; stroke-width: 3; color: #1b2d74; }
.checks { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks.lg li { font-size: 1.08rem; }
.price { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.price small { font-weight: 500; color: var(--muted); font-size: .8rem; }
.price s { color: var(--muted); font-weight: 400; font-size: .9rem; margin-left: 4px; }
.save { color: var(--success); font-weight: 700; }
.input { background: var(--surface); }

/* ---------- motion primitives ---------- */
/* load-in: rise + unblur, staggered by --i (replays on every page enter) */
.rise { opacity: 0; transform: translateY(26px); filter: blur(6px); }
.entered .rise { animation: rise .7s var(--ease-spring) forwards; animation-delay: calc(120ms + var(--i, 0) * 95ms); }
@keyframes rise { to { opacity: 1; transform: none; filter: blur(0); } }
/* headline lines rise out of a clip */
.line-mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line-mask > span { display: inline-block; transform: translateY(105%); }
.entered .line-mask > span { animation: lineUp .9s var(--ease-expo) forwards; animation-delay: calc(80ms + var(--i, 0) * 110ms); }
@keyframes lineUp { to { transform: none; } }
/* scroll reveal: roll up to meet you, once */
.reveal { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(4px); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out), filter .65s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; filter: none; }
/* page enter */
#view.page-enter { animation: pageIn .5s var(--ease-out); }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } }

/* opening (first visit in this browser only): the mark traces itself, then its middle opens and you fly through onto the page.
   html.opening is set in index.html before first paint; its ::after holds the cover until app.js builds it. */
html.opening::after { content: ''; position: fixed; inset: 0; z-index: 200; background: var(--cream); }
.opening-cover { position: fixed; inset: 0; z-index: 200; cursor: pointer; }
.opening-cover svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.oc-bg { fill: var(--cream); }
.oc-hole, .oc-mark, .oc-fill, .oc-p { transform-box: fill-box; transform-origin: center; }
.oc-hole { transform: scale(.001); }
/* two halves start together at the bottom centre and meet at the top, so the outline has no start point or seam;
   the offset starts just past the dash so no round-cap dot shows before the trace begins */
.oc-line { fill: none; stroke: var(--text); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 110; stroke-dashoffset: 101; }
.oc-fill { fill: #1b2d74; opacity: 0; transform: scale(.55); }
.oc-p { font: italic 700 36px Georgia, serif; fill: #d8d85a; opacity: 0; transform: translateY(3px); }
.oc-word { position: absolute; left: 50%; top: calc(50% + max(100vw, 100vh) * .032 + 24px); transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; opacity: 0; white-space: nowrap; }
.oc-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.oc-word .logo { font-size: 2.6rem; }
/* play: trace the outline, settle it into the mark's navy as the fill blooms from the middle, then the "p" and the wordmark */
.opening-cover.play .oc-line { animation: ocTrace .9s .15s cubic-bezier(.65,0,.35,1) forwards, ocInk .5s .95s ease forwards; }
.opening-cover.play .oc-fill { animation: ocBloom .6s .9s var(--ease-out) forwards; }
.opening-cover.play .oc-p { animation: ocRise .5s 1.3s var(--ease-out) forwards; }
.opening-cover.play .oc-word { animation: ocWordIn .7s 1.55s var(--ease-out) forwards; }
/* zoom: the fill and "p" clear, the outline flies past as a ring while the hole opens
   (the play animations stay listed first so their end states hold) */
.opening-cover.zoom .oc-hole { animation: ocHole 1.15s cubic-bezier(.75,0,.22,1) forwards; }
.opening-cover.zoom .oc-mark { animation: ocMark 1s cubic-bezier(.75,0,.3,1) forwards; }
.opening-cover.play.zoom .oc-fill { animation: ocBloom .6s .9s var(--ease-out) forwards, ocOut .25s ease forwards; }
.opening-cover.play.zoom .oc-p { animation: ocRise .5s 1.3s var(--ease-out) forwards, ocOut .2s ease forwards; }
.opening-cover.play.zoom .oc-word { animation: ocWordIn .7s 1.55s var(--ease-out) forwards, ocOut .3s ease forwards; }
@keyframes ocTrace { to { stroke-dashoffset: 0; } }
@keyframes ocInk { to { stroke: #1b2d74; } }
@keyframes ocBloom { to { opacity: 1; transform: none; } }
@keyframes ocRise { to { opacity: 1; transform: none; } }
@keyframes ocWordIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes ocOut { to { opacity: 0; } }
@keyframes ocHole { to { transform: scale(46); } }
@keyframes ocMark { to { transform: scale(30); opacity: 0; } }

/* ---------- header ---------- */
.deal-bar { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 10px 16px; background: #1b2d74; color: #fff; text-decoration: none; font-size: .85rem; text-align: center; }
.deal-k { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #d8d85a; }
.deal-v { color: rgba(255,255,255,.88); }
.deal-tag { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: #d8d85a; color: #1b2d74; }
.deal-bar:hover .deal-k { text-decoration: underline; text-underline-offset: 3px; }
/* #app-header is only as tall as the header, which kept it from sticking; let the header stick to the page instead */
#app-header { display: contents; }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; display: flow-root; background: var(--header-bg); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); transition: background-color .35s; }
/* a little wider than the page so the nav and all header buttons fit inside the floating pill */
.hdr { max-width: 1290px; display: flex; align-items: center; gap: 24px; height: var(--header-h); border: 1px solid transparent; border-radius: 0; transition: height .5s var(--ease-expo), width .5s var(--ease-expo), margin .5s var(--ease-expo), padding .5s var(--ease-expo), border-radius .5s var(--ease-expo), background-color .35s, border-color .35s, box-shadow .35s; }
/* once you scroll, the bar lifts off the edges into a floating rounded pill (header height stays the same, so nothing below jumps) */
.site-header.scrolled { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.scrolled .hdr { width: calc(100% - 24px); height: calc(var(--header-h) - 16px); margin: 8px auto; padding: 0 10px 0 24px; border-radius: 999px; background: var(--header-bg); border-color: var(--line); box-shadow: 0 12px 36px rgba(15,25,70,.12); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.logo { font-family: var(--font-serif); font-weight: 700; font-size: 2rem; letter-spacing: -.03em; text-decoration: none; color: var(--text); line-height: 1; display: inline-flex; align-items: baseline; }
.logo i { font-style: italic; font-weight: 500; color: var(--accent); }
.main-nav { position: relative; display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-pill { position: absolute; top: 50%; height: 40px; transform: translateY(-50%); background: var(--bg-soft); border-radius: 999px; pointer-events: none; opacity: 0; transition: left .28s var(--ease-out), width .28s var(--ease-out), opacity .2s; z-index: 0; }
.nav-link { position: relative; z-index: 1; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; text-decoration: none; font-size: .95rem; font-weight: 500; border-radius: 999px; }
.nav-link .icon { width: 15px; height: 15px; transition: transform .25s; }
.dd-wrap:hover .nav-link .icon { transform: rotate(180deg); }
.nav-link.active { color: var(--accent); }
.dd-wrap { position: relative; }
.dd { position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 8px; display: grid; opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: top left; transition: opacity .2s, transform .25s var(--ease-out), visibility .2s; z-index: 5; }
.dd::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.dd a { padding: 10px 12px; border-radius: 12px; text-decoration: none; font-size: .92rem; display: flex; justify-content: space-between; gap: 10px; transition: background .15s, padding-left .2s; }
.dd a small { color: var(--faint); }
.dd a:hover { background: var(--bg-soft); padding-left: 16px; }
.dd-wrap:hover .dd, .dd-wrap:focus-within .dd { opacity: 1; visibility: visible; transform: none; }
.hdr-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.round-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: grid; place-items: center; transition: transform .2s var(--ease-spring), border-color .2s; }
.round-btn:hover { border-color: var(--line-2); transform: translateY(-1px); }
.round-btn .icon { width: 21px; height: 21px; }
.cart-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--primary); color: var(--primary-text); font-size: .7rem; font-weight: 700; display: grid; place-items: center; padding: 0 5px; transform: scale(.001); transition: transform .3s var(--ease-spring); }
.cart-count.has { transform: scale(1); }
.cart-btn.bump { animation: bump .5s var(--ease-spring); }
@keyframes bump { 30% { transform: scale(1.18); } 60% { transform: scale(.94); } }
.nav-toggle { display: none; }
.show-sm { display: none !important; }

/* theme toggle: sun / moon / auto glyphs cross-fade */
.theme-btn .t-ico { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .3s, transform .45s var(--ease-spring); }
.theme-btn .t-ico { opacity: 0; transform: rotate(-90deg) scale(.6); }
.theme-btn[data-mode="light"] .t-sun, .theme-btn[data-mode="dark"] .t-moon, .theme-btn[data-mode="auto"] .t-auto { opacity: 1; transform: none; }
.theme-tip { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); white-space: nowrap; font-size: .72rem; font-weight: 600; background: var(--text); color: var(--bg); padding: 5px 9px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.theme-btn:hover .theme-tip, .theme-btn:focus-visible .theme-tip { opacity: 1; transform: translateX(-50%); }

/* ---------- page head ---------- */
.page-head { background: radial-gradient(900px 300px at 50% 0%, var(--bg-tint), transparent 70%), var(--bg); padding: 64px 0 40px; text-align: center; }
.page-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); max-width: 860px; margin: 0 auto .35em; }
.page-head .lead { max-width: 680px; margin: 0 auto; }

/* ---------- hero ---------- */
.hero { position: relative; background: radial-gradient(1100px 520px at 85% 15%, var(--bg-tint), transparent 60%), var(--cream); padding: 56px 0 72px; overflow: hidden; }
.hero-net { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent); opacity: .55; pointer-events: none; -webkit-mask-image: radial-gradient(60% 75% at 28% 48%, #000 25%, transparent 78%); mask-image: radial-gradient(60% 75% at 28% 48%, #000 25%, transparent 78%); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero h1 { margin: 18px 0 20px; font-size: clamp(2.5rem, 5.2vw, 4.3rem); line-height: 1.04; }
.hero .lead { max-width: 540px; }
.swap { position: relative; display: inline-grid; vertical-align: bottom; }
.swap > em { grid-area: 1 / 1; opacity: 0; transform: translateY(40%); filter: blur(6px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-expo), filter .5s; white-space: nowrap; color: var(--accent); }
.swap > em.on { opacity: 1; transform: none; filter: none; }
.swap > em.out { opacity: 0; transform: translateY(-40%); filter: blur(6px); }
.trust-chip { display: inline-flex; gap: 2px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px 7px 10px; font-size: .82rem; font-weight: 600; }
.trust-chip .live { width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; margin-right: 8px; box-shadow: 0 0 0 0 rgba(47,191,113,.5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(47,191,113,0); } 100% { box-shadow: 0 0 0 0 rgba(47,191,113,0); } }
.hero-stats { display: flex; gap: 0; margin: 34px 0 0; max-width: 520px; }
.hero-stats > div { flex: 1; display: grid; gap: 4px; padding: 0 20px; }
.hero-stats > div:first-child { padding-left: 0; }
.hero-stats > div + div { border-left: 1px solid var(--line-2); }
.hero-stats strong { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.hero-stats span { color: var(--muted); font-size: .85rem; }
.hero-art { position: relative; height: 540px; perspective: 1000px; }
.hero-glow { position: absolute; left: 50%; top: 56%; width: min(560px, 100%); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(216,216,90,.5) 0, rgba(90,115,216,.3) 36%, transparent 68%); filter: blur(12px); animation: glow 7s ease-in-out infinite alternate; }
.hero-glow::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 20%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(15,25,70,.28), transparent); }
@keyframes glow { to { transform: scale(1.08); opacity: .85; } }
.hero-vials { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 70px; }
.hv { display: block; transition: transform .6s var(--ease-out); }
.hv1 { height: 250px; rotate: -16deg; translate: 34px -4px; animation: float 7s ease-in-out -1s infinite; }
.hv2 { height: 370px; position: relative; z-index: 2; rotate: -5deg; animation: float 6s ease-in-out infinite; }
.hv3 { height: 250px; rotate: 14deg; translate: -34px -8px; animation: float 8s ease-in-out -3s infinite; }
@keyframes float { 50% { transform: translateY(-12px); } }
.float-chip { position: absolute; z-index: 3; display: flex; gap: 12px; align-items: center; background: var(--surface-glass); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow); font-size: .85rem; }
.float-chip div { display: grid; }
.float-chip small { color: var(--muted); }
.float-chip .icon { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--yellow); color: #1b2d74; }
.fc1 { top: 56px; left: 0; animation: float 7s ease-in-out infinite; }
.fc2 { bottom: 40px; right: 0; animation: float 8s ease-in-out -2s infinite; }

/* ---------- marquee chips ---------- */
.chips-band { background: var(--cream); padding: 0 0 56px; overflow: hidden; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: 12px; }
.marquee-track { display: flex; gap: 12px; padding-right: 12px; flex: none; animation: mq 48s linear infinite; }
.marquee.rev .marquee-track { animation-direction: reverse; animation-duration: 56s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-100%); } }
.mchip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px 16px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-size: .9rem; transition: border-color .2s, transform .2s; }
.mchip b { font-weight: 700; }
.mchip span { color: var(--muted); }
.mchip i { width: 8px; height: 8px; border-radius: 50%; }
.mchip:hover { border-color: var(--text); transform: translateY(-2px); }

/* ---------- sections ---------- */
.section-lav { background: var(--bg-soft); }
.section-cream { background: var(--cream); }
.section-soft { background: linear-gradient(180deg, var(--bg), var(--bg-soft)); }
.sec-head { margin-bottom: 40px; }
.sec-head.center { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.split-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.split-head h2 { margin: 0; }

/* ---------- stacks ---------- */
.stack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.stack-card { position: relative; display: grid; grid-template-columns: 200px 1fr; gap: 10px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .25s, box-shadow .3s, transform .3s var(--ease-out); }
.stack-card:hover { border-color: var(--yellow-line); box-shadow: var(--shadow); transform: translateY(-3px); }
.stack-img { background: var(--bg-soft); display: grid; place-items: center; padding: 20px; }
.stack-img .vial-group { height: 170px; transition: transform .5s var(--ease-spring); }
.stack-card:hover .stack-img .vial-group { transform: scale(1.06); }
.stack-body { padding: 24px 24px 22px 12px; display: grid; }
.stack-top { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.stack-top h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.stack-body .checks { gap: 8px; font-size: .9rem; margin: 6px 0 16px; }
.stack-body .yc { width: 18px; height: 18px; }
.stack-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }

/* ---------- product grid ---------- */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease-out), box-shadow .35s, border-color .25s; transform-style: preserve-3d; }
.pcard:hover { box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.pcard::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.14), transparent 40%); opacity: 0; transition: opacity .3s; }
.pcard:hover::after { opacity: 1; }
.pcard-img { position: relative; display: grid; place-items: center; height: 230px; background: radial-gradient(circle at 50% 72%, var(--lav) 0, var(--bg-soft) 62%); }
.pcard-img .vial-single, .pcard-img .vial-group { height: 180px; transition: transform .45s var(--ease-spring); }
.pcard:hover .pcard-img .vial-single { transform: translateY(-8px) rotate(-3deg); }
.pcard-img .pill-y { position: absolute; top: 14px; left: 14px; z-index: 2; }
.sale-tag { position: absolute; top: 14px; right: 14px; z-index: 2; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: var(--primary); color: var(--primary-text); }
.pcard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.pcard-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); font-weight: 700; }
.pcard-name { font-size: 1.15rem; font-weight: 700; margin: 4px 0 2px; letter-spacing: -.01em; }
.pcard-name a { text-decoration: none; }
.pcard-full { font-size: .85rem; color: var(--muted); margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-sizes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pcard-sizes span { font-size: .72rem; border: 1px solid var(--line); border-radius: 99px; padding: 3px 9px; color: var(--muted); }
.pcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }

/* ---------- testimonials ---------- */
.testi { position: relative; overflow: hidden; background: radial-gradient(900px 400px at 20% 0%, #4a63c9, transparent 70%), linear-gradient(135deg, #14215a, #1b2d74 60%, #2c43a0); color: #fff; padding: 88px 0 60px; text-align: center; }
.testi h2 { color: #fff; margin-bottom: 44px; font-weight: 400; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.testi-card { margin: 0; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); border-radius: var(--radius-lg); padding: 26px; transition: transform .35s var(--ease-out), background .3s; }
.testi-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.14); }
.stars { display: flex; gap: 4px; margin-bottom: 14px; }
.stars .icon { width: 20px; height: 20px; color: var(--yellow); }
.testi-card h3 { color: #fff; font-size: 1.1rem; font-weight: 700; }
.testi-card blockquote { margin: 0 0 16px; font-size: .95rem; color: rgba(255,255,255,.85); }
.testi-card figcaption { font-size: .82rem; color: rgba(255,255,255,.7); }
.testi-note { font-size: .75rem; color: rgba(255,255,255,.55); margin: 28px 0 0; }

/* ---------- split / live frames ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.reverse .split-art { order: 2; }
.split-copy .big { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 22px; }
.serif-h { font-weight: 400; }
.split-art { border-radius: 28px; min-height: 440px; display: grid; place-items: center; padding: 36px; }
.art-box { background: linear-gradient(160deg, var(--lav), var(--lav-strong)); }
.art-coa { background: linear-gradient(160deg, var(--cream), var(--bg-tint)); }
.box-card { background: var(--surface); border-radius: 22px; padding: 30px 28px 24px; box-shadow: var(--shadow); display: grid; justify-items: center; gap: 18px; width: min(360px, 100%); }
.box-card .vial-group, .box-card .vial-single { height: 200px; }
.mini-coa { width: 100%; background: var(--bg-soft); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; font-size: .82rem; }
.mini-coa span { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.mini-coa small { color: var(--muted); }
.mini-bar { height: 6px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: var(--text); }
.refs { margin: 26px 0 0; padding-left: 1.2em; font-size: .72rem; color: var(--muted); display: grid; gap: 4px; }

/* live COA window: the chromatogram draws, rows pass one by one, loops while visible */
.window { width: min(470px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; color: var(--text); }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.win-bar span { margin: 0 auto; font-size: .72rem; color: var(--faint); padding: 3px 12px; border-radius: 6px; background: var(--surface); }
.win-body { padding: 20px 22px 22px; }
.win-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .8rem; color: var(--muted); }
.win-head strong { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 2.4rem; color: var(--text); font-variant-numeric: tabular-nums; }
.window .chromatogram { height: 120px; color: var(--muted); }
.window .chromatogram path { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.window.play .chromatogram path { animation: draw 2.4s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.win-rows { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; font-size: .85rem; }
.win-rows li { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg-soft); }
.win-rows li b { font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: var(--line); color: var(--faint); transition: background .3s, color .3s; }
.window.play .win-rows li b { animation: passIn .4s var(--ease-spring) forwards; animation-delay: calc(1.6s + var(--i) * 350ms); }
@keyframes passIn { 0% { transform: scale(.6); } 100% { background: rgba(47,191,113,.16); color: var(--success); transform: none; } }
.window.play .win-rows li b::after { content: ''; }
.win-status { margin-top: 12px; font-size: .78rem; color: var(--faint); display: flex; align-items: center; gap: 8px; }
.win-status .live { width: 7px; height: 7px; border-radius: 50%; background: #2fbf71; }

/* ---------- steps: big italic numerals, the one nearest centre owns the room ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 44px 0 40px; }
.step { position: relative; padding: 26px 22px 24px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); transition: transform .4s var(--ease-out), box-shadow .4s, border-color .3s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.step-n { display: block; font-family: var(--font-serif); font-style: italic; font-size: 4.2rem; line-height: .9; color: var(--lav-strong); margin-bottom: 18px; transition: color .4s; }
.step:hover .step-n { color: var(--accent); }
.step-ico { position: absolute; top: 24px; right: 22px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow-soft); }
.step-ico .icon { width: 20px; height: 20px; }
.step h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.step p { font-size: .92rem; color: var(--muted); margin: 0; }

/* ---------- faq split ---------- */
.faq-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.faq-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.3rem, 4.4vw, 3.4rem); position: sticky; top: calc(var(--header-h) + 30px); }
.faq-item summary { font-weight: 500; font-size: 1.08rem; transition: color .2s; }
.faq-item summary:hover { color: var(--accent); }
.faq-item[open] .faq-a { animation: faqIn .35s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- closing CTA with corner brackets ---------- */
.closer { position: relative; text-align: center; padding: 110px 0; }
.closer h2 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); max-width: 760px; margin: 0 auto 14px; }
.closer p { color: var(--muted); }
.bracket { position: absolute; width: 64px; height: 64px; border: 3px solid var(--lav-strong); transition: all .9s var(--ease-expo); }
.bracket.tl { top: 40px; left: 12%; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.bracket.br { bottom: 40px; right: 12%; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.closer:not(.in) .bracket.tl { transform: translate(40px, 40px); opacity: 0; }
.closer:not(.in) .bracket.br { transform: translate(-40px, -40px); opacity: 0; }

/* ---------- footer ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--bg-tint); padding: 64px 0 0; }
.f-news { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; background: var(--surface); border-radius: var(--radius-lg); padding: 28px 32px; margin-bottom: 44px; }
.f-news h3 { font-size: 1.6rem; margin-bottom: 4px; }
.f-news p { margin: 0; }
.f-news .newsletter { flex: 1 1 360px; max-width: 480px; }
.f-disclaimer { font-size: .78rem; color: var(--muted); text-align: center; max-width: 860px; margin: 0 auto 36px; padding-bottom: 36px; border-bottom: 1px solid var(--line-2); }
.f-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.f-brand p { color: var(--muted); font-size: .92rem; margin-top: 14px; }
.f-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.f-badges span { display: inline-flex; gap: 6px; align-items: center; font-size: .78rem; font-weight: 600; background: var(--surface); border-radius: 99px; padding: 7px 12px; }
.fcol { display: grid; gap: 10px; align-content: start; }
.fcol h4 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.fcol a { text-decoration: none; font-size: .9rem; color: var(--muted); transition: color .15s; }
.fcol a:hover { color: var(--text); }
.f-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.f-bottom > div:first-child { display: grid; gap: 2px; font-size: .85rem; }
.f-bottom span { color: var(--muted); }
.f-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.f-social { display: flex; gap: 10px; }
.f-social a { width: 42px; height: 42px; border-radius: 50%; background: var(--yellow-soft); display: grid; place-items: center; transition: background .2s, transform .25s var(--ease-spring); }
.f-social a:hover { background: var(--yellow); color: #1b2d74; transform: translateY(-3px); }
.seg { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.seg button { border: 0; background: none; padding: 7px 12px; border-radius: 99px; font-size: .78rem; font-weight: 600; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.seg button .icon { width: 14px; height: 14px; }
.seg button.on { background: var(--primary); color: var(--primary-text); }
.wordmark { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(6rem, 22vw, 20rem); line-height: .8; letter-spacing: -.05em; color: var(--wordmark); text-align: center; margin: 36px 0 -0.14em; user-select: none; pointer-events: none; }

/* ---------- shop ---------- */
.shop-bar { display: grid; gap: 16px; margin-bottom: 18px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none; font-size: .88rem; font-weight: 500; background: var(--surface); transition: all .2s; }
.chip:hover { border-color: var(--text); }
.chip.on { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.shop-tools { display: flex; gap: 12px; }
.shop-search { position: relative; flex: 1; }
.shop-search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.shop-search .input { padding-left: 42px; border-radius: 99px; }
.shop-tools select { width: auto; border-radius: 99px; }

/* ---------- product page ---------- */
.pdp { padding-top: 24px; padding-bottom: 72px; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 20px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.pdp-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
.gallery { display: grid; grid-template-columns: 76px 1fr; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); }
.thumbs { display: grid; gap: 10px; align-content: start; }
.thumb { width: 76px; height: 76px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg-soft); display: grid; place-items: center; padding: 6px; overflow: hidden; transition: border-color .2s, transform .2s var(--ease-spring); }
.thumb:hover { transform: translateY(-2px); }
.thumb.active { border-color: var(--text); }
.thumb .vial-single, .thumb .vial-group { height: 62px; }
.thumb .vial-svg { filter: none; }
.thumb-ico { display: grid; justify-items: center; gap: 2px; font-size: .65rem; font-weight: 700; }
.thumb-ico .icon { width: 24px; height: 24px; }
.stage { position: relative; border-radius: 24px; background: radial-gradient(circle at 50% 75%, var(--lav) 0, var(--bg-soft) 65%); aspect-ratio: 1 / 1.05; display: grid; place-items: center; overflow: hidden; max-width: 100%; }
.stage-panel { width: 100%; height: 100%; display: grid; place-items: center; padding: 36px; animation: panelIn .45s var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: scale(.97); filter: blur(3px); } }
.stage-panel[hidden] { display: none; }
.stage-vial .vial-single { height: clamp(280px, 34vw, 460px); transition: transform .6s var(--ease-out); }
.stage-vial .vial-group { height: clamp(220px, 28vw, 380px); }
.stage-coa { place-items: center; align-content: center; text-align: center; gap: 4px; }
.stage-coa h3 { font-weight: 700; margin: 0; }
.big-purity { font-family: var(--font-serif); font-style: italic; font-size: 5rem; line-height: 1; }
.big-purity small { font-size: 2rem; }
.stage-coa .chromatogram { height: 120px; margin: 8px 0 16px; color: var(--muted); }
.stage-spec { align-content: center; gap: 24px; }
.beads { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 420px; }
.beads span { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--text); font-size: .75rem; font-weight: 700; opacity: 0; transform: scale(.4); animation: bead .5s var(--ease-spring) forwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes bead { to { opacity: 1; transform: none; } }
.beads span:nth-child(3n+2) { background: var(--yellow); color: #1b2d74; }
.beads span:nth-child(3n) { background: var(--lav); }
.mini-spec { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; background: var(--surface); border-radius: 16px; padding: 18px 22px; margin: 0; font-size: .9rem; }
.mini-spec dt { color: var(--muted); }
.mini-spec dd { margin: 0; font-weight: 700; }
.stage-box .box-card { transform: scale(.95); }
.gallery-disclaimer { grid-column: 1 / -1; font-size: .74rem; color: var(--muted); text-align: center; margin: 8px 20px 0; line-height: 1.5; }
.buybox .pill-y { margin-bottom: 10px; }
.pdp-title { font-size: clamp(2.6rem, 5vw, 3.8rem); margin: 0 0 6px; }
.pdp-title .serif { font-weight: 500; }
.pdp-sub { color: var(--accent); font-weight: 600; margin-bottom: 14px; }
.pdp-summary { font-size: 1.05rem; }
.pdp-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: .88rem; font-weight: 600; margin-bottom: 22px; }
.pdp-meta span { display: inline-flex; gap: 6px; align-items: center; }
.included { background: var(--bg-soft); border-radius: var(--radius-lg); padding: 22px 24px 8px; margin-bottom: 28px; }
.included h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; }
.included .checks { gap: 10px; font-size: .95rem; }
.included .yc { width: 20px; height: 20px; background: var(--lav-strong); }
.included .yc .icon { color: var(--text); }
.pform-h { font-size: 1.3rem; font-weight: 700; margin: 0 0 14px; }
.pform-h .serif { font-weight: 500; }
.size-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.size-opt { position: relative; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 20px; cursor: pointer; display: grid; text-align: center; min-width: 110px; transition: all .2s var(--ease-out); background: var(--surface); }
.size-opt:hover { border-color: var(--line-2); }
.size-opt input { position: absolute; opacity: 0; }
.size-opt span { font-weight: 700; }
.size-opt small { color: var(--muted); }
.size-opt.selected { border-color: var(--text); background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--text); }
.size-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.plans { display: grid; gap: 12px; margin-bottom: 20px; }
.plan-opt { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 20px; border: 1.5px solid var(--line); border-radius: 18px; cursor: pointer; transition: border-color .25s, background .25s, transform .25s var(--ease-out); background: var(--surface); }
.plan-opt:hover { transform: translateX(3px); }
.plan-opt input { position: absolute; opacity: 0; }
.plan-opt.selected { border-color: var(--yellow-line); background: var(--yellow-tint); }
.plan-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.plan-check { width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--line-2); display: grid; place-items: center; background: var(--surface); transition: all .25s var(--ease-spring); }
.plan-check .icon { width: 14px; height: 14px; stroke-width: 3; opacity: 0; transform: scale(.4); transition: all .3s var(--ease-spring); color: #1b2d74; }
.plan-opt.selected .plan-check { background: var(--yellow); border-color: var(--yellow-line); }
.plan-opt.selected .plan-check .icon { opacity: 1; transform: none; }
.plan-body { display: grid; gap: 3px; }
.plan-body strong { font-size: .98rem; letter-spacing: .01em; }
.plan-body small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.plan-body b { font-weight: 600; }
.plan-price { display: grid; justify-items: end; gap: 3px; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.plan-price s { font-size: .85rem; color: var(--muted); }
.plan-price s:empty { display: none; }
.buy-row { display: flex; gap: 12px; align-items: stretch; }
.buy-row .qty { flex: none; }
.buy-btn { flex: 1; position: relative; overflow: hidden; }
.buy-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-100%); }
.buy-btn:hover::after { animation: shine .9s ease; }
@keyframes shine { to { transform: translateX(100%); } }
.info-box { display: flex; gap: 14px; border: 1.5px solid var(--lav-strong); background: var(--bg-soft); border-radius: 18px; padding: 18px 20px; margin-top: 20px; }
.info-box p { margin: 4px 0 0; font-size: .88rem; color: var(--muted); }
.info-i { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--primary-text); font-family: var(--font-serif); font-weight: 700; display: grid; place-items: center; flex: none; }
.spec-card h3 { font-weight: 700; font-size: 1.15rem; }

/* ---------- cart / checkout ---------- */
.cart-grid, .checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
.sticky { position: sticky; top: calc(var(--header-h) + 16px); }
.sum-card { background: var(--bg-soft); border-radius: var(--radius-lg); padding: 26px; }
.sum-card h2 { font-weight: 700; }
.sum-items { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 14px; }
.sum-items li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; font-size: .9rem; }
.sum-img { position: relative; width: 56px; height: 64px; border-radius: 12px; background: var(--surface); display: grid; place-items: center; padding: 3px; }
.sum-img .vial-svg { height: 56px; filter: none; }
.sum-img .vial-group { height: 56px; }
.sum-img b { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: var(--primary-text); font-size: .7rem; display: grid; place-items: center; }
.sum-name { display: grid; font-weight: 600; }
.sum-name small { color: var(--muted); font-weight: 400; }
.sum-trust { list-style: none; padding: 20px 0 0; margin: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: .85rem; }
.sum-trust li { display: flex; gap: 10px; align-items: center; }
.sum-trust .yc { width: 18px; height: 18px; }
.checkout-form .legend { font-weight: 700; }

/* ---------- about ---------- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 4px; }
.value strong { font-family: var(--font-serif); font-style: italic; font-size: 2.6rem; font-weight: 500; line-height: 1; }
.value span { color: var(--muted); }

/* ---------- gate / overlays ---------- */
.gate { text-align: center; display: grid; gap: 6px; }
.gate .logo { font-size: 2.2rem; margin: 0 auto 10px; }
.gate h2 { font-size: 1.8rem; }
.gate p { color: var(--muted); }
.gate-actions { display: grid; gap: 10px; margin: 10px 0 14px; }
.modal-gate .modal-panel { width: min(480px, 100%); background: linear-gradient(180deg, var(--surface), var(--bg-soft)); }
.drawer-panel { background: var(--bg); }
.drawer-foot { background: var(--bg-soft); }
.line-img { background: var(--bg-soft); }
.modal-panel { background: var(--bg); }
.modal-close, .icon-btn { background: var(--surface); color: var(--text); }
.drawer-panel .line { animation: lineIn .4s var(--ease-out) both; }
@keyframes lineIn { from { opacity: 0; transform: translateX(16px); } }

/* fly-to-cart dot */
.fly { position: fixed; z-index: 130; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--yellow); box-shadow: 0 8px 24px rgba(0,0,0,.25); display: grid; place-items: center; pointer-events: none; }
.fly .icon { width: 20px; height: 20px; color: #1b2d74; }

/* ---------- responsive ---------- */
@media (max-width: 1320px) { .hide-md { display: none !important; } }
@media (max-width: 1180px) { .nav-link { padding: 10px 10px; } }
@media (max-width: 1024px) {
  /* a blurred header becomes the containing block for the fixed slide-out menu, so skip the blur here */
  .site-header, .site-header.scrolled .hdr { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header, .site-header.scrolled .hdr { background: var(--surface-glass); }
  .site-header.scrolled { background: transparent; }
  .main-nav { position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 88vw); background: var(--bg); flex-direction: column; align-items: stretch; padding: 90px 20px 30px; gap: 2px; transform: translateX(-100%); transition: transform .35s var(--ease-expo); z-index: 60; overflow-y: auto; box-shadow: 20px 0 60px rgba(0,0,0,.18); }
  .nav-open .main-nav { transform: none; }
  .nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(6,10,28,.45); z-index: 55; }
  .nav-open .site-header { z-index: 60; } /* the menu lives inside the header, so lift the header above the backdrop */
  .nav-pill { display: none; }
  .nav-toggle { display: grid; z-index: 61; }
  .nav-link { font-size: 1.05rem; padding: 12px; border-radius: 12px; }
  .dd { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 6px 12px; min-width: 0; background: none; }
  .dd a { padding: 8px 12px; color: var(--muted); }
  .show-sm { display: flex !important; }
  .nav-search { margin-bottom: 12px; }
  .hdr { gap: 12px; }
  .hero-grid, .split, .faq-split, .pdp-grid, .cart-grid, .checkout-grid { grid-template-columns: 1fr; }
  .split.reverse .split-art { order: 0; }
  .faq-title { position: static; }
  .hero-art { height: 440px; }
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .steps, .values { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: 1fr; }
  .stack-grid { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
  .gallery, .sticky { position: static; }
  .faq-split { gap: 16px; }
  .bracket.tl { left: 4%; } .bracket.br { right: 4%; }
}
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
  :root { --header-h: 68px; }
  .logo { font-size: 1.7rem; }
  .round-btn { width: 42px; height: 42px; }
  .hdr-actions { gap: 6px; }
  .hero { padding: 32px 0 48px; }
  .hero-art { height: 350px; }
  .hv1, .hv3 { height: 170px; }
  .hv2 { height: 255px; }
  .float-chip { font-size: .74rem; padding: 9px 11px; }
  .float-chip .icon { width: 26px; height: 26px; padding: 5px; }
  .fc1 { top: 6px; } .fc2 { bottom: 6px; }
  .pgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pcard-img { height: 170px; }
  .pcard-img .vial-single, .pcard-img .vial-group { height: 135px; }
  .pcard-body { padding: 14px; }
  .pcard-full, .pcard-sizes { display: none; }
  .pcard-foot { flex-direction: column; align-items: stretch; }
  .pcard-foot .btn { width: 100%; }
  .stack-card { grid-template-columns: 1fr; }
  .stack-body { padding: 20px; }
  .steps, .values { grid-template-columns: 1fr; }
  .hero-stats > div { padding: 0 12px; }
  .deal-bar { font-size: .78rem; padding: 8px 12px; }
  .deal-tag { display: none; }
  .site-header.scrolled .hdr { width: calc(100% - 16px); padding: 0 6px 0 16px; }
  .split-art { min-height: 320px; padding: 20px; }
  .gallery { grid-template-columns: 1fr; }
  .thumbs { grid-auto-flow: column; justify-content: start; order: 2; }
  .thumb { width: 64px; height: 64px; }
  .plan-opt { grid-template-columns: auto 1fr; padding: 16px; }
  .plan-price { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; gap: 8px; }
  .buy-row { flex-direction: column; }
  .buy-row .qty { align-self: flex-start; }
  .f-news { padding: 22px; }
  .shop-tools { flex-direction: column; }
  .shop-tools select { width: 100%; }
  .line { grid-template-columns: 60px 1fr auto; }
  .line-img { width: 60px; height: 72px; }
  .closer { padding: 80px 0; }
  .bracket { width: 40px; height: 40px; }
  .bracket.tl { top: 24px; } .bracket.br { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .rise, .line-mask > span, .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .window .chromatogram path { stroke-dashoffset: 0; }
  .window .win-rows li b { background: rgba(47,191,113,.16); color: var(--success); }
  .marquee-track { animation: none; }
  .hero-glow, .hv { animation: none; }
}