/* BestPeptideBrand.lol blog: readable long-form, v10 Meme Maximus accents tamed for articles */
:root {
  --pink: #ff3d8c; --lime: #a6ff00; --cyan: #00e0ff; --purple: #9b4dff;
  --yellow: #ffe03d; --orange: #ff9a3d; --ink: #16181d; --paper: #fffdf9;
  --muted: #5c5668; --line: #e8e2f2;
  --disp: "Baloo 2", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.7; font-size: 17px; }
img, svg { max-width: 100%; }
a { color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 2px; }
a:hover { color: var(--pink); }

.topbar { position: sticky; top: 0; z-index: 50; background: rgba(255,253,249,.92); backdrop-filter: blur(8px); border-bottom: 3px solid var(--ink); }
.topbar-row { max-width: 1060px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 12px 20px; }
.logo { font-family: var(--disp); font-weight: 800; font-size: 20px; text-decoration: none; color: var(--ink); }
.logo .lg-pink { color: var(--pink); } .logo .lg-purple { color: var(--purple); } .logo .lg-lol { color: var(--cyan); text-shadow: 1px 1px 0 var(--ink); }
.topnav { margin-left: auto; display: flex; gap: 16px; }
.topnav a { font-weight: 600; font-size: 14.5px; color: var(--ink); text-decoration: none; }
.topnav a:hover { color: var(--pink); }
.btn-claim { font-family: var(--disp); font-weight: 700; background: var(--pink); color: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 8px 18px; text-decoration: none; box-shadow: 3px 3px 0 var(--ink); font-size: 14.5px; white-space: nowrap; }
.btn-claim:hover { color: #fff; transform: translate(-1px,-2px); box-shadow: 5px 5px 0 var(--ink); }

.article-wrap { max-width: 740px; margin: 0 auto; padding: 40px 20px 90px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
h1 { font-family: var(--disp); font-weight: 800; font-size: clamp(30px, 5vw, 42px); line-height: 1.15; letter-spacing: -.01em; margin-bottom: 14px; }
.byline { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); border-bottom: 3px solid var(--ink); padding-bottom: 18px; margin-bottom: 26px; }
.byline .tag { background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 10px; font-weight: 700; color: var(--ink); }
.lede { font-size: 19px; font-weight: 500; color: #2c2733; margin-bottom: 26px; }
.lede strong { background: linear-gradient(transparent 55%, var(--lime) 55%); }

.toc { background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); padding: 18px 22px; margin: 0 0 34px; }
.toc-title { font-family: var(--disp); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.toc ol { margin-left: 18px; font-size: 14.5px; }
.toc a { text-decoration: none; }
.toc li { margin: 4px 0; }

article h2 { font-family: var(--disp); font-weight: 800; font-size: 26px; margin: 40px 0 12px; line-height: 1.2; }
article h3 { font-family: var(--disp); font-weight: 700; font-size: 20px; margin: 28px 0 10px; }
article p { margin: 14px 0; }
article ul, article ol { margin: 14px 0 14px 26px; }
article li { margin: 7px 0; }
article table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14.5px; background: #fff; }
.table-scroll { overflow-x: auto; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 var(--ink); margin: 22px 0; }
.table-scroll table { margin: 0; }
article th { font-family: var(--disp); font-weight: 700; text-align: left; background: var(--yellow); border-bottom: 3px solid var(--ink); padding: 10px 12px; }
article td { border-bottom: 1px solid var(--line); padding: 10px 12px; vertical-align: top; }
article tr:last-child td { border-bottom: none; }

.callout { border: 3px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); padding: 16px 20px; margin: 24px 0; background: #fff; }
.callout.tip { background: #f2ffe0; }
.callout.warn { background: #fff1e6; }
.callout .co-label { font-family: var(--disp); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; display: block; margin-bottom: 4px; }

.cta-box { background: var(--ink); color: #fff; border-radius: 18px; padding: 28px 26px; margin: 42px 0; text-align: center; box-shadow: 7px 7px 0 var(--pink); }
.cta-box h2 { color: #fff; margin: 0 0 8px; font-size: 24px; }
.cta-box p { color: #cfc8dd; font-size: 15px; margin: 0 0 18px; }
.cta-box a.btn-claim { background: var(--lime); color: var(--ink); border-color: #fff; box-shadow: 3px 3px 0 #fff; font-size: 16px; padding: 11px 24px; }

.faq { margin: 36px 0; }
.faq details { background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 14px 18px; margin: 10px 0; box-shadow: 4px 4px 0 var(--ink); }
.faq summary { font-family: var(--disp); font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; display: flex; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--pink); font-size: 20px; }
.faq details[open] summary::after { content: "-"; }
.faq details p { margin-top: 10px; font-size: 15px; }

.related { border-top: 3px solid var(--ink); margin-top: 44px; padding-top: 22px; }
.related h2 { font-size: 20px; margin: 0 0 12px; }
.related ul { list-style: none; margin: 0; }
.related li { margin: 8px 0; }

.disclaimer { font-size: 12.5px; color: var(--muted); margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); }

.footer { border-top: 3px solid var(--ink); padding: 26px 20px 40px; }
.footer-inner { max-width: 1060px; margin: 0 auto; font-size: 12.5px; color: var(--muted); }

@media (max-width: 640px) {
  .topnav { display: none; }
  body { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }