. Reset native button chrome. */
border: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
font-family: 'Manrope', system-ui, sans-serif;
font-weight: 600; font-size: 15px;
letter-spacing: 0.005em; text-decoration: none;
transition: background 0.2s cubic-bezier(0.2,0.8,0.2,1), transform 0.2s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.2s cubic-bezier(0.2,0.8,0.2,1);
}
@media (hover: hover) and (pointer: fine) {
.lp-footer .ft-cta-btn:hover {
background: #5E1F26; transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(138, 57, 66, 0.32);
}
}
.lp-footer .ft-cta-btn svg { width: 14px; height: 14px; }
.lp-footer .ft-cta-sub {
margin-top: 14px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 10.5px; letter-spacing: 0.16em;
text-transform: uppercase; color: #9CBDAA;
}
/* ZONE 3 - grid */
.lp-footer .ft-grid {
padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 48px);
border-top: 1px solid rgba(196, 215, 202, 0.16);
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr;
gap: clamp(24px, 3vw, 56px);
align-items: start;
margin-bottom: 0;
}
.lp-footer .ft-brand-tag {
margin: 0 0 20px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px; line-height: 1.55;
color: #C4D7CA; max-width: 32ch;
}
.lp-footer .ft-brand-social { display: flex; gap: 10px; }
.lp-footer .ft-brand-social a {
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid #6F9680; color: #9CBDAA;
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.lp-footer .ft-brand-social a:hover {
background: #6F9680; color: #F5EDE0; border-color: #6F9680;
}
.lp-footer .ft-brand-social a svg { width: 14px; height: 14px; }
.lp-footer .ft-col-h {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 10px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: #9CBDAA; margin: 0 0 16px;
}
.lp-footer .ft-col ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 10px;
}
.lp-footer .ft-col a {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px; color: #C4D7CA;
text-decoration: none; transition: color 0.2s;
}
.lp-footer .ft-col a:hover { color: #D89DA3; }
/* Bottom fine print */
.lp-footer .ft-fine {
border-top: 1px solid rgba(196, 215, 202, 0.16);
padding: 22px 0 clamp(28px, 4vw, 48px);
display: flex; flex-wrap: wrap; justify-content: space-between;
gap: 16px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 10px; letter-spacing: 0.12em;
text-transform: uppercase; color: #6F9680;
}
.lp-footer .ft-fine strong { color: #C4D7CA; font-weight: 500; }
@media (max-width: 880px) {
.lp-footer .ft-grid {
grid-template-columns: 1fr 1fr;
gap: 32px 24px;
}
.lp-footer .ft-brand-block { grid-column: 1 / -1; }
.lp-footer .ft-fine { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* ── MOBILE RESPONSIVE ──────────────────────────── */
.comp-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
.nav-links { display: none; }
.nav-actions { gap: 10px; }
.p-name { font-size: clamp(2rem, 9vw, 2.8rem); }
/* 2026-05-28 v11: tighter horizontal/top padding so the hero image fills more of the screen. */
.hero { grid-template-columns: 1fr; gap: 24px; padding: 4px 0.5rem 36px; }
/* But text column needs more breathing room from edges. */
.hero > *:not(.gallery) { padding-left: 14px; padding-right: 14px; }
.gallery { position: static; top: auto; }
.gallery-main { aspect-ratio: 1/1; max-height: 420px; }
.sleep-grid {
display: flex; grid-template-columns: none; gap: 12px;
overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory;
/* 2026-05-20 fix: removed margin: 0 -1.1rem (negative margin pushed grid past
viewport, body { overflow-x: hidden } was clipping AND swallowing horizontal
swipe gesture). Asymmetric padding gives first-card breathing room; right
padding lets next card peek. scroll-padding aligns snap to inset. */
padding: 4px 1.1rem 12px 1.6rem;
scroll-padding-inline-start: 1.6rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
/* 2026-05-20 v3: explicit touch-action forces the OS to allow horizontal pan
inside this container (default `auto` lets browser heuristics interfere,
especially when ancestor has overflow constraints). Belt-and-braces. */
touch-action: pan-x;
}
.sleep-grid::-webkit-scrollbar { display: none; }
.sleep-cell { flex: 0 0 85%; scroll-snap-align: start; touch-action: pan-x; }
.comparison-wrap { flex-direction: column; align-items: center; gap: 40px; }
.flow-video { width: 200px; height: 360px; }
.study-grid {
display: flex; grid-template-columns: none; gap: 12px;
overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory;
/* 2026-05-20 fix: same pattern as .sleep-grid above. */
padding: 0 1.1rem 6px 1.6rem;
scroll-padding-inline-start: 1.6rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
touch-action: pan-x; /* v3: force horizontal pan support */
}
.study-grid::-webkit-scrollbar { display: none; }
.study-card { flex: 0 0 78%; scroll-snap-align: start; padding: 18px 18px; touch-action: pan-x; }
.t-grid .t-card { flex-basis: 60vw; }
.cycle-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
.cycle-diagram-wrap { /* keep visible — three-ingredients-cycle.jpg is responsive enough */ }
.timeline-grid { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
.section { padding: 20px 0; }
.container { padding: 0 1.1rem; }
h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
/* superseded by 2026-05-21 promo-bar rules above; kept harmless */
.nav-inner { padding: 14px 1.1rem; }
.nav-actions a:not(.lp-cart-button):not(.nav-cta-pill) { display: none; }
/* 2026-06-04 v12: tightened from clamp(1.75,6.5vw,2.05) — ~10% smaller to free vertical space in the first fold. */
.p-name { font-size: clamp(1.55rem, 5.7vw, 1.85rem) !important; }
.gallery-thumbs { gap: 7px; }
.gallery-thumb { width: 56px; height: 56px; }
.sleep-section { padding: 56px 0 0; }
.sleep-text { margin-bottom: 36px; }
.beadlet-section { padding: 56px 0; }
.comparison-col { width: 180px; }
.flow-video { width: 180px; height: 320px; }
.honest-section .container { padding: 0; }
.comp-table-wrap { border-radius: 0; }
.comp-table th, .comp-table td { padding: 11px 14px; font-size: 0.82rem; }
.cycle-mobile { grid-template-columns: 1fr; }
.why-section { padding-bottom: 56px; }
.t-grid .t-card { flex-basis: 78vw; }
.timeline-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; gap: 12px; }
.fcopy { white-space: normal; }
}
/* ============================================================
CLINICAL · "Why it matters" cortisol-magnesium loop section
Mobile-first. Min-width queries enhance on tablet+.
============================================================ */
/* 2026-05-30 v11: bg sampled to match image-3 bg exactly (#12291d) so the
embedded infographics bleed seamlessly into the section with no card edge. */
.why-clinical { background: #12291d; color: var(--beige); padding: 56px 0 60px; }
.why-clinical .container { padding: 0 1.1rem; max-width: 760px; }
/* 2026-05-30 v11: outcome-section — destination-shot image, bg matches image's dark green. */
.outcome-section { background: #12291d; padding: 0; }
.outcome-container { max-width: 760px; margin: 0 auto; }
.outcome-img { width: 100%; height: auto; display: block; }
@media (min-width: 768px) {
.outcome-section { padding: 20px 0; }
}
/* 2026-05-30 v11: image-stack treatment replaces SVG chart + accordion. */
.why-imgstack .container { max-width: 720px; padding: 0 1.1rem; position: relative; }
/* Full-bleed pain photo escapes the container to span viewport width edge-to-edge.
Right edge fades into the section's dark-green bg via CSS mask. */
.why-img--bleed {
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 4px;
margin-bottom: 22px;
border-radius: 0 !important;
aspect-ratio: auto;
object-fit: cover;
background: transparent;
display: block;
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
}
/* Section intro copy above the image stack — sits on the dark green bg. */
.why-intro { text-align: center; max-width: 560px; margin: 0 auto 28px; }
.why-eyebrow {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 0.72rem; font-weight: 800; letter-spacing: 2.4px;
text-transform: uppercase; color: var(--orange); margin-bottom: 12px;
}
.why-h { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--beige); font-size: clamp(1.7rem, 4.6vw, 2.3rem); line-height: 1.18; letter-spacing: -0.4px; margin: 0 0 14px; font-weight: 700; text-wrap: balance; }
.why-deck { color: rgba(255, 250, 240, 0.78); font-size: 0.94rem; line-height: 1.6; margin: 0; text-wrap: balance; }
@media (max-width: 600px) {
.why-intro { margin-bottom: 22px; }
.why-deck { font-size: 0.86rem; }
}
.why-imgstack-wrap { display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
.why-img { width: 100%; height: auto; display: block; border-radius: 14px; object-fit: contain; background: transparent; }
.why-img--pain { aspect-ratio: 3/2; object-fit: cover; }
.why-img--chart, .why-img--cycle { border-radius: 14px; background: #12291d; }
.wc-legacy-hidden { display: none !important; }
@media (min-width: 768px) {
.why-imgstack .container { max-width: 760px; padding: 0 1.4rem; }
.why-imgstack-wrap { gap: 26px; }
.why-img { border-radius: 16px; }
}
/* 2026-05-30 v11: absorb-section creative redesign — full-fit bodies, no card chrome,
balanced pills, scroll-fade-in, breathing pulse on the "good" column. */
.absorb-section { background: var(--beige-light); padding: 44px 0 48px; }
.absorb-container { max-width: 780px; padding: 0 1rem; }
.absorb-intro { text-align: center; max-width: 560px; margin: 0 auto 28px; }
.absorb-eyebrow {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 0.7rem; font-weight: 800; letter-spacing: 2.4px;
text-transform: uppercase; color: var(--orange); margin-bottom: 12px;
}
.absorb-h { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--green); font-size: clamp(1.6rem, 4.2vw, 2.1rem); line-height: 1.18; letter-spacing: -0.4px; margin: 0 0 12px; }
.absorb-deck { color: var(--muted); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.absorb-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: start;
max-width: 640px;
margin: 0 auto;
}
.absorb-col { display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; transform: translateY(12px); animation: absorbFadeIn 0.9s ease-out forwards; }
.absorb-col--bad { animation-delay: 0.1s; }
.absorb-col--good { animation-delay: 0.35s; }
@keyframes absorbFadeIn { to { opacity: 1; transform: translateY(0); } }
.absorb-pill {
font-family: 'Manrope', system-ui, sans-serif;
font-weight: 800;
/* 2026-05-30: smaller font + balanced wrap so the longer right-side label fits cleanly.
Both pills share min-height so 1-line + 2-line labels visually align. */
font-size: 0.6rem;
letter-spacing: 1.1px;
text-transform: uppercase;
padding: 11px 14px;
border-radius: 100px;
text-align: center;
min-height: 54px;
width: 100%;
max-width: 220px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.25;
text-wrap: balance;
}
.absorb-pill--bad { background: var(--beige-mid); color: var(--muted); }
.absorb-pill--good { background: var(--green); color: var(--beige); }
/* IMPORTANT: video has NO card background or border. Body silhouettes bleed against section bg. */
.absorb-video {
width: 100%;
max-width: 320px;
height: auto;
display: block;
background: transparent;
border-radius: 0;
box-shadow: none;
border: none;
}
.absorb-col--good .absorb-video {
animation: absorbPulse 4.5s ease-in-out infinite;
}
@keyframes absorbPulse {
0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 62, 44, 0)); }
50% { filter: drop-shadow(0 4px 18px rgba(0, 62, 44, 0.22)); }
}
.absorb-caption {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 0.92rem; line-height: 1.4;
text-align: center;
max-width: 200px;
margin: 0 auto;
}
.absorb-caption--bad { color: var(--muted); font-weight: 500; }
.absorb-caption--good { color: var(--green); font-weight: 700; }
@media (max-width: 600px) {
.absorb-section { padding: 36px 0 40px; }
.absorb-intro { margin-bottom: 22px; }
.absorb-deck { font-size: 0.84rem; }
.absorb-compare { gap: 8px; max-width: none; }
.absorb-pill { font-size: 0.55rem; padding: 9px 11px; letter-spacing: 0.9px; min-height: 50px; max-width: none; }
.absorb-video { max-width: 100%; }
.absorb-caption { font-size: 0.78rem; max-width: 160px; }
}
.why-clinical .wc-eyebrow {
font-size: 0.72rem; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase;
color: var(--orange); text-align: center; margin-bottom: 14px;
}
.why-clinical h2 {
color: var(--beige); text-align: center;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700;
font-size: clamp(1.85rem, 7.4vw, 2.6rem); line-height: 1.15; margin-bottom: 16px;
letter-spacing: -0.4px;
}
.wc-deck {
color: rgba(232,221,211,0.78); text-align: center; max-width: 580px;
margin: 0 auto 32px; font-size: 0.96rem; line-height: 1.7;
}
.wc-deck em { color: var(--orange); font-style: italic; font-weight: 600; }
/* SCENE · hero photo + 3 AM timestamp overlay (2026-05-28 v11: tightened gap to chart). */
.wc-scene {
position: relative; border-radius: 12px; overflow: hidden;
margin-bottom: 12px; aspect-ratio: 4/5; max-height: 540px;
}
.wc-scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-scene::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(0,31,23,0) 30%, rgba(0,31,23,0.92) 100%);
}
.wc-scene-cap { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; color: var(--beige); }
.wc-scene-time {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-style: italic;
font-size: 1.6rem; line-height: 1.1; margin-bottom: 8px; font-weight: 400;
}
.wc-scene-time .ampm { font-style: normal; font-size: 0.6em; letter-spacing: 1.5px; margin-left: 4px; opacity: 0.85; }
.wc-scene-note {
font-size: 0.74rem; letter-spacing: 1.4px; text-transform: uppercase;
color: rgba(232,221,211,0.8); font-weight: 600;
}
/* CHART · cortisol curve */
.wc-chart {
background: rgba(0,0,0,0.22); border: 1px solid rgba(232,221,211,0.08);
border-radius: 12px; padding: 20px 16px 16px; margin-bottom: 36px;
}
.wc-chart-head { margin-bottom: 4px; }
.wc-chart-title {
font-size: 0.74rem; letter-spacing: 2px; text-transform: uppercase;
color: var(--beige); font-weight: 800; margin-bottom: 3px;
}
.wc-chart-unit {
font-size: 0.66rem; letter-spacing: 1.4px; text-transform: uppercase;
color: rgba(232,221,211,0.55); font-weight: 600;
}
.wc-chart-svg { width: 100%; height: auto; display: block; margin: 12px 0 10px; }
.wc-chart-legend {
display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
padding-top: 8px; border-top: 1px solid rgba(232,221,211,0.06); margin-top: 4px;
}
.wc-legend-item { font-size: 0.72rem; color: rgba(232,221,211,0.72); display: flex; align-items: center; gap: 7px; }
.wc-legend-swatch { width: 22px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.wc-legend-swatch.healthy { background: #7ec8a8; }
.wc-legend-swatch.after { background: var(--orange); }
/* MECHANISM · the four steps */
.wc-mech-head { text-align: center; margin: 8px 0 20px; }
.wc-mech-head-label {
font-size: 0.72rem; letter-spacing: 2.4px; text-transform: uppercase;
color: var(--orange); font-weight: 800; margin-bottom: 8px;
}
.wc-mech-head h3 {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700;
font-size: clamp(1.3rem, 5.2vw, 1.7rem); color: var(--beige); line-height: 1.25;
letter-spacing: -0.2px;
}
.wc-mech { display: grid; gap: 10px; margin-bottom: 32px; }
.wc-step {
background: rgba(0,0,0,0.22); border: 1px solid rgba(232,221,211,0.07);
border-radius: 12px; padding: 18px 16px;
display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start;
}
.wc-step-num {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.3rem; font-weight: 600;
color: var(--orange); border-right: 1px solid rgba(232,221,211,0.18);
padding-right: 8px; line-height: 1; padding-top: 2px;
}
.wc-step-body { display: flex; flex-direction: column; gap: 4px; }
.wc-step-title { font-size: 0.98rem; font-weight: 700; color: var(--beige); line-height: 1.3; }
.wc-step-desc { font-size: 0.87rem; color: rgba(232,221,211,0.78); line-height: 1.6; }
/* 2026-05-28 v11: brighter orange + stronger BG so the stat pill is legible on dark green. */
.wc-step-stat {
display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
font-size: 0.66rem; color: #ff8a4a; font-weight: 800;
letter-spacing: 1.5px; text-transform: uppercase; margin-top: 6px;
padding: 4px 9px; background: rgba(255, 138, 74, 0.16); border-radius: 100px;
}
/* 2026-05-21 · §2 click-to-expand steps + compressed mech header + scrollable cortisol curve */
.wc-mech-head--compact { margin: 4px 0 14px !important; }
.wc-mech-head--compact h3 {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700;
font-size: clamp(1rem, 4vw, 1.3rem); color: var(--beige); line-height: 1.2; margin: 0;
}
/* 2026-05-28 v11: list-style — flat rows w/ thin dividers, no box shells. */
.wc-mech--accordion { border-top: 1px solid rgba(232,221,211,0.12); }
.wc-mech--accordion .wc-step {
background: transparent;
border: none;
border-bottom: 1px solid rgba(232,221,211,0.12);
border-radius: 0; padding: 12px 4px;
width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
align-items: center; text-align: left; cursor: pointer; color: inherit;
font-family: inherit; transition: background 0.2s ease;
}
.wc-mech--accordion .wc-step:hover { background: rgba(255,255,255,0.04); }
.wc-mech--accordion .wc-step .wc-step-num {
align-self: center;
}
.wc-mech--accordion .wc-step .wc-step-body {
overflow: hidden;
}
.wc-mech--accordion .wc-step .wc-step-title {
font-size: 0.95rem; font-weight: 700; color: var(--beige); line-height: 1.3;
}
/* Collapsed state: hide description + stat */
.wc-mech--accordion .wc-step--collapsed .wc-step-desc,
.wc-mech--accordion .wc-step--collapsed .wc-step-stat {
display: none;
}
/* Expanded state: subtle background, same flat row look. */
.wc-mech--accordion .wc-step--open {
background: rgba(255,255,255,0.04);
}
/* 2026-05-29 v11: REVERTED the broken desktop grid for .why-clinical — multiple
elements sharing `grid-area: intro` was causing overlap. Section stays in its
original vertical layout on all viewports. */
.wc-mech--accordion .wc-step--open .wc-step-desc { margin-top: 6px; display: block; }
.wc-mech--accordion .wc-step--open .wc-step-stat { display: inline-flex; }
/* Chevron */
.wc-step-chevron {
font-size: 1.2rem; font-weight: 400; color: rgba(232,221,211,0.5);
line-height: 1; width: 18px; text-align: center; transition: transform 0.18s ease;
}
.wc-mech--accordion .wc-step--open .wc-step-chevron { transform: rotate(45deg); color: var(--orange); }
/* Reduce hero scene image height (was too tall on mobile) */
.wc-scene {
aspect-ratio: 16/10 !important;
max-height: 280px !important;
}
/* 2026-05-21 v3: cortisol chart + scene image — fix mobile horizontal overflow.
Earlier rules let .wc-chart-svg's min-width: 540px bleed past the chart container
and force page-level horizontal scroll. Now the wrap clips strictly to parent
width, scene image is constrained to 100%, and the grid stacks vertically with
no horizontal bleed. Removed min-width from SVG too — let it scale to wrap. */
@media (max-width: 880px) {
.wc-hero-grid {
grid-template-columns: 1fr !important;
gap: 18px;
max-width: 100%;
}
.wc-hero-grid .wc-scene,
.wc-hero-grid .wc-chart {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.wc-scene {
aspect-ratio: 16/10 !important;
max-height: 280px !important;
max-width: 100% !important;
width: 100% !important;
}
.wc-chart {
max-width: 100% !important;
overflow: hidden;
}
.wc-chart-svg-wrap {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(229,115,46,0.4) transparent;
}
.wc-chart-svg-wrap::-webkit-scrollbar { height: 4px; }
.wc-chart-svg-wrap::-webkit-scrollbar-thumb { background: rgba(229,115,46,0.4); border-radius: 2px; }
/* SVG fills wrap (no min-width forcing page overflow) */
.wc-chart-svg { width: 100%; min-width: 0; height: auto; }
}
/* INTERVENTION · how MagAshwa breaks the loop */
.wc-break {
background: rgba(255,255,255,0.04); border: 1px solid rgba(232,221,211,0.12);
border-radius: 14px; padding: 22px 18px;
}
.wc-break-head { text-align: center; margin-bottom: 16px; }
.wc-break-head-eyebrow {
font-size: 0.72rem; letter-spacing: 2.4px; text-transform: uppercase;
color: var(--orange); font-weight: 800; margin-bottom: 8px;
}
.wc-break-head h3 {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700;
font-size: clamp(1.2rem, 4.8vw, 1.5rem); color: var(--beige); line-height: 1.25;
}
.wc-break-deck {
margin-top: 10px; font-size: 0.88rem; line-height: 1.7;
color: rgba(232,221,211,0.7); max-width: 500px; margin-left: auto; margin-right: auto;
}
.wc-break-deck em { color: var(--orange); font-style: italic; font-weight: 600; }
.wc-break-grid { display: grid; gap: 0; }
.wc-ing { padding: 14px 0; border-top: 1px solid rgba(232,221,211,0.08); display: flex; flex-direction: column; gap: 4px; }
.wc-ing:first-child { border-top: none; padding-top: 4px; }
.wc-ing-dose {
font-size: 0.66rem; font-weight: 700; color: var(--orange);
letter-spacing: 1.5px; text-transform: uppercase;
}
.wc-ing-name { font-size: 0.95rem; font-weight: 700; color: var(--beige); }
.wc-ing-role { font-size: 0.86rem; color: rgba(232,221,211,0.78); line-height: 1.55; margin-top: 2px; }
/* Tablet+ enhancement */
@media (min-width: 720px) {
.why-clinical { padding: 88px 0 92px; }
.why-clinical .container { padding: 0 2rem; max-width: 920px; margin-left: auto; margin-right: auto; }
.wc-scene { aspect-ratio: 16/9; max-height: 480px; margin-bottom: 36px; }
.wc-scene-cap { left: 36px; bottom: 30px; }
.wc-scene-time { font-size: 2.2rem; }
.wc-chart { padding: 26px 26px 20px; }
.wc-chart-title { font-size: 0.72rem; }
.wc-mech { grid-template-columns: repeat(2, 1fr); gap: 16px; grid-auto-flow: row; align-items: stretch; }
.wc-step { padding: 22px 22px; }
.wc-step-num { font-size: 1.4rem; }
.wc-break { padding: 30px 28px; }
.wc-break-grid {
grid-template-columns: repeat(3, 1fr); gap: 0;
}
.wc-ing {
border-top: none; border-left: 1px solid rgba(232,221,211,0.1);
padding: 4px 18px;
}
.wc-ing:first-child { border-left: none; padding-left: 4px; }
.wc-ing:last-child { padding-right: 4px; }
}
/* ============================================================
MOBILE-FIRST TIGHTENING · global polish for <600px
============================================================ */
@media (max-width: 600px) {
/* 2026-05-28 v11 mobile (≤600px): even tighter — image basically edge-to-edge.
2026-06-04 v12: gap 22→14, internal gallery gap and dots padding tightened — see below. */
.hero { padding: 2px 0.4rem 32px !important; gap: 14px !important; }
.hero > *:not(.gallery) { padding-left: 12px !important; padding-right: 12px !important; }
.p-name { line-height: 1.05 !important; }
/* 2026-06-04 v12: first-fold tightening — gallery internal stack and eyebrow margin. */
.gallery { gap: 6px !important; position: relative !important; }
/* 2026-06-04 v12: dots moved INSIDE the image, anchored to bottom — frees the strip of whitespace below the image. */
.gallery-dots {
position: absolute !important;
bottom: 14px !important;
left: 50% !important;
transform: translateX(-50%) !important;
padding: 6px 12px !important;
background: rgba(255,255,255,0.78) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 999px !important;
z-index: 5 !important;
gap: 6px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.p-eyebrow { margin-bottom: 6px !important; }
.badge-row { gap: 6px; }
.badge { font-size: 0.66rem; padding: 4px 11px; }
.pack-grid { gap: 7px; }
.pack-card { padding: 12px 9px 10px; margin-top: 18px; }
.pack-name { font-size: 0.85rem; padding-right: 22px; }
.pack-supply { font-size: 0.64rem; }
.pack-price-big { font-size: 1.32rem; }
.pack-price-orig { font-size: 0.85rem; }
.pack-save-tag { font-size: 0.64rem; }
.pack-cadence { font-size: 0.6rem; }
.pack-breakdown { gap: 8px; flex-wrap: wrap; }
.pack-pp, .pack-pd { font-size: 0.62rem; }
.pack-top-badge { font-size: 0.5rem; padding: 3px 8px; top: -11px; }
.btn-buy-big { padding: 17px 18px; font-size: 0.92rem; letter-spacing: 1.4px; gap: 10px; }
.btn-buy-big .btn-price { font-size: 1.05rem; }
.sleep-grid { gap: 10px; }
.sleep-cell { flex-basis: 88%; }
.sleep-img-wrap { aspect-ratio: 1/1; }
.sleep-caption { font-size: 1.05rem; left: 18px; right: 18px; bottom: 18px; }
.sleep-num { width: 26px; height: 26px; top: 12px; left: 12px; font-size: 0.85rem; }
.beadlet-intro p { font-size: 0.86rem; }
.gummy-visual { margin-top: 32px; }
}
/* ============================================================
ROUND 2 · beadlet upgrade, COA dossier, 4-col comparison
============================================================ */
/* Beadlet: side-by-side at every viewport, halve flow-video on mobile */
.beadlet-compare {
flex-direction: row !important; gap: 14px !important;
justify-content: center; align-items: flex-start;
}
.beadlet-compare .comparison-col { width: auto; flex: 1 1 0; max-width: 220px; }
.beadlet-compare .flow-video { width: 100%; max-width: 200px; height: auto; aspect-ratio: 5/12; }
/* 2026-05-21: heading block above the beadlet tech image (per Pranav). */
.beadlet-tech-head {
text-align: center; max-width: 540px; margin: 48px auto 24px;
}
.beadlet-tech-head .eyebrow {
font-size: 0.7rem; letter-spacing: 2.2px; text-transform: uppercase;
font-weight: 800; margin-bottom: 10px;
}
.beadlet-tech-head h3 {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700;
font-size: clamp(1.4rem, 4.2vw, 1.9rem); color: var(--green); line-height: 1.2;
margin: 0; letter-spacing: -0.01em;
}
@media (max-width: 600px) {
.beadlet-tech-head { margin: 32px auto 18px; padding: 0 16px; }
}
/* Beadlet absorption science card · 3-col on desktop, stacked on mobile */
.absorb-card {
background: #fff; border: 1px solid var(--beige-mid); border-radius: 14px;
margin: 8px auto 0; max-width: 1180px;
padding: 28px 22px;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: center;
box-shadow: 0 8px 32px rgba(0,82,59,0.06);
}
.absorb-card-figure {
display: flex; flex-direction: column; align-items: center;
text-align: center; gap: 10px;
padding-bottom: 6px;
min-width: 0;
}
.absorb-figure-img {
width: 100%; max-width: 360px; height: auto; display: block;
border-radius: 10px; background: #fff;
object-fit: contain;
}
.absorb-figure-cap {
font-size: 0.7rem; letter-spacing: 1.8px; text-transform: uppercase;
color: var(--orange); font-weight: 700;
}
.absorb-source {
max-width: 1180px;
margin: 18px auto 0;
text-align: center;
font-size: 0.78rem;
color: var(--muted);
font-style: italic;
line-height: 1.5;
}
@media (min-width: 1024px) {
.absorb-card {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
column-gap: 32px;
row-gap: 24px;
padding: 32px 30px;
align-items: center;
}
/* Visual order on desktop: text | figure | chart (override DOM order) */
.absorb-card > .absorb-card-text { order: 1; min-width: 0; }
.absorb-card > .absorb-card-figure { order: 2; }
.absorb-card > .absorb-card-chart { order: 3; min-width: 0; }
.absorb-figure-img { width: 100%; max-width: 100%; max-height: 380px; }
}
.absorb-card-text .absorb-eyebrow {
font-size: 0.6rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
color: var(--orange); margin-bottom: 10px;
}
.absorb-card-text h3 {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 600;
font-size: clamp(1.35rem, 4.8vw, 1.8rem); color: var(--green);
line-height: 1.2; margin-bottom: 10px;
}
.absorb-card-text h3 span {
display: block; font-style: italic; font-size: 0.62em; color: var(--muted);
font-weight: 400; margin-top: 4px;
}
.absorb-card-text p {
font-size: 0.88rem; color: var(--muted); line-height: 1.65; margin-bottom: 18px;
}
.absorb-stats { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; border-top: 1px solid var(--beige); padding-top: 16px; }
.absorb-stats li { display: flex; flex-direction: column; gap: 2px; }
.absorb-stat-num {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 600;
font-size: 1.4rem; color: var(--green); line-height: 1;
}
.absorb-stat-lbl {
font-size: 0.66rem; color: var(--muted); letter-spacing: 0.5px; line-height: 1.4;
}
.absorb-cite {
margin-top: 12px; font-size: 0.7rem; color: var(--muted); font-style: italic;
line-height: 1.5;
}
.absorb-card-chart {
background: transparent; border-radius: 0;
padding: 0;
}
.absorb-card-chart svg { width: 100%; height: auto; display: block; }
/* 2026-05-21: 3-step editorial absorption illustration (replaces the curve chart).
Each step is its own warm-cream card with step number, illustration, callout. */
.absorb-steps {
display: flex; flex-direction: column; gap: 12px;
}
.absorb-step {
position: relative;
background: #fff7eb;
border: 1px solid rgba(0,62,44,0.08);
border-radius: 12px;
padding: 16px 14px 14px;
}
.absorb-step-num {
position: absolute; top: 12px; left: 12px;
width: 22px; height: 22px; border-radius: 50%;
background: var(--green); color: #fff;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 0.72rem; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
letter-spacing: 0;
}
.absorb-step-art {
width: 100%; height: auto; display: block;
margin: 4px 0 6px;
}
.absorb-step-cap {
text-align: center;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 0.84rem; font-weight: 700; line-height: 1.25;
color: var(--green);
margin: 0;
letter-spacing: -0.005em;
}
/* ============================================================
* 2026-05-21 v2: BEADLET JOURNEY (replaces .absorb-card)
* Cinematic hero + 3 vertical stages with alternating layout
* and scroll-triggered reveals. Editorial, not clinical.
* ============================================================ */
.beadlet-journey { max-width: 1100px; margin: 0 auto; }
/* — HERO — */
.bj-hero {
background: linear-gradient(180deg, #fff7eb 0%, #fffdf7 100%);
border: 1px solid rgba(0,62,44,0.08);
border-radius: 20px;
padding: clamp(24px, 4vw, 48px);
margin-bottom: clamp(48px, 7vw, 84px);
display: grid; grid-template-columns: 1fr;
gap: clamp(24px, 4vw, 40px);
align-items: center;
box-shadow: 0 8px 32px rgba(15,30,23,0.04);
}
@media (min-width: 820px) {
.bj-hero { grid-template-columns: 1.05fr 1fr; }
}
.bj-hero-fig {
position: relative; margin: 0;
border-radius: 14px; overflow: hidden;
background: #f3e9d3;
aspect-ratio: 4/5;
max-height: 540px;
}
.bj-hero-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bj-anno {
position: absolute;
display: inline-flex; align-items: center; gap: 8px;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
color: #003e2c; font-weight: 800;
background: rgba(255,253,247,0.96);
padding: 7px 11px 7px 9px;
border-radius: 999px;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
white-space: nowrap;
box-shadow: 0 4px 14px rgba(15,30,23,0.14);
}
.bj-anno-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #ff5722;
box-shadow: 0 0 0 3px rgba(255,87,34,0.22);
flex-shrink: 0;
}
.bj-anno--shell { top: 16%; right: 6%; }
.bj-anno--core { bottom: 18%; left: 6%; }
@media (max-width: 600px) {
.bj-anno { font-size: 9px; padding: 6px 9px 6px 8px; letter-spacing: 1.2px; }
.bj-anno--shell { top: 10%; right: 6%; }
.bj-anno--core { bottom: 10%; left: 6%; }
}
.bj-hero-text { padding: 0; }
.bj-hero-eyebrow {
font-size: 0.72rem; letter-spacing: 2.4px; text-transform: uppercase;
color: var(--orange); font-weight: 800; margin-bottom: 14px;
}
.bj-hero-h {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700; font-size: clamp(1.7rem, 4.4vw, 2.2rem);
line-height: 1.08; letter-spacing: -0.02em;
color: var(--black); margin: 0 0 16px;
}
.bj-hero-h em {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic; font-weight: 400;
color: var(--orange); font-size: 1.12em;
letter-spacing: -0.005em;
}
.bj-hero-body {
font-size: 0.96rem; line-height: 1.6;
color: var(--muted); margin: 0 0 24px;
max-width: 48ch;
}
.bj-hero-stats {
list-style: none; padding: 18px 0 0; margin: 0;
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 14px;
border-top: 1px solid rgba(0,62,44,0.12);
}
.bj-hero-stats li { display: flex; flex-direction: column; }
.bj-hero-stats .bj-stat-num {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: clamp(1.4rem, 3.6vw, 1.7rem); font-weight: 800;
color: var(--green); line-height: 1; letter-spacing: -0.01em;
}
.bj-hero-stats .bj-stat-lbl {
font-size: 0.64rem; letter-spacing: 1.5px; text-transform: uppercase;
color: var(--muted); font-weight: 700; margin-top: 6px;
}
/* 2026-05-28 v11: STAGES — horizontal swipe carousel, all open by default. */
.bj-stages {
list-style: none; padding: 4px 1.1rem 12px 1.6rem; margin: 0;
display: flex; flex-direction: row;
gap: 14px;
overflow-x: auto; overflow-y: visible;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-padding-inline-start: 1.6rem;
touch-action: pan-x;
overscroll-behavior-x: contain;
}
.bj-stages::-webkit-scrollbar { display: none; }
.bj-stage {
flex: 0 0 96%; max-width: 640px;
scroll-snap-align: start;
border: 1px solid rgba(0,62,44,0.1);
border-radius: 16px;
background: #fffdf7;
overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
@media (min-width: 720px) { .bj-stage { flex-basis: 80%; max-width: 680px; } }
@media (min-width: 1024px) { .bj-stage { flex-basis: 44%; max-width: none; } }
/* Disable the toggle click — all stages are always open in v11. */
.bj-stage-toggle { cursor: default; pointer-events: none; }
.bj-stage-chev { display: none; }
.bj-stage[data-bj-open="true"] {
border-color: rgba(0,62,44,0.22);
box-shadow: 0 10px 32px rgba(15,30,23,0.06);
}
.bj-stage-toggle {
width: 100%;
display: flex; align-items: center; gap: 16px;
background: transparent; border: 0;
padding: clamp(16px, 2.5vw, 22px) clamp(18px, 3vw, 28px);
cursor: pointer;
text-align: left;
font-family: inherit;
color: var(--black);
transition: background 0.2s ease;
}
.bj-stage-toggle:hover { background: rgba(0,62,44,0.025); }
.bj-stage-toggle:focus-visible {
outline: 2px solid var(--green); outline-offset: -2px;
}
.bj-stage-num {
width: 36px; height: 36px; border-radius: 50%;
background: var(--green); color: #fff;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 0.95rem; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(0,62,44,0.18);
}
.bj-stage-tag-text {
flex: 1 1 auto; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.bj-stage-loc {
font-size: 0.66rem; letter-spacing: 1.8px; text-transform: uppercase;
color: var(--orange); font-weight: 800;
}
.bj-stage-h {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 700; font-size: clamp(1.05rem, 2.6vw, 1.25rem);
line-height: 1.2; letter-spacing: -0.01em;
color: var(--black);
}
.bj-stage-chev {
flex-shrink: 0;
width: 28px; height: 28px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(0,62,44,0.06);
color: var(--green);
transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1), background 0.2s ease;
}
.bj-stage[data-bj-open="true"] .bj-stage-chev {
transform: rotate(180deg);
background: rgba(0,62,44,0.12);
}
/* Panel (collapsible) — grid-template-rows trick for smooth open/close */
.bj-stage-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.45s cubic-bezier(0.2,0.7,0.2,1);
}
.bj-stage[data-bj-open="true"] .bj-stage-panel {
grid-template-rows: 1fr;
}
.bj-stage-panel-inner {
min-height: 0; overflow: hidden;
display: grid; grid-template-columns: 1fr; gap: clamp(16px, 3vw, 28px);
padding: 0 clamp(18px, 3vw, 28px);
}
.bj-stage[data-bj-open="true"] .bj-stage-panel-inner {
padding: 0 clamp(18px, 3vw, 28px) clamp(22px, 3vw, 30px);
}
@media (min-width: 720px) {
.bj-stage-panel-inner { grid-template-columns: 1.2fr 1fr; align-items: center; }
}
.bj-stage-art {
margin: 0;
border-radius: 14px;
overflow: hidden;
position: relative;
box-shadow: 0 6px 22px rgba(15,30,23,0.06);
/* 2026-05-28 v11: bigger image area for the wider cards. */
min-height: 280px;
display: flex; align-items: center;
}
.bj-stage-art svg { width: 100%; height: auto; display: block; }
.bj-stage-art--stomach { background: linear-gradient(165deg, #fcebe0 0%, #f5dbcb 100%); }
.bj-stage-art--gut { background: linear-gradient(180deg, #faecd5 0%, #f3deb6 48%, #fbe5e0 100%); }
.bj-stage-art--night { background: linear-gradient(180deg, #edf0f5 0%, #dde3ec 100%); }
.bj-stage-body {
font-size: 0.98rem; line-height: 1.6;
color: var(--muted); margin: 0;
max-width: 44ch;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
@media (prefers-reduced-motion: reduce) {
.bj-stage-panel, .bj-stage-chev { transition: none; }
}
.bj-source {
text-align: center;
font-size: 0.7rem; color: var(--muted);
letter-spacing: 0.5px; margin: clamp(40px, 6vw, 64px) 0 0;
font-style: italic;
}
/* ============================================================
* COA · scroll-pull (pinned reveal of certificate)
* 2026-05-20 v6: LITERAL COPY of ashwamag-v44.css.liquid §4 COA block (3680-3913)
* + body.ashwamag-page desktop 2-col override (6254-6283) + #coa-section scroll
* height (6955-6967). Only fonts swapped to v10's Plus Jakarta Sans / Manrope
* (v10 doesn't load IBM Plex Mono so eyebrow/caption use Manrope as substitute).
* Color variables remapped to v10 palette:
* --cream-3 → var(--beige-light, #F3EDE2)
* --terra-light → var(--orange, #A84B27)
* --forest → var(--green, #14281F)
* --ink-soft → var(--muted)
* --line → rgba(0,0,0,0.08)
* --ease → cubic-bezier(0.22, 1, 0.36, 1)
* Everything else (geometry, transforms, mask-image, CSS variables on .stage,
* @media breakpoints, reduced-motion fallback, desktop 2-col grid) is verbatim.
* KEEP IN SYNC WITH v6 v44.css if v6 changes — manual sync, no asset_url load.
============================================================ -->
.coa-section {
position: relative;
width: 100%;
background: var(--beige-light);
}
.coa-stage {
/* v2: tighter section. Header + pouch with cert peek, minimal empty space. */
height: clamp(420px, 56vh, 540px);
width: 100%;
display: grid;
grid-template-rows: auto 1fr;
align-items: stretch;
padding: 28px 24px 0;
gap: 4px;
position: relative;
overflow: hidden;
}
.coa-head {
text-align: center;
max-width: 760px;
margin: 0 auto;
will-change: opacity;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.coa-eyebrow {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--orange);
margin: 0;
font-weight: 500;
}
.coa-headline {
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
font-weight: 400;
color: var(--green, #14281F);
font-size: clamp(2rem, 4.6vw, 3.4rem);
line-height: 1.04;
letter-spacing: -0.012em;
margin: 0;
}
.coa-headline em {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-weight: 400;
color: var(--orange);
font-size: 1.06em;
}
.coa-caption {
text-align: center;
max-width: 560px;
margin: 0 auto;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 11.5px;
line-height: 1.55;
color: var(--muted);
letter-spacing: 0.02em;
}
.coa-caption strong {
font-weight: 500;
color: #231f20;
}
.coa-hint {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 999px;
background: rgba(250, 247, 242, 0.6);
font-family: 'Manrope', system-ui, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--orange);
cursor: pointer;
transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.coa-hint:hover {
background: rgba(168, 75, 39, 0.08);
border-color: rgba(168, 75, 39, 0.4);
}
.coa-hint .arrow { font-size: 11px; line-height: 1; transform: translateY(-0.5px); }
.stage-wrap {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100%;
min-height: 0;
padding-top: 8px;
}
.stage {
position: relative;
width: 540px;
height: 100%;
max-height: 78vh;
display: block;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, black 7%, black 92%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, black 7%, black 92%, transparent 100%);
--pouch-w: 460px;
--pouch-h: 375px;
--pouch-visible-h: 240px;
--cert-w: 400px;
--cert-h: 440px;
--peek: 12px;
}
.pouch {
position: absolute;
left: 50%;
bottom: calc(-1 * (var(--pouch-h) - var(--pouch-visible-h)));
transform: translateX(-50%);
/* v10 fix: force height to match --pouch-h (was `height: auto` in v6 because v6's
pouch image happens to render at exactly 460×375; v10's image dimensions differ). */
width: var(--pouch-w);
height: var(--pouch-h);
object-fit: contain;
z-index: 2;
pointer-events: none;
user-select: none;
filter: drop-shadow(0 18px 28px rgba(15, 30, 23, 0.22));
}
.cert {
position: absolute;
left: 50%;
bottom: calc(-1 * (var(--cert-h) - var(--pouch-visible-h) - var(--peek)));
transform: translate(-50%, 0);
/* v10 fix: force height to match --cert-h. Without this, v10's cert image renders
taller than the assumed 440px and the "peek" becomes the entire cert showing
above the pouch (instead of 12px). object-fit: contain preserves aspect ratio
inside the declared box. */
width: var(--cert-w);
height: var(--cert-h);
object-fit: contain;
z-index: 1;
user-select: none;
will-change: transform;
cursor: zoom-in;
box-shadow:
0 1px 2px rgba(15, 30, 23, 0.05),
0 8px 18px rgba(15, 30, 23, 0.10),
0 22px 44px rgba(15, 30, 23, 0.18);
background: #fff;
border-radius: 2px;
transition: box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.cert:hover {
box-shadow:
0 1px 2px rgba(15, 30, 23, 0.06),
0 10px 22px rgba(15, 30, 23, 0.14),
0 28px 52px rgba(15, 30, 23, 0.22);
}
/* Modal - full-resolution COA viewer */
.coa-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
background: rgba(15, 30, 23, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 24px;
opacity: 0;
transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.coa-modal.is-open { display: flex; opacity: 1; }
.coa-modal-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
background: #fff;
border-radius: 4px;
box-shadow: 0 30px 80px rgba(0,0,0,0.5);
transform: scale(0.96);
transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.coa-modal.is-open .coa-modal-img { transform: scale(1); }
.coa-modal-close {
position: absolute;
top: 18px; right: 18px;
width: 44px; height: 44px;
border: 1px solid rgba(255,255,255,0.35);
background: rgba(255,255,255,0.08);
color: #fff;
border-radius: 50%;
cursor: pointer;
font-size: 22px; line-height: 1;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Manrope', system-ui, sans-serif;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.coa-modal-close:hover { background: rgba(255,255,255,0.18); }
.coa-modal-hint {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.7);
font-family: 'Manrope', system-ui, sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
pointer-events: none;
}
/* Mobile (≤880px) — v6 v44.css:3894-3913 — overrides CSS variables on .stage
so .pouch and .cert reposition automatically without per-element overrides. */
@media (max-width: 880px) {
.stage {
width: 100%;
max-width: 360px;
max-height: 76vh;
--pouch-w: 340px;
--pouch-h: 277px;
--pouch-visible-h: 180px;
--cert-w: 320px;
--cert-h: 352px;
--peek: 10px;
}
.coa-stage { padding: 24px 16px 18px; gap: 12px; }
.coa-eyebrow { font-size: 10px; letter-spacing: 0.22em; }
.coa-headline { font-size: clamp(28px, 7.4vw, 40px); }
.coa-caption { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
.cert { transform: translate(-50%, calc(-1 * (var(--cert-h) - var(--peek)))) !important; }
}
/* Desktop side-by-side layout — v6 v44.css:6254-6283.
≥881px: text column left, stage column right. */
@media (min-width: 881px) {
.coa-stage {
height: clamp(520px, 64vh, 680px);
grid-template-rows: 1fr;
grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
column-gap: clamp(40px, 5vw, 80px);
padding: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 80px);
align-items: center;
max-width: 1320px;
margin: 0 auto;
}
.coa-head {
grid-column: 1;
grid-row: 1;
text-align: left;
align-items: flex-start;
max-width: 56ch;
margin: 0;
gap: 18px;
}
.coa-caption {
text-align: left;
margin: 0;
max-width: 52ch;
}
.stage-wrap {
grid-column: 2;
grid-row: 1;
height: 100%;
}
}
@media (min-width: 1280px) {
.coa-headline { font-size: clamp(2.6rem, 3.6vw, 3.6rem); }
}
/* Special: taller .coa-stage with no bottom padding for full scroll-reveal travel — v44.css:6955-6967 */
#coa-section .coa-stage {
height: clamp(560px, 80vh, 720px);
padding-bottom: 0;
overflow: hidden !important; /* v10 fix: belt-and-braces — diagnostic showed live page had overflow:visible despite base rule. Force it here at higher specificity. */
}
#coa-section .stage,
#coa-section .stage-wrap {
max-height: none;
height: 100%;
}
/* v10 fix: stage-wrap must clip too (otherwise pouch/cert bleed past the grid cell into next section) */
#coa-section .stage-wrap { overflow: hidden !important; }
/* v10 fix: clip the section itself as final guard */
.coa-section { overflow: hidden !important; }
@media (min-width: 1024px) {
#coa-section .coa-stage {
height: clamp(720px, 90vh, 920px);
padding: clamp(56px, 6vw, 80px) clamp(40px, 5vw, 80px) 0;
}
}
/* Task 3: scene + chart side-by-side on desktop */
.wc-hero-grid { display: grid; gap: 24px; }
@media (min-width: 900px) {
.wc-hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
gap: 32px;
margin-bottom: clamp(56px, 7vw, 96px); /* breathing room before the four-steps section */
width: 100%; max-width: 100%; min-width: 0;
}
.wc-hero-grid .wc-scene {
height: 100%;
aspect-ratio: auto;
max-height: none;
min-width: 0; width: 100%; max-width: 100%;
min-height: 420px;
margin-bottom: 0;
}
/* 2026-05-21: tight width constraints + overflow:hidden so the chart's title/SVG
can never bleed past the column edge on desktop. */
.wc-hero-grid .wc-chart {
height: 100%;
min-width: 0; width: 100%; max-width: 100%;
box-sizing: border-box;
overflow: hidden;
margin-bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 28px 24px 22px;
}
.wc-hero-grid .wc-chart-svg-wrap {
width: 100%; max-width: 100%; min-width: 0;
overflow: hidden;
}
.wc-hero-grid .wc-chart-svg {
flex: 1 1 auto;
width: 100%; max-width: 100%; min-width: 0;
max-height: none;
min-height: 240px;
}
}
/* (loop-vs-fix-grid removed 2026-05-20 — breaks-loop section deleted per Pranav.
Four-steps now occupies full container width with its native 2x2 grid.) */
/* 4-col Honest Comparison */
.honest-section .honest-intro h2 em {
font-style: italic; font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
color: var(--orange); font-weight: 600;
}
.comp-table-2 .row-label-th { background: transparent; width: 50%; }
.comp-table-2 th.hl, .comp-table-2 th.dim {
width: 25%; padding: 18px 14px; line-height: 1.25;
font-size: 0.78rem;
}
.comp-table-2 th.hl { padding: 20px 14px; }
.comp-table-2 th.dim {
background: transparent; color: var(--muted);
}
.comp-table-2 td.row-label {
text-align: left; width: 50%;
font-weight: 700; font-size: 0.95rem; color: var(--black);
padding: 18px 14px; line-height: 1.35;
}
.comp-table-2 td.hl { background: rgba(0,82,59,0.04); }
.comp-table-2 .comp-check { color: var(--green); font-size: 1.15rem; font-weight: 700; }
.comp-table-2 .comp-cross { color: rgba(0,0,0,0.18); font-size: 1rem; font-weight: 700; }
.comp-na { color: #b5b5b5; font-size: 0.74rem; font-weight: 600; }
.comp-dash { color: #b5b5b5; font-size: 1rem; font-weight: 600; }
.comp-mark {
font-size: 0.66rem; letter-spacing: 0.8px; color: var(--muted);
font-weight: 600; text-transform: uppercase;
}
.comp-swipe-hint {
text-align: center; font-size: 0.66rem; color: var(--muted);
margin-top: 14px; letter-spacing: 1px; text-transform: uppercase;
}
@media (min-width: 720px) {
.coa-dossier { grid-template-columns: 1.05fr 1fr; gap: 32px; }
.coa-results { padding: 28px; }
.comp-swipe-hint { display: none; }
}
@media (min-width: 900px) {
.beadlet-compare { gap: 48px !important; }
.beadlet-compare .flow-video { max-width: 200px; }
}
/* BOLD MODERN · variant overrides */
body { font-family: 'Manrope', system-ui, sans-serif; }
h1, h2 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 400; letter-spacing: -0.03em; line-height: 1 !important; }
h1 { font-size: clamp(2.8rem, 5vw, 4rem) !important; }
h2 { font-size: clamp(2.2rem, 4.2vw, 3.2rem) !important; }
.eyebrow, .wc-eyebrow { font-weight: 800 !important; }
.btn-buy-big { font-weight: 800 !important; }
/* Deep multi-layer shadow for embossed/raised feel — no fill color, all about the lift. */
.pack-card.sel {
box-shadow:
0 18px 38px rgba(15, 30, 23, 0.22),
0 6px 12px rgba(15, 30, 23, 0.12);
}
.step-num, .btn-buy-big { box-shadow: 0 8px 24px rgba(255,87,34,0.18); }
/* ══════════════════════════════════════════════════
2026-05-28 v11: LAUNCH OFFER POPUP
══════════════════════════════════════════════════ */
.launch-popup {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 20px;
opacity: 0; pointer-events: none;
transition: opacity 0.28s ease;
}
.launch-popup.is-open { opacity: 1; pointer-events: auto; }
.launch-popup[hidden] { display: none; }
.launch-popup-backdrop {
position: absolute; inset: 0;
background: rgba(8, 18, 14, 0.62);
backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
/* 2026-05-28 v11: card BG matches the image's exact green (#243e32).
2026-05-29: scaled-up on desktop so the popup feels intentional, not tiny. */
.launch-popup-card {
position: relative; z-index: 1;
width: min(380px, 100%);
background: #243e32;
border-radius: 18px;
padding: 0 12px 16px;
text-align: center;
box-shadow: 0 30px 60px rgba(8, 18, 14, 0.45);
transform: translateY(16px) scale(0.96);
transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
overflow: hidden;
}
/* 2026-05-29 v11: DESKTOP — vertical stack like mobile, BIGGER. Image taller so gummies + 25% OFF fully visible. */
@media (min-width: 901px) {
.launch-popup-card {
width: min(520px, 100%);
max-height: 95vh;
padding: 0 16px 16px;
border-radius: 22px;
overflow: hidden;
}
/* Image is pre-cropped at the source (ROOT LABS top + AUTO-APPLIED bottom physically
removed). Container matches the cropped image aspect (8:9) so NO additional crop. */
.launch-popup-art {
aspect-ratio: 1/1;
max-height: 65vh;
background: #243e32;
}
.launch-popup-bg { object-position: center 50%; }
.launch-popup-art::before,
.launch-popup-art::after { display: none; }
.launch-popup-header { padding: 16px 14px 10px; }
.launch-popup-logo { height: 38px; }
.launch-popup-header-sep { height: 22px; }
.launch-popup-header-label { font-size: 1.1rem; }
.launch-popup-applied { font-size: 0.7rem; letter-spacing: 1.3px; margin: 10px 0 10px; }
.launch-popup-cta { font-size: 0.88rem; padding: 12px 20px; gap: 9px; }
.launch-popup-arrow { font-size: 1.2rem; }
.launch-popup-close { width: 32px; height: 32px; top: 12px; right: 12px; }
}
.launch-popup.is-open .launch-popup-card { transform: translateY(0) scale(1); }
.launch-popup-close {
position: absolute; top: 14px; right: 14px; z-index: 3;
width: 32px; height: 32px; border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
border: none;
color: #1c3526;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font: inherit; line-height: 0;
transition: background 0.18s, transform 0.18s;
}
.launch-popup-close:hover { background: #fff; transform: scale(1.04); }
/* 2026-05-28 v11: dedicated header strip above the image holds the REAL logo.
Image is cropped from the top so the generic "ROOT LABS" serif wordmark is hidden. */
/* Logo + Launch Offer label in a single row — same serif family as the wordmark. */
.launch-popup-header {
width: calc(100% + 24px); margin: 0 -12px;
background: #243e32;
padding: 18px 14px 10px;
display: flex; align-items: center; justify-content: center;
gap: 12px;
}
.launch-popup-logo {
display: block;
height: 38px; width: auto;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.launch-popup-header-sep {
display: inline-block;
width: 1px; height: 22px;
background: rgba(255, 255, 255, 0.30);
}
.launch-popup-header-label {
font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
font-size: 1.05rem; font-weight: 500; font-style: italic;
color: var(--beige);
letter-spacing: 0.2px; line-height: 1;
}
/* Mobile base — uses the pre-cropped image (ROOT LABS + AUTO-APPLIED already removed at source).
Container matches the cropped image's natural 8:9 aspect so NO additional crop. */
.launch-popup-art {
position: relative;
width: calc(100% + 24px); margin: 0 -12px;
aspect-ratio: 1/1;
background: #243e32;
overflow: hidden;
}
.launch-popup-bg {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 50%;
display: block;
}
/* Strip overlays no longer needed — kept selectors for desktop override flexibility. */
.launch-popup-art::before,
.launch-popup-art::after {
content: ""; position: absolute; left: 0; right: 0;
background: #243e32;
pointer-events: none; z-index: 1;
}
/* Strips disabled — image is pre-cropped at the source so no overlays needed. */
.launch-popup-art::before { top: 0; height: 0; display: none; }
.launch-popup-art::after { bottom: 0; height: 0; display: none; }
/* Eyebrow not used anymore. */
.launch-popup-eyebrow { display: none; }
/* 2026-05-28 v11: plain white centered text, no pill background — sits cleanly on green card. */
.launch-popup-applied {
margin: 14px 0 16px;
padding: 0;
background: transparent;
color: rgba(255, 255, 255, 0.78);
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 0.68rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
text-align: center;
display: block;
border: none;
border-radius: 0;
}
/* 2026-05-28 v11: yellow primary CTA — slightly trimmed for tighter feel. */
.launch-popup-cta {
display: flex; align-items: center; justify-content: center;
gap: 9px;
width: 100%;
margin: 0 0 14px;
padding: 13px 22px;
background: #fbd96a;
color: #243e32;
border-radius: 999px;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 800; font-size: 0.85rem; letter-spacing: 0.5px;
text-transform: uppercase;
text-decoration: none; line-height: 1;
transition: background 0.18s, transform 0.18s;
box-shadow: 0 4px 14px rgba(251, 217, 106, 0.22);
}
@media (hover: hover) and (pointer: fine) {
.launch-popup-cta:hover { background: #f9d04d; transform: translateY(-1px); color: #243e32; }
}
.launch-popup-arrow { font-size: 1.2rem; font-weight: 400; line-height: 1; margin-top: -2px; }
/* Wrap so the inline CTA truly centers in the card. */
.launch-popup-card { text-align: center; }
/* 2026-05-29 v11: WhatsApp popup CTA + eyebrow CSS removed. */
@media (max-width: 380px) {
.launch-popup-card { padding: 10px 10px 14px; }
.launch-popup-cta { font-size: 0.82rem; padding: 12px 14px; }
}
/* ════════════════════════════════════════════════════════════════════════════
2026-05-30 v11: DESKTOP OVERHAUL v2 (≥901px). Mobile completely untouched.
AGGRESSIVE size reduction — Pranav wants ALL sections small enough to see
multiple in one viewport scroll. Padding, fonts, images all tighter.
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
/* ── PROMO BAR ───────────────────────────────────────────────────────── */
.promo-bar-track { gap: 28px !important; animation-duration: 38s !important; }
/* ── PDP GALLERY ────────────────────────────────────────────────────────
Horizontal thumb row BELOW main image. Bigger main image. */
.gallery {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
grid-template-areas: none !important;
gap: 10px;
}
.gallery-main { grid-area: auto; width: 100%; }
.gallery-thumbs {
grid-area: auto;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
max-height: none !important;
gap: 8px !important;
padding: 0 !important;
scroll-snap-type: x proximity !important;
width: 100% !important;
}
.gallery-thumb { width: 72px !important; height: 72px !important; flex-shrink: 0 !important; }
/* ── BUY ACCORDION — hidden on desktop. Standalone sections render directly. */
.buy-accordion { display: none !important; }
/* If mover ran in error, force the hidden flags off so standalone sections appear. */
#science-section.bacc-moved-source,
#how-section.bacc-moved-source,
#beadlet-section.bacc-moved-source,
#coa-section.bacc-moved-source { display: block !important; }
/* ════════════════════════════════════════════════════════════════════
SECTION-LEVEL SIZE REDUCTION — universal padding shrink.
Pranav: "Make the sections way smaller, like very tall and very big."
Drop every section's vertical padding to a thin strip.
════════════════════════════════════════════════════════════════════ */
.section,
.beadlet-section,
.science-section,
.why-clinical,
.absorb-section,
.how-section,
.outcome-section,
.coa-section,
.testimonials-section,
.honest-section,
#ritual,
.faq-section { padding-top: 36px !important; padding-bottom: 36px !important; }
/* ── BEADLET — clean 3-card row. bj-hero hidden on desktop.
Each card: title row top, SVG art full width middle, body text below.
Section fits in one viewport. */
.beadlet-section {
background: var(--beige);
padding: 24px 0 !important;
}
.beadlet-section .container {
max-width: 1180px !important;
padding: 0 2rem !important;
}
.beadlet-section .beadlet-tech-head {
text-align: center !important;
margin-bottom: 14px !important;
}
.beadlet-section .beadlet-tech-head h3 {
font-size: 1.35rem !important;
margin: 4px 0 0 !important;
}
.beadlet-section .beadlet-tech-head .eyebrow { font-size: 0.66rem !important; margin-bottom: 4px !important; }
/* Hide bj-hero on desktop — it was wasting massive vertical space. */
.beadlet-section .bj-hero { display: none !important; }
.beadlet-section .beadlet-journey {
display: block !important;
}
/* 3 stage cards in horizontal row. */
.beadlet-section .bj-stages {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 14px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
max-width: none !important;
}
.beadlet-section .bj-stage {
background: var(--beige-light) !important;
border: 1px solid var(--beige-mid) !important;
border-radius: 10px !important;
padding: 12px !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
flex: none !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
.beadlet-section .bj-stage:nth-child(3) {
grid-column: auto !important;
grid-row: auto !important;
}
/* Title row: number + eyebrow + heading at top of card. */
.beadlet-section .bj-stage-toggle {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 0 0 8px !important;
text-align: left !important;
background: transparent !important;
border: none !important;
cursor: default !important;
}
.beadlet-section .bj-stage-chev { display: none !important; }
.beadlet-section .bj-stage-num {
width: 28px !important; height: 28px !important;
background: var(--green) !important; color: var(--beige) !important;
border-radius: 50% !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
font-size: 0.78rem !important; font-weight: 700 !important;
flex-shrink: 0 !important;
}
.beadlet-section .bj-stage-tag-text { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.beadlet-section .bj-stage-loc {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 0.6rem !important; letter-spacing: 1.2px !important;
text-transform: uppercase !important; color: var(--orange) !important;
font-weight: 800 !important;
}
.beadlet-section .bj-stage-h { font-size: 0.95rem !important; line-height: 1.15 !important; color: var(--ink) !important; font-weight: 700 !important; }
/* Panel: always open, art on top, body below — vertical stack inside card. */
.beadlet-section .bj-stage-panel {
display: block !important;
max-height: none !important;
overflow: visible !important;
opacity: 1 !important;
transition: none !important;
}
.beadlet-section .bj-stage-panel-inner {
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
gap: 8px !important;
}
/* SVG art ON TOP, full width, visible. */
.beadlet-section .bj-stage-art {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
aspect-ratio: 16/10 !important;
max-height: 160px !important;
background: var(--beige) !important;
border-radius: 8px !important;
padding: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.beadlet-section .bj-stage-art svg {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 150px !important;
display: block !important;
}
/* Body text BELOW. */
.beadlet-section .bj-stage-body {
width: 100% !important;
font-size: 0.8rem !important;
line-height: 1.45 !important;
color: var(--muted) !important;
margin: 0 !important;
padding: 0 !important;
}
/* ── SCIENCE / INGREDIENTS — 4-col tight grid, smaller cards. */
.science-section {
background: var(--beige-light);
padding: 32px 0 !important;
}
.science-section .container,
.science-section .container.section-wide {
max-width: 1180px !important;
padding: 0 2rem !important;
}
.science-section .science-intro { margin-bottom: 18px !important; text-align: center !important; }
.science-section .science-intro h2 { font-size: 1.55rem !important; margin: 0 !important; }
.science-section .science-intro .eyebrow { font-size: 0.7rem !important; margin-bottom: 6px !important; }
.science-section .science-intro p { font-size: 0.84rem !important; margin: 6px 0 0 !important; }
.study-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
}
.study-card { max-width: none !important; padding: 0 !important; }
.study-img-wrap { aspect-ratio: 5/4 !important; max-height: 140px !important; margin: 0 !important; border-radius: 10px 10px 0 0 !important; overflow: hidden; }
.study-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.study-card > .study-head,
.study-card > .study-quote,
.study-card > .study-purpose,
.study-card > .study-stats-line,
.study-card > .study-cite { padding-left: 12px !important; padding-right: 12px !important; }
.study-card .study-head { padding-top: 10px !important; padding-bottom: 8px !important; }
.study-ing { font-size: 0.92rem !important; }
.study-dose { font-size: 0.78rem !important; }
.study-quote { font-size: 0.78rem !important; line-height: 1.35 !important; padding-top: 8px !important; padding-bottom: 6px !important; }
.study-purpose { font-size: 0.74rem !important; line-height: 1.35 !important; margin: 4px 0 !important; }
.study-stats-line { font-size: 0.72rem !important; padding: 8px 0 !important; }
.study-cite { font-size: 0.66rem !important; padding-top: 8px !important; padding-bottom: 10px !important; }
.science-note { font-size: 0.7rem !important; margin-top: 14px !important; }
/* ── WHY-SECTION — 2-col: pain LEFT, copy + cycle RIGHT. Smaller. */
.why-clinical.why-imgstack { padding: 28px 0 !important; }
.why-imgstack .container {
max-width: 1180px !important;
padding: 0 2rem !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
grid-template-areas:
"pain intro"
"pain stack" !important;
gap: 18px 32px !important;
align-items: start !important;
text-align: left !important;
}
.why-intro {
grid-area: intro !important;
max-width: none !important;
margin: 0 !important;
text-align: left !important;
align-self: start !important;
}
.why-intro .why-eyebrow { text-align: left !important; font-size: 0.66rem !important; margin-bottom: 8px !important; }
.why-intro .why-h { font-size: 1.55rem !important; line-height: 1.15 !important; text-align: left !important; margin: 0 0 10px !important; }
.why-intro .why-deck { font-size: 0.85rem !important; line-height: 1.5 !important; text-align: left !important; max-width: 460px !important; margin: 0 !important; }
.why-img--bleed {
grid-area: pain !important;
width: 100% !important;
margin: 0 !important;
aspect-ratio: 3/4 !important;
object-fit: cover !important;
border-radius: 10px !important;
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%) !important;
mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%) !important;
max-height: 380px !important;
}
.why-imgstack-wrap {
grid-area: stack !important;
gap: 10px !important;
align-self: start !important;
}
.why-img--cycle { max-width: 100% !important; border-radius: 10px !important; max-height: 340px !important; object-fit: contain !important; }
/* ── ABSORB + HOWTO WRAP — side-by-side. Symmetric padding. */
.absorb-howto-wrap {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
background: var(--beige-light);
align-items: stretch;
max-width: 1180px;
margin: 0 auto;
padding: 0 2rem;
}
.absorb-howto-wrap > .absorb-section,
.absorb-howto-wrap > .how-section {
margin: 0 !important;
background: transparent !important;
padding: 28px 0 !important;
}
.absorb-howto-wrap .absorb-container {
max-width: none !important;
padding: 0 1.2rem 0 0 !important;
margin: 0 !important;
}
.absorb-howto-wrap .absorb-intro { max-width: none !important; text-align: left !important; margin-bottom: 14px !important; }
.absorb-howto-wrap .absorb-eyebrow { text-align: left !important; font-size: 0.65rem !important; margin-bottom: 8px !important; }
.absorb-howto-wrap .absorb-h { text-align: left !important; font-size: 1.5rem !important; line-height: 1.15 !important; margin: 0 0 10px !important; }
.absorb-howto-wrap .absorb-deck { text-align: left !important; font-size: 0.85rem !important; line-height: 1.5 !important; margin: 0 !important; }
.absorb-howto-wrap .absorb-compare { max-width: none !important; margin: 14px 0 0 !important; gap: 10px !important; }
.absorb-howto-wrap .absorb-pill { font-size: 0.56rem !important; padding: 8px 10px !important; min-height: 44px !important; max-width: 200px !important; }
.absorb-howto-wrap .absorb-video { max-width: 170px !important; }
.absorb-howto-wrap .absorb-caption { font-size: 0.74rem !important; max-width: 160px !important; }
/* how-section column on the right */
.absorb-howto-wrap .how-section { padding: 28px 0 28px 1.2rem !important; }
.absorb-howto-wrap .how-section .container { max-width: none !important; padding: 0 !important; }
.absorb-howto-wrap .how-section .how-intro,
.absorb-howto-wrap .how-section .how-text { text-align: left !important; margin-bottom: 14px !important; }
.absorb-howto-wrap .how-section h2 { font-size: 1.5rem !important; line-height: 1.15 !important; margin: 4px 0 8px !important; text-align: left !important; }
.absorb-howto-wrap .how-section .eyebrow { font-size: 0.65rem !important; text-align: left !important; }
.absorb-howto-wrap .how-section p { font-size: 0.85rem !important; line-height: 1.5 !important; text-align: left !important; }
.absorb-howto-wrap .how-section .steps-row {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
max-width: none !important;
}
.absorb-howto-wrap .how-section .step-cell { flex: none !important; max-width: none !important; padding: 10px !important; }
.absorb-howto-wrap .how-section .step-img-wrap { max-height: 88px !important; aspect-ratio: 16/9 !important; }
.absorb-howto-wrap .how-section .step-num { font-size: 0.85rem !important; }
.absorb-howto-wrap .how-section .step-head { font-size: 0.9rem !important; }
.absorb-howto-wrap .how-section .step-body { font-size: 0.78rem !important; line-height: 1.4 !important; }
/* ── OUTCOME — thin strip. Just the image, smaller. */
.outcome-section { background: #12291d; padding: 20px 0 !important; }
.outcome-container { max-width: 760px !important; padding: 0 2rem !important; margin: 0 auto !important; }
.outcome-img { max-width: 100% !important; max-height: 480px !important; object-fit: contain !important; border-radius: 12px !important; }
/* ── TESTIMONIALS — keep grid but compact. */
.testimonials-section { padding: 32px 0 !important; }
.testimonials-section .container { max-width: 1180px !important; padding: 0 2rem !important; }
.testimonials-section .t-intro h2 { font-size: 1.55rem !important; }
.testimonials-section .t-intro p { font-size: 0.85rem !important; }
.testimonials-section .t-grid { gap: 14px !important; }
/* ── COA — restore standalone visibility. Fix cert/pouch balance.
Pranav: "The packet is smaller than the report. The report is extending on the left and right of the packet."
Fix: cap cert size, ensure pouch is at LEAST as large. */
/* 2026-05-30 v11 (V34): COA scroll animation RESTORED. My V31 overrides killed it
by replacing the scroll-driven sticky-stage CSS with a static grid + absolute
positioning. Removed those rules. Let the original CSS at lines ~2761 handle
desktop layout AND the JS scroll handler at template ~3134 handle the reveal. */
.coa-section { background: var(--beige); padding: 28px 0 !important; }
/* Minimal text size tweaks only — preserve all positioning/animation behavior. */
#coa-section .coa-eyebrow { font-size: 0.72rem !important; letter-spacing: 0.22em !important; }
#coa-section .coa-headline { font-size: 1.9rem !important; line-height: 1.15 !important; }
#coa-section .coa-caption { font-size: 0.95rem !important; line-height: 1.55 !important; }
#coa-section .coa-hint { font-size: 0.85rem !important; padding: 10px 16px !important; }
/* DELETED legacy overrides — let original CSS provide:
- .coa-stage height: clamp(420px,56vh,540px) + position: relative + overflow: hidden
- .stage-wrap as natural sticky container
- .pouch + .cert positioning that JS animates via transform: translateY()
The scroll-scrubbed reveal JS at template line ~3127 reads cert's
position and animates transform during scroll. Static positioning kills it. */
#coa-section .legacy-noop-marker {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
border-radius: 4px !important;
}
/* ── HONEST + RITUAL + FAQ — tighter padding. */
.honest-section { padding: 32px 0 !important; }
#ritual { padding: 32px 0 !important; }
.faq-section { padding: 32px 0 !important; }
/* 2026-05-30 v11 (V32): page-flow wrapper — desktop-only grid reorder via CSS Grid.
v7.liquid has wrapping the sections. v11-dev.liquid does NOT.
On mobile (≤900): the wrap is just a passthrough div with no effect.
On desktop: grid-template-areas places sections in arbitrary visual order. */
.page-flow {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
grid-template-areas:
"why why why why why why"
"science science science science science science"
"beadlet beadlet beadlet beadlet beadlet beadlet"
"absorb absorb absorb absorb honest honest"
"testimonials testimonials testimonials testimonials testimonials testimonials"
"coa coa coa coa coa coa"
"divider divider divider divider divider divider"
"outcome outcome doctor doctor howto howto"
"ritual ritual ritual ritual ritual ritual"
"faq faq faq faq faq faq" !important;
align-items: stretch !important;
column-gap: 0 !important;
row-gap: 0 !important;
}
/* dr-cosign aside positioned next to how-section. */
.page-flow > .dr-cosign { grid-area: doctor; align-self: stretch; }
/* 2026-05-30 V48: .sec-divider (lifestyle product photo strip) placed AFTER COA. */
.page-flow > .sec-divider { grid-area: divider; }
/* 2026-05-30 V41: outcome-section was moved out of .absorb-outcome-wrap in V37
mobile swap, so it's now a direct child of .page-flow. Match that. */
.page-flow > #outcome-section { grid-area: outcome; align-self: stretch; }
.page-flow #outcome-section .outcome-container {
max-width: none !important;
padding: 16px !important;
margin: 0 !important;
width: 100% !important;
}
.page-flow #outcome-section .outcome-img {
max-width: 100% !important;
max-height: 560px !important;
width: 100% !important;
object-fit: contain !important;
border-radius: 8px !important;
margin: 0 auto !important;
}
.page-flow > #why-section { grid-area: why; }
.page-flow > .absorb-outcome-wrap { display: contents !important; }
.page-flow > .absorb-outcome-wrap > #absorb-section { grid-area: absorb; }
.page-flow > .absorb-outcome-wrap > #outcome-section { grid-area: outcome; }
.page-flow > #honest-section { grid-area: honest; }
.page-flow > #science-section { grid-area: science; }
.page-flow > #beadlet-section { grid-area: beadlet; }
.page-flow > #testimonials-section { grid-area: testimonials; }
.page-flow > #coa-section { grid-area: coa; display: block !important; }
.page-flow > #how-section { grid-area: howto; }
.page-flow > #ritual { grid-area: ritual; }
.page-flow > #faq-section { grid-area: faq; }
/* Force COA visible even if bacc-moved-source was applied. */
.page-flow > #coa-section.bacc-moved-source { display: block !important; }
/* ════════════════════════════════════════════════════════════════════
WHY-SECTION — pain image full-width with text OVERLAID top-right.
"Bright text on transparent gradient fill over the bed image."
════════════════════════════════════════════════════════════════════ */
.page-flow #why-section.why-clinical.why-imgstack {
padding: 0 !important;
background: #12291d !important;
position: relative !important;
}
.page-flow #why-section .container {
max-width: none !important;
padding: 0 !important;
display: block !important;
grid-template-columns: none !important;
grid-template-areas: none !important;
position: relative !important;
text-align: left !important;
}
/* Pain image: extends full section width, no shape, no rounded corners. */
.page-flow #why-section .why-img--bleed {
width: 100% !important;
height: auto !important;
max-height: 580px !important;
min-height: 420px !important;
object-fit: cover !important;
margin: 0 !important;
border-radius: 0 !important;
display: block !important;
-webkit-mask-image: none !important;
mask-image: none !important;
aspect-ratio: auto !important;
}
/* Text panel pinned to TOP-RIGHT corner. Compact, right-aligned, doesn't cover the face. */
.page-flow #why-section .why-intro {
position: absolute !important;
top: 32px !important;
right: 32px !important;
left: auto !important;
bottom: auto !important;
max-width: 380px !important;
width: auto !important;
padding: 22px 26px !important;
margin: 0 !important;
background: rgba(18, 41, 29, 0.84) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
border-radius: 10px !important;
color: var(--beige) !important;
text-align: right !important;
z-index: 2 !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.page-flow #why-section .why-intro .why-eyebrow { text-align: right !important; color: var(--orange) !important; font-size: 0.62rem !important; letter-spacing: 1.8px !important; margin-bottom: 8px !important; }
.page-flow #why-section .why-intro .why-h { text-align: right !important; color: #fff !important; font-size: 1.45rem !important; line-height: 1.15 !important; margin: 0 0 10px !important; text-shadow: 0 2px 12px rgba(0,0,0,0.25); }
.page-flow #why-section .why-intro .why-deck { text-align: right !important; color: rgba(255, 250, 240, 0.92) !important; font-size: 0.8rem !important; line-height: 1.5 !important; max-width: none !important; margin: 0 !important; }
/* Cycle infographic: shown BELOW the pain image as its own band within why-section. */
.page-flow #why-section .why-imgstack-wrap {
display: block !important;
max-width: 760px !important;
margin: 0 auto !important;
padding: 32px 40px !important;
background: #12291d !important;
gap: 0 !important;
}
.page-flow #why-section .why-img--cycle {
width: 100% !important;
max-width: 100% !important;
max-height: 540px !important;
border-radius: 12px !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto !important;
}
/* ════════════════════════════════════════════════════════════════════
3-COL ROW: absorb LEFT + outcome MIDDLE + honest RIGHT.
Sections get equal heights via grid stretch. Each fits 1/3 viewport.
════════════════════════════════════════════════════════════════════ */
.page-flow > .absorb-outcome-wrap > #absorb-section.absorb-section {
background: var(--beige-light) !important;
padding: 32px 24px !important;
margin: 0 !important;
}
.page-flow #absorb-section .absorb-container {
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 2026-05-30 V39 desktop: visually anchored layout.
Header (eyebrow + headline) centered up top spanning all cols.
Below: 3-col row with each side as a STRUCTURED CARD (pill→body→caption stack)
and the deck in the MIDDLE as a visual divider with bg + accent. */
.page-flow #absorb-section .absorb-container {
display: grid !important;
grid-template-columns: 1fr 1.1fr 1fr !important;
grid-template-rows: auto auto 1fr !important;
grid-template-areas:
"eyebrow eyebrow eyebrow"
"headline headline headline"
"badcol deck goodcol" !important;
column-gap: 18px !important;
row-gap: 12px !important;
align-items: stretch !important;
max-width: 900px !important;
margin: 0 auto !important;
}
.page-flow #absorb-section .absorb-intro { display: contents !important; }
.page-flow #absorb-section .absorb-eyebrow {
grid-area: eyebrow !important;
text-align: center !important;
font-size: 0.72rem !important;
letter-spacing: 0.18em !important;
margin: 0 !important;
}
.page-flow #absorb-section .absorb-h {
grid-area: headline !important;
text-align: center !important;
font-size: 1.7rem !important;
line-height: 1.12 !important;
margin: 4px auto 6px !important;
max-width: 600px !important;
text-wrap: balance !important;
}
/* Deck as visually anchored middle card. */
.page-flow #absorb-section .absorb-deck {
grid-area: deck !important;
background: var(--beige) !important;
border-left: 3px solid var(--green) !important;
border-radius: 8px !important;
text-align: left !important;
font-size: 0.86rem !important;
line-height: 1.55 !important;
max-width: none !important;
margin: 0 !important;
padding: 20px 18px !important;
align-self: center !important;
text-wrap: balance !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}
/* absorb-compare becomes a passthrough so children become grid items. */
.page-flow #absorb-section .absorb-compare { display: contents !important; }
/* Each side column is now a STRUCTURED CARD with internal flex stack. */
.page-flow #absorb-section .absorb-col--bad,
.page-flow #absorb-section .absorb-col--good {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 10px !important;
padding: 10px !important;
}
.page-flow #absorb-section .absorb-col--bad { grid-area: badcol !important; }
.page-flow #absorb-section .absorb-col--good { grid-area: goodcol !important; }
/* Pills sit at top of each column, smaller with bigger font. */
.page-flow #absorb-section .absorb-pill {
max-width: 220px !important;
width: 100% !important;
min-height: auto !important;
font-size: 0.74rem !important;
padding: 9px 12px !important;
text-wrap: balance !important;
line-height: 1.18 !important;
letter-spacing: 0.5px !important;
margin: 0 !important;
}
.page-flow #absorb-section .absorb-video {
max-width: 100% !important;
width: 220px !important;
margin: 0 !important;
}
.page-flow #absorb-section .absorb-caption {
font-size: 0.84rem !important;
line-height: 1.4 !important;
max-width: 200px !important;
margin: 0 !important;
text-align: center !important;
text-wrap: balance !important;
}
.page-flow #absorb-section .absorb-eyebrow { text-align: left !important; font-size: 0.66rem !important; margin-bottom: 8px !important; }
.page-flow #absorb-section .absorb-h { text-align: left !important; font-size: 1.4rem !important; line-height: 1.15 !important; margin: 0 0 8px !important; }
.page-flow #absorb-section .absorb-deck { text-align: left !important; font-size: 0.84rem !important; line-height: 1.5 !important; max-width: none !important; margin: 0 !important; }
.page-flow #absorb-section .absorb-compare { max-width: none !important; margin: 14px 0 0 !important; gap: 10px !important; }
.page-flow #absorb-section .absorb-pill { max-width: none !important; min-height: 50px !important; font-size: 0.54rem !important; padding: 8px 9px !important; }
.page-flow #absorb-section .absorb-video { max-width: 140px !important; }
.page-flow #absorb-section .absorb-caption { font-size: 0.74rem !important; max-width: 140px !important; }
.page-flow > .absorb-outcome-wrap > #outcome-section.outcome-section {
background: #12291d !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.page-flow #outcome-section .outcome-container {
max-width: none !important;
padding: 16px !important;
margin: 0 !important;
}
.page-flow #outcome-section .outcome-img {
max-width: 100% !important;
max-height: 540px !important;
object-fit: contain !important;
border-radius: 8px !important;
margin: 0 auto !important;
}
.page-flow > #honest-section.honest-section {
background: var(--beige) !important;
padding: 32px 24px !important;
margin: 0 !important;
}
.page-flow #honest-section .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.page-flow #honest-section .honest-intro { text-align: left !important; max-width: none !important; margin-bottom: 14px !important; }
.page-flow #honest-section .honest-intro h2 { font-size: 1.4rem !important; line-height: 1.15 !important; margin: 4px 0 8px !important; text-align: left !important; }
.page-flow #honest-section .honest-intro .eyebrow { text-align: left !important; font-size: 0.66rem !important; }
.page-flow #honest-section .honest-intro p { font-size: 0.84rem !important; line-height: 1.5 !important; text-align: left !important; }
.page-flow #honest-section .comp-image-wrap { max-width: none !important; margin: 0 !important; }
.page-flow #honest-section .comp-image { width: 100% !important; height: auto !important; display: block !important; max-height: 420px !important; object-fit: contain !important; }
/* ════════════════════════════════════════════════════════════════════
BEADLET — 4 cards horizontal full-screen width, SVG/image top, text below.
bj-hero shown as Card 1; 3 stages as Cards 2/3/4.
════════════════════════════════════════════════════════════════════ */
.page-flow #beadlet-section.beadlet-section {
background: var(--beige);
padding: 32px 0 !important;
}
.page-flow #beadlet-section .container {
max-width: none !important;
width: 96% !important;
padding: 0 1.5rem !important;
margin: 0 auto !important;
}
.page-flow #beadlet-section .beadlet-tech-head { text-align: center !important; margin-bottom: 20px !important; }
.page-flow #beadlet-section .beadlet-tech-head h3 { font-size: 1.5rem !important; margin: 4px 0 0 !important; }
/* 4-col grid: bj-hero + 3 stage cards all in ONE row. Full width, tight gap. */
.page-flow #beadlet-section .beadlet-journey {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
align-items: stretch !important;
max-width: none !important;
width: 100% !important;
margin: 0 !important;
}
/* bj-hero VISIBLE on desktop as Card 1 of the 4-card row. */
.page-flow #beadlet-section .bj-hero { display: flex !important; }
/* Stage SVG art — bigger than original cramped 4-col version because container is 96% width. */
.page-flow #beadlet-section .bj-stage-art {
aspect-ratio: 1/1 !important;
max-height: 340px !important;
min-height: 260px !important;
}
.page-flow #beadlet-section .bj-stage-art svg {
max-height: 320px !important;
min-height: 240px !important;
}
/* Hero fig sized same as stage art so all 4 cards look like one set. */
.page-flow #beadlet-section .bj-hero-fig {
aspect-ratio: 1/1 !important;
max-height: 340px !important;
min-height: 260px !important;
}
/* bj-hero becomes Card 1 */
.page-flow #beadlet-section .bj-hero {
display: flex !important;
flex-direction: column !important;
background: var(--beige-light) !important;
border: 1px solid var(--beige-mid) !important;
border-radius: 10px !important;
padding: 12px !important;
margin: 0 !important;
text-align: left !important;
grid-column: 1 !important;
}
.page-flow #beadlet-section .bj-hero-fig {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 10px !important;
aspect-ratio: 16/10 !important;
background: var(--beige) !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.page-flow #beadlet-section .bj-hero-fig img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.page-flow #beadlet-section .bj-hero-eyebrow { font-size: 0.6rem !important; margin-bottom: 4px !important; color: var(--orange) !important; }
.page-flow #beadlet-section .bj-hero-h { font-size: 0.95rem !important; line-height: 1.15 !important; margin: 0 0 6px !important; color: var(--ink) !important; }
.page-flow #beadlet-section .bj-hero-body { font-size: 0.78rem !important; line-height: 1.4 !important; margin: 0 0 8px !important; }
.page-flow #beadlet-section .bj-hero-stats { gap: 8px !important; margin: 0 !important; flex-wrap: wrap !important; }
.page-flow #beadlet-section .bj-stat-num { font-size: 0.85rem !important; }
.page-flow #beadlet-section .bj-stat-lbl { font-size: 0.55rem !important; }
/* bj-stages becomes invisible as a list — its 3 children participate in parent grid as Cards 2/3/4 */
.page-flow #beadlet-section .bj-stages {
display: contents !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.page-flow #beadlet-section .bj-stage {
background: var(--beige-light) !important;
border: 1px solid var(--beige-mid) !important;
border-radius: 10px !important;
padding: 12px !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
width: auto !important;
max-width: none !important;
flex: none !important;
overflow: hidden !important;
}
.page-flow #beadlet-section .bj-stage-toggle {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 0 0 8px !important;
background: transparent !important;
border: none !important;
cursor: default !important;
}
.page-flow #beadlet-section .bj-stage-chev { display: none !important; }
.page-flow #beadlet-section .bj-stage-num {
width: 26px !important; height: 26px !important;
background: var(--green) !important; color: var(--beige) !important;
border-radius: 50% !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
font-size: 0.72rem !important; font-weight: 700 !important;
flex-shrink: 0 !important;
}
.page-flow #beadlet-section .bj-stage-tag-text { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.page-flow #beadlet-section .bj-stage-loc { font-family: 'Manrope', system-ui, sans-serif; font-size: 0.72rem !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: var(--orange) !important; font-weight: 800 !important; }
.page-flow #beadlet-section .bj-stage-h { font-size: 1.15rem !important; line-height: 1.18 !important; color: var(--ink) !important; font-weight: 700 !important; }
.page-flow #beadlet-section .bj-stage-panel { display: block !important; max-height: none !important; overflow: visible !important; opacity: 1 !important; transition: none !important; }
.page-flow #beadlet-section .bj-stage-panel-inner { display: flex !important; flex-direction: column !important; padding: 0 !important; gap: 8px !important; }
.page-flow #beadlet-section .bj-stage-art {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
aspect-ratio: 1/1 !important;
max-height: 320px !important;
min-height: 240px !important;
background: var(--beige) !important;
border-radius: 10px !important;
padding: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.page-flow #beadlet-section .bj-stage-art svg { width: 100% !important; height: 100% !important; max-height: 290px !important; min-height: 220px !important; display: block !important; }
/* Hero figure also bigger so it visually matches the bigger SVG cards. */
.page-flow #beadlet-section .bj-hero-fig { aspect-ratio: 1/1 !important; max-height: 320px !important; min-height: 240px !important; }
.page-flow #beadlet-section .bj-stage-body { width: 100% !important; font-size: 0.92rem !important; line-height: 1.55 !important; color: var(--muted) !important; margin: 0 !important; padding: 0 !important; }
/* More breathing room inside each card too. */
.page-flow #beadlet-section .bj-stage { padding: 18px !important; }
.page-flow #beadlet-section .bj-stage-toggle { padding: 0 0 14px !important; gap: 12px !important; }
.page-flow #beadlet-section .bj-stage-num { width: 32px !important; height: 32px !important; font-size: 0.88rem !important; }
/* ════════════════════════════════════════════════════════════════════
COA — scroll visibility fix. Standalone scroll section visible on desktop.
════════════════════════════════════════════════════════════════════ */
.page-flow > #coa-section.coa-section {
background: var(--beige) !important;
padding: 36px 0 !important;
display: block !important;
}
/* ── WHY-SECTION INTERNAL: text ABOVE pain image, pain full-bleed, cycle large RIGHT. */
#why-section.why-clinical { padding: 0 !important; }
#why-section.why-imgstack .container {
max-width: none !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
grid-template-areas:
"intro cycle"
"pain cycle" !important;
grid-template-rows: auto 1fr !important;
gap: 0 !important;
align-items: stretch !important;
text-align: left !important;
}
#why-section .why-intro {
grid-area: intro !important;
padding: 36px 24px 16px 40px !important;
margin: 0 !important;
max-width: none !important;
text-align: left !important;
}
#why-section .why-intro .why-eyebrow { text-align: left !important; font-size: 0.7rem !important; }
#why-section .why-intro .why-h { text-align: left !important; font-size: 2rem !important; line-height: 1.12 !important; margin: 4px 0 12px !important; }
#why-section .why-intro .why-deck { text-align: left !important; font-size: 0.95rem !important; line-height: 1.55 !important; max-width: 540px !important; margin: 0 !important; }
/* Pain image: BE the section. Full bleed, no border-radius, no margin, fills bottom-left area. */
#why-section .why-img--bleed {
grid-area: pain !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
border-radius: 0 !important;
object-fit: cover !important;
aspect-ratio: auto !important;
-webkit-mask-image: none !important;
mask-image: none !important;
min-height: 320px !important;
}
/* Cycle infographic: large on right, full column height. */
#why-section .why-imgstack-wrap {
grid-area: cycle !important;
align-self: center !important;
padding: 24px 40px 24px 24px !important;
gap: 16px !important;
margin: 0 !important;
}
#why-section .why-img--cycle {
max-width: 100% !important;
width: 100% !important;
max-height: 600px !important;
border-radius: 12px !important;
object-fit: contain !important;
}
/* ── PAIR 1: absorb (LEFT) + outcome (RIGHT) — side-by-side row. */
.absorb-outcome-wrap { display: contents !important; } /* unwrap on desktop */
#absorb-section.absorb-section {
background: var(--beige-light);
padding: 36px 32px 36px 40px !important;
margin: 0 !important;
}
#absorb-section .absorb-container {
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
#absorb-section .absorb-intro { max-width: none !important; text-align: left !important; margin-bottom: 18px !important; }
#absorb-section .absorb-intro .absorb-eyebrow { text-align: left !important; font-size: 0.7rem !important; }
#absorb-section .absorb-intro .absorb-h { text-align: left !important; font-size: 1.8rem !important; line-height: 1.15 !important; margin: 4px 0 10px !important; }
#absorb-section .absorb-intro .absorb-deck { text-align: left !important; font-size: 0.92rem !important; line-height: 1.5 !important; max-width: 520px !important; }
#absorb-section .absorb-compare { max-width: 520px !important; margin: 16px 0 0 !important; gap: 14px !important; }
#absorb-section .absorb-pill { max-width: none !important; min-height: 50px !important; font-size: 0.62rem !important; }
#absorb-section .absorb-video { max-width: 200px !important; }
#absorb-section .absorb-caption { font-size: 0.82rem !important; max-width: 180px !important; }
#outcome-section.outcome-section {
background: #12291d;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
}
#outcome-section .outcome-container {
max-width: none !important;
padding: 24px !important;
margin: 0 !important;
}
#outcome-section .outcome-img {
max-width: 100% !important;
max-height: 560px !important;
object-fit: contain !important;
border-radius: 12px !important;
margin: 0 auto !important;
}
/* ── PAIR 2: honest (LEFT, comparison table) + how (RIGHT, take it steps) — side-by-side. */
#honest-section.honest-section {
padding: 36px 32px 36px 40px !important;
background: var(--beige);
margin: 0 !important;
}
#honest-section .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
#honest-section .honest-intro { text-align: left !important; max-width: 520px !important; margin-bottom: 18px !important; }
#honest-section .honest-intro h2 { font-size: 1.8rem !important; line-height: 1.15 !important; margin: 4px 0 10px !important; text-align: left !important; }
#honest-section .honest-intro p { font-size: 0.92rem !important; line-height: 1.5 !important; text-align: left !important; max-width: 480px !important; }
#honest-section .comp-image-wrap { max-width: 520px !important; margin: 0 !important; }
#honest-section .comp-image { width: 100% !important; height: auto !important; display: block !important; max-height: 400px !important; object-fit: contain !important; }
#how-section.how-section {
padding: 36px 40px 36px 32px !important;
background: var(--beige-light);
margin: 0 !important;
}
#how-section .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
#how-section .how-intro,
#how-section .how-text { text-align: left !important; margin-bottom: 18px !important; max-width: 520px !important; }
#how-section .how-intro h2,
#how-section .how-text h2 { font-size: 1.8rem !important; line-height: 1.15 !important; margin: 4px 0 10px !important; text-align: left !important; }
#how-section .how-intro .eyebrow,
#how-section .how-text .eyebrow { text-align: left !important; font-size: 0.7rem !important; }
#how-section .how-intro p,
#how-section .how-text p { font-size: 0.92rem !important; line-height: 1.5 !important; text-align: left !important; }
#how-section .steps-row {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
max-width: 520px !important;
margin: 0 !important;
}
#how-section .step-cell { padding: 10px !important; max-width: none !important; }
#how-section .step-img-wrap { max-height: 110px !important; aspect-ratio: 16/9 !important; }
#how-section .step-num { font-size: 0.9rem !important; }
#how-section .step-head { font-size: 0.94rem !important; }
#how-section .step-body { font-size: 0.82rem !important; line-height: 1.45 !important; }
/* ── COA — restore scroll-driven reveal animation.
2026-05-30 V46: DELETED V31 overrides that broke the scroll. Original CSS at
lines 2761+ (.coa-stage height clamp + overflow hidden) and JS at template
line 3160 (cert.style.transform = translate(-50%, Y px)) now work as designed.
Only minor text-size tweaks remain. */
.coa-section { padding: 28px 0 !important; background: var(--beige); }
#coa-section .coa-eyebrow { font-size: 0.72rem !important; letter-spacing: 0.22em !important; }
#coa-section .coa-headline { font-size: 1.9rem !important; line-height: 1.15 !important; }
#coa-section .coa-caption { font-size: 0.95rem !important; line-height: 1.55 !important; }
#coa-section .coa-hint { font-size: 0.85rem !important; padding: 10px 16px !important; }
}
/* ══════════════════════════════════════════════════
2026-06-04 v12: MOBILE-ONLY reorder of purchase column.
Pushes .first-pill + .no-list + .badge-row down to sit
just above the .buy-accordion (Ingredients dropdown).
Desktop layout (>768px) unchanged.
Mechanism: convert .purchase-col to flex column on mobile,
give the 3 target elements + buy-accordion explicit order values.
Defaults stay at order:0 and appear in source order.
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
.purchase-col { display: flex; flex-direction: column; }
/* 2026-06-04 v12: .no-list pulled OUT of the bottom-block reorder — stays in first fold (default order:0) right after p-summary. */
.purchase-col > .first-pill { order: 10; }
.purchase-col > .badge-row { order: 12; }
.purchase-col > .buy-accordion { order: 13; }
/* 2026-06-04 v12: post-reorder, .pdp-rating now sits directly above the "How long..." H3 — give it breathing room.
:first-of-type targets the first only, so the second one ("Subscribe and save...") stays tight. */
.purchase-col > h3.purchase-h:first-of-type { margin-top: 22px; }
}