/* ================================================================
   PEPTIDE ORACLE — Main Stylesheet
   Font: Lato 300/400/700/900
   Themes: dark (default) + light (toggled via data-theme="light")
   ================================================================ */

/* ── TEXT SELECTION ─────────────────────────────────────────── */
::selection{background:rgba(124,58,237,.75);color:#fff}
::-moz-selection{background:rgba(124,58,237,.75);color:#fff}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:'Lato',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s;background:var(--bg);color:var(--text-1)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:'Lato',sans-serif;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}
input,textarea,select{font-family:'Lato',sans-serif}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:4px}

/* ── THEME TOKENS ───────────────────────────────────────────── */
:root {
  /* Core brand */
  --purple:        #7c3aed;
  --purple-dk:     #6d28d9;
  --purple-lt:     #a855f7;
  --purple-glow:   rgba(124,58,237,.22);
  --purple-soft:   rgba(124,58,237,.08);
  --purple-mid:    rgba(124,58,237,.18);

  /* Dark theme (default) */
  --bg:            #0a0a0f;
  --bg-2:          #12121a;
  --bg-3:          #1a1a28;
  --bg-card:       rgba(255,255,255,.04);
  --bg-card-hover: rgba(124,58,237,.08);
  --surface:       #f5f5f7;
  --text-1:        #f0f0f5;
  --text-2:        rgba(240,240,245,.68);
  --text-3:        rgba(240,240,245,.4);
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --nav-bg:        rgba(10,10,15,.78);
  --nav-bg-scroll: rgba(10,10,15,.95);
  --card-shadow:   0 4px 24px rgba(0,0,0,.4);
  --input-bg:      rgba(255,255,255,.07);

  /* Layout */
  --nav-h:    60px;
  --r:        10px;
  --r-lg:     16px;
  --r-xl:     22px;
  --ease:     cubic-bezier(.25,.46,.45,.94);
  --t:        .25s;
  --max-w:    1080px;
}

/* ── LIGHT THEME ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:            #f5f5f7;
  --bg-2:          #ffffff;
  --bg-3:          #ebebef;
  --bg-card:       #ffffff;
  --bg-card-hover: #f0ecff;
  --surface:       #1d1d1f;
  --text-1:        #1d1d1f;
  --text-2:        #6e6e73;
  --text-3:        #86868b;
  --border:        rgba(0,0,0,.1);
  --border-strong: rgba(0,0,0,.18);
  --nav-bg:        rgba(245,245,247,.82);
  --nav-bg-scroll: rgba(245,245,247,.97);
  --card-shadow:   0 2px 16px rgba(0,0,0,.08);
  --input-bg:      #ffffff;
  --purple-soft:   rgba(124,58,237,.06);
  --purple-mid:    rgba(124,58,237,.15);
  --purple-glow:   rgba(124,58,237,.14);
}

/* ── UTILITY ────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── TYPOGRAPHY SCALE ───────────────────────────────────────── */
.t-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.t-eyebrow--purple{color:var(--purple-lt)}
[data-theme="light"] .t-eyebrow--purple{color:var(--purple)}
.t-eyebrow__dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 2.4s ease-in-out infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.55)}}

.t-h1{font-size:clamp(42px,8vw,96px);font-weight:900;letter-spacing:-.04em;line-height:1.0}
.t-h2{font-size:clamp(26px,4vw,46px);font-weight:900;letter-spacing:-.04em;line-height:1.08}
.t-h3{font-size:clamp(18px,2vw,22px);font-weight:900;letter-spacing:-.03em;line-height:1.2}
.t-body{font-size:15px;font-weight:400;line-height:1.7;color:var(--text-2)}
.t-small{font-size:13px;font-weight:400;line-height:1.6;color:var(--text-3)}
.c-purple{color:var(--purple-lt)}
[data-theme="light"] .c-purple{color:var(--purple)}
.c-text1{color:var(--text-1)}
.c-text2{color:var(--text-2)}
.grad-text{background:linear-gradient(135deg,#a855f7 0%,#7c3aed 40%,#c084fc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.01em;border-radius:100px;transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t),color var(--t);white-space:nowrap;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn--lg{height:50px;padding:0 28px;font-size:15px}
.btn--md{height:42px;padding:0 22px;font-size:14px}
.btn--sm{height:34px;padding:0 16px;font-size:13px}
.btn--primary{background:var(--purple);color:#fff;box-shadow:0 4px 18px var(--purple-glow);border:1.5px solid transparent}
.btn--primary:hover{background:var(--purple-dk);box-shadow:0 8px 28px rgba(124,58,237,.38)}
.btn--outline{border:1.5px solid var(--border-strong);color:var(--text-1);background:transparent}
.btn--outline:hover{border-color:var(--purple);color:var(--purple)}
.btn--outline-light{border:1.5px solid rgba(255,255,255,.28);color:#fff;background:transparent}
.btn--outline-light:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
[data-theme="light"] .btn--outline-light{border-color:var(--border-strong);color:var(--text-1)}
[data-theme="light"] .btn--outline-light:hover{background:var(--bg-3);border-color:var(--purple);color:var(--purple)}
.btn--ghost{color:var(--purple-lt);background:transparent;padding-left:0;padding-right:0}
.btn--ghost:hover{color:var(--purple)}
[data-theme="light"] .btn--ghost{color:var(--purple)}
.btn svg{flex-shrink:0;transition:transform var(--t)}
.btn:hover svg.arrow{transform:translateX(3px)}

/* ── REVEAL ANIMATION ───────────────────────────────────────── */
/* Progressive enhancement: visible by default. Only elements marked
   .will-animate (below-fold, by JS) start hidden and animate in.   */
.reveal{opacity:1;transform:none}
.reveal.will-animate{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.will-animate.visible,.reveal.will-animate.revealed{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.40s}

/* ── NAVIGATION ─────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);background:var(--nav-bg);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--border);transition:background var(--t),border-color var(--t)}
.nav.scrolled,.nav--scrolled{background:var(--nav-bg-scroll)}
.nav__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav__logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.nav__logo-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--purple) 0%,var(--purple-lt) 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav__logo-mark svg{width:16px;height:16px}
.nav__logo-name{font-size:16px;font-weight:900;letter-spacing:-.02em;color:var(--text-1)}
.nav__logo-name span{color:var(--purple-lt)}
[data-theme="light"] .nav__logo-name span{color:var(--purple)}
.nav__links{display:flex;align-items:center;gap:2px}
.nav__link{font-size:14px;font-weight:700;color:var(--text-2);padding:6px 12px;border-radius:8px;transition:color var(--t),background var(--t)}
.nav__link:hover,.nav__link.active{color:var(--text-1);background:var(--bg-card)}
/* Dropdown */
.nav__dropdown{position:relative}
.nav__dropdown-btn{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--text-2);padding:6px 12px;border-radius:8px;transition:color var(--t),background var(--t)}
.nav__dropdown-btn:hover{color:var(--text-1);background:var(--bg-card)}
.nav__dropdown-btn svg{transition:transform var(--t)}
.nav__dropdown:focus-within .nav__dropdown-btn svg,
.nav__dropdown:hover .nav__dropdown-btn svg{transform:rotate(180deg)}
.nav__dropdown-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:200px;background:var(--bg-2);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:8px;opacity:0;visibility:hidden;transition:opacity var(--t),transform var(--t),visibility var(--t);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--card-shadow)}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__dropdown-label{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding:8px 10px 4px}
.nav__dropdown-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:700;color:var(--text-2);transition:background var(--t),color var(--t)}
.nav__dropdown-item:hover{background:var(--purple-soft);color:var(--text-1)}
.nav__dropdown-item--dim{opacity:.45;cursor:default;pointer-events:none}
.nav__dropdown-item--danger{color:var(--red,#ef4444)}
.nav__dropdown-item--danger:hover{background:rgba(239,68,68,.08);color:var(--red,#ef4444)}
/* Right-aligned dropdown (user menu at far right of nav) */
.nav__dropdown-menu--right{left:auto;right:0;transform:translateX(0) translateY(-6px)}
.nav__dropdown:hover .nav__dropdown-menu--right,
.nav__dropdown:focus-within .nav__dropdown-menu--right{transform:translateX(0) translateY(0)}
/* User dropdown button — styled like old nav__cta--user */
.nav__dropdown-btn--user{background:var(--bg-2);border:1px solid var(--border);border-radius:100px;padding:4px 10px 4px 6px;gap:6px;height:34px;font-size:13px}
.nav__dropdown-btn--user:hover{background:var(--bg-card);color:var(--text-1)}
/* Nav right */
.nav__right{display:flex;align-items:center;gap:8px}
.nav__search-btn{width:34px;height:34px;border-radius:9px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:background var(--t),color var(--t)}
.nav__search-btn:hover{background:var(--bg-card-hover);color:var(--text-1)}
/* Theme toggle */
.nav__theme-btn{width:34px;height:34px;border-radius:9px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:background var(--t),color var(--t)}
.nav__theme-btn:hover{background:var(--bg-card-hover);color:var(--text-1)}
.icon-sun,.icon-moon{width:16px;height:16px;pointer-events:none}
/* Show sun in light mode, moon in dark mode */
.icon-sun{display:none}
.icon-moon{display:block}
[data-theme="light"] .icon-sun{display:block}
[data-theme="light"] .icon-moon{display:none}
.nav__cta{height:36px;padding:0 18px;border-radius:100px;background:var(--purple);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;white-space:nowrap;letter-spacing:.01em;transition:background var(--t),box-shadow var(--t),transform var(--t)}
.nav__cta:hover{background:var(--purple-dk);box-shadow:0 4px 16px var(--purple-glow);transform:translateY(-1px)}
.nav__cta--book{background:linear-gradient(135deg,var(--purple) 0%,var(--purple-lt) 100%);}
.nav__cta--accent{background:linear-gradient(135deg,var(--purple) 0%,var(--purple-lt) 100%);}
.nav__cta--accent:hover{background:linear-gradient(135deg,var(--purple-dk) 0%,var(--purple) 100%);}
.nav__cta--booking{background:transparent;border:1px solid var(--purple-lt);color:var(--purple-lt);}
.nav__cta--booking:hover{background:rgba(167,139,250,.08);box-shadow:0 0 12px rgba(167,139,250,.2);transform:translateY(-1px);}
.nav__cta--ghost{background:transparent;border:1px solid var(--border);color:var(--text-1);}
.nav__cta--ghost:hover{background:var(--bg-2);box-shadow:none;transform:none;}
.nav__cta--user{background:var(--bg-2);border:1px solid var(--border);color:var(--text-1);gap:7px;padding:0 14px 0 8px;}
.nav__cta--user:hover{background:var(--bg-card);box-shadow:none;transform:none;}
.nav__cta-avatar{width:24px;height:24px;border-radius:50%;background:rgba(109,40,217,.25);color:var(--purple-lt);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
/* Hamburger */
.nav__hamburger{display:none;flex-direction:column;gap:5px;width:34px;height:34px;align-items:center;justify-content:center;border-radius:8px;background:var(--bg-card);border:1px solid var(--border)}
.nav__hamburger span{width:17px;height:1.5px;background:var(--text-1);border-radius:2px;transition:transform var(--t),opacity var(--t)}
.nav__hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav__hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* Mobile drawer */
.nav__mobile{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:999;background:var(--bg);overflow-y:auto;transform:translateX(105%);transition:transform .32s var(--ease);border-top:1px solid var(--border);display:block;visibility:hidden}
.nav__mobile.open{transform:translateX(0);visibility:visible}
.nav__mobile-inner{padding:16px 24px 40px}
.nav__mobile-link{display:block;font-size:17px;font-weight:700;color:var(--text-2);padding:13px 0;border-bottom:1px solid var(--border);transition:color var(--t)}
.nav__mobile-link:hover{color:var(--text-1)}
.nav__mobile-divider{height:20px}
.nav__mobile-theme{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border)}
.nav__mobile-theme-label{font-size:17px;font-weight:700;color:var(--text-2)}
.nav__mobile-cta{display:flex;align-items:center;justify-content:center;height:50px;background:var(--purple);color:#fff;font-size:15px;font-weight:700;border-radius:100px;margin-top:8px}
/* Body scroll lock when mobile menu open */
body.body--menu-open{overflow:hidden}

/* ── SEARCH OVERLAY ────────────────────────────────────────── */
.search-overlay{position:fixed;inset:0;z-index:1100;background:rgba(10,10,15,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;padding:80px 24px 40px;opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t)}
.search-overlay.open{opacity:1;visibility:visible}
[data-theme="light"] .search-overlay{background:rgba(245,245,247,.92)}
.search-overlay__box{width:100%;max-width:640px;display:flex;align-items:center;gap:12px;background:var(--bg-2);border:1.5px solid var(--purple-mid);border-radius:var(--r-lg);padding:4px 4px 4px 20px;box-shadow:0 8px 40px var(--purple-glow)}
.search-overlay__input{flex:1;height:50px;border:none;background:transparent;font-size:17px;font-weight:400;color:var(--text-1);outline:none}
.search-overlay__input::placeholder{color:var(--text-3)}
.search-overlay__close{width:44px;height:44px;border-radius:10px;background:var(--bg-card);color:var(--text-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--t),color var(--t)}
.search-overlay__close:hover{background:var(--bg-3);color:var(--text-1)}
.search-overlay__results{width:100%;max-width:640px;margin-top:16px}
.search-result{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;cursor:pointer;transition:border-color var(--t),background var(--t)}
.search-result:hover{border-color:var(--purple-mid);background:var(--bg-card-hover)}
.search-result__icon{font-size:20px;flex-shrink:0}
.search-result__name{font-size:15px;font-weight:700;color:var(--text-1)}
.search-result__type{font-size:12px;color:var(--text-3);margin-top:2px}

/* ── HERO ───────────────────────────────────────────────────── */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--nav-h) + 64px) 24px 80px;background:var(--bg);position:relative;overflow:hidden}
.hero__stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__stars::before{content:'';position:absolute;width:1px;height:1px;background:transparent;border-radius:50%;box-shadow:120px 80px rgba(255,255,255,.55),240px 30px rgba(255,255,255,.35),380px 120px rgba(255,255,255,.45),60px 200px rgba(255,255,255,.25),500px 60px rgba(255,255,255,.55),620px 180px rgba(255,255,255,.35),720px 40px rgba(255,255,255,.45),840px 160px rgba(255,255,255,.25),960px 90px rgba(255,255,255,.45),1080px 210px rgba(255,255,255,.35),1200px 50px rgba(255,255,255,.55),1300px 140px rgba(255,255,255,.25),150px 320px rgba(255,255,255,.35),300px 400px rgba(255,255,255,.25),450px 280px rgba(255,255,255,.45),600px 360px rgba(255,255,255,.35),750px 480px rgba(255,255,255,.25),900px 300px rgba(255,255,255,.45),1050px 420px rgba(255,255,255,.35),1200px 380px rgba(255,255,255,.25),80px 520px rgba(255,255,255,.18),220px 600px rgba(255,255,255,.25),400px 560px rgba(255,255,255,.18),580px 640px rgba(255,255,255,.25),760px 580px rgba(255,255,255,.18),940px 660px rgba(255,255,255,.25),1100px 540px rgba(255,255,255,.18),1300px 620px rgba(255,255,255,.25)}
[data-theme="light"] .hero__stars{display:none}
.hero__glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:800px;height:700px;background:radial-gradient(ellipse,rgba(124,58,237,.13) 0%,rgba(168,85,247,.06) 40%,transparent 68%);pointer-events:none}
[data-theme="light"] .hero__glow{background:radial-gradient(ellipse,rgba(124,58,237,.06) 0%,rgba(168,85,247,.03) 40%,transparent 68%)}
.hero__content{position:relative;z-index:1;max-width:820px}
.hero__eyebrow{margin-bottom:26px}
.hero__title{color:var(--text-1);margin-bottom:18px}
.hero__sub{font-size:clamp(16px,2.2vw,21px);color:var(--text-2);line-height:1.6;max-width:560px;margin:0 auto 40px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero__scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.3}
.hero__scroll span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.hero__scroll-line{width:1px;height:32px;background:linear-gradient(to bottom,var(--text-3),transparent);animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── STATS ──────────────────────────────────────────────────── */
.stats{background:var(--bg-2);padding:52px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:660px;margin:0 auto}
.stats__item{text-align:center;padding:16px 24px;border-right:1px solid var(--border)}
.stats__item:last-child{border-right:none}
.stats__num{font-size:clamp(30px,5vw,50px);font-weight:900;letter-spacing:-.04em;color:var(--purple);line-height:1}
.stats__label{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin-top:6px}

/* ── SECTION BASE ───────────────────────────────────────────── */
.section{padding:64px 24px}
.section--dark{background:var(--bg-2)}
.section--light{background:var(--bg)}
.section--alt{background:var(--bg-2)}
.section__head{margin-bottom:44px}
.section__head--center{text-align:center}
.section__head--center .t-eyebrow{justify-content:center}
.section__split{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px}

/* ── HOW IT WORKS ───────────────────────────────────────────── */
.howit__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.howit__card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px 26px;transition:background var(--t),border-color var(--t),transform var(--t);display:flex;flex-direction:column;gap:0}
.howit__card:hover{background:var(--bg-card-hover);border-color:rgba(124,58,237,.3);transform:translateY(-4px);box-shadow:0 8px 32px var(--purple-glow)}
.howit__step-badge{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--purple),var(--purple-lt));display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#fff;margin-bottom:20px;box-shadow:0 4px 14px var(--purple-glow)}
.howit__icon{font-size:26px;margin-bottom:14px}
.howit__card-title{font-size:17px;font-weight:900;color:var(--text-1);letter-spacing:-.02em;margin-bottom:10px}
.howit__card-desc{font-size:14px;color:var(--text-2);line-height:1.7;flex:1}
.howit__card-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--purple-lt);margin-top:18px;transition:gap var(--t)}
.howit__card-link:hover{gap:9px}
[data-theme="light"] .howit__card-link{color:var(--purple)}

/* ── PEPTIDE LIBRARY ────────────────────────────────────────── */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filter-pill{height:34px;padding:0 16px;border-radius:100px;border:1.5px solid var(--border);font-size:13px;font-weight:700;color:var(--text-2);background:transparent;cursor:pointer;transition:border-color var(--t),color var(--t),background var(--t)}
.filter-pill:hover{border-color:var(--purple-lt);color:var(--text-1)}
.filter-pill.active{border-color:var(--purple);color:var(--purple-lt);background:var(--purple-soft)}
[data-theme="light"] .filter-pill.active{color:var(--purple)}
.peptide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.peptide-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:10px;transition:border-color var(--t),box-shadow var(--t),transform var(--t),background var(--t)}
.peptide-card:hover{border-color:rgba(124,58,237,.4);box-shadow:0 6px 28px var(--purple-glow);transform:translateY(-3px);background:var(--bg-card-hover)}
.peptide-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.peptide-card__name{font-size:17px;font-weight:900;color:var(--text-1);letter-spacing:-.02em}
.peptide-card__alt{font-size:12px;color:var(--text-3);margin-top:2px}
.peptide-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:100px;background:var(--purple-soft);color:var(--purple-lt);border:1px solid var(--purple-mid);white-space:nowrap;flex-shrink:0}
[data-theme="light"] .peptide-badge{color:var(--purple)}
.peptide-card__desc{font-size:13px;color:var(--text-2);line-height:1.65;flex:1}
.peptide-card__facts{display:flex;flex-wrap:wrap;gap:5px}
.fact-tag{height:24px;padding:0 10px;border-radius:100px;font-size:11px;font-weight:700;background:var(--bg-3);color:var(--text-2);border:1px solid var(--border)}
.peptide-card__cta{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--purple-lt);margin-top:4px;transition:gap var(--t)}
.peptide-card__cta:hover{gap:9px}
[data-theme="light"] .peptide-card__cta{color:var(--purple)}

