/* ==========================================================================
SUPERNORMAL — full site design system (scoped to .sn-brand).
Warm off-white + near-black + coral. Inter throughout, weight-based
hierarchy. Recolorable smiley mark. Playful-premium DTC, RUO-compliant.
========================================================================== */
.sn-brand{
--ink:#141412; --paper:#ffffff; --cream:#f7f5ef; --panel:#eceae4; --panel-2:#e4e1d9;
--coral:#f5402c; --coral-dk:#d8331f; --muted:#77746c; --line:#e4e1da;
--font:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
--r:20px;
background:var(--paper); color:var(--ink); font-family:var(--font);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; font-size:17px;
}
.sn-brand *{ box-sizing:border-box; }
.sn-brand a{ color:inherit; text-decoration:none; }
.sn-brand img{ max-width:100%; display:block; }
.sn-brand .dot{ color:var(--coral); }
.sn-brand ::selection{ background:var(--coral); color:#fff; }
/* smiley brand mark — EXACT mask traced from the real logo, recolorable via currentColor */
.sn-brand .sn-smiley{ display:inline-block; width:1em; height:1em; vertical-align:-.14em; flex:0 0 auto;
background-color:currentColor;
-webkit-mask:url(sn-smiley-mask.png) center/contain no-repeat; mask:url(sn-smiley-mask.png) center/contain no-repeat; }
/* Standalone: hide Apex theme chrome so each page reads as its own site + full-bleed */
body:has(.sn-brand) .ct-header, body:has(.sn-brand) header.ct-header, body:has(.sn-brand) .ct-footer,
body:has(.sn-brand) footer.ct-footer, body:has(.sn-brand) .hero-section, body:has(.sn-brand) .page-title,
body:has(.sn-brand) h1.page-title, body:has(.sn-brand) .apex-announce, body:has(.sn-brand) #apex-cart-drawer,
body:has(.sn-brand) #apex-cart-overlay, body:has(.sn-brand) .apex-footer,
body:has(.sn-brand) footer:not(.sn-footer), body:has(.sn-brand) .ct-footer-wrap{ display:none !important; }
body:has(.sn-brand) .site-main, body:has(.sn-brand) .entry-content, body:has(.sn-brand) [class*="content-area"],
body:has(.sn-brand) .ct-container, body:has(.sn-brand) main{ max-width:none !important; margin:0 !important; padding:0 !important; }
body:has(.sn-brand){ overflow-x:hidden; background:var(--paper); }
/* full-bleed on wide screens (override WP is-layout-constrained max-width) */
body:has(.sn-brand) .sn-brand,
body:has(.sn-brand) .entry-content > *,
body:has(.sn-brand) .is-layout-constrained > *{ max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
body:has(.sn-brand) .sn-brand{ width:100% !important; }
/* researcher (RUO) gate — reskinned to Supernormal on .sn-brand pages */
body:has(.sn-brand) .apex-gate{ background:rgba(20,20,18,.6); backdrop-filter:blur(8px); }
body:has(.sn-brand) .apex-gate-box{ font-family:"Inter",system-ui,sans-serif; border-radius:22px; max-width:520px; padding:44px; box-shadow:0 44px 96px -44px rgba(0,0,0,.6); }
body:has(.sn-brand) .apex-gate-box .apex-eyebrow{ color:#f5402c !important; font-weight:600; letter-spacing:.19em; text-transform:uppercase; font-size:.72rem; }
body:has(.sn-brand) .apex-gate-box h2{ font-family:"Inter",system-ui,sans-serif; font-weight:400; letter-spacing:-.02em; color:#141412; font-size:1.85rem; line-height:1.06; }
body:has(.sn-brand) .apex-gate-box>p{ color:#75746c; }
body:has(.sn-brand) .apex-gate-list li{ color:#141412; }
body:has(.sn-brand) .apex-gate-list li::before{ color:#f5402c; }
body:has(.sn-brand) .apex-gate-cta .apex-btn{ border-radius:999px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.76rem; font-family:"Inter",system-ui,sans-serif; }
body:has(.sn-brand) .apex-gate-cta .apex-btn:not(.apex-btn-outline){ background:#141412; color:#fff; border:none; }
body:has(.sn-brand) .apex-gate-cta .apex-btn:not(.apex-btn-outline):hover{ background:#f5402c; }
body:has(.sn-brand) .apex-gate-cta .apex-btn-outline{ background:transparent; color:#141412; box-shadow:inset 0 0 0 1.5px #141412; border:none; }
body:has(.sn-brand) .apex-gate-cta .apex-btn-outline:hover{ background:#141412; color:#fff; }
body:has(.sn-brand) .apex-gate-box .apex-muted a{ color:#f5402c; }
/* ---- type + section helpers ---- */
.sn-brand h1,.sn-brand h2,.sn-brand h3,.sn-brand h4{ font-family:var(--font); color:inherit; font-weight:400; letter-spacing:-.028em; margin:0; }
.sn-brand .sn-sec{ padding:clamp(64px,9vw,120px) 6vw; }
.sn-brand .sn-sec.tight{ padding:clamp(48px,6vw,80px) 6vw; }
.sn-brand .sn-cream{ background:var(--cream); }
.sn-brand .sn-kicker{ font-size:.72rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--coral); display:inline-block; margin-bottom:18px; }
.sn-brand .sn-h2{ font-size:clamp(2.2rem,4.8vw,3.9rem); line-height:1.0; }
.sn-brand .sn-lead{ font-size:1.12rem; color:var(--muted); max-width:54ch; line-height:1.6; margin:20px 0 0; font-weight:400; }
.sn-brand .sn-center{ text-align:center; } .sn-brand .sn-center .sn-lead{ margin-left:auto; margin-right:auto; }
.sn-brand .sn-sechead{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap; }
.sn-brand .sn-morelink{ font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border-bottom:2px solid var(--ink); padding-bottom:3px; white-space:nowrap; transition:.2s; }
.sn-brand .sn-morelink:hover{ color:var(--coral); border-color:var(--coral); }
/* ---- buttons ---- */
.sn-brand .sn-btn{ display:inline-flex; align-items:center; gap:9px; background:var(--ink); color:#fff; border-radius:999px; padding:15px 30px; font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; transition:background .25s, transform .25s, box-shadow .25s; cursor:pointer; border:none; }
.sn-brand .sn-btn:hover{ background:var(--coral); transform:translateY(-2px); box-shadow:0 12px 26px -14px var(--coral); }
.sn-brand .sn-btn.ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.sn-brand .sn-btn.ghost:hover{ background:var(--ink); color:#fff; box-shadow:none; }
.sn-brand .sn-btn.light{ background:#fff; color:var(--ink); }
.sn-brand .sn-btn.light:hover{ background:var(--coral); color:#fff; }
.sn-brand .sn-btn.on-coral{ background:#fff; color:var(--coral); }
.sn-brand .sn-btn.on-coral:hover{ background:var(--ink); color:#fff; box-shadow:none; }
.sn-brand .sn-btnrow{ display:flex; gap:14px; flex-wrap:wrap; }
/* ---- announcement + sticky header ---- */
.sn-brand .sn-announce{ background:var(--ink); color:#fff; text-align:center; font-size:.76rem; font-weight:500; letter-spacing:.06em; padding:11px 16px; }
.sn-brand .sn-announce .dot{ color:var(--coral); margin:0 12px; }
.sn-brand .sn-header{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:16px 6vw; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.3) blur(16px); border-bottom:1px solid var(--line); }
.sn-brand .sn-logo{ display:inline-flex; align-items:center; font-weight:800; font-size:1.6rem; letter-spacing:-.04em; }
.sn-brand .sn-logo .sn-smiley{ width:29px; height:29px; color:var(--coral); margin-right:11px; }
.sn-brand .sn-nav{ display:flex; gap:34px; font-size:.9rem; font-weight:500; }
.sn-brand .sn-nav a{ position:relative; padding:4px 0; transition:color .2s; }
.sn-brand .sn-nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--coral); transition:width .28s cubic-bezier(.23,1,.32,1); }
.sn-brand .sn-nav a:hover{ color:var(--coral); } .sn-brand .sn-nav a:hover::after{ width:100%; }
.sn-brand .sn-nav a.on{ color:var(--coral); } .sn-brand .sn-nav a.on::after{ width:100%; }
.sn-brand .sn-headr{ display:flex; align-items:center; gap:22px; }
.sn-brand .sn-cart{ font-size:.82rem; font-weight:600; border:1.5px solid var(--ink); border-radius:999px; padding:9px 17px; transition:.22s; white-space:nowrap; }
.sn-brand .sn-cart:hover{ background:var(--ink); color:#fff; }
/* ---- hero (home) ---- */
.sn-brand .sn-hero{ display:grid; grid-template-columns:1.02fr 1fr; min-height:86vh; }
.sn-brand .sn-hero-text{ background:var(--cream); display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,6vw,84px); position:relative; }
.sn-brand .sn-eyebrow{ font-size:.74rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); margin-bottom:24px; }
.sn-brand .sn-hero h1{ font-size:clamp(3rem,6.6vw,6rem); line-height:.94; letter-spacing:-.035em; margin:0 0 24px; }
.sn-brand .sn-hero-lede{ font-size:1.18rem; color:#41403a; max-width:42ch; line-height:1.55; margin:0 0 36px; }
.sn-brand .sn-hero-photo{ background:var(--panel) center/cover no-repeat; position:relative; }
.sn-brand .sn-hero-badge{ position:absolute; left:clamp(40px,6vw,84px); bottom:clamp(28px,4vw,52px); display:flex; align-items:center; gap:12px; font-size:.8rem; font-weight:600; color:#41403a; }
.sn-brand .sn-hero-badge .sn-smiley{ width:22px; height:22px; color:var(--coral); }
/* ---- coral marquee ---- */
.sn-brand .sn-marquee{ background:var(--coral); color:#fff; overflow:hidden; padding:14px 0; }
.sn-brand .sn-mtrack{ display:flex; width:max-content; white-space:nowrap; animation:sn-scroll 30s linear infinite; }
.sn-brand .sn-mtrack > span{ display:inline-flex; align-items:center; }
.sn-brand .sn-mtrack b{ font-weight:600; font-size:1.15rem; letter-spacing:-.01em; padding:0 24px; display:inline-flex; align-items:center; gap:24px; }
.sn-brand .sn-mtrack b::after{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; }
@keyframes sn-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ---- trust stats ---- */
.sn-brand .sn-stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sn-brand .sn-stat{ text-align:center; padding:40px 20px; border-left:1px solid var(--line); }
.sn-brand .sn-stat:first-child{ border-left:0; }
.sn-brand .sn-stat b{ display:block; font-size:2.1rem; font-weight:400; letter-spacing:-.03em; }
.sn-brand .sn-stat b .dot{ font-weight:400; }
.sn-brand .sn-stat > span{ font-size:.72rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-top:6px; display:block; }
.sn-brand .sn-stat b span{ font-size:inherit; font-weight:inherit; letter-spacing:inherit; text-transform:none; color:inherit; margin:0; display:inline; }
.sn-brand .sn-stat b .dot{ color:var(--coral); }
/* ---- category tiles ---- */
.sn-brand .sn-cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sn-brand .sn-cat{ background:var(--panel); border-radius:var(--r); padding:32px; min-height:216px; display:flex; flex-direction:column; justify-content:space-between; transition:background .35s, transform .35s, box-shadow .35s; }
.sn-brand .sn-cat:hover{ background:var(--ink); color:#fff; transform:translateY(-5px); box-shadow:0 30px 50px -34px rgba(0,0,0,.6); }
.sn-brand .sn-cat-n{ font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.sn-brand .sn-cat:hover .sn-cat-n{ color:#a9a69d; }
.sn-brand .sn-cat h3{ font-size:1.9rem; line-height:1.04; margin:12px 0 0; }
.sn-brand .sn-cat-go{ font-size:.82rem; font-weight:600; color:var(--coral); display:inline-flex; align-items:center; gap:7px; transition:gap .25s; }
.sn-brand .sn-cat:hover .sn-cat-go{ color:#fff; gap:12px; }
/* ---- product cards (packaging) ---- */
.sn-brand .sn-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.sn-brand .sn-card{ display:flex; flex-direction:column; }
.sn-brand .sn-card .sn-pkg{ transition:transform .45s cubic-bezier(.23,1,.32,1), box-shadow .45s; }
.sn-brand .sn-card:hover .sn-pkg{ transform:translateY(-8px); box-shadow:0 34px 62px -34px rgba(0,0,0,.42); }
.sn-brand .sn-card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
.sn-brand .sn-card-foot .sn-price{ font-size:1.14rem; font-weight:600; }
.sn-brand .sn-card-foot .sn-price s{ color:var(--muted); font-weight:400; margin-right:7px; }
.sn-brand .sn-card-add{ background:var(--ink); color:#fff; border-radius:999px; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:11px 19px; transition:background .25s; }
.sn-brand .sn-card:hover .sn-card-add{ background:var(--coral); }
/* ---- packaging box (matches Supernormal pouch/box) ---- */
.sn-brand .sn-pkg{ background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 22px 44px -30px rgba(0,0,0,.3); aspect-ratio:4/5; }
.sn-brand .sn-pkg-band{ height:15%; background:var(--coral); flex:0 0 auto; }
.sn-brand .sn-pkg-body{ padding:20px 22px 18px; flex:1; display:flex; flex-direction:column; }
.sn-brand .sn-pkg-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.sn-brand .sn-pkg-tag{ font-weight:700; font-size:.6rem; line-height:1.35; color:#111; }
.sn-brand .sn-pkg-head .sn-smiley{ width:32px; height:32px; color:#111; flex:0 0 auto; }
.sn-brand .sn-pkg-word{ font-weight:800; font-size:1.35rem; letter-spacing:-.04em; color:#111; }
.sn-brand .sn-pkg-word .dot{ color:var(--coral); }
.sn-brand .sn-pkg-dash{ width:34px; height:3px; background:var(--coral); margin:9px 0 14px; }
.sn-brand .sn-pkg-type{ font-size:.82rem; color:#4a4a46; }
.sn-brand .sn-pkg-name{ font-size:1.5rem; font-weight:700; letter-spacing:-.025em; margin:6px 0 2px; color:#111; line-height:1.05; }
.sn-brand .sn-pkg-variant{ color:var(--coral); font-weight:700; font-size:.98rem; }
.sn-brand .sn-pkg-fine{ margin-top:auto; padding-top:18px; font-size:.53rem; color:#a2a09a; line-height:1.5; letter-spacing:.01em; }
/* ---- photo product card (real labeled vials) ---- */
.sn-brand .sn-card-media{ background:#f4f1ea; border:1px solid var(--line); border-radius:var(--r); aspect-ratio:4/5; overflow:hidden; }
.sn-brand .sn-card-media img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s cubic-bezier(.23,1,.32,1); }
.sn-brand .sn-card:hover .sn-card-media img{ transform:scale(1.045); }
.sn-brand .sn-card-body{ padding:15px 4px 0; }
.sn-brand .sn-card-cat{ font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.sn-brand .sn-card-name{ font-size:1.3rem; font-weight:400; letter-spacing:-.02em; margin:4px 0 0; }
/* ---- bundles / stacks ---- */
.sn-brand .sn-stacks{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.sn-brand .sn-stack{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:transform .45s cubic-bezier(.23,1,.32,1), box-shadow .45s; }
.sn-brand .sn-stack:hover{ transform:translateY(-6px); box-shadow:0 34px 62px -38px rgba(0,0,0,.42); }
.sn-brand .sn-stack-media{ aspect-ratio:16/11; background:#ece8dd; overflow:hidden; }
.sn-brand .sn-stack-media img{ width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.23,1,.32,1); }
.sn-brand .sn-stack:hover .sn-stack-media img{ transform:scale(1.04); }
.sn-brand .sn-stack-body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.sn-brand .sn-stack-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.sn-brand .sn-stack-tag{ font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sn-brand .sn-stack-save{ background:var(--coral); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.04em; padding:5px 12px; border-radius:999px; }
.sn-brand .sn-stack h3{ font-size:1.7rem; letter-spacing:-.02em; line-height:1.05; }
.sn-brand .sn-stack-comp{ color:var(--muted); font-size:.9rem; margin:8px 0 0; line-height:1.5; }
.sn-brand .sn-stack-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:20px; }
.sn-brand .sn-stack-foot .sn-price{ font-size:1.15rem; font-weight:600; }
.sn-brand .sn-stack-foot .sn-price s{ color:var(--muted); font-weight:400; margin-right:7px; }
.sn-brand .sn-stack .sn-card-add{ background:var(--ink); color:#fff; border-radius:999px; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:11px 19px; transition:background .25s; }
.sn-brand .sn-stack:hover .sn-card-add{ background:var(--coral); }
/* ---- product film + gallery ---- */
.sn-brand .sn-film{ border-radius:var(--r); overflow:hidden; background:var(--panel); aspect-ratio:16/9; box-shadow:0 40px 80px -50px rgba(0,0,0,.5); }
.sn-brand .sn-film video, .sn-brand .sn-film img{ width:100%; height:100%; object-fit:cover; display:block; }
.sn-brand .sn-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
.sn-brand .sn-gallery figure{ margin:0; border-radius:var(--r); overflow:hidden; background:var(--panel); aspect-ratio:4/3; }
.sn-brand .sn-gallery img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.23,1,.32,1); }
.sn-brand .sn-gallery figure:hover img{ transform:scale(1.045); }
/* ---- how it works (numbered steps) ---- */
.sn-brand .sn-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px; }
.sn-brand .sn-step{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:34px 30px; }
.sn-brand .sn-step-n{ font-size:.72rem; font-weight:700; letter-spacing:.14em; color:var(--coral); }
.sn-brand .sn-step h3{ font-size:1.55rem; margin:16px 0 10px; }
.sn-brand .sn-step p{ color:var(--muted); font-size:.98rem; line-height:1.6; margin:0; }
/* ---- feature split ---- */
.sn-brand .sn-split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.sn-brand .sn-split.rev .sn-split-media{ order:2; }
.sn-brand .sn-split-media{ background:var(--panel) center/cover no-repeat; min-height:520px; }
.sn-brand .sn-split-text{ padding:clamp(48px,6vw,92px); display:flex; flex-direction:column; justify-content:center; }
.sn-brand .sn-split-text.on-cream{ background:var(--cream); }
.sn-brand .sn-ticks{ list-style:none; padding:0; margin:26px 0 34px; }
.sn-brand .sn-ticks li{ display:flex; gap:13px; padding:13px 0; border-top:1px solid var(--line); font-size:1rem; }
.sn-brand .sn-ticks li::before{ content:""; width:20px; height:20px; flex:0 0 auto; margin-top:2px; border-radius:50%; background:var(--coral); -webkit-mask:url('data:image/svg+xml;utf8,') center/76% no-repeat; mask:url('data:image/svg+xml;utf8,') center/76% no-repeat; }
/* ---- big coral statement ---- */
.sn-brand .sn-coral{ background:var(--coral); color:#fff; text-align:center; padding:clamp(80px,11vw,140px) 6vw; position:relative; overflow:hidden; }
.sn-brand .sn-coral .sn-coral-mark{ position:absolute; width:150px; height:150px; color:rgba(255,255,255,.15); }
.sn-brand .sn-coral .m1{ top:40px; left:5%; } .sn-brand .sn-coral .m2{ bottom:40px; right:5%; }
.sn-brand .sn-coral .sn-coral-mark .sn-smiley{ width:100%; height:100%; display:block; }
.sn-brand .sn-coral h2{ font-size:clamp(2.8rem,7vw,6rem); line-height:.96; margin:0 0 22px; position:relative; }
.sn-brand .sn-coral p{ font-size:1.14rem; color:rgba(255,255,255,.92); max-width:48ch; margin:0 auto 34px; position:relative; }
.sn-brand .sn-coral .sn-btnrow{ justify-content:center; position:relative; }
/* ---- dark band ---- */
.sn-brand .sn-band{ background:var(--ink); color:#fff; padding:clamp(72px,9vw,120px) 6vw; }
.sn-brand .sn-band .sn-lead{ color:#b7b4ac; }
/* ---- quotes / testimonials ---- */
.sn-brand .sn-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px; }
.sn-brand .sn-quote{ background:var(--cream); border-radius:var(--r); padding:32px; display:flex; flex-direction:column; }
.sn-brand .sn-quote p{ font-size:1.05rem; line-height:1.55; margin:0 0 22px; }
.sn-brand .sn-quote .sn-by{ margin-top:auto; font-size:.82rem; color:var(--muted); }
.sn-brand .sn-quote .sn-by b{ color:var(--ink); font-weight:600; }
.sn-brand .sn-stars{ color:var(--coral); font-size:.9rem; letter-spacing:2px; margin-bottom:16px; }
/* ---- FAQ ---- */
.sn-brand .sn-faq{ max-width:820px; margin:0 auto; }
.sn-brand .sn-faq details{ border-top:1px solid var(--line); padding:6px 0; }
.sn-brand .sn-faq details:last-child{ border-bottom:1px solid var(--line); }
.sn-brand .sn-faq summary{ list-style:none; cursor:pointer; padding:22px 4px; font-size:1.15rem; font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.sn-brand .sn-faq summary::-webkit-details-marker{ display:none; }
.sn-brand .sn-faq summary::after{ content:"+"; color:var(--coral); font-size:1.5rem; font-weight:400; transition:transform .25s; }
.sn-brand .sn-faq details[open] summary::after{ transform:rotate(45deg); }
.sn-brand .sn-faq details p{ margin:0 4px 22px; color:var(--muted); line-height:1.65; max-width:70ch; }
/* ---- newsletter ---- */
.sn-brand .sn-news-form{ display:flex; gap:10px; max-width:460px; margin:26px auto 0; }
.sn-brand .sn-news-form input{ flex:1; border:1.5px solid var(--line); border-radius:999px; padding:14px 22px; font:inherit; font-size:.95rem; background:#fff; }
.sn-brand .sn-news-form input:focus{ outline:none; border-color:var(--ink); }
/* ---- footer ---- */
.sn-brand .sn-footer{ background:var(--ink); color:#cfccc4; padding:74px 6vw 40px; }
.sn-brand .sn-foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.1); }
.sn-brand .sn-foot-brand .sn-logo{ color:#fff; font-size:1.7rem; margin-bottom:18px; }
.sn-brand .sn-foot-brand .sn-logo .sn-smiley{ color:var(--coral); }
.sn-brand .sn-foot-brand p{ max-width:34ch; font-size:.95rem; line-height:1.6; color:#94918a; }
.sn-brand .sn-foot-col h4{ color:#fff; font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; margin:0 0 18px; }
.sn-brand .sn-foot-col a{ display:block; padding:7px 0; font-size:.95rem; color:#cfccc4; transition:color .2s; }
.sn-brand .sn-foot-col a:hover{ color:var(--coral); }
.sn-brand .sn-foot-bot{ display:flex; justify-content:space-between; gap:20px; padding-top:26px; font-size:.8rem; color:#7d7a73; flex-wrap:wrap; }
.sn-brand .sn-foot-ruo{ margin-top:20px; font-size:.74rem; line-height:1.6; color:#6d6a64; max-width:900px; }
/* ---- interior page hero ---- */
.sn-brand .sn-phero{ background:var(--cream); padding:clamp(64px,9vw,120px) 6vw clamp(52px,7vw,88px); }
.sn-brand .sn-phero.dark{ background:var(--ink); color:#fff; }
.sn-brand .sn-phero.coral{ background:var(--coral); color:#fff; }
.sn-brand .sn-phero.coral .sn-kicker{ color:#fff; opacity:.85; }
.sn-brand .sn-phero h1{ font-size:clamp(2.6rem,6vw,5rem); line-height:.98; max-width:16ch; }
.sn-brand .sn-phero .sn-lead{ color:inherit; opacity:.86; }
.sn-brand .sn-crumb{ font-size:.78rem; color:var(--muted); margin-bottom:26px; letter-spacing:.02em; }
.sn-brand .sn-crumb a:hover{ color:var(--coral); } .sn-brand .sn-crumb .sep{ margin:0 9px; opacity:.5; }
/* ---- shop filters ---- */
.sn-brand .sn-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.sn-brand .sn-chip{ border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:10px 20px; font-size:.82rem; font-weight:500; cursor:pointer; transition:.2s; color:var(--ink); }
.sn-brand .sn-chip:hover{ border-color:var(--ink); }
.sn-brand .sn-chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.sn-brand .sn-shopgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px 24px; }
.sn-brand .sn-card.hide{ display:none; }
/* ---- PDP ---- */
.sn-brand .sn-pdp{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,72px); padding:clamp(40px,5vw,64px) 6vw clamp(56px,7vw,88px); align-items:start; }
.sn-brand .sn-pdp-media{ position:sticky; top:96px; background:var(--cream); border-radius:var(--r); padding:clamp(36px,5vw,64px); }
.sn-brand .sn-pdp-media .sn-pkg{ max-width:360px; margin:0 auto; }
.sn-brand .sn-pdp-cat{ font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--coral); }
.sn-brand .sn-pdp h1{ font-size:clamp(2.4rem,4.6vw,3.5rem); margin:12px 0 6px; }
.sn-brand .sn-pdp-sub{ color:var(--muted); font-size:1.02rem; line-height:1.55; max-width:46ch; }
.sn-brand .sn-pdp-price{ font-size:1.7rem; font-weight:600; margin:26px 0 4px; }
.sn-brand .sn-pdp-price s{ color:var(--muted); font-weight:400; font-size:1.2rem; margin-right:10px; }
.sn-brand .sn-opts{ display:flex; gap:10px; margin:22px 0 6px; }
.sn-brand .sn-opt{ border:1.5px solid var(--line); border-radius:14px; padding:12px 20px; cursor:pointer; transition:.2s; text-align:center; min-width:92px; }
.sn-brand .sn-opt.on,.sn-brand .sn-opt:hover{ border-color:var(--ink); }
.sn-brand .sn-opt b{ display:block; font-weight:600; font-size:.98rem; } .sn-brand .sn-opt span{ font-size:.8rem; color:var(--muted); }
.sn-brand .sn-pdp-cta{ display:flex; gap:12px; margin:26px 0 24px; }
.sn-brand .sn-pdp-cta .sn-btn{ flex:1; justify-content:center; padding:17px; }
.sn-brand .sn-assure{ display:flex; flex-wrap:wrap; gap:10px 26px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sn-brand .sn-assure span{ font-size:.85rem; color:#42413b; display:inline-flex; align-items:center; gap:9px; }
.sn-brand .sn-assure span::before{ content:""; width:16px; height:16px; border-radius:50%; background:var(--coral); -webkit-mask:url('data:image/svg+xml;utf8,') center/78% no-repeat; mask:url('data:image/svg+xml;utf8,') center/78% no-repeat; }
.sn-brand .sn-pdp-note{ font-size:.9rem; color:var(--muted); line-height:1.6; margin-top:22px; }
/* specs table + coa */
.sn-brand .sn-specs{ width:100%; border-collapse:collapse; margin-top:14px; }
.sn-brand .sn-specs tr{ border-top:1px solid var(--line); }
.sn-brand .sn-specs tr:last-child{ border-bottom:1px solid var(--line); }
.sn-brand .sn-specs th{ text-align:left; padding:15px 0; font-weight:500; color:var(--muted); font-size:.9rem; width:42%; vertical-align:top; }
.sn-brand .sn-specs td{ padding:15px 0; font-size:.95rem; font-family:ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:-.01em; }
.sn-brand .sn-coa-card{ background:var(--ink); color:#fff; border-radius:var(--r); padding:34px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.sn-brand .sn-coa-card .sn-coa-l b{ font-size:1.3rem; font-weight:500; display:block; }
.sn-brand .sn-coa-card .sn-coa-l span{ color:#a9a69d; font-size:.9rem; }
.sn-brand .sn-coa-meta{ display:flex; gap:34px; }
.sn-brand .sn-coa-meta div b{ display:block; font-size:1.35rem; font-weight:400; color:var(--coral); }
.sn-brand .sn-coa-meta div span{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#a9a69d; }
/* verify tool */
.sn-brand .sn-verify-box{ max-width:640px; margin:34px auto 0; }
.sn-brand .sn-verify-form{ display:flex; gap:10px; }
.sn-brand .sn-verify-form input{ flex:1; border:none; border-radius:999px; padding:17px 24px; font:inherit; font-size:1rem; background:rgba(255,255,255,.16); color:#fff; }
.sn-brand .sn-verify-form input::placeholder{ color:rgba(255,255,255,.6); }
.sn-brand .sn-verify-form input:focus{ outline:2px solid #fff; }
.sn-brand .sn-verify-hint{ text-align:center; margin-top:16px; font-size:.85rem; opacity:.8; }
.sn-brand .sn-coa-anat{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px; }
.sn-brand .sn-coa-anat div{ background:var(--cream); border-radius:16px; padding:26px 24px; }
.sn-brand .sn-coa-anat b{ display:block; font-size:2rem; font-weight:400; color:var(--coral); letter-spacing:-.02em; }
.sn-brand .sn-coa-anat h4{ font-size:1.05rem; font-weight:600; margin:12px 0 6px; }
.sn-brand .sn-coa-anat p{ font-size:.88rem; color:var(--muted); margin:0; line-height:1.55; }
/* values grid (about) */
.sn-brand .sn-values{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.sn-brand .sn-value{ background:var(--paper); padding:44px; }
.sn-brand .sn-value .sn-vn{ font-size:.72rem; font-weight:700; letter-spacing:.14em; color:var(--coral); }
.sn-brand .sn-value h3{ font-size:1.7rem; margin:14px 0 12px; }
.sn-brand .sn-value p{ color:var(--muted); line-height:1.6; margin:0; }
/* reveal + motion engine */
.sn-brand .rv{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1); }
.sn-brand .rv.in{ opacity:1; transform:none; }
.sn-brand [data-par]{ will-change:transform; }
.sn-brand .sn-btn{ will-change:transform; }
/* ===== v3 design elevation ===== */
/* hero: motif, side label, scroll cue, staggered entrance, image clip-reveal */
.sn-brand .sn-hero{ position:relative; overflow:hidden; }
.sn-brand .sn-hero-motif{ position:absolute; z-index:0; color:var(--coral); opacity:.05; pointer-events:none; left:-6%; top:2%; width:56%; height:auto; aspect-ratio:1; }
.sn-brand .sn-hero-motif .sn-smiley{ width:100%; height:100%; display:block; }
.sn-brand .sn-hero-side{ position:absolute; left:20px; bottom:9vh; writing-mode:vertical-rl; transform:rotate(180deg); font-size:.64rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); z-index:3; }
.sn-brand .sn-scrollcue{ position:absolute; left:6vw; bottom:24px; z-index:3; font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:12px; }
.sn-brand .sn-scrollcue::before{ content:""; width:46px; height:1px; background:var(--ink); transform-origin:left; animation:sn-cue 2s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes sn-cue{ 0%,100%{transform:scaleX(.25);opacity:.4} 50%{transform:scaleX(1);opacity:1} }
.sn-brand .sn-hero-text > *{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1); }
.sn-brand .sn-hero.go .sn-hero-text > *{ opacity:1; transform:none; }
.sn-brand .sn-hero.go .sn-hero-text > *:nth-child(1){ transition-delay:.05s; }
.sn-brand .sn-hero.go .sn-hero-text > *:nth-child(2){ transition-delay:.14s; }
.sn-brand .sn-hero.go .sn-hero-text > *:nth-child(3){ transition-delay:.24s; }
.sn-brand .sn-hero.go .sn-hero-text > *:nth-child(4){ transition-delay:.34s; }
.sn-brand .sn-hero-photo{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s cubic-bezier(.19,1,.22,1); }
.sn-brand .sn-hero.go .sn-hero-photo{ clip-path:inset(0 0 0 0); transition-delay:.12s; }
.sn-brand .sn-hero-chip{ position:absolute; top:26px; right:26px; background:#fff; color:var(--ink); border-radius:999px; padding:11px 18px; font-size:.76rem; font-weight:600; letter-spacing:.02em; box-shadow:0 20px 44px -24px rgba(0,0,0,.55); display:inline-flex; align-items:center; gap:9px; z-index:2; }
.sn-brand .sn-hero-chip .sn-smiley{ width:16px; height:16px; color:var(--coral); }
/* section numbering on kickers */
.sn-brand .sn-kicker.num::before{ content:attr(data-n); color:var(--ink); opacity:.3; margin-right:14px; font-variant-numeric:tabular-nums; letter-spacing:0; }
/* stat count-up numerals */
.sn-brand .sn-stat b{ font-variant-numeric:tabular-nums; }
/* bolder marquee */
.sn-brand .sn-mtrack b{ font-size:1.42rem; }
/* big editorial coral type: alternating solid + outline words */
.sn-brand .sn-coral h2 .out{ color:transparent; -webkit-text-stroke:1.5px #fff; }
@supports not ((-webkit-text-stroke:1px #fff)){ .sn-brand .sn-coral h2 .out{ color:#fff; } }
@media (prefers-reduced-motion: reduce){
.sn-brand .rv, .sn-brand .sn-hero-text > *, .sn-brand .sn-hero-photo{ transition:none !important; opacity:1 !important; transform:none !important; clip-path:none !important; }
.sn-brand [data-par]{ transform:none !important; }
}
/* ---- responsive ---- */
@media (max-width:1000px){
.sn-brand .sn-cards,.sn-brand .sn-shopgrid{ grid-template-columns:repeat(2,1fr); }
.sn-brand .sn-cats,.sn-brand .sn-steps,.sn-brand .sn-quotes,.sn-brand .sn-coa-anat{ grid-template-columns:1fr 1fr; }
.sn-brand .sn-foot-top{ grid-template-columns:1fr 1fr; }
}
/* mobile menu burger (hidden on desktop) */
.sn-brand .sn-burger{ display:none; width:42px; height:42px; border:none; background:transparent; position:relative; cursor:pointer; margin-right:-8px; z-index:60; }
.sn-brand .sn-burger span{ position:absolute; left:10px; right:10px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s cubic-bezier(.19,1,.22,1), opacity .2s, top .3s cubic-bezier(.19,1,.22,1); }
.sn-brand .sn-burger span:nth-child(1){ top:15px; } .sn-brand .sn-burger span:nth-child(2){ top:20px; } .sn-brand .sn-burger span:nth-child(3){ top:25px; }
body.sn-menu-open .sn-brand .sn-burger span:nth-child(1){ top:20px; transform:rotate(45deg); }
body.sn-menu-open .sn-brand .sn-burger span:nth-child(2){ opacity:0; }
body.sn-menu-open .sn-brand .sn-burger span:nth-child(3){ top:20px; transform:rotate(-45deg); }
@media (max-width:760px){
.sn-brand{ font-size:16px; }
/* slide-in mobile nav (drop backdrop-filter so it doesn't trap the fixed overlay) */
.sn-brand .sn-header{ padding:14px 6vw; background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none; }
.sn-brand .sn-burger{ display:block; }
.sn-brand .sn-nav{ position:fixed; inset:0; z-index:45; background:var(--paper); flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding:0 10vw; transform:translateX(103%); transition:transform .5s cubic-bezier(.19,1,.22,1); }
.sn-brand .sn-nav a{ font-size:2.3rem; font-weight:500; padding:15px 0; letter-spacing:-.02em; }
.sn-brand .sn-nav a::after{ display:none; }
body.sn-menu-open .sn-brand .sn-nav{ transform:none; }
.sn-brand .sn-cart{ padding:8px 15px; font-size:.8rem; }
/* hero */
.sn-brand .sn-hero,.sn-brand .sn-split,.sn-brand .sn-pdp{ grid-template-columns:1fr; }
.sn-brand .sn-hero{ min-height:0; }
.sn-brand .sn-hero-text{ padding:44px 6vw 40px; }
.sn-brand .sn-hero h1{ font-size:clamp(2.5rem,10.5vw,3.5rem); }
.sn-brand .sn-hero-lede{ font-size:1.05rem; }
.sn-brand .sn-hero-side,.sn-brand .sn-scrollcue,.sn-brand .sn-hero-motif{ display:none; }
.sn-brand .sn-hero-chip{ top:16px; right:16px; padding:9px 14px; font-size:.7rem; }
.sn-brand .sn-split.rev .sn-split-media{ order:0; }
.sn-brand .sn-hero-photo,.sn-brand .sn-split-media{ min-height:74vw; }
.sn-brand .sn-split-text{ padding:48px 6vw; }
/* pdp */
.sn-brand .sn-pdp-media{ position:static; }
.sn-brand .sn-pdp-cta{ flex-direction:column; }
.sn-brand .sn-coa-card{ flex-direction:column; align-items:flex-start; }
.sn-brand .sn-coa-meta{ gap:24px; }
/* grids */
.sn-brand .sn-stats{ grid-template-columns:1fr 1fr; }
.sn-brand .sn-stat:nth-child(3){ border-left:0; } .sn-brand .sn-stat:nth-child(n+3){ border-top:1px solid var(--line); }
.sn-brand .sn-cats,.sn-brand .sn-steps,.sn-brand .sn-quotes,.sn-brand .sn-values,.sn-brand .sn-coa-anat,.sn-brand .sn-cards,.sn-brand .sn-shopgrid,.sn-brand .sn-gallery,.sn-brand .sn-stacks{ grid-template-columns:1fr; }
.sn-brand .sn-foot-top{ grid-template-columns:1fr 1fr; gap:30px 20px; }
.sn-brand .sn-announce{ font-size:.68rem; letter-spacing:.03em; }
.sn-brand .sn-band > div{ grid-template-columns:1fr !important; gap:24px; }
.sn-brand .sn-sechead{ margin-bottom:32px; }
.sn-brand .sn-specs+div,.sn-brand .sn-sec [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; }
}
@media (max-width:420px){
.sn-brand .sn-foot-top{ grid-template-columns:1fr; }
.sn-brand .sn-hero h1{ font-size:2.55rem; }
}
/* ============================================================= reskin fixes (2026-07-22) */
/* No-JS safety: only hold the hero content hidden when JS is present to reveal it
(apex-sn.css hid .sn-hero-text>* unconditionally, so a missing .go left it blank). */
html:not(.sn-js) .sn-brand .sn-hero-text > *{ opacity:1 !important; transform:none !important; }
/* RUO researcher gate overlay — apex-sn.css never carried the .sn-gate styles that
the storeframe-commerce gate markup needs, so the gate rendered unstyled. */
.sn-brand .sn-gate{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(20,20,18,.5); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
body.sn-gate-on{ overflow:hidden; }
body.sn-gate-on .sn-gate{ display:flex; }
.sn-brand .sn-gate-box{ background:var(--paper); border-radius:24px; width:100%; max-width:468px; padding:clamp(28px,4vw,44px); box-shadow:0 50px 100px -30px rgba(0,0,0,.55); text-align:left; animation:sn-gate-rise .5s cubic-bezier(.19,1,.22,1); }
@keyframes sn-gate-rise{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
.sn-brand .sn-gate-box .sn-smiley{ width:40px; height:40px; color:var(--coral); margin-bottom:18px; }
.sn-brand .sn-gate-box .sn-eyebrow{ margin-bottom:14px; }
.sn-brand .sn-gate-box h2{ font-size:clamp(1.5rem,3vw,1.9rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 14px; }
.sn-brand .sn-gate-box > p{ color:var(--muted); font-size:1rem; line-height:1.55; margin:0 0 20px; }
.sn-brand .sn-gate-list{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:12px; }
.sn-brand .sn-gate-list li{ position:relative; padding-left:30px; font-size:.95rem; line-height:1.4; }
.sn-brand .sn-gate-list li::before{ content:"✓"; position:absolute; left:0; top:-1px; color:var(--coral); font-weight:700; }
.sn-brand .sn-gate-cta{ display:flex; gap:12px; margin-bottom:18px; }
.sn-brand .sn-gate-enter{ flex:1; background:var(--ink); color:#fff; border:none; border-radius:999px; padding:15px 22px; font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; transition:background .25s, transform .25s; }
.sn-brand .sn-gate-enter:hover{ background:var(--coral); transform:translateY(-2px); }
.sn-brand .sn-gate-exit{ background:transparent; color:var(--ink); border:none; border-radius:999px; padding:15px 22px; font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; box-shadow:inset 0 0 0 1.5px var(--line); transition:box-shadow .25s; }
.sn-brand .sn-gate-exit:hover{ box-shadow:inset 0 0 0 1.5px var(--ink); }
.sn-brand .sn-gate-fine{ font-size:.8rem; color:var(--muted); line-height:1.5; margin:0; }
.sn-brand .sn-gate-fine a{ color:var(--coral); border-bottom:1px solid rgba(245,64,44,.35); }