/* ===================================================================
   sermorelin.css — Sermorelin & Peptide Therapy page
   Loads after ../styles.css — all design tokens inherited from there
   =================================================================== */

/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s cubic-bezier(0.22,1,0.36,1),transform .65s cubic-bezier(0.22,1,0.36,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.40s}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ── HERO ── */
.hero{background:var(--forest);position:relative;overflow:hidden;padding:156px 48px 80px}
body.has-announcement .hero{padding-top:200px}
.hero-glow1{position:absolute;width:700px;height:600px;top:-15%;right:-5%;border-radius:50%;background:radial-gradient(circle,rgba(49,184,152,.09) 0%,transparent 65%);pointer-events:none}
.hero-glow2{position:absolute;width:400px;height:400px;bottom:-20%;left:10%;border-radius:50%;background:radial-gradient(circle,rgba(196,145,124,.06) 0%,transparent 65%);pointer-events:none}
.hero-wm{position:absolute;bottom:-80px;right:-20px;font-family:var(--font-serif);font-size:clamp(180px,22vw,360px);font-weight:600;line-height:1;color:rgba(255,255,255,.018);pointer-events:none;user-select:none}
.hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 420px;align-items:center;gap:64px;position:relative;z-index:1}
.hcrumb{display:flex;align-items:center;gap:8px;font-size:var(--type-caption);color:rgba(255,255,255,.55);margin-bottom:22px}
.hcrumb a{color:rgba(255,255,255,.55);text-decoration:none}
.hcrumb a:hover{color:rgba(255,255,255,.55)}
.heyebrow{font-size:var(--type-caption);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-light);margin-bottom:14px;display:flex;align-items:center;gap:10px;opacity:0;animation:fadeUp .6s .05s forwards}
.heyebrow::before{content:'';width:26px;height:1.5px;background:var(--teal-light);opacity:0.6}
.hero h1{font-family:var(--font-serif);font-size:var(--type-display);font-weight:400;line-height:1.06;color:white;margin-bottom:18px;opacity:0;animation:fadeUp .7s .1s forwards;letter-spacing:-0.01em}
.hero h1 em{color:var(--teal-light);font-style:italic}
.hero-sub{font-size:var(--type-body-lg);font-weight:400;color:rgba(255,255,255,.70);line-height:var(--lh-body);max-width:500px;margin-bottom:32px;opacity:0;animation:fadeUp .7s .2s forwards}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px;opacity:0;animation:fadeUp .7s .25s forwards}
.hpill{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:6px 14px;font-size:var(--type-caption);font-weight:400;color:rgba(255,255,255,.75);transition:background .3s,border-color .3s,color .3s,transform .3s;cursor:default}
.hpill:hover{background:rgba(49,184,152,.15);border-color:rgba(49,184,152,.35);color:rgba(255,255,255,.85);transform:translateY(-2px)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fadeUp .7s .3s forwards}

/* ── HERO STACK CARD ── */
.hero-stack{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-lg);padding:28px;opacity:0;animation:fadeUp .7s .35s forwards;transition:border-color .3s,box-shadow .3s}
.hero-stack:hover{border-color:rgba(49,184,152,.2);box-shadow:0 16px 48px rgba(49,184,152,.1)}
.hs-title{font-size:var(--type-caption);font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.55);margin-bottom:16px}
.hs-row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);border-radius:10px;margin:0 -12px;cursor:default;transition:background .3s,transform .3s}
.hs-row:last-child{border-bottom:none}
.hs-row:hover{background:rgba(255,255,255,.06);transform:translateX(4px)}
.hs-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:transform .3s,box-shadow .3s}
.hs-row:hover .hs-dot{transform:scale(1.5)}
.hs-dot-teal{background:var(--teal)}
.hs-row:hover .hs-dot-teal{box-shadow:0 0 10px var(--teal)}
.hs-dot-teal-light{background:var(--teal-light)}
.hs-row:hover .hs-dot-teal-light{box-shadow:0 0 10px var(--teal-light)}
.hs-dot-teal-dim{background:var(--teal-dim)}
.hs-row:hover .hs-dot-teal-dim{box-shadow:0 0 10px var(--teal-dim)}
.hs-dot-rose{background:var(--rose-gold)}
.hs-row:hover .hs-dot-rose{box-shadow:0 0 10px var(--rose-gold)}
.hs-name{font-family:var(--font-serif);font-size:17px;font-weight:500;color:white;flex:1}
.hs-role{font-size:var(--type-caption);font-weight:400;color:rgba(255,255,255,.60)}
.hs-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.07)}
.hs-stat{text-align:center;padding:8px;border-radius:12px;transition:background .3s,transform .3s;cursor:default}
.hs-stat:hover{background:rgba(255,255,255,.05);transform:translateY(-3px)}
.hs-stat-val{font-family:var(--font-serif);font-size:24px;font-weight:400;color:white;line-height:1}
.hs-stat-val em{font-style:italic;color:var(--teal-light)}
.hs-stat-label{font-size:var(--type-caption);font-weight:400;color:rgba(255,255,255,.55);margin-top:3px}

/* ── BUTTONS ── */
/* Primary uses .btn-primary from styles.css. Dark-context outline below. */
.btn-outline-w{display:inline-flex;align-items:center;gap:8px;background:transparent;color:rgba(255,255,255,.85);border:1.5px solid rgba(255,255,255,.28);border-radius:100px;padding:14px 32px;font-size:14px;font-weight:500;letter-spacing:.03em;text-decoration:none;transition:border-color .2s,color .2s,background .2s,transform .15s}
.btn-outline-w:hover{border-color:rgba(255,255,255,.65);color:white;background:rgba(255,255,255,.06);transform:translateY(-2px)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:var(--off-white);color:var(--text-dark);border:1px solid rgba(26,36,32,.1);border-radius:100px;padding:14px 32px;font-size:14px;font-weight:500;letter-spacing:.03em;text-decoration:none;cursor:pointer;transition:all .2s}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ── SHARED SECTION STYLES ── */
.section{padding:96px 0}
.section.alt{background:var(--off-white)}
.section.sand{background:var(--sand-mid)}
.section.dark{background:var(--forest)}
.sl{display:flex;align-items:center;gap:10px;font-size:var(--type-caption);font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--teal);margin-bottom:16px}
.sl .line{width:26px;height:1.5px;background:var(--teal);opacity:0.6;display:inline-block}
.sl.inv{color:var(--teal-light)}.sl.inv .line{background:var(--teal-light);opacity:0.6}
.sh2{font-family:var(--font-serif);font-size:var(--type-h1);font-weight:400;line-height:1.1;margin-bottom:14px;color:var(--text-dark)}
.sh2 em{color:var(--teal);font-style:italic;font-weight:400}
.sh2.inv{color:white}.sh2.inv em{color:var(--teal-light)}
.sp{font-size:var(--type-body);font-weight:400;line-height:var(--lh-body);max-width:480px;margin-bottom:48px;color:var(--text-medium)}
.sp.inv{color:rgba(255,255,255,.70)}

/* ── HOW IT WORKS ── */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.how-steps{display:flex;flex-direction:column;gap:4px}
.how-step{border-radius:var(--radius-sm);overflow:hidden;transition:all .2s;cursor:pointer}
.how-step-header{display:flex;align-items:center;gap:16px;padding:20px 22px;transition:background .2s}
.how-step.active .how-step-header{background:var(--teal-pale)}
.how-step:not(.active) .how-step-header:hover{background:rgba(49,184,152,.06)}
.how-step-num{width:36px;height:36px;border-radius:50%;background:var(--sand-deep);display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:18px;font-weight:500;color:var(--muted);flex-shrink:0;transition:all .2s}
.how-step.active .how-step-num{background:var(--teal);color:white}
.how-step-title{font-family:var(--font-serif);font-size:19px;font-weight:500;color:var(--text-dark)}
.how-step.active .how-step-title{color:var(--teal)}
.how-step-body{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .3s ease}
.how-step.active .how-step-body{max-height:200px;padding:0 22px 20px 74px}
.how-step-body p{font-size:var(--type-small);font-weight:400;color:var(--text-medium);line-height:1.65}
.how-visual{background:var(--forest);border-radius:var(--radius-lg);padding:40px;position:relative;overflow:hidden;min-height:320px;display:flex;flex-direction:column;justify-content:center}
.how-visual-glow{position:absolute;inset:0;background:radial-gradient(circle at 60% 40%,rgba(49,184,152,.12) 0%,transparent 60%);pointer-events:none}
.hv-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:28px;height:100%;justify-content:center;align-items:center;text-align:center}
.hv-text{}
.hv-label{font-size:var(--type-caption);font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.55);margin-bottom:12px}
.hv-main{font-family:var(--font-serif);font-size:clamp(24px,2.5vw,34px);font-weight:400;color:white;line-height:1.2;margin-bottom:16px}
.hv-main em{color:var(--teal-light);font-style:italic}
.hv-detail{font-size:var(--type-small);font-weight:400;color:rgba(255,255,255,.70);line-height:1.65;max-width:380px}

/* ── Shared viz ── */
.hv-viz{position:relative;width:100%;height:220px;display:flex;align-items:center;justify-content:center}

/* ── Step 1: Injection ── */
.hv-syringe{width:80px;height:140px;opacity:.7;animation:hv-bob 3s ease-in-out infinite}
@keyframes hv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hv-particle{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--teal);opacity:0;animation:hv-scatter 2.5s ease-out infinite}
.hv-p1{bottom:30%;left:42%;animation-delay:0s}
.hv-p2{bottom:25%;left:55%;animation-delay:.4s}
.hv-p3{bottom:35%;left:38%;animation-delay:.8s}
.hv-p4{bottom:28%;left:58%;animation-delay:1.2s}
.hv-p5{bottom:32%;left:48%;animation-delay:1.6s}
@keyframes hv-scatter{0%{opacity:0;transform:translate(0,0) scale(1)}20%{opacity:.8}100%{opacity:0;transform:translate(var(--dx,20px),var(--dy,30px)) scale(0)}}
.hv-p1{--dx:-25px;--dy:35px}.hv-p2{--dx:30px;--dy:25px}.hv-p3{--dx:-35px;--dy:20px}.hv-p4{--dx:20px;--dy:40px}.hv-p5{--dx:5px;--dy:35px}
.hv-pulse-ring{position:absolute;bottom:22%;left:50%;width:40px;height:40px;margin-left:-20px;border-radius:50%;border:1.5px solid rgba(49,184,152,.4);animation:hv-ring 2s ease-out infinite}
@keyframes hv-ring{0%{transform:scale(.5);opacity:.8}100%{transform:scale(3);opacity:0}}

/* ── Step 2: Pituitary ── */
.hv-gland{position:relative;z-index:2}
.hv-gland-outer{width:120px;height:120px;border-radius:55% 45% 50% 50%/50% 45% 55% 50%;border:1.5px solid rgba(49,184,152,.22);background:rgba(49,184,152,.06);animation:hv-morph 6s ease-in-out infinite}
@keyframes hv-morph{0%,100%{border-radius:55% 45% 50% 50%/50% 45% 55% 50%}33%{border-radius:45% 55% 45% 55%/55% 50% 50% 45%}66%{border-radius:50% 50% 55% 45%/45% 55% 45% 55%}}
.hv-gland-inner{position:absolute;inset:20px;border-radius:50%;background:rgba(49,184,152,.1);border:1px solid rgba(49,184,152,.15);display:flex;flex-direction:column;align-items:center;justify-content:center}
.hv-gland-inner span{font-size:16px;font-weight:500;color:rgba(255,255,255,.75);letter-spacing:.1em}
.hv-gland-sub{font-size:var(--type-caption)!important;font-weight:400!important;color:rgba(255,255,255,.55)!important;letter-spacing:.06em!important;margin-top:2px}
.hv-signal{position:absolute;top:50%;left:50%;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;border:1px solid rgba(49,184,152,.15);animation:hv-wave 3s ease-out infinite;opacity:0}
.hv-sig1{animation-delay:0s}.hv-sig2{animation-delay:1s}.hv-sig3{animation-delay:2s}
@keyframes hv-wave{0%{transform:scale(.6);opacity:.6}100%{transform:scale(2.2);opacity:0}}
.hv-receptor{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(49,184,152,.35);animation:hv-recPulse 2s ease-in-out infinite}
.hv-rec1{top:15%;left:30%;animation-delay:0s}
.hv-rec2{top:20%;right:25%;animation-delay:.5s}
.hv-rec3{bottom:20%;left:25%;animation-delay:1s}
.hv-rec4{bottom:15%;right:30%;animation-delay:1.5s}
@keyframes hv-recPulse{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.8);opacity:.7;box-shadow:0 0 12px rgba(49,184,152,.4)}}

/* ── Step 3: HGH Release ── */
.hv-mol-center{width:90px;height:90px;border-radius:50%;background:rgba(49,184,152,.1);border:1.5px solid rgba(49,184,152,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:2}
.hv-mol-center span{font-size:18px;font-weight:500;color:rgba(255,255,255,.75);letter-spacing:.08em}
.hv-mol-sub{font-size:var(--type-caption)!important;font-weight:400!important;color:rgba(255,255,255,.55)!important;letter-spacing:.04em!important;margin-top:2px}
.hv-orbit{position:absolute;top:50%;left:50%;border-radius:50%;border:1px dashed rgba(49,184,152,.12)}
.hv-orb1{width:180px;height:180px;margin:-90px 0 0 -90px;animation:hv-spin 12s linear infinite}
.hv-orb2{width:260px;height:260px;margin:-130px 0 0 -130px;animation:hv-spin 20s linear infinite reverse}
@keyframes hv-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hv-orb-node{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(49,184,152,.5)}
.hv-on1{top:-4px;left:50%;margin-left:-4px}
.hv-on2{bottom:-4px;left:50%;margin-left:-4px;background:var(--teal-light);box-shadow:0 0 10px rgba(94,201,174,.5)}
.hv-on3{top:50%;right:-4px;margin-top:-4px;background:var(--rose-gold);box-shadow:0 0 10px rgba(184,137,122,.5)}
.hv-pulse-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(49,184,152,.5);animation:hv-float 4s ease-in-out infinite}
.hv-pd1{top:20%;left:20%;animation-delay:0s}
.hv-pd2{top:15%;right:25%;animation-delay:.7s}
.hv-pd3{bottom:25%;left:15%;animation-delay:1.4s}
.hv-pd4{bottom:20%;right:20%;animation-delay:2.1s}
.hv-pd5{top:40%;left:10%;animation-delay:2.8s}
.hv-pd6{bottom:35%;right:12%;animation-delay:3.5s}
@keyframes hv-float{0%,100%{transform:translateY(0) scale(1);opacity:.3}50%{transform:translateY(-12px) scale(1.4);opacity:.7}}

/* ── WHY LIVEA GRID ── */
/* why livea bg */
.wl-section{position:relative;overflow:hidden}
.wl-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.wl-bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,56,50,.88) 0%,rgba(28,56,50,.75) 100%)}
.wl-strip{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.3);border-radius:var(--radius-lg);overflow:hidden}
.wl-item{padding:32px 28px;position:relative;border-right:1px solid var(--sand-deep);transition:background .35s}
.wl-item:last-child{border-right:none}
.wl-item:hover{background:var(--teal-mist)}
.wl-item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--teal-light));transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.wl-item:hover::after{transform:scaleX(1)}
.wl-icon{display:block;margin-bottom:16px;transition:transform .3s}
.wl-item:hover .wl-icon{transform:scale(1.15)}
.wl-item h3{font-family:var(--font-serif);font-size:1.1rem;font-weight:500;color:var(--text-dark);margin-bottom:8px}
.wl-item p{font-size:var(--type-small);font-weight:400;color:var(--text-medium);line-height:1.72}

/* ── BENEFITS GRID ── */
.benefits-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px;flex-wrap:wrap;gap:24px}
.benefits-hint{font-size:var(--type-small);font-weight:400;color:var(--subtle);max-width:200px;text-align:right;line-height:1.6}
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.benefit-card{background:var(--card-bg);border:1px solid rgba(26,36,32,0.07);border-radius:var(--radius-md);padding:24px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.benefit-card::before{content:'';position:absolute;inset:0;background:var(--teal-pale);opacity:0;transition:opacity .2s}
.benefit-card:hover::before,.benefit-card.active::before{opacity:1}
.benefit-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 40px rgba(26,36,32,.1);border-color:rgba(49,184,152,.2)}
.benefit-card.active{transform:translateY(-6px) scale(1.02);border-color:rgba(49,184,152,.35);box-shadow:0 12px 36px rgba(49,184,152,.14)}
.benefit-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--teal-light));transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.benefit-card:hover::after,.benefit-card.active::after{transform:scaleX(1)}
.bc-inner{position:relative;z-index:1}
.bc-icon{width:52px;height:52px;border-radius:14px;background:var(--teal-pale);display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:transform .3s,background .3s}
.benefit-card:hover .bc-icon,.benefit-card.active .bc-icon{transform:scale(1.08);background:rgba(49,184,152,.18)}
.bc-title{font-family:var(--font-serif);font-size:var(--type-h3);font-weight:500;color:var(--text-dark);margin-bottom:8px;line-height:1.3}
.bc-expand{display:flex;align-items:center;gap:6px;font-size:var(--type-caption);font-weight:500;letter-spacing:.04em;color:var(--teal);opacity:.7;transition:opacity .25s,gap .25s}
.bc-expand svg{transition:transform .3s}
.benefit-card:hover .bc-expand{opacity:1;gap:8px}
.benefit-card.active .bc-expand span{display:none}
.benefit-card.active .bc-expand svg{transform:rotate(180deg)}
.benefit-card.active .bc-expand::before{content:'Close';font-size:var(--type-caption);font-weight:500;letter-spacing:.04em}
.bc-body{font-size:var(--type-small);font-weight:400;color:var(--text-medium);line-height:1.65;max-height:0;overflow:hidden;transition:max-height .35s ease,margin-top .35s ease}
.benefit-card.active .bc-body{max-height:150px;margin-top:12px}

/* ── PEPTIDE STACK ── */
.peptide-tabs{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.p-tab{padding:9px 20px;border-radius:100px;font-size:12.5px;font-weight:400;color:var(--muted);border:1.5px solid var(--sand-deep);background:transparent;cursor:pointer;font-family:var(--font-sans);transition:all .2s;display:flex;align-items:center;gap:8px}
.p-tab:hover{border-color:var(--teal);color:var(--teal)}
.p-tab.active{background:var(--forest);border-color:var(--forest);color:white;font-weight:500}
.p-tab-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.peptide-panel{display:none}
.peptide-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.pp-left{background:var(--forest);padding:44px;position:relative;overflow:hidden}
.pp-glow{position:absolute;inset:0;pointer-events:none}
.pp-inner{position:relative;z-index:1}
.pp-role-badge{display:inline-flex;align-items:center;gap:6px;border-radius:100px;padding:5px 14px;font-size:var(--type-caption);font-weight:600;text-transform:uppercase;letter-spacing:.10em;margin-bottom:20px}
.pp-name{font-family:var(--font-serif);font-size:clamp(32px,4vw,50px);font-weight:400;color:white;line-height:1.08;margin-bottom:6px}
.pp-type{font-size:var(--type-caption);font-weight:400;color:rgba(255,255,255,.75);margin-bottom:22px;letter-spacing:.05em}
.pp-desc{font-size:var(--type-body);font-weight:400;color:rgba(255,255,255,.78);line-height:var(--lh-body);margin-bottom:24px}
.pp-note{font-size:var(--type-caption);font-weight:400;color:rgba(255,255,255,.75);font-style:italic;line-height:1.65;border-top:1px solid rgba(255,255,255,.07);padding-top:16px}
.pp-right{background:var(--sand-mid);padding:44px;display:flex;flex-direction:column;justify-content:center}
.pp-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.pp-stat{background:var(--card-bg);border-radius:var(--radius-sm);padding:18px;border:1px solid rgba(26,36,32,0.07)}
.pp-stat-val{font-family:var(--font-serif);font-size:28px;font-weight:400;color:var(--text-dark);line-height:1}
.pp-stat-val em{font-style:italic;color:var(--teal)}
.pp-how-title{font-size:var(--type-caption);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-medium);margin-bottom:12px}
.pp-mechanism{background:var(--card-bg);border-radius:var(--radius-sm);padding:18px;border:1px solid rgba(26,36,32,0.07)}
.pp-mechanism p{font-size:var(--type-small);font-weight:400;color:var(--text-medium);line-height:1.65}

/* ── SYMPTOM CHECKER ── */
.symptom-section{background:var(--forest);padding:96px 0;position:relative;overflow:hidden}
.symptom-inner{max-width:1200px;margin:0 auto;padding:0 48px;position:relative;z-index:1}
.symptom-glow{position:absolute;inset:0;background:radial-gradient(circle at 70% 40%,rgba(49,184,152,.09) 0%,transparent 55%);pointer-events:none}
.symptom-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:40px}
.symptom-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.symptom-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;user-select:none}
.symptom-item.checked{background:rgba(49,184,152,.12);border-color:rgba(49,184,152,.28)}
.symptom-cb{width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(255,255,255,.20);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:white;transition:all .2s}
.symptom-item.checked .symptom-cb{background:var(--teal);border-color:var(--teal)}
.symptom-text{font-size:var(--type-small);font-weight:400;color:rgba(255,255,255,.75);transition:color .2s}
.symptom-item.checked .symptom-text{color:rgba(255,255,255,.9)}
.symptom-result{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-md);padding:32px;position:sticky;top:100px}
.sr-score{text-align:center;margin-bottom:24px}
.sr-num{font-family:var(--font-serif);font-size:72px;font-weight:400;color:white;line-height:1;transition:color .3s}
.sr-denom{font-size:var(--type-body);font-weight:400;color:rgba(255,255,255,.55);margin-top:4px}
.sr-bar-wrap{background:rgba(255,255,255,.08);border-radius:100px;height:8px;margin-bottom:20px;overflow:hidden}
.sr-bar{height:100%;border-radius:100px;background:var(--teal);transition:width .5s ease;width:0%}
.sr-message{font-family:var(--font-serif);font-size:20px;font-weight:400;color:white;line-height:1.40;margin-bottom:8px;min-height:56px;transition:all .3s}
.sr-sub{font-size:var(--type-small);font-weight:400;color:rgba(255,255,255,.65);line-height:1.65;margin-bottom:24px}
.sr-cta{display:block;text-align:center;background:var(--teal);color:white;border-radius:100px;padding:14px 32px;font-size:14px;font-weight:500;letter-spacing:.03em;text-decoration:none;opacity:0;pointer-events:none;transform:translateY(6px);transition:all .3s;box-shadow:0 4px 14px rgba(47,185,152,.35)}
.sr-cta.show{opacity:1;pointer-events:all;transform:translateY(0)}
.sr-cta:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(47,185,152,.45)}