/* ── CALCULATOR FEATURE ─────────────────────────────────────── */
.calc-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative}
.calc-split__glow{position:absolute;right:-100px;top:50%;transform:translateY(-50%);width:600px;height:600px;background:radial-gradient(ellipse,rgba(124,58,237,.1) 0%,transparent 65%);pointer-events:none;z-index:0}
.calc-split__text{position:relative;z-index:1}
.calc-split__label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-lt);margin-bottom:14px;display:block}
[data-theme="light"] .calc-split__label{color:var(--purple)}
.calc-split__title{color:var(--text-1);margin-bottom:14px}
.calc-split__desc{font-size:15px;color:var(--text-2);line-height:1.75;margin-bottom:28px}
.calc-perks{display:flex;flex-direction:column;gap:10px;margin-bottom:32px}
.calc-perk{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--text-2)}
.calc-perk__check{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--purple-lt));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.calc-perk__check svg{width:10px;height:10px}
/* Calculator widget preview */
.calc-widget{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--r-xl);padding:26px;position:relative;z-index:1}
.calc-widget__title{font-size:14px;font-weight:900;color:var(--text-1);margin-bottom:22px;display:flex;align-items:center;gap:8px}
.calc-widget__row{margin-bottom:16px}
.calc-widget__label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.calc-widget__pills{display:flex;flex-wrap:wrap;gap:6px}
.calc-widget__pill{height:30px;padding:0 13px;border-radius:100px;font-size:12px;font-weight:700;border:1.5px solid var(--border);color:var(--text-2);background:transparent;transition:all var(--t);cursor:default}
.calc-widget__pill.sel{background:var(--purple);border-color:var(--purple);color:#fff}
.calc-widget__result{background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(168,85,247,.07));border:1px solid rgba(124,58,237,.28);border-radius:var(--r);padding:16px 20px;margin-top:18px;display:flex;justify-content:space-between;align-items:center}
.calc-widget__result-label{font-size:12px;font-weight:700;color:var(--text-2)}
.calc-widget__result-sub{font-size:11px;color:var(--text-3);margin-top:2px}
.calc-widget__result-val{font-size:24px;font-weight:900;color:var(--purple-lt)}
[data-theme="light"] .calc-widget__result-val{color:var(--purple)}

/* ── ARTICLES ───────────────────────────────────────────────── */
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.article-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;transition:border-color var(--t),transform var(--t),background var(--t)}
.article-card:hover{border-color:rgba(124,58,237,.35);transform:translateY(-4px);background:var(--bg-card-hover)}
.article-card__thumb{aspect-ratio:16/9;background:var(--bg-3);display:flex;align-items:center;justify-content:center;font-size:36px;background:linear-gradient(135deg,var(--bg-3),var(--bg-2))}
.article-card__body{padding:20px;flex:1;display:flex;flex-direction:column;gap:8px}
.article-card__tags{display:flex;gap:6px;flex-wrap:wrap}
.article-card__tag{height:22px;padding:0 9px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--purple-soft);color:var(--purple-lt);border:1px solid var(--purple-mid)}
[data-theme="light"] .article-card__tag{color:var(--purple)}
.article-card__title{font-size:15px;font-weight:900;color:var(--text-1);line-height:1.35;letter-spacing:-.02em;flex:1}
.article-card__excerpt{font-size:13px;color:var(--text-2);line-height:1.6}
.article-card__meta{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;color:var(--text-3);margin-top:4px}

/* ── NEWSLETTER ─────────────────────────────────────────────── */
.newsletter{background:var(--bg-2);padding:72px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.newsletter__glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(124,58,237,.12) 0%,transparent 65%);pointer-events:none}
.newsletter__inner{max-width:540px;margin:0 auto;text-align:center;position:relative;z-index:1}
.newsletter__title{color:var(--text-1);margin-bottom:10px}
.newsletter__sub{font-size:15px;color:var(--text-2);line-height:1.65;margin-bottom:28px}
.newsletter__form{display:flex;gap:10px}
.newsletter__input{flex:1;height:48px;padding:0 18px;border-radius:100px;border:1.5px solid var(--border-strong);background:var(--input-bg);color:var(--text-1);font-size:14px;font-family:'Lato',sans-serif;transition:border-color var(--t);min-width:0}
.newsletter__input::placeholder{color:var(--text-3)}
.newsletter__input:focus{outline:none;border-color:var(--purple)}
.newsletter__btn{height:48px;padding:0 26px;border-radius:100px;background:var(--purple);color:#fff;font-size:14px;font-weight:700;font-family:'Lato',sans-serif;transition:background var(--t),box-shadow var(--t);white-space:nowrap;flex-shrink:0}
.newsletter__btn:hover{background:var(--purple-dk);box-shadow:0 6px 18px var(--purple-glow)}
.newsletter__note{font-size:12px;color:var(--text-3);margin-top:14px}
.newsletter__status{font-size:14px;font-weight:700;margin-top:12px;min-height:20px}
.newsletter__status--ok{color:#4ade80}
.newsletter__status--err{color:#f87171}

/* ── FOOTER ─────────────────────────────────────────────────── */
.footer{background:var(--bg);border-top:1px solid var(--border);padding:60px 24px 36px}
.footer__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px}
.footer__brand .nav__logo{margin-bottom:14px}
.footer__desc{font-size:13px;color:var(--text-2);line-height:1.7;max-width:260px}
.footer__social{display:flex;gap:8px;margin-top:20px}
.footer__social-btn{width:34px;height:34px;border-radius:9px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:background var(--t),color var(--t),border-color var(--t)}
.footer__social-btn:hover{background:var(--purple-soft);color:var(--purple-lt);border-color:var(--purple-mid)}
[data-theme="light"] .footer__social-btn:hover{color:var(--purple)}
.footer__col-title{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px;display:block}
.footer__col-link{display:block;font-size:13px;font-weight:700;color:var(--text-2);padding:4px 0;transition:color var(--t)}
.footer__col-link:hover{color:var(--text-1)}
.footer__col-dim{opacity:.45;cursor:default;display:flex;align-items:center;gap:6px}
.footer__badge{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:100px;background:var(--purple-soft);color:var(--purple-lt);border:1px solid var(--purple-mid);font-style:normal}
[data-theme="light"] .footer__badge{color:var(--purple)}
.footer__bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;}
.footer__bottom-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;}
.footer__copy{font-size:12px;font-weight:700;color:var(--text-3)}
.footer__copy a{color:var(--purple-lt);text-decoration:none;transition:color var(--t)}
.footer__copy a:hover{color:var(--purple)}
[data-theme="light"] .footer__copy a{color:var(--purple)}
.footer__disclaimer{font-size:11px;color:var(--text-3);line-height:1.65;max-width:720px;text-align:center;}
.footer__legal-links{display:flex;gap:16px;flex-shrink:0;}
.footer__legal-link{font-size:11px;font-weight:700;color:var(--text-3);text-decoration:none;transition:color var(--t);letter-spacing:.03em;}
.footer__legal-link:hover{color:var(--purple-lt);}
[data-theme="light"] .footer__legal-link:hover{color:var(--purple);}
@media(max-width:600px){.footer__bottom-row{flex-direction:column;align-items:center;gap:8px;}.footer__legal-links{gap:12px;justify-content:center;}}

/* ── PEPTIDE PROFILE TABS ───────────────────────────────────── */
.tab-nav{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:32px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tab-nav::-webkit-scrollbar{display:none}
.tab-btn{height:42px;padding:0 18px;border-radius:8px 8px 0 0;font-size:14px;font-weight:700;color:var(--text-2);white-space:nowrap;border-bottom:2px solid transparent;transition:color var(--t),border-color var(--t);margin-bottom:-1px}
.tab-btn.active{color:var(--purple-lt);border-bottom-color:var(--purple)}
[data-theme="light"] .tab-btn.active{color:var(--purple)}
.tab-btn:hover{color:var(--text-1)}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* ── FAQ ACCORDION (legacy rules removed — see line ~700 for current styles) ── */


/* ── ALERTS ─────────────────────────────────────────────────── */
.alert{padding:14px 18px;border-radius:var(--r);font-size:14px;font-weight:700;line-height:1.5}
.alert--info{background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.25);color:var(--purple-lt)}
[data-theme="light"] .alert--info{color:var(--purple)}
.alert--disclaimer{background:var(--bg-3);border:1px solid var(--border);color:var(--text-2);font-weight:400}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:960px){
  .howit__grid{grid-template-columns:1fr 1fr}
  .calc-split{grid-template-columns:1fr;gap:40px}
  .calc-split__glow{display:none}
  .articles-grid{grid-template-columns:1fr 1fr}
  .footer__top{grid-template-columns:1fr 1fr 1fr;gap:24px}
}
@media(max-width:768px){
  :root{--nav-h:56px}
  /* Nav */
  .nav__links,.nav__dropdown,.nav__cta{display:none}
  /* Hide desktop theme toggle — available inside mobile drawer */
  .nav__right .nav__theme-btn{display:none}
  .nav__hamburger{display:flex}
  /* Logo: truncate if long */
  .nav__logo-name{max-width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  /* Hero */
  .hero{padding:calc(var(--nav-h) + 40px) 20px 60px}
  .hero__title{font-size:clamp(34px,9vw,64px)}
  .hero__sub{font-size:16px}
  /* Sections */
  .section{padding:52px 20px}
  /* Page hero */
  .page-hero{padding:calc(var(--nav-h) + 28px) 0 36px}
  .page-hero__title{font-size:clamp(26px,7vw,42px)}
  /* Grids */
  .peptide-grid{grid-template-columns:1fr 1fr}
  .stats__grid{grid-template-columns:repeat(3,1fr)}
  /* Footer */
  .footer__top{grid-template-columns:1fr 1fr 1fr;gap:24px}
}
@media(max-width:600px){
  .peptide-grid{grid-template-columns:1fr}
  .articles-grid{grid-template-columns:1fr}
  .howit__grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .newsletter__form{flex-direction:column}
  .newsletter__btn{width:100%;justify-content:center}
  .stats__grid{grid-template-columns:1fr}
  .stats__item{border-right:none;border-bottom:1px solid var(--border)}
  .stats__item:last-child{border-bottom:none}
  .hero__scroll{display:none}
  .section{padding:40px 16px}
  .footer__bottom{flex-direction:column;gap:6px;text-align:center;align-items:center;}
  /* Page hero mobile */
  .page-hero{padding:calc(var(--nav-h) + 20px) 0 28px}
  .page-hero__title{font-size:clamp(22px,8vw,36px)}
  /* Calc split */
  .calc-split{grid-template-columns:1fr;gap:32px}
  /* FAQ tabs wrap */
  .tab-nav{gap:6px}
  .tab-nav__btn{padding:8px 14px;font-size:12px}
}
@media(max-width:360px){
  .btn--lg{height:46px;padding:0 22px;font-size:14px}
  .hero__actions{flex-direction:column;align-items:center}
}

/* ================================================================
   EXTENDED COMPONENTS — Homepage + Content pages
   ================================================================ */

/* ── Theme toggle button ────────────────────────────────────────── */
.nav__theme-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:transparent;border:1px solid var(--border);
  color:var(--text-2);transition:all .22s;flex-shrink:0;
}
.nav__theme-btn:hover{background:var(--bg-2);color:var(--text-1);border-color:var(--purple);}
.icon-moon,.icon-sun{width:16px;height:16px;pointer-events:none;}
[data-theme="light"] .icon-moon{display:none}
[data-theme="light"] .icon-sun{display:block}
:not([data-theme="light"]) .icon-sun{display:none}
:not([data-theme="light"]) .icon-moon{display:block}

/* ── Body lock when menu/search open ───────────────────────────── */
body.body--menu-open,body.body--search-open{overflow:hidden}

/* ── Nav hamburger open state ───────────────────────────────────── */
.nav__hamburger--open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__hamburger--open span:nth-child(2){opacity:0;transform:translateX(-8px)}
.nav__hamburger--open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Search overlay open state ──────────────────────────────────── */
.search-overlay--open{
  opacity:1;visibility:visible;pointer-events:all;
}
.search-overlay__none{
  font-size:14px;color:var(--text-2);padding:20px;text-align:center;
}
.search-overlay__result{
  display:flex;align-items:center;gap:12px;padding:12px 20px;
  border-bottom:1px solid var(--border);transition:background .15s;
  cursor:pointer;
}
.search-overlay__result:hover{background:var(--bg-2);}
.search-overlay__badge{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:100px;flex-shrink:0;
}
.search-overlay__badge--peptide{background:rgba(124,58,237,.15);color:var(--purple-lt);}
.search-overlay__badge--tool{background:rgba(34,197,94,.12);color:#4ade80;}
.search-overlay__badge--article{background:rgba(59,130,246,.12);color:#60a5fa;}
.search-overlay__badge--page{background:var(--bg-2);color:var(--text-2);}
.search-overlay__title{font-size:14px;color:var(--text-1);}

/* ── Dropdown open state ────────────────────────────────────────── */
.nav__dropdown--open .nav__dropdown-menu{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:all;
}

/* ── Hero extended ──────────────────────────────────────────────── */
.hero__scroll-hint{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.hero__scroll-hint span{
  display:block;width:1.5px;height:40px;
  background:linear-gradient(to bottom,var(--purple),transparent);
  animation:scrollline 2s ease-in-out infinite;
}
@keyframes scrollline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── Trust bar marquee ──────────────────────────────────────────── */
.trust-bar{
  overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:14px 0;background:var(--bg-2);
}
.trust-bar__track{
  display:flex;align-items:center;gap:28px;white-space:nowrap;
  animation:marquee 30s linear infinite;width:max-content;
}
.trust-bar__track span{
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-2);flex-shrink:0;
}
.trust-bar__dot{color:var(--purple);opacity:.6}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.trust-bar__track{animation:none}}

/* ── Why grid ───────────────────────────────────────────────────── */
.why__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:48px;
}
.why__card{
  background:var(--bg-2);border:1px solid var(--border);border-radius:16px;
  padding:28px 24px;transition:border-color .25s,transform .25s;
}
.why__card:hover{border-color:var(--purple);transform:translateY(-3px);}
.why__icon{font-size:28px;margin-bottom:14px;}
.why__title{font-size:17px;font-weight:700;color:var(--text-1);margin-bottom:8px;}
.why__desc{font-size:14px;line-height:1.7;color:var(--text-2);}

/* ── Calculator feature ─────────────────────────────────────────── */
.calc-feature{background:var(--bg-2);}
.calc-feature__inner{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.calc-feature__list{
  list-style:none;padding:0;margin:20px 0 32px;display:flex;flex-direction:column;gap:10px;
}
.calc-feature__list li{
  display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-2);
}
.calc-feature__widget{display:flex;justify-content:center;}

/* ── Calc widget (preview) ──────────────────────────────────────── */
.calc-widget{
  background:var(--bg);border:1px solid var(--border);border-radius:16px;
  overflow:hidden;width:100%;max-width:380px;
  box-shadow:0 24px 64px rgba(0,0,0,.3),0 0 0 1px var(--border);
}
.calc-widget__header{
  display:flex;align-items:center;gap:6px;padding:12px 16px;
  border-bottom:1px solid var(--border);background:var(--bg-2);
}
.calc-widget__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.calc-widget__title{
  font-size:12px;font-weight:600;color:var(--text-2);margin-left:auto;
  letter-spacing:.02em;
}
.calc-widget__body{padding:20px;}
.calc-widget__row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;align-items:center;}
.calc-widget__label{font-size:12px;font-weight:600;color:var(--text-2);}
.calc-widget__input-wrap{display:flex;align-items:stretch;border-radius:8px;overflow:hidden;border:1px solid var(--border);}
.calc-widget__input{
  flex:1;padding:8px 10px;background:var(--bg-2);border:none;
  color:var(--text-1);font-family:inherit;font-size:13px;outline:none;width:0;
  min-width:0;
}
.calc-widget__unit{
  padding:0 10px;background:var(--bg-2);border-left:1px solid var(--border);
  font-size:11px;font-weight:700;color:var(--text-2);display:flex;align-items:center;
}
.calc-widget__result{
  background:var(--bg-2);border-radius:10px;padding:14px;margin-top:16px;
}
.calc-widget__result-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;padding:4px 0;color:var(--text-2);
}
.calc-widget__result-row strong{color:var(--purple);font-weight:900;}

/* ── Calc card preview (static, replaces live widget on homepage) ── */
.calc-card-preview{
  background:var(--bg);border:1px solid var(--border);border-radius:16px;
  overflow:hidden;width:100%;max-width:380px;
  box-shadow:0 24px 64px rgba(0,0,0,.3),0 0 0 1px var(--border);
}
.calc-card-preview__header{
  display:flex;align-items:center;gap:6px;padding:12px 16px;
  border-bottom:1px solid var(--border);background:var(--bg-2);
}
.calc-card-preview__dots{display:flex;gap:5px;}
.calc-card-preview__dots span{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.calc-card-preview__title{
  font-size:12px;font-weight:600;color:var(--text-2);margin-left:auto;letter-spacing:.02em;
}
.calc-card-preview__body{padding:20px;}
.calc-card-preview__row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--border);
}
.calc-card-preview__row:last-of-type{border-bottom:none;}
.calc-card-preview__label{font-size:12px;font-weight:600;color:var(--text-2);}
.calc-card-preview__value{font-size:13px;font-weight:700;color:var(--text-1);}
.calc-card-preview__result{
  background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(168,85,247,.08));
  border:1px solid rgba(124,58,237,.25);border-radius:10px;
  padding:16px;margin-top:14px;text-align:center;
}
.calc-card-preview__result-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:4px;}
.calc-card-preview__result-num{font-size:32px;font-weight:900;color:var(--purple-lt);letter-spacing:-.04em;line-height:1;}
.calc-card-preview__result-sub{font-size:11px;color:var(--text-3);margin-top:4px;}
.calc-card-preview__cta{
  display:block;text-align:center;padding:14px 16px;background:var(--purple);
  color:#fff;font-size:13px;font-weight:700;text-decoration:none;
  border-top:1px solid var(--border);letter-spacing:.01em;
  transition:background var(--t);
}
.calc-card-preview__cta:hover{background:var(--purple-dk);}
[data-theme="light"] .calc-card-preview{background:#fff;border-color:rgba(0,0,0,.12);box-shadow:0 12px 40px rgba(0,0,0,.1);}
[data-theme="light"] .calc-card-preview__header,[data-theme="light"] .calc-card-preview__body{background:#fafafa;}

/* ── Articles preview grid ──────────────────────────────────────── */
.articles-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.article-card{
  background:var(--bg-2);border:1px solid var(--border);border-radius:16px;
  overflow:hidden;transition:border-color .25s,transform .25s;
}
.article-card:hover{border-color:var(--purple);transform:translateY(-2px);}
.article-card--featured{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;}
.article-card__img-wrap{position:relative;overflow:hidden;}
.article-card__img-placeholder{height:100%;min-height:220px;}
.article-card__img-placeholder--1{
  background:linear-gradient(135deg,rgba(124,58,237,.3) 0%,rgba(168,85,247,.2) 100%);
}
.article-card__body{padding:24px;}
.article-card__cat{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--purple);margin-bottom:10px;
}
.article-card__title{font-size:18px;font-weight:700;color:var(--text-1);line-height:1.35;margin-bottom:10px;}
.article-card__link{color:inherit;}
.article-card__link:hover{color:var(--purple);}
.article-card__excerpt{font-size:14px;line-height:1.7;color:var(--text-2);margin-bottom:16px;}
.article-card__meta{display:flex;align-items:center;gap:12px;}
.article-card__read{font-size:12px;color:var(--text-2);}
.section__cta{text-align:center;margin-top:40px;}

/* ── Article featured ───────────────────────────────────────────── */
.article-featured{margin-bottom:40px;}
.article-featured__link{
  display:grid;grid-template-columns:1.2fr 1fr;gap:0;
  background:var(--bg-2);border:1px solid var(--border);border-radius:20px;
  overflow:hidden;transition:border-color .25s,box-shadow .25s;
}
.article-featured__link:hover{border-color:var(--purple);box-shadow:0 8px 40px rgba(124,58,237,.12);}
.article-featured__img-wrap{position:relative;min-height:300px;}
.article-featured__img{
  width:100%;height:100%;
  background:linear-gradient(135deg,rgba(124,58,237,.4) 0%,rgba(10,10,15,.8) 100%);
}
.article-featured__body{padding:40px 36px;display:flex;flex-direction:column;justify-content:center;}
.article-featured__title{font-size:22px;font-weight:900;color:var(--text-1);line-height:1.3;margin-bottom:12px;}
.article-featured__excerpt{font-size:15px;line-height:1.7;color:var(--text-2);margin-bottom:16px;}
.article-featured__cta{font-size:13px;font-weight:700;color:var(--purple);}

/* ── Page hero ──────────────────────────────────────────────────── */
.page-hero{
  padding:calc(var(--nav-h) + 44px) 0 52px;
  border-bottom:1px solid var(--border);
  background:var(--bg);position:relative;overflow:hidden;
}
.page-hero--gradient::before{
  content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);
  width:800px;height:500px;
  background:radial-gradient(ellipse,rgba(124,58,237,.12) 0%,transparent 70%);
  pointer-events:none;
}
.page-hero .container{position:relative;}
.page-hero__title{
  font-size:clamp(32px,5vw,52px);font-weight:900;letter-spacing:-.03em;
  line-height:1.1;color:var(--text-1);margin:12px 0 16px;
}
.page-hero__sub{font-size:16px;color:var(--text-2);max-width:600px;line-height:1.65;}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.breadcrumb__link{font-size:13px;color:var(--text-2);}
.breadcrumb__link:hover{color:var(--purple);}
.breadcrumb__sep{color:var(--text-2);opacity:.5;}
.breadcrumb__current{font-size:13px;color:var(--text-2);opacity:.6;}

/* ── Library page ───────────────────────────────────────────────── */
.library-page__search-wrap{margin-bottom:20px;}
.library-page__search-inner{
  position:relative;display:flex;align-items:center;
  background:var(--bg-2);border:1px solid var(--border);border-radius:12px;
  padding:0 16px;transition:border-color .2s,box-shadow .2s;
}
.library-page__search-inner:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,.1);}
.library-page__search-icon{color:var(--text-2);flex-shrink:0;}
.library-page__search-input{
  flex:1;padding:14px 12px;background:transparent;border:none;
  font-family:inherit;font-size:15px;color:var(--text-1);outline:none;
}
.library-page__search-input::placeholder{color:var(--text-2);}
.library-page__count{font-size:13px;color:var(--text-2);margin:8px 0 24px;}
.library-page__count strong{color:var(--text-1);}
.library-page__empty{text-align:center;padding:60px 20px;}
.library-page__empty-icon{font-size:48px;margin-bottom:12px;}
.library-page__empty-text{font-size:16px;color:var(--text-2);margin-bottom:20px;}
.peptide-grid--full{grid-template-columns:repeat(3,1fr);}

/* ── Filter bar ─────────────────────────────────────────────────── */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.filter-bar--secondary{margin-top:-12px;margin-bottom:16px;}
.filter-pill{
  padding:8px 18px;border-radius:100px;font-size:13px;font-weight:700;
  border:1px solid var(--border);color:var(--text-2);background:transparent;
  cursor:pointer;transition:all .2s;letter-spacing:-.01em;
}
.filter-pill:hover{border-color:var(--purple);color:var(--purple);}
.filter-pill.active{background:var(--purple);border-color:var(--purple);color:#fff;}
.filter-pill--sm{padding:6px 14px;font-size:12px;}

/* ── FAQ page tab-nav & accordion — full styles near line 2675 ─── */
.faq-panel{display:none;}
.faq-panel.active{display:block;}
.faq-list{display:flex;flex-direction:column;gap:0;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:first-child{border-top:1px solid var(--border);}
.faq-item__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;text-align:left;color:var(--text-1);
  font-size:16px;font-weight:700;line-height:1.4;
  background:none;border:none;cursor:pointer;
  transition:color .2s;
}
.faq-item__q:hover{color:var(--purple);}
.faq-item__q-text{flex:1;}
.faq-item__icon{flex-shrink:0;color:var(--text-2);transition:transform .3s;}
.faq-item__body{
  overflow:hidden;max-height:0;transition:max-height .4s ease,padding .3s ease;
  padding:0 20px;
}
.faq-item--open .faq-item__body{max-height:2000px;padding-bottom:20px;}
.faq-item--open .faq-item__icon{transform:rotate(180deg);}
.faq-item__a{font-size:15px;line-height:1.8;color:var(--text-2);}
.faq-item__a--html{font-size:15px;line-height:1.8;color:var(--text-2);}
.faq-item__a--html p{margin:0 0 12px;}
.faq-item__a--html p:last-child{margin-bottom:0;}
.faq-item__a--html ul,.faq-item__a--html ol{margin:0 0 12px;padding-left:28px;}
.faq-item__a--html ul{list-style:disc;}
.faq-item__a--html ol{list-style:decimal;}
.faq-item__a--html li{margin-bottom:4px;display:list-item;}

/* FAQ CTA */
.faq-cta{margin-top:56px;}
.faq-cta__inner{
  background:var(--bg-2);border:1px solid var(--border);border-radius:20px;
  padding:48px 40px;text-align:center;
}
.faq-cta__icon{width:60px;height:60px;border-radius:16px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--purple-lt);}
.faq-cta__icon svg{width:28px;height:28px;flex-shrink:0;}
.faq-cta__title{font-size:24px;font-weight:900;color:var(--text-1);margin-bottom:8px;letter-spacing:-.02em;}
.faq-cta__sub{font-size:15px;color:var(--text-2);margin-bottom:24px;}
.faq-cta__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ── Start Here page ────────────────────────────────────────────── */
.start-toc{
  background:var(--bg-2);border:1px solid var(--border);border-radius:16px;
  padding:28px 32px;max-width:640px;
}
.start-toc__title{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);margin-bottom:14px;}
.start-toc__list{counter-reset:toc;display:flex;flex-direction:column;gap:8px;}
.start-toc__list li{counter-increment:toc;display:flex;align-items:center;gap:10px;}
.start-toc__list li::before{
  content:counter(toc);display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--purple-soft);
  color:var(--purple);font-size:11px;font-weight:700;flex-shrink:0;
}
.start-toc__link{font-size:14px;color:var(--text-1);}
.start-toc__link:hover{color:var(--purple);}

.start-section{padding:80px 0;}
.start-section--alt{background:var(--bg-2);}
.start-section__content{max-width:760px;}
.start-section__content p{font-size:16px;line-height:1.8;color:var(--text-2);margin-bottom:16px;}

.start-callout{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--purple-soft);border:1px solid var(--purple-mid);border-radius:12px;
  padding:18px 20px;margin-top:24px;
}
.start-callout__icon{font-size:20px;flex-shrink:0;margin-top:2px;}
.start-callout p{font-size:14px;line-height:1.7;color:var(--text-2);margin:0;}

.start-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px;}
.start-mini-card{
  background:var(--bg-2);border:1px solid var(--border);border-radius:16px;
  padding:24px;transition:border-color .22s,transform .22s;
}
.start-mini-card:hover{border-color:var(--purple);transform:translateY(-2px);}
.start-mini-card__icon{font-size:28px;margin-bottom:12px;}
.start-mini-card__title{font-size:15px;font-weight:700;color:var(--text-1);margin-bottom:8px;}
.start-mini-card__text{font-size:13px;line-height:1.7;color:var(--text-2);}

.start-cat-grid{display:flex;flex-direction:column;gap:12px;margin-top:24px;}
.start-cat-card{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--bg-2);border:1px solid var(--border);border-radius:14px;
  padding:20px 24px;transition:border-color .2s;
}
.start-cat-card:hover{border-color:var(--purple);}
.start-cat-card__icon{font-size:24px;flex-shrink:0;margin-top:2px;}
.start-cat-card__title{font-size:15px;font-weight:700;color:var(--text-1);margin-bottom:4px;}
.start-cat-card__text{font-size:13px;line-height:1.7;color:var(--text-2);}

.start-steps{display:flex;flex-direction:column;gap:0;margin-top:24px;}
.start-step{
  display:flex;gap:20px;align-items:flex-start;padding:24px 0;
  border-bottom:1px solid var(--border);
}
.start-step:last-child{border-bottom:none;}
.start-step__num{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:var(--purple);
  color:#fff;font-size:14px;font-weight:900;flex-shrink:0;
}
.start-step__title{font-size:16px;font-weight:700;color:var(--text-1);margin-bottom:6px;}
.start-step__text{font-size:14px;line-height:1.7;color:var(--text-2);}

.start-peptide-list{display:flex;flex-direction:column;gap:12px;margin-top:24px;}
.start-peptide-item{
  display:flex;align-items:center;gap:16px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:14px;
  padding:20px 24px;transition:border-color .2s,transform .2s;
}
.start-peptide-item:hover{border-color:var(--purple);transform:translateX(4px);}
.start-peptide-item__badge{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--purple);background:var(--purple-soft);border:1px solid var(--purple-mid);
  border-radius:100px;padding:4px 12px;flex-shrink:0;
}
.start-peptide-item__name{font-size:16px;font-weight:700;color:var(--text-1);margin-bottom:2px;}
.start-peptide-item__desc{font-size:13px;color:var(--text-2);}
.start-peptide-item__arrow{color:var(--purple);margin-left:auto;font-size:18px;flex-shrink:0;}

/* ── Products page ──────────────────────────────────────────────── */
.products-disclosure{
  display:flex;align-items:flex-start;gap:10px;
  background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.2);
  border-radius:10px;padding:14px 18px;margin-bottom:0;
  font-size:13px;line-height:1.7;color:var(--text-2);
}
.products-disclosure p{margin:0;}
/* Research-only notice banner on peptide detail pages */
.research-notice{
  display:flex;align-items:flex-start;gap:10px;
  background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.2);
  border-radius:10px;padding:12px 16px;
  font-size:12px;line-height:1.6;color:var(--text-2);
}
.research-notice svg{flex-shrink:0;margin-top:1px;color:var(--purple-lt);}
[data-theme="light"] .research-notice{background:rgba(124,58,237,.04);border-color:rgba(124,58,237,.15);}
.products-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.product-card{
  background:var(--bg-2);border:1px solid var(--border);border-radius:16px;
  padding:24px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .25s,transform .25s;
}
.product-card:hover{border-color:var(--purple);transform:translateY(-2px);}
.product-card__head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.product-card__cat{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);}
.product-card__badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:100px;}
.product-card__badge--primary{background:rgba(124,58,237,.15);color:var(--purple-lt);}
.product-card__badge--secondary{background:rgba(59,130,246,.12);color:#60a5fa;}
.product-card__badge--warning{background:rgba(239,68,68,.1);color:#f87171;}
.product-card__badge--free{background:rgba(34,197,94,.1);color:#4ade80;}
.product-card__name{font-size:16px;font-weight:700;color:var(--text-1);line-height:1.35;}
.product-card__desc{font-size:13px;line-height:1.7;color:var(--text-2);}
.product-card__why{
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;flex:1;
}
.product-card__why-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--purple);margin-bottom:6px;}
.product-card__why-text{font-size:12px;line-height:1.7;color:var(--text-2);}
.product-card__footer{display:flex;align-items:center;gap:12px;margin-top:4px;flex-wrap:wrap;}
.product-card__price{font-size:18px;font-weight:700;color:var(--text-1);letter-spacing:-.02em;margin-right:auto;}
.product-card__coming{font-size:12px;color:var(--text-2);font-style:italic;}

.products-suggest{
  margin-top:56px;text-align:center;
  background:var(--bg-2);border:1px solid var(--border);border-radius:20px;padding:48px 40px;
}
.products-suggest__icon{width:60px;height:60px;border-radius:16px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--purple);}
.products-suggest__icon svg{width:28px;height:28px;flex-shrink:0;}
.products-suggest__title{font-size:22px;font-weight:900;color:var(--text-1);margin-bottom:8px;letter-spacing:-.02em;}
.products-suggest__text{font-size:15px;color:var(--text-2);margin-bottom:24px;}

/* ── btn--sm ────────────────────────────────────────────────────── */
.btn--sm{height:36px;padding:0 16px;font-size:13px;}

/* ── Newsletter extra ───────────────────────────────────────────── */
.newsletter__input{
  flex:1;padding:0 20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:100px;font-family:inherit;font-size:15px;color:#fff;
  outline:none;min-width:0;transition:border-color .2s;height:52px;
}
.newsletter__input:focus{border-color:rgba(255,255,255,.4);}
.newsletter__input::placeholder{color:rgba(255,255,255,.4);}
.newsletter__field-wrap{display:flex;gap:10px;flex-wrap:wrap;}
.newsletter__msg{font-size:13px;margin-top:8px;min-height:20px;display:block;}
.newsletter__msg--error{color:#f87171;}
.newsletter__msg--success{color:#4ade80;}
.newsletter__privacy{font-size:12px;color:rgba(255,255,255,.35);margin-top:10px;}

/* ── Library preview CTA ────────────────────────────────────────── */
.library-preview__cta{text-align:center;margin-top:40px;}

/* ── Responsive additions ───────────────────────────────────────── */
@media(max-width:960px){
  .calc-feature__inner{grid-template-columns:1fr;gap:40px;}
  .calc-feature__widget{order:-1;}
  .articles-grid{grid-template-columns:1fr;}
  .article-card--featured{grid-column:auto;}
  .article-featured__link{grid-template-columns:1fr;}
  .article-featured__img-wrap{min-height:200px;}
  .why__grid{grid-template-columns:1fr 1fr;}
  .start-grid{grid-template-columns:1fr 1fr;}
  .products-grid{grid-template-columns:1fr 1fr;}
  .peptide-grid--full{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .why__grid{grid-template-columns:1fr;}
  .start-grid{grid-template-columns:1fr;}
  .products-grid{grid-template-columns:1fr;}
  .peptide-grid--full{grid-template-columns:1fr;}
  .tab-nav{gap:6px;}
  .tab-nav__btn{padding:8px 14px;font-size:12px;}
  .faq-cta__inner{padding:32px 24px;}
  .faq-cta__actions{flex-direction:column;align-items:center;}
  .products-suggest{padding:32px 24px;}
}
@media(max-width:600px){
  .trust-bar__track span:not(.trust-bar__dot){font-size:11px;}
  .start-section{padding:56px 0;}
  .start-toc{padding:20px;}
  .start-cat-card{flex-direction:column;}
  .start-peptide-item{flex-wrap:wrap;}
  .start-peptide-item__arrow{display:none;}
  .article-featured__body{padding:24px;}
  .article-featured__title{font-size:18px;}
  .library-page__search-input{font-size:14px;}
  .filter-bar{gap:6px;}
  .filter-pill{padding:6px 14px;font-size:12px;}
}

/* ================================================================
   HOMEPAGE HERO — additional classes
   ================================================================ */
.hero__inner{position:relative;z-index:1;max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--purple-lt);background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.25);border-radius:100px;padding:7px 18px;margin-bottom:28px}
[data-theme="light"] .hero__badge{color:var(--purple)}
.hero__badge-dot{width:6px;height:6px;border-radius:50%;background:var(--purple-lt);animation:blink 2.4s ease-in-out infinite;flex-shrink:0}
[data-theme="light"] .hero__badge-dot{background:var(--purple)}
.hero__h1{font-size:clamp(26px,8vw,90px);font-weight:900;letter-spacing:-.04em;line-height:1.0;color:var(--text-1);margin-bottom:20px}
.hero__h1-accent{background:linear-gradient(135deg,#a855f7 0%,#7c3aed 40%,#c084fc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
.hero__sub{font-size:clamp(16px,2.2vw,20px);color:var(--text-2);line-height:1.7;max-width:600px;margin:0 0 36px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:56px}
.hero__stats{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--bg-card)}
.hero__stat{padding:18px 28px;text-align:center}
.hero__stat-div{width:1px;height:40px;background:var(--border);flex-shrink:0}
.hero__stat-num{display:block;font-size:clamp(22px,3vw,32px);font-weight:900;letter-spacing:-.04em;color:var(--purple-lt);line-height:1}
[data-theme="light"] .hero__stat-num{color:var(--purple)}
.hero__stat-label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin-top:4px}

/* Hero stars second layer */
.hero__stars--2::before{animation-delay:1.2s;opacity:.6}

@media(max-width:768px){
  .hero__stats{flex-wrap:wrap;justify-content:center}
  .hero__stat-div{display:none}
  .hero__stat{padding:14px 20px;border-right:1px solid var(--border)}
  .hero__stat:nth-child(even){border-right:none}
}
@media(max-width:480px){
  .hero__stats{width:100%}
  .hero__stat{flex:1;min-width:calc(50% - 1px);padding:12px 16px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{justify-content:center;width:100%}
}

/* ================================================================
   AGE GATE & EXIT INTENT POPUPS
   ================================================================ */

/* ── Age Gate ──────────────────────────────────────────────────── */
.age-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px;
  background: rgba(6, 2, 18, 0.84);
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  animation: ageGateFadeIn .28s ease both;
}
@keyframes ageGateFadeIn { from{opacity:0;} to{opacity:1;} }
.age-gate.hidden { display: none; }

.age-gate__box {
  background: var(--bg-2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 44px 40px;
  max-width: 480px; width: 100%;
  text-align: center;
  box-shadow: 0 8px 48px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.07) inset;
  transition: max-width .3s ease;
  position: relative;
  animation: ageGateSlideUp .35s cubic-bezier(.22,.9,.36,1) both;
}
@keyframes ageGateSlideUp { from{transform:translateY(18px);opacity:0;} to{transform:translateY(0);opacity:1;} }
.age-gate__box--wide { max-width: 680px; }

/* Logo */
.age-gate__logo {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.age-gate__logo-mark {
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-lt) 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(124,58,237,.4);
}
.age-gate__logo-mark svg { width: 20px; height: 20px; }
.age-gate__logo-name { font-size: 17px; font-weight: 900; color: var(--text-1); letter-spacing: -.02em; }

/* Steps */
.age-gate__step { display: none; }
.age-gate__step.active { display: block; }

.age-gate__icon {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; color: var(--teal, #0E9488);
}
.age-gate__title {
  font-size: 23px; font-weight: 900; color: var(--text-1);
  letter-spacing: -.03em; margin-bottom: 10px; line-height: 1.2;
}
.age-gate__title--sm { font-size: 20px; margin-bottom: 8px; }
.age-gate__sub {
  font-size: 14.5px; color: var(--text-2); line-height: 1.65; margin-bottom: 20px;
}

/* Disclaimer scroll box (Step 3) */
.age-gate__legal {
  max-height: 190px; overflow-y: auto; text-align: left;
  background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 14px 16px;
  margin-bottom: 14px; font-size: 12px; line-height: 1.68; color: var(--text-2);
  scrollbar-width: thin; scrollbar-color: var(--purple) transparent;
}
.age-gate__legal::-webkit-scrollbar { width: 4px; }
.age-gate__legal::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 4px; }

/* Restricted box (Step 2) */
.age-gate__minor {
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
  border-radius: 10px; padding: 16px 20px; margin-bottom: 20px;
}
.age-gate__minor p { font-size: 14px; color: var(--text-2); line-height: 1.7; margin: 0; }

/* Checkbox row */
.age-gate__disclaimer-check {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(124,58,237,.07); border: 1px solid rgba(124,58,237,.18);
  border-radius: 10px; padding: 12px 14px;
  margin-bottom: 16px; text-align: left; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.age-gate__disclaimer-check:hover { background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.35); }
.age-gate__disclaimer-check input[type="checkbox"] {
  width: 17px; height: 17px; margin-top: 2px;
  accent-color: var(--purple); cursor: pointer; flex-shrink: 0;
}
.age-gate__disclaimer-check span { font-size: 12px; color: var(--text-2); line-height: 1.55; }

/* Action buttons */
.age-gate__actions { display: flex; flex-direction: column; gap: 10px; }
.age-gate__actions--row { flex-direction: row; }
.age-gate__actions--row .age-gate__btn { flex: 1; }
.age-gate__btn {
  height: 50px; border-radius: 100px;
  font-size: 15px; font-weight: 700;
  font-family: 'Lato', sans-serif; cursor: pointer;
  border: none; transition: background .18s, box-shadow .18s, transform .12s;
}
.age-gate__btn:active { transform: scale(.97); }
.age-gate__btn--yes {
  background: linear-gradient(135deg, var(--purple), var(--purple-lt));
  color: #fff;
  box-shadow: 0 4px 20px rgba(124,58,237,.38);
}
.age-gate__btn--yes:hover {
  box-shadow: 0 6px 28px rgba(124,58,237,.5);
  filter: brightness(1.08);
}
.age-gate__btn--no {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.18) !important;
  color: var(--text-2);
}
.age-gate__btn--no:hover {
  border-color: var(--purple) !important;
  color: var(--text-1);
  background: rgba(124,58,237,.06);
}
.age-gate__btn--proceed { opacity: .4; pointer-events: none; }
.age-gate__btn--proceed.enabled { opacity: 1; pointer-events: all; }

.age-gate__note {
  font-size: 11px; color: var(--text-3);
  margin-top: 10px; line-height: 1.4;
}

/* ── Age Gate: mobile — centered scrollable modal ──────────────── */
@media (max-width: 500px) {
  .age-gate {
    padding: 16px;
    align-items: center;       /* centered — not bottom-sheet */
  }
  .age-gate__box {
    padding: 28px 20px 28px;
    border-radius: 20px;       /* full rounded on all sides */
    max-width: 100%;
    /* Scrollable if content is taller than viewport */
    max-height: calc(100dvh - 32px);
    max-height: calc(100vh - 32px); /* fallback for older browsers */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Shadows stay on all sides */
    box-shadow: 0 8px 48px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.07) inset;
    border: 1px solid rgba(255,255,255,.1);
  }
  .age-gate__logo { margin-bottom: 14px; padding-bottom: 14px; }
  .age-gate__logo-mark { width: 34px; height: 34px; border-radius: 9px; }
  .age-gate__logo-name { font-size: 15px; }
  .age-gate__title { font-size: 20px; }
  .age-gate__title--sm { font-size: 18px; }
  .age-gate__sub { font-size: 13.5px; margin-bottom: 16px; }
  .age-gate__legal { max-height: 120px; font-size: 11.5px; padding: 10px 12px; }
  .age-gate__btn { height: 46px; font-size: 14.5px; }
  .age-gate__actions--row { flex-direction: column; }
  .age-gate__note { margin-top: 8px; }
}

/* Exit Intent Popup */
.exit-popup{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.exit-popup.show{opacity:1;visibility:visible}
.exit-popup__box{background:var(--bg-2);border:1px solid var(--border-strong);border-radius:var(--r-xl);padding:48px 40px;max-width:480px;width:100%;text-align:center;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.exit-popup__close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s}
.exit-popup__close:hover{background:var(--bg-3);color:var(--text-1)}
.exit-popup__icon{display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--teal,#0E9488)}
.exit-popup__title{font-size:24px;font-weight:900;color:var(--text-1);letter-spacing:-.03em;margin-bottom:10px}
.exit-popup__sub{font-size:15px;color:var(--text-2);line-height:1.65;margin-bottom:28px}
.exit-popup__actions{display:flex;justify-content:center}
.exit-popup__btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 28px;border-radius:100px;background:var(--purple);color:#fff;font-size:15px;font-weight:700;font-family:'Lato',sans-serif;border:none;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .2s}
.exit-popup__btn:hover{background:var(--purple-dk);color:#fff}
.exit-popup__skip{display:block;font-size:12px;color:var(--text-3);margin-top:14px;cursor:pointer;transition:color .2s}
.exit-popup__skip:hover{color:var(--text-2)}
@media(max-width:480px){
  .exit-popup__box{padding:32px 24px}
  .exit-popup__btn{width:100%}
}

/* ================================================================
   PRICING PAGE
   ================================================================ */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:800px;margin:0 auto}
.pricing-card{background:var(--bg-2);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:36px 32px;display:flex;flex-direction:column;gap:0;position:relative;overflow:hidden}
.pricing-card--pro{border-color:var(--purple);background:linear-gradient(160deg,var(--bg-2) 0%,rgba(124,58,237,.06) 100%)}
.pricing-card--pro::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--purple),var(--purple-lt))}
.pricing-card__badge{position:absolute;top:20px;right:20px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:100px;background:var(--purple);color:#fff}
.pricing-card__name{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.pricing-card__price{font-size:52px;font-weight:900;letter-spacing:-.04em;color:var(--text-1);line-height:1;margin-bottom:4px}
.pricing-card__price sup{font-size:22px;vertical-align:super;font-weight:700}
.pricing-card__price span{font-size:16px;font-weight:400;color:var(--text-3);letter-spacing:0}
.pricing-card__sub{font-size:13px;color:var(--text-3);margin-bottom:28px}
.pricing-card__divider{height:1px;background:var(--border);margin:0 -32px 28px}
.pricing-card__features{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;flex:1}
.pricing-feature{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-2)}
.pricing-feature__check{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--purple-lt));display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.pricing-feature__check svg{width:10px;height:10px}
.pricing-feature--locked{opacity:.4}
.pricing-feature--locked .pricing-feature__check{background:var(--bg-3)}
.pricing-card__cta{width:100%;height:50px;border-radius:100px;font-size:15px;font-weight:700;font-family:'Lato',sans-serif;cursor:pointer;border:none;transition:background .2s,box-shadow .2s}
.pricing-cta--free{background:var(--bg-3);color:var(--text-1)}
.pricing-cta--free:hover{background:var(--border-strong)}
.pricing-cta--pro{background:var(--purple);color:#fff;box-shadow:0 4px 18px rgba(124,58,237,.3)}
.pricing-cta--pro:hover{background:var(--purple-dk);box-shadow:0 6px 24px rgba(124,58,237,.4)}
.pricing-faq-link{text-align:center;margin-top:32px;font-size:14px;color:var(--text-2)}
.pricing-faq-link a{color:var(--purple-lt);font-weight:700}
[data-theme="light"] .pricing-faq-link a{color:var(--purple)}
@media(max-width:640px){.pricing-grid{grid-template-columns:1fr}}

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:60px;align-items:flex-start}
.contact-info{display:flex;flex-direction:column;gap:20px}
.contact-info__item{display:flex;align-items:flex-start;gap:14px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}
.contact-info__icon{width:44px;height:44px;border-radius:12px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--purple-lt)}
.contact-info__icon svg{width:20px;height:20px;flex-shrink:0}
.contact-info__label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.contact-info__val{font-size:14px;color:var(--text-2);line-height:1.6}
.contact-info__val a{color:var(--purple-lt);font-weight:700}
[data-theme="light"] .contact-info__val a{color:var(--purple)}
.contact-form{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:36px}
.contact-form__row{margin-bottom:20px}
.contact-form__label{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.contact-form__input,.contact-form__textarea,.contact-form__select{width:100%;padding:12px 16px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);font-size:14px;font-family:'Lato',sans-serif;color:var(--text-1);outline:none;transition:border-color .2s}
.contact-form__input:focus,.contact-form__textarea:focus,.contact-form__select:focus{border-color:var(--purple)}
.contact-form__textarea{height:140px;resize:vertical;line-height:1.6}
.contact-form__select{cursor:pointer;background:var(--bg)}
.contact-form__submit{width:100%;height:50px;border-radius:100px;background:var(--purple);color:#fff;font-size:15px;font-weight:700;font-family:'Lato',sans-serif;border:none;cursor:pointer;transition:background .2s,box-shadow .2s}
.contact-form__submit:hover{background:var(--purple-dk);box-shadow:0 4px 18px rgba(124,58,237,.3)}
.contact-form__msg{font-size:13px;margin-top:12px;text-align:center;min-height:18px}
.contact-form__msg--ok{color:#4ade80}
.contact-form__msg--err{color:#f87171}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}

/* ================================================================
   ABOUT PAGE
   ================================================================ */
.about-hero-img{width:100%;height:280px;background:linear-gradient(135deg,rgba(124,58,237,.3) 0%,rgba(168,85,247,.15) 50%,rgba(10,10,15,.8) 100%);border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;font-size:72px;margin-bottom:48px}
.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.about-value{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 24px;transition:border-color .2s,transform .2s}
.about-value:hover{border-color:var(--purple);transform:translateY(-3px)}
.about-value__icon{font-size:32px;margin-bottom:14px}
.about-value__title{font-size:17px;font-weight:900;color:var(--text-1);margin-bottom:8px;letter-spacing:-.02em}
.about-value__desc{font-size:14px;color:var(--text-2);line-height:1.7}
.about-team{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.about-team-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 24px;text-align:center}
.about-team-card__avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--purple-lt));display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 14px}
.about-team-card__name{font-size:16px;font-weight:900;color:var(--text-1);margin-bottom:4px}
.about-team-card__role{font-size:13px;color:var(--purple-lt);font-weight:700;margin-bottom:8px}
[data-theme="light"] .about-team-card__role{color:var(--purple)}
.about-team-card__bio{font-size:13px;color:var(--text-2);line-height:1.6}
@media(max-width:768px){
  .about-values{grid-template-columns:1fr 1fr}
  .about-team{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .about-values{grid-template-columns:1fr}
  .about-team{grid-template-columns:1fr}
}

/* ================================================================
   HOMEPAGE SECTIONS — missing utility classes
   ================================================================ */

/* Section typography */
.section__eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-lt);display:block;margin-bottom:10px}
[data-theme="light"] .section__eyebrow{color:var(--purple)}
.section__title{font-size:clamp(26px,4vw,42px);font-weight:900;letter-spacing:-.04em;line-height:1.1;color:var(--text-1);margin-bottom:12px}
.section__sub{font-size:16px;color:var(--text-2);line-height:1.65;max-width:560px}
.section__head--center .section__sub{margin-left:auto;margin-right:auto}

/* How It Works — updated card structure */
.howit__icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--purple) 0%,var(--purple-lt) 100%);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:16px;box-shadow:0 4px 14px var(--purple-glow)}
.howit__step{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-lt);margin-bottom:8px}
[data-theme="light"] .howit__step{color:var(--purple)}
.howit__title{font-size:17px;font-weight:900;color:var(--text-1);letter-spacing:-.02em;margin-bottom:10px}
.howit__desc{font-size:14px;color:var(--text-2);line-height:1.7}

/* Peptide card — homepage version uses different sub-classes */
.peptide-card__tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--purple-lt);background:var(--purple-soft);border:1px solid var(--purple-mid);border-radius:100px;padding:3px 10px;white-space:nowrap;flex-shrink:0}
[data-theme="light"] .peptide-card__tag{color:var(--purple)}
.peptide-card__route{font-size:11px;font-weight:700;color:var(--text-3)}
.peptide-card__name{font-size:18px;font-weight:900;color:var(--text-1);letter-spacing:-.03em;margin-bottom:2px}
.peptide-card__aka{font-size:12px;color:var(--text-3);margin-bottom:8px}
.peptide-card__desc{font-size:13px;color:var(--text-2);line-height:1.65;flex:1}
.peptide-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.peptide-card__level{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:100px}
.peptide-card__level--beginner{background:rgba(34,197,94,.1);color:#4ade80;border:1px solid rgba(34,197,94,.2)}
.peptide-card__level--intermediate{background:rgba(245,158,11,.1);color:#fbbf24;border:1px solid rgba(245,158,11,.2)}
.peptide-card__level--advanced{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2)}
.peptide-card__arrow{font-size:16px;color:var(--purple-lt);transition:transform var(--t)}
.peptide-card:hover .peptide-card__arrow{transform:translateX(4px)}
[data-theme="light"] .peptide-card__arrow{color:var(--purple)}

/* Newsletter section — homepage version */
.newsletter{background:linear-gradient(135deg,var(--bg-2) 0%,rgba(124,58,237,.06) 100%);border:1px solid var(--border);border-radius:var(--r-xl);padding:64px 56px;position:relative;overflow:hidden}
.newsletter__stars{position:absolute;inset:0;pointer-events:none;opacity:.3}
.newsletter__content{position:relative;z-index:1;max-width:540px;margin:0 auto;text-align:center}
.newsletter__eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-lt);display:block;margin-bottom:14px}
[data-theme="light"] .newsletter__eyebrow{color:var(--purple)}
.newsletter__title{font-size:clamp(22px,3.5vw,34px);font-weight:900;letter-spacing:-.04em;color:var(--text-1);margin-bottom:12px;line-height:1.15}
.newsletter__btn{height:52px;padding:0 28px;border-radius:100px;background:var(--purple);color:#fff;font-size:15px;font-weight:700;font-family:'Lato',sans-serif;border:none;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background var(--t),box-shadow var(--t)}
.newsletter__btn:hover{background:var(--purple-dk);box-shadow:0 6px 20px var(--purple-glow)}
.newsletter__section{background:var(--bg-2)}
@media(max-width:640px){
  .newsletter{padding:40px 28px}
  .newsletter__field-wrap{flex-direction:column}
  .newsletter__btn{width:100%;justify-content:center}
}

/* Calc feature widget — homepage */
.calc-preview{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;max-width:400px;width:100%}
.calc-preview__title{font-size:14px;font-weight:900;color:var(--text-1);margin-bottom:20px;display:flex;align-items:center;gap:8px}
.calc-preview__row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;margin-bottom:14px}
.calc-preview__label{font-size:12px;font-weight:700;color:var(--text-2)}
.calc-preview__input-wrap{display:flex;align-items:stretch;border-radius:8px;overflow:hidden;border:1.5px solid var(--border)}
.calc-preview__input-wrap:focus-within{border-color:var(--purple)}
.calc-preview__input{flex:1;padding:9px 10px;background:var(--bg);border:none;color:var(--text-1);font-family:'Lato',sans-serif;font-size:13px;outline:none;min-width:0;width:0}
.calc-preview__unit{padding:0 10px;background:var(--bg);border-left:1px solid var(--border);font-size:11px;font-weight:700;color:var(--text-3);display:flex;align-items:center}
.calc-preview__result{background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(168,85,247,.06));border:1px solid rgba(124,58,237,.2);border-radius:var(--r);padding:14px 18px;margin-top:4px}
.calc-preview__result-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:3px 0;color:var(--text-2)}
.calc-preview__result-row strong{color:var(--purple-lt);font-weight:900}
[data-theme="light"] .calc-preview__result-row strong{color:var(--purple)}

/* Calc feature section copy column */
.calc-feature__copy{display:flex;flex-direction:column;gap:0}
.calc-feature__copy .section__eyebrow{margin-bottom:10px}
.calc-feature__copy .section__title{margin-bottom:14px}
.calc-feature__copy .section__sub{margin-bottom:24px}
.calc-feature__copy .calc-feature__list{margin-bottom:28px}
.calc-feature__copy .btn{align-self:flex-start}

/* ── Section head spacing ──────────────────────────────────────── */
.section__head .section__eyebrow{margin-bottom:10px}
.section__head .section__title{margin:0}
.section__head .section__sub{margin-top:12px}

/* ── Newsletter section wrapper ───────────────────────────────── */
.newsletter-section{background:var(--bg-2)}
.newsletter-section .newsletter{border:1px solid var(--border)}

/* ── Footer responsive additions ─────────────────────────────── */
@media(max-width:480px){
  .footer__top{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════════
   STACKS PAGE
   ════════════════════════════════════════════════════════════════ */
/* ── Stacks grid ─────────────────────────────────────────────────── */
.stacks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}

.stack-card{
  background:var(--bg-2);border:1px solid var(--border);border-radius:16px;
  padding:22px 24px;
  display:flex;flex-direction:column;
  cursor:pointer;text-decoration:none;color:inherit;
  transition:border-color .22s,transform .22s,box-shadow .22s;
}
.stack-card:hover{border-color:var(--purple);transform:translateY(-3px);box-shadow:0 12px 36px rgba(109,40,217,.13)}

/* Thumbnail (optional) */
.stack-card__thumb{width:100%;height:150px;overflow:hidden;flex-shrink:0;border-radius:10px;margin-bottom:16px}
.stack-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.stack-card:hover .stack-card__thumb img{transform:scale(1.04)}

/* Header row — goal text | difficulty badge */
.stack-card__head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;min-height:0}
.stack-card__goal{
  flex:1;
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--purple);line-height:1.4;
}
/* Difficulty pill — never stretches, always a compact badge */
.stack-card__diff{
  flex-shrink:0;display:inline-block;
  font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 10px;border-radius:100px;white-space:nowrap;
}
.stack-card__diff--beginner{background:rgba(34,197,94,.12);color:#16a34a;border:1px solid rgba(34,197,94,.25)}
.stack-card__diff--intermediate{background:rgba(245,158,11,.12);color:#d97706;border:1px solid rgba(245,158,11,.25)}
.stack-card__diff--advanced{background:rgba(239,68,68,.12);color:#dc2626;border:1px solid rgba(239,68,68,.25)}
[data-theme="dark"] .stack-card__diff--beginner{color:#4ade80}
[data-theme="dark"] .stack-card__diff--intermediate{color:#fbbf24}
[data-theme="dark"] .stack-card__diff--advanced{color:#f87171}

.stack-card__name{font-size:17px;font-weight:900;color:var(--text-1);line-height:1.25;letter-spacing:-.02em;margin:0 0 10px}
.stack-card__desc{font-size:13px;color:var(--text-2);line-height:1.65;flex:1;margin:0 0 14px}

/* Stats row with top divider */
.stack-card__info{display:flex;gap:16px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--border);margin-bottom:12px}
.stack-card__info-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-3);font-weight:700}

/* Peptide tags */
.stack-card__peptides{display:flex;gap:6px;flex-wrap:wrap}
.stack-card__pep-tag{background:var(--bg-3);border:1px solid var(--border);border-radius:6px;padding:3px 10px;font-size:11px;font-weight:700;color:var(--text-2)}
.stack-card__pep-more{color:var(--text-3);border-style:dashed}

/* Stack detail page */
.stack-detail-grid{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
@media(max-width:860px){.stack-detail-grid{grid-template-columns:1fr}}

.stack-detail__section-title{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:0 0 12px}
.stack-detail__protocol{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px 36px}
.stack-detail__h2{font-size:20px;font-weight:900;color:var(--text-1);margin:24px 0 12px;letter-spacing:-.02em}
.stack-detail__h2:first-child{margin-top:0}
.stack-detail__h3{font-size:16px;font-weight:700;color:var(--text-1);margin:18px 0 8px}
.stack-detail__p{font-size:15px;color:var(--text-2);line-height:1.7;margin-bottom:14px}
.stack-detail__list{padding-left:18px;margin-bottom:14px}
.stack-detail__list li{font-size:14px;color:var(--text-2);line-height:1.7;margin-bottom:4px}

/* ── Rich HTML content: restore list styles stripped by global reset ──
   Covers: stack protocol, all peptide tab fields, research abstracts,
   and any other .rich-content container rendered via po_sanitize_rich_html()
   ──────────────────────────────────────────────────────────────────────── */
.stack-detail__protocol ul,
.stack-detail__protocol ol,
.rich-content ul,
.rich-content ol,
.research-card__summary ul,
.research-card__summary ol {
  padding-left: 24px;
  margin: 0 0 14px;
}
.stack-detail__protocol ul, .rich-content ul, .research-card__summary ul { list-style: disc; }
.stack-detail__protocol ol, .rich-content ol, .research-card__summary ol { list-style: decimal; }
.stack-detail__protocol li,
.rich-content li,
.research-card__summary li {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.75;
  margin-bottom: 5px;
  display: list-item;
}
/* Nested lists */
.stack-detail__protocol ul ul, .rich-content ul ul, .research-card__summary ul ul { list-style: circle; margin-bottom: 4px; }
.stack-detail__protocol ul ol, .rich-content ul ol, .rich-content ol ol { list-style: lower-alpha; margin-bottom: 4px; }

/* Paragraphs and headings inside rich content */
.stack-detail__protocol p, .rich-content p { margin: 0 0 12px; font-size: 15px; color: var(--text-2); line-height: 1.75; }
.stack-detail__protocol h2, .rich-content h2 { font-size: 18px; font-weight: 800; color: var(--text-1); margin: 20px 0 10px; }
.stack-detail__protocol h3, .rich-content h3 { font-size: 15px; font-weight: 700; color: var(--text-1); margin: 16px 0 8px; }
.stack-detail__protocol strong, .rich-content strong { font-weight: 700; color: var(--text-1); }
.stack-detail__protocol em, .rich-content em { font-style: italic; }
.stack-detail__protocol a, .rich-content a { color: var(--purple-lt); text-decoration: underline; }

.stack-detail__cta-box{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;margin-top:24px;text-align:center;display:flex;flex-direction:column;align-items:center}
.stack-detail__cta-box .btn{display:inline-flex;align-items:center;gap:8px}

/* Stacks archive — calculator CTA banner */
.stacks-calc-cta{display:flex;align-items:center;gap:24px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px 36px;flex-wrap:wrap}
.stacks-calc-cta__icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;flex-shrink:0;background:var(--purple-faint,rgba(124,58,237,.12));border-radius:14px;color:var(--purple-lt)}
.stacks-calc-cta__copy{flex:1;min-width:200px}
.stacks-calc-cta__title{font-size:20px;font-weight:900;color:var(--text-1);letter-spacing:-.02em;margin:0 0 6px}
.stacks-calc-cta__sub{font-size:14px;color:var(--text-2);line-height:1.6;margin:0}
.stacks-calc-cta__btn{white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
@media(max-width:600px){
  .stacks-calc-cta{flex-direction:column;align-items:flex-start;padding:24px}
  .stacks-calc-cta__btn{width:100%;justify-content:center}
}

/* Stack sidebar */
.stack-detail__sidebar{display:flex;flex-direction:column;gap:16px}
.stack-sidebar-box{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px 22px}
.stack-sidebar-box__title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.stack-sidebar-box__list{display:flex;flex-direction:column;gap:0}
.stack-sidebar-pep{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);text-decoration:none;color:var(--text-2);font-size:14px;font-weight:700;transition:background var(--t),color var(--t)}
.stack-sidebar-pep:hover{background:var(--bg-3);color:var(--text-1)}
.stack-sidebar-pep__dot{width:7px;height:7px;border-radius:50%;background:var(--purple);flex-shrink:0}

.stack-sidebar-box__facts{display:flex;flex-direction:column;gap:0}
.stack-fact{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}
.stack-fact:last-child{border-bottom:none}
.stack-fact__label{font-size:12px;color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.stack-fact__val{font-size:13px;color:var(--text-1);font-weight:700}

/* ════════════════════════════════════════════════════════════════
   SEARCH PAGE
   ════════════════════════════════════════════════════════════════ */
.search-page-form{display:flex;align-items:stretch;gap:10px;max-width:720px;margin:0 auto}
.search-page-input-wrap{position:relative;flex:1;display:flex;align-items:center;
  background:var(--bg-2);border:1.5px solid var(--border);border-radius:var(--r);transition:border-color var(--t)}
.search-page-input-wrap:focus-within{border-color:var(--purple)}
.search-page-icon{position:absolute;left:16px;color:var(--text-3);pointer-events:none;flex-shrink:0}
.search-page-input{width:100%;padding:14px 48px;background:transparent;border:none;color:var(--text-1);
  font:400 16px 'Lato',sans-serif;outline:none}
.search-page-input::placeholder{color:var(--text-3)}
.search-page-clear{position:absolute;right:12px;color:var(--text-3);transition:color var(--t);line-height:1}
.search-page-clear:hover{color:var(--text-1)}
.search-page-btn{padding:0 24px;height:52px}

.search-results-header{margin-bottom:24px}
.search-results-count{font-size:15px;color:var(--text-2)}

.search-group{margin-bottom:40px}
.search-group__heading{font-size:16px;font-weight:900;color:var(--text-1);margin-bottom:16px;
  letter-spacing:-.01em;border-bottom:1px solid var(--border);padding-bottom:12px}
.search-results-list{display:flex;flex-direction:column;gap:2px}

.search-result-item{display:block;padding:16px 20px;border-radius:var(--r);border:1px solid var(--border);
  background:var(--bg-2);text-decoration:none;transition:border-color var(--t),transform var(--t)}
.search-result-item:hover{border-color:var(--purple);transform:translateX(3px)}

.search-result-item__head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.search-result-item__type{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--bg-3);color:var(--text-3);padding:2px 8px;border-radius:5px}
.search-result-item__title{font-size:16px;font-weight:700;color:var(--text-1);margin-bottom:5px;line-height:1.3}
.search-result-item__excerpt{font-size:13px;color:var(--text-2);line-height:1.6;margin-bottom:6px}
.search-result-item__url{font-size:12px;color:var(--text-3)}

.search-highlight{background:rgba(124,58,237,.25);color:var(--purple-lt);border-radius:3px;padding:0 2px}
[data-theme="light"] .search-highlight{background:rgba(124,58,237,.12);color:var(--purple)}

.search-empty{text-align:center;padding:60px 20px;max-width:520px;margin:0 auto}
.search-empty__icon{font-size:56px;margin-bottom:16px;line-height:1}
.search-empty__title{font-size:22px;font-weight:900;color:var(--text-1);margin-bottom:10px}
.search-empty__sub{font-size:15px;color:var(--text-2);line-height:1.65}

.search-suggestions{margin-top:24px}
.search-suggestions__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);display:block;margin-bottom:10px}
.search-suggestions__list{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.search-suggestion{background:var(--bg-2);border:1px solid var(--border);border-radius:99px;
  padding:6px 14px;font-size:13px;color:var(--text-2);text-decoration:none;transition:border-color var(--t),color var(--t)}
.search-suggestion:hover{border-color:var(--purple);color:var(--text-1)}

/* ════════════════════════════════════════════════════════════════
   ADMIN TABLE COMPONENTS  (used by admin/peptides, articles, etc.)
   ════════════════════════════════════════════════════════════════ */
/* These are in the admin panel inline styles but re-usable here for front-end admin table styles if ever needed */
.admin-table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{padding:10px 16px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);border-bottom:1px solid var(--border);white-space:nowrap}
.admin-table td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}

