/* ============================================================
   PepConnection — friendly cartoon peptide site
   ============================================================ */
:root{
  --cream:#FFF7EC;
  --cream-2:#FFEFDD;
  --ink:#22304A;
  --ink-soft:#4A5B78;
  --white:#ffffff;

  --teal:#34D6B0;
  --teal-deep:#12B394;
  --coral:#FF7A6B;
  --sun:#FFC94D;
  --sky:#5AB0F5;
  --lav:#B79CF0;

  --shadow:0 14px 30px -12px rgba(34,48,74,0.28);
  --shadow-sm:0 8px 18px -10px rgba(34,48,74,0.3);
  --hard:4px 4px 0 var(--ink), 0 16px 26px -12px rgba(34,48,74,.32);
  --hard-lg:7px 8px 0 var(--ink), 0 28px 42px -14px rgba(34,48,74,.38);
  --radius:22px;
  --radius-sm:14px;
  --container:1120px;
  --footer-h:60px; /* compact sticky footer height; kept in sync by JS */
  --ease:cubic-bezier(.34,1.56,.64,1);
  --font-d:"Fredoka", system-ui, sans-serif;
  --font-b:"Nunito", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-b);
  color:var(--ink);
  background:
    radial-gradient(ellipse 92% 60% at 50% -12%, #FFFDF8, transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 8%, rgba(90,176,245,.10), transparent 60%),
    var(--cream);
  background-attachment:fixed;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,h4{ font-family:var(--font-d); font-weight:600; line-height:1.08; margin:0; letter-spacing:-0.01em; }
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; display:block; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-d); font-weight:600; font-size:1rem;
  padding:.72em 1.35em; border-radius:100px; cursor:pointer;
  border:3px solid var(--ink); background:var(--white); color:var(--ink);
  background-image:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 46%, rgba(0,0,0,.06));
  box-shadow:var(--hard), 0 12px 20px -8px rgba(34,48,74,.4), inset 0 2px 0 rgba(255,255,255,.35);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translate(-2px,-3px); box-shadow:6px 7px 0 var(--ink), 0 18px 26px -8px rgba(34,48,74,.45), inset 0 2px 0 rgba(255,255,255,.4); }
.btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink), 0 6px 12px -6px rgba(34,48,74,.4), inset 0 2px 6px rgba(0,0,0,.15); }
.btn-primary{ background:var(--teal); }
.btn-discord{ background:var(--lav); }
.btn-ghost{ background:var(--white); }
.btn-lg{ font-size:1.1rem; padding:.85em 1.7em; }
.btn-emoji{ font-size:1.1em; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:20px;
  padding:14px 24px;
  background:rgba(255,247,236,0.82);
  backdrop-filter:blur(10px);
  border-bottom:3px solid var(--ink);
}
.brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-d); font-weight:700; font-size:1.32rem; }
.brand-mark{ display:grid; place-items:center; }
.brand-mark svg{ animation:spin 18s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.brand-char svg{ animation:charNudge 5s ease-in-out infinite; overflow:visible; transform-origin:50% 80%; filter:drop-shadow(1.5px 2px 0 rgba(27,23,18,.18)); }
@keyframes charNudge{ 0%,86%,100%{ transform:rotate(0); } 91%{ transform:rotate(-7deg); } 96%{ transform:rotate(5deg); } }
.brand-name span{ color:var(--teal-deep); }
.nav-links{ display:flex; gap:26px; margin-left:auto; }
.nav-links a{ font-family:var(--font-d); font-weight:500; font-size:1rem; position:relative; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:3px; background:var(--coral); border-radius:3px; transition:right .25s var(--ease); }
.nav-links a:hover::after{ right:0; }
.nav-cta{ margin-left:0; }
.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; margin-left:auto; }
.nav-burger span{ width:26px; height:3px; background:var(--ink); border-radius:3px; transition:.25s; }
.mobile-menu{ display:none; }

/* ---------- hero (soft pastel band) ---------- */
.hero{ position:relative; padding:78px 0 52px; overflow:hidden; color:var(--ink);
  background:radial-gradient(125% 105% at 50% -14%, #ECFAF4 0%, #D3F1E7 55%, #BFEBDB 100%);
}
.hero-inner{ display:grid; grid-template-columns:0.84fr 1.16fr; gap:24px; align-items:center; position:relative; z-index:2; }
.hero-copy{ position:relative; z-index:3; }
.eyebrow{
  display:inline-block; font-family:var(--font-d); font-weight:600; font-size:.9rem;
  background:var(--sun); color:var(--ink); padding:.4em 1em; border-radius:100px;
  border:2.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); margin-bottom:22px; transform:rotate(-1.5deg);
}
.hero h1{ font-size:clamp(2.5rem,5.4vw,4.3rem); font-weight:700; margin-bottom:20px; color:var(--ink); }
.hero h1 .hl{ position:relative; color:var(--teal-deep); white-space:nowrap; }
.hero h1 .hl::after{ content:""; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.34em; background:var(--sun); z-index:-1; border-radius:6px; transform:rotate(-1deg); }
.lede{ font-size:1.2rem; color:var(--ink-soft); max-width:34ch; margin:0 0 28px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-cta .btn-primary{ background:var(--teal); }
.hero-note{ margin-top:20px; font-weight:700; color:var(--ink-soft); font-size:.95rem; }

.blob{ position:absolute; border-radius:50%; filter:blur(4px); z-index:0; opacity:.5; }
.blob-c{ width:520px; height:520px; background:radial-gradient(circle,var(--lav),transparent 66%); top:-160px; left:50%; margin-left:-260px; opacity:.4; will-change:transform; }

/* crisp geometric color blocks (bright fills on the deep hero) */
.shapes .shape{ position:absolute; z-index:0; box-shadow:0 20px 34px -16px rgba(0,0,0,.55); }
.sh-square{ width:96px; height:96px; border-radius:26px; background:var(--sun); top:44px; left:-42px; --r:-12deg; transform:rotate(-12deg); animation:floatY 9s ease-in-out infinite; }
.sh-circle{ width:72px; height:72px; border-radius:50%; background:var(--coral); bottom:78px; left:-30px; animation:floatY 8s ease-in-out infinite 1s; }
.sh-ring{ width:120px; height:120px; border-radius:50%; background:transparent; border:14px solid var(--sky); box-shadow:none; top:-42px; right:13%; animation:floatY 11s ease-in-out infinite .5s; }
.sh-pill{ width:118px; height:52px; border-radius:100px; background:#EAF6FF; top:22px; right:-46px; --r:14deg; transform:rotate(14deg); animation:floatY 10s ease-in-out infinite 1.4s; }
.sh-arch{ width:130px; height:65px; border-radius:130px 130px 0 0; background:var(--lav); bottom:-3px; right:6%; animation:floatY 12s ease-in-out infinite .8s; }
@keyframes floatY{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-14px) rotate(var(--r,0deg)); } }

/* hero is a banded gradient now — drop the wave transition */
.wave-divider{ display:none; }

/* floating doodles */
.doodles .doodle{ position:absolute; z-index:1; width:60px; }
.d1{ top:5%; left:1%; width:62px; animation:float1 7s ease-in-out infinite; }
.d2{ bottom:7%; left:0.5%; width:78px; animation:float2 9s ease-in-out infinite; }
.d3{ top:11%; right:3%; width:78px; animation:float1 8s ease-in-out infinite .5s; }
.d4{ bottom:13%; right:9%; width:54px; animation:float2 10s ease-in-out infinite 1s; }
.d5{ top:42%; right:0.5%; width:98px; animation:float1 9s ease-in-out infinite .8s; }
.d6{ top:7%; right:24%; width:56px; animation:float2 8s ease-in-out infinite 1.4s; }
@keyframes float1{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-22px) rotate(8deg); } }
@keyframes float2{ 0%,100%{ transform:translateY(0) rotate(6deg); } 50%{ transform:translateY(-16px) rotate(-8deg); } }

/* hero scene */
.hero-scene{ position:relative; height:520px; z-index:2; }
.hero-stage{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  width:94%; height:150px; z-index:0; border-radius:0; border:none; box-shadow:none;
  background:radial-gradient(ellipse at center, rgba(34,48,74,.12), transparent 68%); }
.stage-dot{ position:absolute; border-radius:50%; }
.sd1{ width:220px; height:220px; background:radial-gradient(circle, rgba(52,214,176,.28), transparent 70%); top:-70px; left:-30px; }
.sd2{ width:170px; height:170px; background:radial-gradient(circle, rgba(255,201,77,.22), transparent 70%); bottom:0; right:0; }

