/** Shopify CDN: Minification failed
Line 842:14 Unexpected "@media"
Line 991:14 Unexpected "@media"
**/
/* ===== styles.css ===== */
/* =========================================================
Optibio Supplements — Clinical Premium Theme
Navy depth · pale blue mist · gold accents · glass-morphism
========================================================= */
.cd-home-wrap {
/* ---- Primary palette (from brand spec) ---- */
--navy-deep: #0D1B2A;
--navy: #1E3A5F;
--navy-mid: #29628F;
--navy-soft: #4E73A0;
--purple-deep: #26235E;
--purple: #3D3A8C;
--purple-soft: #6B66C9;
--mist-1: #F8FCFE; /* hero gradient stop 1 */
--mist-2: #EBF5FB; /* hero gradient stop 2 */
--mist-3: #D6EAF8; /* hero gradient stop 3 */
--ice: #F2F7FB;
--white: #FFFFFF;
--gold: #C9A24A;
--gold-bright: #E6C475;
--gold-deep: #8E6F2B;
--gold-glow: rgba(201,162,74,0.35);
--ink: #0D1B2A;
--ink-soft: #2C3E55;
--ink-mute: #4F6175;
--line: #D3DEEA;
--line-soft: #E5ECF3;
/* ---- Gradients ---- */
--grad-hero: radial-gradient(ellipse at 50% 35%, #F8FCFE 0%, #EBF5FB 40%, #D6EAF8 100%);
--grad-navy: linear-gradient(135deg, #1E3A5F 0%, #0D1B2A 100%);
--grad-navy-r: linear-gradient(135deg, #29628F 0%, #1E3A5F 55%, #0D1B2A 100%);
--grad-purple: linear-gradient(135deg, #29628F 0%, #1E3A5F 60%, #0D1B2A 100%);
--grad-cta: linear-gradient(135deg, #2A5A87 0%, #1E3A5F 52%, #0D1B2A 100%);
--grad-gold: linear-gradient(135deg, #E6C475 0%, #C9A24A 40%, #8E6F2B 100%);
--grad-text-gold: linear-gradient(135deg, #E6C475 0%, #C9A24A 50%, #8E6F2B 100%);
/* ---- Type ---- */
--display: var(--optibio-font-display);
--sans: var(--optibio-font-body);
--serif: var(--optibio-font-serif);
--mono: ui-monospace, "SF Mono", Menlo, monospace;
/* ---- Rhythm ---- */
--gutter: clamp(20px, 4vw, 56px);
--max: 1340px;
--max-wide: 1560px;
--radius: 20px;
--radius-lg: 28px;
/* ---- Motion ---- */
--ease: cubic-bezier(.22,.61,.36,1);
}
.cd-home-wrap * { box-sizing: border-box; }
.cd-home-wrap, .cd-home-wrap {
margin: 0;
padding: 0;
background: var(--mist-2);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.cd-home-wrap {
overflow-x: hidden;
/* Ethereal sky-blue base — matches brand palette: sky-start #F8FCFE → sky-mid #EBF5FB → sky-end #D6EAF8 */
/* Subtle gold halo at top, soft navy depth at bottom — all within the light blue family */
background:
radial-gradient(ellipse 90% 40% at 50% 0%, rgba(214,234,248,0.55) 0%, transparent 50%),
radial-gradient(ellipse 60% 35% at 8% 30%, rgba(30,58,95,0.04) 0%, transparent 55%),
radial-gradient(ellipse 60% 35% at 92% 55%, rgba(30,58,95,0.035) 0%, transparent 55%),
radial-gradient(ellipse 50% 25% at 50% 100%, rgba(214,234,248,0.45) 0%, transparent 60%),
linear-gradient(180deg, #F8FCFE 0%, #EBF5FB 40%, #EFF7FC 75%, #F4F9FD 100%);
background-attachment: fixed;
}
.cd-home-wrap img, .cd-home-wrap video { max-width: 100%; display: block; }
.cd-home-wrap a { color: inherit; text-decoration: none; }
.cd-home-wrap button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* ----- Typography ----- */
.cd-home-wrap .font-display { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; }
.cd-home-wrap .font-serif { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }
.cd-home-wrap .font-mono { font-family: var(--mono); }
.cd-home-wrap .gold-text {
background: var(--grad-text-gold);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: var(--serif);
font-style: italic;
}
.cd-home-wrap .mono {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
}
.cd-home-wrap .eyebrow {
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--navy);
}
.cd-home-wrap .eyebrow-light { color: rgba(255,255,255,0.7); }
.cd-home-wrap h1, .cd-home-wrap h2, .cd-home-wrap h3, .cd-home-wrap h4, .cd-home-wrap h5 {
font-family: var(--display);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.02;
margin: 0;
color: var(--navy-deep);
}
.cd-home-wrap .h-display { font-size: clamp(54px, 8vw, 112px); line-height: 0.96; letter-spacing: -0.035em; }
.cd-home-wrap .h-1 { font-size: clamp(42px, 5.2vw, 80px); line-height: 0.98; }
.cd-home-wrap .h-2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.03; }
.cd-home-wrap .h-3 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; }
.cd-home-wrap .h-4 { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.25; font-weight: 600; }
.cd-home-wrap p { margin: 0 0 1em 0; }
.cd-home-wrap p.lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-soft); max-width: 56ch; }
/* ----- Layout ----- */
.cd-home-wrap .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.cd-home-wrap .wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); }
.cd-home-wrap .wrap-wide { max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--gutter); }
.cd-home-wrap section { padding: 5px 0; position: relative; }
.cd-home-wrap section.snug { padding: 5px 0; }
.cd-home-wrap .bg-mist { background: var(--grad-hero); }
.cd-home-wrap .bg-white { background: var(--white); }
.cd-home-wrap .bg-ice { background: var(--ice); }
/* ---- Ethereal section backgrounds — light sky-blue palette ---- */
/* All backgrounds use the brand sky palette: #F8FCFE / #EBF5FB / #D6EAF8 */
/* Transparent sections let the fixed body gradient show through — this is the default */
.cd-home-wrap section { background: transparent; }
/* Sky-white: crisp white with a barely-there sky-blue tint — label, KSM-66, why sections */
.cd-home-wrap .bg-pearl {
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(214,234,248,0.30) 0%, transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,252,255,0.88) 100%);
}
/* Sky-mist: soft sky-blue wash — benefit selector, FAQ sections */
.cd-home-wrap .bg-mist-blue {
background:
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(214,234,248,0.50) 0%, transparent 65%),
linear-gradient(180deg, rgba(235,245,251,0.95) 0%, rgba(244,249,253,0.90) 100%);
}
/* Sky-warm: sky-blue with a whisper of gold warmth — pricing section */
.cd-home-wrap .bg-warm-mist {
background:
radial-gradient(ellipse 60% 50% at 25% 40%, rgba(201,162,74,0.035) 0%, transparent 55%),
radial-gradient(ellipse 70% 55% at 75% 60%, rgba(214,234,248,0.45) 0%, transparent 60%),
linear-gradient(180deg, rgba(240,247,252,0.96) 0%, rgba(248,252,255,0.92) 100%);
}
/* Subtle section separator — sky-blue tint, no gold (matches light theme) */
.cd-home-wrap section + section::before {
content: '';
display: block;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(30,58,95,0.06) 25%, rgba(30,58,95,0.10) 50%, rgba(30,58,95,0.06) 75%, transparent 100%);
position: absolute;
top: 0; left: var(--gutter); right: var(--gutter);
pointer-events: none;
}
.cd-home-wrap .bg-navy { background: var(--grad-navy); color: rgba(255,255,255,0.92); }
.cd-home-wrap .bg-navy-r { background: var(--grad-navy-r); color: rgba(255,255,255,0.92); }
.cd-home-wrap .bg-purple { background: var(--grad-purple); color: rgba(255,255,255,0.92); }
.cd-home-wrap .bg-cta { background: var(--grad-cta); color: rgba(255,255,255,0.92); }
.cd-home-wrap .bg-navy h1, .cd-home-wrap .bg-navy h2, .cd-home-wrap .bg-navy h3, .cd-home-wrap .bg-navy h4, .cd-home-wrap .bg-navy-r h1, .cd-home-wrap .bg-navy-r h2, .cd-home-wrap .bg-navy-r h3, .cd-home-wrap .bg-navy-r h4, .cd-home-wrap .bg-purple h1, .cd-home-wrap .bg-purple h2, .cd-home-wrap .bg-purple h3, .cd-home-wrap .bg-purple h4, .cd-home-wrap .bg-cta h1, .cd-home-wrap .bg-cta h2, .cd-home-wrap .bg-cta h3, .cd-home-wrap .bg-cta h4 { color: #fff; }
.cd-home-wrap hr.rule { border: none; border-top: 1px solid var(--line); margin: 0; }
/* ----- Glass-morphism ----- */
.cd-home-wrap .glass {
background: linear-gradient(135deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.42) 100%);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border: 1px solid rgba(255,255,255,0.65);
border-radius: var(--radius);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
inset 0 0 0 1px rgba(255,255,255,0.2),
0 12px 32px -16px rgba(30,58,95,0.18),
0 2px 8px -2px rgba(30,58,95,0.06);
}
.cd-home-wrap .glass-strong {
background: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.62) 100%);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid rgba(255,255,255,0.7);
border-radius: var(--radius);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
0 24px 60px -32px rgba(30,58,95,0.28),
0 6px 18px -8px rgba(30,58,95,0.08);
}
.cd-home-wrap .glass-dark {
background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius);
color: rgba(255,255,255,0.92);
}
.cd-home-wrap .glass-gold {
background: linear-gradient(135deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.5) 100%);
border: 1.5px solid rgba(201,162,74,0.55);
border-radius: var(--radius);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
0 0 0 1px rgba(201,162,74,0.15),
0 24px 48px -24px rgba(201,162,74,0.4),
0 12px 24px -12px rgba(30,58,95,0.18);
}
/* ----- Trust badge card ----- */
.cd-home-wrap .trust-card {
display: flex; flex-direction: column; align-items: center;
gap: 12px;
padding: 28px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.cd-home-wrap .trust-card .icon {
width: 48px; height: 48px; display: grid; place-items: center;
color: var(--navy);
}
/* let descriptions wrap instead of clipping under overflow:hidden */
.cd-home-wrap .trust-card p { align-self: stretch; width: 100%; }
.cd-home-wrap .trust-card .label {
font-family: var(--display);
font-weight: 600;
font-size: 15px;
color: var(--navy-deep);
letter-spacing: -0.01em;
line-height: 1.2;
}
/* subtle gold halo */
.cd-home-wrap .trust-card::before {
content: "";
position: absolute; inset: -1px;
border-radius: inherit;
background:
radial-gradient(ellipse at 50% 0%, rgba(201,162,74,0.18) 0%, transparent 55%),
radial-gradient(ellipse at 50% 100%, rgba(201,162,74,0.10) 0%, transparent 50%);
pointer-events: none;
}
/* ----- Buttons ----- */
.cd-home-wrap .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 30px;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 999px;
transition: all 240ms var(--ease);
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
position: relative;
}
.cd-home-wrap .btn-lg { padding: 18px 36px; font-size: 15px; }
.cd-home-wrap .btn-sm { padding: 11px 22px; font-size: 13px; }
.cd-home-wrap .btn-block { width: 100%; display: flex; }
/* primary navy gradient CTA (purple retired) */
.cd-home-wrap .btn-cta {
background: var(--grad-cta);
color: #fff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
0 12px 24px -10px rgba(38,35,94,0.5),
0 4px 12px -4px rgba(13,27,42,0.3);
}
.cd-home-wrap .btn-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 16px 32px -10px rgba(38,35,94,0.6); }
.cd-home-wrap .btn-navy {
background: var(--grad-navy);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 20px -8px rgba(13,27,42,0.4);
}
.cd-home-wrap .btn-navy:hover { background: var(--grad-navy-r); transform: translateY(-1px); }
.cd-home-wrap .btn-gold {
background: var(--grad-gold);
color: var(--navy-deep);
font-weight: 700;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 12px 24px -10px rgba(142,111,43,0.45);
}
.cd-home-wrap .btn-gold:hover { transform: translateY(-1px); }
.cd-home-wrap .btn-outline {
background: transparent;
color: var(--navy-deep);
border: 1.5px solid var(--navy-deep);
}
.cd-home-wrap .btn-outline:hover { background: var(--navy-deep); color: #fff; }
.cd-home-wrap .btn-outline-light {
background: rgba(255,255,255,0.06);
color: #fff;
border: 1.5px solid rgba(255,255,255,0.45);
backdrop-filter: blur(8px);
}
.cd-home-wrap .btn-outline-light:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.8); }
.cd-home-wrap .btn-glass {
background: linear-gradient(135deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.55) 100%);
color: var(--navy-deep);
border: 1px solid rgba(255,255,255,0.8);
backdrop-filter: blur(12px);
box-shadow: 0 4px 12px -2px rgba(30,58,95,0.12);
}
.cd-home-wrap .btn-glass:hover { background: #fff; }
/* link with underline + arrow */
.cd-home-wrap .link-u {
display: inline-flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
}
.cd-home-wrap .link-u .arrow { transition: transform 240ms var(--ease); }
.cd-home-wrap .link-u:hover .arrow { transform: translateX(4px); }
/* ----- Tag / chip ----- */
.cd-home-wrap .chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
background: linear-gradient(135deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.5) 100%);
border: 1px solid rgba(255,255,255,0.8);
color: var(--navy-deep);
box-shadow: 0 2px 6px rgba(30,58,95,0.06);
}
.cd-home-wrap .chip-dark {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.22);
color: #fff;
}
.cd-home-wrap .chip-gold {
background: linear-gradient(135deg, rgba(230,196,117,0.25), rgba(201,162,74,0.15));
border: 1px solid rgba(201,162,74,0.55);
color: var(--gold-deep);
}
/* ----- Announcement bar ----- */
.cd-home-wrap .announce-bar {
background: var(--grad-navy);
color: rgba(255,255,255,0.92);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
padding: 11px var(--gutter);
}
.cd-home-wrap .announce-bar .track {
max-width: var(--max-wide);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.cd-home-wrap .announce-bar .item { display: inline-flex; align-items: center; gap: 8px; }
.cd-home-wrap .announce-rotator { justify-content: center; }
.cd-home-wrap .announce-rotator .item { display: none; }
.cd-home-wrap .announce-rotator .item.is-on { display: inline-flex; animation: announceFade 500ms var(--ease); }
@keyframes announceFade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.cd-home-wrap .announce-bar .item .gold { color: var(--gold-bright); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; }
.cd-home-wrap .announce-bar .item .bullet { color: var(--gold-bright); }
/* ----- Header ----- */
.cd-home-wrap .site-header {
position: sticky;
top: 0;
z-index: 60;
background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.7) 100%);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-bottom: 1px solid rgba(13,27,42,0.06);
}
.cd-home-wrap .site-header .nav {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
height: 76px;
padding: 0 var(--gutter);
max-width: var(--max-wide);
margin: 0 auto;
gap: 32px;
}
.cd-home-wrap .nav-links {
display: flex;
gap: 36px;
font-size: 15px;
font-weight: 500;
justify-content: center;
}
.cd-home-wrap .nav-links a {
padding: 6px 0;
position: relative;
color: var(--ink-soft);
transition: color 200ms var(--ease);
}
.cd-home-wrap .nav-links a::after {
content: "";
position: absolute; bottom: 0; left: 0; right: 0;
height: 1.5px;
background: var(--grad-gold);
transform: scaleX(0); transform-origin: left;
transition: transform 280ms var(--ease);
border-radius: 2px;
}
.cd-home-wrap .nav-links a:hover { color: var(--navy-deep); }
.cd-home-wrap .nav-links a:hover::after, .cd-home-wrap .nav-links a.is-active::after { transform: scaleX(1); }
.cd-home-wrap .nav-links a.is-active { color: var(--navy-deep); }
.cd-home-wrap .brand-mark {
display: inline-flex; align-items: center;
line-height: 1;
}
.cd-home-wrap .brand-logo {
height: 60px; width: auto; display: block;
}
.cd-home-wrap .site-footer .brand-logo { height: 64px; }
.cd-home-wrap .mobile-menu .head .brand-logo { height: 52px; }
.cd-home-wrap .brand-mark .opt {
font-family: var(--serif);
font-style: italic;
font-size: 30px;
background: var(--grad-text-gold);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.01em;
}
.cd-home-wrap .brand-mark .sup {
font-family: var(--display);
font-weight: 600;
font-size: 20px;
color: var(--navy-deep);
letter-spacing: -0.01em;
}
.cd-home-wrap .nav-actions { display: flex; gap: 4px; align-items: center; }
.cd-home-wrap .icon-btn {
width: 40px; height: 40px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-soft);
transition: all 200ms var(--ease);
position: relative;
}
.cd-home-wrap .icon-btn:hover { background: rgba(30,58,95,0.08); color: var(--navy-deep); }
.cd-home-wrap .cart-count {
position: absolute;
top: 2px; right: 2px;
background: var(--grad-gold);
color: var(--navy-deep);
font-size: 10px;
font-weight: 700;
min-width: 18px; height: 18px;
padding: 0 5px;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
}
.cd-home-wrap .mobile-toggle { display: none; }
/* ----- Footer ----- */
.cd-home-wrap .site-footer {
background: var(--grad-navy);
color: rgba(255,255,255,0.85);
padding: clamp(72px, 9vw, 112px) 0 32px;
position: relative;
overflow: hidden;
}
.cd-home-wrap .site-footer::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 15% 30%, rgba(201,162,74,0.08) 0%, transparent 50%),
radial-gradient(ellipse at 85% 80%, rgba(201,162,74,0.10) 0%, transparent 50%);
pointer-events: none;
}
.cd-home-wrap .site-footer .footer-grid {
display: grid;
grid-template-columns: 1.5fr repeat(5, 1fr);
gap: 32px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(255,255,255,0.15);
position: relative;
}
.cd-home-wrap .site-footer h5 {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
margin: 0 0 20px 0;
color: var(--gold-bright);
}
.cd-home-wrap .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cd-home-wrap .site-footer a { font-size: 14px; opacity: 0.85; transition: opacity 200ms, color 200ms; }
.cd-home-wrap .site-footer a:hover { opacity: 1; color: var(--gold-bright); }
.cd-home-wrap .site-footer .legal {
padding-top: 28px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
opacity: 0.6;
position: relative;
}
.cd-home-wrap .site-footer .disclaimer {
font-size: 12px;
opacity: 0.6;
max-width: 90ch;
margin: 28px 0 0;
line-height: 1.65;
position: relative;
}
.cd-home-wrap .newsletter { display: flex; gap: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 4px; }
.cd-home-wrap .newsletter input {
flex: 1;
background: transparent;
border: none;
color: #fff;
padding: 10px 16px;
font: inherit;
font-size: 14px;
outline: none;
}
.cd-home-wrap .newsletter input::placeholder { color: rgba(255,255,255,0.5); }
.cd-home-wrap .newsletter button {
background: var(--grad-gold);
color: var(--navy-deep);
padding: 10px 20px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
}
/* ----- Cards ----- */
.cd-home-wrap .card {
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
padding: 28px;
}
/* ----- Image slot styling ----- */
.cd-home-wrap image-slot {
background: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(214,234,248,0.85));
border: 1px solid rgba(255,255,255,0.7);
border-radius: 16px;
--placeholder-color: var(--ink-mute);
display: block;
height: auto;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 24px -12px rgba(30,58,95,0.18);
}
/* ----- Cart drawer ----- */
.cd-home-wrap .cart-scrim {
position: fixed; inset: 0;
background: rgba(13,27,42,0.55);
opacity: 0; pointer-events: none;
transition: opacity 320ms var(--ease);
z-index: 200;
backdrop-filter: blur(4px);
}
.cd-home-wrap .cart-scrim.open { opacity: 1; pointer-events: auto; }
.cd-home-wrap .cart-drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: min(460px, 100%);
background: var(--mist-1);
z-index: 201;
transform: translateX(100%);
transition: transform 380ms var(--ease);
display: flex; flex-direction: column;
box-shadow: -20px 0 60px rgba(13,27,42,0.2);
}
.cd-home-wrap .cart-drawer.open { transform: translateX(0); }
.cd-home-wrap .cart-drawer .head {
padding: 24px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--line-soft);
}
.cd-home-wrap .cart-drawer .head h3 { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--navy-deep); }
.cd-home-wrap .cart-drawer .body { flex: 1; overflow-y: auto; padding: 24px; }
.cd-home-wrap .cart-drawer .foot {
border-top: 1px solid var(--line-soft);
padding: 20px 24px 24px;
background: rgba(255,255,255,0.6);
backdrop-filter: blur(8px);
}
.cd-home-wrap .cart-line {
display: grid;
grid-template-columns: 72px 1fr auto;
gap: 16px;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid var(--line-soft);
}
.cd-home-wrap .cart-line .thumb { width: 72px; height: 88px; background: var(--mist-3); border-radius: 8px; }
.cd-home-wrap .cart-line .title { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--navy-deep); }
.cd-home-wrap .cart-line .meta { font-size: 12px; color: var(--ink-mute); margin-top: 4px; }
.cd-home-wrap .cart-line .qty { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; }
.cd-home-wrap .cart-line .qty button { width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.cd-home-wrap .qty-line { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 14px; }
/* ----- Mobile menu drawer ----- */
.cd-home-wrap .mobile-menu {
position: fixed; inset: 0;
background: var(--grad-navy);
color: #fff;
z-index: 199;
transform: translateY(-100%);
transition: transform 380ms var(--ease);
display: flex; flex-direction: column;
overflow: hidden;
}
.cd-home-wrap .mobile-menu.open { transform: translateY(0); }
.cd-home-wrap .mobile-menu .head { display: flex; justify-content: space-between; padding: 18px var(--gutter); border-bottom: 1px solid rgba(255,255,255,0.15); align-items: center; }
.cd-home-wrap .mobile-menu .head .brand-mark .sup { color: #fff; }
.cd-home-wrap .mobile-menu nav {
padding: 32px var(--gutter);
display: grid;
gap: 4px;
}
.cd-home-wrap .mobile-menu nav a {
font-family: var(--display);
font-weight: 700;
font-size: 36px;
letter-spacing: -0.025em;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.12);
color: #fff;
}
.cd-home-wrap .mobile-menu .icon-btn { color: #fff; }
/* ----- Reveal ----- */
.cd-home-wrap .reveal { opacity: 1; transform: none; }
.cd-home-wrap html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.cd-home-wrap html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.cd-home-wrap html.js .reveal { opacity: 1; transform: none; transition: none; }
}
/* ----- Decorative botanical & molecular SVGs ----- */
.cd-home-wrap .deco { position: absolute; pointer-events: none; user-select: none; opacity: 0.55; }
.cd-home-wrap .deco-leaf-l { top: 8%; left: -40px; width: 220px; opacity: 0.42; }
.cd-home-wrap .deco-leaf-r { bottom: 10%; right: -30px; width: 240px; opacity: 0.4; transform: scaleX(-1); }
.cd-home-wrap .deco-mol-tr { top: 8%; right: 4%; width: 220px; opacity: 0.5; }
.cd-home-wrap .deco-mol-bl { bottom: 6%; left: 4%; width: 180px; opacity: 0.45; }
/* ----- Stars ----- */
.cd-home-wrap .stars { display: inline-flex; gap: 2px; color: var(--gold); font-size: 14px; letter-spacing: 1px; }
.cd-home-wrap .stars::before { content: "★★★★★"; }
/* ----- Stat block ----- */
.cd-home-wrap .stat {
padding: 18px 22px;
text-align: center;
min-width: 110px;
}
.cd-home-wrap .stat .num { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); color: var(--navy-deep); letter-spacing: -0.025em; line-height: 1; }
.cd-home-wrap .stat .lbl { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-top: 8px; font-weight: 600; }
/* ----- Scroll utility ----- */
.cd-home-wrap .scroll-x {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
padding-bottom: 8px;
}
.cd-home-wrap .scroll-x::-webkit-scrollbar { display: none; }
.cd-home-wrap .scroll-x > * { scroll-snap-align: start; flex: 0 0 auto; }
/* ----- Hero ambient video background ----- */
.cd-home-wrap .hero-section { isolation: isolate; }
.cd-home-wrap .hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 72% 50%;
z-index: 0;
pointer-events: none;
filter: brightness(1.05) saturate(1.02) contrast(0.98);
}
.cd-home-wrap .hero-video-wash {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(100deg,
rgba(238,241,250,0.97) 0%,
rgba(235,240,250,0.94) 26%,
rgba(236,243,251,0.82) 46%,
rgba(231,240,250,0.64) 66%,
rgba(226,236,248,0.56) 100%),
radial-gradient(ellipse 120% 100% at 50% 40%,
rgba(244,246,251,0.36) 0%,
rgba(234,240,250,0.14) 45%,
rgba(220,230,246,0.42) 100%);
}
@media (max-width: 860px) {
.cd-home-wrap .hero-video { object-position: 72% 40%; }
.cd-home-wrap .hero-video-wash {
background:
linear-gradient(180deg,
rgba(238,241,250,0.94) 0%,
rgba(235,240,250,0.88) 46%,
rgba(224,234,247,0.74) 100%);
}
.cd-home-wrap .hero-grid { grid-template-columns: 1fr !important; }
.cd-home-wrap .hero-right-spacer { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.cd-home-wrap .hero-video { display: none; }
}
/* ----- Hero glow circle (behind product) ----- */
.cd-home-wrap .product-stage {
position: relative;
display: grid;
place-items: center;
}
.cd-home-wrap .product-stage::before {
content: "";
position: absolute;
inset: 6% 12%;
border-radius: 999px;
background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.95) 0%, rgba(214,234,248,0.7) 35%, transparent 70%);
filter: blur(20px);
z-index: 0;
}
.cd-home-wrap .product-stage::after {
content: "";
position: absolute;
inset: 12% 22%;
border-radius: 999px;
border: 1.5px solid rgba(201,162,74,0.4);
z-index: 1;
background: radial-gradient(circle, transparent 60%, rgba(255,255,255,0.4) 100%);
}
.cd-home-wrap .product-stage > * { position: relative; z-index: 2; }
/* ----- Process step ----- */
.cd-home-wrap .process-step {
text-align: center;
position: relative;
}
.cd-home-wrap .process-step .num-circle {
width: 56px; height: 56px;
margin: 0 auto 18px;
border-radius: 999px;
display: grid; place-items: center;
background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
border: 1.5px solid rgba(201,162,74,0.4);
color: var(--navy-deep);
font-family: var(--display);
font-weight: 700;
font-size: 22px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 8px 20px -10px rgba(30,58,95,0.2);
}
/* ----- FAQ ----- */
.cd-home-wrap .faq-item {
background: rgba(255,255,255,0.7);
border: 1px solid rgba(255,255,255,0.8);
border-radius: 14px;
padding: 20px 24px;
margin-bottom: 12px;
box-shadow: 0 4px 12px -4px rgba(30,58,95,0.06);
}
.cd-home-wrap .faq-item summary {
list-style: none;
font-family: var(--display);
font-weight: 600;
font-size: 17px;
color: var(--navy-deep);
cursor: pointer;
display: flex; justify-content: space-between; align-items: center;
gap: 16px;
}
.cd-home-wrap .faq-item summary::-webkit-details-marker { display: none; }
.cd-home-wrap .faq-item summary::after {
content: "";
width: 24px; height: 24px;
border-radius: 999px;
background: var(--navy-deep);
color: #fff;
display: grid; place-items: center;
font-size: 12px;
font-weight: 400;
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-repeat: no-repeat;
transition: transform 280ms var(--ease);
}
.cd-home-wrap .faq-item[open] summary::after { transform: rotate(180deg); }
.cd-home-wrap .faq-body { padding-top: 14px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }
/* ----- Pricing card (bundle) ----- */
.cd-home-wrap .bundle {
position: relative;
padding: 32px 28px 28px;
display: flex; flex-direction: column;
min-height: 460px;
}
.cd-home-wrap .bundle .ribbon {
position: absolute;
top: -14px; left: 50%; transform: translateX(-50%);
padding: 7px 18px;
border-radius: 999px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
}
.cd-home-wrap .bundle.featured { box-shadow: 0 0 0 1.5px rgba(201,162,74,0.6), 0 32px 64px -32px rgba(201,162,74,0.5), 0 12px 32px -12px rgba(30,58,95,0.2); }
/* ----- Marquee under announcement (mobile) ----- */
.cd-home-wrap @media (max-width: 900px) {
.announce-bar .track { justify-content: center; }
.site-header .nav { grid-template-columns: auto 1fr auto; height: 64px; gap: 16px; }
.nav-links { display: none; }
.brand-logo { height: 48px; }
.mobile-toggle { display: inline-flex; }
.site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.site-footer .brand-block { grid-column: 1 / -1; }
.h-display { font-size: clamp(46px, 12vw, 80px); }
}
@media (max-width: 540px) {
.cd-home-wrap .site-footer .footer-grid { grid-template-columns: 1fr; }
}
/* ----- Utility ----- */
.cd-home-wrap .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.cd-home-wrap .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); }
.cd-home-wrap .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 24px); }
.cd-home-wrap .grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 900px) {
.cd-home-wrap .grid-2, .cd-home-wrap .grid-3, .cd-home-wrap .grid-4 { grid-template-columns: 1fr !important; }
.cd-home-wrap .grid-6 { grid-template-columns: repeat(3, 1fr) !important; }
}
/* ----- Sticky mobile add-to-cart ----- */
.cd-home-wrap .sticky-buy {
position: fixed; bottom: 0; left: 0; right: 0;
z-index: 90;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(16px);
border-top: 1px solid var(--line);
padding: 12px var(--gutter);
display: none;
align-items: center;
gap: 12px;
box-shadow: 0 -8px 24px -12px rgba(30,58,95,0.15);
}
@media (max-width: 900px) {
.cd-home-wrap .sticky-buy.on { display: flex; }
}
/* ============================================================
ETHEREAL AMBIENT LAYER — global, applies to every section
============================================================ */
/* Breathing light field behind all content. Sits above the body's
base gradient (body bg) and below every section, so it glows
through translucent light sections and is covered by navy ones. */
.cd-home-wrap body::before {
content: "";
position: fixed;
inset: -22vh -14vw auto auto;
width: 80vw;
height: 82vh;
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse at center,
rgba(255,255,255,0.85) 0%,
rgba(255,255,255,0.4) 46%,
transparent 72%);
filter: blur(60px);
animation: ambientBreathe 16s var(--ease) infinite;
}
.cd-home-wrap body::after {
content: "";
position: fixed;
inset: auto auto -26vh -20vw;
width: 66vw;
height: 66vh;
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse at center,
rgba(150,196,232,0.32) 0%,
rgba(170,206,236,0.12) 48%,
transparent 74%);
filter: blur(60px);
animation: ambientDrift 20s var(--ease) infinite;
}
@keyframes ambientBreathe {
0%, 100% { transform: scale(1); opacity: 0.78; }
50% { transform: scale(1.09); opacity: 1; }
}
@keyframes ambientDrift {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(4vw, -3vh, 0); }
}
@media (prefers-reduced-motion: reduce) {
.cd-home-wrap body::before, .cd-home-wrap body::after { animation: none; }
}
/* ----- Scroll progress bar (injected once by app.js) ----- */
.cd-home-wrap .scroll-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 0;
z-index: 1000;
background: linear-gradient(90deg, var(--navy-deep), var(--navy-mid), var(--gold));
box-shadow: 0 0 16px rgba(201,162,74,0.45);
transition: width 90ms linear;
pointer-events: none;
}
/* =========================================================
Accessibility — WCAG 2.1 Level AA (applies site-wide)
========================================================= */
.cd-home-wrap :focus-visible {
outline: 3px solid #1E3A5F;
outline-offset: 2px;
border-radius: 6px;
}
/* gold ring on dark surfaces for 3:1 non-text contrast */
.cd-home-wrap .bg-navy :focus-visible, .cd-home-wrap .bg-navy-r :focus-visible, .cd-home-wrap .bg-cta :focus-visible, .cd-home-wrap .site-footer :focus-visible, .cd-home-wrap .sub-callout :focus-visible, .cd-home-wrap .vip-band :focus-visible, .cd-home-wrap .email-band :focus-visible, .cd-home-wrap .cart-drawer :focus-visible, .cd-home-wrap .mobile-menu :focus-visible {
outline-color: #E6C475;
}
/* skip link */
.cd-home-wrap .skip-link {
position: fixed; top: 10px; left: 10px; z-index: 10000;
background: #0D1B2A; color: #fff;
padding: 12px 20px; border-radius: 10px;
font-family: var(--sans); font-size: 14px; font-weight: 600;
box-shadow: 0 12px 30px -8px rgba(13,27,42,0.55);
transform: translateY(-160%);
transition: transform 180ms var(--ease);
}
.cd-home-wrap .skip-link:focus { transform: translateY(0); outline: 3px solid #E6C475; outline-offset: 2px; }
.cd-home-wrap #main-content:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
.cd-home-wrap .announce-bar .track, .cd-home-wrap .opt-ticker .track { animation: none !important; }
.cd-home-wrap { scroll-behavior: auto !important; }
}
/* screen-reader-only utility (visible to assistive tech, hidden visually) */
.cd-home-wrap .sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Footer 6-column reflow — avoid clipping the last column on laptops */
.cd-home-wrap @media (max-width: 1150px) and (min-width: 901px) {
.site-footer .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
.site-footer .brand-block { grid-column: 1 / -1; }
}
/* ===== styles-home.css ===== */
/* =========================================================
Optibio — Homepage funnel (Calm, clinically.)
Frozen hero + customer-journey sections.
Builds ON TOP of styles.css (tokens + utilities).
========================================================= */
/* ============ TRUST TICKER (navy, auto-scroll) ============ */
.cd-home-wrap .opt-ticker {
background: var(--grad-navy);
color: rgba(255,255,255,0.9);
overflow: hidden;
position: relative;
border-bottom: 1px solid rgba(201,162,74,0.18);
}
.cd-home-wrap .opt-ticker .track {
display: flex;
width: max-content;
animation: tickerScroll 46s linear infinite;
}
.cd-home-wrap .opt-ticker:hover .track { animation-play-state: paused; }
.cd-home-wrap .opt-ticker .ti {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 11px 0;
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.04em;
white-space: nowrap;
}
.cd-home-wrap .opt-ticker .ti::after {
content: "✦";
color: var(--gold-bright);
font-size: 10px;
margin: 0 30px;
}
@keyframes tickerScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.cd-home-wrap .opt-ticker .track { animation: none; }
}
/* ============ CUSTOM HEADER ============ */
.cd-home-wrap .opt-header {
position: sticky;
top: 0;
z-index: 60;
background: linear-gradient(180deg, rgba(248,252,254,0.9) 0%, rgba(248,252,254,0.74) 100%);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-bottom: 1px solid rgba(13,27,42,0.06);
}
.cd-home-wrap .opt-header .inner {
max-width: var(--max-wide);
margin: 0 auto;
padding: 0 var(--gutter);
height: 72px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
}
.cd-home-wrap .opt-header .left { display: flex; align-items: center; }
.cd-home-wrap .opt-header .right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cd-home-wrap .wordmark {
font-family: var(--display);
font-weight: 700;
font-size: 27px;
letter-spacing: -0.03em;
color: var(--navy-deep);
display: inline-flex;
align-items: flex-start;
line-height: 1;
}
.cd-home-wrap .wordmark .reg {
width: 6px; height: 6px;
border-radius: 999px;
background: var(--gold);
margin: 4px 0 0 3px;
}
.cd-home-wrap .opt-nav {
display: flex;
gap: 34px;
font-size: 15px;
font-weight: 500;
}
.cd-home-wrap .opt-nav a {
color: var(--ink-soft);
padding: 6px 0;
position: relative;
transition: color 200ms var(--ease);
}
.cd-home-wrap .opt-nav a::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -2px;
height: 2px;
border-radius: 2px;
background: var(--grad-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 280ms var(--ease);
}
.cd-home-wrap .opt-nav a:hover { color: var(--navy-deep); }
.cd-home-wrap .opt-nav a:hover::after, .cd-home-wrap .opt-nav a.active::after { transform: scaleX(1); }
.cd-home-wrap .opt-nav a.active { color: var(--navy-deep); font-weight: 600; }
.cd-home-wrap .cart-btn {
width: 46px; height: 46px;
border-radius: 13px;
border: 1px solid rgba(13,27,42,0.12);
background: rgba(255,255,255,0.7);
display: inline-flex; align-items: center; justify-content: center;
color: var(--navy-deep);
position: relative;
transition: all 200ms var(--ease);
}
.cd-home-wrap .cart-btn:hover { background: #fff; border-color: rgba(13,27,42,0.22); transform: translateY(-1px); }
.cd-home-wrap .opt-menu-btn { display: none; }
@media (max-width: 900px) {
.cd-home-wrap .opt-nav { display: none; }
.cd-home-wrap .opt-header .inner { grid-template-columns: 1fr auto; }
.cd-home-wrap .opt-header .center-nav { display: none; }
.cd-home-wrap .opt-menu-btn { display: inline-flex; }
}
/* ============ HERO — "Calm, clinically." (FROZEN) ============ */
.cd-home-wrap .hero2 {
position: relative;
padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 6vw, 84px);
background:
radial-gradient(ellipse 90% 70% at 22% 30%, rgba(248,250,247,0.9) 0%, transparent 60%),
radial-gradient(ellipse 80% 90% at 88% 50%, rgba(214,234,248,0.6) 0%, transparent 60%),
linear-gradient(115deg, #F4F1E9 0%, #EFF3F4 42%, #DCE9F3 100%);
overflow: hidden;
}
.cd-home-wrap .hero2 .inner {
max-width: var(--max-wide);
margin: 0 auto;
padding: 0 var(--gutter);
display: grid;
grid-template-columns: 1.02fr 0.98fr;
gap: clamp(32px, 4vw, 64px);
align-items: center;
}
.cd-home-wrap .hero2-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.cd-home-wrap .hero2-chip {
display: inline-flex; align-items: center; gap: 9px;
padding: 9px 16px;
border-radius: 999px;
background: rgba(255,255,255,0.78);
border: 1px solid rgba(255,255,255,0.9);
box-shadow: 0 6px 18px -10px rgba(30,58,95,0.22), inset 0 1px 0 rgba(255,255,255,0.8);
font-size: 13px;
font-weight: 600;
color: var(--navy-deep);
letter-spacing: 0.005em;
}
.cd-home-wrap .hero2-chip .stars { font-size: 12px; }
.cd-home-wrap .hero2-chip svg { color: var(--gold-deep); }
.cd-home-wrap .hero2-h1 {
font-family: var(--display);
font-weight: 800;
font-size: clamp(64px, 9.5vw, 132px);
line-height: 0.9;
letter-spacing: -0.045em;
margin: 6px 0 26px;
color: var(--navy-deep);
}
.cd-home-wrap .hero2-h1 .gold {
display: block;
background: var(--grad-text-gold);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.cd-home-wrap .hero2-lede {
font-size: clamp(17px, 1.35vw, 20px);
line-height: 1.58;
color: var(--ink-soft);
max-width: 44ch;
margin: 0 0 32px;
}
.cd-home-wrap .hero2-price {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
margin-bottom: 26px;
}
.cd-home-wrap .hero2-price .amt {
font-family: var(--display);
font-weight: 800;
font-size: clamp(38px, 4vw, 54px);
letter-spacing: -0.03em;
color: var(--navy-deep);
line-height: 1;
}
.cd-home-wrap .hero2-price .sub { font-size: 14.5px; color: var(--ink-mute); }
.cd-home-wrap .hero2-price .sub b { color: var(--gold-deep); font-weight: 700; }
.cd-home-wrap .hero2-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cd-home-wrap .hero2 .btn-cta {
background: var(--grad-navy);
box-shadow: 0 16px 32px -14px rgba(13,27,42,0.55), 0 3px 8px rgba(13,27,42,0.2);
}
.cd-home-wrap .hero2 .btn-cta:hover { background: var(--grad-navy-r); }
/* ---- Bottle stage ---- */
.cd-home-wrap .hero2-stage-wrap { position: relative; }
.cd-home-wrap .stage {
position: relative;
border-radius: 30px;
padding: 46px 40px 40px;
background:
linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.2)),
linear-gradient(105deg, #F4EFE3 0%, #FBF8F0 48%, #EFEAdc 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 40px 90px -40px rgba(30,58,95,0.4),
0 12px 30px -18px rgba(30,58,95,0.18);
border: 1px solid rgba(201,162,74,0.28);
display: grid;
place-items: center;
min-height: 520px;
}
.cd-home-wrap .stage::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.5) 46%, transparent 60%);
pointer-events: none;
opacity: 0.7;
}
/* ---- CSS specimen bottle ---- */
.cd-home-wrap .spec {
position: relative;
width: clamp(180px, 22vw, 250px);
z-index: 1;
}
.cd-home-wrap .spec-cap {
width: 56%;
height: 64px;
margin: 0 auto;
border-radius: 10px 10px 6px 6px;
background: linear-gradient(180deg, #2a2724 0%, #14110f 55%, #050403 100%);
box-shadow: inset 0 2px 3px rgba(255,255,255,0.14), inset 0 -4px 8px rgba(0,0,0,0.5);
position: relative;
z-index: 2;
}
.cd-home-wrap .spec-neck {
width: 60%;
height: 14px;
margin: -2px auto 0;
background: linear-gradient(180deg, #6b3f1f, #4d2c14);
border-radius: 0 0 4px 4px;
}
.cd-home-wrap .spec-body {
position: relative;
border-radius: 16px 16px 18px 18px;
padding: 30px 16px 24px;
background:
linear-gradient(102deg, #46260f 0%, #6b3f1d 30%, #95662f 56%, #5b3416 84%, #43250f 100%);
box-shadow:
inset 0 2px 6px rgba(255,255,255,0.12),
inset 0 -10px 24px rgba(0,0,0,0.4),
0 24px 40px -22px rgba(40,22,8,0.6);
overflow: hidden;
}
.cd-home-wrap .spec-body::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 14%;
width: 16%;
background: linear-gradient(90deg, transparent, rgba(255,235,200,0.32), transparent);
pointer-events: none;
}
.cd-home-wrap .spec-label {
position: relative;
z-index: 1;
background: linear-gradient(180deg, #F6F1E2 0%, #EFE8D4 100%);
border-radius: 6px;
padding: 22px 14px 20px;
text-align: center;
box-shadow: 0 6px 14px -8px rgba(0,0,0,0.35);
}
.cd-home-wrap .spec-label .brand {
font-family: var(--serif);
font-size: clamp(26px, 3vw, 34px);
color: #1c2a36;
line-height: 1;
letter-spacing: -0.01em;
}
.cd-home-wrap .spec-label .rule {
width: 64%;
height: 1px;
background: #4a3c24;
margin: 12px auto;
opacity: 0.55;
}
.cd-home-wrap .spec-label .prod {
font-family: var(--serif);
font-size: clamp(17px, 1.8vw, 21px);
color: #243440;
line-height: 1.18;
}
.cd-home-wrap .spec-label .meta {
margin-top: 16px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.16em;
color: rgba(74,60,36,0.62);
line-height: 1.9;
}
/* ---- Floating chips ---- */
.cd-home-wrap .fchip {
position: absolute;
z-index: 3;
border-radius: 14px;
padding: 12px 16px;
box-shadow: 0 18px 40px -18px rgba(13,27,42,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
animation: chipFloat 6s var(--ease) infinite;
}
.cd-home-wrap .fchip .big { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: -0.02em; }
.cd-home-wrap .fchip .small { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 5px; }
.cd-home-wrap .fchip.navy { background: var(--grad-navy); color: #fff; top: 12%; left: -26px; }
.cd-home-wrap .fchip.navy .small { color: rgba(214,228,242,0.72); }
.cd-home-wrap .fchip.gold {
background: linear-gradient(150deg, #E8DFC4 0%, #C9A24A 100%);
color: var(--navy-deep);
top: 44%; right: -24px;
animation-delay: -2s;
}
.cd-home-wrap .fchip.gold .small { color: rgba(13,27,42,0.6); }
.cd-home-wrap .fchip.white {
background: rgba(255,255,255,0.94);
color: var(--navy-deep);
backdrop-filter: blur(8px);
bottom: 8%; left: -18px;
animation-delay: -4s;
}
.cd-home-wrap .fchip.white .small { color: var(--ink-mute); }
.cd-home-wrap .fpill {
position: absolute;
z-index: 3;
background: rgba(255,255,255,0.94);
backdrop-filter: blur(8px);
border-radius: 999px;
padding: 9px 16px;
font-size: 12.5px;
font-weight: 600;
color: var(--navy-deep);
box-shadow: 0 14px 32px -16px rgba(13,27,42,0.45);
white-space: nowrap;
animation: chipFloat 6.6s var(--ease) infinite;
}
.cd-home-wrap .fpill.caps { bottom: -14px; left: 22%; animation-delay: -1.4s; }
.cd-home-wrap .fpill.lot { bottom: -14px; right: 6%; animation-delay: -3.2s; color: var(--ink-soft); }
@keyframes chipFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
.cd-home-wrap .fchip, .cd-home-wrap .fpill { animation: none; }
}
@media (max-width: 900px) {
.cd-home-wrap .hero2 .inner { grid-template-columns: 1fr; }
.cd-home-wrap .hero2-stage-wrap { order: -1; max-width: 420px; margin: 0 auto; }
.cd-home-wrap .stage { min-height: 440px; }
.cd-home-wrap .fchip.navy { left: 4px; }
.cd-home-wrap .fchip.gold { right: 4px; }
.cd-home-wrap .fchip.white { left: 4px; }
}
/* ============ BENEFITS — Why KSM-66 ============ */
.cd-home-wrap .benefit-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 34px 30px;
}
.cd-home-wrap .benefit-card .idot2 {
width: 52px; height: 52px;
border-radius: 15px;
display: grid; place-items: center;
color: var(--navy);
background: radial-gradient(circle at 50% 35%, rgba(201,162,74,0.2), rgba(201,162,74,0.05));
border: 1px solid rgba(201,162,74,0.4);
}
.cd-home-wrap .benefit-card h3 { font-size: 19px; line-height: 1.22; margin: 4px 0 0; color: var(--navy-deep); }
.cd-home-wrap .benefit-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.62; margin: 0; }
.cd-home-wrap .benefit-card .micro {
margin-top: 8px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold-deep);
}
/* ============ FOUNDER VIP capture band ============ */
.cd-home-wrap .vip-band {
background: var(--grad-navy);
border-radius: 30px;
padding: clamp(34px, 5vw, 62px);
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(32px, 4vw, 56px);
position: relative;
overflow: hidden;
}
.cd-home-wrap .vip-band::after {
content: "";
position: absolute; inset: auto -140px -160px auto;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(201,162,74,0.22), transparent 70%);
pointer-events: none;
}
.cd-home-wrap .vip-band .eyebrow { color: var(--gold-bright); }
.cd-home-wrap .vip-band h2 { color: #fff; position: relative; z-index: 1; }
.cd-home-wrap .vip-lede { color: rgba(220,232,244,0.82); font-size: 17px; line-height: 1.6; position: relative; z-index: 1; }
.cd-home-wrap .vip-form { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; margin-top: 22px; }
.cd-home-wrap .vip-form .fauxinput {
flex: 1; min-width: 220px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.22);
color: rgba(255,255,255,0.7);
border-radius: 12px;
padding: 15px 16px;
font-size: 14px;
}
.cd-home-wrap .vip-panel {
position: relative; z-index: 1;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 20px;
padding: 28px;
}
.cd-home-wrap .vip-panel .pl {
font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--gold-bright); font-weight: 700; margin-bottom: 18px;
}
.cd-home-wrap .vip-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.cd-home-wrap .vip-item:first-of-type { border-top: none; padding-top: 0; }
.cd-home-wrap .vip-item .vk { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(201,162,74,0.16); border: 1px solid rgba(201,162,74,0.4); color: var(--gold-bright); font-size: 13px; font-weight: 700; }
.cd-home-wrap .vip-item strong { color: #fff; font-size: 15px; display: block; margin-bottom: 3px; }
.cd-home-wrap .vip-item span { color: rgba(214,228,242,0.66); font-size: 13px; line-height: 1.55; }
@media (max-width: 860px) {
.cd-home-wrap .vip-band { grid-template-columns: 1fr; }
}
/* ============ EVIDENCE PATH ============ */
.cd-home-wrap .proof-card { padding: 32px 30px; display: flex; flex-direction: column; gap: 12px; }
.cd-home-wrap .proof-card .lbl { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); }
.cd-home-wrap .proof-card h3 { font-size: 23px; color: var(--navy-deep); margin: 0; }
.cd-home-wrap .proof-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.62; margin: 0; }
.cd-home-wrap .proof-card .link-u { margin-top: auto; color: var(--navy); }
/* ============ THE JOURNEY (seed-to-shelf stepper) ============ */
.cd-home-wrap .journey { position: relative; }
.cd-home-wrap .journey-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
position: relative;
}
.cd-home-wrap .journey-grid::before {
content: "";
position: absolute;
top: 27px; left: 8%; right: 8%;
height: 2px;
background: linear-gradient(90deg, rgba(201,162,74,0.15), rgba(201,162,74,0.55), rgba(201,162,74,0.15));
z-index: 0;
}
.cd-home-wrap .j-step { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.cd-home-wrap .j-num {
width: 54px; height: 54px; margin: 0 auto 18px;
border-radius: 999px;
display: grid; place-items: center;
font-family: var(--display); font-weight: 800; font-size: 19px;
color: var(--navy-deep);
background: linear-gradient(180deg, #fff, #EFF5FB);
border: 1.5px solid rgba(201,162,74,0.5);
box-shadow: 0 10px 22px -12px rgba(30,58,95,0.3), inset 0 1px 0 #fff;
}
.cd-home-wrap .j-step h3 { font-size: 16px; color: var(--navy-deep); margin: 0 0 8px; line-height: 1.25; }
.cd-home-wrap .j-step p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
@media (max-width: 900px) {
.cd-home-wrap .journey-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
.cd-home-wrap .journey-grid::before { display: none; }
}
@media (max-width: 560px) {
.cd-home-wrap .journey-grid { grid-template-columns: 1fr; }
}
/* ============ SHOP BY GOAL ============ */
.cd-home-wrap .goal2-card {
position: relative;
padding: 30px 28px;
display: flex; flex-direction: column; gap: 14px;
overflow: hidden;
transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.cd-home-wrap .goal2-card:hover { transform: translateY(-5px); }
.cd-home-wrap .goal2-card .gicon {
width: 54px; height: 54px; border-radius: 16px;
display: grid; place-items: center; color: var(--navy);
background: radial-gradient(circle at 50% 35%, rgba(201,162,74,0.2), rgba(201,162,74,0.05));
border: 1px solid rgba(201,162,74,0.4);
}
.cd-home-wrap .goal2-card .gtag {
position: absolute; top: 18px; right: 18px;
font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
padding: 5px 10px; border-radius: 999px;
background: var(--grad-gold); color: var(--navy-deep);
}
.cd-home-wrap .goal2-card h3 { font-size: 20px; color: var(--navy-deep); margin: 0; }
.cd-home-wrap .goal2-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.cd-home-wrap .goal2-card .gstat {
margin-top: auto; padding-top: 14px;
border-top: 1px solid var(--line-soft);
display: flex; align-items: baseline; gap: 10px;
}
.cd-home-wrap .goal2-card .gstat b { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--gold-deep); }
.cd-home-wrap .goal2-card .gstat span { font-size: 12px; color: var(--ink-mute); }
/* ============ JOURNAL teaser ============ */
.cd-home-wrap .post-card {
display: flex; flex-direction: column;
border-radius: var(--radius);
overflow: hidden;
background: rgba(255,255,255,0.7);
border: 1px solid rgba(255,255,255,0.8);
box-shadow: 0 12px 32px -18px rgba(30,58,95,0.18);
transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.cd-home-wrap .post-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -24px rgba(30,58,95,0.28); }
.cd-home-wrap .post-card .ph {
aspect-ratio: 16/10;
background:
radial-gradient(ellipse at 30% 20%, rgba(201,162,74,0.2), transparent 60%),
linear-gradient(135deg, #29628F, #1E3A5F);
position: relative;
}
.cd-home-wrap .post-card .ph .kicker {
position: absolute; left: 18px; bottom: 16px;
font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--gold-bright);
}
.cd-home-wrap .post-card .pb { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.cd-home-wrap .post-card .pmeta { font-size: 12px; color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.cd-home-wrap .post-card h3 { font-size: 20px; line-height: 1.25; color: var(--navy-deep); margin: 0; }
.cd-home-wrap .post-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
/* ============ shared section intro ============ */
.cd-home-wrap .sec-intro { text-align: center; max-width: 760px; margin: 0 auto 46px; }
.cd-home-wrap .sec-intro .eyebrow { margin-bottom: 18px; }
/* ---- guard dark VIP band against the site-wide navy text-gradient rule ---- */
.cd-home-wrap .vip-band h2 { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; }
.cd-home-wrap .vip-band .vip-lede { background: none !important; -webkit-text-fill-color: rgba(220,232,244,0.84) !important; color: rgba(220,232,244,0.84) !important; }
.cd-home-wrap .vip-band .eyebrow { background: none !important; -webkit-text-fill-color: var(--gold-bright) !important; color: var(--gold-bright) !important; }
/* ===== THE PROMISE — editorial lead for the Why KSM-66 section ===== */
.cd-home-wrap .promise { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(36px, 5vw, 84px); align-items: start; }
.cd-home-wrap .promise-eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: clamp(22px,2.5vw,32px); }
.cd-home-wrap .promise-h { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 5.8vw, 90px); line-height: 0.95; letter-spacing: -0.04em; margin: 0; }
.cd-home-wrap .promise-h .muted { -webkit-text-fill-color: #8a96a6 !important; color: #8a96a6 !important; }
.cd-home-wrap .promise-body { padding-top: clamp(6px, 1vw, 16px); }
.cd-home-wrap .promise-lead { font-family: var(--display); font-weight: 700; font-size: clamp(21px, 1.9vw, 29px); line-height: 1.3; letter-spacing: -0.01em; color: var(--navy-deep); margin: 0 0 26px; }
.cd-home-wrap .promise-lead .gold { color: var(--gold-deep); }
.cd-home-wrap .promise-sub { font-size: 16px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 30px; max-width: 46ch; }
.cd-home-wrap .promise-link { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--navy-deep); display: inline-flex; align-items: center; gap: 9px; padding-bottom: 7px; border-bottom: 1px solid rgba(201,162,74,0.65); transition: color 200ms var(--ease), border-color 200ms var(--ease); }
.cd-home-wrap .promise-link:hover { color: var(--gold-deep); border-color: var(--gold); }
.cd-home-wrap .promise-rule { border: none; border-top: 1px solid var(--line); margin: clamp(48px, 6vw, 84px) 0; }
.cd-home-wrap .why-cards-head { max-width: 64ch; margin-bottom: clamp(34px, 4vw, 52px); }
.cd-home-wrap .why-cards-head .eyebrow { margin-bottom: 16px; }
@media (max-width: 900px) {
.cd-home-wrap .promise { grid-template-columns: 1fr; }
}
/* ===== Three movements (under the Evidence Path proof cards) ===== */
.cd-home-wrap .movements-wrap { margin-top: clamp(56px, 7vw, 96px); }
.cd-home-wrap .movements-head { text-align: center; max-width: 22ch; margin: 0 auto clamp(40px, 5vw, 64px); }
.cd-home-wrap .movements-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.cd-home-wrap .movements { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.cd-home-wrap .move-num { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 3vw, 46px); color: var(--gold); line-height: 1; letter-spacing: 0.02em; margin-bottom: clamp(20px, 2.6vw, 36px); }
.cd-home-wrap .move-col h3 { font-family: var(--display); font-weight: 700; font-size: clamp(21px, 1.9vw, 27px); color: var(--navy-deep); margin: 0 0 clamp(14px, 1.8vw, 20px); letter-spacing: -0.02em; }
.cd-home-wrap .move-col p { font-size: 16px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 clamp(20px, 2.6vw, 30px); }
.cd-home-wrap .move-rule { border: none; border-top: 1px solid var(--line); margin: 0 0 clamp(16px, 2vw, 22px); }
.cd-home-wrap .move-stat { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 2.6vw, 38px); color: var(--navy-deep); line-height: 1; letter-spacing: -0.025em; margin-bottom: 9px; }
.cd-home-wrap .move-stat sub { font-size: 0.55em; }
.cd-home-wrap .move-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 860px) {
.cd-home-wrap .movements { grid-template-columns: 1fr; gap: 44px; }
}
/* ===== Three movements — centered + pill stats (v2) ===== */
.cd-home-wrap .movements-head { max-width: 700px; }
.cd-home-wrap .movements-sub { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); max-width: 62ch; margin: 18px auto 0; line-height: 1.6; }
.cd-home-wrap .move-col { text-align: center; }
.cd-home-wrap .move-col p { max-width: 40ch; margin-left: auto; margin-right: auto; }
.cd-home-wrap .move-pill { display: inline-block; margin-top: clamp(24px, 3vw, 34px); background: #fff; border: 1px solid rgba(13,27,42,0.05); border-radius: 999px; padding: 13px 26px; font-weight: 700; font-size: 16px; color: var(--navy-deep); box-shadow: 0 12px 28px -16px rgba(30,58,95,0.32), inset 0 1px 0 rgba(255,255,255,0.9); }
.cd-home-wrap .move-label { margin-top: 10px; }
.cd-home-wrap .movements-foot { text-align: center; margin-top: clamp(48px, 6vw, 80px); }
.cd-home-wrap .movements-foot p { font-size: 15px; color: var(--ink-soft); max-width: 58ch; margin: 0 auto 16px; line-height: 1.65; }
.cd-home-wrap .movements-foot .link-u { color: var(--navy); }
/* ===== Choose-your-supply: purchase widget panel ===== */
.cd-home-wrap .supply-layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(28px, 4vw, 64px); align-items: center; max-width: 1080px; margin: 0 auto; }
.cd-home-wrap .supply-media { position: relative; text-align: center; }
.cd-home-wrap .supply-media img { display: block; width: 100%; max-width: 440px; aspect-ratio: 4 / 3; height: auto; margin: 0 auto; object-fit: contain; transition: opacity .22s ease; }
.cd-home-wrap .supply-trust { margin-top: 22px; display: grid; gap: 10px; justify-content: center; }
.cd-home-wrap .supply-trust span { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.cd-home-wrap .supply-trust span::before { content: "✓"; width: 20px; height: 20px; border-radius: 999px; background: var(--grad-gold); color: var(--navy-deep); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.cd-home-wrap .purchase.is-panel { background: rgba(255,255,255,0.66); border: 1px solid var(--line-soft); border-radius: 26px; padding: clamp(22px, 3vw, 38px); box-shadow: 0 34px 72px -44px rgba(30,58,95,0.34); }
@media (max-width: 880px) {
.cd-home-wrap .supply-layout { grid-template-columns: 1fr; }
.cd-home-wrap .supply-media { max-width: 320px; margin: 0 auto; }
}
/* ===== Product summary band + refreshed CTA pair ===== */
.cd-home-wrap .summary-band { text-align: center; }
.cd-home-wrap .summary-eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: clamp(20px, 2.4vw, 30px); }
.cd-home-wrap .summary-lead { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.4vw, 50px); line-height: 1.16; letter-spacing: -0.03em; color: var(--navy-deep); max-width: 20ch; margin: 0 auto clamp(34px, 4vw, 52px); text-wrap: balance; }
.cd-home-wrap .summary-lead .gold { color: var(--gold-deep); }
.cd-home-wrap .cta-pair { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cd-home-wrap .cta-shop {
display: inline-flex; align-items: center; gap: 14px;
font-family: var(--sans); font-weight: 700; font-size: 17px;
color: #fff; background: var(--grad-navy);
padding: 17px 20px 17px 30px; border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 18px 38px -16px rgba(30,58,95,0.5);
transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.cd-home-wrap .cta-shop:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 26px 50px -18px rgba(30,58,95,0.58); }
.cd-home-wrap .cta-shop .arr { width: 30px; height: 30px; border-radius: 999px; background: var(--grad-gold); color: var(--navy-deep); display: grid; place-items: center; font-size: 15px; flex-shrink: 0; transition: transform 220ms var(--ease); }
.cd-home-wrap .cta-shop:hover .arr { transform: translateX(3px); }
.cd-home-wrap .cta-read {
display: inline-flex; align-items: center;
font-family: var(--sans); font-weight: 700; font-size: 17px;
color: var(--navy-deep); background: rgba(255,255,255,0.7);
padding: 17px 30px; border-radius: 999px;
border: 1.5px solid rgba(13,27,42,0.16);
transition: border-color 220ms var(--ease), background 220ms var(--ease);
}
.cd-home-wrap .cta-read:hover { border-color: var(--navy-deep); background: #fff; }
/* ===== Bundles — elevate the featured gold card + larger titles (reference) ===== */
.cd-home-wrap .bundle { padding: 36px 30px 32px; }
.cd-home-wrap .bundle h3 { font-size: clamp(30px, 3vw, 42px); letter-spacing: -0.03em; line-height: 1; }
.cd-home-wrap .bundle.featured { transform: translateY(-16px); }
.cd-home-wrap .bundle .ribbon { top: -15px; padding: 8px 20px; font-size: 11px; letter-spacing: 0.16em; }
@media (max-width: 900px) {
.cd-home-wrap .bundle.featured { transform: none; }
}
/* ===== styles-label.css ===== */
/* =========================================================
Optibio — "Label Inspection" — read-the-bottle layout
One rounded container: intro+checklist · Supplement Facts · commitment.
========================================================= */
.cd-home-wrap .label-sec {
padding: clamp(36px, 4vw, 52px) 0;
position: relative;
isolation: isolate;
background: linear-gradient(180deg, #F6FCFF 0%, #EAF6FB 100%);
overflow: hidden;
}
/* two soft decorative radial glows (behind content, contrast-safe) */
.cd-home-wrap .label-sec::before, .cd-home-wrap .label-sec::after {
content: "";
position: absolute;
border-radius: 50%;
z-index: -1;
pointer-events: none;
filter: blur(40px);
}
.cd-home-wrap .label-sec::before {
/* left glow — exact center 260,110 on 1440 canvas, radius 300 (600 dia) */
width: 600px; height: 600px;
left: calc(50% - 460px); top: 110px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 70%);
}
.cd-home-wrap .label-sec::after {
/* right glow — exact center 1140,410, radius 360 (720 dia) */
width: 720px; height: 720px;
left: calc(50% + 420px); top: 410px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(126,180,226,0.45) 0%, rgba(160,200,232,0.16) 45%, rgba(186,214,238,0) 72%);
}
/* layout: left copy on the background · lifted card holds facts + commitment */
.cd-home-wrap .label-layout {
position: relative;
z-index: 1;
max-width: 1280px;
margin-inline: auto;
display: grid;
grid-template-columns: 0.82fr 1.85fr;
gap: clamp(28px, 4vw, 64px);
align-items: center;
}
.cd-home-wrap .label-layout > * { min-width: 0; }
/* left intro — directly on the section background, NO card */
.cd-home-wrap .label-intro { padding: clamp(8px, 1.5vw, 20px) 0; }
/* lifted card holding the center + right columns — clean SOLID white (no glassy bleed-through) */
.cd-home-wrap .label-panel {
background: #FFFFFF;
border: 1px solid #E6EDF2;
border-radius: 22px;
display: grid;
grid-template-columns: 1.42fr 0.88fr;
gap: clamp(24px, 2.8vw, 44px);
padding: clamp(30px, 3.4vw, 48px) clamp(28px, 3.2vw, 48px);
box-shadow: 0 18px 44px -20px rgba(30,58,95,0.16), 0 4px 12px -4px rgba(30,58,95,0.06);
align-items: start;
}
.cd-home-wrap .label-panel > * { min-width: 0; }
.cd-home-wrap .label-col { min-width: 0; }
/* col 1 — heading + checklist */
.cd-home-wrap .label-intro h2 { font-size: clamp(34px, 3.8vw, 56px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 clamp(28px, 3.2vw, 40px); }
.cd-home-wrap .label-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(20px, 2.4vw, 28px); }
.cd-home-wrap .label-checks li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.cd-home-wrap .lc-ic {
width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0; margin-top: 1px;
display: grid; place-items: center;
color: #C7A24D;
border: 1.5px solid rgba(199,162,77,0.45);
background: #FFF7E4;
}
.cd-home-wrap .label-checks strong { display: block; font-size: 17px; font-weight: 700; color: #17213F; margin-bottom: 3px; letter-spacing: -0.01em; }
.cd-home-wrap .label-checks li > div span { font-size: 14.5px; color: #5D7084; }
.cd-home-wrap .label-checks .lc-ic { color: #C7A24D; }
/* col 2 — supplement facts (white outlined card) */
.cd-home-wrap .facts { align-self: stretch; min-width: 0; }
.cd-home-wrap .suppfacts {
width: 100%;
box-sizing: border-box;
background: #fff;
border: 1px solid #0D1B2A;
border-radius: 12px;
padding: 22px 24px 20px;
}
.cd-home-wrap .suppfacts h3 { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.1vw, 30px); color: #17213F; margin: 0 0 10px; letter-spacing: -0.02em; }
.cd-home-wrap .sf-serving { font-size: 14.5px; color: #5D7084; line-height: 1.45; }
.cd-home-wrap .sf-bar { height: 6px; background: #17213F; border-radius: 1px; margin: 10px 0 0; }
.cd-home-wrap .sf-bar.thin { height: 1px; background: #DDEAF1; margin: 0; }
.cd-home-wrap .sf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 14.5px; font-weight: 700; color: #17213F; }
.cd-home-wrap .sf-head span { white-space: nowrap; }
.cd-home-wrap .sf-head .sf-dvh { font-weight: 700; }
.cd-home-wrap .sf-ing { display: grid; grid-template-columns: 1fr auto 24px; align-items: baseline; column-gap: 14px; padding: 9px 0; }
.cd-home-wrap .sf-name { font-size: 15px; font-weight: 700; color: #17213F; line-height: 1.25; }
.cd-home-wrap .sf-paren { font-weight: 400; font-size: 13.5px; color: #5D7084; }
.cd-home-wrap .sf-qty { font-size: 15px; font-weight: 600; color: #17213F; white-space: nowrap; text-align: right; }
.cd-home-wrap .sf-dv { font-size: 15px; color: #5D7084; text-align: right; }
.cd-home-wrap .sf-ing.sf-sub { padding-top: 0; }
.cd-home-wrap .sf-ing.sf-sub .sf-name { padding-left: 16px; font-weight: 400; color: #5D7084; }
.cd-home-wrap .sf-note { font-size: 12.5px; color: #5D7084; padding-top: 9px; }
.cd-home-wrap .sf-other { font-size: 13.5px; color: #5D7084; line-height: 1.55; margin: 14px 2px 0; }
.cd-home-wrap .sf-other strong { color: #17213F; }
/* col 3 — commitment to quality */
.cd-home-wrap .commitment { border-left: 1px solid rgba(13,27,42,0.06); padding-left: clamp(22px, 2.6vw, 40px); }
.cd-home-wrap .commit-title { font-size: 16px; font-weight: 700; color: #17213F; margin-bottom: clamp(18px, 2.4vw, 26px); letter-spacing: -0.01em; }
.cd-home-wrap .commit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(14px, 1.8vw, 20px); }
.cd-home-wrap .commit-list li { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; font-size: 15px; color: #5D7084; }
.cd-home-wrap .cm-ic {
width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0;
display: grid; place-items: center;
color: #C7A24D;
border: 1.5px solid rgba(199,162,77,0.45);
background: #FFF7E4;
}
@media (max-width: 980px) {
.cd-home-wrap .label-layout { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 44px); align-items: start; }
}
@media (max-width: 720px) {
.cd-home-wrap .label-panel { grid-template-columns: 1fr; }
}
/* =========================================================
"Studied root extract" — KSM-66 source band
========================================================= */
.cd-home-wrap .source-sec { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 100px); }
.cd-home-wrap .source-band {
display: grid;
grid-template-columns: 1.02fr 1.18fr;
gap: clamp(32px, 4.5vw, 72px);
align-items: center;
background: linear-gradient(120deg, #FBFCFE 0%, #EEF3FA 100%);
border: 1px solid rgba(13,27,42,0.06);
border-radius: 26px;
padding: clamp(20px, 2.2vw, 30px);
box-shadow: 0 30px 64px -44px rgba(30,58,95,0.28);
}
.cd-home-wrap .source-media {
position: relative;
border-radius: 18px;
overflow: hidden;
aspect-ratio: 16 / 10;
background: linear-gradient(150deg, #FFFFFF 0%, #F2F6FB 100%);
}
.cd-home-wrap .source-media .jslot { position: absolute; inset: 0; width: 100%; height: 100%; }
.cd-home-wrap .source-body { padding: clamp(8px, 1.5vw, 24px) clamp(8px, 2vw, 32px) clamp(8px, 1.5vw, 24px) 0; }
.cd-home-wrap .source-body h2 { font-size: clamp(30px, 3.6vw, 52px); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; color: var(--navy-deep); margin: 0 0 18px; }
.cd-home-wrap .source-body .source-lede { font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6; color: var(--ink-soft); margin: 0 0 clamp(26px, 3vw, 34px); max-width: 46ch; }
.cd-home-wrap .source-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: clamp(24px, 3vw, 32px); }
.cd-home-wrap .source-stat { background: #fff; border: 1px solid rgba(13,27,42,0.07); border-radius: 14px; padding: 18px 14px; text-align: center; box-shadow: 0 12px 28px -22px rgba(30,58,95,0.3); }
.cd-home-wrap .source-stat .ss-num { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2vw, 28px); color: var(--navy-deep); letter-spacing: -0.02em; line-height: 1; }
.cd-home-wrap .source-stat .ss-lbl { font-size: 12px; color: var(--ink-mute); margin-top: 8px; line-height: 1.3; }
.cd-home-wrap .source-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; color: var(--navy-deep); }
.cd-home-wrap .source-link .arrow { transition: transform 200ms var(--ease); }
.cd-home-wrap .source-link:hover { color: var(--gold-deep); }
.cd-home-wrap .source-link:hover .arrow { transform: translateX(4px); }
@media (max-width: 860px) {
.cd-home-wrap .source-band { grid-template-columns: 1fr; }
.cd-home-wrap .source-stats { grid-template-columns: 1fr 1fr; }
.cd-home-wrap .source-body { padding: 0 4px 8px; }
}
/* ===== styles-label-geo.css ===== */
/* =========================================================
Optibio — "Label Inspection" — read-the-bottle layout
One rounded container: intro+checklist · Supplement Facts · commitment.
========================================================= */
.cd-home-wrap {
--section-bg-top: #F6FCFF;
--section-bg-bottom: #EAF6FB;
}
.cd-home-wrap .label-sec {
padding: 5px 0;
position: relative;
isolation: isolate;
background: transparent;
overflow: hidden;
}
/* glows now come from the global body field (styles.css) */
.cd-home-wrap .label-sec::before, .cd-home-wrap .label-sec::after {
content: none;
}
.cd-home-wrap .label-sec::__unused__ {
content: "";
position: absolute;
border-radius: 50%;
z-index: -1;
pointer-events: none;
filter: blur(60px);
}
.cd-home-wrap .label-sec .__unused-a {
/* left glow — center 260,110 on the 1440 canvas, radius 300 (600 dia) */
width: 600px; height: 600px;
left: calc(50% - 460px); top: 110px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 70%);
}
.cd-home-wrap .label-sec .__unused-b {
/* right glow — center 1140,410, radius 360 (720 dia) */
width: 720px; height: 720px;
left: calc(50% + 420px); top: 410px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(150,196,232,0.32) 0%, rgba(170,206,236,0.12) 48%, rgba(186,214,238,0) 74%);
}
/* GEOMETRY SPEC — 1440x620 canvas · 1280x492 glass container · 3 columns
Left copy (330) · Center facts card (412) · Right checklist card (354) */
.cd-home-wrap .label-sec .wrap-wide { padding-inline: 44px; }
.cd-home-wrap .label-glass {
position: relative;
z-index: 1;
width: 1520px;
max-width: 100%;
margin-inline: auto;
display: grid;
grid-template-columns: 300fr 460fr 320fr;
column-gap: clamp(24px, 3vw, 44px);
align-items: stretch;
padding: clamp(28px, 2.8vw, 42px) clamp(28px, 3.2vw, 48px);
background: #F5FAFD;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid #C4D8E7;
border-radius: 20px;
box-shadow: 0 20px 50px -24px rgba(30,58,95,0.18), 0 4px 12px -4px rgba(30,58,95,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
}
.cd-home-wrap .label-glass > * { min-width: 0; }
/* left copy — directly on the glass, vertically centered, NO card */
.cd-home-wrap .label-intro { padding: clamp(4px, 1vw, 12px) 0; }
/* center + right sit inside the glass: facts is the only outlined card, commitment is plain */
.cd-home-wrap .facts, .cd-home-wrap .commitment {
align-self: center;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.cd-home-wrap .commitment { border-left: 1px solid rgba(13,27,42,0.07); padding-left: clamp(24px, 2.8vw, 44px); }
.cd-home-wrap .label-col { min-width: 0; }
/* col 1 — heading + checklist */
.cd-home-wrap .label-intro h2 { font-family: 'DM Serif Display', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -0.01em; color: #17213F; margin: 0 0 clamp(22px, 2.6vw, 34px); }
.cd-home-wrap .label-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(20px, 2.4vw, 28px); }
.cd-home-wrap .label-checks li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.cd-home-wrap .lc-ic {
width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0; margin-top: 1px;
display: grid; place-items: center;
color: #C7A24D;
border: 1.5px solid #C7A24D;
background: #FFF7E4;
}
.cd-home-wrap .label-checks strong { display: block; font-size: 17px; font-weight: 700; color: #17213F; margin-bottom: 3px; letter-spacing: -0.01em; }
.cd-home-wrap .label-checks li > div span { font-size: 14.5px; color: #5D7084; }
.cd-home-wrap .label-checks .lc-ic { color: #C7A24D; }
/* col 2 — supplement facts (white outlined card) */
.cd-home-wrap .facts { align-self: stretch; min-width: 0; }
.cd-home-wrap .suppfacts {
width: 100%;
box-sizing: border-box;
background: #fff;
border: 1px solid #C6D2DE;
border-radius: 16px;
padding: 22px 24px 20px;
box-shadow: 0 16px 40px -24px rgba(30,58,95,0.22), 0 2px 8px -4px rgba(30,58,95,0.08);
}
.cd-home-wrap .suppfacts h3 { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.1vw, 30px); color: #17213F; margin: 0 0 10px; letter-spacing: -0.02em; }
.cd-home-wrap .sf-serving { font-size: 14.5px; color: #2C3E55; line-height: 1.5; }
.cd-home-wrap .sf-bar { height: 5px; background: #0D1B2A; border-radius: 0; margin: 12px 0; }
.cd-home-wrap .sf-bar.heavy { height: 8px; }
.cd-home-wrap .sf-bar.thin { height: 2px; }
.cd-home-wrap .sf-fn { font-size: 0.62em; vertical-align: super; font-weight: 700; }
.cd-home-wrap .sf-note + .sf-note { padding-top: 2px; }
.cd-home-wrap .sf-amt-head { display: flex; justify-content: flex-end; gap: 18px; font-size: 14.5px; font-weight: 700; color: #17213F; }
.cd-home-wrap .sf-amt-head span { white-space: nowrap; }
.cd-home-wrap .sf-ing { display: grid; grid-template-columns: 1fr auto 28px; align-items: baseline; column-gap: 14px; padding: 4px 0 0; }
.cd-home-wrap .sf-name { font-size: 15px; font-weight: 700; color: #17213F; line-height: 1.3; }
.cd-home-wrap .sf-name em { font-style: italic; font-weight: 600; }
.cd-home-wrap .sf-paren { font-weight: 400; font-size: 13.5px; color: #5D7084; }
.cd-home-wrap .sf-qty { font-size: 15px; font-weight: 600; color: #17213F; white-space: nowrap; text-align: right; }
.cd-home-wrap .sf-dv { font-size: 15px; color: #17213F; font-weight: 700; text-align: right; }
.cd-home-wrap .sf-substd { padding-left: 20px; font-size: 13.5px; color: #2C3E55; line-height: 1.4; padding-top: 4px; padding-bottom: 2px; }
.cd-home-wrap .sf-bar.thin { height: 2px; margin: 14px 0; }
.cd-home-wrap .sf-note { font-size: 12.5px; color: #2C3E55; padding-top: 7px; line-height: 1.45; }
.cd-home-wrap .sf-other { font-size: 13.5px; color: #5D7084; line-height: 1.55; margin: 14px 2px 0; }
.cd-home-wrap .sf-other strong { color: #17213F; }
/* col 3 — commitment to quality */
/* commitment card: divider removed (now its own card) */
.cd-home-wrap .commit-title { font-size: 16px; font-weight: 700; color: #17213F; margin-bottom: clamp(16px, 2vw, 22px); letter-spacing: -0.01em; }
.cd-home-wrap .commit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(14px, 1.8vw, 20px); }
.cd-home-wrap .commit-list li { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; font-size: 15px; font-weight: 600; color: #2C3E55; }
.cd-home-wrap .cm-ic {
width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0;
display: grid; place-items: center;
color: #C7A24D;
border: 1.5px solid #C7A24D;
background: #FFF7E4;
}
.cd-home-wrap .commit-cta {
display: inline-flex; align-items: baseline; gap: 8px;
align-self: flex-start;
margin-top: clamp(18px, 2.2vw, 26px);
font-size: 14px; font-weight: 700; color: #17213F; line-height: 1.4;
border-bottom: 1.5px solid #C7A24D; padding-bottom: 3px;
transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.cd-home-wrap .commit-cta span { transition: transform 200ms var(--ease); }
.cd-home-wrap .commit-cta:hover { color: #8E6F2B; border-color: #8E6F2B; }
.cd-home-wrap .commit-cta:hover span { transform: translateX(4px); }
@media (max-width: 980px) {
.cd-home-wrap .label-glass { grid-template-columns: 1fr; row-gap: clamp(24px, 4vw, 36px); align-items: stretch; }
.cd-home-wrap .facts, .cd-home-wrap .commitment { min-height: 0; }
}
/* =========================================================
"Studied root extract" — KSM-66 science standard band
========================================================= */
.cd-home-wrap .ksm-sec {
padding: 5px 0;
position: relative;
isolation: isolate;
background: transparent;
overflow: hidden;
}
.cd-home-wrap .ksm-sec::before, .cd-home-wrap .ksm-sec::after { content: none; }
.cd-home-wrap .ksm-sec .wrap-wide { padding-inline: 44px; }
.cd-home-wrap .ksm-glass {
position: relative; z-index: 1;
width: 1280px; max-width: 100%; margin-inline: auto;
display: grid; grid-template-columns: 0.9fr 1.32fr;
gap: clamp(28px, 3vw, 52px);
align-items: center;
padding: clamp(28px, 2.6vw, 38px);
background: none;
border: none;
border-radius: 0;
box-shadow: none;
}
.cd-home-wrap .ksm-glass > * { min-width: 0; }
/* left — image card + dossier */
.cd-home-wrap .ksm-media {
background: #fff;
border: 1px solid #E6EDF2;
border-radius: 18px;
padding: clamp(16px, 1.6vw, 22px);
box-shadow: 0 18px 44px -26px rgba(30,58,95,0.22);
}
.cd-home-wrap .ksm-media img { display: block; width: 100%; border-radius: 12px; }
.cd-home-wrap .ksm-media-cap { padding: clamp(16px, 1.6vw, 22px) 4px 4px; }
.cd-home-wrap .ksm-dossier { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #29628F; margin-bottom: 10px; }
.cd-home-wrap .ksm-dossier-lead { font-size: clamp(15px, 1.3vw, 17px); font-weight: 700; line-height: 1.35; color: var(--navy-deep); letter-spacing: -0.01em; margin: 0 0 14px; }
.cd-home-wrap .ksm-concept { font-size: 12px; color: var(--ink-mute); border-top: 1px solid var(--line-soft); padding-top: 12px; }
/* right — content */
.cd-home-wrap .ksm-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 2.4vw, 28px); }
.cd-home-wrap .ksm-pill { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: #fff; border: 1px solid #DCE7EF; border-radius: 999px; padding: 8px 15px; }
.cd-home-wrap .ksm-pill-lead { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #29628F; font-weight: 700; background: transparent; border-color: transparent; padding-left: 2px; }
.cd-home-wrap .ksm-head { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4.2vw, 62px); line-height: 0.98; letter-spacing: -0.035em; color: var(--navy-deep); margin: 0 0 18px; }
.cd-home-wrap .ksm-lede { font-size: clamp(15px, 1.25vw, 17px); line-height: 1.6; color: var(--ink-soft); margin: 0 0 clamp(24px, 2.6vw, 30px); max-width: 60ch; }
.cd-home-wrap .ksm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: clamp(20px, 2.4vw, 26px); }
.cd-home-wrap .ksm-stat { background: #F4F8FC; border: 1px solid #E6EDF2; border-radius: 14px; padding: 18px 16px; text-align: center; box-shadow: none; }
/* =========================================================
"Support for the moments stress shows up" — 6-card strip
========================================================= */
.cd-home-wrap .moments-sec { padding: 0; position: relative; margin: clamp(10px, 1.4vw, 18px) 0; }
.cd-home-wrap .moments-sec > .wrap-wide {
background: rgba(255,255,255,0.66);
border: 1px solid rgba(255,255,255,0.8);
border-radius: 26px;
box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 24px 60px -42px rgba(30,58,95,0.28);
padding: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 48px);
}
.cd-home-wrap .moments-head { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -0.03em; line-height: 1.1; color: var(--navy-deep); text-align: center; margin: 0 auto 14px; max-width: none; white-space: normal; }
.cd-home-wrap .moments-proof { text-align: center; font-family: var(--sans); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.55; color: var(--ink-soft); max-width: 62ch; margin: 0 auto clamp(28px, 3.5vw, 44px); }
.cd-home-wrap .moments-proof strong { color: var(--gold-deep); font-weight: 700; }
.cd-home-wrap .moments-disc { text-align: center; font-size: 12px; line-height: 1.6; color: var(--ink-mute); max-width: 72ch; margin: clamp(24px, 3vw, 36px) auto 0; }
.cd-home-wrap .moments-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 24px); max-width: 1080px; margin-left: auto; margin-right: auto; }
.cd-home-wrap .moment-card { background: #fff; border: 1px solid #E6EDF2; border-radius: 16px; padding: clamp(16px, 1.4vw, 26px) clamp(8px, 0.8vw, 16px); text-align: center; display: flex; flex-direction: column; align-items: center; box-shadow: 0 12px 30px -24px rgba(30,58,95,0.3); }
.cd-home-wrap .moment-ic { color: var(--navy-deep); margin-bottom: 14px; display: inline-flex; }
.cd-home-wrap .moment-title { font-size: 15px; font-weight: 700; color: var(--navy-deep); margin: 0 0 8px; letter-spacing: -0.01em; }
.cd-home-wrap .moment-desc { font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); margin: 0; }
@media (max-width: 700px) {
.cd-home-wrap .moments-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
.cd-home-wrap .moments-grid { grid-template-columns: 1fr; }
}
/* =========================================================
"Choose your daily routine" — buy box section
========================================================= */
.cd-home-wrap .routine-sec { padding: clamp(20px, 2.5vw, 36px) 0 clamp(40px, 5vw, 72px); position: relative; }
.cd-home-wrap .routine-panel {
background: rgba(255,255,255,0.84);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border: 1px solid #D3E5EE;
border-radius: 24px;
box-shadow: 0 30px 70px -34px rgba(30,58,95,0.26), 0 6px 18px -8px rgba(30,58,95,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
display: grid;
grid-template-columns: 0.78fr 1.55fr 0.9fr;
gap: clamp(24px, 3vw, 48px);
align-items: center;
padding: clamp(28px, 3vw, 44px);
}
.cd-home-wrap .routine-panel > * { min-width: 0; }
/* left copy */
.cd-home-wrap .routine-head { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -0.03em; color: var(--navy-deep); margin: 0 0 22px; }
.cd-home-wrap .routine-head span { display: block; }
.cd-home-wrap .routine-bullets { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; }
.cd-home-wrap .routine-bullets li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink-soft); line-height: 1.4; }
.cd-home-wrap .routine-bullets li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 7px; height: 7px; border-radius: 999px; background: #C7A24D; }
.cd-home-wrap .routine-badges { display: flex; gap: 22px; }
.cd-home-wrap .rb { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--ink-mute); line-height: 1.25; }
.cd-home-wrap .rb-ic { flex-shrink: 0; display: inline-flex; }
/* center buy */
.cd-home-wrap .routine-buy { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(20px, 2.4vw, 36px); align-items: center; }
.cd-home-wrap .routine-pw { padding: 0; box-shadow: none; border: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cd-home-wrap .routine-media { background: linear-gradient(160deg, #fff, #F2F6FB); border-radius: 16px; border: 1px solid #E6EDF2; padding: 10px; }
.cd-home-wrap .routine-widget { display: flex; flex-direction: column; }
.cd-home-wrap .rw-toggle { display: flex; gap: 10px; margin-bottom: 16px; }
.cd-home-wrap .rw-mode { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border: 1.5px solid #D6E2EC; border-radius: 12px; background: #fff; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: border-color 180ms ease, color 180ms ease, background 180ms ease; }
.cd-home-wrap .rw-mode .rw-radio { width: 16px; height: 16px; border-radius: 999px; border: 2px solid #C2CEDA; flex-shrink: 0; transition: border-color 180ms ease; }
.cd-home-wrap .rw-mode.is-active { border-color: #C7A24D; color: var(--navy-deep); background: #FFFDF7; }
.cd-home-wrap .rw-mode.is-active .rw-radio { border-color: #C7A24D; box-shadow: inset 0 0 0 3px #C7A24D; }
.cd-home-wrap .rw-price { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 3.6vw, 48px); color: var(--navy-deep); letter-spacing: -0.03em; line-height: 1; margin: 6px 0 18px; }
.cd-home-wrap .rw-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.cd-home-wrap .rw-stepper { display: inline-flex; align-items: center; border: 1.5px solid #D6E2EC; border-radius: 12px; overflow: hidden; }
.cd-home-wrap .rw-step { width: 42px; height: 44px; border: none; background: #fff; font-size: 20px; color: var(--navy-deep); cursor: pointer; transition: background 160ms ease; }
.cd-home-wrap .rw-step:hover { background: #F2F6FB; }
.cd-home-wrap .rw-qty { min-width: 44px; text-align: center; font-weight: 700; font-size: 16px; color: var(--navy-deep); }
.cd-home-wrap .rw-cadence { font-size: 13px; color: var(--ink-mute); }
.cd-home-wrap .rw-cta { width: 100%; background: var(--grad-navy); color: #fff; border: none; border-radius: 14px; padding: 18px; font-family: var(--sans); font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 16px 34px -16px rgba(30,58,95,0.5); transition: transform 180ms ease, box-shadow 180ms ease; }
.cd-home-wrap .rw-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 22px 44px -18px rgba(30,58,95,0.56); }
.cd-home-wrap .rw-secure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: var(--ink-mute); margin: 14px 0 12px; }
.cd-home-wrap .rw-pay { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cd-home-wrap .rw-pay .pay { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); background: #fff; border: 1px solid #E6EDF2; border-radius: 6px; padding: 5px 9px; }
/* right trust */
.cd-home-wrap .routine-trust { display: grid; gap: 22px; background: #F4F8FC; border: 1px solid #E6EDF2; border-radius: 16px; padding: clamp(20px, 2vw, 28px); }
.cd-home-wrap .rt-item { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; }
.cd-home-wrap .rt-ic { flex-shrink: 0; display: inline-flex; margin-top: 1px; }
.cd-home-wrap .rt-item strong { display: block; font-size: 14px; color: var(--navy-deep); font-weight: 700; margin-bottom: 3px; }
.cd-home-wrap .rt-item span { font-size: 12.5px; color: var(--ink-mute); line-height: 1.45; }
@media (max-width: 1040px) {
.cd-home-wrap .routine-panel { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); }
.cd-home-wrap .routine-trust { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
.cd-home-wrap .routine-buy { grid-template-columns: 1fr; }
.cd-home-wrap .routine-trust { grid-template-columns: 1fr; }
}
/* =========================================================
Routine quiz · Farm + testimonials · Pre-purchase FAQ
========================================================= */
.cd-home-wrap .quiz-sec { padding: clamp(28px, 3.5vw, 56px) 0; position: relative; }
.cd-home-wrap .quiz-card { background: #fff; border: 1px solid rgba(255,255,255,0.9); border-radius: 26px; box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 30px 70px -42px rgba(30,58,95,0.34); padding: clamp(28px, 3.5vw, 52px); max-width: 1080px; margin: 0 auto; }
.cd-home-wrap .quiz-intro { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 3.2vw, 40px); }
.cd-home-wrap .quiz-eyebrow { color: var(--gold-deep); }
.cd-home-wrap .quiz-head { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -0.03em; color: var(--navy-deep); margin: 12px 0 0; }
.cd-home-wrap .quiz-sub { font-size: clamp(14px, 1.2vw, 16px); color: var(--ink-soft); line-height: 1.55; margin: 12px auto 0; max-width: 48ch; }
.cd-home-wrap .quiz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cd-home-wrap .quiz-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cd-home-wrap .quiz-field > span { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.cd-home-wrap .quiz-field select { width: 100%; appearance: none; -webkit-appearance: none; background: #F7FAFD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235D7084' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; border: 1px solid #D6E2EC; border-radius: 12px; padding: 14px 38px 14px 16px; font-family: var(--sans); font-size: 15px; color: var(--navy-deep); cursor: pointer; text-overflow: ellipsis; }
.cd-home-wrap .quiz-field select:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,58,95,0.12); background-color: #fff; }
.cd-home-wrap .quiz-cta-wrap { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(26px, 3vw, 36px); flex-wrap: wrap; }
.cd-home-wrap .quiz-cta { display: inline-flex; align-items: center; gap: 12px; background: var(--navy-deep); color: #fff; border: none; border-radius: 999px; padding: 18px 34px; font-family: var(--sans); font-size: 16px; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 16px 34px -14px rgba(13,27,42,0.55); transition: transform 180ms ease, background 180ms ease; }
.cd-home-wrap .quiz-cta:hover { background: #16273B; transform: translateY(-1px); }
.cd-home-wrap .quiz-cta span { color: var(--gold); }
.cd-home-wrap .quiz-note { font-size: 13px; color: var(--ink-mute); }
.cd-home-wrap .quiz-note b { color: var(--navy); font-weight: 600; }
.cd-home-wrap .farm-sec { padding: clamp(28px, 3.5vw, 52px) 0; position: relative; border-top: 1px solid rgba(13,27,42,0.05); }
.cd-home-wrap .farm-grid { display: grid; grid-template-columns: 1fr 0.9fr 1.1fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
.cd-home-wrap .farm-head { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.2vw, 31px); line-height: 1.1; letter-spacing: -0.03em; color: var(--navy-deep); margin: 0 0 12px; }
.cd-home-wrap .farm-sub { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 24px; max-width: 40ch; }
.cd-home-wrap .farm-steps { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 22px; }
.cd-home-wrap .farm-step { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.cd-home-wrap .fs-ic { width: 40px; height: 40px; border-radius: 999px; border: 1px solid #D6E2EC; display: grid; place-items: center; color: var(--navy-deep); background: #fff; margin-bottom: 10px; }
.cd-home-wrap .farm-step strong { font-size: 12.5px; color: var(--navy-deep); margin-bottom: 4px; }
.cd-home-wrap .fs-d { font-size: 10.5px; color: var(--ink-mute); line-height: 1.35; }
.cd-home-wrap .farm-line { height: 1px; background: #D6E2EC; flex: 0 0 16px; margin-top: 20px; }
.cd-home-wrap .farm-pill { display: inline-block; background: #EAF1F8; color: var(--navy); border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 600; }
.cd-home-wrap .farm-media { align-self: center; }
.cd-home-wrap .trust-col2 { border-left: 1px solid rgba(13,27,42,0.07); padding-left: clamp(24px, 3vw, 44px); }
.cd-home-wrap .tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.cd-home-wrap .tcard { background: #fff; border: 1px solid #E6EDF2; border-radius: 14px; padding: 16px; margin: 0; box-shadow: 0 12px 30px -24px rgba(30,58,95,0.3); }
.cd-home-wrap .tstars { color: #C7A24D; font-size: 13px; letter-spacing: 1px; margin-bottom: 10px; }
.cd-home-wrap .tcard blockquote { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.cd-home-wrap .tcard figcaption { display: flex; align-items: center; gap: 10px; }
.cd-home-wrap .tav { width: 30px; height: 30px; border-radius: 999px; background: var(--navy-deep); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.cd-home-wrap .tcard figcaption strong { display: block; font-size: 12.5px; color: var(--navy-deep); }
.cd-home-wrap .tcard figcaption em { font-style: normal; font-size: 11px; color: var(--ink-mute); }
.cd-home-wrap .preq-sec { padding: clamp(28px, 3.5vw, 52px) 0 clamp(40px, 5vw, 72px); position: relative; border-top: 1px solid rgba(13,27,42,0.05); }
.cd-home-wrap .preq-grid { display: grid; grid-template-columns: 0.5fr 1.5fr; gap: clamp(24px, 3vw, 56px); align-items: start; }
.cd-home-wrap .preq-head { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.2vw, 31px); letter-spacing: -0.03em; color: var(--navy-deep); margin: 0; }
.cd-home-wrap .preq-list { border-top: 1px solid #E0E9F1; }
.cd-home-wrap .preq-list details { border-bottom: 1px solid #E0E9F1; }
.cd-home-wrap .preq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 4px; font-size: 15px; font-weight: 500; color: var(--navy-deep); }
.cd-home-wrap .preq-list summary::-webkit-details-marker { display: none; }
.cd-home-wrap .preq-x { font-size: 20px; color: var(--ink-mute); font-weight: 300; transition: transform 200ms ease; }
.cd-home-wrap .preq-list details[open] .preq-x { transform: rotate(45deg); }
.cd-home-wrap .preq-body { padding: 0 4px 18px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 70ch; }
@media (max-width: 1040px) {
.cd-home-wrap .quiz-grid { grid-template-columns: repeat(2, 1fr); }
.cd-home-wrap .farm-grid { grid-template-columns: 1fr; }
.cd-home-wrap .trust-col2 { border-left: none; padding-left: 0; border-top: 1px solid rgba(13,27,42,0.07); padding-top: 24px; }
.cd-home-wrap .preq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.cd-home-wrap .quiz-grid { grid-template-columns: 1fr; }
.cd-home-wrap .tcards { grid-template-columns: 1fr; }
.cd-home-wrap .farm-steps { flex-wrap: wrap; gap: 12px; }
.cd-home-wrap .farm-line { display: none; }
.cd-home-wrap .farm-step { flex: 0 0 40%; }
}
.cd-home-wrap .ksm-stat .ks-num { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 1.9vw, 28px); color: var(--navy-deep); letter-spacing: -0.02em; line-height: 1; }
.cd-home-wrap .ksm-stat .ks-lbl { font-size: 12px; color: var(--ink-mute); margin-top: 9px; line-height: 1.3; }
.cd-home-wrap .ksm-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: #29628F; }
.cd-home-wrap .ksm-link span { transition: transform 200ms var(--ease); }
.cd-home-wrap .ksm-link:hover { color: var(--navy-deep); }
.cd-home-wrap .ksm-link:hover span { transform: translateX(4px); }
.cd-home-wrap .ksm-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-bottom: clamp(24px, 2.8vw, 32px); }
.cd-home-wrap .ksm-benefit { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; }
.cd-home-wrap .kb-ic { width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0; margin-top: 1px; display: grid; place-items: center; color: #29628F; border: 1.5px solid #29628F; background: #EAF2F8; }
.cd-home-wrap .ksm-benefit strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--navy-deep); margin-bottom: 3px; }
.cd-home-wrap .ksm-benefit span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.cd-home-wrap .ksm-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cd-home-wrap .ksm-cta {
display: inline-flex; align-items: center; gap: 14px;
background: var(--grad-navy); color: #fff;
font-weight: 700; font-size: 15px;
padding: 15px 26px; border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 16px 34px -16px rgba(30,58,95,0.5);
transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.cd-home-wrap .ksm-cta span { transition: transform 200ms var(--ease); }
.cd-home-wrap .ksm-cta:hover { transform: translateY(-2px); }
.cd-home-wrap .ksm-cta:hover span { transform: translateX(4px); }
.cd-home-wrap .ksm-foot-note { font-size: 13px; color: var(--ink-mute); }
@media (max-width: 920px) {
.cd-home-wrap .ksm-glass { grid-template-columns: 1fr; }
.cd-home-wrap .ksm-stats { grid-template-columns: 1fr 1fr; }
.cd-home-wrap .ksm-benefits { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.cd-home-wrap .ksm-stats { grid-template-columns: 1fr 1fr; }
}
/* ===== styles-pages.css ===== */
/* =========================================================
Optibio — inner-page bridge.
Remaps the older earthy palette/classes (shop, product,
science) onto the navy + gold design system in styles.css
so every page matches the homepage. Load AFTER styles.css.
========================================================= */
.cd-home-wrap {
/* earthy tokens -> navy/gold equivalents */
--bone: #F8FCFE; /* near-white: light bg + light text on dark */
--bone-soft: #F2F7FB; /* light section bg */
--bone-deep: #DCE6F0; /* track / distribution-bar bg */
--ink: #0D1B2A; /* dark bg + dark text (= navy-deep) */
--moss: #1E3A5F; /* primary accent + dark sections (= navy) */
--moss-deep: #0D1B2A; /* darkest sections */
--turmeric: #C9A24A; /* warm accent (= gold) */
--clay: #64748B; /* neutral slate for "negative" markers */
}
/* ---- type: serif class -> brand display, italic -> gold accent ---- */
/* editorial voice on inner pages: DM Serif Display (ties to the wordmark) */
.cd-home-wrap .serif {
font-family: var(--serif);
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.06;
}
/* comfortable long-form reading on content pages */
.cd-home-wrap .study-body p, .cd-home-wrap .lede, .cd-home-wrap .pdp-acc-body p { line-height: 1.65; }
.cd-home-wrap .italic {
font-style: normal;
background: var(--grad-text-gold);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ---- buttons ---- */
.cd-home-wrap .btn-moss {
background: var(--grad-navy);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 12px 24px -10px rgba(13,27,42,0.45);
}
.cd-home-wrap .btn-moss:hover { background: var(--grad-navy-r); transform: translateY(-1px); }
.cd-home-wrap .btn-turmeric {
background: var(--grad-gold);
color: var(--navy-deep);
font-weight: 700;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 12px 24px -10px rgba(142,111,43,0.45);
}
.cd-home-wrap .btn-turmeric:hover { transform: translateY(-1px); }
.cd-home-wrap .btn-ghost {
background: transparent;
color: var(--navy-deep);
border: 1.5px solid var(--navy-deep);
}
.cd-home-wrap .btn-ghost:hover { background: var(--navy-deep); color: #fff; }
.cd-home-wrap .btn-ghost strong { font-weight: 700; }
/* ---- tags / chips ---- */
.cd-home-wrap .tag {
display: inline-flex; align-items: center;
padding: 7px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
background: rgba(30,58,95,0.06);
border: 1px solid var(--line-soft);
color: var(--ink-soft);
}
.cd-home-wrap .tag.tag-moss, .cd-home-wrap .tag-moss.tag {
background: rgba(201,162,74,0.14);
border-color: rgba(201,162,74,0.4);
color: var(--gold-deep);
}
/* ---- dark containers (inline bg uses --moss / --moss-deep / --ink),
section OR div: force headings light so they read on navy.
Matching `background: var(--` avoids elements that only set
`color: var(--moss)` (e.g. the science "Verified" labels). ---- */
.cd-home-wrap [style*="background: var(--moss"] :is(h1, h2, h3, h4, .serif),
[style*="background:var(--moss"] :is(h1, h2, h3, h4, .serif),
[style*="background: var(--ink)"] :is(h1, h2, h3, h4, .serif),
[style*="background:var(--ink)"] :is(h1, h2, h3, h4, .serif) {
color: var(--bone);
}
/* keep italic/gold accents gold even inside dark containers */
.cd-home-wrap [style*="background: var(--moss"] .italic,
[style*="background:var(--moss"] .italic,
[style*="background: var(--ink)"] .italic,
[style*="background:var(--ink)"] .italic {
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ---- misc consistency ---- */
.cd-home-wrap hr.rule { border-top: 1px solid var(--line); }
.cd-home-wrap .disclaimer-line { color: var(--ink-mute); }
/* ===== styles-purchase.css ===== */
/* =========================================================
Optibio — Purchase Widget (mode toggle · bottle cards ·
cadence · price summary · trust). Navy + gold.
Load after styles.css (+ styles-pages.css on the PDP).
========================================================= */
.cd-home-wrap .purchase { --pw-green: #1F8A5B; --pw-green-bg: rgba(31,138,91,0.1); }
/* mode toggle */
.cd-home-wrap .pw-toggle {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
background: var(--bone-soft); border: 1px solid var(--line-soft);
border-radius: 14px; padding: 6px; margin-bottom: 22px;
}
.cd-home-wrap .pw-mode {
appearance: none; border: none; cursor: pointer;
font-family: var(--sans); font-weight: 700; font-size: 15px;
color: var(--ink-mute); background: transparent;
padding: 13px 10px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
transition: color 200ms var(--ease);
}
.cd-home-wrap .pw-mode { position: relative; z-index: 1; }
.cd-home-wrap .pw-mode.is-active {
background: #fff; color: var(--navy-deep);
box-shadow: 0 6px 16px -8px rgba(30,58,95,0.3);
/* Smooth slide-in feel */
transition: background 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.cd-home-wrap .pw-off { background: var(--grad-gold); color: var(--navy-deep); font-size: 11px; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; }
.cd-home-wrap .pw-benefits[hidden], .cd-home-wrap .pw-cadence[hidden] { display: none !important; }
/* bottle cards */
.cd-home-wrap .pw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.cd-home-wrap .pw-card { position: relative; cursor: pointer; display: block; }
.cd-home-wrap .pw-card input { position: absolute; opacity: 0; pointer-events: none; }
.cd-home-wrap .pw-card-in {
display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: flex-start;
background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
padding: 22px 8px 16px; height: 100%;
/* Non-selected: visually receded */
opacity: 0.70;
transform: scale(0.96);
transition: border-color 250ms var(--ease), box-shadow 250ms var(--ease), transform 250ms var(--ease), opacity 250ms var(--ease);
}
.cd-home-wrap .pw-card:hover .pw-card-in {
opacity: 0.88;
border-color: rgba(201,162,74,0.45);
transform: scale(0.98) translateY(-1px);
}
.cd-home-wrap .pw-card.is-selected .pw-card-in {
opacity: 1;
transform: scale(1.04) translateY(-4px);
border-color: var(--gold); background: linear-gradient(180deg, #FFFDF8 0%, #FBF6EA 100%);
box-shadow: 0 0 0 1px var(--gold), 0 28px 52px -28px rgba(150,112,40,0.45), 0 8px 20px -8px rgba(30,58,95,0.10);
}
.cd-home-wrap .pw-qty { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; white-space: nowrap; }
.cd-home-wrap .pw-perbottle { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 1.8vw, 27px); color: var(--navy-deep); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.cd-home-wrap .pw-unit { font-size: 11px; color: var(--ink-mute); margin-top: 4px; }
.cd-home-wrap .pw-save { font-size: 11.5px; font-weight: 700; color: var(--pw-green); margin-top: 10px; min-height: 15px; white-space: nowrap; }
.cd-home-wrap .pw-supply { font-size: 11px; color: var(--ink-mute); margin-top: 8px; line-height: 1.3; }
/* Per-day cost badge — shows value in human terms */
.cd-home-wrap .pw-perday {
font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
color: #176b46; background: rgba(31,138,91,0.10);
border-radius: 999px; padding: 3px 9px; margin-top: 8px;
white-space: nowrap; display: inline-block;
}
.cd-home-wrap .pw-card.is-selected .pw-perday {
background: rgba(201,162,74,0.18); color: #7A5A10;
}
.cd-home-wrap .pw-check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 999px; background: var(--grad-gold); color: var(--navy-deep); font-size: 12px; font-weight: 700; display: none; align-items: center; justify-content: center; }
.cd-home-wrap .pw-card.is-selected .pw-check { display: inline-flex; }
.cd-home-wrap .pw-ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.cd-home-wrap .pw-ribbon-pop { background: var(--grad-gold); color: var(--navy-deep); }
.cd-home-wrap .pw-ribbon-best { background: var(--grad-navy); color: #fff; }
/* subscribe benefits */
.cd-home-wrap .pw-benefits {
display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
background: var(--pw-green-bg); border: 1px solid rgba(31,138,91,0.22);
border-radius: 12px; padding: 14px 18px; margin-bottom: 18px;
font-size: 14px; color: #176b46; font-weight: 600;
}
.cd-home-wrap .pw-benefits span { display: inline-flex; align-items: center; gap: 7px; }
.cd-home-wrap .pw-benefits span::before { content: "✓"; color: var(--pw-green); font-weight: 700; }
/* cadence */
.cd-home-wrap .pw-cadence { margin-bottom: 20px; }
.cd-home-wrap .pw-cadence-label { font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 10px; }
.cd-home-wrap .pw-cadence-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cd-home-wrap .pw-cad {
appearance: none; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 14px;
color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 13px 8px;
transition: border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}
.cd-home-wrap .pw-cad:hover { border-color: var(--navy-soft); }
.cd-home-wrap .pw-cad.is-active { background: var(--grad-navy); color: #fff; border-color: transparent; box-shadow: 0 0 0 1px rgba(201,162,74,0.55); }
.cd-home-wrap .pw-rule { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
/* price summary */
.cd-home-wrap .pw-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.cd-home-wrap .pw-was { font-size: 19px; color: var(--ink-mute); text-decoration: line-through; }
.cd-home-wrap .pw-now { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5vw, 56px); color: var(--navy-deep); line-height: 1; letter-spacing: -0.03em; }
.cd-home-wrap .pw-save-line { display: flex; align-items: center; gap: 16px; width: 100%; }
.cd-home-wrap .pw-save-pill { background: var(--pw-green-bg); color: #176b46; font-weight: 700; font-size: 13.5px; padding: 7px 14px; border-radius: 999px; }
.cd-home-wrap .pw-freeship { color: var(--pw-green); font-weight: 700; font-size: 14px; }
/* CTA */
.cd-home-wrap .pw-cta { margin-bottom: 16px; }
/* guarantee + qualify */
.cd-home-wrap .pw-guarantee { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; color: var(--ink-soft); margin-bottom: 10px; }
.cd-home-wrap .pw-guarantee svg { color: var(--moss); flex-shrink: 0; }
.cd-home-wrap .pw-qualify { text-align: center; font-size: 14px; font-weight: 700; color: var(--pw-green); margin-bottom: 4px; }
.cd-home-wrap .pw-qualify.is-muted { color: var(--ink-mute); font-weight: 600; }
/* trust + payment */
.cd-home-wrap .pw-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line-soft); }
.cd-home-wrap .pw-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-mute); }
.cd-home-wrap .pw-trust span svg { color: var(--ink-mute); opacity: 0.7; }
.cd-home-wrap .pw-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.cd-home-wrap .pw-pay .pay {
font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
color: #5b6b7f; background: #fff; border: 1px solid var(--line); border-radius: 6px;
padding: 7px 9px; line-height: 1; min-width: 42px; text-align: center;
}
@media (max-width: 420px) {
.cd-home-wrap .pw-cards { gap: 8px; }
.cd-home-wrap .pw-card-in { padding: 20px 6px 14px; }
.cd-home-wrap .pw-perbottle { font-size: 24px; }
.cd-home-wrap .pw-benefits { gap: 6px 14px; font-size: 13px; }
}
/* compact variant (landing pages / shop) */
.cd-home-wrap .purchase.is-compact { max-width: 600px; margin: 0 auto; text-align: left; }
.cd-home-wrap .purchase.is-compact .pw-guarantee { margin-top: 14px; margin-bottom: 0; }
.cd-home-wrap .purchase.is-compact .pw-qualify { margin-top: 8px; }
/* ===== styles-blog.css ===== */
/* =========================================================
Optibio — Journal / article system (navy + gold)
Loaded after styles.css + styles-pages.css on blog pages.
========================================================= */
/* ---- article body typography ---- */
.cd-home-wrap .article { max-width: 720px; }
.cd-home-wrap .article > p { font-size: 18px; line-height: 1.78; color: var(--ink-soft); margin: 0 0 24px; }
.cd-home-wrap .article h2 {
font-family: var(--serif); font-weight: 400;
font-size: clamp(26px, 3.2vw, 36px); line-height: 1.16; letter-spacing: -0.015em;
color: var(--navy-deep); margin: 48px 0 16px;
}
.cd-home-wrap .article a.inline {
color: var(--navy);
text-decoration: underline; text-decoration-color: rgba(201,162,74,0.55);
text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 500;
transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}
.cd-home-wrap .article a.inline:hover { color: var(--gold-deep); text-decoration-color: var(--gold); }
.cd-home-wrap .article ul { margin: 0 0 24px; padding-left: 22px; }
.cd-home-wrap .article li { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 10px; }
/* ---- key takeaways ---- */
.cd-home-wrap .takeaways {
background: linear-gradient(135deg, rgba(201,162,74,0.1), rgba(201,162,74,0.04));
border: 1px solid rgba(201,162,74,0.3);
border-radius: 20px; padding: 28px 30px; margin: 38px 0;
}
.cd-home-wrap .takeaways .kt { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); margin-bottom: 16px; }
.cd-home-wrap .takeaways ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cd-home-wrap .takeaways li { position: relative; padding-left: 30px; font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.cd-home-wrap .takeaways li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 999px; background: var(--grad-gold); color: var(--navy-deep); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
/* ---- in-article CTA ---- */
.cd-home-wrap .art-cta {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
background: var(--grad-navy); color: #fff; border-radius: 20px; padding: 26px 30px; margin: 42px 0;
}
.cd-home-wrap .art-cta .ac-t strong { font-family: var(--serif); font-size: 22px; color: #fff; display: block; margin-bottom: 4px; }
.cd-home-wrap .art-cta .ac-t span { font-size: 14px; color: rgba(214,228,242,0.8); }
.cd-home-wrap .art-disclaimer { font-size: 12px !important; color: var(--ink-mute) !important; line-height: 1.65 !important; border-top: 1px solid var(--line-soft); padding-top: 20px; margin-top: 38px !important; }
/* ---- related reading ---- */
.cd-home-wrap .rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cd-home-wrap .rel-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 20px; background: rgba(255,255,255,0.6); border: 1px solid var(--line-soft); box-shadow: 0 12px 30px -20px rgba(30,58,95,0.18); transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); }
.cd-home-wrap .rel-card:hover { transform: translateY(-5px); box-shadow: 0 28px 50px -26px rgba(30,58,95,0.3); }
.cd-home-wrap .rel-card .rc { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); }
.cd-home-wrap .rel-card h3 { font-family: var(--serif); font-size: 20px; line-height: 1.22; color: var(--navy-deep); margin: 0; }
.cd-home-wrap .rel-card .arr { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--navy); }
/* ---- blog hub grid ---- */
.cd-home-wrap .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cd-home-wrap .blog-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,0.65); border: 1px solid var(--line-soft); box-shadow: 0 14px 34px -22px rgba(30,58,95,0.2); transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.cd-home-wrap .blog-card:hover { transform: translateY(-6px); box-shadow: 0 32px 56px -28px rgba(30,58,95,0.32); }
.cd-home-wrap .blog-card .ph { aspect-ratio: 16/10; position: relative; background: radial-gradient(ellipse at 30% 20%, rgba(201,162,74,0.22), transparent 60%), linear-gradient(135deg, #29628F, #1E3A5F); }
.cd-home-wrap .blog-card .ph.alt { background: radial-gradient(ellipse at 30% 20%, rgba(201,162,74,0.22), transparent 60%), linear-gradient(135deg, #3a4a7a, #1E3A5F); }
.cd-home-wrap .blog-card .ph .rc { position: absolute; left: 18px; bottom: 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); }
.cd-home-wrap .blog-card .bb { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cd-home-wrap .blog-card .bm { font-size: 12px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.cd-home-wrap .blog-card h3 { font-family: var(--serif); font-size: 21px; line-height: 1.22; color: var(--navy-deep); margin: 0; }
.cd-home-wrap .blog-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.cd-home-wrap .blog-card .arr { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--navy); }
@media (max-width: 900px) {
.cd-home-wrap .rel-grid, .cd-home-wrap .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.cd-home-wrap .rel-grid, .cd-home-wrap .blog-grid { grid-template-columns: 1fr; }
}
/* ---- featured essay (hub lead) ---- */
.cd-home-wrap .feat { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px,4vw,52px); align-items: stretch; background: rgba(255,255,255,0.66); border: 1px solid var(--line-soft); border-radius: 28px; overflow: hidden; box-shadow: 0 26px 64px -34px rgba(30,58,95,0.32); margin-bottom: 48px; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.cd-home-wrap .feat:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -38px rgba(30,58,95,0.4); }
.cd-home-wrap .feat .feat-media { position: relative; min-height: 360px; background: radial-gradient(ellipse at 28% 18%, rgba(201,162,74,0.26), transparent 60%), linear-gradient(135deg, #29628F, #1E3A5F); }
.cd-home-wrap .feat .feat-media .rc { position: absolute; left: 26px; bottom: 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); }
.cd-home-wrap .feat .feat-media .ribbon-feat { position: absolute; top: 22px; left: 26px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-deep); background: var(--grad-gold); padding: 6px 13px; border-radius: 999px; }
.cd-home-wrap .feat .feat-body { padding: clamp(30px,3.2vw,52px) clamp(28px,3vw,48px) clamp(30px,3.2vw,52px) 0; display: flex; flex-direction: column; justify-content: center; }
.cd-home-wrap .feat .fb-tag { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); margin-bottom: 16px; }
.cd-home-wrap .feat .feat-body h2 { font-family: var(--serif); font-size: clamp(30px,3.6vw,46px); line-height: 1.1; color: var(--navy-deep); margin: 0 0 18px; }
.cd-home-wrap .feat .feat-body p { font-size: 16px; color: var(--ink-soft); line-height: 1.62; margin: 0 0 24px; max-width: 46ch; }
.cd-home-wrap .feat .fb-meta { font-size: 12px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 22px; }
.cd-home-wrap .feat .fb-cta { font-size: 14px; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 860px) {
.cd-home-wrap .feat { grid-template-columns: 1fr; }
.cd-home-wrap .feat .feat-media { min-height: 220px; }
.cd-home-wrap .feat .feat-body { padding: 4px 26px 32px; }
}
/* ===== styles-journal.css ===== */
/* =========================================================
Optibio — Journal hub (editorial / magazine layout)
Warm linen ground · Bricolage display · mono meta.
Loaded after styles.css (does NOT use styles-pages.css).
========================================================= */
/* warm editorial ground, drop the cool ambient glow on this page */
.cd-home-wrap body[data-page="blog"] { background: #F7F4EC; }
.cd-home-wrap body[data-page="blog"]::before, .cd-home-wrap body[data-page="blog"]::after { display: none !important; }
.cd-home-wrap .jwrap { padding: clamp(28px, 4vw, 52px) 0 clamp(64px, 8vw, 110px); }
/* ---- filter pills ---- */
.cd-home-wrap .jfilters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.cd-home-wrap .jpill {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
padding: 10px 17px; border-radius: 999px;
border: 1px solid rgba(13,27,42,0.2); color: var(--navy-deep); background: transparent;
cursor: pointer; white-space: nowrap; transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.cd-home-wrap .jpill:hover { border-color: var(--navy-deep); }
.cd-home-wrap .jpill.active { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); }
/* ---- shared image placeholder ---- */
.cd-home-wrap .jph {
position: relative; border-radius: 16px; overflow: hidden;
background: var(--grad-hero);
border: 1px solid rgba(30,58,95,0.08);
}
.cd-home-wrap .jph .cap {
position: absolute; left: 16px; bottom: 14px;
background: #fff; color: var(--navy-deep);
font-size: 13px; font-weight: 600; padding: 8px 15px; border-radius: 999px;
box-shadow: 0 8px 20px -10px rgba(30,58,95,0.3);
}
/* ---- featured (Editor's pick) ---- */
.cd-home-wrap .jfeat-wrap {
background: #fff; border: 1px solid rgba(13,27,42,0.1); border-radius: 24px;
padding: clamp(22px, 3vw, 44px);
box-shadow: 0 26px 60px -38px rgba(30,58,95,0.28);
}
.cd-home-wrap .jfeat { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.cd-home-wrap .jfeat .jph { aspect-ratio: 4/5; }
.cd-home-wrap .jf-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.cd-home-wrap .editors { background: #C2A35A; color: #16263a; font-size: 13px; font-weight: 600; padding: 7px 15px; border-radius: 999px; white-space: nowrap; }
.cd-home-wrap .jf-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.cd-home-wrap .jfeat h2 {
font-family: var(--display); font-weight: 800;
font-size: clamp(40px, 5vw, 70px); line-height: 0.98; letter-spacing: -0.035em;
color: var(--navy-deep); margin: 0 0 22px;
}
.cd-home-wrap .jfeat .dek { font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-soft); line-height: 1.5; margin: 0 0 30px; max-width: 42ch; }
.cd-home-wrap .jauthor { display: flex; align-items: center; gap: 14px; }
.cd-home-wrap .javatar { width: 44px; height: 44px; border-radius: 999px; background: var(--grad-gold); color: var(--navy-deep); display: grid; place-items: center; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; }
.cd-home-wrap .jauthor .name { font-weight: 600; color: var(--navy-deep); font-size: 15px; line-height: 1.3; }
.cd-home-wrap .jauthor .role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
/* ---- divider ---- */
.cd-home-wrap .jrule { border: none; border-top: 1px solid rgba(13,27,42,0.12); margin: clamp(40px, 5vw, 64px) 0; }
/* ---- grid cards (open, unboxed) ---- */
.cd-home-wrap .jgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 36px); }
.cd-home-wrap .jcard { display: flex; flex-direction: column; }
.cd-home-wrap .jcard .jph { aspect-ratio: 4/3; margin-bottom: 22px; transition: transform 320ms var(--ease), box-shadow 320ms var(--ease); }
.cd-home-wrap .jcard:hover .jph { transform: translateY(-5px); box-shadow: 0 30px 50px -30px rgba(30,58,95,0.34); }
.cd-home-wrap .jcard .meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; }
.cd-home-wrap .jcard h3 {
font-family: var(--display); font-weight: 800;
font-size: clamp(24px, 2vw, 31px); line-height: 1.08; letter-spacing: -0.025em;
color: var(--navy-deep); margin: 0 0 16px;
}
.cd-home-wrap .jcard .dek { font-size: 16px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 24px; }
.cd-home-wrap .jread {
margin-top: auto; display: block;
font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
color: var(--navy-deep); padding-bottom: 16px;
border-bottom: 1px solid rgba(201,162,74,0.6);
transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.cd-home-wrap .jcard:hover .jread { color: var(--gold-deep); border-color: var(--gold); }
.cd-home-wrap .jread .arr { margin-left: 6px; }
@media (max-width: 860px) {
.cd-home-wrap .jfeat { grid-template-columns: 1fr; }
.cd-home-wrap .jfeat .jph { aspect-ratio: 16/10; }
.cd-home-wrap .jgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.cd-home-wrap .jgrid { grid-template-columns: 1fr; }
}
/* ---- .jph placeholders are real drop targets ---- */
.cd-home-wrap .jph { isolation: isolate; }
.cd-home-wrap .jph > .jslot {
position: absolute; inset: 0; width: 100%; height: 100%;
background: transparent; border: none; box-shadow: none; z-index: 1;
}
.cd-home-wrap .jph > .jslot::part(frame) { background: transparent; }
.cd-home-wrap .jph > .jslot::part(empty) { opacity: 0; transition: opacity 160ms var(--ease); color: var(--navy-deep); }
.cd-home-wrap .jph > .jslot:hover::part(empty) { opacity: 0.92; }
.cd-home-wrap .jph > .cap { z-index: 2; pointer-events: none; }
.cd-home-wrap .jph > .jslot[data-filled] ~ .cap { display: none; }
/* hide the label once an image is dropped */
/* ===== inline: about.html ===== */
@media (max-width: 900px) {
.cd-home-wrap .principles-grid { grid-template-columns: 1fr !important; }
.cd-home-wrap .principles-grid > div { padding: 32px 0 !important; border-right: none !important; }
.cd-home-wrap .hist-grid { grid-template-columns: 1fr 1fr !important; }
.cd-home-wrap section [style*="grid-template-columns: 1fr 1.6fr"], .cd-home-wrap section [style*="grid-template-columns: 1fr 1.1fr"] { grid-template-columns: 1fr !important; }
.cd-home-wrap .coa-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
.cd-home-wrap .hist-grid { grid-template-columns: 1fr !important; }
}
/* What we test for */
.cd-home-wrap .coa-tests { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.cd-home-wrap .coa-tests li { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cd-home-wrap .coa-tests strong { font-size: 16px; color: var(--ink); font-weight: 700; }
.cd-home-wrap .coa-tests span { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.cd-home-wrap .coa-tests em { font-style: italic; }
@media (max-width: 520px) {
.cd-home-wrap .coa-tests li { grid-template-columns: 1fr; gap: 4px; }
}
/* Sample COA viewer + downloads */
.cd-home-wrap .coa-doc { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 18px 44px -26px rgba(23,33,63,0.3); }
.cd-home-wrap .coa-cap { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.06em; margin: 12px 2px 22px; }
.cd-home-wrap .coa-downloads { display: grid; gap: 8px; }
.cd-home-wrap .coa-dl { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bone); transition: border-color 180ms ease, transform 180ms ease, background 180ms ease; }
.cd-home-wrap .coa-dl:hover { border-color: var(--moss); transform: translateY(-1px); background: #fff; }
.cd-home-wrap .coa-dl-ic { color: var(--moss); display: inline-flex; flex-shrink: 0; }
.cd-home-wrap .coa-dl-t { font-size: 14px; font-weight: 600; color: var(--ink); flex: 1; }
.cd-home-wrap .coa-dl-x { font-size: 10px; color: var(--ink-mute); letter-spacing: 0.12em; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
/* ===== inline: cart.html ===== */
@media (max-width: 900px) {
.cd-home-wrap .cart-layout { grid-template-columns: 1fr !important; }
.cd-home-wrap .cart-summary { position: static !important; }
.cd-home-wrap .upsell { grid-template-columns: 1fr !important; text-align: left !important; }
.cd-home-wrap .upsell image-slot { width: 100% !important; aspect-ratio: 4/3 !important; }
.cd-home-wrap .trust-strip { grid-template-columns: 1fr !important; }
}
/* ===== inline: contact.html ===== */
.cd-home-wrap .field { display: grid; gap: 6px; font-size: 13px; }
.cd-home-wrap .field span { font-weight: 500; color: var(--ink-soft); }
.cd-home-wrap .field input, .cd-home-wrap .field select, .cd-home-wrap .field textarea {
border: 1px solid var(--line);
background: var(--bone);
padding: 14px 16px;
border-radius: 8px;
font: inherit;
font-size: 15px;
outline: none;
transition: border-color 200ms;
}
.cd-home-wrap .field input:focus, .cd-home-wrap .field select:focus, .cd-home-wrap .field textarea:focus { border-color: var(--navy); }
.cd-home-wrap .field input:focus-visible, .cd-home-wrap .field select:focus-visible, .cd-home-wrap .field textarea:focus-visible {
outline: 3px solid #1E3A5F; outline-offset: 2px; border-color: var(--navy);
}
.cd-home-wrap .field textarea { resize: vertical; }
.cd-home-wrap .field input::placeholder, .cd-home-wrap .field textarea::placeholder { color: var(--ink-mute); }
@media (max-width: 900px) {
.cd-home-wrap .contact-grid { grid-template-columns: 1fr !important; }
}
/* ===== inline: faq.html ===== */
.cd-home-wrap .faq-sidelink {
display: block;
padding: 6px 0;
color: var(--ink-mute);
border-left: 2px solid transparent;
padding-left: 12px;
margin-left: -14px;
transition: all 200ms;
}
.cd-home-wrap .faq-sidelink:hover { color: var(--ink); border-left-color: var(--turmeric); }
.cd-home-wrap .faq-group { margin-bottom: 64px; }
.cd-home-wrap .faq-group details { border-top: 1px solid var(--line); padding: 24px 0; }
.cd-home-wrap .faq-group details:last-of-type { border-bottom: 1px solid var(--line); }
.cd-home-wrap .faq-group summary {
list-style: none;
font-family: var(--serif);
font-size: clamp(20px, 2vw, 24px);
cursor: pointer;
display: flex; justify-content: space-between; align-items: center;
gap: 16px;
}
.cd-home-wrap .faq-group summary::-webkit-details-marker { display: none; }
.cd-home-wrap .faq-group summary::after { content: "+"; font-size: 28px; font-family: var(--sans); font-weight: 300; color: var(--ink-mute); }
.cd-home-wrap .faq-group details[open] summary::after { content: "−"; }
.cd-home-wrap .faq-group details > div { padding-top: 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.65; max-width: 64ch; }
@media (max-width: 900px) {
.cd-home-wrap .faq-layout { grid-template-columns: 1fr !important; }
.cd-home-wrap aside { position: static !important; }
.cd-home-wrap aside ul { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.cd-home-wrap .faq-sidelink { border: 1px solid var(--line); border-left: 1px solid var(--line) !important; border-radius: 999px; padding: 6px 14px !important; margin: 0 !important; }
}
/* ===== inline: index-label-geometry.html ===== */
/* Show the full video frame (no zoom-crop): cap stays in view, bottle reads smaller.
Pinned right so the gradient fills the left where the headline sits. */
.cd-home-wrap .hero-section .hero-video {
object-fit: contain;
object-position: right center;
}
.cd-home-wrap .hero-section .hero-video-wash {
background:
linear-gradient(100deg,
rgba(238,241,250,0.82) 0%,
rgba(235,240,250,0.70) 28%,
rgba(236,243,251,0.44) 50%,
rgba(231,240,250,0.24) 72%,
rgba(226,236,248,0.16) 100%),
radial-gradient(ellipse 120% 100% at 50% 40%,
rgba(244,246,251,0.16) 0%,
rgba(234,240,250,0.04) 45%,
rgba(220,230,246,0.20) 100%);
}
@media (max-width: 860px) {
.cd-home-wrap .hero-section .hero-video-wash {
background:
linear-gradient(180deg,
rgba(238,241,250,0.80) 0%,
rgba(235,240,250,0.62) 50%,
rgba(224,234,247,0.50) 100%);
}
}
/* Dark "black" copy rendered as the navy depth gradient (light sections only) */
.cd-home-wrap > section:not(.bg-cta):not(.bg-navy) :is(
h1, h2, h3, h4,
.h-display, .h-1, .h-2, .h-3, .h-4,
p, .lede,
.stat .num, .stat .lbl,
.trust-card .label, .eyebrow,
summary, .faq-body
) {
background: linear-gradient(135deg, #1E3A5F 0%, #0D1B2A 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Preserve the gold accent inside gradient headings */
.cd-home-wrap > section:not(.bg-cta):not(.bg-navy) .gold-text {
background: var(--grad-text-gold);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Keep star ratings gold (they live inside gradient headings) */
.cd-home-wrap > section:not(.bg-cta):not(.bg-navy) .stars, .cd-home-wrap > section:not(.bg-cta):not(.bg-navy) .stars::before {
background: none;
-webkit-text-fill-color: var(--gold);
color: var(--gold);
}
/* Hero primary CTA — Midnight Navy */
.cd-home-wrap .hero-section .btn-cta {
background: #0D1B2A;
box-shadow: 0 14px 30px -12px rgba(13,27,42,0.55), 0 2px 6px rgba(13,27,42,0.25);
}
.cd-home-wrap .hero-section .btn-cta:hover {
background: #16273B;
}
/* Stat strip: force all four onto one row, content scales to fit */
.cd-home-wrap .hero-stats .stat {
min-width: 0;
padding: 16px 12px;
}
.cd-home-wrap .hero-stats .stat .num { font-size: clamp(22px, 2.2vw, 34px); }
.cd-home-wrap .hero-stats .stat .lbl { font-size: 10px; letter-spacing: 0.1em; line-height: 1.3; margin-top: 6px; }
/* ===== Cinematic trust badges (navy depth) ===== */
.cd-home-wrap .trust-cine .trust-card {
background: linear-gradient(155deg, #213F66 0%, #14253B 52%, #0B1622 100%);
border: 1px solid rgba(201,162,74,0.30);
border-radius: 20px;
padding: 40px 22px;
gap: 18px;
box-shadow:
0 30px 60px -26px rgba(8,16,26,0.75),
inset 0 1px 0 rgba(255,255,255,0.08);
overflow: hidden;
transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
/* cinematic top-light + gold floor glow */
.cd-home-wrap .trust-cine .trust-card::before {
content: "";
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background:
radial-gradient(120% 80% at 50% -10%, rgba(120,160,210,0.22) 0%, transparent 55%),
radial-gradient(100% 70% at 50% 118%, rgba(201,162,74,0.20) 0%, transparent 60%);
opacity: 1;
}
.cd-home-wrap .trust-cine .trust-card:hover {
transform: translateY(-6px);
border-color: rgba(201,162,74,0.65);
box-shadow:
0 40px 80px -28px rgba(8,16,26,0.85),
0 0 0 1px rgba(201,162,74,0.25),
inset 0 1px 0 rgba(255,255,255,0.12);
}
/* icon in a gold-rimmed disc */
.cd-home-wrap .trust-cine .trust-card .icon {
width: 64px; height: 64px; border-radius: 999px;
background: radial-gradient(circle at 50% 35%, rgba(201,162,74,0.22), rgba(201,162,74,0.05));
border: 1px solid rgba(201,162,74,0.45);
position: relative; z-index: 1;
}
.cd-home-wrap .trust-cine .trust-card .icon svg { stroke: #E6C475 !important; width: 30px; height: 30px; }
.cd-home-wrap .trust-cine .trust-card .icon svg text { fill: #E6C475 !important; stroke: none !important; }
/* labels: bold white, gold sub-line — override the navy text-gradient */
.cd-home-wrap .trust-cine .trust-card .label {
position: relative; z-index: 1;
font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.18;
background: none !important;
-webkit-text-fill-color: #FFFFFF !important;
color: #FFFFFF !important;
}
.cd-home-wrap .trust-cine .trust-card .label span {
display: inline-block; margin-top: 4px;
font-size: 12px !important; font-weight: 600 !important;
letter-spacing: 0.14em; text-transform: uppercase;
-webkit-text-fill-color: rgba(230,196,117,0.92) !important;
color: rgba(230,196,117,0.92) !important;
}
/* Why-Optibio variant: heading + description cards */
.cd-home-wrap .trust-cine .trust-card .icon[style] { background: radial-gradient(circle at 50% 35%, rgba(201,162,74,0.22), rgba(201,162,74,0.05)) !important; border: 1px solid rgba(201,162,74,0.45); border-radius: 999px; }
.cd-home-wrap .trust-cine .trust-card h3, .cd-home-wrap .trust-cine .trust-card .h-4 {
position: relative; z-index: 1;
background: none !important;
-webkit-text-fill-color: #FFFFFF !important;
color: #FFFFFF !important;
}
.cd-home-wrap .trust-cine .trust-card p {
position: relative; z-index: 1;
background: none !important;
-webkit-text-fill-color: rgba(214,228,242,0.66) !important;
color: rgba(214,228,242,0.66) !important;
}
/* ===== Featured bundle = solid gold card ===== */
.cd-home-wrap .bundle.featured {
background: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.74) 100%) !important;
border: 1.5px solid rgba(201,162,74,0.5) !important;
box-shadow: 0 40px 80px -32px rgba(30,58,95,0.34), 0 0 0 1px rgba(201,162,74,0.16) !important;
}
.cd-home-wrap .bundle.featured .eyebrow { color: var(--navy-deep) !important; -webkit-text-fill-color: var(--navy-deep) !important; background: none !important; }
.cd-home-wrap .bundle.featured p { color: rgba(13,27,42,0.72) !important; -webkit-text-fill-color: rgba(13,27,42,0.72) !important; background: none !important; }
.cd-home-wrap .bundle.featured p span { color: rgba(13,27,42,0.5) !important; }
.cd-home-wrap .bundle.featured .btn-cta {
background: #0D1B2A !important;
box-shadow: 0 14px 30px -12px rgba(13,27,42,0.5) !important;
}
.cd-home-wrap .bundle.featured .btn-cta:hover { background: #16273B !important; }
/* keep ribbon labels on one line */
.cd-home-wrap .bundle .ribbon { white-space: nowrap; }
/* ===== Science results grid (on navy band) ===== */
.cd-home-wrap .science-results::after {
content: "";
position: absolute; inset: auto -140px -160px auto;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(201,162,74,0.22), rgba(201,162,74,0));
pointer-events: none;
}
.cd-home-wrap .sci-grid { position: relative; z-index: 1; align-items: stretch; }
.cd-home-wrap .sci-card {
display: flex; flex-direction: column;
background: rgba(255,255,255,0.055);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 22px;
padding: 30px 26px;
text-align: left;
backdrop-filter: blur(6px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
transition: transform 320ms var(--ease), border-color 320ms var(--ease), background 320ms var(--ease);
}
.cd-home-wrap .sci-card:hover {
transform: translateY(-5px);
border-color: rgba(201,162,74,0.45);
background: rgba(255,255,255,0.08);
}
.cd-home-wrap .sci-card .sci-stat {
font-family: var(--display);
font-size: clamp(40px, 4vw, 54px);
font-weight: 800;
line-height: 0.92;
letter-spacing: -0.03em;
margin-bottom: 16px;
background: var(--grad-text-gold);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.cd-home-wrap .sci-card .sci-stat span { font-size: 0.42em; font-weight: 700; margin-left: 2px; -webkit-text-fill-color: rgba(230,196,117,0.85); }
.cd-home-wrap .sci-card h3 {
color: #FFFFFF; font-size: 18px; font-weight: 700;
letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 10px;
}
.cd-home-wrap .sci-card p {
color: rgba(220,232,244,0.66); font-size: 14px; line-height: 1.6; margin: 0;
}
/* ===== Trust strip (5 items) ===== */
.cd-home-wrap .trust-strip-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cd-home-wrap .tstrip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 16px; }
.cd-home-wrap .tstrip .dot {
width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center;
background: radial-gradient(circle at 50% 35%, rgba(201,162,74,0.20), rgba(201,162,74,0.05));
border: 1px solid rgba(201,162,74,0.42); color: var(--navy);
}
.cd-home-wrap .tstrip strong { font-size: 15px; font-weight: 700; color: var(--navy-deep); }
.cd-home-wrap .tstrip span { font-size: 12.5px; color: var(--ink-mute); line-height: 1.45; }
@media (max-width: 900px) {
.cd-home-wrap .trust-strip-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ===== Icon dot (why / goal cards) ===== */
.cd-home-wrap .idot {
width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
color: var(--navy);
background: radial-gradient(circle at 50% 35%, rgba(201,162,74,0.20), rgba(201,162,74,0.05));
border: 1px solid rgba(201,162,74,0.40); margin-bottom: 22px;
}
/* ===== Usage cards ===== */
.cd-home-wrap .usage-card { padding: 32px 28px; }
.cd-home-wrap .usage-card .k {
font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
margin-bottom: 14px;
color: var(--gold-deep) !important; -webkit-text-fill-color: var(--gold-deep) !important; background: none !important;
}
/* ===== Value + compare table ===== */
.cd-home-wrap .compare-wrap { border-radius: 24px; overflow: hidden; }
.cd-home-wrap .compare-wrap table { width: 100%; border-collapse: collapse; }
.cd-home-wrap .compare-wrap th, .cd-home-wrap .compare-wrap td { padding: 16px 18px; text-align: left; font-size: 15px; border-bottom: 1px solid rgba(13,27,42,0.08); }
.cd-home-wrap .compare-wrap th {
background: rgba(13,27,42,0.04); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-mute) !important; -webkit-text-fill-color: var(--ink-mute) !important;
}
.cd-home-wrap .compare-wrap tr.hl td { background: rgba(201,162,74,0.12); font-weight: 700; }
.cd-home-wrap .callout-gold {
margin-top: 22px; padding: 16px 18px; border-radius: 16px;
background: rgba(201,162,74,0.10); border: 1px solid rgba(201,162,74,0.26); font-weight: 700;
color: var(--gold-deep) !important; -webkit-text-fill-color: var(--gold-deep) !important;
}
/* ===== Benefits / goals ===== */
.cd-home-wrap .benefits-grid { display: grid; grid-template-columns: 0.98fr 1.02fr; gap: 26px; align-items: stretch; }
.cd-home-wrap .lifestyle-card { position: relative; border-radius: 28px; overflow: hidden; min-height: 520px; box-shadow: 0 30px 60px -28px rgba(13,27,42,0.42); }
.cd-home-wrap .lifestyle-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.cd-home-wrap .lifestyle-overlay { position: absolute; inset: auto 22px 22px 22px; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border-radius: 18px; padding: 18px 20px; }
.cd-home-wrap .lifestyle-overlay strong { display: block; margin-bottom: 8px; color: var(--navy-deep); font-size: 16px; }
.cd-home-wrap .lifestyle-overlay span { color: var(--ink-soft); line-height: 1.6; font-size: 14px; }
.cd-home-wrap .goal-list { display: grid; gap: 14px; }
.cd-home-wrap .goal-card { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 22px 24px; }
.cd-home-wrap .goal-card .idot { margin-bottom: 0; }
.cd-home-wrap .goal-card h3 { margin: 2px 0 6px; }
@media (max-width: 900px) {
.cd-home-wrap .benefits-grid { grid-template-columns: 1fr; }
}
/* ===== Standards (dark) + verify ===== */
.cd-home-wrap .standards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; position: relative; z-index: 1; }
.cd-home-wrap .standard-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; padding: 32px; }
.cd-home-wrap .standard-card h3 { color: #fff; margin: 0; }
.cd-home-wrap .standard-card ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.cd-home-wrap .standard-card li { padding: 14px 16px 14px 42px; position: relative; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: rgba(220,232,244,0.86); font-size: 14px; }
.cd-home-wrap .standard-card li::before { content: "✓"; position: absolute; left: 16px; color: var(--gold-bright); font-weight: 700; }
.cd-home-wrap .lookup { background: #fff; border-radius: 24px; padding: 32px; }
.cd-home-wrap .lookup h3 { margin: 0 0 10px; color: var(--navy-deep); -webkit-text-fill-color: var(--navy-deep); }
.cd-home-wrap .lookup .fauxinput { padding: 15px 16px; border-radius: 12px; border: 1px solid rgba(13,27,42,0.14); color: var(--ink-mute); font-size: 14px; margin: 16px 0; background: #F7FAFD; }
.cd-home-wrap .lookup .result { margin-top: 16px; font-size: 13px; color: var(--ink-soft); line-height: 1.6; background: rgba(116,138,105,0.10); border: 1px solid rgba(116,138,105,0.22); border-radius: 12px; padding: 14px 16px; }
.cd-home-wrap .lookup .result strong { color: var(--navy-deep); }
@media (max-width: 860px) {
.cd-home-wrap .standards-grid { grid-template-columns: 1fr; }
}
/* ===== Guarantee steps ===== */
.cd-home-wrap .step-card { padding: 32px 28px; }
.cd-home-wrap .step-num { width: 48px; height: 48px; border-radius: 999px; background: var(--grad-navy); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 20px; margin-bottom: 20px; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.cd-home-wrap .step-card h3 { margin: 0 0 8px; }
/* ===== Email band ===== */
.cd-home-wrap .email-band { background: linear-gradient(135deg, #1E3A5F 0%, #0D1B2A 100%); border-radius: 28px; padding: clamp(34px, 5vw, 60px); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: center; position: relative; overflow: hidden; }
.cd-home-wrap .email-band::after { content: ""; position: absolute; inset: auto -120px -140px auto; width: 360px; height: 360px; background: radial-gradient(circle, rgba(201,162,74,0.22), rgba(201,162,74,0)); pointer-events: none; }
.cd-home-wrap .email-band :is(h3, p) { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; position: relative; z-index: 1; }
.cd-home-wrap .email-band p { color: rgba(220,232,244,0.78) !important; -webkit-text-fill-color: rgba(220,232,244,0.78) !important; }
.cd-home-wrap .email-form { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.cd-home-wrap .email-form .fauxinput { flex: 1; min-width: 200px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.72); border-radius: 12px; padding: 15px 16px; font-size: 14px; }
@media (max-width: 860px) {
.cd-home-wrap .email-band { grid-template-columns: 1fr; }
}
/* ===== Design refinement: flat body copy in the funnel for cleaner hierarchy + AA contrast. Hero is intentionally excluded so it stays exactly as-is. ===== */
.cd-home-wrap > section:not(.bg-cta):not(.bg-navy):not(.hero-section) :is(p, .lede, .faq-body) {
background: none !important;
-webkit-text-fill-color: var(--ink-soft) !important;
color: var(--ink-soft) !important;
}
/* preserve the hero's original muted-label tone despite the global --ink-mute tweak */
.cd-home-wrap .hero-section .hero-stats .stat .lbl { color: #6B7C92 !important; }
/* ===== inline: index.html ===== */
/* Show the full video frame (no zoom-crop): cap stays in view, bottle reads smaller.
Pinned right so the gradient fills the left where the headline sits. */
.cd-home-wrap .hero-section .hero-video {
object-fit: contain;
object-position: right center;
}
.cd-home-wrap .hero-section .hero-video-wash {
background:
linear-gradient(100deg,
rgba(238,241,250,0.82) 0%,
rgba(235,240,250,0.70) 28%,
rgba(236,243,251,0.44) 50%,
rgba(231,240,250,0.24) 72%,
rgba(226,236,248,0.16) 100%),
radial-gradient(ellipse 120% 100% at 50% 40%,
rgba(244,246,251,0.16) 0%,
rgba(234,240,250,0.04) 45%,
rgba(220,230,246,0.20) 100%);
}
@media (max-width: 860px) {
.cd-home-wrap .hero-section .hero-video-wash {
background:
linear-gradient(180deg,
rgba(238,241,250,0.80) 0%,
rgba(235,240,250,0.62) 50%,
rgba(224,234,247,0.50) 100%);
}
}
/* Dark "black" copy rendered as the navy depth gradient (light sections only) */
.cd-home-wrap > section:not(.bg-cta):not(.bg-navy) :is(
h1, h2, h3, h4,
.h-display, .h-1, .h-2, .h-3, .h-4,
p, .lede,
.stat .num, .stat .lbl,
.trust-card .label, .eyebrow,
summary, .faq-body
) {
background: linear-gradient(135deg, #1E3A5F 0%, #0D1B2A 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Preserve the gold accent inside gradient headings */
.cd-home-wrap > section:not(.bg-cta):not(.bg-navy) .gold-text {
background: var(--grad-text-gold);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Unify gold accents to the Bricolage display face (DM Serif stays on editorial inner pages only).
Hero is frozen and keeps its original serif-italic accent. */
.cd-home-wrap > section:not(.hero-section) .gold-text {
font-family: var(--display);
font-style: normal;
font-weight: 800;
letter-spacing: -0.025em;
}
/* Keep star ratings gold (they live inside gradient headings) */
.cd-home-wrap > section:not(.bg-cta):not(.bg-navy) .stars, .cd-home-wrap > section:not(.bg-cta):not(.bg-navy) .stars::before {
background: none;
-webkit-text-fill-color: var(--gold);
color: var(--gold);
}
/* Hero primary CTA — Midnight Navy */
.cd-home-wrap .hero-section .btn-cta {
background: #0D1B2A;
box-shadow: 0 14px 30px -12px rgba(13,27,42,0.55), 0 2px 6px rgba(13,27,42,0.25);
}
.cd-home-wrap .hero-section .btn-cta:hover {
background: #16273B;
}
/* Stat strip: force all four onto one row, content scales to fit */
.cd-home-wrap .hero-stats .stat {
min-width: 0;
padding: 16px 12px;
}
.cd-home-wrap .hero-stats .stat .num { font-size: clamp(22px, 2.2vw, 34px); }
.cd-home-wrap .hero-stats .stat .lbl { font-size: 10px; letter-spacing: 0.1em; line-height: 1.3; margin-top: 6px; }
/* ===== Cinematic trust badges (navy depth) ===== */
.cd-home-wrap .trust-cine .trust-card {
background: linear-gradient(155deg, #213F66 0%, #14253B 52%, #0B1622 100%);
border: 1px solid rgba(201,162,74,0.30);
border-radius: 20px;
padding: 40px 22px;
gap: 18px;
box-shadow:
0 30px 60px -26px rgba(8,16,26,0.75),
inset 0 1px 0 rgba(255,255,255,0.08);
overflow: hidden;
transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
/* cinematic top-light + gold floor glow */
.cd-home-wrap .trust-cine .trust-card::before {
content: "";
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background:
radial-gradient(120% 80% at 50% -10%, rgba(120,160,210,0.22) 0%, transparent 55%),
radial-gradient(100% 70% at 50% 118%, rgba(201,162,74,0.20) 0%, transparent 60%);
opacity: 1;
}
.cd-home-wrap .trust-cine .trust-card:hover {
transform: translateY(-6px);
border-color: rgba(201,162,74,0.65);
box-shadow:
0 40px 80px -28px rgba(8,16,26,0.85),
0 0 0 1px rgba(201,162,74,0.25),
inset 0 1px 0 rgba(255,255,255,0.12);
}
/* icon in a gold-rimmed disc */
.cd-home-wrap .trust-cine .trust-card .icon {
width: 64px; height: 64px; border-radius: 999px;
background: radial-gradient(circle at 50% 35%, rgba(201,162,74,0.22), rgba(201,162,74,0.05));
border: 1px solid rgba(201,162,74,0.45);
position: relative; z-index: 1;
}
.cd-home-wrap .trust-cine .trust-card .icon svg { stroke: #E6C475 !important; width: 30px; height: 30px; }
.cd-home-wrap .trust-cine .trust-card .icon svg text { fill: #E6C475 !important; stroke: none !important; }
/* labels: bold white, gold sub-line — override the navy text-gradient */
.cd-home-wrap .trust-cine .trust-card .label {
position: relative; z-index: 1;
font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.18;
background: none !important;
-webkit-text-fill-color: #FFFFFF !important;
color: #FFFFFF !important;
}
.cd-home-wrap .trust-cine .trust-card .label span {
display: inline-block; margin-top: 4px;
font-size: 12px !important; font-weight: 600 !important;
letter-spacing: 0.14em; text-transform: uppercase;
-webkit-text-fill-color: rgba(230,196,117,0.92) !important;
color: rgba(230,196,117,0.92) !important;
}
/* Why-Optibio variant: heading + description cards */
.cd-home-wrap .trust-cine .trust-card .icon[style] { background: radial-gradient(circle at 50% 35%, rgba(201,162,74,0.22), rgba(201,162,74,0.05)) !important; border: 1px solid rgba(201,162,74,0.45); border-radius: 999px; }
.cd-home-wrap .trust-cine .trust-card h3, .cd-home-wrap .trust-cine .trust-card .h-4 {
position: relative; z-index: 1;
background: none !important;
-webkit-text-fill-color: #FFFFFF !important;
color: #FFFFFF !important;
}
.cd-home-wrap .trust-cine .trust-card p {
position: relative; z-index: 1;
background: none !important;
-webkit-text-fill-color: rgba(214,228,242,0.66) !important;
color: rgba(214,228,242,0.66) !important;
}
/* ===== Featured bundle = solid gold card ===== */
.cd-home-wrap .bundle.featured {
background: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.74) 100%) !important;
border: 1.5px solid rgba(201,162,74,0.5) !important;
box-shadow: 0 40px 80px -32px rgba(30,58,95,0.34), 0 0 0 1px rgba(201,162,74,0.16) !important;
}
.cd-home-wrap .bundle.featured .eyebrow { color: var(--navy-deep) !important; -webkit-text-fill-color: var(--navy-deep) !important; background: none !important; }
.cd-home-wrap .bundle.featured p { color: rgba(13,27,42,0.72) !important; -webkit-text-fill-color: rgba(13,27,42,0.72) !important; background: none !important; }
.cd-home-wrap .bundle.featured p span { color: rgba(13,27,42,0.5) !important; }
.cd-home-wrap .bundle.featured .btn-cta {
background: #0D1B2A !important;
box-shadow: 0 14px 30px -12px rgba(13,27,42,0.5) !important;
}
.cd-home-wrap .bundle.featured .btn-cta:hover { background: #16273B !important; }
/* keep ribbon labels on one line */
.cd-home-wrap .bundle .ribbon { white-space: nowrap; }
/* ===== Science results grid (on navy band) ===== */
.cd-home-wrap .science-results::after {
content: "";
position: absolute; inset: auto -140px -160px auto;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(201,162,74,0.22), rgba(201,162,74,0));
pointer-events: none;
}
.cd-home-wrap .sci-grid { position: relative; z-index: 1; align-items: stretch; }
.cd-home-wrap .sci-card {
display: flex; flex-direction: column;
background: rgba(255,255,255,0.055);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 22px;
padding: 30px 26px;
text-align: left;
backdrop-filter: blur(6px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
transition: transform 320ms var(--ease), border-color 320ms var(--ease), background 320ms var(--ease);
}
.cd-home-wrap .sci-card:hover {
transform: translateY(-5px);
border-color: rgba(201,162,74,0.45);
background: rgba(255,255,255,0.08);
}
.cd-home-wrap .sci-card .sci-stat {
font-family: var(--display);
font-size: clamp(40px, 4vw, 54px);
font-weight: 800;
line-height: 0.92;
letter-spacing: -0.03em;
margin-bottom: 16px;
background: var(--grad-text-gold);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.cd-home-wrap .sci-card .sci-stat span { font-size: 0.42em; font-weight: 700; margin-left: 2px; -webkit-text-fill-color: rgba(230,196,117,0.85); }
.cd-home-wrap .sci-card h3 {
color: #FFFFFF; font-size: 18px; font-weight: 700;
letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 10px;
}
.cd-home-wrap .sci-card p {
color: rgba(220,232,244,0.66); font-size: 14px; line-height: 1.6; margin: 0;
}
/* ===== Trust strip (5 items) ===== */
.cd-home-wrap .trust-strip-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cd-home-wrap .tstrip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 16px; }
.cd-home-wrap .tstrip .dot {
width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center;
background: radial-gradient(circle at 50% 35%, rgba(201,162,74,0.20), rgba(201,162,74,0.05));
border: 1px solid rgba(201,162,74,0.42); color: var(--navy);
}
.cd-home-wrap .tstrip strong { font-size: 15px; font-weight: 700; color: var(--navy-deep); }
.cd-home-wrap .tstrip span { font-size: 12.5px; color: var(--ink-mute); line-height: 1.45; }
@media (max-width: 900px) {
.cd-home-wrap .trust-strip-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ===== Icon dot (why / goal cards) ===== */
.cd-home-wrap .idot {
width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
color: var(--navy);
background: radial-gradient(circle at 50% 35%, rgba(201,162,74,0.20), rgba(201,162,74,0.05));
border: 1px solid rgba(201,162,74,0.40); margin-bottom: 22px;
}
/* ===== Usage cards ===== */
.cd-home-wrap .usage-card { padding: 32px 28px; }
.cd-home-wrap .usage-card .k {
font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
margin-bottom: 14px;
color: var(--gold-deep) !important; -webkit-text-fill-color: var(--gold-deep) !important; background: none !important;
}
/* ===== Value + compare table ===== */
.cd-home-wrap .compare-wrap { border-radius: 24px; overflow: hidden; }
.cd-home-wrap .compare-wrap table { width: 100%; border-collapse: collapse; }
.cd-home-wrap .compare-wrap th, .cd-home-wrap .compare-wrap td { padding: 16px 18px; text-align: left; font-size: 15px; border-bottom: 1px solid rgba(13,27,42,0.08); }
.cd-home-wrap .compare-wrap th {
background: rgba(13,27,42,0.04); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-mute) !important; -webkit-text-fill-color: var(--ink-mute) !important;
}
.cd-home-wrap .compare-wrap tr.hl td { background: rgba(201,162,74,0.12); font-weight: 700; }
.cd-home-wrap .callout-gold {
margin-top: 22px; padding: 16px 18px; border-radius: 16px;
background: rgba(201,162,74,0.10); border: 1px solid rgba(201,162,74,0.26); font-weight: 700;
color: var(--gold-deep) !important; -webkit-text-fill-color: var(--gold-deep) !important;
}
/* ===== Benefits / goals ===== */
.cd-home-wrap .benefits-grid { display: grid; grid-template-columns: 0.98fr 1.02fr; gap: 26px; align-items: stretch; }
.cd-home-wrap .lifestyle-card { position: relative; border-radius: 28px; overflow: hidden; min-height: 520px; box-shadow: 0 30px 60px -28px rgba(13,27,42,0.42); }
.cd-home-wrap .lifestyle-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.cd-home-wrap .lifestyle-overlay { position: absolute; inset: auto 22px 22px 22px; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border-radius: 18px; padding: 18px 20px; }
.cd-home-wrap .lifestyle-overlay strong { display: block; margin-bottom: 8px; color: var(--navy-deep); font-size: 16px; }
.cd-home-wrap .lifestyle-overlay span { color: var(--ink-soft); line-height: 1.6; font-size: 14px; }
.cd-home-wrap .goal-list { display: grid; gap: 14px; }
.cd-home-wrap .goal-card { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 22px 24px; }
.cd-home-wrap .goal-card .idot { margin-bottom: 0; }
.cd-home-wrap .goal-card h3 { margin: 2px 0 6px; }
@media (max-width: 900px) {
.cd-home-wrap .benefits-grid { grid-template-columns: 1fr; }
}
/* ===== Standards (dark) + verify ===== */
.cd-home-wrap .standards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; position: relative; z-index: 1; }
.cd-home-wrap .standard-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; padding: 32px; }
.cd-home-wrap .standard-card h3 { color: #fff; margin: 0; }
.cd-home-wrap .standard-card ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.cd-home-wrap .standard-card li { padding: 14px 16px 14px 42px; position: relative; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: rgba(220,232,244,0.86); font-size: 14px; }
.cd-home-wrap .standard-card li::before { content: "✓"; position: absolute; left: 16px; color: var(--gold-bright); font-weight: 700; }
.cd-home-wrap .lookup { background: #fff; border-radius: 24px; padding: 32px; }
.cd-home-wrap .lookup h3 { margin: 0 0 10px; color: var(--navy-deep); -webkit-text-fill-color: var(--navy-deep); }
.cd-home-wrap .lookup .fauxinput { padding: 15px 16px; border-radius: 12px; border: 1px solid rgba(13,27,42,0.14); color: var(--ink-mute); font-size: 14px; margin: 16px 0; background: #F7FAFD; }
.cd-home-wrap .lookup .result { margin-top: 16px; font-size: 13px; color: var(--ink-soft); line-height: 1.6; background: rgba(116,138,105,0.10); border: 1px solid rgba(116,138,105,0.22); border-radius: 12px; padding: 14px 16px; }
.cd-home-wrap .lookup .result strong { color: var(--navy-deep); }
@media (max-width: 860px) {
.cd-home-wrap .standards-grid { grid-template-columns: 1fr; }
}
/* ===== Guarantee steps ===== */
.cd-home-wrap .step-card { padding: 32px 28px; }
.cd-home-wrap .step-num { width: 48px; height: 48px; border-radius: 999px; background: var(--grad-navy); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 20px; margin-bottom: 20px; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.cd-home-wrap .step-card h3 { margin: 0 0 8px; }
/* ===== Email band ===== */
.cd-home-wrap .email-band { background: linear-gradient(135deg, #1E3A5F 0%, #0D1B2A 100%); border-radius: 28px; padding: clamp(34px, 5vw, 60px); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: center; position: relative; overflow: hidden; }
.cd-home-wrap .email-band::after { content: ""; position: absolute; inset: auto -120px -140px auto; width: 360px; height: 360px; background: radial-gradient(circle, rgba(201,162,74,0.22), rgba(201,162,74,0)); pointer-events: none; }
.cd-home-wrap .email-band :is(h3, p) { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; position: relative; z-index: 1; }
.cd-home-wrap .email-band p { color: rgba(220,232,244,0.78) !important; -webkit-text-fill-color: rgba(220,232,244,0.78) !important; }
.cd-home-wrap .email-form { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.cd-home-wrap .email-form .fauxinput { flex: 1; min-width: 200px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.72); border-radius: 12px; padding: 15px 16px; font-size: 14px; }
@media (max-width: 860px) {
.cd-home-wrap .email-band { grid-template-columns: 1fr; }
}
/* ===== Design refinement: flat body copy in the funnel for cleaner hierarchy + AA contrast. Hero is intentionally excluded so it stays exactly as-is. ===== */
.cd-home-wrap > section:not(.bg-cta):not(.bg-navy):not(.hero-section) :is(p, .lede, .faq-body) {
background: none !important;
-webkit-text-fill-color: var(--ink-soft) !important;
color: var(--ink-soft) !important;
}
/* preserve the hero's original muted-label tone despite the global --ink-mute tweak */
.cd-home-wrap .hero-section .hero-stats .stat .lbl { color: #6B7C92 !important; }
/* ===== inline: product.html ===== */
/* PDP-specific styles */
.cd-home-wrap .thumb { padding: 0; border: 2px solid transparent; border-radius: 6px; transition: border-color 200ms; }
.cd-home-wrap .thumb.is-active { border-color: var(--ink); }
.cd-home-wrap .bundle-options { display: grid; gap: 8px; }
.cd-home-wrap .bundle-opt { cursor: pointer; }
.cd-home-wrap .bundle-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cd-home-wrap .bundle-card {
display: block;
border: 1.5px solid var(--line);
border-radius: 12px;
padding: 16px 18px;
transition: all 200ms var(--ease);
position: relative;
}
.cd-home-wrap .bundle-opt:hover .bundle-card { border-color: var(--ink-mute); }
.cd-home-wrap .bundle-opt input:checked + .bundle-card { border-color: var(--ink); background: var(--bone-soft); box-shadow: 0 0 0 4px rgba(23,22,20,0.04); }
.cd-home-wrap .bundle-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.cd-home-wrap .bundle-title { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; }
.cd-home-wrap .bundle-price { font-family: var(--serif); font-size: 22px; }
.cd-home-wrap .bundle-row.meta { margin-top: 4px; font-size: 12px; color: var(--ink-mute); }
.cd-home-wrap #sub-toggle::after {
content: ""; position: absolute;
width: 18px; height: 18px;
background: var(--bone);
border-radius: 999px;
top: 3px; left: 3px;
transition: transform 200ms var(--ease);
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.cd-home-wrap #sub-toggle:checked { background: var(--turmeric); }
.cd-home-wrap #sub-toggle:checked::after { transform: translateX(20px); }
.cd-home-wrap .pdp-acc { border-bottom: 1px solid var(--line); padding: 18px 0; }
.cd-home-wrap .pdp-acc summary {
list-style: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
display: flex; justify-content: space-between; align-items: center;
}
.cd-home-wrap .pdp-acc summary::-webkit-details-marker { display: none; }
.cd-home-wrap .pdp-acc summary::after { content: "+"; font-size: 20px; color: var(--ink-mute); }
.cd-home-wrap .pdp-acc[open] summary::after { content: "−"; }
.cd-home-wrap .pdp-acc-body { padding-top: 12px; font-size: 14px; color: var(--ink-soft); }
.cd-home-wrap .sticky-atc {
position: fixed; bottom: 0; left: 0; right: 0;
background: var(--bone);
border-top: 1px solid var(--line);
padding: 12px var(--gutter);
display: none;
justify-content: space-between;
align-items: center;
z-index: 50;
box-shadow: 0 -10px 30px -10px rgba(23,22,20,0.1);
}
/* three trust badges (before price) */
.cd-home-wrap .pdp-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
.cd-home-wrap .pdp-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bone-soft); font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.3; }
/* guarantee / free shipping reassurance (after price) */
.cd-home-wrap .pdp-reassure { display: grid; gap: 12px; margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bone-soft); }
.cd-home-wrap .pdp-reassure .re-item { display: flex; gap: 12px; align-items: flex-start; }
.cd-home-wrap .pdp-reassure .re-item div { display: flex; flex-direction: column; gap: 2px; }
.cd-home-wrap .pdp-reassure strong { font-size: 13.5px; color: var(--ink); }
.cd-home-wrap .pdp-reassure span { font-size: 12px; color: var(--ink-mute); }
/* order summary — consistent one-time vs subscription */
.cd-home-wrap .order-summary { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; background: var(--bone-soft); }
.cd-home-wrap .order-summary .os-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cd-home-wrap .os-left { display: flex; flex-direction: column; gap: 4px; }
.cd-home-wrap .os-billing { font-weight: 700; font-size: 15px; color: var(--ink); }
.cd-home-wrap .os-meta { font-size: 12.5px; color: var(--ink-mute); }
.cd-home-wrap .os-right { text-align: right; white-space: nowrap; }
.cd-home-wrap .os-was { display: block; font-size: 12px; color: var(--ink-mute); text-decoration: line-through; }
.cd-home-wrap .os-price { font-family: var(--serif); font-size: 26px; color: var(--ink); line-height: 1; }
.cd-home-wrap .os-save { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--turmeric); letter-spacing: 0.02em; }
/* review strip near the offer */
.cd-home-wrap .review-strip { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px,3vw,44px); align-items: center; background: var(--bone-soft); border: 1px solid var(--line-soft); border-radius: 18px; padding: clamp(20px,2.5vw,30px); }
.cd-home-wrap .rs-head { display: flex; flex-direction: column; gap: 6px; }
.cd-home-wrap .rs-score { font-size: 14px; color: var(--ink-mute); }
.cd-home-wrap .rs-score strong { font-family: var(--serif); font-size: 28px; color: var(--ink); }
.cd-home-wrap .rs-count { font-size: 12px; color: var(--ink-mute); }
.cd-home-wrap .rs-quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.cd-home-wrap .rs-q { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cd-home-wrap .rs-q p { font-size: 14px; line-height: 1.5; color: var(--ink); margin: 0; }
.cd-home-wrap .rs-q cite { font-style: normal; font-size: 11px; color: var(--ink-mute); }
.cd-home-wrap .rs-link { white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--navy); align-self: center; }
.cd-home-wrap .rs-link:hover { color: var(--gold-deep); }
/* compressed proof — expandable modules */
.cd-home-wrap .proof-modules { display: grid; gap: 14px; max-width: 1000px; }
.cd-home-wrap .proof-mod { border: 1px solid var(--line); border-radius: 16px; background: var(--bone); overflow: hidden; }
.cd-home-wrap .proof-mod > summary { list-style: none; cursor: pointer; padding: 22px 26px; display: flex; align-items: baseline; gap: 16px; }
.cd-home-wrap .proof-mod > summary::-webkit-details-marker { display: none; }
.cd-home-wrap .proof-mod > summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--ink-mute); }
.cd-home-wrap .proof-mod[open] > summary::after { content: "−"; }
.cd-home-wrap .pm-k { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--navy-deep); letter-spacing: -0.02em; }
.cd-home-wrap .pm-sum { font-size: 14px; color: var(--ink-mute); }
.cd-home-wrap .proof-mod-body { padding: 0 26px 28px; }
.cd-home-wrap .proof-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
@media (max-width: 900px) {
.cd-home-wrap .pdp-grid { display: flex; flex-direction: column; }
.cd-home-wrap .pdp-gallery { order: 1; grid-template-columns: 1fr !important; }
.cd-home-wrap .pdp-buybox { order: 2; position: static !important; }
.cd-home-wrap .pdp-gallery > div:first-child { order: 2; flex-direction: row !important; overflow-x: auto; gap: 8px; }
.cd-home-wrap .pdp-secondary { display: none !important; }
.cd-home-wrap .review-strip { grid-template-columns: 1fr !important; }
.cd-home-wrap .rs-quotes { grid-template-columns: 1fr !important; }
.cd-home-wrap .proof-steps { grid-template-columns: 1fr !important; }
.cd-home-wrap .reviews-head, .cd-home-wrap .review-grid, .cd-home-wrap .pairs-grid { grid-template-columns: 1fr !important; }
.cd-home-wrap .pdp-proof-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 16px !important; }
.cd-home-wrap .sticky-atc { display: flex; }
.cd-home-wrap { padding-bottom: 84px; }
}
/* ===== inline: science.html ===== */
.cd-home-wrap body[data-page="science"] { background: #F7F5EF; }
.cd-home-wrap body[data-page="science"]::before, .cd-home-wrap body[data-page="science"]::after { display: none !important; }
/* warm-matched header so it blends with the #F7F5EF ground */
.cd-home-wrap body[data-page="science"] .site-header {
background: linear-gradient(180deg, rgba(247,245,239,0.9) 0%, rgba(247,245,239,0.74) 100%);
border-bottom: 1px solid rgba(13,27,42,0.07);
}
.cd-home-wrap body[data-page="science"] .mobile-bar { background: rgba(247,245,239,0.94); }
.cd-home-wrap .wrapx { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px,4vw,56px); }
.cd-home-wrap .sci-eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); }
.cd-home-wrap .sci-mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
/* hero */
.cd-home-wrap .sci-hero { padding: clamp(40px,6vw,90px) 0 clamp(40px,5vw,64px); }
.cd-home-wrap .sci-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(48px,8.5vw,128px); line-height: 0.92; letter-spacing: -0.04em; color: var(--navy-deep); margin: 0; }
.cd-home-wrap .sci-hero h1 .mut { color: #97a3b3; }
.cd-home-wrap .sci-lede { font-size: clamp(18px,1.7vw,24px); line-height: 1.5; color: var(--ink-soft); max-width: 56ch; margin: clamp(28px,4vw,48px) 0 0; }
/* card shell */
.cd-home-wrap .pcard { background: #fff; border: 1px solid rgba(13,27,42,0.08); border-radius: 18px; box-shadow: 0 24px 56px -38px rgba(30,58,95,0.3); }
.cd-home-wrap .pmid { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); border-bottom: 1px solid rgba(201,162,74,0.6); padding-bottom: 3px; white-space: nowrap; }
.cd-home-wrap .pmid:hover { color: var(--navy-deep); }
/* featured study */
.cd-home-wrap .feat-study { padding: clamp(28px,3.5vw,52px); margin-bottom: clamp(56px,7vw,88px); }
.cd-home-wrap .feat-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.cd-home-wrap .feat-study h2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px,3.4vw,46px); letter-spacing: -0.03em; color: var(--navy-deep); margin: 6px 0 0; }
.cd-home-wrap .chart { width: 100%; height: auto; display: block; margin: clamp(20px,3vw,36px) 0 10px; }
.cd-home-wrap .legend { display: flex; gap: 28px; justify-content: center; font-size: 13px; color: var(--ink-soft); font-family: var(--mono); letter-spacing: 0.04em; flex-wrap: wrap; }
.cd-home-wrap .legend .sw { display: inline-block; width: 22px; height: 3px; vertical-align: middle; margin-right: 8px; border-radius: 2px; }
.cd-home-wrap .stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; border-top: 1px solid rgba(13,27,42,0.1); margin-top: clamp(24px,3vw,36px); padding-top: clamp(24px,3vw,32px); }
.cd-home-wrap .stat-row .num { font-family: var(--display); font-weight: 800; font-size: clamp(26px,2.6vw,40px); color: var(--navy-deep); letter-spacing: -0.02em; line-height: 1; }
.cd-home-wrap .stat-row .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-top: 10px; }
/* three results */
.cd-home-wrap .res-head { font-family: var(--display); font-weight: 800; font-size: clamp(34px,5vw,72px); line-height: 0.96; letter-spacing: -0.04em; color: var(--navy-deep); max-width: 16ch; margin: 0 0 clamp(36px,5vw,56px); }
.cd-home-wrap .res-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.cd-home-wrap .res-card { padding: clamp(26px,2.6vw,38px); display: flex; flex-direction: column; }
.cd-home-wrap .res-card .sci-eyebrow { margin-bottom: 14px; }
.cd-home-wrap .res-card h3 { font-family: var(--display); font-weight: 800; font-size: clamp(24px,2.2vw,30px); letter-spacing: -0.02em; color: var(--navy-deep); margin: 0 0 22px; line-height: 1.08; }
.cd-home-wrap .bar-row { margin-bottom: 18px; }
.cd-home-wrap .bar-row .bl { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
.cd-home-wrap .bar-row .bl .v { font-weight: 700; color: var(--navy-deep); }
.cd-home-wrap .track { height: 9px; background: #EDE6D2; border-radius: 999px; overflow: hidden; }
.cd-home-wrap .track > span { display: block; height: 100%; border-radius: 999px; background: var(--navy); }
.cd-home-wrap .track.gold > span { background: var(--grad-gold); }
.cd-home-wrap .res-card p { font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); margin: 8px 0 22px; }
.cd-home-wrap .res-card .pmid { align-self: flex-start; margin-top: auto; }
.cd-home-wrap .res-card.navy { background: var(--grad-navy); border: none; }
.cd-home-wrap .res-card.navy .sci-eyebrow { color: rgba(230,196,117,0.85); }
.cd-home-wrap .res-card.navy h3, .cd-home-wrap .res-card.navy p { color: #fff; }
.cd-home-wrap .res-card.navy p { color: rgba(220,232,244,0.78); }
.cd-home-wrap .res-card.navy .big { font-family: var(--display); font-weight: 800; font-size: clamp(64px,7vw,104px); line-height: 0.9; letter-spacing: -0.03em; color: var(--gold-bright); margin: 8px 0 18px; }
.cd-home-wrap .res-card.navy .pmid { color: var(--gold-bright); border-color: rgba(230,196,117,0.5); }
/* bibliography */
.cd-home-wrap .biblio { margin-top: clamp(56px,7vw,96px); }
.cd-home-wrap .biblio h2 { font-family: var(--display); font-weight: 800; font-size: clamp(30px,4.4vw,60px); line-height: 0.98; letter-spacing: -0.035em; color: var(--navy-deep); max-width: 20ch; margin: 14px 0 clamp(32px,4vw,48px); }
.cd-home-wrap .btable { width: 100%; border-collapse: collapse; }
.cd-home-wrap .btable tr { border-top: 1px solid rgba(13,27,42,0.1); }
.cd-home-wrap .btable td { padding: 18px 12px; font-size: 15px; color: var(--ink-soft); vertical-align: middle; }
.cd-home-wrap .btable .yr { font-family: var(--mono); color: var(--ink-mute); width: 64px; }
.cd-home-wrap .btable .au { font-weight: 600; color: var(--navy-deep); white-space: nowrap; }
.cd-home-wrap .btable .jr { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.cd-home-wrap .btable .fn { line-height: 1.45; }
.cd-home-wrap .btable .lk { text-align: right; }
.cd-home-wrap .btable .lk a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); border-bottom: 1px solid rgba(201,162,74,0.6); padding-bottom: 2px; }
.cd-home-wrap .biblio .note { font-size: 13px; color: var(--ink-mute); margin-top: 22px; }
/* cta */
.cd-home-wrap .sci-cta { margin-top: clamp(56px,7vw,96px); padding: clamp(36px,4vw,60px); display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.cd-home-wrap .sci-cta h2 { font-family: var(--display); font-weight: 800; font-size: clamp(30px,3.6vw,52px); line-height: 0.98; letter-spacing: -0.03em; color: var(--navy-deep); margin: 0; max-width: 16ch; }
.cd-home-wrap .sci-cta .cta-r { text-align: right; }
.cd-home-wrap .sci-cta .gtxt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-top: 12px; }
@media (max-width: 900px) {
.cd-home-wrap .res-grid { grid-template-columns: 1fr; }
.cd-home-wrap .stat-row { grid-template-columns: 1fr 1fr; gap: 28px; }
.cd-home-wrap .btable .jr { display: none; }
}
/* ===== inline: shop.html ===== */
/* ----- benefit hook cards ----- */
.cd-home-wrap .hook-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cd-home-wrap .hook-card {
display: flex; flex-direction: column;
padding: 30px 28px;
border-radius: var(--radius-lg);
transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.cd-home-wrap .hook-card:hover { transform: translateY(-6px); box-shadow: 0 34px 64px -30px rgba(30,58,95,0.32); border-color: rgba(201,162,74,0.5); }
.cd-home-wrap .hook-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.cd-home-wrap .hook-icon {
width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex-shrink: 0;
background: radial-gradient(circle at 50% 35%, rgba(201,162,74,0.2), rgba(201,162,74,0.05));
border: 1px solid rgba(201,162,74,0.4);
}
.cd-home-wrap .hook-stat {
font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--gold-deep);
background: rgba(201,162,74,0.12); border: 1px solid rgba(201,162,74,0.28);
padding: 6px 11px; border-radius: 999px; text-align: right; line-height: 1.2;
}
.cd-home-wrap .hook-stat sup { font-size: 0.7em; }
.cd-home-wrap .hook-card h3 { font-size: 24px; line-height: 1.12; color: var(--navy-deep); margin: 0 0 12px; }
.cd-home-wrap .hook-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 22px; }
.cd-home-wrap .hook-cta { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 7px; }
.cd-home-wrap .hook-card:hover .hook-cta { color: var(--gold-deep); }
/* ----- featured product band ----- */
.cd-home-wrap .feature-band {
display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 56px);
padding: clamp(24px, 3vw, 40px); border-radius: 30px; align-items: center;
}
.cd-home-wrap .feature-media { position: relative; }
.cd-home-wrap .feature-media .prod-chip { position: absolute; top: 16px; left: 16px; padding: 6px 13px; border-radius: 999px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.cd-home-wrap .chip-gold-solid { background: var(--grad-gold); color: var(--navy-deep); }
.cd-home-wrap .feature-supply { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cd-home-wrap .supply-pill {
border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; text-align: left;
background: rgba(255,255,255,0.5);
}
.cd-home-wrap .supply-pill.is-pop { border-color: rgba(201,162,74,0.6); background: rgba(201,162,74,0.08); }
.cd-home-wrap .supply-pill strong { display: block; font-family: var(--display); font-size: 16px; color: var(--navy-deep); margin-bottom: 3px; }
.cd-home-wrap .supply-pill span { font-size: 11.5px; color: var(--ink-mute); }
/* ----- indications list ----- */
.cd-home-wrap .ind-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cd-home-wrap .ind-list li {
position: relative; padding: 16px 18px 16px 50px;
background: rgba(255,255,255,0.55); border: 1px solid var(--line-soft); border-radius: 14px;
font-size: 14.5px; color: var(--ink-soft); line-height: 1.5;
}
.cd-home-wrap .ind-list li::before {
content: "✓"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
background: var(--grad-gold); color: var(--navy-deep); font-size: 12px; font-weight: 700;
}
.cd-home-wrap .num-chip { width: 28px; height: 28px; border-radius: 999px; background: var(--gold); color: var(--navy-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
@media (max-width: 900px) {
.cd-home-wrap .hook-grid { grid-template-columns: 1fr 1fr; }
.cd-home-wrap .feature-band { grid-template-columns: 1fr; }
.cd-home-wrap .sub-callout { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
.cd-home-wrap .hook-grid { grid-template-columns: 1fr; }
.cd-home-wrap .feature-supply { grid-template-columns: 1fr; }
}
/* ===== inline: site-map.html ===== */
.cd-home-wrap .page-card {
display: block;
padding: 28px;
background: var(--bone-soft);
border: 1px solid var(--line-soft);
border-radius: 18px;
transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.cd-home-wrap .page-card:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -20px rgba(23,22,20,0.15); }
.cd-home-wrap .page-card .mono { color: var(--turmeric); }
.cd-home-wrap .page-card h3 { font-size: 28px; margin: 12px 0 8px; }
.cd-home-wrap .page-card p { font-size: 14px; color: var(--ink-soft); margin: 0; }
.cd-home-wrap .spec-table { display: grid; gap: 0; border-top: 1px solid rgba(239,233,221,0.15); }
.cd-home-wrap .spec-row {
display: grid;
grid-template-columns: 180px 1fr 140px 140px;
gap: 24px;
padding: 20px 0;
border-bottom: 1px solid rgba(239,233,221,0.15);
align-items: start;
font-size: 14px;
line-height: 1.5;
}
.cd-home-wrap .spec-row > span:first-child { color: var(--turmeric); }
.cd-home-wrap .spec-row.spec-head { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
.cd-home-wrap .spec-row.spec-head > span:first-child { color: rgba(239,233,221,0.55); }
.cd-home-wrap .info-item { font-size: 15px; line-height: 1.65; padding-left: 20px; position: relative; color: var(--ink-soft); }
.cd-home-wrap .info-item::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 999px; background: var(--turmeric); }
.cd-home-wrap .info-item strong { color: var(--ink); font-weight: 600; font-family: var(--serif); font-size: 18px; display: block; margin-bottom: 4px; letter-spacing: -0.01em; }
.cd-home-wrap code { font-family: var(--mono); font-size: 12px; background: var(--bone-deep); padding: 2px 6px; border-radius: 4px; }
@media (max-width: 900px) {
.cd-home-wrap .page-grid { grid-template-columns: 1fr 1fr !important; }
.cd-home-wrap .spec-row { grid-template-columns: 1fr; gap: 8px; }
.cd-home-wrap .info-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
.cd-home-wrap .page-grid { grid-template-columns: 1fr !important; }
}
/* ============ MERGED KSM-66 SOURCING + JOURNEY (src-sec) ============ */
.cd-home-wrap .src-sec { padding: clamp(56px,7vw,104px) 0; }
.cd-home-wrap .src-intro { text-align: center; max-width: none; margin: 0; }
.cd-home-wrap .src-intro h2 { font-family: var(--display); font-weight: 800; color: var(--navy-deep); letter-spacing: -0.03em; font-size: clamp(28px,3.6vw,46px); line-height: 1.04; margin: 12px 0 0; text-wrap: balance; }
.cd-home-wrap .src-intro .lede { font-size: clamp(15px,1.3vw,18px); line-height: 1.6; color: var(--ink-soft); max-width: 52ch; margin: 16px auto 0; }
.cd-home-wrap .src-top { display: grid; grid-template-columns: 400px 1fr; gap: clamp(28px,4vw,56px); align-items: center; margin-bottom: clamp(40px,5vw,64px); }
.cd-home-wrap .src-video { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 18px 44px -24px rgba(13,27,42,.45); aspect-ratio: 16/9; background: #0D1B2A; max-width: 460px; width: 100%; margin: 0 auto; }
.cd-home-wrap .src-video video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cd-home-wrap .src-video-badge { position: absolute; top: 16px; left: 16px; background: rgba(13,27,42,.82); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(6px); }
.cd-home-wrap .src-copy h3 { font-family: var(--display); font-weight: 700; font-size: clamp(24px,2.4vw,32px); line-height: 1.1; color: var(--navy-deep); margin: 0 0 14px; letter-spacing: -0.02em; }
.cd-home-wrap .src-copy p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 22px; }
.cd-home-wrap .src-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-bottom: 24px; }
.cd-home-wrap .src-stat { background: linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.42)); border: 1px solid rgba(255,255,255,.65); border-radius: 16px; padding: 16px 18px; box-shadow: 0 12px 30px -18px rgba(30,58,95,.2); }
.cd-home-wrap .src-stat .n { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--navy-deep); line-height: 1; }
.cd-home-wrap .src-stat .l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-top: 6px; font-weight: 600; }
.cd-home-wrap .src-link { font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--navy-deep); text-decoration: none; }
.cd-home-wrap .src-link span { color: var(--gold-deep); }
.cd-home-wrap .src-journey { border-top: 1px solid var(--line); padding-top: clamp(32px,4vw,48px); }
.cd-home-wrap .src-journey-h { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 28px; }
.cd-home-wrap .src-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; position: relative; }
.cd-home-wrap .src-step { position: relative; }
.cd-home-wrap .src-step .sn { font-family: var(--display); font-weight: 800; font-size: 14px; color: #fff; background: var(--navy); width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; margin-bottom: 14px; }
.cd-home-wrap .src-step h4 { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--navy-deep); margin: 0 0 8px; line-height: 1.2; }
.cd-home-wrap .src-step p { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.cd-home-wrap .src-step:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: 42px; right: -12px; height: 1px; background: linear-gradient(90deg,var(--gold),transparent); }
@media (max-width: 900px) {
.cd-home-wrap .src-top { grid-template-columns: 1fr; }
.cd-home-wrap .src-steps { grid-template-columns: 1fr 1fr; }
.cd-home-wrap .src-step::after { display: none; }
}
@media (max-width: 560px) {
.cd-home-wrap .src-steps { grid-template-columns: 1fr; }
.cd-home-wrap .src-stats { grid-template-columns: 1fr 1fr; }
}
/* ============ TESTIMONIALS (tst-sec, consolidated) ============ */
.cd-home-wrap .tst-sec { padding: clamp(36px,4.5vw,64px) 0; border-top: 1px solid rgba(13,27,42,0.05); }
.cd-home-wrap .tst-intro { max-width: 820px; margin: 0 0 6px; }
.cd-home-wrap .tst-head { font-family: var(--display); font-weight: 800; color: var(--navy-deep); letter-spacing: -0.03em; font-size: clamp(26px,3.2vw,42px); line-height: 1.06; margin: 14px 0 0; }
/* ---- single-offer block on goal pages (replaces the 1/3/6 ladder) ---- */
.ob-offer2{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px;margin:0 auto;text-align:left}
.ob-offer2-card{display:flex;flex-direction:column;gap:7px;padding:22px 20px;border-radius:16px;border:1.5px solid var(--line);background:#fff;text-decoration:none;color:var(--navy-deep);transition:transform .2s ease,box-shadow .2s ease}
.ob-offer2-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(13,27,42,.10)}
.ob-offer2-card--sub{border-color:var(--gold);background:#fffdf7;box-shadow:0 12px 30px rgba(201,169,97,.16)}
.ob-offer2-tag{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--gold);align-self:flex-start;padding:5px 11px;border-radius:999px}
.ob-offer2-head{font-family:var(--display);font-weight:800;font-size:20px;color:var(--navy-deep)}
.ob-offer2-price b{font-size:26px;color:var(--navy-deep)}
.ob-offer2-price s{color:#8a8f98;margin-left:5px;font-weight:600}
.ob-offer2-price em{font-style:normal;color:var(--ink-soft);font-size:13px;margin-left:3px}
.ob-offer2-meta{font-size:13px;color:var(--ink-soft);line-height:1.5}
.ob-offer2-perday{font-size:12.5px;font-weight:800;color:var(--gold-bright)}
.ob-offer2-go{margin-top:6px;font-weight:800;color:var(--navy-deep)}
.ob-offer-guarantee{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;font-size:13px;color:var(--ink-soft)}
@media(max-width:640px){.ob-offer2{grid-template-columns:1fr;max-width:420px}}
/* ---- inline lead-capture band on goal pages ---- */
.ob-capture-band{padding:clamp(40px,5vw,72px) 0;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(248,252,254,.85))}
.ob-capture-row{display:flex;gap:10px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.ob-capture-input{flex:1 1 240px;min-width:200px;padding:14px 18px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;background:#fff}
.ob-capture-input:focus{outline:none;border-color:var(--gold)}
.ob-capture-band .btn{flex:0 0 auto}
.ob-capture-done{font-size:16px;font-weight:700;color:var(--navy-deep)}
@media(max-width:520px){.ob-capture-row{flex-direction:column}.ob-capture-band .btn{width:100%}}