/* Continuous motion, distinct formula worlds, and a stable navigation layer. */
:root{--header-height:96px;--pattern-line:rgba(228,209,245,.09)}
.header{z-index:60;isolation:isolate;background:rgba(21,13,27,.94);backdrop-filter:blur(20px)}
.header nav{z-index:61}.product-section-nav{z-index:30;top:var(--header-height);background:rgba(21,13,27,.96);backdrop-filter:blur(16px)}
[id]{scroll-margin-top:calc(var(--header-height) + 90px)}
.header a,.footer-navigation a,.text-link,.product-section-nav a{transition:color .25s,text-shadow .25s,transform .25s}
.header a:hover,.footer-navigation a:hover,.text-link:hover,.product-section-nav a:hover{color:#efc5ff;text-shadow:0 0 22px #c697db66;transform:translateY(-2px)}
.motion-toggle{min-width:72px;font-size:11px;letter-spacing:.03em}
.formula-layout{align-items:start}.formula-layout .tech-stage{align-self:start;margin-top:0}
.hero-art{overflow:hidden}.hero-art img{animation:hero-journey 16s ease-in-out infinite!important;transform-origin:65% 55%;will-change:transform}
@keyframes hero-journey{0%,100%{transform:scale(1.08) translate(-1%,0) rotate(-1deg)}50%{transform:scale(1.18) translate(2%,-2%) rotate(1.5deg)}}
.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,#e2c5ff16 45%,transparent 65%);background-size:240% 100%;animation:light-sweep 12s ease-in-out infinite;pointer-events:none}
.ticker{overflow:hidden}.ticker-track{display:flex;width:max-content;animation:brand-loop 22s linear infinite!important;will-change:transform;gap:0}.ticker-group{flex:none;display:flex;align-items:center;white-space:nowrap;padding-right:2rem;gap:2rem}.ticker-group i{animation:star-turn 12s linear infinite}
@keyframes brand-loop{to{transform:translateX(-50%)}}@keyframes star-turn{to{transform:rotate(360deg)}}
.button,.plan-button,.once-button,.filters button,.bag-button{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s,color .25s,border-color .25s,box-shadow .25s,background .25s}
.button:after,.plan-button:after,.once-button:after,.filters button:after,.bag-button:after{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;background:repeating-linear-gradient(115deg,transparent 0 16px,#a075bf14 17px 18px);transform:translateX(-15%);animation:button-pattern 18s linear infinite}
.button:before,.plan-button:before,.once-button:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 25%,#ffffff24 48%,transparent 70%);background-size:240% 100%;animation:light-sweep 7s ease-in-out infinite;pointer-events:none}
.button:hover,.plan-button:hover,.once-button:hover,.filters button:hover{transform:translateY(-3px);box-shadow:0 12px 35px #c493f121;border-color:#ddb1f7;color:#dcb1f2}
.button.light:hover{color:#432151;background:#f1dcff}.button:active,.plan-button:active,.once-button:active{transform:translateY(0) scale(.975)}
.button:focus-visible,.plan-button:focus-visible,.once-button:focus-visible,a:focus-visible{outline:2px solid #ead0fc;outline-offset:5px}
@keyframes button-pattern{to{transform:translateX(15%)}}@keyframes light-sweep{0%,100%{background-position:160% 0}50%{background-position:-60% 0}}
/* Soft moving grids are contained, so content stays readable. */
.product-editorial,.product-feature,.format-explorer,.simple-path,.catalog-heading,.directions-panel{position:relative;isolation:isolate;overflow:hidden}
.product-editorial:before,.product-feature:before,.format-explorer:before,.simple-path:before,.catalog-heading:before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--pattern-line) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent);animation:pattern-drift 30s linear infinite;pointer-events:none}
@keyframes pattern-drift{to{background-position:28px 56px}}
.tech-grid{animation:grid-illuminate 8s ease-in-out infinite}.tech-core strong{text-shadow:0 0 40px #d3adf32b}
@keyframes grid-illuminate{50%{opacity:.65;filter:brightness(1.5)}}
/* Home format sculptures: translucent capsule shells and sugared gummy cubes. */
.format-tile{background:radial-gradient(ellipse at 50% 35%,#70538139,transparent 70%),#1c1324;border:1px solid #b58fc430;min-height:460px}
.format-art{height:310px;perspective:900px;overflow:visible;background:radial-gradient(ellipse at 50% 75%,#b37eca30,transparent 60%)}
.format-art:after{content:"";position:absolute;width:65%;height:100px;border:1px solid #d9adf335;border-radius:50%;bottom:18px;left:17%;transform:rotateX(65deg);box-shadow:0 0 40px #c493f120;animation:platform-glow 5s ease-in-out infinite}
.capsule-format .format-art i{width:82px;height:185px;border-radius:65px;background:linear-gradient(115deg,#f4e7ffbb 0%,#c396dbcc 25%,#71528c 48%,#f3dcff 50%,#b59ac5 60%,#67437c 100%);box-shadow:inset 9px 0 15px #fff5,inset -12px 0 14px #2e164f77,12px 25px 30px #0005;animation:capsule-dance 8s ease-in-out infinite;animation-delay:calc(var(--i,0)*-2s);border:1px solid #dec3f355}
.capsule-format .format-art i:nth-child(1){--i:1;left:22%;top:65px;--angle:-32deg}.capsule-format .format-art i:nth-child(2){--i:2;left:44%;top:35px;--angle:20deg}.capsule-format .format-art i:nth-child(3){--i:3;left:64%;top:75px;--angle:-14deg}
@keyframes capsule-dance{0%,100%{transform:translateY(0) rotate(var(--angle,-20deg)) rotateY(-15deg)}50%{transform:translateY(-24px) rotate(calc(var(--angle,-20deg) + 10deg)) rotateY(25deg)}}
.gummy-format .format-art i{width:105px;height:110px;border-radius:34% 38% 28% 35%;background:radial-gradient(circle at 28% 23%,#ffdec6bb,transparent 40%),repeating-radial-gradient(circle at 20% 20%,#ffd9de33 0 1px,transparent 2px 7px),linear-gradient(130deg,#edb0cf,#cd558b 50%,#843660);border:1px solid #ffd5e488;box-shadow:inset -10px -13px 20px #5a173955,inset 6px 7px 13px #ffe2e777,12px 20px 25px #0004;animation:gummy-bob 7s ease-in-out infinite}
.gummy-format .format-art i:nth-child(1){left:20%;top:110px;animation-delay:-2s;--angle:-22deg}.gummy-format .format-art i:nth-child(2){left:44%;top:55px;animation-delay:-4s;--angle:15deg}.gummy-format .format-art i:nth-child(3){left:66%;top:125px;animation-delay:-1s;--angle:32deg}
@keyframes gummy-bob{0%,100%{transform:translateY(0) rotate(var(--angle)) scale(.97)}50%{transform:translateY(-24px) rotate(calc(var(--angle) - 12deg)) scale(1.04)}}@keyframes platform-glow{50%{opacity:.4;transform:rotateX(65deg) scale(1.1)}}
/* Scroll fills each choice icon, while its sculpture keeps floating. */
.path-card{padding:24px;background:linear-gradient(145deg,#30213966,#1c1424);border:1px solid #b79ccc29;border-radius:28px;transition:border-color .3s,transform .3s}.path-card:hover{border-color:#e2c5fa88;transform:translateY(-7px)}
.path-art{height:250px;perspective:700px;background:radial-gradient(ellipse at 50% 70%,#9c65bf25,transparent 68%);border-bottom:1px solid #dac3f228}
.path-object{animation:choice-float 6s ease-in-out infinite;filter:drop-shadow(0 18px 18px #0005)}.path-card:nth-child(2) .path-object{animation-delay:-2s}.path-card:nth-child(3) .path-object{animation-delay:-4s}
.path-object:before{filter:saturate(0);opacity:1}.path-object:after{clip-path:inset(calc((1 - var(--fill,0))*100%) 0 0 0);filter:saturate(1.3);transition:clip-path .12s linear}
.path-choose .path-object{width:92px;height:160px}.path-rhythm .path-object{width:136px;height:136px}.path-bag .path-object{width:128px;height:140px}
.path-index{color:#ccb3df;font-size:16px;letter-spacing:.1em}.path-card h3{font-size:clamp(24px,2.3vw,33px);margin:24px 0 10px}.path-card p{font-size:17px;line-height:1.65}.path-line{transform:scaleX(var(--fill,0));transform-origin:left;background:linear-gradient(90deg,#bba1d4,#ecd3ff);height:3px}
@keyframes choice-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(5deg)}}
/* Five genuinely different product compositions. */
.product-feature{--accent:#d3b6ed;display:grid;grid-template-columns:1fr 1.1fr;gap:45px;align-items:center;padding-top:100px;padding-bottom:100px}
.tone-gold{--accent:#efd19c}.tone-berry{--accent:#efb2c8}.tone-blue{--accent:#aaceef}.tone-mint{--accent:#abdcc5}
.feature-heading h2{font-size:clamp(42px,5vw,76px);line-height:1.03;margin:24px 0}.feature-heading p{max-width:560px;font-size:19px;line-height:1.7;color:#c7b9cf}
.feature-facts{grid-column:1/-1;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.feature-facts span{padding:16px 24px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);font-size:16px;color:var(--accent);background:#291b3244}
.unique-art{position:relative;height:450px;min-width:0;border-radius:36px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%);overflow:hidden}
.visual-caption{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.12em;color:var(--accent)}
/* Neuro-Mag: a delicate molecular lattice and the two distinct label amounts. */
.feature-neuro-mag .unique-art{order:-1}.mineral-lattice{position:absolute;inset:15%;animation:lattice-orbit 38s linear infinite}
.mineral-lattice i{position:absolute;width:12px;height:12px;left:50%;top:50%;background:#e8d0fb;border-radius:50%;transform:rotate(calc(var(--i)*30deg)) translateX(145px);box-shadow:0 0 22px #d5acff55}.mineral-lattice i:before{content:"";position:absolute;width:75px;height:1px;transform:rotate(105deg);transform-origin:left;background:#caa4ec88}
.compound-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px}.compound-label strong{font-size:58px;font-weight:500;text-align:center}.compound-label strong small{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#c6afd8}.compound-label>span{font-size:12px;border:1px solid #b591ce44;border-radius:20px;padding:5px 14px;color:#c7abd9}
@keyframes lattice-orbit{to{transform:rotate(360deg)}}
/* D3/K2: offset sun and moon, linked by an orbit rather than a generic bottle. */
.feature-d3-k2{background:linear-gradient(130deg,#211927,#28201988)}.solar-pair{height:100%;position:relative}.solar-pair>span{position:absolute;width:170px;height:170px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:50px;box-shadow:0 0 65px #e7bd4e22;z-index:2}.solar-pair small{font-size:15px;margin-top:10px}.vitamin-sun{left:10%;top:65px;background:radial-gradient(circle at 30% 28%,#f9e9b9,#b98a3d);color:#483415;animation:sun-breathe 7s ease-in-out infinite}.vitamin-moon{right:8%;bottom:60px;background:radial-gradient(circle at 30% 28%,#f6e4be,#8a7959);color:#392e20;animation:sun-breathe 7s ease-in-out infinite -3.5s}.solar-pair i{position:absolute;inset:15% 10%;border:1px dashed #e8c78377;border-radius:50%;transform:rotate(-30deg);animation:solar-orbit 30s linear infinite}
@keyframes sun-breathe{50%{transform:translateY(-18px);box-shadow:0 0 85px #e7bd4e44}}@keyframes solar-orbit{to{transform:rotate(330deg)}}
/* Sambucus: berry sculpture with three ingredient tiles, in a wide composition. */
.feature-sambucus{grid-template-columns:.9fr 1.2fr}.berry-cluster{position:absolute;left:15%;right:15%;height:280px;top:10px;animation:berry-tilt 9s ease-in-out infinite}.berry-cluster i{position:absolute;width:91px;height:91px;border-radius:50%;left:calc(20% + mod(var(--i),3)*22%);top:calc(30px + mod(var(--i),3)*40px);background:radial-gradient(circle at 30% 24%,#c78fb0,#60354f 40%,#231629 80%);box-shadow:inset -5px -8px 20px #07030caa,5px 12px 20px #0005;border:1px solid #d7a2c233;transform:rotate(calc(var(--i)*51deg)) translateX(60px)}.berry-nutrients{display:flex;gap:12px;position:absolute;bottom:30px;left:5%;right:5%}.berry-nutrients span{flex:1;padding:20px 12px;border:1px solid #d799b344;border-radius:18px;text-align:center;font-size:25px;background:#351d2b99}.berry-nutrients strong{display:block;font-size:15px;color:#dcaac3;margin-top:8px}@keyframes berry-tilt{50%{transform:translateY(-16px) rotate(8deg)}}
/* Probiotic: ten animated rods inside a petri glass, not a medical illustration. */
.feature-60-billion-probiotic{grid-template-columns:1fr 1fr}.feature-60-billion-probiotic .feature-heading{grid-column:1/-1;text-align:center;max-width:850px;margin:auto}.feature-60-billion-probiotic .feature-heading p{margin:auto;max-width:750px}.feature-60-billion-probiotic .unique-art{grid-column:1/-1;max-width:650px;width:100%;margin:auto}
.culture-petri{position:absolute;width:360px;height:360px;left:50%;top:40px;transform:translateX(-50%);border:2px solid #bbdbf855;border-radius:50%;box-shadow:inset 0 0 45px #a9d1f322,0 0 75px #689dcc22;background:radial-gradient(circle,#597fa22b,#15354822 65%,#aac9df22)}.culture-petri:before{content:"";position:absolute;inset:12px;border:1px solid #cee5ff33;border-radius:50%;animation:platform-glow 6s ease-in-out infinite}.culture-petri i{position:absolute;left:50%;top:50%;width:18px;height:42px;border-radius:20px;background:linear-gradient(100deg,#b6e2ff,#4a88b8);transform:rotate(calc(var(--i)*36deg)) translateY(-125px);box-shadow:inset 3px 2px 5px #fff6,0 0 16px #acd6ff33;animation:culture-shimmer 5s ease-in-out infinite;animation-delay:calc(var(--i)*-.4s)}.culture-petri>span{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:90px}.culture-petri small{font-size:11px;letter-spacing:.12em;color:#b6d0e7}
@keyframes culture-shimmer{50%{filter:brightness(1.5);opacity:.65}}
/* Fiber: flowing ribbons and a big, unambiguous label readout. */
.feature-fiber-gummies .unique-art{order:-1}.fiber-ribbons{width:100%;height:100%;position:absolute;inset:0;opacity:.45;overflow:visible}.fiber-ribbons path{fill:none;stroke:#aed9c2;stroke-width:2;stroke-dasharray:8 13;animation:fiber-flow 12s linear infinite;animation-delay:calc(var(--i)*-.7s)}.fiber-callout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#172d2699,transparent 55%)}.fiber-callout strong{font-size:130px;font-weight:500;line-height:1}.fiber-callout small{font-size:24px;display:block;text-align:center;margin-top:12px}.fiber-callout>span{margin-top:24px;padding:10px 20px;background:#9ecfb41a;border:1px solid #b0dbbd44;border-radius:30px;color:#c2e4cf}
@keyframes fiber-flow{to{stroke-dashoffset:-252}}
.directions-panel{display:grid;grid-template-columns:1fr 1fr;gap:55px;background:linear-gradient(145deg,#35213c55,#1b1323);border-block:1px solid #b293c222}.directions-panel h2{font-size:clamp(38px,4vw,62px);margin:20px 0}.directions-panel p{font-size:18px;line-height:1.7;color:#c7b9cf}.directions-panel .button{margin-top:24px}.directions-cards{align-self:center}.directions-cards details{padding:22px;border:1px solid #c5a3d333;border-radius:20px;margin:12px 0;background:#180f2188}.directions-cards summary{font-size:18px}
.footer-close{background:radial-gradient(ellipse at 50% 70%,#74488933,transparent 60%)}.footer-pattern{animation:pattern-drift 28s linear infinite}.footer-legal{justify-content:space-between}.footer-signature span{display:inline-block;animation:star-turn 30s linear infinite}
@media(max-width:800px){:root{--header-height:80px}.header nav{position:absolute;top:100%;left:0;right:0;padding:24px;background:#201527;border-bottom:1px solid #c2a4d555;box-shadow:0 18px 35px #0005}.header nav.open{display:flex;flex-direction:column;align-items:stretch;gap:8px}.header nav a{padding:14px 12px;font-size:18px}.motion-toggle{min-width:57px;font-size:10px}.product-section-nav{top:var(--header-height);overflow-x:auto;white-space:nowrap}.product-feature,.feature-sambucus,.feature-60-billion-probiotic,.directions-panel{grid-template-columns:1fr;gap:28px;padding-top:65px;padding-bottom:65px}.unique-art{height:390px;order:0!important}.feature-heading{grid-column:auto!important;text-align:left!important}.feature-heading h2{font-size:43px}.feature-heading p{font-size:17px}.feature-facts{grid-column:1;font-size:14px;justify-content:flex-start}.feature-facts span{padding:12px 16px;font-size:14px}.feature-60-billion-probiotic .unique-art{grid-column:1}.format-art{height:300px}.format-tile{min-height:420px}.capsule-format .format-art i{width:65px;height:150px}.gummy-format .format-art i{width:80px;height:88px}.path-art{height:230px}.path-card h3{font-size:26px}.culture-petri{width:310px;height:310px}.culture-petri i{transform:rotate(calc(var(--i)*36deg)) translateY(-110px)}.solar-pair>span{width:145px;height:145px}.compound-label strong{font-size:52px}.mineral-lattice i{transform:rotate(calc(var(--i)*30deg)) translateX(125px)}}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){:root:not(.motion-enabled) *,:root:not(.motion-enabled) *:before,:root:not(.motion-enabled) *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}:root:not(.motion-enabled) .path-object:after{clip-path:none}:root:not(.motion-enabled) .path-line{transform:none}}
.motion-paused .hero-art img,.motion-paused .ticker-track{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){:root:not(.motion-enabled) .hero-art img,:root:not(.motion-enabled) .ticker-track{animation:none!important}}
/* Give the original packaging its own quiet motion language. */
.tone-lilac .product-stage .stage-orbit{border-style:dashed;animation:lattice-orbit 45s linear infinite}
.tone-gold .product-stage{background:radial-gradient(ellipse at 50% 50%,#bd924922,transparent 68%),#251d29}.tone-gold .product-stage .stage-orbit{box-shadow:0 0 65px #d6aa4b22;animation:sun-breathe 9s ease-in-out infinite}
.tone-berry .product-stage{background:radial-gradient(ellipse at 50% 40%,#953e682b,transparent 70%),#271827}.tone-berry .product-stage .stage-orbit{border-style:dotted;animation:berry-tilt 12s ease-in-out infinite}
.tone-blue .product-stage{background:radial-gradient(ellipse at 50% 40%,#3c77922b,transparent 70%),#171d2c}.tone-blue .product-stage .stage-orbit{border-style:double;animation:platform-glow 8s ease-in-out infinite}
.tone-mint .product-stage{background:radial-gradient(ellipse at 50% 40%,#4e966f2b,transparent 70%),#1b2326}.tone-mint .product-stage .stage-orbit{border-style:dashed;animation:lattice-orbit 60s linear infinite reverse}
@media(prefers-reduced-motion:reduce){:root:not(.motion-enabled) .product-stage .stage-orbit{animation:none!important}}