/* =============================================================================
 * NVO Health  -  css/nvo.css
 * Component styles. Depends on css/tokens.css (must load first).
 * Mobile-first; breakpoints ~640 / 1024 / 1440 per the brief (section 26).
 * ===========================================================================*/

/* --- Reset / base --------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }
body {
	margin: 0; background: var(--bg); color: var(--text);
	font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-head); color: var(--navy); line-height: var(--lh-tight); font-weight: 700; margin: 0 0 var(--s-4); }
h1 { font-size: clamp(2.25rem, 5vw, var(--fs-h1)); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3.5vw, var(--fs-h2)); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--s-4); }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-600); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 3px; }

/* --- Layout helpers ------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
@media (min-width:1600px){ .container { max-width: 1520px; } }
@media (min-width:1024px){ .container { padding: 0 var(--s-6); } }
.section { padding: var(--s-8) 0; }
.section--tight { padding: var(--s-7) 0; }
.eyebrow { font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); font-weight: 700; margin: 0 0 var(--s-3); }
.lead { font-size: var(--fs-lead); color: var(--slate); }
.text-center { text-align: center; }
.muted { color: var(--slate); }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; z-index:2000; }
.skip-link:focus { left:8px; top:8px; }

/* --- Buttons -------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700;
	font-size:.95rem; padding:14px 26px; border-radius:var(--r-pill); border:1px solid transparent;
	cursor:pointer; text-decoration:none; box-shadow:0 6px 18px rgba(16,42,67,.12);
	transition:background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s; line-height:1; }
.btn:hover { text-decoration:none; transform:translateY(-2px); box-shadow:0 12px 30px rgba(16,42,67,.20); }
.btn:active { transform:translateY(0); }
.btn--primary { background:linear-gradient(135deg, var(--teal), #13a5a7); color:#fff; }
.btn--primary:hover { background:linear-gradient(135deg, var(--teal-600), var(--teal)); color:#fff; }
.btn--gold { background:var(--gold); color:var(--navy); }
.btn--gold:hover { background:var(--gold-600); color:var(--navy); }
.btn--ghost { background:#fff; color:var(--navy); border-color:var(--border); }
.btn--ghost:hover { border-color:var(--teal); color:var(--teal); }
.btn--on-dark { background:#fff; color:var(--navy); }
.btn--block { width:100%; justify-content:center; }
.btn--lg { padding:16px 28px; font-size:1.02rem; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* --- Header / nav --------------------------------------------------------- */
.site-header { background:var(--navy); position:sticky; top:0; z-index:1000; }
.site-header .container { display:flex; align-items:center; gap:var(--s-5); min-height:var(--header-h); }
.brand { display:flex; align-items:baseline; gap:2px; text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand__nvo { font-family:var(--font-head); font-weight:800; font-size:2.2rem; letter-spacing:.02em; color:#fff; }
.brand__o { background:linear-gradient(135deg,var(--teal),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand__health { font-family:var(--font-head); font-weight:600; font-size:.86rem; letter-spacing:.42em; color:#cfe0e5; margin-left:5px; text-transform:uppercase; }
.mainnav { margin-left:auto; }
.mainnav ul { list-style:none; display:flex; align-items:center; gap:var(--s-5); margin:0; padding:0; }
.mainnav a { color:#DCE7EC; font-size:.95rem; font-weight:500; padding:8px 2px; display:inline-flex; align-items:center; white-space:nowrap; }
.nav-caret { font-size:.62em; opacity:.65; margin-left:4px; }
.mainnav a:hover, .mainnav a[aria-current="page"] { color:#fff; text-decoration:none; box-shadow:inset 0 -2px 0 var(--teal); }
.header-actions { display:flex; align-items:center; gap:var(--s-3); }
.header-actions .btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.header-actions .btn--ghost:hover { border-color:#fff; color:#fff; }
.nav-toggle { display:none; background:transparent; border:0; color:#fff; font-size:1.5rem; cursor:pointer; padding:8px; }

@media (max-width: 1023px){
	.mainnav { position:fixed; inset:var(--header-h) 0 0 auto; width:min(320px,86vw); background:var(--navy-900);
		transform:translateX(100%); transition:transform .2s ease; padding:var(--s-5); overflow:auto; }
	.mainnav.open { transform:translateX(0); }
	.mainnav ul { flex-direction:column; gap:var(--s-2); }
	.mainnav a { padding:12px 4px; font-size:1.05rem; display:block; white-space:normal; }
	.nav-toggle { display:inline-block; margin-left:auto; }
	.header-actions .btn--ghost { display:none; }        /* keep Get Started persistent on mobile */
}

/* --- Hero (light, photo-forward, matching mockup) ------------------------ */
.hero { position:relative; background:#e9eef0; color:var(--text); overflow:hidden; }
.hero__bg { position:absolute; inset:0; background-repeat:no-repeat; background-size:cover; background-position:center 30%; }
@media (min-width:1024px){
	/* Show the full figure on the rock. A slight zoom + right anchor pans the
	   subject left of the card; the hero content runs edge-to-edge (card tracks
	   the true right edge) while the text stays aligned to the page container. */
	.hero { min-height:clamp(640px, 74vh, 720px); }
	.hero__bg { background-size:105% auto; background-position:100% 50%; }
	.hero .container { max-width:none; padding-left:max(24px, (100vw - var(--container)) / 2); padding-right:48px; }
	.hero__grid { align-items:center; padding-top:var(--s-6); padding-bottom:var(--s-6); }
}
@media (min-width:1600px){
	/* on wide screens pull the path card in from the right edge a touch */
	.hero .container { padding-right:6vw; }
}
/* light scrim keeps dark headline legible over the image's left side */
.hero__scrim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(243,245,247,.96) 0%, rgba(243,245,247,.8) 18%, rgba(243,245,247,.32) 34%, rgba(243,245,247,0) 50%); }
.hero__grid { position:relative; display:grid; grid-template-columns:2.2fr .68fr; gap:var(--s-7); align-items:start; padding-top:var(--s-8); padding-bottom:var(--s-8); }
.hero__content { max-width:36rem; }
.hero__eyebrow { color:var(--gold-600); letter-spacing:.16em; }
.hero h1 { color:var(--navy); margin-bottom:var(--s-4); }
.hero__body { color:var(--slate); font-size:var(--fs-lead); max-width:34ch; }
.hero__cta { display:flex; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-5); }
@media (max-width:1023px){
	.hero__grid { grid-template-columns:1fr; }
	.hero__scrim { background:linear-gradient(180deg, rgba(243,245,247,.95) 0%, rgba(243,245,247,.72) 55%, rgba(243,245,247,.45) 100%); }
}

/* --- Trust strip (light band beneath the hero) --------------------------- */
.trust-strip { background:#fff; border-bottom:1px solid var(--border); }
.trust-strip .container { display:flex; flex-wrap:wrap; gap:var(--s-7); padding:var(--s-4) var(--s-5); color:var(--slate); font-size:.92rem; }
.trust-strip span { display:inline-flex; align-items:center; gap:8px; }

/* --- Guided path selector ------------------------------------------------- */
.path-card { background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:var(--s-5); }
.path-card h2 { font-size:1.35rem; margin-bottom:4px; }
.path-card p { color:var(--slate); font-size:.95rem; margin-bottom:var(--s-4); }
.path-option { display:flex; align-items:center; gap:var(--s-3); width:100%; text-align:left; background:#fff;
	border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; margin-bottom:10px;
	color:var(--navy); font-weight:600; cursor:pointer; transition:border-color .15s, box-shadow .15s; text-decoration:none; }
.path-option:hover { border-color:var(--teal); box-shadow:var(--shadow-sm); color:var(--navy); text-decoration:none; }
.path-option .ico { color:var(--teal); flex:0 0 auto; font-size:1.15rem; width:24px; text-align:center; }
.path-option .arrow { margin-left:auto; color:var(--slate); }

/* --- Generic card grid ---------------------------------------------------- */
.grid { display:grid; gap:var(--s-5); }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
.grid--5 { grid-template-columns:repeat(5,1fr); }
@media (max-width:1023px){ .grid--4,.grid--5{ grid-template-columns:repeat(2,1fr);} .grid--3{grid-template-columns:1fr;} }
@media (max-width:640px){ .grid--2,.grid--4,.grid--5{ grid-template-columns:1fr; } }

.card { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-5); box-shadow:var(--shadow-sm); }
.card--feature { text-align:center; }
.card__icon { width:56px; height:56px; border-radius:50%; background:var(--teal-050); color:var(--teal);
	display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin:0 auto var(--s-4); }
.card h3 { font-size:1.15rem; margin-bottom:8px; }
.card p { color:var(--slate); font-size:.94rem; }
.card__cta { color:var(--teal); font-weight:700; font-size:.9rem; display:inline-flex; gap:6px; align-items:center; }

/* --- Philosophy (Navigate/Vitalize/Optimize) ------------------------------ */
.philosophy { position:relative; }
.philosophy .grid--3 { align-items:start; }
.phil-step { text-align:center; position:relative; }
.phil-step__ring { width:96px; height:96px; border-radius:50%; background:#fff; border:1px solid var(--border);
	color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto var(--s-4); box-shadow:var(--shadow-sm); }
.phil-step h3 { color:var(--teal); font-size:1.5rem; }
.phil-connector { display:none; }
@media (min-width:1024px){
	.phil-connector { display:block; position:absolute; top:48px; height:2px; border-top:2px dashed var(--border); }
}

/* --- Trust panel (dark) --------------------------------------------------- */
.trust-panel { background:var(--navy); color:#fff; border-radius:var(--r-lg); padding:var(--s-7); }
.trust-panel h2 { color:#fff; }
.trust-panel .lead { color:#C9D6DD; }
.trust-stats { display:flex; flex-wrap:wrap; gap:var(--s-7); margin-top:var(--s-5); }
.trust-stats .stat b { display:block; font-family:var(--font-head); font-size:1.5rem; color:#fff; }
.trust-stats .stat span { color:#AEC0C8; font-size:.85rem; }

/* --- Compliance / disclaimer components ----------------------------------- */
.ruo-badge { display:inline-block; background:#FBEFD6; color:#7A5B12; border:1px solid #E8D08A;
	font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:4px 9px; border-radius:var(--r-pill); }
.disclaimer { background:#fff; border:1px solid var(--border); border-left:4px solid var(--teal);
	border-radius:var(--r-sm); padding:14px 16px; font-size:.85rem; color:var(--slate); margin:var(--s-4) 0; }
.disclaimer--warn { border-left-color:var(--warning); }
.disclaimer strong { color:var(--text); }
.legal-flag { display:inline-block; background:#FCE8E6; color:#8A2A26; border:1px dashed #D98B87;
	font-size:.7rem; font-weight:700; letter-spacing:.03em; padding:2px 7px; border-radius:4px; margin-left:6px; vertical-align:middle; }
.notice-bar { background:var(--teal-050); border-top:1px solid #CFE6E6; border-bottom:1px solid #CFE6E6;
	color:#0B5B5C; font-size:.85rem; text-align:center; padding:8px 16px; }

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumbs { font-size:.85rem; color:var(--slate); padding:var(--s-4) 0; }
.crumbs a { color:var(--slate); }
.crumbs a:hover { color:var(--teal); }
.crumbs .sep { margin:0 8px; color:var(--border); }

/* --- Product cards -------------------------------------------------------- */
.product-card { background:transparent; border:0; border-radius:var(--r-lg); overflow:visible; display:flex; flex-direction:column; }
.product-card__media { background:transparent; display:flex; align-items:center; justify-content:center; color:var(--teal); font-size:2.2rem; }
.product-card__body { padding:var(--s-4); display:flex; flex-direction:column; gap:6px; flex:1; }
.product-card__cat { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--slate); }
.product-card__name { font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:1.05rem; }
.product-card__seq { font-size:.82rem; color:var(--slate); }
.product-card__meta { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:var(--s-3); }
.product-card__price { font-family:var(--font-head); font-weight:800; color:var(--navy); font-size:1.15rem; }
.badge { display:inline-block; font-size:.72rem; font-weight:700; padding:3px 8px; border-radius:var(--r-pill); }
.badge--ok { background:#E4F3EC; color:#1F6B52; }
.badge--out { background:#F3E5E5; color:#8A2A26; }
.badge--soon { background:#EDEFF2; color:#5C6B78; }

/* --- Forms ---------------------------------------------------------------- */
.field { margin-bottom:var(--s-4); }
.field label { display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; color:var(--navy); }
.field input, .field select, .field textarea {
	width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:var(--r-sm);
	font:inherit; font-size:.95rem; background:#fff; color:var(--text); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,139,141,.15); }
.field .hint { font-size:.8rem; color:var(--slate); margin-top:4px; }
.inline-form { display:flex; gap:8px; }
.inline-form input { flex:1; }

/* --- Alerts / flash ------------------------------------------------------- */
.alert { border-radius:var(--r-sm); padding:12px 15px; font-size:.92rem; margin-bottom:var(--s-4); border:1px solid; }
.alert--success { background:#E7F4EF; border-color:#B9DECD; color:#1F6B52; }
.alert--error { background:#FBEAE9; border-color:#EBB9B7; color:#8A2A26; }
.alert--info { background:var(--teal-050); border-color:#BFE0E0; color:#0B5B5C; }

/* --- Tables (responsive) -------------------------------------------------- */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-md); }
table.data { width:100%; border-collapse:collapse; font-size:.9rem; background:#fff; }
table.data th, table.data td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--border); }
table.data th { background:#F7F9FA; color:var(--navy); font-family:var(--font-head); font-weight:700; }

/* --- Newsletter strip ----------------------------------------------------- */
.news-strip { background:#fff; border-top:1px solid var(--border); }
.news-strip .container { display:flex; align-items:center; gap:var(--s-6); flex-wrap:wrap; padding:var(--s-6) var(--s-5); }
.news-strip .gift { width:52px;height:52px;border-radius:50%;background:#FBEFD6;color:var(--gold-600);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:0 0 auto; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background:var(--navy); color:#C9D6DD; font-size:.9rem; }
.site-footer .container { padding:var(--s-8) var(--s-5) var(--s-6); }
.footer-cols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s-6); }
@media (max-width:900px){ .footer-cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-cols{ grid-template-columns:1fr; } }
.site-footer h4 { color:#fff; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--s-4); }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin-bottom:10px; }
.site-footer a { color:#C9D6DD; }
.site-footer a:hover { color:#fff; }
.footer-legal { border-top:1px solid rgba(255,255,255,.12); margin-top:var(--s-6); padding-top:var(--s-5); font-size:.8rem; color:#9FB2BB; line-height:1.6; }

/* --- Utility -------------------------------------------------------------- */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;} .stack>*+*{margin-top:var(--s-4);}
.coming-soon { text-align:center; padding:var(--s-9) var(--s-5); }
.coming-soon .badge--soon { font-size:.85rem; padding:6px 14px; }

/* --- Interior page intro (spans full content wid
/* --- Product options: size bubbles + discount tiers + stepper ------------ */
.opt-group { margin:var(--s-5) 0; }
.opt-label { display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--slate); font-weight:700; margin-bottom:10px; }
.size-bubbles { display:flex; flex-wrap:wrap; gap:10px; }
.size-bubble { min-width:64px; padding:12px 16px; border-radius:var(--r-pill); border:1.5px solid var(--border); background:#fff; color:var(--navy); font-family:var(--font-head); font-weight:700; font-size:.95rem; cursor:pointer; transition:border-color .15s, background .15s, color .15s, box-shadow .15s; }
.size-bubble:hover { border-color:var(--teal); }
.size-bubble.is-selected { background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:var(--shadow-sm); }
.size-bubble.is-oos { opacity:.45; text-decoration:line-through; cursor:not-allowed; }
.price-row { display:flex; align-items:baseline; gap:10px; margin:var(--s-4) 0; flex-wrap:wrap; }
.price-now { font-family:var(--font-head); font-weight:800; font-size:2rem; color:var(--navy); }
.price-unit { font-size:.8rem; color:var(--slate); }
.tier-bubbles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tier-bubble { position:relative; padding:16px 10px 12px; border-radius:var(--r-md); border:1.5px solid var(--border); background:#fff; cursor:pointer; text-align:center; transition:border-color .15s, box-shadow .15s; }
.tier-bubble:hover { border-color:var(--teal); }
.tier-bubble.is-active { border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,139,141,.15); }
.tier-bubble.is-best { border-color:var(--teal); }
.tier-title { display:block; font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:.95rem; }
.tier-sub { display:block; color:var(--teal); font-size:.8rem; font-weight:600; margin-top:2px; }
.tier-badge { position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--navy); font-size:.62rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap; }
.buy-row { display:flex; gap:12px; align-items:center; margin-top:var(--s-4); flex-wrap:wrap; }
.qty-stepper { display:inline-flex; align-items:center; border:1.5px solid var(--border); border-radius:var(--r-pill); overflow:hidden; }
.qty-btn { width:42px; height:46px; border:0; background:#fff; color:var(--navy); font-size:1.2rem; cursor:pointer; line-height:1; }
.qty-btn:hover { background:var(--bg); }
.qty-stepper input { width:52px; height:46px; border:0; border-left:1px solid var(--border); border-right:1px solid var(--border); text-align:center; font:inherit; font-weight:700; color:var(--navy); }
.btn--grad { background:linear-gradient(135deg,var(--teal),#13a5a7); color:#fff; border:0; }
.btn--grad:hover { background:linear-gradient(135deg,var(--teal-600),var(--teal)); color:#fff; }
@media (max-width:520px){ .tier-bubbles{ grid-template-columns:1fr; } .buy-row .btn--grad{ flex:1; } }

/* --- Scroll reveal + page-load transitions ------------------------------- */
html.reveal-on [data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; will-change:opacity, transform; }
html.reveal-on [data-reveal].reveal-in { opacity:1; transform:none; }
.hero__content { opacity:0; transform:translateY(14px); animation:nvoFadeUp .7s ease forwards; }
.hero .path-card { opacity:0; transform:translateY(14px); animation:nvoFadeUp .7s ease .12s forwards; }
@keyframes nvoFadeUp { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
	[data-reveal], [data-reveal].reveal-in, .hero__content, .hero .path-card { opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
}

/* --- Bubbly + animated theme ------------------------------------------------
 * Dark animated "stage" (product hero / feature bands), circular glowing size
 * bubbles, drifting starfield + glow orbs, and payment chips. Navy/teal/gold. */
.stage-dark { position:relative; overflow:hidden; color:#fff;
	background:radial-gradient(120% 130% at 72% 18%, #1b4a63 0%, #102A43 46%, #0B1E30 100%); border-radius:var(--r-lg); }
.stage-dark h1, .stage-dark h2, .stage-dark h3 { color:#fff; }
.stage-dark .muted { color:#AEC0C8; }
.stage-dark .ruo-badge { background:rgba(212,175,55,.16); color:#F1DA9A; border-color:rgba(212,175,55,.4); }

/* drifting starfield */
.stars { position:absolute; inset:-50%; pointer-events:none; opacity:.55;
	background-image:
		radial-gradient(1.6px 1.6px at 20% 30%, rgba(255,255,255,.8) 50%, transparent 51%),
		radial-gradient(1.4px 1.4px at 70% 60%, rgba(255,255,255,.55) 50%, transparent 51%),
		radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.5) 50%, transparent 51%),
		radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,.45) 50%, transparent 51%),
		radial-gradient(1.6px 1.6px at 55% 15%, rgba(212,175,55,.6) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 12% 65%, rgba(15,139,141,.6) 50%, transparent 51%);
	background-repeat:repeat; background-size:360px 360px; animation:starDrift 70s linear infinite; }
@keyframes starDrift { from { transform:translate3d(0,0,0);} to { transform:translate3d(-360px,-360px,0);} }

/* soft glow orbs */
.orb { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; }
.orb--teal { width:360px; height:360px; background:var(--teal); top:-80px; right:8%; opacity:.42; animation:orbFloat 15s ease-in-out infinite; }
.orb--gold { width:240px; height:240px; background:var(--gold); bottom:-60px; left:6%; opacity:.24; animation:orbFloat 19s ease-in-out infinite reverse; }
@keyframes orbFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(26px);} }
.product-card__media--float { animation:vialFloat 6s ease-in-out infinite; }
@keyframes vialFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }

/* circular size bubbles */
.size-bubble { width:58px; height:58px; min-width:58px; padding:0; border-radius:50%; justify-content:center; }
.stage-dark .opt-label { color:#9FB6BE; }
.stage-dark .size-bubble { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); color:#fff; }
.stage-dark .size-bubble:hover { border-color:#fff; }
.stage-dark .size-bubble.is-selected { background:#fff; border-color:#fff; color:var(--navy); box-shadow:0 0 0 6px rgba(255,255,255,.16), 0 10px 26px rgba(0,0,0,.3); }
.stage-dark .size-bubble.is-oos { opacity:.4; }
.stage-dark .price-now { color:#fff; }
.stage-dark .price-unit { color:#9FB6BE; }
.price-sub { margin-top:8px; min-height:1.1em; font-size:.98rem; color:#DCE7EC; }
.price-sub .save { display:inline-block; margin-left:10px; color:#7fdcdd; font-weight:600; }
.stage-dark .tier-bubble { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); }
.stage-dark .tier-title { color:#fff; }
.stage-dark .tier-sub { color:#7fdcdd; }
.stage-dark .tier-bubble:hover, .stage-dark .tier-bubble.is-active, .stage-dark .tier-bubble.is-best { border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,139,141,.25); }
.stage-dark .qty-stepper { border-color:rgba(255,255,255,.28); }
.stage-dark .qty-btn { background:rgba(255,255,255,.06); color:#fff; }
.stage-dark .qty-stepper input { background:transparent; color:#fff; border-color:rgba(255,255,255,.2); }

/* payment chips */
.pay-chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:var(--s-4); }
.pay-chip { font-family:var(--font-head); font-size:.6rem; font-weight:800; letter-spacing:.05em; color:#123; background:#fff; border-radius:5px; padding:5px 8px; box-shadow:var(--shadow-sm); }
.pay-note { color:#9FB6BE; font-size:.8rem; margin-top:10px; }

@media (prefers-reduced-motion: reduce){
	.stars, .orb, .product-card__media--float { animation:none !important; }
}

/* --- Certificate of Analysis (cards + modal) ----------------------------- */
.coa-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.coa-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:var(--s-4); margin:var(--s-4) 0; }
.coa-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-4); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.coa-card__badges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.coa-badge { font-size:.6rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-pill); background:var(--bg); color:var(--slate); border:1px solid var(--border); }
.coa-badge--live { background:var(--navy); color:#fff; border-color:var(--navy); }
.coa-card__purity { font-family:var(--font-head); font-weight:800; font-size:2rem; color:var(--success); line-height:1; }
.coa-card__purity-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); margin-bottom:8px; }
.coa-card__lab { font-size:.8rem; color:var(--slate); margin-bottom:10px; }
.coa-card__meta { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin:0 0 12px; padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.coa-card__meta div { display:flex; flex-direction:column; }
.coa-card__meta dt { font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); }
.coa-card__meta dd { margin:0; font-size:.86rem; font-weight:600; color:var(--navy); }
.coa-panel__head { display:flex; justify-content:space-between; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); font-weight:700; margin-bottom:6px; }
.coa-panel__row { display:flex; justify-content:space-between; gap:10px; font-size:.82rem; padding:3px 0; }
.coa-panel__row span:first-child { color:var(--slate); }
.coa-panel__row .ok { color:var(--navy); font-weight:600; }
.coa-panel__row .na { color:var(--warning); }
.coa-card .coa-view { margin-top:var(--s-4); width:100%; justify-content:center; }
.coa-pending { margin-top:var(--s-4); font-size:.8rem; color:var(--slate); text-align:center; }
.coa-modal[hidden] { display:none; }
.coa-modal { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px; }
.coa-modal__backdrop { position:absolute; inset:0; background:rgba(16,42,67,.55); }
.coa-modal__dialog { position:relative; z-index:1; background:#fff; border-radius:var(--r-lg); width:min(940px,96vw); height:min(86vh,920px); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg); }
.coa-modal__head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.coa-modal__head strong { font-family:var(--font-head); color:var(--navy); }
.coa-modal__close { border:0; background:transparent; font-size:1.7rem; line-height:1; color:var(--slate); cursor:pointer; padding:0 4px; }
.coa-modal__body { flex:1; position:relative; background:var(--bg); }
.coa-modal__body iframe { width:100%; height:100%; border:0; display:block; }
.coa-modal__empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--slate); padding:24px; text-align:center; }
.coa-modal__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px; border-top:1px solid var(--border); font-size:.85rem; }

/* --- Branded vial sizing -------------------------------------------------- */
.nvo-vial { display:block; width:auto; height:100%; max-height:200px; margin:0 auto; }
.product-card__media { padding:14px; }
.product-card__media--float .nvo-vial { max-height:340px; }

/* --- Photo vial (template render + text overlay) ------------------------- */
.vial-photo { position:relative; width:100%; max-width:340px; margin:0 auto; }
.product-card__media--float { background:#fff; border-radius:var(--r-lg); }
/* Product page: the vial is a clean transparent PNG that floats directly on
   the dark stage (no white box). Soft drop shadow grounds it; it bobs via the
   .product-card__media--float animation. */
.stage-dark .product-card__media--float { background:transparent; border-radius:0; box-shadow:none; padding:0; }
.stage-dark .vial-photo { max-width:300px; filter:drop-shadow(0 24px 30px rgba(0,0,0,.5)); }
.vial-photo img { width:100%; height:auto; display:block; }
/* name + mg live in one centered flex column so the mg always sits directly
   below the name with a proportional gap, no matter how many lines it wraps. */
.vial-photo__label { position:absolute; left:50%; top:60%; transform:translate(-50%,-50%);
	width:40%; z-index:2; display:flex; flex-direction:column; align-items:center;
	text-align:center; font-family:var(--font-head); line-height:1.05; }
.vial-photo__name { width:100%; white-space:normal; font-weight:800; font-size:20px; text-wrap:balance; -webkit-hyphens:none; hyphens:none; }
.vial-photo__mg   { white-space:nowrap; font-weight:700; font-size:13px; line-height:1; margin-top:0.22em; }
.vial-photo--navy   .vial-photo__name, .vial-photo--navy   .vial-photo__mg { color:#22436B; }
.vial-photo--green  .vial-photo__name, .vial-photo--green  .vial-photo__mg { color:#235C46; }
.vial-photo--gold   .vial-photo__name, .vial-photo--gold   .vial-photo__mg { color:#966E19; }
.vial-photo--purple .vial-photo__name, .vial-photo--purple .vial-photo__mg { color:#5A2D82; }

/* --- Learn library -------------------------------------------------------- */
/* shared */
.ev-badge { display:inline-flex; align-items:center; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); border:1px solid transparent; white-space:nowrap; }
.ev-fda_approved { background:#E4F3EC; color:#1F6B52; border-color:#B9DECD; }
.ev-approved_elsewhere { background:#E6F0F8; color:#24557A; border-color:#BCD3E6; }
.ev-late_clinical { background:var(--teal-050); color:#0B5B5C; border-color:#BFE0E0; }
.ev-early_human { background:#FBF3E2; color:#7A5B12; border-color:#E8D08A; }
.ev-preclinical { background:#EDEFF2; color:#5C6B78; border-color:#D5DAE0; }
.ev-untested_combination { background:#F6ECF6; color:#6E3A6E; border-color:#DDBEDD; }
.learn-chip { display:inline-flex; align-items:center; font-size:.76rem; padding:3px 10px; border-radius:var(--r-pill); background:#F7F9FA; border:1px solid var(--border); color:var(--slate); text-decoration:none; }
a.learn-chip:hover { border-color:var(--teal); color:var(--teal); text-decoration:none; }
.learn-card { text-decoration:none; display:flex; flex-direction:column; gap:6px; color:inherit; }
.learn-card:hover { text-decoration:none; border-color:var(--teal); box-shadow:var(--shadow-md, 0 6px 18px rgba(18,41,74,.08)); }
.learn-card h3 { margin:4px 0 0; }
.learn-card p { margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.learn-card .card__cta { margin-top:auto; padding-top:8px; }
.learn-card__top { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.learn-sec-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:var(--s-4); }
.learn-sec-head h2 { margin:0; }
.learn-sec-head a { font-weight:600; font-size:.92rem; }
.learn-pills { display:flex; flex-wrap:wrap; gap:8px; }
.learn-pill { display:inline-block; padding:7px 14px; border-radius:var(--r-pill); border:1px solid var(--border); background:#fff; color:var(--navy); font-weight:600; font-size:.88rem; text-decoration:none; white-space:nowrap; }
.learn-pill:hover { border-color:var(--teal); color:var(--teal); text-decoration:none; }
.learn-pill.is-on { background:var(--navy); border-color:var(--navy); color:#fff; }
.learn-az { display:flex; flex-wrap:wrap; gap:4px; }
.learn-az a { min-width:30px; text-align:center; padding:5px 7px; border-radius:6px; font-weight:700; font-size:.85rem; color:var(--navy); background:#F7F9FA; text-decoration:none; }
.learn-az a:hover { background:var(--teal); color:#fff; }

/* hub */
.learn-hero { background:linear-gradient(180deg,#F3F8F8 0%,#fff 100%); padding-bottom:var(--s-6); }
.learn-hero h1 { margin:var(--s-2) 0 var(--s-3); }
.learn-hero .lead { max-width:720px; }
.learn-search { display:flex; align-items:center; gap:10px; max-width:720px; background:#fff; border:1px solid var(--border); border-radius:var(--r-pill); padding:6px 6px 6px 18px; box-shadow:0 8px 24px rgba(18,41,74,.07); margin-top:var(--s-5); }
.learn-search svg { width:20px; height:20px; color:var(--slate); flex:none; }
.learn-search input { flex:1; border:0; outline:0; font:inherit; font-size:1rem; padding:10px 0; background:transparent; min-width:0; }
.learn-quick { margin-top:var(--s-3); font-size:.9rem; color:var(--slate); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.learn-topics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.learn-topic-tile { display:flex; flex-direction:column; gap:10px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--r-lg); background:#fff; transition:border-color .15s, box-shadow .15s; }
.learn-topic-tile:hover { border-color:var(--teal); box-shadow:0 8px 20px rgba(18,41,74,.07); }
.learn-topic-tile__head { display:flex; align-items:center; gap:12px; color:var(--navy); text-decoration:none; }
.learn-topic-tile__head:hover { text-decoration:none; color:var(--teal); }
.learn-topic-tile .ico { width:34px; height:34px; padding:7px; border-radius:50%; background:var(--teal-050); color:var(--teal); flex:none; }
.learn-topic-tile__name { font-weight:700; line-height:1.25; flex:1; }
.learn-topic-tile__n { font-size:.8rem; color:var(--slate); background:#F7F9FA; border-radius:var(--r-pill); padding:2px 8px; }
.learn-topic-tile__top { list-style:none; counter-reset:t; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:.9rem; }
.learn-topic-tile__top li { counter-increment:t; display:flex; gap:8px; align-items:baseline; }
.learn-topic-tile__top li::before { content:counter(t); font-size:.72rem; font-weight:800; color:var(--gold, #C79A2E); min-width:10px; }
.learn-topic-tile__top a { color:var(--text); font-weight:600; }
.learn-topic-tile__top a:hover { color:var(--teal); }
.learn-topic-tile__all { font-size:.82rem; font-weight:700; margin-top:auto; }
.learn-band { background:#F7F9FA; }
.learn-evidence { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:var(--s-4); }
.learn-evidence__item { display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:start; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; color:var(--slate); font-size:.88rem; text-decoration:none; }
.learn-evidence__item:hover { border-color:var(--teal); text-decoration:none; }
.learn-evidence__item .ev-badge { justify-self:start; }
.learn-evidence__item span:not(.ev-badge) { grid-column:1 / 2; }
.learn-evidence__item b { grid-row:1 / 3; grid-column:2; font-family:var(--font-head); font-size:1.5rem; color:var(--navy); align-self:center; }
@media (max-width:1023px){ .learn-topics{grid-template-columns:repeat(2,1fr);} .learn-evidence{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .learn-topics,.learn-evidence{grid-template-columns:1fr;} .learn-search .btn{display:none;} }

/* library */
.learn-lib { display:grid; grid-template-columns:250px 1fr; gap:var(--s-6); align-items:start; }
.learn-filters { position:sticky; top:100px; display:flex; flex-direction:column; gap:6px; font-size:.9rem; }
.learn-filters__label { display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--slate); margin:var(--s-4) 0 4px; }
.learn-filters input[type=search] { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-sm); font:inherit; }
.learn-facet { list-style:none; margin:0; padding:0; }
.learn-facet a { display:flex; justify-content:space-between; padding:6px 10px; border-radius:6px; color:var(--text); text-decoration:none; }
.learn-facet a span { color:var(--slate); font-size:.8rem; }
.learn-facet a:hover { background:#F7F9FA; text-decoration:none; }
.learn-facet a.is-on { background:var(--teal-050); color:#0B5B5C; font-weight:700; }
.learn-toggle { display:flex; align-items:center; gap:8px; margin-top:var(--s-4); padding:8px 10px; border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); text-decoration:none; }
.learn-toggle:hover { text-decoration:none; border-color:var(--teal); }
.learn-toggle__box { width:16px; height:16px; border:2px solid var(--slate); border-radius:4px; }
.learn-toggle.is-on .learn-toggle__box { background:var(--teal); border-color:var(--teal); box-shadow:inset 0 0 0 2px #fff; }
.learn-results__bar { display:flex; justify-content:space-between; align-items:center; padding-bottom:var(--s-3); border-bottom:1px solid var(--border); margin-bottom:var(--s-3); color:var(--slate); }
.learn-results .learn-az { margin:var(--s-2) 0 var(--s-3); }
.learn-az__h { font-size:1.1rem; color:var(--slate); margin:var(--s-5) 0 var(--s-2); scroll-margin-top:110px; }
.learn-rows { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:#fff; }
.learn-row { display:grid; grid-template-columns:1fr 230px; gap:16px; padding:14px 18px; border-bottom:1px solid var(--border); color:inherit; text-decoration:none; }
.learn-row:last-child { border-bottom:0; }
.learn-row:hover { background:#F9FBFB; text-decoration:none; }
.learn-row__name { font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:1.05rem; margin-right:6px; }
.learn-row__main p { margin:4px 0 0; color:var(--slate); font-size:.9rem; }
.learn-row__meta { display:flex; flex-direction:column; align-items:flex-start; gap:5px; font-size:.8rem; color:var(--slate); }
.learn-row__dose { color:var(--teal); font-weight:700; }
@media (max-width:900px){ .learn-lib{grid-template-columns:1fr;} .learn-filters{position:static;} .learn-row{grid-template-columns:1fr;} .learn-row__meta{flex-direction:row;flex-wrap:wrap;} }

/* peptide page */
.lp-head { display:grid; grid-template-columns:1fr 320px; gap:var(--s-6); align-items:start; margin-bottom:var(--s-5); }
.lp-head h1 { margin:var(--s-3) 0 4px; }
.lp-aka { color:var(--slate); margin-bottom:var(--s-3); }
.lp-glance { background:#F7F9FA; border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; }
.lp-glance h2 { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--slate); margin:0 0 10px; }
.lp-glance dl { margin:0; display:flex; flex-direction:column; gap:10px; }
.lp-glance dt { font-size:.75rem; font-weight:700; color:var(--navy); }
.lp-glance dd { margin:2px 0 0; font-size:.88rem; color:var(--slate); }
.lp-tabs { position:sticky; top:84px; z-index:5; display:flex; gap:4px; overflow-x:auto; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--border); margin-bottom:var(--s-4); }
.lp-tabs a { padding:12px 14px; font-weight:600; font-size:.92rem; color:var(--slate); white-space:nowrap; border-bottom:3px solid transparent; text-decoration:none; }
.lp-tabs a:hover, .lp-tabs a.is-on { color:var(--navy); border-bottom-color:var(--teal); text-decoration:none; }
.lp-body { max-width:960px; }
.lp-sec { padding:var(--s-5) 0; border-bottom:1px solid var(--border); scroll-margin-top:150px; }
.lp-sec:last-child { border-bottom:0; }
.lp-sec h2 { font-size:1.55rem; }
.lp-sec h3 { font-size:1.05rem; margin-bottom:6px; }
.lp-two { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
.lp-callout { background:#F7F9FA; border-left:4px solid var(--teal); border-radius:var(--r-sm); padding:14px 16px; }
.lp-callout p { margin:0; }
.lp-label { display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--slate); margin-bottom:8px; }
.lp-ingredients { margin-bottom:var(--s-4); }
.lp-ingredient { display:inline-flex; align-items:center; gap:8px; margin:0 8px 8px 0; padding:8px 12px; border:1px solid var(--border); border-radius:var(--r-md); font-weight:700; color:var(--navy); text-decoration:none; }
.lp-ingredient:hover { border-color:var(--teal); text-decoration:none; }
.lp-studied { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; }
.lp-studied li { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:10px 14px; border:1px solid var(--border); border-radius:var(--r-sm); font-size:.92rem; }
.lp-studied em { font-style:normal; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); background:#F7F9FA; padding:2px 8px; border-radius:var(--r-pill); }
.lp-disclaimer { margin-bottom:var(--s-4); }
.lp-disclaimer summary { cursor:pointer; font-size:.88rem; font-weight:600; color:#8A5A0B; background:#FBF3E2; border:1px solid #E8D08A; border-radius:var(--r-sm); padding:10px 14px; }
.lp-vials { margin-bottom:var(--s-4); }
.lp-dose { border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-5); background:#fff; }
.lp-dose__title { font-size:1.15rem; margin-bottom:var(--s-4); }
.lp-dose h4 { margin:var(--s-5) 0 var(--s-3); font-size:1rem; }
.lp-quick { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin:0; }
.lp-quick div { background:#F7F9FA; border-radius:var(--r-sm); padding:10px 12px; }
.lp-quick dt { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); }
.lp-quick dd { margin:3px 0 0; font-weight:700; color:var(--navy); font-size:.92rem; }
.lp-table td:first-child { font-weight:600; color:var(--navy); }
.lp-note { font-size:.85rem; color:var(--slate); margin-top:8px; }
.lp-steps { counter-reset:step; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.lp-steps li { counter-increment:step; position:relative; padding:4px 0 4px 44px; }
.lp-steps li::before { content:counter(step); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; background:var(--teal); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.lp-acc { border:1px solid var(--border); border-radius:var(--r-sm); margin-top:10px; background:#fff; }
.lp-acc summary { cursor:pointer; padding:12px 16px; font-weight:700; color:var(--navy); list-style:none; display:flex; justify-content:space-between; }
.lp-acc summary::-webkit-details-marker { display:none; }
.lp-acc summary::after { content:'+'; font-weight:400; font-size:1.2rem; line-height:1; color:var(--slate); }
.lp-acc[open] summary::after { content:'\2212'; }
.lp-acc > ul, .lp-acc > p, .lp-acc > ol { margin:0; padding:0 16px 14px 34px; }
.lp-acc > p { padding-left:16px; }
.lp-acc li { margin-bottom:6px; }
.lp-src { font-size:.8rem; color:var(--slate); margin-top:var(--s-4); }
.lp-related { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.lp-related a { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:10px 14px; border:1px solid var(--border); border-radius:var(--r-sm); font-weight:700; color:var(--navy); text-decoration:none; }
.lp-related a:hover { border-color:var(--teal); text-decoration:none; }
.lp-refs { font-size:.85rem; color:var(--slate); }
@media (max-width:900px){ .lp-head,.lp-two{grid-template-columns:1fr;} .lp-tabs{position:static;} .lg-tools{position:static;} }
@media (max-width:640px){
	.lp-quick { grid-template-columns:1fr 1fr; }
	.lp-dose { padding:var(--s-4); }
	.lp-table thead { display:none; }
	.lp-table tr { display:block; border-bottom:1px solid var(--border); padding:8px 0; }
	.lp-table td { display:flex; justify-content:space-between; gap:12px; border:0; padding:4px 14px; }
	.lp-table td::before { content:attr(data-label); font-weight:600; color:var(--slate); font-size:.8rem; }
}

/* glossary */
.lg-wrap { max-width:900px; }
.lg-tools { position:sticky; top:84px; z-index:5; background:#fff; padding:var(--s-3) 0; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }
.lg-tools input { padding:11px 14px; border:1px solid var(--border); border-radius:var(--r-sm); font:inherit; }
.lg-letter { scroll-margin-top:190px; }
.lg-letter h2 { font-size:1.2rem; color:var(--slate); margin:var(--s-5) 0 var(--s-2); }
.lg-term { padding:12px 0; border-bottom:1px solid var(--border); scroll-margin-top:190px; }
.lg-term h3 { font-size:1rem; margin:0 0 4px; }
.lg-term p { margin:0; color:var(--slate); }

/* popularity + quiz CTA */
.learn-quiz-cta { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:720px; margin-top:var(--s-4); padding:14px 16px 14px 20px; border-radius:var(--r-lg); background:var(--navy); color:#fff; text-decoration:none; }
.learn-quiz-cta:hover { text-decoration:none; color:#fff; box-shadow:0 10px 24px rgba(18,41,74,.25); }
.learn-quiz-cta .btn { white-space:nowrap; }
.learn-toggle--top { margin-top:10px; background:#fff; font-weight:600; }
.learn-sort { display:flex; gap:10px; align-items:center; font-size:.88rem; }
.learn-sort a { color:var(--slate); font-weight:600; }
.learn-sort a.is-on { color:var(--navy); text-decoration:underline; text-underline-offset:4px; }
.learn-rank { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#F7F9FA; color:var(--slate); font-size:.78rem; font-weight:800; margin-right:8px; vertical-align:middle; }
.learn-row--hot .learn-rank { background:var(--gold, #D4AF37); color:var(--navy); }
.learn-chip--hot { background:#FBF3E2; border-color:#E8D08A; color:#7A5B12; font-weight:700; margin-left:4px; }

/* health-goal questionnaire */
.gq { background:linear-gradient(180deg,#F3F8F8 0%,#fff 100%); padding-bottom:var(--s-6); }
.gq-head { text-align:center; max-width:640px; margin:0 auto var(--s-5); }
.gq-head h1 { margin:var(--s-2) 0 var(--s-3); }
.gq-goals { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; max-width:1000px; margin:0 auto; }
.gq-goal { position:relative; display:flex; align-items:center; gap:12px; padding:16px 18px; border:2px solid var(--border); border-radius:var(--r-lg); background:#fff; cursor:pointer; font-weight:700; color:var(--navy); user-select:none; transition:border-color .15s, background .15s, transform .1s; }
.gq-goal:hover { border-color:var(--teal); }
.gq-goal:active { transform:scale(.98); }
.gq-goal input { position:absolute; opacity:0; pointer-events:none; }
.gq-goal:focus-within { outline:3px solid var(--teal); outline-offset:2px; }
.gq-goal .ico { width:36px; height:36px; padding:7px; border-radius:50%; background:var(--teal-050); color:var(--teal); flex:none; }
.gq-goal span { flex:1; }
.gq-check { width:22px; height:22px; padding:3px; border-radius:50%; border:2px solid var(--border); color:transparent; flex:none; }
.gq-goal.is-on { border-color:var(--teal); background:var(--teal-050); }
.gq-goal.is-on .gq-check { background:var(--teal); border-color:var(--teal); color:#fff; }
.gq-actions { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:var(--s-5); }
.gq-reset { font-weight:600; }
.gq-results-wrap { background:#fff; padding-top:var(--s-5); scroll-margin-top:90px; }
.gq-h { font-size:1.4rem; margin:var(--s-5) 0 var(--s-4); }
.gq-h:first-child { margin-top:0; }
.gq-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gq-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:18px; border:1px solid var(--border); border-radius:var(--r-lg); background:#fff; color:inherit; text-decoration:none; transition:border-color .15s, transform .15s, box-shadow .15s; }
.gq-card:hover { border-color:var(--teal); transform:translateY(-2px); box-shadow:0 10px 22px rgba(18,41,74,.08); text-decoration:none; }
.gq-card__rank { position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%; background:#F7F9FA; color:var(--slate); font-weight:800; font-size:.85rem; display:flex; align-items:center; justify-content:center; }
.gq-card:nth-child(-n+3) .gq-card__rank { background:var(--gold, #D4AF37); color:var(--navy); }
.gq-card__name { font-family:var(--font-head); font-weight:800; font-size:1.1rem; color:var(--navy); padding-right:34px; }
.gq-card__sum { font-size:.88rem; color:var(--slate); }
.gq-card__goals { display:flex; flex-wrap:wrap; gap:4px; }
.gq-card__goals em { font-style:normal; font-size:.72rem; font-weight:700; color:#0B5B5C; background:var(--teal-050); border-radius:var(--r-pill); padding:2px 8px; }
.gq-card__cta { margin-top:auto; font-weight:700; font-size:.88rem; color:var(--teal); }
.gq-cards--combo .gq-card { background:#FBFCFD; }
.gq-med { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:var(--s-6); padding:18px 22px; border-radius:var(--r-lg); background:var(--navy); color:#fff; }
.gq-med div { display:flex; flex-direction:column; gap:2px; }
.gq-med span { color:rgba(255,255,255,.8); font-size:.92rem; }
@media (max-width:1023px){ .gq-cards{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .gq-cards{grid-template-columns:1fr;} .gq-goals{grid-template-columns:1fr 1fr;} .gq-goal{padding:12px; gap:8px; font-size:.9rem;} .gq-goal .ico{display:none;} }

/* never let a component display rule override the hidden attribute */
[hidden] { display:none !important; }