/* candidate callout */
.sr-candidate{position:relative;margin-top:20px;background:rgba(49,184,152,.1);border:1.5px solid rgba(49,184,152,.25);border-radius:var(--radius-md);padding:20px 24px;opacity:0;transform:translateY(12px) scale(.97);pointer-events:none;transition:all .45s cubic-bezier(.22,1,.36,1);overflow:hidden}
.sr-candidate.show{opacity:1;transform:translateY(0) scale(1);pointer-events:all;animation:sr-cand-pulse 2s ease-in-out 1}
@keyframes sr-cand-pulse{0%,100%{box-shadow:0 0 0 0 rgba(49,184,152,0)}50%{box-shadow:0 0 0 10px rgba(49,184,152,.15)}}
.sr-candidate-glow{position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(49,184,152,.15) 0%,transparent 60%);pointer-events:none}
.sr-candidate-inner{position:relative;z-index:1;display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.sr-candidate-text{display:flex;flex-direction:column;gap:4px}
.sr-candidate-text strong{font-size:var(--type-body);font-weight:600;color:var(--teal-light)}
.sr-candidate-text span{font-size:var(--type-small);font-weight:400;color:rgba(255,255,255,.65);line-height:1.55}
.sr-candidate-btn{position:relative;z-index:1;display:inline-flex;align-items:center;background:var(--teal);color:white;border-radius:100px;padding:12px 28px;font-size:var(--type-small);font-weight:600;letter-spacing:.03em;text-decoration:none;transition:all .3s;box-shadow:0 4px 16px rgba(49,184,152,.3)}
.sr-candidate-btn:hover{background:var(--teal-light);transform:translateY(-2px);box-shadow:0 6px 24px rgba(49,184,152,.4)}

/* quiz link in hero */
.quiz-link{display:inline-flex;align-items:center}

/* ── IMAGE BANNER ── */
.sm-banner{position:relative;height:520px;overflow:hidden}
.sm-banner-placeholder{position:absolute;inset:0;background:linear-gradient(135deg,#2a4f47 0%,#1c3832 30%,#28967c 70%,#5ec9ae 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.sm-banner-placeholder svg{opacity:.3;color:#fff}
.sm-banner-placeholder span{font-size:var(--type-caption);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.60)}
.sm-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.sm-banner-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,56,50,.85) 0%,rgba(28,56,50,.5) 50%,transparent 100%)}
.sm-banner-content{position:relative;z-index:2;max-width:520px;padding:80px 64px;height:100%;display:flex;flex-direction:column;justify-content:center}
.sm-banner-tag{display:inline-block;font-family:var(--font-sans);font-size:var(--type-caption);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-light);background:rgba(49,184,152,.12);border:1px solid rgba(49,184,152,.2);border-radius:100px;padding:5px 16px;margin-bottom:18px;width:fit-content}
.sm-banner-h2{font-family:var(--font-serif);font-size:var(--type-h2);font-weight:400;color:#fff;line-height:1.12;margin-bottom:14px}
.sm-banner-h2 em{font-style:italic;color:var(--teal-light)}
.sm-banner-p{font-family:var(--font-sans);font-size:var(--type-body);font-weight:400;color:rgba(255,255,255,.65);line-height:var(--lh-body);margin-bottom:24px}
.sm-banner-btn{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;padding:14px 32px;border-radius:100px;font-family:var(--font-sans);font-size:14px;font-weight:500;text-decoration:none;transition:background .25s,transform .2s,box-shadow .25s;width:fit-content}
.sm-banner-btn:hover{background:var(--teal-dim);transform:translateY(-2px);box-shadow:0 8px 24px rgba(49,184,152,.3)}

/* ── TIMELINE ── */
.timeline-section{background:var(--off-white);padding:96px 0}
.timeline-inner{max-width:1200px;margin:0 auto;padding:0 48px}
.timeline-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:start}
.timeline-left{}
.timeline-img{position:relative;border-radius:var(--radius-lg,28px);overflow:hidden;background:linear-gradient(145deg,var(--teal) 0%,var(--forest-mid,#2A4F47) 55%,var(--forest) 100%);min-height:480px;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 48px rgba(26,36,32,.14);position:sticky;top:120px}
.timeline-img-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.timeline-img-badge{position:absolute;bottom:24px;left:24px;z-index:2;background:var(--teal);border-radius:var(--radius-md,20px);padding:12px 18px;display:flex;align-items:center;gap:10px}
.timeline-img-badge-val{font-family:var(--font-serif);font-size:20px;font-weight:500;color:#fff;line-height:1}
.timeline-img-badge-lbl{font-family:var(--font-sans);font-size:var(--type-caption);font-weight:400;color:rgba(255,255,255,.8);line-height:1.4}
.timeline-tabs{display:flex;gap:0;border-radius:var(--radius-sm);overflow:hidden;border:1.5px solid var(--sand-deep);background:var(--off-white);margin-bottom:40px;max-width:680px}
.tl-tab{flex:1;padding:14px 16px;font-size:12.5px;font-weight:400;color:var(--muted);text-align:center;cursor:pointer;border:none;background:transparent;font-family:var(--font-sans);transition:all .2s;border-right:1.5px solid var(--sand-deep)}
.tl-tab:last-child{border-right:none}
.tl-tab:hover{color:var(--text-dark);background:var(--sand-mid)}
.tl-tab.active{background:var(--forest);color:white;font-weight:500}
.timeline-track{position:relative}
.tl-spine{position:absolute;left:28px;top:0;bottom:0;width:2px;background:var(--sand-deep);z-index:0}
.tl-spine-fill{position:absolute;left:28px;top:0;width:2px;background:var(--teal);z-index:1;transition:height .6s ease}
.tl-items{position:relative;z-index:2;display:flex;flex-direction:column;gap:0}
.tl-item{display:grid;grid-template-columns:58px 1fr;gap:0;opacity:.35;transition:opacity .3s}
.tl-item.active{opacity:1}
.tl-left{display:flex;flex-direction:column;align-items:center;padding-top:4px}
.tl-dot{width:20px;height:20px;border-radius:50%;border:3px solid var(--sand-deep);background:var(--off-white);transition:all .3s;flex-shrink:0}
.tl-item.active .tl-dot{border-color:var(--teal);background:var(--teal);box-shadow:0 0 0 5px rgba(49,184,152,.15)}
.tl-item.passed .tl-dot{border-color:var(--teal);background:var(--teal)}
.tl-item.passed{opacity:.7}
.tl-connector{flex:1;width:2px;background:transparent}
.tl-right{padding:0 0 40px 24px}
.tl-phase{font-size:var(--type-caption);font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--teal);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.tl-phase-badge{background:var(--teal-pale);border:1px solid rgba(49,184,152,.20);border-radius:100px;padding:2px 10px}
.tl-title{font-family:var(--font-serif);font-size:24px;font-weight:500;color:var(--text-dark);margin-bottom:8px;line-height:1.25}
.tl-body{font-size:var(--type-small);font-weight:400;color:var(--text-medium);line-height:1.65;max-width:600px}
.tl-detail{margin-top:12px;display:none}
.tl-item.active .tl-detail{display:flex;flex-wrap:wrap;gap:10px}
.tl-tag{background:var(--sand-mid);border-radius:100px;padding:4px 12px;font-size:var(--type-caption);font-weight:400;color:var(--text-medium)}
.tl-item.active .tl-tag{background:var(--teal-pale);color:var(--teal)}
.tl-nav{display:flex;justify-content:center;gap:8px;margin-top:24px}
.tl-nav-dot{width:8px;height:8px;border-radius:50%;background:var(--sand-deep);cursor:pointer;transition:all .2s}
.tl-nav-dot.active{background:var(--teal);width:24px;border-radius:100px}

/* ── FAQ ── */
.faq-grid-layout{display:grid;grid-template-columns:1fr 2fr;gap:64px;align-items:start}
.faq-list{display:flex;flex-direction:column;gap:0;border-radius:var(--radius-md);overflow:hidden;border:1px solid rgba(26,36,32,0.07);box-shadow:var(--shadow-sm)}
.faq-item{border-bottom:1px solid var(--sand-deep)}
.faq-item:last-child{border-bottom:none}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;cursor:pointer;background:var(--card-bg);transition:background .2s}
.faq-q:hover{background:var(--sand-mid)}
.faq-item.open .faq-q{background:var(--teal-pale)}
.faq-q-text{font-family:var(--font-serif);font-size:19px;font-weight:500;color:var(--text-dark)}
.faq-item.open .faq-q-text{color:var(--teal)}
.faq-icon{width:28px;height:28px;border-radius:50%;background:var(--sand-mid);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--muted);flex-shrink:0;transition:all .2s}
.faq-item.open .faq-icon{background:var(--teal);color:white;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-a{max-height:400px}
.faq-a-inner{padding:0 24px 22px;font-size:var(--type-small);font-weight:400;color:var(--text-medium);line-height:1.75}

/* ── COMPARISON CARDS ── */
.how-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.compare-card{border-radius:var(--radius-md);padding:24px;border:1px solid rgba(26,36,32,0.07);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.compare-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(26,36,32,.1)}
.compare-card-bad{background:var(--rose-pale);border-color:rgba(184,137,122,.25)}
.compare-card-bad:hover{border-color:rgba(184,137,122,.5);box-shadow:0 12px 32px rgba(184,137,122,.15)}
.compare-card-good{background:var(--teal-pale);border-color:rgba(49,184,152,.25)}
.compare-card-good:hover{border-color:rgba(49,184,152,.5);box-shadow:0 12px 32px rgba(49,184,152,.15)}
.compare-card-bad{opacity:0;transform:translateX(-30px)}.compare-card-good{opacity:0;transform:translateX(30px)}
.how-compare.animated .compare-card-bad,.how-compare.animated .compare-card-good{opacity:1;transform:translateX(0);transition:opacity .6s ease,transform .6s ease}
.how-compare.animated .compare-card-good{transition-delay:.15s}
.compare-label{font-size:var(--type-caption);font-weight:600;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
.compare-label-bad{color:var(--rose-gold)}
.compare-label-good{color:var(--teal)}
.compare-card p{font-size:var(--type-small);font-weight:400;color:var(--text-medium);line-height:1.65}

/* ── FORM ── */
.form-section{padding:96px 0;background:var(--sand-mid)}
.form-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;max-width:1200px;margin:0 auto;padding:0 48px}
.form-card{background:var(--card-bg);border-radius:var(--radius-lg);padding:44px;box-shadow:var(--shadow-md);border:1px solid rgba(26,36,32,0.07)}
.form-card h2{font-family:var(--font-serif);font-size:clamp(26px,2.8vw,38px);font-weight:400;color:var(--text-dark);line-height:1.15;margin-bottom:6px}
.form-card h2 em{color:var(--teal);font-style:italic}
.form-card>p{font-size:var(--type-small);font-weight:400;color:var(--text-medium);margin-bottom:28px;line-height:1.65}
.frow{margin-bottom:18px}
.frow-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.frow label,.frow-2 label{display:block;font-size:var(--type-caption);font-weight:600;text-transform:uppercase;letter-spacing:.10em;color:var(--text-medium);margin-bottom:6px}
.form-card input[type=text],
.form-card input[type=email],
.form-card input[type=tel],
.form-card select{width:100%;background:var(--sand-mid);border:1.5px solid var(--sand-deep);border-radius:10px;padding:12px 16px;font-family:var(--font-sans);font-size:14px;font-weight:400;color:var(--text-dark);outline:none;transition:border-color .2s,background .2s;-webkit-appearance:none}
.form-card input:focus,
.form-card select:focus{border-color:var(--teal);background:var(--teal-mist)}
.form-card select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A9490'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:10px;padding-right:36px;cursor:pointer;background-color:var(--sand-mid)}
.consent-row{display:flex;align-items:start;gap:12px;margin-bottom:24px}
.cb{width:20px;height:20px;border-radius:5px;border:2px solid var(--sand-deep);background:var(--sand-mid);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;transition:all .2s;margin-top:1px}
.cb.on{background:var(--teal);border-color:var(--teal);color:white}
.consent-text{font-size:var(--type-caption);font-weight:400;color:var(--muted);line-height:1.65}
.submit-btn{width:100%;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:white;border:none;border-radius:100px;padding:15px;font-family:var(--font-sans);font-size:14px;font-weight:500;cursor:pointer;box-shadow:0 4px 14px rgba(47,185,152,.35);transition:all .3s}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(47,185,152,.45)}
.privacy-note{font-size:var(--type-caption);font-weight:400;color:var(--subtle);text-align:center;margin-top:10px}
.form-aside{padding-top:8px}
.form-aside h3{font-family:var(--font-serif);font-size:clamp(26px,2.8vw,38px);font-weight:400;color:var(--text-dark);margin-bottom:12px}
.form-aside h3 em{color:var(--teal);font-style:italic}
.form-aside>p{font-size:var(--type-body);font-weight:400;color:var(--text-medium);line-height:var(--lh-body);margin-bottom:32px}
.form-trust{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.ft-row{display:flex;align-items:start;gap:14px}
.ft-icon{width:40px;height:40px;border-radius:12px;background:var(--teal-pale);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s,background .3s}
.ft-row:hover .ft-icon{transform:scale(1.08);background:rgba(49,184,152,.18)}
.ft-text-head{font-size:var(--type-body);font-weight:500;color:var(--text-dark);margin-bottom:2px}
.ft-text-body{font-size:var(--type-small);font-weight:400;color:var(--text-medium);line-height:1.60}
.form-disclaimer{font-size:var(--type-caption);font-weight:400;color:var(--subtle);line-height:1.70;border-top:1px solid var(--sand-deep);padding-top:20px}

/* ── CTA BAND ── */
.cta-band{background:var(--forest);padding:96px 0;position:relative;overflow:hidden;text-align:center}
.cta-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(49,184,152,.07) 0%,transparent 55%);pointer-events:none}
.cta-inner{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:0 48px}
.cta-p{font-size:var(--type-body);font-weight:400;color:rgba(255,255,255,.75);line-height:var(--lh-body);max-width:520px;margin:0 auto}
.cta-disc{font-size:var(--type-caption);font-weight:400;color:rgba(255,255,255,.55);line-height:1.65;margin-top:20px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px }
  .hero-stack { max-width: 480px }
  .how-grid { grid-template-columns: 1fr; gap: 32px }
  .how-visual { min-height: 240px }
  .wl-strip { grid-template-columns: 1fr 1fr }
  .wl-item:nth-child(2){border-right:none}
  .wl-item:nth-child(1),.wl-item:nth-child(2){border-bottom:1px solid var(--sand-deep)}
  .benefits-grid { grid-template-columns: 1fr 1fr }
  .peptide-panel.active { grid-template-columns: 1fr }
  .pp-right { padding: 28px }
  .pp-left { padding: 28px }
  .symptom-grid { grid-template-columns: 1fr; gap: 32px }
  .symptom-result { position: static }
  .timeline-grid { grid-template-columns: 1fr }
  .timeline-img { min-height: 300px; position: static }
  .sm-banner { height: 400px }
  .sm-banner-content { padding: 40px 32px }
  .form-inner { grid-template-columns: 1fr; gap: 40px }
  .faq-grid-layout { grid-template-columns: 1fr; gap: 32px }
  .how-compare { grid-template-columns: 1fr }
}
@media (max-width: 768px) {
  .hero { padding: 120px 20px 64px }
  .hero-inner { padding: 0 }
  .hero-wm { display: none }
  .section { padding: 64px 0 }
  .symptom-section { padding: 64px 0 }
  .timeline-section { padding: 64px 0 }
  .form-section { padding: 64px 0 }
  .cta-band { padding: 64px 0 }
  .symptom-inner { padding: 0 20px }
  .timeline-inner { padding: 0 20px }
  .form-inner { padding: 0 20px }
  .cta-inner { padding: 0 20px }
  .benefits-header { flex-direction: column; align-items: flex-start }
  .benefits-grid { grid-template-columns: 1fr }
  .symptom-checks { grid-template-columns: 1fr }
  .sm-banner { height: 340px }
  .sm-banner-content { padding: 32px 20px }
  .faq-list { border-radius: var(--radius-sm) }
  .timeline-tabs { flex-direction: column; border-radius: var(--radius-sm) }
  .tl-tab { border-right: none; border-bottom: 1.5px solid var(--sand-deep) }
  .tl-tab:last-child { border-bottom: none }
  .form-card { padding: 28px }
  .frow-2 { grid-template-columns: 1fr }
}