/* hero character lineup — each on a hand-cut pastel panel */
.hero-crew{ position:absolute; inset:0 0 0 0; display:flex; align-items:flex-end; justify-content:center; gap:0; z-index:2; }
.char{ position:relative; flex:1 1 0; max-width:215px; display:flex; align-items:flex-end; justify-content:center; }
.char svg{ position:relative; z-index:1; width:100%; height:auto; overflow:visible;
  filter:drop-shadow(3px 6px 0 rgba(27,23,18,.10)); animation:charBob 4.6s ease-in-out infinite; }
.char:nth-child(2) svg{ animation-delay:.5s; }
.char:nth-child(3) svg{ animation-delay:.9s; }
.char:nth-child(4) svg{ animation-delay:1.3s; }
@keyframes charBob{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 50%{ transform:translateY(-8px) rotate(1deg); } }

/* hero pastel panels (behind each character) */
.hero-panel{ position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); width:100%; height:262px; z-index:0;
  filter:drop-shadow(0 14px 18px rgba(34,48,74,.16)); }
.p-peach{ background:linear-gradient(158deg,#FCE7D6,#F8D6BC); clip-path:polygon(10% 4%, 92% 1.5%, 96% 97%, 6% 99%); }
.p-lav{ background:linear-gradient(158deg,#EFE8FC,#DECFF7); clip-path:polygon(8% 2%, 90% 5%, 95% 98.5%, 12% 96%); }
.p-pink{ background:linear-gradient(158deg,#FDE7F1,#FBD2E5); clip-path:polygon(12% 3%, 95% 6%, 90% 96%, 7% 98%); }
.p-yellow{ background:linear-gradient(158deg,#FCF3CF,#F8E7A6); clip-path:polygon(6% 5%, 88% 2%, 95% 98%, 10.5% 95%); }

.mini-chain{ position:absolute; top:3%; left:50%; transform:translateX(-50%); width:82px; z-index:3; animation:bob 3.6s ease-in-out infinite; }
.mini-chain use{ transform-box:fill-box; transform-origin:center; }

/* ===== per-page character that pops up when its page shows ===== */
.page-char{ position:absolute; bottom:6px; z-index:3; width:132px; pointer-events:none; }
.page-char svg{ display:block; width:100%; height:auto; overflow:visible;
  filter:drop-shadow(3px 6px 0 rgba(27,23,18,.10)); animation:pcBob 4.6s ease-in-out infinite; }
@keyframes pcBob{ 0%,100%{ transform:translateY(0) rotate(-1.5deg); } 50%{ transform:translateY(-7px) rotate(1.5deg); } }
.pc-library{ left:1.5%; } .pc-dosing{ left:1%; }
.pc-guides{ right:1.5%; } .pc-community{ right:2.5%; }
/* pop up from below the page edge (overrides the base reveal slide) */
.page-char.reveal:not(.in){ transform:translateY(130%) scale(.85); opacity:0; }
@media (max-width:759px){ .page-char{ display:none; } }

/* ===== hand-cut angled section edges (stacked cut-paper) ===== */
.hero, .strip, #library, .section-crew, .section-quotes, #learn, .section-dosing, .section-community, .section-disc, .section-news{
  border-top:0 !important; border-bottom:0 !important;
}
.section-disc{ background:var(--cream); }
.strip, #library, .section-crew, .section-quotes, #learn, .section-dosing, .section-community, .section-disc{
  position:relative; margin-top:-20px;
  clip-path:polygon(0 0, 100% 20px, 100% 100%, 0 calc(100% - 20px));
}
.hero{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 20px)); }
.section-news{ position:relative; margin-top:-20px;
  clip-path:polygon(0 0, 100% 20px, 100% 100%, 0 100%); }

/* ===== scroll-stacking: each "page" pins and the next rises up over it ===== */
@media (min-width:760px){
  .hero, .strip, #library, .section-crew, .section-quotes, #learn,
  .section-dosing, .section-community, .section-disc, .section-news{
    position:sticky !important; top:0; min-height:calc(100vh - var(--footer-h));
    display:flex; flex-direction:column; justify-content:center;
    padding-top:40px; padding-bottom:40px;
  }
  /* tighten headings inside stacked pages */
  .hero .sec-head, #library .sec-head, .section-crew .sec-head, .section-quotes .sec-head,
  #learn .sec-head, .section-dosing .sec-head, .section-community .community-inner,
  .section-disc .disclaimer, .section-news .news-inner{ margin-top:0; }
  #library .sec-head, #learn .sec-head, .section-crew .sec-head{ margin-bottom:30px; }
  /* soft shadow along the top edge so each page looks lifted over the last */
  .strip::before, #library::before, .section-crew::before, .section-quotes::before,
  #learn::before, .section-dosing::before, .section-community::before,
  .section-disc::before, .section-news::before{
    content:""; position:absolute; left:0; right:0; top:0; height:28px; z-index:5; pointer-events:none;
    background:linear-gradient(180deg, rgba(34,48,74,.12), transparent);
  }
}

/* wave divider */
.wave-divider{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; z-index:1; }
.wave-divider svg{ width:100%; height:80px; }

/* ---------- strip ---------- */
.strip{ background:var(--white); border-bottom:3px solid var(--ink); }
.strip-inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:34px 24px; text-align:center; }
.strip-item{ display:flex; flex-direction:column; gap:2px; }
.strip-num{ font-family:var(--font-d); font-weight:700; font-size:2.4rem; color:var(--teal-deep); line-height:1; }
.strip-item:nth-child(2) .strip-num{ color:var(--coral); }
.strip-item:nth-child(3) .strip-num{ color:var(--sky); }
.strip-item:nth-child(4) .strip-num{ color:var(--lav); }
.strip-label{ font-weight:700; color:var(--ink-soft); font-size:.92rem; }

/* ---------- sections ---------- */
.section{ padding:80px 0; position:relative; }
/* light gradient bands — each section its own bright color, like the testimonials panel */
#library{ background:linear-gradient(165deg,#EAF3FF 0%,#CFE1FF 100%); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
#learn{ background:linear-gradient(165deg,#FFF7E4 0%,#FFEBBE 100%); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.section-crew{ background:#FEFEFC; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.section-dosing{ background:linear-gradient(165deg,#E6FBF3 0%,#C6F1E4 100%); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.sec-head{ max-width:640px; margin:0 auto 46px; text-align:center; }
.sec-head h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); margin:14px 0 12px; }
.sec-sub{ font-size:1.12rem; color:var(--ink-soft); margin:0; }
.sec-sub.big{ font-size:1.25rem; max-width:44ch; margin:0 auto; }
.sec-foot{ text-align:center; margin-top:40px; }
.tag{ display:inline-block; font-family:var(--font-d); font-weight:600; font-size:.85rem; padding:.35em .95em; border-radius:100px; border:2.5px solid var(--ink); box-shadow:2.5px 2.5px 0 var(--ink); }
.tag-teal{ background:var(--teal); } .tag-coral{ background:var(--coral); } .tag-yellow{ background:var(--sun); } .tag-blue{ background:var(--sky); }

/* ===== hand-cut angled card shapes (replaces all rounded card tiles) ===== */
.pep-card, .guide-card, .disc-col, .news-inner, .quote-feature, .quote-card{
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  clip-path:polygon(2% 4%, 98.2% 1%, 99.2% 96.5%, 0.8% 99%);
  filter:drop-shadow(3px 5px 0 rgba(34,48,74,.32)) drop-shadow(0 16px 22px rgba(34,48,74,.15));
  transition:transform .2s var(--ease), filter .2s var(--ease);
}
.pep-card:nth-child(2), .pep-card:nth-child(5), .guide-card:nth-child(2), .disc-no, .quote-card:nth-child(2){
  clip-path:polygon(1% 1.5%, 98.6% 3%, 99% 98.5%, 1.6% 97%);
}
.pep-card:nth-child(3), .pep-card:nth-child(6), .guide-card:nth-child(3), .news-inner{
  clip-path:polygon(2.4% 2%, 98.2% 0.6%, 98.4% 98.2%, 0.6% 99.2%);
}
.pep-card:nth-child(4), .guide-card:nth-child(4), .quote-feature{
  clip-path:polygon(0.8% 3%, 99.2% 1.2%, 97.6% 99%, 1.4% 96.6%);
}
.pep-card:hover, .guide-card:hover{
  transform:translate(-3px,-4px) rotate(-.5deg);
  filter:drop-shadow(5px 7px 0 rgba(34,48,74,.34)) drop-shadow(0 22px 26px rgba(34,48,74,.16));
}

/* ---------- library ---------- */
.pep-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pep-card{
  position:relative; background:var(--white); border:3px solid var(--ink); border-radius:var(--radius);
  padding:26px 24px 24px; box-shadow:var(--hard); overflow:hidden;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.pep-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:8px; background:var(--c); }
.pep-card:hover{ transform:translate(-3px,-3px) rotate(-.6deg); box-shadow:var(--hard-lg); }
.pep-vial{ display:block; width:34px; height:54px; border:3px solid var(--ink); border-radius:8px 8px 14px 14px; position:relative; margin-bottom:16px; background:#EAF6FF; overflow:hidden; }
.pep-vial::before{ content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:20px; height:8px; background:var(--ink); border-radius:3px; }
.pep-vial-fill{ position:absolute; left:0; right:0; bottom:0; height:55%; background:var(--c); }
.pep-vial-fill::after{ content:""; position:absolute; top:-4px; left:0; right:0; height:8px; background:var(--c); border-radius:50%; opacity:.7; }
.pep-card h3{ font-size:1.35rem; margin-bottom:6px; }
.pep-card p{ color:var(--ink-soft); margin:0 0 16px; font-size:1rem; }
.pep-badge{ display:inline-block; font-family:var(--font-d); font-weight:500; font-size:.78rem; background:var(--sun); color:var(--ink); padding:.28em .8em; border-radius:100px; border:2px solid var(--ink); }
.badge-green{ background:var(--teal); } .badge-blue{ background:var(--sky); }

/* ---------- crew: character lineup poster ---------- */
.crew-lineup{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:start; }
.crew-member{ margin:0; text-align:center; }
.crew-stage{ position:relative; height:296px; display:flex; align-items:flex-end; justify-content:center; }

/* hand-cut pastel paper panels — each slightly misshaped */
.crew-panel{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); width:86%; max-width:196px; height:284px; z-index:0;
  filter:drop-shadow(0 14px 18px rgba(34,48,74,.14)); }
.p-blue{ background:linear-gradient(158deg,#E9F2FD,#C6E0FA); clip-path:polygon(11% 4%, 92% 1.5%, 96.5% 97%, 6% 99%); }
.p-mint{ background:linear-gradient(158deg,#E7F8ED,#C7EFD6); clip-path:polygon(7.5% 2%, 90% 5%, 95% 98.5%, 12.5% 96%); }
.p-pink{ background:linear-gradient(158deg,#FDE7F1,#FBD2E5); clip-path:polygon(12.5% 3%, 95.5% 6%, 90% 96.5%, 7% 98%); }
.p-lav{ background:linear-gradient(158deg,#EFE8FC,#DECFF7); clip-path:polygon(6% 5.5%, 88.5% 2%, 95% 98%, 10.5% 95%); }

/* faint science accents inside the panels */
.acc{ position:absolute; color:#1B2A3A; opacity:.10; }
.acc-a{ width:46px; height:46px; top:9%; left:12%; }
.acc-b{ width:40px; height:40px; bottom:8%; right:12%; }

/* soft shadow under the feet */
.crew-foot{ position:absolute; z-index:0; bottom:16px; left:50%; transform:translateX(-50%); width:58%; height:16px;
  background:radial-gradient(ellipse at center, rgba(34,48,74,.22), transparent 70%); }

/* the character in front */
.crew-body{ position:relative; z-index:1; width:80%; max-width:186px; height:auto; overflow:visible;
  filter:drop-shadow(3px 5px 0 rgba(27,23,18,.10)); }
.crew-member:hover .crew-body{ animation:pop .5s var(--ease); }
@keyframes pop{ 0%{ transform:translateY(0); } 45%{ transform:translateY(-9px); } 100%{ transform:translateY(0); } }

.crew-member figcaption{ margin-top:16px; }
.crew-member h3{ font-size:1.4rem; }
.crew-role{ font-family:var(--font-d); font-weight:500; color:var(--teal-deep); margin:4px 0 0; font-size:.95rem; }

/* ---------- guides ---------- */
.guide-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.guide-card{ background:var(--white); border:3px solid var(--ink); border-radius:var(--radius); padding:24px 22px; box-shadow:var(--hard); transition:transform .18s var(--ease), box-shadow .18s var(--ease); display:flex; flex-direction:column; }
.guide-card:hover{ transform:translate(-3px,-3px); box-shadow:var(--hard-lg); background:var(--c); }
.guide-emoji{ font-size:2.3rem; display:inline-block; margin-bottom:12px; }
.guide-card:hover .guide-emoji{ animation:wiggle .5s ease; }
@keyframes wiggle{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-12deg); } 75%{ transform:rotate(12deg); } }
.guide-card h3{ font-size:1.2rem; margin-bottom:6px; }
.guide-card p{ color:var(--ink-soft); font-size:.96rem; margin:0 0 14px; flex:1; }
.guide-go{ font-family:var(--font-d); font-weight:600; color:var(--teal-deep); }

/* ---------- dosing ---------- */
.dosing-inner{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.dosing-copy h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); margin:14px 0 12px; }
.dosing-copy .btn{ margin-top:8px; }
.mini-note{ font-size:.9rem; color:var(--ink-soft); margin-top:16px; font-weight:700; }
.dosing-art svg{ filter:drop-shadow(6px 6px 0 rgba(34,48,74,.15)); }
.dosing-art .bar{ transform-box:fill-box; transform-origin:bottom; animation:grow 3s ease-in-out infinite; }
.dosing-art .bar:nth-of-type(4){ animation-delay:.15s; } .dosing-art .bar:nth-of-type(5){ animation-delay:.3s; }
.dosing-art .bar:nth-of-type(6){ animation-delay:.45s; } .dosing-art .bar:nth-of-type(7){ animation-delay:.6s; }
@keyframes grow{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.86); } }

/* ---------- community ---------- */
.section-community{ background:linear-gradient(165deg,#F1ECFF 0%,#E1D4FF 100%); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); text-align:center; overflow:hidden; }
.community-inner{ position:relative; z-index:2; max-width:720px; }
.community-inner h2{ font-size:clamp(2rem,4vw,3rem); margin:16px 0 14px; }
.community-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.crew-peek{ display:flex; justify-content:center; gap:-10px; margin-top:40px; }
.crew-peek .peek{ width:64px; margin-left:-14px; filter:drop-shadow(3px 3px 0 rgba(34,48,74,.18)); }
.crew-peek .peek:first-child{ margin-left:0; }
.p1{ animation:bob 3s ease-in-out infinite; } .p2{ animation:bob 3s ease-in-out infinite .3s; }
.p3{ animation:bob 3s ease-in-out infinite .6s; } .p4{ animation:bob 3s ease-in-out infinite .9s; }

/* ---------- disclaimer ---------- */
.disclaimer{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; }
.disc-col{ border:3px solid var(--ink); border-radius:var(--radius); padding:28px 30px; box-shadow:var(--hard); }
.disc-yes{ background:#EAFCF6; } .disc-no{ background:#FFF0EE; }
.disc-col h3{ font-size:1.35rem; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.disc-col ul{ margin:0; padding-left:20px; }
.disc-col li{ margin-bottom:8px; color:var(--ink-soft); }
.disc-col li b{ color:var(--ink); }

/* ---------- newsletter ---------- */
.section-news{ padding:70px 0; background:linear-gradient(165deg,#EAF7F3 0%,#DCEFF8 100%); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.news-inner{ background:var(--sun); border:3px solid var(--ink); border-radius:30px; box-shadow:var(--hard-lg); padding:44px 48px; display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center; }
.news-copy h2{ font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:8px; }
.news-copy .sec-sub{ color:var(--ink); opacity:.8; }
.news-form{ display:flex; gap:12px; flex-wrap:wrap; }
.news-form input{ flex:1; min-width:180px; font-family:var(--font-b); font-weight:600; font-size:1rem; padding:.75em 1.1em; border:3px solid var(--ink); border-radius:100px; background:var(--white); box-shadow:var(--hard); }
.news-form input:focus{ outline:none; box-shadow:5px 5px 0 var(--ink); }

/* ---------- footer ---------- */
/* compact persistent footer bar */
/* Fixed-height footer bar — never wraps to a second line at any viewport width.
   Less-essential items hide at narrower widths instead of wrapping, so the
   footer's height stays constant (like the header does with its hamburger). */
.footer{ background:var(--ink); color:var(--cream); position:sticky; bottom:0; z-index:40;
  border-top:3px solid var(--ink); height:var(--footer-h); overflow:hidden; }
.footer a{ color:var(--cream); }
.footer-bar{ max-width:var(--container); height:100%; margin:0 auto;
  display:flex; align-items:center; flex-wrap:nowrap; gap:18px; padding:0 20px; overflow:hidden; }
.footer-bar .brand{ color:var(--cream); font-size:1.05rem; flex:none; white-space:nowrap; }
.footer-bar .brand-name span{ color:var(--teal); }
.footer-links{ display:flex; flex-wrap:nowrap; gap:16px; flex:none; }
.footer-links a{ font-family:var(--font-d); font-weight:500; font-size:.92rem; color:rgba(255,247,236,.85); white-space:nowrap; }
.footer-links a:hover{ color:var(--teal); }
.footer-social{ display:flex; gap:12px; margin-left:auto; flex:none; }
.footer-social a{ font-weight:700; font-size:.88rem; color:rgba(255,247,236,.8); white-space:nowrap; }
.footer-social a:hover{ color:var(--teal); }
.footer-legal{ font-size:.8rem; color:rgba(255,247,236,.55); flex:none; white-space:nowrap; margin-left:auto; }

/* below 1080px: drop the legal line first */
@media (max-width:1080px){ .footer-legal{ display:none; } .footer-social{ margin-left:auto; } }
/* below 760px: drop the nav links too, keep brand + social only */
@media (max-width:760px){ .footer-links{ display:none; } }
/* below 480px: drop social labels too, keep just the brand */
@media (max-width:480px){ .footer-social{ display:none; } }

/* ---------- testimonials (soft pastel purple panel) ---------- */
.section-quotes{
  position:relative; overflow:hidden; color:var(--ink);
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  background:radial-gradient(130% 95% at 50% -10%, #F3ECFF 0%, #E7DBFB 55%, #DBCBF6 100%);
}
.q-wave{ position:absolute; left:-8%; right:-8%; top:38%; height:60%; z-index:0;
  background:radial-gradient(60% 120% at 50% 0%, rgba(168,140,235,.28), transparent 60%);
  border-radius:50% 50% 0 0 / 26% 26% 0 0; pointer-events:none; }
.section-quotes .container{ position:relative; z-index:1; }
.section-quotes .sec-head h2{ color:var(--ink); }
.section-quotes .sec-sub{ color:#6E5AA0; }

.quote-feature{
  position:relative; max-width:830px; margin:0 auto; text-align:center;
  padding:66px 56px 46px; border-radius:30px;
  background:#fff; border:2px solid var(--ink);
  box-shadow:6px 8px 0 var(--ink), 0 30px 50px -26px rgba(120,90,200,.4);
}
.quote-feature blockquote{
  margin:0; font-family:var(--font-d); font-weight:500;
  font-size:clamp(1.35rem,2.5vw,1.95rem); line-height:1.36; color:var(--ink);
}
.quote-feature figcaption{
  margin-top:26px; font-weight:800; font-size:.78rem;
  letter-spacing:.2em; text-transform:uppercase; color:#8A6BD8;
}
.q-mark{ position:absolute; font-family:Georgia,"Times New Roman",serif;
  color:transparent; -webkit-text-stroke:2px rgba(150,118,226,.55);
  line-height:1; pointer-events:none; user-select:none; z-index:0; }
.q-open{ top:16px; left:28px; font-size:104px; }
.q-close{ bottom:6px; right:30px; font-size:104px; }

.hl-box{
  background:var(--teal); color:var(--ink);
  padding:.02em .3em; border-radius:8px; font-weight:600;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

.quote-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:830px; margin:26px auto 0; }
.quote-card{
  position:relative; text-align:left; padding:24px 26px 22px; border-radius:20px;
  background:#fff; border:2px solid var(--ink);
  box-shadow:4px 5px 0 var(--ink), 0 20px 36px -26px rgba(120,90,200,.4);
}
.q-mini{ display:block; height:22px; font-family:Georgia,serif; font-size:56px;
  line-height:1; color:rgba(150,118,226,.6); }
.quote-card blockquote{ margin:2px 0 14px; font-family:var(--font-b); font-weight:600;
  font-size:1.05rem; line-height:1.5; color:var(--ink); }
.quote-card figcaption{ font-weight:800; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:#8A6BD8; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ===== fun, varied entrances — each section comes in differently ===== */
/* section headings rise up from below */
.sec-head.reveal:not(.in){ transform:translateY(44px); }
/* stats strip: pop up + scale */
.strip .reveal:not(.in){ transform:translateY(36px) scale(.82); }
/* library cards: alternate in from the left / right with a tilt */
#library .pep-card.reveal:not(.in):nth-child(odd){ transform:translateX(-72px) rotate(-4deg); }
#library .pep-card.reveal:not(.in):nth-child(even){ transform:translateX(72px) rotate(4deg); }
#library .sec-foot.reveal:not(.in){ transform:translateY(30px); }
/* crew lineup: each character rises up from the bottom */
#crew .crew-member.reveal:not(.in){ transform:translateY(56px) scale(.97); }
/* testimonials: feature rises, side cards slide in from the sides */
.section-quotes .quote-feature.reveal:not(.in){ transform:translateY(60px) scale(.94); }
.section-quotes .quote-card.reveal:not(.in):nth-child(1){ transform:translateX(-80px) rotate(-3deg); }
.section-quotes .quote-card.reveal:not(.in):nth-child(2){ transform:translateX(80px) rotate(3deg); }
/* guides: spring up from below, alternating tilt */
#learn .guide-card.reveal:not(.in):nth-child(odd){ transform:translateY(64px) rotate(-3deg); }
#learn .guide-card.reveal:not(.in):nth-child(even){ transform:translateY(64px) rotate(3deg); }
/* dosing: copy from the left, chart swings in from the right */
.section-dosing .dosing-copy.reveal:not(.in){ transform:translateX(-72px); }
.section-dosing .dosing-art.reveal:not(.in){ transform:translateX(72px) rotate(5deg); }
/* community: zoom in */
.section-community .community-inner.reveal:not(.in){ transform:scale(.88); }
/* what-we-are / aren't: columns from opposite sides */
.disclaimer .disc-yes.reveal:not(.in){ transform:translateX(-64px) rotate(-2deg); }
.disclaimer .disc-no.reveal:not(.in){ transform:translateX(64px) rotate(2deg); }
/* newsletter: drops in with a little scale */
.section-news .news-inner.reveal:not(.in){ transform:translateY(44px) scale(.95); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ order:1; } .hero-scene{ order:2; height:360px; }
  .lede{ max-width:none; } .hero-cta{ justify-content:center; }
  .eyebrow{ margin-inline:auto; }
  .strip-inner{ grid-template-columns:repeat(2,1fr); gap:26px 20px; }
  .pep-grid, .crew-lineup{ grid-template-columns:1fr 1fr; }
  .quote-row{ grid-template-columns:1fr; }
  .quote-feature{ padding:52px 30px 40px; }
  .q-open{ font-size:100px; left:12px; } .q-close{ font-size:100px; right:12px; bottom:-40px; }
  .guide-grid{ grid-template-columns:1fr 1fr; }
  .dosing-inner{ grid-template-columns:1fr; }
  .disclaimer, .news-inner{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .mobile-menu.open{ display:flex; flex-direction:column; gap:6px; padding:14px 24px 22px; background:var(--cream); border-bottom:3px solid var(--ink); }
  .mobile-menu.open a{ font-family:var(--font-d); font-weight:500; padding:8px 0; font-size:1.1rem; }
  .mobile-menu.open .btn{ margin-top:8px; align-self:flex-start; }
  .nav-burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ opacity:0; }
  .nav-burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .pep-grid, .guide-grid{ grid-template-columns:1fr; }
  .crew-lineup{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .news-inner{ padding:32px 26px; }
  .section{ padding:60px 0; }
  .hero-scene{ height:300px; }
}

/* ---------- 3D gloss overlay on card surfaces (after base bg) ---------- */
.pep-card, .crew-card, .guide-card, .disc-col, .news-inner{
  background-image:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%);
  background-repeat:no-repeat;
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .reveal{ opacity:1; transform:none; }
}