/* Status dots */
.status-dot{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700}
.status-dot::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}
.status-dot--green::before{background:var(--green)}
.status-dot--yellow::before{background:var(--yellow,#f59e0b)}
.status-dot--red::before{background:var(--red)}

/* Badges */
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.badge--beginner{background:rgba(34,197,94,.12);color:#22c55e}
.badge--intermediate{background:rgba(245,158,11,.12);color:#f59e0b}
.badge--advanced{background:rgba(239,68,68,.12);color:#ef4444}

/* Alert variants */
.alert--success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:#22c55e;border-radius:var(--r);padding:12px 16px;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.alert--error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#ef4444;border-radius:var(--r);padding:12px 16px;margin-bottom:20px}

/* Product card image */
.product-card__img-wrap{border-radius:12px;overflow:hidden;margin-bottom:14px;aspect-ratio:16/9;background:var(--bg-3);}
.product-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;}
.product-card:hover .product-card__img{transform:scale(1.04);}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE COMPREHENSIVE OVERRIDES
   All sections / components that need explicit light adjustments
═══════════════════════════════════════════════════════════════ */

/* ── Forms & inputs ────────────────────────────────────────── */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="password"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #ffffff;
  color: #1d1d1f;
  border-color: rgba(0,0,0,.18);
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #86868b; }

/* Newsletter input */
[data-theme="light"] .newsletter__input {
  background: #ffffff;
  border-color: rgba(0,0,0,.18);
  color: #1d1d1f;
}

/* Search overlay input */
[data-theme="light"] .search-overlay__input { color: #1d1d1f; }
[data-theme="light"] .search-overlay__box { background: #ffffff; }
[data-theme="light"] .search-overlay__close { background: #f0f0f5; }
[data-theme="light"] .search-overlay__close:hover { background: #e5e5ea; }
[data-theme="light"] .search-overlay__result:hover { background: #f5f5f7; }

/* ── Nav ───────────────────────────────────────────────────── */
[data-theme="light"] .nav__dropdown-menu {
  background: #ffffff;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
[data-theme="light"] .nav__mobile {
  background: #ffffff;
}
[data-theme="light"] .nav__mobile-link { color: #6e6e73; }
[data-theme="light"] .nav__mobile-link:hover { color: #1d1d1f; }
[data-theme="light"] .nav__mobile-cta { background: var(--purple); }
[data-theme="light"] .nav__hamburger span { background: #1d1d1f; }
[data-theme="light"] .nav__search-btn,
[data-theme="light"] .nav__theme-btn { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); }

/* ── Hero ──────────────────────────────────────────────────── */
[data-theme="light"] .hero { background: #f5f5f7; }
[data-theme="light"] .hero__title { color: #1d1d1f; }
[data-theme="light"] .hero__sub { color: #6e6e73; }
[data-theme="light"] .hero__scroll span { color: #86868b; }

/* ── Stats bar ─────────────────────────────────────────────── */
[data-theme="light"] .stats { background: #ffffff; }

/* ── Cards (how it works, peptide, article) ────────────────── */
[data-theme="light"] .howit__card {
  background: #ffffff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
[data-theme="light"] .howit__card:hover {
  background: #f0ecff;
  box-shadow: 0 8px 24px rgba(124,58,237,.12);
}
[data-theme="light"] .peptide-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-theme="light"] .peptide-card:hover {
  background: #f0ecff;
  border-color: rgba(124,58,237,.35);
}
[data-theme="light"] .article-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .article-card:hover { background: #f0ecff; }

/* ── Calc widget ───────────────────────────────────────────── */
[data-theme="light"] .calc-widget {
  background: #ffffff;
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
[data-theme="light"] .calc-widget__pill { border-color: rgba(0,0,0,.15); color: #6e6e73; }

/* ── Section backgrounds ───────────────────────────────────── */
[data-theme="light"] .section--dark { background: #ffffff; }
[data-theme="light"] .section--light { background: #f5f5f7; }
[data-theme="light"] .newsletter { background: #ffffff; }
[data-theme="light"] .stats { background: #ffffff; }

/* ── Footer ────────────────────────────────────────────────── */
[data-theme="light"] .footer { background: #f5f5f7; }
[data-theme="light"] .footer__social-btn { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }

/* ── Page heroes ───────────────────────────────────────────── */
[data-theme="light"] .page-hero { background: #f5f5f7; }
[data-theme="light"] .page-hero__title { color: #1d1d1f; }
[data-theme="light"] .page-hero__sub { color: #6e6e73; }

/* ── FAQ ───────────────────────────────────────────────────── */
[data-theme="light"] .faq-item { background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .faq-item--open { border-color: rgba(124,58,237,.3); }
[data-theme="light"] .faq-item__q { color: #1d1d1f; }
[data-theme="light"] .faq-cta__inner { background: #ffffff; }

/* ── Start Here ────────────────────────────────────────────── */
[data-theme="light"] .start-toc { background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .start-section--alt { background: #ffffff; }
[data-theme="light"] .start-mini-card,
[data-theme="light"] .start-cat-card,
[data-theme="light"] .start-peptide-item { background: #ffffff; border-color: rgba(0,0,0,.1); }

/* ── Products ──────────────────────────────────────────────── */
[data-theme="light"] .products-disclosure { background: rgba(245,158,11,.05); }
[data-theme="light"] .product-card { background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .product-card:hover { background: #f0ecff; }

/* ── Peptide detail ────────────────────────────────────────── */
[data-theme="light"] .peptide-hero { background: #f5f5f7; }
[data-theme="light"] .peptide-tab-btn.active { color: var(--purple); border-bottom-color: var(--purple); }
[data-theme="light"] .peptide-panel-card,
[data-theme="light"] .peptide-sidebar-box { background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .peptide-warn { background: rgba(245,158,11,.06); }

/* ── Stacks ────────────────────────────────────────────────── */
[data-theme="light"] .stack-card { background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .stack-card:hover { background: #f0ecff; }
[data-theme="light"] .stack-hero { background: #f5f5f7; }
[data-theme="light"] .stack-content-box,
[data-theme="light"] .stack-sidebar-box { background: #ffffff; border-color: rgba(0,0,0,.1); }

/* ── Research ──────────────────────────────────────────────── */
[data-theme="light"] .research-card { background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .research-card:hover { border-color: rgba(124,58,237,.3); }

/* ── About / Contact / Pricing ─────────────────────────────── */
[data-theme="light"] .about-team-card,
[data-theme="light"] .contact-info__box,
[data-theme="light"] .pricing-card { background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .pricing-card--featured { background: linear-gradient(135deg,rgba(124,58,237,.06),rgba(168,85,247,.04)); }
[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea,
[data-theme="light"] .contact-form select {
  background: #ffffff;
  border-color: rgba(0,0,0,.15);
  color: #1d1d1f;
}

/* ── Age gate — light mode (frosted glass, not solid white) ─── */
[data-theme="light"] .age-gate {
  background: rgba(215, 210, 235, 0.72);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
}
[data-theme="light"] .age-gate__box {
  background: #ffffff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 8px 40px rgba(60,40,120,.12), 0 2px 0 rgba(0,0,0,.04) inset;
}
[data-theme="light"] .age-gate__logo {
  border-bottom-color: rgba(0,0,0,.07);
}
[data-theme="light"] .age-gate__legal {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
  color: var(--text-2);
}
[data-theme="light"] .age-gate__minor {
  background: rgba(239,68,68,.06);
  border-color: rgba(239,68,68,.18);
}
[data-theme="light"] .age-gate__disclaimer-check {
  background: rgba(124,58,237,.06);
  border-color: rgba(124,58,237,.15);
}
[data-theme="light"] .age-gate__btn--no {
  border-color: rgba(0,0,0,.2) !important;
  color: #374151;
}
[data-theme="light"] .age-gate__btn--no:hover {
  border-color: var(--purple) !important;
  color: #1d1d1f;
  background: rgba(124,58,237,.06);
}
/* exit popup */
[data-theme="light"] .exit-popup__box { background: #ffffff; border-color: rgba(0,0,0,.12); }

/* ── Tabs ──────────────────────────────────────────────────── */
[data-theme="light"] .tab-btn { color: #6e6e73; }
[data-theme="light"] .tab-btn.active { color: var(--purple); border-bottom-color: var(--purple); }

/* ── Filter pills ──────────────────────────────────────────── */
[data-theme="light"] .filter-pill { color: #6e6e73; border-color: rgba(0,0,0,.15); background: transparent; }
[data-theme="light"] .filter-pill:hover { color: var(--purple); border-color: rgba(124,58,237,.4); background: rgba(124,58,237,.06); }
/* Active must come AFTER the base rule to win the specificity tie */
[data-theme="light"] .filter-pill.active { background: var(--purple) !important; border-color: var(--purple) !important; color: #fff !important; }

/* FAQ tab-nav active (same pattern) */
[data-theme="light"] .tab-nav__btn { color: #6e6e73; border-color: rgba(0,0,0,.15); background: transparent; }
[data-theme="light"] .tab-nav__btn:hover { color: var(--purple); border-color: rgba(124,58,237,.4); }
[data-theme="light"] .tab-nav__btn.active { background: var(--purple) !important; border-color: var(--purple) !important; color: #fff !important; }

/* ── Breadcrumb ────────────────────────────────────────────── */
[data-theme="light"] .breadcrumb__link { color: #6e6e73; }
[data-theme="light"] .breadcrumb__sep { color: #86868b; }
[data-theme="light"] .breadcrumb__current { color: #1d1d1f; }

/* ── Tools / Calculator ────────────────────────────────────── */
[data-theme="light"] .calc-page-bg { background: #f5f5f7; }
[data-theme="light"] .calc-card { background: #ffffff; border-color: rgba(0,0,0,.1); box-shadow: 0 4px 24px rgba(0,0,0,.06); }
[data-theme="light"] .calc-input-group input,
[data-theme="light"] .calc-select { background: #ffffff; border-color: rgba(0,0,0,.15); color: #1d1d1f; }
[data-theme="light"] .calc-result-box { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.2); }
[data-theme="light"] .calc-result-val { color: var(--purple); }

/* ── Fact tag (library) ────────────────────────────────────── */
[data-theme="light"] .fact-tag { background: #ebebef; border-color: rgba(0,0,0,.1); color: #6e6e73; }

/* ── Page-level library search ─────────────────────────────── */
[data-theme="light"] .library-page__search-inner { background: #ffffff; border-color: rgba(0,0,0,.15); }
[data-theme="light"] .library-page__search-input { color: #1d1d1f; background: transparent; }

/* ── Section eyebrow already handled via variable — reinforce ─ */
[data-theme="light"] .section__eyebrow { color: var(--purple); }

/* ── Responsive: keep mobile nav readable in light ─────────── */
@media (max-width:768px) {
  [data-theme="light"] .nav__mobile { background: #ffffff; border-color: rgba(0,0,0,.1); }
  [data-theme="light"] .nav__mobile-link { border-color: rgba(0,0,0,.08); }
}

/* ================================================================
   DARK MODE — explicit overrides when data-theme="dark" is set
   (fallback: :root also carries dark vars for browsers that don't
   see data-theme at all)
   ================================================================ */
:root:not([data-theme="light"]),
[data-theme="dark"] {
  --bg:            #0a0a0f;
  --bg-2:          #12121a;
  --bg-3:          #1a1a28;
  --bg-card:       rgba(255,255,255,.04);
  --bg-card-hover: rgba(124,58,237,.08);
  --surface:       #f5f5f7;
  --text-1:        #f0f0f5;
  --text-2:        rgba(240,240,245,.68);
  --text-3:        rgba(240,240,245,.4);
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --nav-bg:        rgba(10,10,15,.78);
  --nav-bg-scroll: rgba(10,10,15,.95);
  --card-shadow:   0 4px 24px rgba(0,0,0,.4);
  --input-bg:      rgba(255,255,255,.07);
  --purple-soft:   rgba(124,58,237,.08);
  --purple-mid:    rgba(124,58,237,.18);
  --purple-glow:   rgba(124,58,237,.22);
}

/* ── Feature-image thumbnails on archive cards ─────────────── */

/* Peptide card thumbnail */
.peptide-card__thumb {
  margin: -22px -22px 4px -22px;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  aspect-ratio: 16/9;
  background: var(--bg-3);
}
.peptide-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.peptide-card--has-thumb:hover .peptide-card__thumb img {
  transform: scale(1.04);
}

/* Article card thumbnail */
.article-card__thumb-wrap {
  display: block;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--bg-3);
  border-radius: 0;
}
.article-card--has-thumb .article-card__thumb-wrap {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
/* Image thumbnail inside the thumb-wrap */
.article-card__thumb-wrap img.article-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16/9;
  transition: transform .35s ease;
  /* Reset old placeholder styles */
  background: none;
  font-size: 0;
  flex: none;
  justify-content: unset;
  align-items: unset;
}
.article-card--has-thumb:hover .article-card__thumb {
  transform: scale(1.04);
}

/* Featured article full-width thumbnail */
.article-featured__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  transition: transform .4s ease;
}
.article-featured:hover .article-featured__thumb {
  transform: scale(1.04);
}
.article-featured__img-wrap {
  position: relative;
  overflow: hidden;
}

/* Dark-mode colour overrides that mirror the light-mode ones above */
[data-theme="dark"] .t-eyebrow--purple { color: var(--purple-lt); }
[data-theme="dark"] .c-purple { color: var(--purple-lt); }
[data-theme="dark"] .btn--ghost { color: var(--purple-lt); }
[data-theme="dark"] .howit__card-link { color: var(--purple-lt); }
[data-theme="dark"] .nav__logo-name span { color: var(--purple-lt); }
[data-theme="dark"] .btn--outline-light { border-color: rgba(255,255,255,.28); color: #fff; }
[data-theme="dark"] .btn--outline-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
[data-theme="dark"] .hero__stars { display: block; }
[data-theme="dark"] .search-overlay { background: rgba(10,10,15,.92); }
[data-theme="dark"] .pricing-faq-link a { color: var(--purple-lt); }

/* Dark-mode responsive mobile nav */
@media (max-width:768px) {
  [data-theme="dark"] .nav__mobile { background: #0a0a0f; border-color: rgba(255,255,255,.08); }
  [data-theme="dark"] .nav__mobile-link { border-color: rgba(255,255,255,.06); }
}

/* ================================================================
   COMPREHENSIVE RESPONSIVE + THEME FIX PATCH
   Covers: spacing, light-mode conflicts, component-level responsive
   ================================================================ */

/* ── 1. Calculator page hero — fix nav-height offset ───────────── */
.calc-page-hero {
  padding-top: calc(var(--nav-h) + 44px) !important;
}
@media (max-width:768px) {
  .calc-page-hero { padding-top: calc(var(--nav-h) + 28px) !important; }
}
@media (max-width:480px) {
  .calc-page-hero { padding-top: calc(var(--nav-h) + 16px) !important; padding-bottom: 32px !important; }
}

/* ── 2. Section + container — tighten on very small screens ────── */
@media (max-width:400px) {
  .section { padding-left: 0; padding-right: 0; }
  .container { padding-left: 14px; padding-right: 14px; }
}

/* ── 3. Light mode — Contact info items (wrong class was used) ─── */
[data-theme="light"] .contact-info__item {
  background: #ffffff;
  border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .contact-form {
  background: #ffffff;
  border-color: rgba(0,0,0,.1);
}

/* ── 4. Light mode — Product card badge contrast ────────────────── */
[data-theme="light"] .product-card__badge--primary  { color: var(--purple); background: rgba(124,58,237,.1); }
[data-theme="light"] .product-card__badge--secondary{ color: #1d4ed8; background: rgba(59,130,246,.1);   }
[data-theme="light"] .product-card__badge--warning  { color: #dc2626; background: rgba(239,68,68,.09);   }
[data-theme="light"] .product-card__badge--free     { color: #16a34a; background: rgba(34,197,94,.09);   }
[data-theme="light"] .product-card__why   { background: #f5f5f7; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .product-card__cat  { color: #86868b; }
[data-theme="light"] .product-card__coming { color: #86868b; }
[data-theme="light"] .products-suggest   { background: #ffffff; border-color: rgba(0,0,0,.08); }

/* ── 5. Light mode — Research card label ────────────────────────── */
[data-theme="light"] .research-card__peptide { color: var(--purple); }

/* ── 6. Light mode — Stack card pep-tags ───────────────────────── */
[data-theme="light"] .stack-card__pep-tag  { background: #ebebef; border-color: rgba(0,0,0,.12); color: #1d1d1f; }
[data-theme="light"] .stack-detail__protocol,
[data-theme="light"] .stack-detail__cta-box{ background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .stack-fact__val      { color: #1d1d1f; }

/* ── 7. Light mode — Search result items ───────────────────────── */
[data-theme="light"] .search-result-item   { background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .search-result-item:hover{ border-color: rgba(124,58,237,.35); background: #f5f5f7; }
[data-theme="light"] .search-result-item__type{ background: #ebebef; color: #6e6e73; }
[data-theme="light"] .search-suggestion    { background: #ffffff; border-color: rgba(0,0,0,.1); color: #6e6e73; }
[data-theme="light"] .search-suggestion:hover { border-color: rgba(124,58,237,.4); color: #1d1d1f; }

/* ── 8. Light mode — Trust bar ──────────────────────────────────── */
[data-theme="light"] .trust-bar { background: #ffffff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .trust-bar__track span { color: #6e6e73; }

/* ── 9. Light mode — why grid cards ─────────────────────────────── */
[data-theme="light"] .why__card { background: #ffffff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .why__title { color: #1d1d1f; }
[data-theme="light"] .why__desc  { color: #6e6e73; }

/* ── 10. Light mode — Library count + empty states ─────────────── */
[data-theme="light"] .library-page__count { color: #6e6e73; }
[data-theme="light"] .library-page__empty-text { color: #6e6e73; }
[data-theme="light"] .filter-bar--secondary .filter-pill { color: #6e6e73; }

/* ── 11. Light mode — Article page ──────────────────────────────── */
[data-theme="light"] .article-featured__link { background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .article-featured__title { color: #1d1d1f; }
[data-theme="light"] .article-card__title     { color: #1d1d1f; }

/* ── 12. Light mode — Calc preview widget ───────────────────────── */
[data-theme="light"] .calc-preview { background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .calc-preview__input-wrap{ border-color: rgba(0,0,0,.15); }
[data-theme="light"] .calc-preview__input     { background: #f5f5f7; color: #1d1d1f; }
[data-theme="light"] .calc-preview__unit      { background: #f5f5f7; border-color: rgba(0,0,0,.12); color: #6e6e73; }
[data-theme="light"] .calc-preview__result    { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.18); }

/* ── 13. Light mode — Hero stats border ─────────────────────────── */
[data-theme="light"] .hero__stats { border-color: rgba(0,0,0,.1); background: #ffffff; }
[data-theme="light"] .hero__stat-div { background: rgba(0,0,0,.08); }

/* ── 14. Light mode — Page hero gradient ────────────────────────── */
[data-theme="light"] .page-hero--gradient::before {
  background: radial-gradient(ellipse, rgba(124,58,237,.07) 0%, transparent 70%);
}

/* ── 15. Light mode — Nav logo + dropdown improvements ─────────── */
[data-theme="light"] .nav__logo-name { color: #1d1d1f; }
[data-theme="light"] .nav__dropdown-item { color: #1d1d1f; }
[data-theme="light"] .nav__dropdown-item:hover { background: rgba(124,58,237,.06); color: var(--purple); }
[data-theme="light"] .nav__dropdown-label { color: #86868b; }
[data-theme="light"] .nav__link { color: #6e6e73; }
[data-theme="light"] .nav__link:hover,
[data-theme="light"] .nav__link.active { color: #1d1d1f; }
[data-theme="light"] .nav__dropdown-btn { color: #6e6e73; }
[data-theme="light"] .nav__dropdown-btn:hover { color: #1d1d1f; }
[data-theme="light"] .nav__dropdown-btn--user { background: #ffffff; border-color: rgba(0,0,0,.12); color: #1d1d1f; }
[data-theme="light"] .nav__dropdown-btn--user:hover { background: #f5f5f7; }
[data-theme="light"] .nav__dropdown-item--danger { color: #dc2626; }
[data-theme="light"] .nav__dropdown-item--danger:hover { background: rgba(220,38,38,.06); color: #dc2626; }

/* ── 16. Light mode — Booking page additions ────────────────────── */
[data-theme="light"] .booking-section { background: #f5f5f7; }
[data-theme="light"] .booking-block   { background: #ffffff !important; border-color: rgba(0,0,0,.1) !important; }
[data-theme="light"] .session-card    { background: #fafafa !important; border-color: rgba(0,0,0,.1) !important; }
[data-theme="light"] .session-card--active { background: rgba(124,58,237,.08) !important; border-color: var(--purple) !important; }
[data-theme="light"] .session-card__name  { color: #1d1d1f; }
[data-theme="light"] .session-card__desc  { color: #6e6e73; }
[data-theme="light"] .cal-nav             { background: #f5f5f7; border-color: rgba(0,0,0,.12); }
[data-theme="light"] .cal-day             { color: #1d1d1f; }
[data-theme="light"] .cal-day--disabled   { color: #86868b; }
[data-theme="light"] .cal-day--other      { color: #c7c7cc; }
[data-theme="light"] .cal-day--selected   { color: #fff !important; }
[data-theme="light"] .time-btn            { background: #fafafa !important; border-color: rgba(0,0,0,.1) !important; color: #1d1d1f !important; }
[data-theme="light"] .time-btn.active     { border-color: var(--purple) !important; color: var(--purple) !important; background: rgba(124,58,237,.08) !important; }
[data-theme="light"] .tz-select           { background: #f5f5f7; color: #1d1d1f; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .order-summary       { background: #f5f5f7 !important; border-color: rgba(0,0,0,.1) !important; }
[data-theme="light"] .order-row           { border-color: rgba(0,0,0,.08); }
[data-theme="light"] .order-row__label    { color: #6e6e73; }
[data-theme="light"] .order-row__val      { color: #1d1d1f; }
[data-theme="light"] .booking-success     { background: #ffffff !important; }
[data-theme="light"] .booking-included__list li { color: #6e6e73; }
[data-theme="light"] .bf-input,
[data-theme="light"] .bf-select,
[data-theme="light"] .bf-textarea {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.15) !important;
  color: #1d1d1f !important;
}
[data-theme="light"] .bf-label   { color: #6e6e73; }
[data-theme="light"] .bf-optional { color: #86868b; }
[data-theme="light"] .booking-submit__note { color: #86868b; }
[data-theme="light"] .booking-alert {
  background: rgba(239,68,68,.06);
  border-color: rgba(239,68,68,.2);
  color: #dc2626;
}

/* ── 17. Responsive — Article featured collapse on small screens ── */
@media (max-width:600px) {
  .article-featured__link { grid-template-columns: 1fr !important; }
  .article-featured__img-wrap { min-height: 180px; }
  .article-featured__body { padding: 20px 18px; }
  .article-featured__title { font-size: 18px; }
}

/* ── 18. Responsive — About page hero image ─────────────────────── */
.about-hero-img { height: clamp(160px, 28vw, 280px); }

/* ── 19. Responsive — Products page ────────────────────────────── */
@media (max-width:480px) {
  .products-grid { grid-template-columns: 1fr; }
  .products-suggest { padding: 28px 16px; }
  .products-disclosure { padding: 12px 14px; font-size: 12px; }
}

/* ── 20. Responsive — FAQ page mobile ──────────────────────────── */
@media (max-width:480px) {
  .faq-item__q { font-size: 14px; padding: 14px 16px; }
  .faq-cta__inner { padding: 28px 16px; }
}

/* ── 21. Responsive — Search page mobile ───────────────────────── */
@media (max-width:600px) {
  .search-page-form { flex-direction: column; }
  .search-page-btn  { width: 100%; justify-content: center; height: 48px; }
  .search-page-input { padding: 13px 44px; }
}

/* ── 22. Responsive — Stacks page mobile ───────────────────────── */
@media (max-width:480px) {
  .stack-card       { padding: 20px 18px; }
  .stack-card__name { font-size: 16px; }
}

/* ── 23. Responsive — Pricing grid mobile ──────────────────────── */
@media (max-width:480px) {
  .pricing-card { padding: 28px 20px; }
  .pricing-card__price { font-size: 44px; }
  .pricing-card__divider { margin: 0 -20px 22px; }
}

/* ── 24. Responsive — Contact page mobile ──────────────────────── */
@media (max-width:480px) {
  .contact-form { padding: 24px 18px; }
  .contact-info__item { padding: 16px; }
}

/* ── 25. Responsive — Booking page mobile ──────────────────────── */
@media (max-width:480px) {
  .booking-section { padding: 32px 0 60px; }
  .session-card__price { font-size: 16px; }
  .session-card__name  { font-size: 13px; }
  .order-total { font-size: 18px; }
}

/* ── 26. Responsive — Peptide detail mobile ─────────────────────── */
@media (max-width:600px) {
  .peptide-detail-grid,
  .stack-detail-grid { grid-template-columns: 1fr !important; }
}

/* ── 27. Responsive — General section on ≤360px ────────────────── */
@media (max-width:360px) {
  .section { padding-top: 56px; padding-bottom: 56px; }
  .page-hero { padding-bottom: 22px; }
  .filter-pill { padding: 5px 12px; font-size: 11px; }
  .tab-nav__btn { padding: 7px 12px; font-size: 11px; }
  .btn--lg { height: 44px; padding: 0 18px; font-size: 14px; }
}

/* ── 28. Dark mode — ensure research card peptide tag reads well ── */
[data-theme="dark"] .research-card__peptide { color: var(--purple-lt); }

/* ── 29. Dark mode — product card badge adjustments ────────────── */
[data-theme="dark"] .product-card__badge--primary  { color: var(--purple-lt); }
[data-theme="dark"] .product-card__badge--secondary{ color: #60a5fa; }
[data-theme="dark"] .product-card__badge--warning  { color: #f87171; }
[data-theme="dark"] .product-card__badge--free     { color: #4ade80; }

/* ── 30. Global — smooth scrollbar on mobile ─────────────────────── */
@media (max-width:768px) {
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar--secondary { flex-wrap: nowrap; overflow-x: auto; }
}

/* ── 31. Global — image overflow safety ──────────────────────────── */
img { max-width: 100%; height: auto; }
.peptide-card__thumb img,
.article-card__thumb { max-width: none; } /* these are constrained by their wrapper */

/* ── 32. Global — nav link states ────────────────────────────────── */
.nav__link { font-size: 14px; font-weight: 700; color: var(--text-2); transition: color var(--t); }
.nav__link:hover { color: var(--text-1); }
.nav__link.active { color: var(--text-1); }

/* ── 33. Responsive — article page grid on small tablets ─────────── */
@media (max-width:520px) {
  .articles-grid { grid-template-columns: 1fr !important; }
  .article-card--featured { grid-column: auto !important; }
}

/* ── 34. Responsive — peptide grid on ≤480px ────────────────────── */
@media (max-width:480px) {
  .peptide-grid { grid-template-columns: 1fr !important; }
  .peptide-grid--full { grid-template-columns: 1fr !important; }
}

/* ── 35. Footer extra responsive tightening ─────────────────────── */
@media (max-width:360px) {
  .footer__top { grid-template-columns: 1fr; gap: 24px; }
  .footer__bottom { font-size: 11px; }
}

/* ── 36. Nav responsive — center-aligned, no overflow ─────────────── */
/* Desktop: ensure nav inner is properly centered inside the fixed bar */
.nav > .container { height: 100%; }

/* Medium screens (769-960px): hamburger mode but theme toggle stays visible */
@media (min-width:769px) and (max-width:960px) {
  .nav__links, .nav__dropdown, .nav__cta { display: none !important; }
  .nav__hamburger { display: flex !important; }
  .nav__right .nav__theme-btn { display: flex !important; }
  .nav__search-btn { display: flex !important; }
}

/* Desktop (>960px): full nav, no hamburger */
@media (min-width:961px) {
  .nav__hamburger { display: none !important; }
  .nav__cta { max-width: 160px; white-space: nowrap; }
  /* Slightly tighter padding on 961-1080 to prevent crowding */
  .nav__links { gap: 0; }
  .nav__link, .nav__dropdown-btn { padding: 6px 9px; }
}

/* Large desktop — restore comfortable spacing */
@media (min-width:1080px) {
  .nav__links { gap: 2px; }
  .nav__link, .nav__dropdown-btn { padding: 6px 12px; }
}


/* ═══════════════════════════════════════════════════════════
   HOMEPAGE REDESIGN — Hero Pro + Research Grid + Empty State
═══════════════════════════════════════════════════════════ */

/* ── Hero Pro: split layout ──────────────────────────────── */
.hero--pro {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 56px) 24px 80px;
  text-align: left; position: relative; overflow: hidden;
}
.hero__pro-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}
.hero--pro .hero__h1         { text-align: left; }
.hero--pro .hero__sub        { text-align: left; margin: 0 0 36px; }
.hero--pro .hero__actions    { justify-content: flex-start; }
.hero--pro .hero__stats      { justify-content: flex-start; flex-wrap: wrap; gap: 20px 28px; margin-top: 44px; }
.hero--pro .hero__badge      { justify-content: flex-start; }

/* Ambient glow orbs */
.hero__orb {
  position: absolute; pointer-events: none; border-radius: 50%;
  filter: blur(80px); opacity: 0.18;
}
.hero__orb--1 {
  width: 600px; height: 600px;
  top: -120px; right: -60px;
  background: radial-gradient(ellipse, rgba(124,58,237,0.7), transparent 70%);
}
.hero__orb--2 {
  width: 400px; height: 400px;
  bottom: 40px; left: 5%;
  background: radial-gradient(ellipse, rgba(59,130,246,0.5), transparent 70%);
}
[data-theme="light"] .hero__orb { opacity: 0.08; }

/* ── Hero feature card ───────────────────────────────────── */
.hero__pro-visual { position: relative; z-index: 1; }
.hero-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 28px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.45),
              inset 0 1px 0 rgba(255,255,255,0.08),
              0 0 0 1px rgba(124,58,237,0.1);
  transition: transform 0.35s, box-shadow 0.35s;
}
.hero-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 100px rgba(0,0,0,0.55),
              0 0 0 1px rgba(124,58,237,0.35),
              inset 0 1px 0 rgba(255,255,255,0.1);
}
.hero-card__eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--purple-lt); margin-bottom: 16px;
}
.hero-card__live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.8); flex-shrink: 0;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 6px rgba(34,197,94,0.8); }
  50%      { box-shadow: 0 0 14px rgba(34,197,94,1.0); }
}
.hero-card__name {
  font-size: 26px; font-weight: 900; letter-spacing: -0.03em;
  color: var(--text-1); line-height: 1.1; margin-bottom: 4px;
}
.hero-card__aka  { font-size: 12px; color: var(--text-3); margin-bottom: 14px; }
.hero-card__desc { font-size: 13px; color: var(--text-2); line-height: 1.65; margin-bottom: 16px; }
.hero-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.hero-card__tags span {
  padding: 3px 10px; border-radius: 100px;
  font-size: 11px; font-weight: 700;
  background: rgba(124,58,237,0.15); color: var(--purple-lt);
  border: 1px solid rgba(124,58,237,0.25);
}
.hero-card__metric {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 20px;
}
.hero-card__metric-label {
  font-size: 10px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.06em; display: block; margin-bottom: 3px;
}
.hero-card__metric-val { font-size: 13px; font-weight: 700; color: var(--text-1); }
.hero-card__cta {
  display: block; text-align: center;
  padding: 10px 16px; border-radius: 10px;
  background: linear-gradient(135deg, var(--purple-dk), var(--purple));
  color: #fff; font-size: 13px; font-weight: 700;
  transition: opacity 0.2s, transform 0.2s;
}
.hero-card__cta:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── Floating satellite cards ────────────────────────────── */
.hero-float {
  position: absolute;
  background: rgba(13,13,21,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 14px;
  backdrop-filter: blur(16px);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 2; pointer-events: none;
}
.hero-float__name { font-size: 12px; font-weight: 900; color: var(--text-1); }
.hero-float__cat  { font-size: 10px; color: var(--text-3); }
.hero-float--1 { top: -28px; right: -24px; animation: floatCard 4s ease-in-out infinite; }
.hero-float--2 { bottom: 56px; right: -30px; animation: floatCard 5s ease-in-out infinite 1.1s; }
.hero-float--3 { bottom: -22px; left: 16px; animation: floatCard 4.6s ease-in-out infinite 0.6s; }
@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}

/* Hero pro responsive */
@media (max-width: 960px) {
  .hero--pro { text-align: center; padding: calc(var(--nav-h) + 40px) 20px 60px; }
  .hero__pro-grid { grid-template-columns: 1fr; gap: 0; max-width: 560px; }
  .hero--pro .hero__h1, .hero--pro .hero__sub { text-align: center; }
  .hero--pro .hero__actions { justify-content: center; }
  .hero--pro .hero__stats   { justify-content: center; }
  .hero--pro .hero__badge   { justify-content: center; }
  .hero__pro-visual { display: none; }
}

/* Light mode hero card */
[data-theme="light"] .hero-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(124,58,237,0.08);
}
[data-theme="light"] .hero-card__name    { color: #1d1d1f; }
[data-theme="light"] .hero-card__metric-val { color: #1d1d1f; }
[data-theme="light"] .hero-card__metric  { border-top-color: rgba(0,0,0,0.08); }
[data-theme="light"] .hero-float         { background: #fff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .hero-float__name   { color: #1d1d1f; }
[data-theme="light"] .hero-float__cat    { color: #86868b; }

/* ── Research Grid (study index cards) ───────────────────── */
.research-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.research-card {
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  padding: 24px;
  gap: 10px;
  text-decoration: none; color: inherit;
  transition: border-color 0.22s, transform 0.22s;
}
/* Homepage article cards have a thumb — reset padding so the thumb bleeds to edges */
.research-card:has(.research-card__thumb) {
  padding: 0;
  gap: 0;
}
.research-card:hover {
  border-color: rgba(124,58,237,0.4);
  transform: translateY(-2px);
}
.research-card__head {
  display: flex; align-items: center; justify-content: space-between;
}
.research-card__peptide {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--purple-lt); background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.18); border-radius: 100px; padding: 3px 10px;
}
.research-card__year {
  font-size: 12px; font-weight: 700; color: var(--text-2);
}
.research-card__title {
  font-size: 15px; font-weight: 700; color: var(--text-1); line-height: 1.4;
}
.research-card__journal {
  font-size: 13px; color: var(--text-2);
}
.research-card__authors {
  font-size: 12px; color: var(--text-3); font-style: normal;
}
.research-card__summary {
  font-size: 13px; line-height: 1.7; color: var(--text-2); flex: 1;
}
.research-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.research-card__doi {
  font-size: 11px; color: var(--text-3); font-family: monospace;
}

/* ── Homepage Research Desk article cards (thumb + body layout) ── */
.research-card__thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  aspect-ratio: 16/9;
  background: var(--bg-2);
  flex-shrink: 0;
}
.research-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.research-card:hover .research-card__thumb img {
  transform: scale(1.04);
}
.research-card__thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
}
.research-card__thumb .research-card__cat {
  position: absolute; top: 12px; left: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: var(--purple); color: #fff;
  padding: 3px 10px; border-radius: 50px;
  pointer-events: none;
}
.research-card__body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 20px 20px; flex: 1;
}
.research-card__excerpt {
  font-size: 13px; line-height: 1.65; color: var(--text-2);
  flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.research-card__arrow {
  font-size: 13px; font-weight: 600; color: var(--purple);
  white-space: nowrap;
}
.research-card__read {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-3);
}

/* Light mode overrides for homepage article cards */
[data-theme="light"] .research-card__thumb { background: #f0f0f3; }
[data-theme="light"] .research-card__excerpt { color: #555; }

/* Research grid responsive */
@media (max-width: 960px) {
  .research-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .research-grid { grid-template-columns: 1fr; }
}

/* Light mode research card */
[data-theme="light"] .research-card { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .research-card:hover { border-color: rgba(124,58,237,0.3); }
[data-theme="light"] .research-card__title { color: #1d1d1f; }
[data-theme="light"] .research-card__peptide { color: var(--purple); }

/* ── Empty state for DB-less sections ────────────────────── */
.hp-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 60px 24px; text-align: center;
  color: var(--text-3); border: 1px dashed var(--border);
  border-radius: 16px; grid-column: 1 / -1;
}
.hp-empty-state svg { opacity: 0.4; }
.hp-empty-state h3 { font-size: 16px; font-weight: 700; color: var(--text-2); }
.hp-empty-state p  { font-size: 13px; line-height: 1.6; max-width: 360px; }

/* ── Section CTA alignment ───────────────────────────────── */
.research-desk .section__cta { text-align: center; margin-top: 40px; }


/* ── 37. Mobile nav cta hover state (light mode) ─────────────────── */
[data-theme="light"] .nav__mobile-cta:hover { background: var(--purple-dk); }
[data-theme="light"] .nav__mobile-cta       { color: #fff; }

/* ── 38. Light mode — stacks index page ─────────────────────────── */
[data-theme="light"] .page-stacks { background: #f5f5f7; }
[data-theme="light"] .stacks-grid .stack-card__info-item { color: #6e6e73; }

/* ── 39. Light mode — about page ────────────────────────────────── */
[data-theme="light"] .about-value { background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .about-team-card { background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .about-hero-img { background: linear-gradient(135deg, rgba(124,58,237,.15) 0%, rgba(168,85,247,.08) 50%, rgba(200,200,210,.3) 100%); }

/* ── 40. Ensure nav stays above all content ──────────────────────── */
.nav { z-index: 1000; }
.search-overlay { z-index: 1100; }
.age-gate, .exit-popup { z-index: 9999; }

/* ══════════════════════════════════════════════════════════════
   41. CTA SECTIONS — FULL RESPONSIVE PASS
   Covers: hero actions, section CTAs, library preview CTA,
   newsletter CTA, FAQ CTA, page-level CTA blocks, start-here,
   stacks detail CTA box, and any inline btn-group patterns.
══════════════════════════════════════════════════════════════ */

/* ── Base CTA row: flex by default, wrap on small screens ───── */
.hero__actions,
.cta-actions,
.page-cta__actions,
.section__cta,
.library-preview__cta,
.faq-cta__actions,
.start-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

/* ── Single-button CTAs stay centered ───────────────────────── */
.section__cta,
.library-preview__cta {
  text-align: center;
}

/* ── 640px: hero actions stack, buttons stay reasonable width ─ */
@media (max-width: 640px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Newsletter CTA form stacks */
  .newsletter__field-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .newsletter__input { width: 100%; }
  .newsletter__btn   { width: 100%; justify-content: center; }

  /* FAQ CTA actions stack */
  .faq-cta__actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  .faq-cta__actions .btn { width: 100%; justify-content: center; text-align: center; }

  /* Section + library CTAs: full-width buttons */
  .section__cta .btn,
  .library-preview__cta .btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Start here page CTA */
  .start-cta__actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .start-cta__actions .btn { width: 100%; justify-content: center; text-align: center; }

  /* Stack detail CTA box */
  .stack-detail__cta-box .btn { width: 100%; justify-content: center; }

  /* About & other page inline hero actions */
  [style*="hero__actions"] .btn { width: 100%; }
}

/* ── 480px: tighten padding, reduce font, collapse remaining rows */
@media (max-width: 480px) {
  .hero__actions { max-width: 100%; padding: 0 8px; }

  /* Hero stat bar: 2-column on mobile */
  .hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .hero__stat-div { display: none; }
  .hero__stat { border-bottom: 1px solid var(--border); }
  .hero__stat:nth-child(odd) { border-right: 1px solid var(--border); }

  /* Peptide detail CTA row */
  .peptide-detail__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .peptide-detail__cta-row .btn { width: 100%; justify-content: center; }

  /* Newsletter on detail/sub-pages */
  .newsletter { padding: 36px 20px; }
  .newsletter__title { font-size: clamp(18px, 5vw, 26px); }
}

/* ── 380px: ultra-small screens ────────────────────────────── */
@media (max-width: 380px) {
  .hero__actions { gap: 10px; }
  .section__cta .btn,
  .library-preview__cta .btn { max-width: 100%; }
  .faq-cta__inner { padding: 24px 14px; }
  .newsletter { padding: 28px 14px; }
  .newsletter__title { font-size: 18px; }
}

/* ════════════════════════════════════════════════════════════
   DARK MODE FIXES — Logo switching + remaining component fixes
   Applied after all other rules so specificity wins cleanly.
   ════════════════════════════════════════════════════════════ */

/* ── Logo theme switching ───────────────────────────────────
   Dark mode (default, no data-theme): show dark logo, hide light
   Light mode (data-theme="light"):    hide dark logo, show light  */
.nav__logo-img--dark  { display: block; }
.nav__logo-img--light { display: none;  }
[data-theme="light"] .nav__logo-img--dark  { display: none;  }
[data-theme="light"] .nav__logo-img--light { display: block; }

/* ── Newsletter privacy text — fix invisible in light mode ── */
[data-theme="light"] .newsletter__privacy {
  color: rgba(0,0,0,.42);
}

/* ── Newsletter input overrides for light mode ──────────────
   Lines 861-872 in this file hardcode dark-theme colors.
   The data-theme="light" override below ensures correct
   appearance when the JS toggle switches to light.           */
[data-theme="light"] .newsletter__input {
  background: #ffffff;
  border-color: rgba(0,0,0,.18);
  color: #1d1d1f;
}
[data-theme="light"] .newsletter__input::placeholder {
  color: rgba(0,0,0,.4);
}
[data-theme="light"] .newsletter__input:focus {
  border-color: var(--purple);
}



/* Age gate light mode overrides are consolidated above the Tabs section */

/* ── Comment form inputs — light mode ──────────────────────── */
[data-theme="light"] .comment-input,
[data-theme="light"] .comment-textarea {
  background: #ffffff;
  border-color: rgba(0,0,0,.15);
  color: #1d1d1f;
}
[data-theme="light"] .comment-input::placeholder,
[data-theme="light"] .comment-textarea::placeholder {
  color: #86868b;
}

/* ── Tools page hero + cards — light mode ───────────────────── */
[data-theme="light"] .tools-hero { background: #f5f5f7; }
[data-theme="light"] .tool-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .tool-card:hover {
  background: #f0ecff;
  border-color: rgba(124,58,237,.35);
}

/* ── Article detail — comment alerts light mode ─────────────── */
[data-theme="light"] .comment-alert--success {
  background: rgba(16,185,129,.07);
  border-color: rgba(16,185,129,.2);
  color: #059669;
}
[data-theme="light"] .comment-alert--error {
  background: rgba(239,68,68,.07);
  border-color: rgba(239,68,68,.2);
  color: #dc2626;
}

/* ── Section --dark in light mode ────────────────────────────── */
[data-theme="light"] .section--dark {
  background: #ffffff;
  color: #1d1d1f;
}

/* ── Maintenance page — light mode ──────────────────────────── */
[data-theme="light"] .maintenance-box {
  background: #ffffff;
  border-color: rgba(0,0,0,.1);
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE DETAIL PAGE
══════════════════════════════════════════════════════════════ */

/* Hero */
.article-hero__cat {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--purple-lt);
  margin-bottom: 10px;
}
.article-hero__meta {
  display: flex; align-items: center; gap: 16px;
  margin-top: 14px; flex-wrap: wrap;
}
.article-hero__bk-wrap {
  margin-left: auto;
  flex-shrink: 0;
}
.article-hero__bk-wrap .po-bookmark-btn {
  padding: 6px 12px;
  font-size: 12px;
}
@media (max-width: 600px) {
  .article-hero__bk-wrap { margin-left: 0; }
}
.article-hero__read {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-2); font-weight: 600;
}
.article-hero__disclaimer {
  font-size: 12px; color: var(--text-3); font-style: italic;
}

/* Layout */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
  padding: 40px 0 80px;
}
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* Article body */
.article-body {
  min-width: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-1);
}

/* Table of Contents */
.article-toc {
  background: rgba(124,58,237,.06);
  border: 1px solid rgba(124,58,237,.18);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 32px;
}
.article-toc__title {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--purple-lt);
  margin: 0 0 10px;
}
.article-toc__list {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.article-toc__link {
  font-size: 14px; color: var(--text-2); text-decoration: none;
  line-height: 1.45; transition: color .15s;
}
.article-toc__link:hover { color: var(--purple-lt); }

/* Sections */
.article-section {
  margin-bottom: 36px;
}
.article-section__heading {
  font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  color: var(--text-1); margin: 0 0 16px; line-height: 1.3;
}
.article-section__p {
  font-size: 15px; color: var(--text-1); line-height: 1.8;
  margin: 0 0 16px;
}
.article-list {
  padding-left: 22px; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.article-list li {
  font-size: 15px; color: var(--text-1); line-height: 1.7;
}

/* DB HTML body (from rich editor) */
.article-html-body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-1);
}
.article-html-body h2 {
  font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  color: var(--text-1); margin: 32px 0 14px; line-height: 1.3;
}
.article-html-body h3 {
  font-size: 18px; font-weight: 700; color: var(--text-1);
  margin: 24px 0 10px; line-height: 1.35;
}
.article-html-body h4 {
  font-size: 15px; font-weight: 700; color: var(--text-1);
  margin: 18px 0 8px;
}
.article-html-body p { margin: 0 0 16px; }
.article-html-body ul,
.article-html-body ol {
  padding-left: 28px; margin: 0 0 16px;
}
.article-html-body ul { list-style: disc; }
.article-html-body ol { list-style: decimal; }
.article-html-body li { line-height: 1.7; display: list-item; }
.article-html-body strong { font-weight: 700; color: var(--text-1); }
.article-html-body em { font-style: italic; }
.article-html-body a  { color: var(--purple-lt); text-decoration: underline; }
.article-html-body blockquote {
  border-left: 3px solid var(--purple);
  margin: 20px 0; padding: 12px 20px;
  background: rgba(124,58,237,.06);
  border-radius: 0 8px 8px 0;
  font-style: italic; color: var(--text-2);
}
.article-html-body pre {
  background: rgba(0,0,0,.35); border-radius: 8px;
  padding: 16px 20px; font-family: monospace;
  font-size: 13px; overflow-x: auto; margin: 0 0 16px;
  color: #a5f3a5;
}
.article-html-body code {
  background: rgba(124,58,237,.12); border-radius: 4px;
  padding: 1px 6px; font-family: monospace; font-size: 13px;
  color: var(--purple-lt);
}
.article-html-body hr {
  border: none; border-top: 1px solid var(--border);
  margin: 28px 0;
}
.article-html-body img {
  max-width: 100%; border-radius: 8px; height: auto;
  display: block; margin: 16px 0;
}
.article-html-body table {
  width: 100%; border-collapse: collapse; margin: 0 0 16px;
}
.article-html-body th,
.article-html-body td {
  padding: 10px 14px; border: 1px solid var(--border);
  font-size: 14px; text-align: left;
}
.article-html-body th {
  background: rgba(255,255,255,.05); font-weight: 700;
}

/* Article sidebar */
.article-sidebar {
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 80px;
}

/* Disclaimer box */
.article-disclaimer {
  background: rgba(251,191,36,.06);
  border: 1px solid rgba(251,191,36,.2);
  border-radius: 10px; padding: 16px 20px;
  margin: 32px 0;
}
.article-disclaimer p {
  font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 0;
}

/* Light mode overrides for article */
[data-theme="light"] .article-html-body { color: #374151; }
[data-theme="light"] .article-html-body h2,
[data-theme="light"] .article-html-body h3,
[data-theme="light"] .article-html-body h4 { color: #1d1d1f !important; }
[data-theme="light"] .article-html-body p,
[data-theme="light"] .article-html-body li { color: #374151; }
[data-theme="light"] .article-html-body blockquote { color: #6b7280; }
[data-theme="light"] .article-html-body code { color: var(--purple); background: rgba(124,58,237,.08); }
[data-theme="light"] .article-html-body pre { background: #f3f4f6; color: #1d1d1f; }
[data-theme="light"] .article-section__p,
[data-theme="light"] .article-section { color: #374151; }
[data-theme="light"] .article-section__heading { color: #1d1d1f; }
[data-theme="light"] .article-toc { background: rgba(124,58,237,.04); border-color: rgba(124,58,237,.15); }
[data-theme="light"] .article-disclaimer { background: rgba(251,191,36,.04); }

/* ── Neutralise inline color styles saved from rich editor in dark mode ──
   Rich editor content often embeds inline color/background-color values
   (e.g. color:#fff) that look correct in dark mode but are invisible in
   light mode. Force all non-link, non-code children to inherit the
   correct themed color so inline overrides cannot override the theme. */
[data-theme="light"] .article-html-body :not(a):not(code):not(pre) {
  color: inherit !important;
  background-color: transparent !important;
}
/* Re-apply heading and special colors after the blanket inherit above */
[data-theme="light"] .article-html-body h2,
[data-theme="light"] .article-html-body h3,
[data-theme="light"] .article-html-body h4 { color: #1d1d1f !important; }
[data-theme="light"] .article-html-body strong { color: #1d1d1f !important; }
[data-theme="light"] .article-html-body em    { color: inherit !important; }
[data-theme="light"] .article-html-body blockquote { color: #6b7280 !important; }
/* Restore code/pre backgrounds (exempted above but need bg) */
[data-theme="light"] .article-html-body code {
  color: var(--purple) !important;
  background: rgba(124,58,237,.08) !important;
}
[data-theme="light"] .article-html-body pre {
  background: #f3f4f6 !important;
  color: #1d1d1f !important;
}


/* ── CAPTCHA widget (shared across contact, booking, comments) ──── */
.po-captcha-wrap { margin: 14px 0; }
.po-captcha-wrap .h-captcha,
.po-captcha-wrap .g-recaptcha { display: inline-block; }
.po-captcha-wrap .cf-turnstile { display: inline-block; }
.po-captcha-note {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 6px;
}
.po-captcha-note a { color: var(--purple-lt); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  PROFESSIONAL FILTER, TAB & CTA COMPONENT REFRESH             ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── Filter bar — clean scrollable pill row ──────────────────────── */
.filter-bar {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
  margin-bottom: 24px !important;
  align-items: center;
}
.filter-bar--secondary {
  margin-top: -4px !important;
  margin-bottom: 20px !important;
}
.filter-pill {
  display: inline-flex !important;
  align-items: center;
  height: 30px !important;
  padding: 0 13px !important;
  border-radius: 100px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  background: transparent !important;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s !important;
  white-space: nowrap;
  user-select: none;
}
.filter-pill:hover {
  border-color: var(--purple) !important;
  color: var(--purple) !important;
  background: rgba(124,58,237,.06) !important;
}
.filter-pill.active {
  background: var(--purple) !important;
  border-color: var(--purple) !important;
  color: #fff !important;
}
.filter-pill--sm { height: 28px !important; padding: 0 11px !important; font-size: 12px !important; }

[data-theme="light"] .filter-pill { border-color: rgba(0,0,0,.13) !important; color: #5a5a6a !important; }
[data-theme="light"] .filter-pill:hover { border-color: rgba(124,58,237,.5) !important; color: var(--purple) !important; background: rgba(124,58,237,.05) !important; }
[data-theme="light"] .filter-pill.active { background: var(--purple) !important; border-color: var(--purple) !important; color: #fff !important; }

/* ── FAQ / category Tab Nav — underline style, scrollable ─────────── */
.tab-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  gap: 0 !important;
  margin-bottom: 32px !important;
  border-bottom: 1px solid var(--border) !important;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-nav__btn {
  display: inline-flex !important;
  align-items: center;
  gap: 7px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-2) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s !important;
  margin-bottom: -1px;
}
.tab-nav__btn svg { width: 15px !important; height: 15px !important; opacity: .55; transition: opacity .15s; flex-shrink: 0; }
.tab-nav__btn:hover { color: var(--text-1) !important; background: rgba(124,58,237,.04) !important; }
.tab-nav__btn:hover svg { opacity: .85; }
.tab-nav__btn.active { color: var(--purple-lt) !important; border-bottom-color: var(--purple) !important; background: transparent !important; }
.tab-nav__btn.active svg { opacity: 1; }

[data-theme="light"] .tab-nav__btn { color: #6a6a7a !important; }
[data-theme="light"] .tab-nav__btn:hover { color: #1d1d1f !important; background: rgba(0,0,0,.03) !important; }
[data-theme="light"] .tab-nav__btn.active { color: var(--purple) !important; border-bottom-color: var(--purple) !important; background: transparent !important; }

/* ── CTA icon circular badge — fix font-size-based icon hack ─────── */
.faq-cta__icon,
.research-contribute__icon,
.library-page__empty-icon {
  font-size: inherit !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: rgba(124,58,237,.1) !important;
  border: none !important;
  margin: 0 auto 16px !important;
  flex-shrink: 0;
}
.faq-cta__icon svg,
.research-contribute__icon svg,
.library-page__empty-icon svg {
  width: 24px !important;
  height: 24px !important;
  color: var(--purple-lt);
  flex-shrink: 0;
}
[data-theme="light"] .faq-cta__icon,
[data-theme="light"] .research-contribute__icon,
[data-theme="light"] .library-page__empty-icon { background: rgba(124,58,237,.08) !important; }
[data-theme="light"] .faq-cta__icon svg,
[data-theme="light"] .research-contribute__icon svg,
[data-theme="light"] .library-page__empty-icon svg { color: var(--purple); }

/* ── Stacks calc CTA icon box ────────────────────────────────────── */
.stacks-calc-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 20px;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.15);
}
.stacks-calc-icon-box svg {
  color: var(--purple-lt);
}
[data-theme="light"] .stacks-calc-icon-box { background: rgba(124,58,237,.07); border-color: rgba(124,58,237,.15); }
[data-theme="light"] .stacks-calc-icon-box svg { color: var(--purple); }

/* ── research-contribute CTA block ──────────────────────────────── */
.research-contribute {
  margin-top: 56px;
  text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px 40px;
}
.research-contribute__title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-1);
  margin-bottom: 8px;
  letter-spacing: -.02em;
}
.research-contribute__text {
  font-size: 15px;
  color: var(--text-2);
  margin-bottom: 24px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
[data-theme="light"] .research-contribute {
  background: #ffffff;
  border-color: rgba(0,0,0,.08);
}
@media (max-width: 640px) {
  .research-contribute { padding: 32px 20px; }
}

/* ── Library empty state: center layout ─────────────────────────── */
.library-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 20px;
}

/* ── Mobile filter & tab improvements ───────────────────────────── */
@media (max-width: 640px) {
  .filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    margin-bottom: 16px !important;
    /* edge fade hint */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent) !important;
    mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent) !important;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar--secondary {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    margin-top: 0 !important;
  }
  .tab-nav__btn { padding: 8px 12px !important; font-size: 12px !important; gap: 5px !important; }
  .tab-nav__btn svg { display: none !important; }
  .filter-pill { height: 28px !important; padding: 0 11px !important; font-size: 12px !important; }
  .stacks-calc-icon-box { width: 72px; height: 72px; border-radius: 16px; }
  .stacks-calc-icon-box svg { width: 32px !important; height: 32px !important; }
}

/* ── NAV RESPONSIVE: Tablet intermediate breakpoints ──────────────
   Desktop (>1024px): All items visible with full spacing.
   Tablet wide (1025–1280px): Tighten gaps, smaller fonts.
   Tablet narrow (769–1024px): Hide low-priority links (About, Pricing),
     shrink CTA, reduce padding.
   Mobile (≤768px): Hamburger only (handled above).
──────────────────────────────────────────────────────────────────── */

/* 1280px: tighten nav gaps slightly for smaller desktop windows */
@media (max-width: 1280px) {
  .nav__links { gap: 0; }
  .nav__link, .nav__dropdown-btn { padding: 6px 9px; }
  .nav__right { gap: 6px; }
}

/* 1100px: reduce CTA padding, tighten further */
@media (max-width: 1100px) {
  .nav__link, .nav__dropdown-btn { padding: 6px 7px; font-size: 13px; }
  .nav__cta { padding: 0 14px; font-size: 12px; }
  .nav__right { gap: 5px; }
}

/* 900px: hide About and Pricing from the desktop bar
   (they remain in the mobile drawer) — reduces overflow */
@media (max-width: 900px) and (min-width: 769px) {
  .nav__link--about,
  .nav__link--pricing { display: none; }
  .nav__link, .nav__dropdown-btn { padding: 5px 6px; font-size: 13px; }
  .nav__cta { padding: 0 12px; font-size: 12px; height: 32px; }
}

/* Ensure nav__inner never overflows by allowing flex wrap protection */
@media (max-width: 1100px) and (min-width: 769px) {
  .nav .container { padding: 0 16px; }
  .nav__inner { gap: 10px; }
}
.po-captcha-note a { color: var(--purple-lt); }

/* ================================================================
   MOBILE NAV ACCORDIONS
   ================================================================ */
.nav__mobile-acc {
  border-bottom: 1px solid var(--border);
}
.nav__mobile-acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-2);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: -.01em;
  transition: color var(--t);
}
.nav__mobile-acc-btn:hover { color: var(--text-1); }
.nav__mobile-acc-btn svg {
  flex-shrink: 0;
  transition: transform .25s ease;
  color: var(--text-2);
}
.nav__mobile-acc-btn.open svg { transform: rotate(180deg); }
.nav__mobile-acc-btn.open { color: var(--purple-lt); }

.nav__mobile-acc-body {
  display: none;
  padding-bottom: 10px;
}
.nav__mobile-acc-body.open { display: block; }

.nav__mobile-acc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  border-radius: 8px;
  transition: color var(--t), background var(--t);
}
.nav__mobile-acc-link:hover {
  color: var(--text-1);
  background: rgba(124,58,237,.07);
}
.nav__mobile-acc-link svg { opacity: .7; }
.nav__mobile-acc-link--all {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--purple-lt) !important;
  padding-bottom: 4px;
}

/* Light mode mobile accordion */
[data-theme="light"] .nav__mobile-acc { border-color: rgba(0,0,0,.08); }
[data-theme="light"] .nav__mobile-acc-btn { color: #6e6e73; }
[data-theme="light"] .nav__mobile-acc-btn.open { color: var(--purple); }
[data-theme="light"] .nav__mobile-acc-link { color: #6e6e73; }
[data-theme="light"] .nav__mobile-acc-link:hover { color: #1d1d1f; background: rgba(124,58,237,.05); }

/* ================================================================
   ABOUT PAGE — REDESIGNED COMPONENTS
   ================================================================ */

/* Value icon — circular badge (replaces font-size hack) */
.about-value__icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: rgba(124,58,237,.1) !important;
  border: 1px solid rgba(124,58,237,.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  font-size: inherit !important;
}
.about-value__icon svg { color: var(--purple-lt); width: 22px !important; height: 22px !important; }
[data-theme="light"] .about-value__icon { background: rgba(124,58,237,.07) !important; }

/* Team card avatar */
.about-team-card__avatar {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 14px !important;
  font-size: inherit !important;
}
.about-team-card__avatar svg { color: #fff; width: 24px !important; height: 24px !important; }

/* "What we're not" grid */
.about-notwrap { max-width: 940px; margin: 0 auto; }
.about-notgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.about-not-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  transition: border-color .2s, transform .2s;
}
.about-not-card:hover { border-color: var(--purple); transform: translateY(-2px); }
.about-not-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.about-not-card__icon svg { color: var(--purple-lt); }
.about-not-card__title {
  font-size: 15px;
  font-weight: 900;
  color: var(--text-1);
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.about-not-card__desc {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.7;
}

/* Light mode */
[data-theme="light"] .about-not-card { background: #fff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .about-not-card:hover { border-color: rgba(124,58,237,.3); }
[data-theme="light"] .about-not-card__icon { background: rgba(124,58,237,.07); }

/* Responsive about-notgrid */
@media (max-width: 768px) {
  .about-notgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .about-notgrid { grid-template-columns: 1fr; }
}

/* Hide old about-hero-img reliably */
.about-hero-img { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   HERO — CENTERED MODE (reverted from 2-col pro layout)
   Overrides the pro-grid left-align so everything centers properly.
══════════════════════════════════════════════════════════════════ */
.hero__inner {
  position: relative; z-index: 1; width: 100%; max-width: 860px;
  margin: 0 auto; display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.hero__h1    { text-align: center; }
.hero__sub   { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.hero__badge { display: inline-flex; align-items: center; gap: 8px;
               margin-bottom: 28px; align-self: center; }
.hero__actions { justify-content: center; margin-bottom: 52px; }
.hero__stats {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  overflow: hidden; background: var(--bg-card);
  max-width: 680px; width: 100%;
}
.hero__stat { flex: 1; padding: 18px 20px; text-align: center; min-width: 0; }

/* ── Responsive: stack stats to 2-col on narrow screens ─────── */
@media (max-width: 640px) {
  .hero__stats   { flex-wrap: wrap; border-radius: var(--r); }
  .hero__stat    { flex: 0 0 50%; padding: 14px 12px; border-right: none !important; }
  .hero__stat-div { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   ICON BOXES — unified across why, howit, and CTA cards
══════════════════════════════════════════════════════════════════ */

/* Why section icons — match howit icon style */
.why__icon {
  width: 48px !important; height: 48px !important;
  border-radius: 14px !important;
  background: rgba(124,58,237,.1) !important;
  border: 1px solid rgba(124,58,237,.15);
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  color: var(--purple-lt); margin-bottom: 16px !important;
  font-size: inherit !important;
}
.why__icon svg { width: 22px !important; height: 22px !important;
                 color: var(--purple-lt); flex-shrink: 0; }
[data-theme="light"] .why__icon {
  background: rgba(124,58,237,.07) !important;
  border-color: rgba(124,58,237,.15);
}
[data-theme="light"] .why__icon svg { color: var(--purple); }

/* Ensure btn SVGs are always vertically aligned */
.btn svg { vertical-align: middle; flex-shrink: 0; }

/* Calc feature list icon alignment */
.calc-feature__list li svg { flex-shrink: 0; margin-top: 1px; }

/* Section CTA buttons — ensure icon aligns with text */
.section__cta .btn,
.library-preview__cta .btn {
  display: inline-flex; align-items: center; gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   RICH EDITOR FRONTEND DISPLAY — article-html-body
   Ensures rich editor content renders cleanly on front pages.
══════════════════════════════════════════════════════════════════ */
.article-html-body {
  font-size: 16px; line-height: 1.8; color: var(--text-2);
}
.article-html-body p   { margin: 0 0 18px; }
.article-html-body h2  { font-size: clamp(20px,3vw,26px); font-weight: 800;
                          letter-spacing: -.03em; color: var(--text-1);
                          margin: 36px 0 14px; }
.article-html-body h3  { font-size: 18px; font-weight: 700; color: var(--text-1);
                          margin: 28px 0 10px; }
.article-html-body h4  { font-size: 16px; font-weight: 700; color: var(--text-1);
                          margin: 22px 0 8px; }
.article-html-body ul,
.article-html-body ol  { padding-left: 28px; margin: 0 0 18px; }
.article-html-body ul  { list-style: disc; }
.article-html-body ol  { list-style: decimal; }
.article-html-body li  { margin-bottom: 6px; display: list-item; }
.article-html-body a   { color: var(--purple-lt); text-decoration: underline;
                          text-underline-offset: 3px; }
[data-theme="light"] .article-html-body a { color: var(--purple); }
.article-html-body blockquote {
  border-left: 3px solid var(--purple); padding: 10px 18px;
  margin: 20px 0; background: var(--bg-2); border-radius: 0 8px 8px 0;
  color: var(--text-2); font-style: italic;
}
.article-html-body pre {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px; overflow-x: auto;
  font-size: 13px; line-height: 1.6;
}
.article-html-body code {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-size: 13px;
}
.article-html-body img {
  max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0;
}
.article-html-body hr {
  border: none; border-top: 1px solid var(--border); margin: 32px 0;
}
/* ── Light-mode overrides for icon boxes ───────────────────────── */
[data-theme="light"] .contact-info__icon {
  background: rgba(124,58,237,.07);
  border-color: rgba(124,58,237,.15);
  color: var(--purple);
}
[data-theme="light"] .products-suggest__icon {
  background: rgba(124,58,237,.07);
  border-color: rgba(124,58,237,.15);
  color: var(--purple);
}

/* Strip any Word-specific inline styles that leaked in */
.article-html-body [style*="mso"],
.article-html-body [class*="Mso"],
.article-html-body [class*="MsoNormal"] {
  all: revert;
  color: var(--text-2) !important;
  background: transparent !important;
  font-family: inherit !important;
}

/* ── Dark-mode: neutralise inline colors saved while editing in light mode ──
   (mirrors the light-mode fix above — prevents dark text invisible on dark bg) */
[data-theme="dark"] .article-html-body :not(a):not(code):not(pre) {
  color: inherit !important;
  background-color: transparent !important;
}
[data-theme="dark"] .article-html-body h2,
[data-theme="dark"] .article-html-body h3,
[data-theme="dark"] .article-html-body h4 { color: var(--text-1) !important; }
[data-theme="dark"] .article-html-body strong { color: var(--text-1) !important; }
[data-theme="dark"] .article-html-body blockquote { color: var(--text-2) !important; }

/* ══════════════════════════════════════════════════════════════════
   STACKS PAGE — Responsive breakpoints
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .stacks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .stacks-grid { grid-template-columns: 1fr; gap: 16px; }
  .stack-card  { padding: 18px 20px; }
}

/* Empty state centered in grid */
.stacks-grid .library-page__empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
}

/* ══════════════════════════════════════════════════════════════════
   FAQ PAGE — Responsive layout fix
   ══════════════════════════════════════════════════════════════════ */

/* Reduce section top/bottom padding on FAQ page */
section.faq-page { padding-top: 40px !important; padding-bottom: 56px !important; }

/* Tighter accordion item vertical padding (keep 20px horizontal) */
.faq-item__q { padding-top: 14px !important; padding-bottom: 14px !important; }
.faq-item--open .faq-item__body { padding-bottom: 16px !important; }

/* ── FAQ tab nav — wrapping pill style ──────────────────────────── */
.page-faq .tab-nav {
  display: flex !important;
  flex-wrap: wrap !important;       /* all tabs always visible, no cut-off */
  overflow: visible !important;
  gap: 8px !important;
  border-bottom: none !important;   /* no underline bar — pill style instead */
  margin-bottom: 32px !important;
  padding-bottom: 0 !important;
}

.page-faq .tab-nav__btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;               /* no icon gap — text-only */
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 50px !important;  /* full pill shape */
  background: transparent !important;
  color: var(--text-2) !important;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
  margin-bottom: 0;
  line-height: 1;
}
/* hide any icons that were injected — text only for clarity */
.page-faq .tab-nav__btn svg { display: none !important; }

.page-faq .tab-nav__btn:hover {
  color: var(--purple-lt) !important;
  border-color: var(--purple) !important;
  background: rgba(124,58,237,.06) !important;
}
.page-faq .tab-nav__btn.active {
  color: #fff !important;
  background: var(--purple) !important;
  border-color: var(--purple) !important;
}

/* light-mode overrides */
[data-theme="light"] .page-faq .tab-nav__btn         { color: #5a5a6a !important; border-color: rgba(0,0,0,.15) !important; }
[data-theme="light"] .page-faq .tab-nav__btn:hover    { color: var(--purple) !important; border-color: var(--purple) !important; background: rgba(124,58,237,.06) !important; }
[data-theme="light"] .page-faq .tab-nav__btn.active   { color: #fff !important; background: var(--purple) !important; border-color: var(--purple) !important; }

/* ── Mobile: hide pill row, show native select ───────────────────── */
.faq-mobile-select-wrap { display: none; }   /* hidden on desktop */

@media (max-width: 640px) {
  /* Hide wrapping pill row on mobile */
  .page-faq .tab-nav { display: none !important; }

  /* Show styled select dropdown */
  .faq-mobile-select-wrap {
    display: block;
    margin-bottom: 28px;
  }
  .faq-mobile-select-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 8px;
  }
  .faq-mobile-select {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-1);
    background: var(--bg-2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
    outline: none;
    transition: border-color .18s;
  }
  .faq-mobile-select:focus { border-color: var(--purple); }
  [data-theme="light"] .faq-mobile-select { background-color: #fff; color: #1d1d1f; }
}

/* FAQ answer HTML content */
.faq-item__a--html { font-size: 15px; line-height: 1.8; color: var(--text-2); }
.faq-item__a--html p { margin: 0 0 10px; }
.faq-item__a--html p:last-child { margin-bottom: 0; }
.faq-item__a--html ul,
.faq-item__a--html ol { margin: 0 0 10px; padding-left: 28px; }
.faq-item__a--html ul { list-style: disc; }
.faq-item__a--html ol { list-style: decimal; }
.faq-item__a--html li { margin-bottom: 4px; display: list-item; }

/* ── Rich content (peptide detail pages) ──────────────────────────── */
.rich-content { font-size: 15px; line-height: 1.8; color: var(--text-2); }
.rich-content p { margin: 0 0 14px; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content h2 { font-size: clamp(18px,2.5vw,22px); font-weight: 800; color: var(--text-1); margin: 24px 0 10px; }
.rich-content h3 { font-size: 17px; font-weight: 700; color: var(--text-1); margin: 20px 0 8px; }
.rich-content h4 { font-size: 15px; font-weight: 700; color: var(--text-1); margin: 16px 0 6px; }
.rich-content ul,
.rich-content ol  { padding-left: 28px; margin: 0 0 14px; }
.rich-content ul  { list-style: disc; }
.rich-content ol  { list-style: decimal; }
.rich-content li  { margin-bottom: 5px; display: list-item; line-height: 1.7; }
.rich-content strong { font-weight: 700; color: var(--text-1); }
.rich-content em { font-style: italic; }
.rich-content a  { color: var(--purple-lt); text-decoration: underline; text-underline-offset: 3px; }
.rich-content blockquote { border-left: 3px solid var(--purple); padding: 10px 18px; margin: 16px 0; background: var(--bg-2); border-radius: 0 8px 8px 0; color: var(--text-2); font-style: italic; }
.rich-content code { background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 13px; color: var(--purple-lt); }
.rich-content pre { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; overflow-x: auto; font-size: 13px; line-height: 1.6; }
.rich-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; }
.rich-content hr  { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
[data-theme="light"] .rich-content { color: #374151; }
[data-theme="light"] .rich-content h2,
[data-theme="light"] .rich-content h3,
[data-theme="light"] .rich-content h4 { color: #1d1d1f; }

/* ── Article feature image banner ─────────────────────────────────── */
.article-feat-banner { width: 100%; height: 420px; border-radius: 14px; overflow: hidden; margin-top: -16px; margin-bottom: 32px; }
.article-feat-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media(max-width:767px) {
  .article-feat-banner { height: 220px; border-radius: 10px; margin-bottom: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Load-More Button (po-load-more.js)
   ─────────────────────────────────────────────────────────────────── */
.lm-btn-wrap {
  display: flex;
  justify-content: center;
  padding: 32px 0 8px;
}
.lm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 700;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  letter-spacing: .01em;
}
.lm-btn:hover {
  border-color: var(--purple);
  color: var(--purple);
  background: rgba(var(--purple-rgb, 110,82,255), .05);
}
.lm-btn:disabled {
  opacity: .5;
  cursor: default;
}
.lm-btn__count {
  font-weight: 400;
  font-size: 12px;
  opacity: .7;
}
[data-theme="light"] .lm-btn {
  border-color: #d0d0d8;
  color: #555;
}
[data-theme="light"] .lm-btn:hover {
  border-color: var(--purple);
  color: var(--purple);
  background: rgba(110,82,255,.05);
}