/*
Theme Name: LivingLabs
Theme URI: https://livinglabs.blog
Description: Custom theme for LivingLabs.Blog — peptide & wellness education platform. Apple-inspired, whitespace-first design system on Bootstrap 5.
Version: 1.0.0
Author: Muhammad Abdullah
Author URI: https://github.com/AbdullahShk
*/

/* ============================================================
   TABLE OF CONTENTS
   1. Design tokens
   2. Bootstrap variable mapping
   3. Base & typography
   4. Layout container
   5. Buttons
   6. Forms
   7. Navbar
   8. Dropdowns
   9. Mobile drawer
   10. Footer
   11. Newsletter card
   12. 404 page
   13. Utilities
   ============================================================ */

/* ------------------------------------------------------------
   1. Design tokens — ported 1:1 from the reference design system
   (HSL triplets, composed with hsl(var(--x) / alpha))
   ------------------------------------------------------------ */
:root {
  --ll-background: 0 0% 100%;
  --ll-foreground: 0 0% 7%;

  --ll-card: 0 0% 100%;
  --ll-card-foreground: 0 0% 7%;

  --ll-primary: 0 0% 7%;
  --ll-primary-foreground: 0 0% 100%;

  --ll-secondary: 240 5% 96%;
  --ll-secondary-foreground: 0 0% 15%;

  --ll-muted: 240 5% 96%;
  --ll-muted-foreground: 0 0% 44%;

  --ll-accent: 211 100% 50%;
  --ll-accent-foreground: 0 0% 100%;

  --ll-destructive: 0 84% 60%;
  --ll-destructive-foreground: 0 0% 100%;

  --ll-border: 0 0% 92%;
  --ll-input: 0 0% 92%;
  --ll-ring: 211 100% 50%;

  --ll-success: 142 71% 45%;
  --ll-warning: 38 92% 50%;

  --ll-radius: 1rem;
  --ll-radius-md: calc(var(--ll-radius) - 0.25rem); /* 12px */
  --ll-radius-sm: calc(var(--ll-radius) - 0.5rem);  /* 8px  */

  --ll-font:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'SF Pro Display',
    system-ui,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  --ll-font-mono: 'SF Mono', 'Fira Code', 'Roboto Mono', Consolas, monospace;

  --ll-navbar-height: 64px;
}

/* ------------------------------------------------------------
   2. Bootstrap variable mapping — brand tokens drive Bootstrap
   ------------------------------------------------------------ */
:root {
  --bs-body-font-family: var(--ll-font);
  --bs-body-bg: hsl(var(--ll-background));
  --bs-body-color: hsl(var(--ll-foreground));
  --bs-border-color: hsl(var(--ll-border));
  --bs-border-radius: var(--ll-radius-sm);
  --bs-border-radius-lg: var(--ll-radius-md);
  --bs-border-radius-xl: var(--ll-radius);
  --bs-link-color-rgb: 18, 18, 18;
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-secondary-color: hsl(var(--ll-muted-foreground));
  --bs-emphasis-color: hsl(var(--ll-foreground));
}

/* ------------------------------------------------------------
   3. Base & typography
   ------------------------------------------------------------ */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  padding-top: var(--ll-navbar-height);
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

.admin-bar .ll-navbar {
  top: 32px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.03em;
  color: hsl(var(--ll-foreground));
}

h1 {
  letter-spacing: -0.04em;
}

p {
  line-height: 1.65;
}

code, pre {
  font-family: var(--ll-font-mono);
}

a {
  text-decoration: none;
  transition: color 0.2s ease;
}

:focus-visible {
  outline: 2px solid hsl(var(--ll-ring));
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   4. Layout container — 1280px content width (matches src/App.css)
   ------------------------------------------------------------ */
.ll-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: max(1.25rem, env(safe-area-inset-left, 1.25rem));
}

@media (min-width: 640px) {
  .ll-container {
    padding-inline: 1.5rem;
  }
}

/* ------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------ */
.btn-ll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 0.75rem;
  background: hsl(var(--ll-primary));
  color: hsl(var(--ll-primary-foreground));
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.btn-ll:hover,
.btn-ll:focus {
  background: hsl(var(--ll-primary));
  color: hsl(var(--ll-primary-foreground));
  opacity: 0.88;
}

.btn-ll:active {
  transform: scale(0.98);
}

.btn-ll .ll-svg-icon {
  width: 1rem;
  height: 1rem;
}

.btn-ll-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1.25rem;
  border: 1px solid hsl(var(--ll-border));
  border-radius: 0.75rem;
  background: transparent;
  color: hsl(var(--ll-foreground));
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-ll-outline:hover,
.btn-ll-outline:focus {
  background: hsl(var(--ll-muted) / 0.6);
  border-color: hsl(var(--ll-border));
  color: hsl(var(--ll-foreground));
}

.btn-ll-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: hsl(var(--ll-muted-foreground));
  font-size: 0.75rem;
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.btn-ll-ghost:hover,
.btn-ll-ghost:focus {
  color: hsl(var(--ll-foreground));
  background: hsl(var(--ll-muted) / 0.5);
}

/* ------------------------------------------------------------
   6. Forms
   ------------------------------------------------------------ */
.ll-input {
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid hsl(var(--ll-input));
  border-radius: var(--ll-radius-sm);
  background: hsl(var(--ll-background));
  color: hsl(var(--ll-foreground));
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ll-input::placeholder {
  color: hsl(var(--ll-muted-foreground) / 0.6);
}

.ll-input:focus {
  outline: none;
  border-color: hsl(var(--ll-ring));
  box-shadow: 0 0 0 1px hsl(var(--ll-ring) / 0.4);
}

/* Input with a leading icon */
.ll-input-icon-wrap {
  position: relative;
}

.ll-input-icon-wrap .ll-input {
  padding-left: 2.5rem;
}

.ll-input-icon-wrap > .ll-svg-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: hsl(var(--ll-muted-foreground));
  pointer-events: none;
}

/* ------------------------------------------------------------
   7. Navbar — fixed, 64px, translucent blur (reference spec)
   ------------------------------------------------------------ */
.ll-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: hsl(var(--ll-background) / 0.8);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid hsl(var(--ll-border) / 0.3);
}

.ll-navbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--ll-navbar-height);
}

/* Brand */
.ll-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  min-width: 0;
}

.ll-brand img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex-shrink: 0;
}

.ll-brand-text {
  display: none;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}

@media (min-width: 576px) {
  .ll-brand-text {
    display: flex;
  }
}

.ll-brand-title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: hsl(var(--ll-foreground));
  white-space: nowrap;
}

.ll-brand-sub {
  display: none;
  font-size: 0.625rem;
  color: hsl(var(--ll-muted-foreground));
  letter-spacing: 0.02em;
  margin-top: 2px;
  white-space: nowrap;
}

@media (min-width: 1200px) {
  .ll-brand-sub {
    display: block;
  }
}

/* Desktop nav center */
.ll-nav-desktop {
  display: none;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

@media (min-width: 992px) {
  .ll-nav-desktop {
    display: flex;
  }
}

.ll-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: none;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: hsl(var(--ll-muted-foreground));
  transition: color 0.2s ease;
  white-space: nowrap;
}

.ll-nav-link:hover,
.ll-nav-link:focus {
  color: hsl(var(--ll-foreground));
}

.ll-nav-link.is-active {
  color: hsl(var(--ll-foreground));
}

.ll-nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 999px;
  background: hsl(var(--ll-foreground));
}

.ll-nav-link .ll-svg-icon {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.4;
}

/* Right cluster */
.ll-nav-right {
  display: none;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .ll-nav-right {
    display: flex;
  }
}

/* Navbar search — expands on focus (reference: w-40 → w-56) */
.ll-nav-search {
  display: none;
}

@media (min-width: 1200px) {
  .ll-nav-search {
    display: block;
    position: relative;
    width: 10rem;
    transition: width 0.3s ease;
  }

  .ll-nav-search:focus-within {
    width: 14rem;
  }
}

.ll-nav-search .ll-svg-icon {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  color: hsl(var(--ll-muted-foreground) / 0.5);
  pointer-events: none;
}

.ll-nav-search input {
  width: 100%;
  height: 2rem;
  padding: 0 0.75rem 0 2rem;
  border: 0;
  border-radius: 0.5rem;
  background: hsl(var(--ll-muted) / 0.6);
  color: hsl(var(--ll-foreground));
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.ll-nav-search input::placeholder {
  color: hsl(var(--ll-muted-foreground) / 0.4);
}

.ll-nav-search input:focus {
  outline: none;
  background: hsl(var(--ll-background));
  box-shadow: 0 0 0 1px hsl(var(--ll-border));
}

/* lg-only search icon button (xl hides it, shows the input instead) */
.ll-nav-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: hsl(var(--ll-muted-foreground));
  transition: color 0.2s ease, background-color 0.2s ease;
}

.ll-nav-search-btn:hover {
  color: hsl(var(--ll-foreground));
  background: hsl(var(--ll-muted) / 0.5);
}

.ll-nav-search-btn .ll-svg-icon {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 1200px) {
  .ll-nav-search-btn {
    display: none;
  }
}

/* Icon buttons (bells) */
.ll-nav-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: hsl(var(--ll-muted-foreground));
  transition: color 0.2s ease, background-color 0.2s ease;
}

.ll-nav-iconbtn:hover {
  color: hsl(var(--ll-foreground));
  background: hsl(var(--ll-muted) / 0.5);
}

.ll-nav-iconbtn .ll-svg-icon {
  width: 1rem;
  height: 1rem;
}

.ll-nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: hsl(var(--ll-destructive));
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1rem;
  text-align: center;
}

.ll-nav-divider {
  width: 1px;
  height: 1.25rem;
  background: hsl(var(--ll-border) / 0.6);
  margin-inline: 0.25rem;
}

/* Hamburger */
.ll-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  margin-right: -0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: hsl(var(--ll-foreground));
  transition: background-color 0.2s ease;
}

.ll-nav-toggle:hover {
  background: hsl(var(--ll-muted) / 0.5);
}

.ll-nav-toggle .ll-svg-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.ll-nav-toggle .ll-icon-close {
  display: none;
}

.ll-nav-toggle[aria-expanded='true'] .ll-icon-close {
  display: block;
}

.ll-nav-toggle[aria-expanded='true'] .ll-icon-open {
  display: none;
}

@media (min-width: 992px) {
  .ll-nav-toggle {
    display: none;
  }
}

/* ------------------------------------------------------------
   8. Dropdowns — restyled to match reference popovers
   ------------------------------------------------------------ */
.ll-navbar .dropdown-menu {
  --bs-dropdown-min-width: 12rem;
  --bs-dropdown-padding-x: 0.375rem;
  --bs-dropdown-padding-y: 0.375rem;
  --bs-dropdown-border-color: hsl(var(--ll-border));
  --bs-dropdown-border-radius: 0.75rem;
  --bs-dropdown-bg: hsl(var(--ll-background));
  --bs-dropdown-link-color: hsl(var(--ll-foreground));
  --bs-dropdown-link-hover-bg: hsl(var(--ll-muted));
  --bs-dropdown-link-hover-color: hsl(var(--ll-foreground));
  --bs-dropdown-link-active-bg: hsl(var(--ll-muted));
  --bs-dropdown-link-active-color: hsl(var(--ll-foreground));
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.08);
  margin-top: 0.375rem;
}

.ll-navbar .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ll-navbar .dropdown-item .ll-svg-icon {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.6;
}

.ll-nav-link .ll-chevron {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.4;
  transition: transform 0.2s ease;
}

.ll-nav-link[aria-expanded='true'] .ll-chevron {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------
   9. Mobile drawer
   ------------------------------------------------------------ */
.ll-mobile-drawer {
  background: hsl(var(--ll-background) / 0.95);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-top: 1px solid hsl(var(--ll-border) / 0.3);
}

.ll-mobile-drawer-inner {
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ll-mobile-group-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--ll-muted-foreground) / 0.6);
  margin-bottom: 0.5rem;
}

.ll-mobile-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  font-size: 0.9375rem;
  color: hsl(var(--ll-foreground) / 0.8);
  transition: color 0.2s ease;
}

.ll-mobile-link:hover {
  color: hsl(var(--ll-foreground));
}

.ll-mobile-link .ll-svg-icon {
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
}

.ll-mobile-account {
  padding-top: 0.75rem;
  border-top: 1px solid hsl(var(--ll-border) / 0.4);
}

/* ------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------ */
.ll-footer {
  border-top: 1px solid hsl(var(--ll-border) / 0.5);
  background: hsl(var(--ll-background));
  padding: 5rem 0;
}

.ll-footer .ll-brand img {
  width: 1.75rem;
  height: 1.75rem;
}

.ll-footer .ll-brand-text,
.ll-footer .ll-brand-sub {
  display: flex;
}

.ll-footer-brand-desc {
  font-size: 0.8125rem;
  color: hsl(var(--ll-muted-foreground));
  max-width: 280px;
  line-height: 1.6;
}

.ll-footer-mail {
  display: block;
  font-size: 0.8125rem;
  color: hsl(var(--ll-muted-foreground));
}

.ll-footer-mail:hover {
  color: hsl(var(--ll-foreground));
}

.ll-footer-heading {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--ll-foreground));
  margin-bottom: 1.25rem;
}

.ll-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ll-footer-links a {
  font-size: 0.8125rem;
  color: hsl(var(--ll-muted-foreground));
}

.ll-footer-links a:hover {
  color: hsl(var(--ll-foreground));
}

/* Medical disclaimer */
.ll-footer-disclaimer {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid hsl(var(--ll-border) / 0.5);
}

.ll-disclaimer-card {
  display: flex;
  gap: 1rem;
  background: hsl(var(--ll-secondary) / 0.5);
  border-radius: var(--ll-radius);
  padding: 1.5rem;
}

.ll-disclaimer-card > .ll-svg-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
  color: hsl(var(--ll-muted-foreground));
}

.ll-disclaimer-card h5 {
  font-size: 0.6875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.ll-disclaimer-card p {
  font-size: 0.6875rem;
  color: hsl(var(--ll-muted-foreground));
  line-height: 1.7;
  margin: 0;
}

.ll-footer-bottom {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 768px) {
  .ll-footer-bottom {
    flex-direction: row;
  }
}

.ll-footer-bottom p {
  font-size: 0.625rem;
  color: hsl(var(--ll-muted-foreground) / 0.5);
  margin: 0;
}

/* ------------------------------------------------------------
   11. Newsletter card (footer + quiz results)
   ------------------------------------------------------------ */
.ll-newsletter-card {
  background: hsl(var(--ll-muted) / 0.3);
  border: 1px solid hsl(var(--ll-border) / 0.5);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.ll-newsletter-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.ll-newsletter-card > p {
  font-size: 0.875rem;
  color: hsl(var(--ll-muted-foreground));
  margin-bottom: 1rem;
}

.ll-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ll-newsletter-note {
  font-size: 0.75rem;
  color: hsl(var(--ll-muted-foreground));
  text-align: center;
  margin: 0;
}

/* Honeypot — visually removed, present for bots */
.ll-hp-field {
  position: absolute;
  left: -9999px;
}

/* ------------------------------------------------------------
   12a. Disclaimer modal & cookie consent banner
   ------------------------------------------------------------ */
.ll-disclaimer-modal-content {
  border: 1px solid hsl(var(--ll-border));
  border-radius: var(--ll-radius);
  padding: 0.5rem;
}

.ll-disclaimer-modal-content .modal-body {
  padding: 1.5rem;
}

.ll-disclaimer-modal-icon {
  width: 2rem;
  height: 2rem;
  color: hsl(var(--ll-warning));
  margin-bottom: 1rem;
}

.ll-disclaimer-modal-content h2 {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.ll-disclaimer-modal-content p {
  font-size: 0.875rem;
  color: hsl(var(--ll-muted-foreground));
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.ll-cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1040;
  max-width: 640px;
  margin-inline: auto;
  background: hsl(var(--ll-card));
  border: 1px solid hsl(var(--ll-border));
  border-radius: var(--ll-radius-md);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.12);
}

.ll-cookie-banner-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

@media (min-width: 576px) {
  .ll-cookie-banner-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.ll-cookie-banner-inner p {
  font-size: 0.8125rem;
  color: hsl(var(--ll-muted-foreground));
  margin: 0;
}

.ll-cookie-banner-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   11a. Homepage sections
   ------------------------------------------------------------ */
/* Shared section primitives */
.ll-bg-muted { background: hsl(var(--ll-secondary) / 0.5); }
.ll-rotate-180 { transform: rotate(180deg); }
.ll-section-head { margin-bottom: 4rem; }
.ll-section-head--center { text-align: center; }
.ll-section-head--center .ll-section-dek { margin-left: auto; margin-right: auto; }
.ll-eyebrow { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500; color: hsl(var(--ll-muted-foreground)); margin-bottom: 1rem; }
.ll-section-title { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; }
.ll-section-dek { font-size: 0.9375rem; color: hsl(var(--ll-muted-foreground)); max-width: 28rem; margin-top: 1rem; }
.ll-section-cta { text-align: center; margin-top: 4rem; }
.btn-ll-lg { height: 3.125rem; padding: 0 2.25rem; border-radius: 999px; font-size: 0.8125rem; }
.btn-ll-lg.btn-ll-outline { border-radius: 999px; }
.btn-ll-sm { height: 2.25rem; padding: 0 1rem; font-size: 0.75rem; }

.ll-badge {
  display: inline-block; font-size: 0.6875rem; font-weight: 600;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  background: hsl(var(--ll-primary)); color: hsl(var(--ll-primary-foreground));
}
.ll-badge-muted { background: hsl(var(--ll-secondary)); color: hsl(var(--ll-muted-foreground)); border: 1px solid hsl(var(--ll-border) / 0.6); }

/* Hero — 2 column */
.ll-hero { padding: 3.5rem 0 4.5rem; }
.ll-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .ll-hero { padding: 5rem 0 6rem; } .ll-hero-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.ll-hero-copy { max-width: 32rem; }
.ll-hero-eyebrow { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500; color: hsl(var(--ll-muted-foreground)); margin-bottom: 1.5rem; }
.ll-hero-headline { font-size: clamp(2.75rem, 7vw, 5rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.04em; margin-bottom: 1.5rem; }
.ll-hero-subtitle { font-size: 1.0625rem; color: hsl(var(--ll-muted-foreground)); line-height: 1.6; max-width: 26rem; margin-bottom: 2.5rem; }
.ll-hero-buttons { display: flex; flex-wrap: wrap; gap: 0.875rem; }

.ll-hero-carousel-wrap { position: relative; }
.ll-hero-carousel { border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -20px hsl(var(--ll-foreground) / 0.15); }
.ll-hero-slide { position: relative; aspect-ratio: 4 / 3; }
.ll-hero-slide-img { width: 100%; height: 100%; object-fit: cover; }
.ll-hero-slide-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.05) 55%, transparent); }
.ll-hero-slide-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem; padding: 2.25rem; color: #fff; }
.ll-hero-slide-content h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; }
.ll-hero-slide-content p { font-size: 0.8125rem; color: rgb(255 255 255 / 0.65); max-width: 22rem; line-height: 1.5; }
.ll-hero-slide-cta { display: inline-flex; align-items: center; gap: 0.375rem; align-self: flex-start; margin-top: 0.25rem; padding: 0.4rem 1.1rem; border-radius: 999px; background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.18); backdrop-filter: blur(12px); color: #fff; font-size: 0.6875rem; font-weight: 500; }
.ll-hero-slide-cta .ll-svg-icon { width: 0.75rem; height: 0.75rem; }
.ll-hero-nav { width: 2.5rem; }
.ll-hero-dots { margin-bottom: 1rem; }
.ll-hero-dots [data-bs-target] { width: 5px; height: 5px; border-radius: 999px; background: rgb(255 255 255 / 0.4); border: 0; transition: width 0.4s ease; }
.ll-hero-dots [data-bs-target].active { width: 1.75rem; background: #fff; }

/* Start-here — dark strip */
.ll-start-here { background: hsl(var(--ll-primary)); }
.ll-start-here-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; color: hsl(var(--ll-primary-foreground)); }
.ll-start-here-left { display: flex; align-items: center; gap: 1rem; }
.ll-start-here-icon { display: inline-flex; padding: 0.625rem; border-radius: 0.75rem; background: rgb(255 255 255 / 0.08); }
.ll-start-here-icon .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-start-here-eyebrow { display: block; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: hsl(var(--ll-primary-foreground) / 0.45); }
.ll-start-here-title { display: block; font-size: 0.8125rem; font-weight: 500; margin-top: 0.1rem; }
.ll-start-here-btn { display: inline-flex; align-items: center; gap: 0.375rem; flex-shrink: 0; padding: 0.4rem 1.15rem; border-radius: 999px; background: #fff; color: hsl(var(--ll-primary)); font-size: 0.6875rem; font-weight: 500; }
.ll-start-here-btn .ll-svg-icon { width: 0.75rem; height: 0.75rem; }

/* Crowd favorites cards */
.ll-crowd-card { display: block; height: 100%; border-radius: 24px; overflow: hidden; background: hsl(var(--ll-secondary) / 0.5); border: 1px solid hsl(var(--ll-border) / 0.5); color: hsl(var(--ll-foreground)); transition: box-shadow 0.4s ease; }
.ll-crowd-card:hover { box-shadow: 0 18px 40px -12px hsl(var(--ll-foreground) / 0.08); }
.ll-crowd-card-visual { height: 180px; overflow: hidden; }
.ll-crowd-card-body { padding: 0 2rem 2rem; }
.ll-crowd-card-subtitle { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: hsl(var(--ll-muted-foreground)); margin-bottom: 0.75rem; }
.ll-crowd-card-title { font-size: 1.375rem; font-weight: 600; margin-bottom: 0.75rem; }
.ll-crowd-card-desc { font-size: 0.875rem; color: hsl(var(--ll-muted-foreground)); line-height: 1.6; margin-bottom: 1.5rem; }
.ll-crowd-card-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; }
.ll-crowd-card-cta .ll-svg-icon { width: 0.875rem; height: 0.875rem; }

/* Browse by goal cards */
.ll-goal-card { display: block; height: 100%; border-radius: 24px; overflow: hidden; background: hsl(var(--ll-background)); border: 1px solid hsl(var(--ll-border) / 0.5); color: hsl(var(--ll-foreground)); transition: box-shadow 0.4s ease; }
.ll-goal-card:hover { box-shadow: 0 18px 40px -12px hsl(var(--ll-foreground) / 0.08); }
.ll-goal-card-visual { height: 140px; overflow: hidden; }
.ll-goal-card-body { padding: 0 1.75rem 1.75rem; }
.ll-goal-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.ll-goal-card-top h3 { font-size: 1.0625rem; font-weight: 600; }
.ll-goal-card-count { font-size: 0.625rem; font-weight: 500; color: hsl(var(--ll-muted-foreground)); background: hsl(var(--ll-secondary) / 0.8); border: 1px solid hsl(var(--ll-border) / 0.5); padding: 0.1rem 0.625rem; border-radius: 999px; }
.ll-goal-card-bottom { display: flex; align-items: center; justify-content: space-between; }
.ll-goal-card-bottom p { font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); margin: 0; }
.ll-goal-card-arrow { width: 0.875rem; height: 0.875rem; color: hsl(var(--ll-foreground) / 0.25); }

/* How peptides work */
.ll-hpw-pillnav { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; padding: 0.375rem; border-radius: 1rem; background: hsl(var(--ll-secondary)); }
.ll-hpw-tabs { text-align: center; }
.ll-hpw-pill { border: 0; background: none; padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-size: 0.8125rem; font-weight: 500; color: hsl(var(--ll-muted-foreground)); }
.ll-hpw-pill.active { background: hsl(var(--ll-background)); color: hsl(var(--ll-foreground)); box-shadow: 0 1px 3px rgb(0 0 0 / 0.06); border: 1px solid hsl(var(--ll-border) / 0.6); }
.ll-hpw-desc { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); margin: 2rem 0; }
.ll-hpw-card { max-width: 48rem; margin: 0 auto; padding: 2.5rem; border-radius: var(--ll-radius); border: 1px solid hsl(var(--ll-border) / 0.6); background: hsl(var(--ll-secondary) / 0.35); }
.ll-diagram svg { width: 100%; height: auto; max-height: 220px; }

/* What people are reading */
.ll-reading-grid { max-width: 60rem; margin-inline: auto; }
.ll-reading-card { display: block; height: 100%; padding: 1.75rem; border-radius: 1rem; border: 1px solid hsl(var(--ll-border) / 0.6); background: hsl(var(--ll-background)); color: hsl(var(--ll-foreground)); transition: background-color 0.3s ease; }
.ll-reading-card:hover { background: hsl(var(--ll-secondary) / 0.3); }
.ll-reading-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.ll-reading-rank { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: hsl(var(--ll-primary)); color: hsl(var(--ll-primary-foreground)); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; }
.ll-reading-type { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.625rem; padding: 0.15rem 0.5rem; border: 1px solid hsl(var(--ll-border) / 0.6); border-radius: 999px; color: hsl(var(--ll-muted-foreground)); }
.ll-reading-type .ll-svg-icon { width: 0.75rem; height: 0.75rem; }
.ll-reading-name { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.375rem; }
.ll-reading-cat { font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); margin-bottom: 1rem; }
.ll-reading-desc { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); line-height: 1.6; margin-bottom: 1.5rem; }
.ll-reading-foot { display: flex; align-items: center; justify-content: space-between; font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); padding-top: 1.25rem; border-top: 1px solid hsl(var(--ll-border) / 0.5); }
.ll-reading-foot .ll-svg-icon { width: 0.875rem; height: 0.875rem; }

/* Built to be clear */
.ll-guides-features { display: flex; flex-direction: column; gap: 2rem; margin-top: 3rem; }
.ll-guides-feature { display: flex; align-items: flex-start; gap: 1.25rem; }
.ll-guides-feature-icon { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 14px; background: hsl(var(--ll-background)); border: 1px solid hsl(var(--ll-border) / 0.6); display: flex; align-items: center; justify-content: center; }
.ll-guides-feature-icon .ll-svg-icon { width: 1.125rem; height: 1.125rem; }
.ll-guides-feature h3 { font-size: 0.9375rem; font-weight: 500; margin-bottom: 0.375rem; }
.ll-guides-feature p { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); line-height: 1.6; }
.ll-stats-card { position: relative; background: hsl(var(--ll-background)); border: 1px solid hsl(var(--ll-border) / 0.6); border-radius: 28px; padding: 3rem; text-align: center; }
.ll-stats-big { font-size: 5rem; font-weight: 700; line-height: 1; }
.ll-stats-label { font-size: 1.0625rem; color: hsl(var(--ll-muted-foreground)); margin-top: 0.5rem; }
.ll-stats-blurb { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); max-width: 18rem; margin: 2.5rem auto; line-height: 1.6; }
.ll-stats-row { display: flex; justify-content: center; gap: 3rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--ll-border) / 0.5); }
.ll-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; background: hsl(var(--ll-foreground) / 0.05); border: 1px solid hsl(var(--ll-border) / 0.5); margin-bottom: 0.5rem; }
.ll-stat-icon .ll-svg-icon { width: 1rem; height: 1rem; color: hsl(var(--ll-foreground) / 0.5); }
.ll-stat-n { display: block; font-size: 1.75rem; font-weight: 600; }
.ll-stat-l { display: block; font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); margin-top: 0.25rem; }

/* Testimonials */
.ll-testimonials-row { max-width: 60rem; margin-inline: auto; }
.ll-testimonial-col { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; }
.ll-testimonial-photo { width: 4.5rem; height: 4.5rem; border-radius: 999px; object-fit: cover; margin-bottom: 1.75rem; }
.ll-testimonial-quote { font-size: 0.875rem; font-style: italic; color: hsl(var(--ll-foreground) / 0.75); line-height: 1.7; margin-bottom: 1.75rem; }
.ll-testimonial-attr { margin-top: auto; }
.ll-testimonial-name { font-size: 0.8125rem; font-weight: 600; }
.ll-testimonial-role { font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); margin-top: 0.25rem; }
.ll-testimonials-disclaimer { text-align: center; font-size: 0.625rem; color: hsl(var(--ll-muted-foreground) / 0.6); max-width: 28rem; margin: 4rem auto 0; }

/* Fresh reads */
.ll-fresh-card { display: flex; flex-direction: column; height: 100%; padding: 2rem; border-radius: 1rem; border: 1px solid hsl(var(--ll-border) / 0.6); background: hsl(var(--ll-background)); color: hsl(var(--ll-foreground)); transition: border-color 0.3s ease; }
.ll-fresh-card:hover { border-color: hsl(var(--ll-foreground) / 0.15); }
.ll-fresh-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.ll-fresh-tag { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500; color: hsl(var(--ll-muted-foreground)); }
.ll-fresh-time { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.625rem; color: hsl(var(--ll-muted-foreground)); }
.ll-fresh-time .ll-svg-icon { width: 0.75rem; height: 0.75rem; }
.ll-fresh-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; }
.ll-fresh-desc { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); line-height: 1.6; margin-bottom: 1.75rem; flex-grow: 1; }
.ll-fresh-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; }
.ll-fresh-cta .ll-svg-icon { width: 0.875rem; height: 0.875rem; }

/* Peptide card (catalog/related) */
.ll-peptide-card {
  display: block; height: 100%; padding: 1.25rem; border-radius: var(--ll-radius-md);
  border: 1px solid hsl(var(--ll-border)); background: hsl(var(--ll-card)); color: hsl(var(--ll-foreground));
  transition: box-shadow 0.2s ease;
}
.ll-peptide-card:hover { box-shadow: 0 10px 24px rgb(0 0 0 / 0.07); }
.ll-peptide-card-badges { display: flex; gap: 0.375rem; margin-bottom: 0.625rem; }
.ll-peptide-card-title { font-size: 0.9375rem; margin-bottom: 0.375rem; }
.ll-peptide-card-dosage { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); margin-bottom: 0.5rem; }
.ll-peptide-card-benefits { list-style: none; padding: 0; margin: 0; font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); }
.ll-peptide-card-benefits li::before { content: '• '; color: hsl(var(--ll-accent)); }

/* Article card (grid/blog) */
.ll-article-card { display: block; height: 100%; border-radius: var(--ll-radius-md); overflow: hidden; border: 1px solid hsl(var(--ll-border)); background: hsl(var(--ll-card)); color: hsl(var(--ll-foreground)); }
.ll-article-card-media img { width: 100%; height: 160px; object-fit: cover; }
.ll-article-card-body { padding: 1.25rem; }
.ll-article-card-body h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.ll-article-card-body p { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); margin-bottom: 0.75rem; }
.ll-article-card-meta { font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); text-transform: uppercase; letter-spacing: 0.05em; }
.ll-article-card--featured { background: linear-gradient(135deg, hsl(var(--ll-accent) / 0.08), hsl(var(--ll-card))); }

/* Accordion (FAQ) */
.ll-accordion .accordion-item { border: 0; border-bottom: 1px solid hsl(var(--ll-border) / 0.5); background: none; }
.ll-accordion .accordion-button { background: none; font-weight: 500; font-size: 0.9375rem; padding: 1.5rem 0; box-shadow: none; }
.ll-accordion .accordion-button:not(.collapsed) { color: hsl(var(--ll-foreground)); }
.ll-accordion .accordion-button::after { width: 1rem; height: 1rem; background-size: 1rem; }
.ll-accordion .accordion-body { padding: 0 0 1.5rem; color: hsl(var(--ll-muted-foreground)); font-size: 0.8125rem; line-height: 1.7; }
.ll-faq-accordion { max-width: 40rem; margin: 0 auto; }
.ll-faq-more { text-align: center; font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); margin-top: 3.5rem; }
.ll-faq-more a { color: hsl(var(--ll-foreground)); text-decoration: underline; text-underline-offset: 4px; }

/* Visual CTA — light with faint molecular bg */
.ll-cta { position: relative; overflow: hidden; padding: 8rem 0; }
.ll-cta-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.55; pointer-events: none; }
.ll-cta-bg .ll-molecular-hero-svg { width: min(800px, 120vw); height: auto; }
.ll-cta-content { position: relative; max-width: 38rem; margin: 0 auto; text-align: center; }
.ll-cta-content h2 { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 600; letter-spacing: -0.03em; margin-bottom: 1.5rem; }
.ll-cta-content p { font-size: 1.0625rem; color: hsl(var(--ll-muted-foreground)); line-height: 1.6; margin-bottom: 3rem; }
.ll-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* Chat widget */
.ll-chat-widget { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1050; }
.ll-chat-toggle {
  width: 3.25rem; height: 3.25rem; border-radius: 999px; border: 0;
  background: hsl(var(--ll-primary)); color: hsl(var(--ll-primary-foreground));
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
  cursor: pointer; transition: transform 0.15s ease;
}
.ll-chat-toggle:hover { transform: scale(1.05); }
.ll-chat-toggle .ll-chat-icon-close { display: none; }
.ll-chat-toggle[aria-expanded="true"] .ll-chat-icon-open { display: none; }
.ll-chat-toggle[aria-expanded="true"] .ll-chat-icon-close { display: inline-block; }

.ll-chat-panel {
  position: absolute; right: 0; bottom: 4rem; width: 23.75rem; height: 35rem;
  max-width: calc(100vw - 2.5rem); max-height: calc(100vh - 7rem);
  border-radius: var(--ll-radius); border: 1px solid hsl(var(--ll-border)); background: hsl(var(--ll-card));
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.18); overflow: hidden;
  display: flex; flex-direction: column;
}

.ll-chat-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1rem; flex-shrink: 0;
  background: hsl(var(--ll-primary)); color: hsl(var(--ll-primary-foreground));
}
.ll-chat-panel-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9375rem; }
.ll-chat-panel-title .ll-svg-icon { width: 1.125rem; height: 1.125rem; }
.ll-chat-close { border: 0; background: none; padding: 0.25rem; color: hsl(var(--ll-primary-foreground) / 0.85); cursor: pointer; }
.ll-chat-close:hover { color: hsl(var(--ll-primary-foreground)); }

.ll-chat-disclaimer {
  display: flex; gap: 0.5rem; align-items: flex-start; flex-shrink: 0;
  padding: 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1.4;
  background: hsl(38 92% 95%); color: hsl(32 81% 29%); border-bottom: 1px solid hsl(38 80% 85%);
}
.ll-chat-disclaimer .ll-svg-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; margin-top: 0.125rem; }

.ll-chat-messages {
  flex: 1 1 auto; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.875rem;
}

.ll-chat-empty { margin: auto 0; text-align: center; }
.ll-chat-empty > p { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); margin: 0 0 0.875rem; }
.ll-chat-suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ll-chat-suggestion {
  border: 1px solid hsl(var(--ll-border)); background: hsl(var(--ll-muted) / 0.6);
  border-radius: var(--ll-radius-sm); padding: 0.5rem 0.625rem; font-size: 0.75rem; text-align: left;
  cursor: pointer; transition: background-color 0.15s ease;
}
.ll-chat-suggestion:hover { background: hsl(var(--ll-muted)); }

.ll-chat-row { display: flex; align-items: flex-end; gap: 0.5rem; }
.ll-chat-row--user { justify-content: flex-end; }
.ll-chat-avatar {
  width: 1.75rem; height: 1.75rem; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ll-chat-row--assistant .ll-chat-avatar { background: hsl(var(--ll-primary) / 0.12); color: hsl(var(--ll-primary)); }
.ll-chat-row--user .ll-chat-avatar { background: hsl(var(--ll-primary)); color: hsl(var(--ll-primary-foreground)); }
.ll-chat-avatar svg { width: 1rem; height: 1rem; }

.ll-chat-bubble {
  max-width: 78%; padding: 0.625rem 0.75rem; border-radius: 1rem; font-size: 0.8125rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.ll-chat-row--assistant .ll-chat-bubble { background: hsl(var(--ll-muted)); border-bottom-left-radius: 0.25rem; }
.ll-chat-row--user .ll-chat-bubble { background: hsl(var(--ll-primary)); color: hsl(var(--ll-primary-foreground)); border-bottom-right-radius: 0.25rem; }

.ll-chat-row--error {
  align-self: center; font-size: 0.75rem; color: hsl(0 72% 42%);
  background: hsl(0 86% 97%); border: 1px solid hsl(0 80% 88%);
  padding: 0.5rem 0.75rem; border-radius: var(--ll-radius-sm); text-align: center;
}

.ll-chat-bubble--loading { display: flex; align-items: center; gap: 0.25rem; padding: 0.75rem; }
.ll-chat-dot {
  width: 0.375rem; height: 0.375rem; border-radius: 999px; background: hsl(var(--ll-muted-foreground) / 0.5);
  animation: ll-chat-bounce 1.2s infinite ease-in-out;
}
.ll-chat-dot:nth-child(2) { animation-delay: 0.15s; }
.ll-chat-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes ll-chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-0.1875rem); opacity: 1; }
}

.ll-chat-form { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid hsl(var(--ll-border)); flex-shrink: 0; }
.ll-chat-input {
  flex: 1 1 auto; min-width: 0; border: 1px solid hsl(var(--ll-border)); border-radius: var(--ll-radius-sm);
  padding: 0.5rem 0.75rem; font-size: 0.8125rem; background: hsl(var(--ll-background));
}
.ll-chat-input:focus { outline: 2px solid hsl(var(--ll-primary) / 0.35); outline-offset: 1px; }
.ll-chat-send {
  width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: var(--ll-radius-sm); border: 0;
  background: hsl(var(--ll-primary)); color: hsl(var(--ll-primary-foreground));
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ll-chat-send:disabled { opacity: 0.6; cursor: default; }
.ll-chat-send .ll-chat-loading-icon { display: none; animation: ll-chat-spin 0.8s linear infinite; }
.is-loading .ll-chat-send-icon { display: none; }
.is-loading .ll-chat-loading-icon { display: inline-block; }
@keyframes ll-chat-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .ll-chat-panel { width: calc(100vw - 2.5rem); height: calc(100vh - 7rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ll-chat-toggle { transition: none; }
  .ll-chat-dot, .ll-chat-loading-icon { animation: none; }
}

/* ------------------------------------------------------------
   11b. Peptide detail page
   ------------------------------------------------------------ */
.scroll-mt { scroll-margin-top: calc(var(--ll-navbar-height) + 1.5rem); }

/* Hero — dark slate gradient with white text, per reference PeptideDetail hero */
.ll-peptide-hero {
  background: linear-gradient(to bottom, hsl(217 33% 17%), hsl(215 25% 27%));
  color: #fff;
  padding: 2.5rem 0 3rem;
}
.ll-peptide-back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: hsl(215 20% 75%); font-size: 0.875rem; font-weight: 500;
  margin-bottom: 1.5rem; text-decoration: none;
}
.ll-peptide-back:hover { color: #fff; }
.ll-peptide-hero-badges { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.ll-badge-hero {
  background: hsl(215 19% 35% / 0.5); border: 1px solid hsl(215 16% 47%);
  color: #fff;
}
.ll-peptide-hero-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ll-peptide-hero-row h1 { font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 700; margin: 0; color: #fff; }
.ll-peptide-hero-actions { display: flex; align-items: center; gap: 0.5rem; }
.ll-btn-hero {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: var(--ll-radius-sm);
  background: hsl(215 19% 35% / 0.5); border: 1px solid hsl(215 16% 47%);
  color: #fff; font-size: 0.875rem; font-weight: 500;
}
.ll-btn-hero:hover { background: hsl(215 16% 47% / 0.5); color: #fff; }

/* Tools callout — centered muted pill bar ("🧰 Tools:"), per reference */
.ll-tools-callout {
  max-width: 896px; margin: 2rem auto 0;
  background: hsl(var(--ll-muted) / 0.6); border: 1px solid hsl(var(--ll-border));
  border-radius: var(--ll-radius-md); padding: 0.75rem 1rem;
}
.ll-tools-row { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ll-tools-row::-webkit-scrollbar { display: none; }
.ll-tools-label { font-size: 0.875rem; font-weight: 500; color: hsl(var(--ll-muted-foreground)); white-space: nowrap; flex-shrink: 0; margin-right: 0.25rem; }
.ll-tool-btn {
  display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; flex-shrink: 0;
  padding: 0.375rem 0.75rem; border-radius: var(--ll-radius-sm); border: 1px solid hsl(var(--ll-border));
  background: hsl(var(--ll-card)); color: hsl(var(--ll-foreground)); font-size: 0.75rem; font-weight: 500;
}
.ll-tool-btn:hover { background: hsl(var(--ll-muted) / 0.6); }
.ll-tool-btn--primary { background: hsl(var(--ll-primary)); border-color: hsl(var(--ll-primary)); color: hsl(var(--ll-primary-foreground)); }
.ll-tool-btn--primary:hover { background: hsl(var(--ll-primary) / 0.85); color: hsl(var(--ll-primary-foreground)); }

.ll-simplify-text { margin: 1rem auto 0; max-width: 896px; padding: 1rem 1.25rem; background: hsl(var(--ll-accent) / 0.08); border-radius: var(--ll-radius-sm); }

.ll-toc { position: sticky; top: calc(var(--ll-navbar-height) + 1.5rem); font-size: 0.8125rem; }
.ll-toc-label { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); margin-bottom: 0.75rem; }
.ll-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid hsl(var(--ll-border)); }
.ll-toc a { display: block; padding: 0.375rem 0 0.375rem 0.875rem; color: hsl(var(--ll-muted-foreground)); margin-left: -2px; border-left: 2px solid transparent; }
.ll-toc a.is-active { color: hsl(var(--ll-foreground)); font-weight: 600; border-left-color: hsl(var(--ll-foreground)); }

/* Page body — light gray canvas with white section cards, per reference (bg-slate-50 + Cards) */
.ll-peptide-page { background: hsl(var(--ll-muted) / 0.45); }
.ll-peptide-body { padding: 3rem 1.25rem; }

.ll-peptide-section {
  background: hsl(var(--ll-card)); border: 1px solid hsl(var(--ll-border));
  border-radius: var(--ll-radius-md); padding: 1.5rem;
  margin-bottom: 2rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.ll-peptide-main > .ll-peptide-section:last-child { margin-bottom: 0; }
.ll-peptide-section h2 { font-size: 1.375rem; margin-bottom: 1.25rem; }
.ll-peptide-lede { font-size: 1.0625rem; color: hsl(var(--ll-muted-foreground)); margin-bottom: 1.5rem; }

/* Right sidebar — stacked cards, per reference sidebar column */
.ll-peptide-sidebar { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.ll-side-card {
  background: hsl(var(--ll-card)); border: 1px solid hsl(var(--ll-border));
  border-radius: var(--ll-radius-md); padding: 1.25rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.ll-side-card-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.0625rem; font-weight: 600; margin: 0 0 1rem;
}
.ll-side-card-title .ll-svg-icon { width: 1.125rem; height: 1.125rem; color: hsl(var(--ll-muted-foreground)); }
.ll-side-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0; font-size: 0.875rem; }
.ll-side-stat-label { color: hsl(var(--ll-muted-foreground)); }
.ll-side-stat-value { font-weight: 500; text-align: right; }
.ll-side-stat-link { display: inline-flex; align-items: center; gap: 0.25rem; color: hsl(var(--ll-foreground)); }
.ll-side-stat-link:hover { text-decoration: underline; }
.ll-side-stat-link .ll-svg-icon { width: 0.75rem; height: 0.75rem; }
.ll-side-divider { margin: 0.75rem 0; border-color: hsl(var(--ll-border)); opacity: 1; }

.ll-molecule-img { background: hsl(var(--ll-muted) / 0.4); border: 1px solid hsl(var(--ll-border) / 0.6); border-radius: var(--ll-radius-sm); padding: 1rem; margin-bottom: 1rem; }
.ll-molecule-img img { display: block; max-width: 100%; max-height: 12rem; margin: 0 auto; object-fit: contain; }

.ll-side-benefits { list-style: none; margin: 0; padding: 0; }
.ll-side-benefits li { position: relative; padding: 0.25rem 0 0.25rem 1rem; font-size: 0.9375rem; }
.ll-side-benefits li::before { content: ""; position: absolute; left: 0; top: 0.875rem; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: hsl(var(--ll-muted-foreground) / 0.6); }
.ll-side-benefits a { color: hsl(var(--ll-foreground)); }
.ll-side-benefits a:hover { text-decoration: underline; }

.ll-popularity-head { padding-bottom: 0.25rem; }
.ll-popularity-track { height: 0.5rem; background: hsl(var(--ll-muted)); border-radius: 999px; overflow: hidden; }
.ll-popularity-fill { height: 100%; background: linear-gradient(to right, hsl(215 19% 35%), hsl(215 16% 57%)); border-radius: 999px; }

.ll-simple-info-stack { display: flex; flex-direction: column; gap: 1rem; }
.ll-simple-info-stack .ll-info-card { text-align: left; background: hsl(var(--ll-card)); border: 1px solid hsl(var(--ll-border)); }

.ll-simple-info-grid { margin-top: 1rem; }
.ll-info-card { padding: 1rem; border-radius: var(--ll-radius-sm); background: hsl(var(--ll-muted) / 0.4); text-align: center; }
.ll-info-card-label { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--ll-muted-foreground)); margin-bottom: 0.25rem; }
.ll-info-card-value { display: block; font-size: 0.9375rem; font-weight: 600; }

.ll-dosing-table th { font-size: 0.75rem; text-transform: uppercase; color: hsl(var(--ll-muted-foreground)); }
.ll-dosing-table td, .ll-dosing-table th { font-variant-numeric: tabular-nums; }

.ll-diagram-timeline-labels { display: flex; justify-content: space-between; font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); padding: 0 20px; margin-top: 0.25rem; }

.ll-supply-card { display: flex; gap: 1rem; padding: 1rem; border: 1px solid hsl(var(--ll-border)); border-radius: var(--ll-radius-sm); }
.ll-supply-card-img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--ll-radius-sm); flex-shrink: 0; }
.ll-supply-card-body h4 { font-size: 0.9375rem; margin-bottom: 0.5rem; }
.ll-supply-quantities { list-style: none; padding: 0; margin: 0 0 0.5rem; font-size: 0.8125rem; }
.ll-supply-quantities li { display: flex; justify-content: space-between; gap: 1rem; color: hsl(var(--ll-muted-foreground)); }
.ll-supply-quantities li strong { color: hsl(var(--ll-foreground)); }
.ll-supply-link { font-size: 0.8125rem; font-weight: 600; color: hsl(var(--ll-accent)); }

.ll-chip-list { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; }
.ll-side-effects-list { color: hsl(var(--ll-muted-foreground)); }

.ll-study-card { padding: 1.25rem; border: 1px solid hsl(var(--ll-border)); border-radius: var(--ll-radius-sm); margin-bottom: 1rem; }
.ll-study-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.375rem; }
.ll-study-card-head h4 { font-size: 0.9375rem; margin: 0; }
.ll-study-authors { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); font-style: italic; }
.ll-study-link { font-size: 0.8125rem; font-weight: 600; color: hsl(var(--ll-accent)); display: inline-flex; align-items: center; gap: 0.25rem; }

.ll-interaction-card { display: flex; gap: 0.75rem; padding: 1rem 1.25rem; border: 1px solid hsl(var(--ll-border)); border-radius: var(--ll-radius-sm); margin-bottom: 0.75rem; }
.ll-interaction-card a { font-weight: 600; margin-left: 0.5rem; }
.ll-interaction-card--warning { border-color: hsl(var(--ll-destructive) / 0.4); background: hsl(var(--ll-destructive) / 0.05); color: hsl(var(--ll-destructive)); }
.ll-badge-danger { background: hsl(var(--ll-destructive)); color: #fff; }

/* Community Insights — tinted sidebar card, lists stacked vertically */
.ll-community-insights { background: hsl(var(--ll-accent) / 0.05); }
.ll-community-insights-summary { font-size: 0.875rem; margin-bottom: 1rem; }
.ll-community-insights h4 { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: hsl(var(--ll-muted-foreground)); margin: 1rem 0 0.375rem; }
.ll-community-insights ul { margin: 0; padding-left: 1.125rem; font-size: 0.875rem; }
.ll-community-insights li { margin-bottom: 0.25rem; }
.ll-community-insights-sources { font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); margin: 1rem 0 0; }

/* Amber sidebar disclaimer card, per reference ("Heads up" card) */
.ll-peptide-disclaimer { margin: 0; background: hsl(45 93% 95%); border: 1px solid hsl(45 86% 78%); border-radius: var(--ll-radius-md); }
.ll-peptide-disclaimer h5 { color: hsl(28 74% 26%); }
.ll-peptide-disclaimer p { color: hsl(28 64% 32%); font-size: 0.75rem; margin: 0; }

/* Category visual */
.ll-category-visual-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 999px; background: hsl(var(--ll-accent) / 0.12); color: hsl(var(--ll-accent));
}
.ll-category-visual-badge .ll-svg-icon { width: 1.5rem; height: 1.5rem; }

/* Simplified-mode diagram hiding */
.is-simplified .ll-hide-when-simplified { display: none; }

/* Share dropdown reuses .dropdown-menu styling from the navbar rules */

/* Calculator — full section (two columns) + card (reused on peptide pages) */
.ll-calc-section-row { max-width: 960px; margin-inline: auto; }
.ll-calc-heading { font-size: 2rem; }
.ll-calc-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.ll-calc-step { display: flex; align-items: flex-start; gap: 1rem; }
.ll-calc-step-num {
  flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 999px;
  background: hsl(var(--ll-secondary)); color: hsl(var(--ll-foreground));
  font-size: 0.6875rem; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.ll-calc-step-text { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); line-height: 1.5; padding-top: 0.25rem; }

.ll-calc-card { border: 1px solid hsl(var(--ll-border) / 0.6); border-radius: var(--ll-radius); background: hsl(var(--ll-background)); padding: 2.25rem; }
.ll-calc-card--compact { padding: 1.5rem; }
.ll-calc-card-title { display: flex; align-items: center; gap: 0.625rem; font-size: 1.0625rem; font-weight: 600; margin: 0 0 1.75rem; }
.ll-calc-card--compact .ll-calc-card-title { font-size: 0.9375rem; margin-bottom: 1.25rem; }
.ll-calc-card-title .ll-svg-icon { width: 1.125rem; height: 1.125rem; color: hsl(var(--ll-muted-foreground)); }
.ll-calc-fields { display: flex; flex-direction: column; gap: 1.5rem; }
.ll-calc-card--compact .ll-calc-fields { gap: 1rem; }
.ll-calc-field { display: flex; flex-direction: column; gap: 0.625rem; }
.ll-calc-label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; color: hsl(var(--ll-muted-foreground)); }
.ll-calc-inline { display: flex; gap: 0.5rem; }
.ll-calc-input {
  width: 100%; height: 3rem; padding: 0 0.875rem; border: 0; border-radius: 0.75rem;
  background: hsl(var(--ll-secondary) / 0.4); color: hsl(var(--ll-foreground)); font-size: 0.875rem;
}
.ll-calc-card--compact .ll-calc-input { height: 2.5rem; font-size: 0.8125rem; }
.ll-calc-input:focus { outline: none; box-shadow: 0 0 0 1px hsl(var(--ll-ring) / 0.4); background: hsl(var(--ll-background)); }
.ll-calc-unit { flex: 0 0 5rem; }
.ll-calc-btn { height: 3rem; margin-top: 0.25rem; }
.ll-calc-card--compact .ll-calc-btn { height: 2.5rem; }
.ll-calc-result { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1.5rem; border-radius: var(--ll-radius-md); background: hsl(var(--ll-secondary) / 0.5); text-align: center; }
.ll-calc-result-cell { display: flex; flex-direction: column; gap: 0.25rem; }
.ll-calc-result-value { font-size: 1.75rem; font-weight: 600; color: hsl(var(--ll-foreground)); font-variant-numeric: tabular-nums; }
.ll-calc-card--compact .ll-calc-result-value { font-size: 1.375rem; }
.ll-calc-result-label { font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); }

/* ------------------------------------------------------------
   12. 404 page
   ------------------------------------------------------------ */
.ll-error-page {
  min-height: calc(100vh - var(--ll-navbar-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.25rem;
}

.ll-error-code {
  font-size: clamp(5rem, 15vw, 9rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(to right, hsl(var(--ll-foreground)), hsl(var(--ll-muted-foreground)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ll-error-page h1 {
  font-size: 1.5rem;
  margin: 1.5rem 0 0.75rem;
}

.ll-error-page p {
  font-size: 0.9375rem;
  color: hsl(var(--ll-muted-foreground));
  max-width: 26rem;
  margin-bottom: 2rem;
}

.ll-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ------------------------------------------------------------
   13. Utilities — ported from reference @layer utilities
   ------------------------------------------------------------ */
.ll-svg-icon {
  display: inline-block;
  vertical-align: middle;
}

.ll-glass {
  background: hsl(var(--ll-card) / 0.8);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid hsl(var(--ll-border) / 0.5);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.ll-section-spacing {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

@media (min-width: 768px) {
  .ll-section-spacing {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
}

.ll-section-heading {
  font-size: 0.875rem;
  color: hsl(var(--ll-muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
  margin-bottom: 1rem;
}

.ll-section-title {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: hsl(var(--ll-foreground));
}

@media (min-width: 768px) {
  .ll-section-title {
    font-size: 3rem;
  }
}

.ll-text-gradient {
  background: linear-gradient(to right, hsl(var(--ll-foreground)), hsl(var(--ll-muted-foreground)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ll-glow-accent {
  box-shadow: 0 0 60px -15px hsl(var(--ll-accent) / 0.25);
}

.ll-text-muted {
  color: hsl(var(--ll-muted-foreground));
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background: hsl(var(--ll-primary));
  color: hsl(var(--ll-primary-foreground));
  font-size: 0.8125rem;
  border-radius: 0 0 0.5rem 0;
}

/* ------------------------------------------------------------
   14. Small fills — classes referenced by section templates
   ------------------------------------------------------------ */
.ll-guides-row { --bs-gutter-y: 3rem; }

.ll-stat { text-align: center; }
.ll-stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; margin: 0 auto 0.5rem;
  border-radius: 0.75rem; background: hsl(var(--ll-foreground) / 0.05);
  border: 1px solid hsl(var(--ll-border) / 0.5); color: hsl(var(--ll-foreground) / 0.5);
}
.ll-stat-icon .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-stat-n { display: block; font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ll-stat-l { display: block; font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); margin-top: 0.25rem; }

.ll-start-here-text { color: hsl(var(--ll-muted-foreground)); }

/* ------------------------------------------------------------
   15. SVG animations — the diagrams and decorative visuals were
   static ports of framer-motion originals; these restore motion
   using CSS only.

   Pattern: animations are defined unconditionally and DISABLED
   under `prefers-reduced-motion: reduce` (see the guard at the
   end of this section). This is deliberate — gating them behind
   `no-preference` instead means they silently never run on the
   many Windows setups where "Show animations" is off, which was
   the original bug. Motion is also made clearly perceptible:
   the source art has very low fill-opacity (0.04–0.12), so a
   plain opacity fade is invisible — these use scale + a visible
   opacity floor, plus a whole-SVG breathe. */

@keyframes ll-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.045) translateY(-5px); }
}

@keyframes ll-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.6); opacity: 1; }
}

@keyframes ll-node-pulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%      { transform: scale(1.25); opacity: 1; }
}

@keyframes ll-drift {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(8px, -10px); }
  66%      { transform: translate(-7px, 6px); }
}

@keyframes ll-dash-flow {
  to { stroke-dashoffset: -24; }
}

/* Explanatory diagrams (How Peptides Work + peptide-detail set):
   nodes pulse in sequence; dashed connectors flow. */
.ll-diagram svg circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: ll-node-pulse 3s ease-in-out infinite;
}
.ll-diagram svg circle:nth-of-type(2) { animation-delay: 0.3s; }
.ll-diagram svg circle:nth-of-type(3) { animation-delay: 0.6s; }
.ll-diagram svg circle:nth-of-type(4) { animation-delay: 0.9s; }
.ll-diagram svg circle:nth-of-type(5) { animation-delay: 1.2s; }
.ll-diagram svg circle:nth-of-type(6) { animation-delay: 1.5s; }
.ll-diagram svg line[stroke-dasharray] {
  animation: ll-dash-flow 1.2s linear infinite;
}

/* Decorative "Crowd favorites" + "Browse by goal" card art: the whole SVG
   slowly breathes (clearly visible even with faint art), accent dots pulse. */
.ll-protocol-visual svg,
.ll-category-abstract svg {
  transform-box: fill-box;
  transform-origin: center;
  animation: ll-breathe 7s ease-in-out infinite;
}
.ll-protocol-visual svg circle,
.ll-category-abstract svg circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: ll-dot-pulse 3.5s ease-in-out infinite;
}
.ll-protocol-visual svg circle:nth-of-type(even),
.ll-category-abstract svg circle:nth-of-type(even) { animation-delay: 0.8s; }
.ll-protocol-visual svg circle:nth-of-type(3n),
.ll-category-abstract svg circle:nth-of-type(3n) { animation-delay: 1.6s; }

/* Molecular-hero background (Visual CTA): particles drift. */
.ll-molecular-hero-svg circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: ll-drift 14s ease-in-out infinite;
}
.ll-molecular-hero-svg circle:nth-of-type(even) { animation-duration: 18s; animation-delay: 2s; }
.ll-molecular-hero-svg circle:nth-of-type(3n)   { animation-duration: 22s; animation-delay: 4s; }

/* Category badge on the peptide detail page: gentle float. */
.ll-category-visual-badge { animation: ll-breathe 6s ease-in-out infinite; }

/* Honor an explicit reduced-motion preference — kill all of the above. */
@media (prefers-reduced-motion: reduce) {
  .ll-diagram svg circle,
  .ll-diagram svg line[stroke-dasharray],
  .ll-protocol-visual svg,
  .ll-category-abstract svg,
  .ll-protocol-visual svg circle,
  .ll-category-abstract svg circle,
  .ll-molecular-hero-svg circle,
  .ll-category-visual-badge {
    animation: none;
  }
}

/* ============================================================
   16. "How Peptides Work" interactive diagrams (faithful ports)
   ============================================================ */
.ll-dia {
  width: 100%;
  border: 1px solid hsl(var(--ll-border));
  border-radius: var(--ll-radius);
  background: linear-gradient(120deg, hsl(var(--ll-secondary) / 0.5), hsl(var(--ll-secondary) / 0.2));
  padding: 2rem 1.25rem;
  overflow: hidden;
}
.ll-dia-head { text-align: center; margin-bottom: 1.5rem; }
.ll-dia-title { font-size: 0.9375rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0; }
.ll-dia-sub { font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); margin: 0; }
.ll-dia-callout {
  margin-top: 1.5rem; padding: 0.75rem 1rem; text-align: center;
  background: hsl(var(--ll-background) / 0.5); border: 1px solid hsl(var(--ll-border)); border-radius: 0.5rem;
}
.ll-dia-callout p { font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); margin: 0; }
.ll-dia-callout strong { color: hsl(var(--ll-foreground)); }

/* --- Amino Acid Chain --- */
.ll-amino-chain { display: flex; align-items: center; justify-content: center; }
.ll-amino-unit { display: flex; align-items: center; }
.ll-amino-bead {
  position: relative; width: 3.5rem; height: 3.5rem; border-radius: 999px;
  background: hsl(var(--ll-foreground)); color: hsl(var(--ll-primary-foreground));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.125rem; box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
  transition: transform 0.2s ease;
}
.ll-amino-bead:hover { transform: translateY(-5px) scale(1.1); }
.ll-amino-pulse {
  position: absolute; inset: 0; border-radius: 999px; background: hsl(var(--ll-foreground) / 0.3);
  animation: ll-amino-pulse 2.5s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes ll-amino-pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50%      { transform: scale(1.18); opacity: 0.08; }
}
.ll-amino-tip {
  position: absolute; bottom: -1.75rem; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 0.625rem; color: hsl(var(--ll-muted-foreground));
  background: hsl(var(--ll-background) / 0.9); padding: 0.1rem 0.5rem; border-radius: 4px;
  border: 1px solid hsl(var(--ll-border) / 0.4); opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.ll-amino-bead:hover .ll-amino-tip { opacity: 1; }
.ll-amino-bond { position: relative; width: 1.5rem; height: 2px; background: hsl(var(--ll-foreground) / 0.25); border-radius: 999px; }
.ll-amino-bond-dot {
  position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: -3px; border-radius: 999px;
  background: hsl(var(--ll-foreground) / 0.5); animation: ll-amino-bond 1.5s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes ll-amino-bond { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5rem); } }

.ll-amino-compare { display: flex; align-items: flex-end; justify-content: center; gap: 2rem; margin-top: 2.5rem; }
.ll-amino-compare-col { text-align: center; }
.ll-amino-compare-col--faded { opacity: 0.4; }
.ll-amino-dots { display: flex; align-items: center; justify-content: center; gap: 2px; margin-bottom: 0.5rem; }
.ll-amino-dots--protein { flex-wrap: wrap; max-width: 100px; }
.ll-amino-dot { width: 8px; height: 8px; border-radius: 999px; background: hsl(var(--ll-foreground) / 0.3); }
.ll-amino-dot--lg { width: 16px; height: 16px; background: hsl(var(--ll-foreground) / 0.5); }
.ll-amino-more { font-size: 0.5rem; color: hsl(var(--ll-muted-foreground)); }
.ll-amino-compare-name { font-size: 0.75rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0; }
.ll-amino-compare-meta { font-size: 0.625rem; color: hsl(var(--ll-muted-foreground)); margin: 0; }

/* --- Peptide Binding --- */
.ll-dia-binding { position: relative; }
.ll-bind-legend { position: absolute; top: 1rem; left: 1rem; display: flex; flex-direction: column; gap: 0.375rem; z-index: 2; }
.ll-bind-legend span { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); }
.ll-bind-swatch { width: 12px; height: 12px; background: hsl(var(--ll-primary)); }
.ll-bind-swatch--key { border-radius: 999px; }
.ll-bind-swatch--lock { border-radius: 3px; }

.ll-bind-stage { position: relative; max-width: 400px; margin: 0 auto; aspect-ratio: 400 / 300; }
.ll-bind-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ll-bind-membrane { fill: hsl(var(--ll-secondary)); stroke: hsl(var(--ll-border)); stroke-width: 2; animation: ll-bind-wave 4s ease-in-out infinite; }
@keyframes ll-bind-wave {
  0%, 100% { d: path("M 0 200 Q 50 180 100 200 T 200 200 T 300 200 T 400 200 L 400 320 L 0 320 Z"); }
  50%      { d: path("M 0 200 Q 50 220 100 200 T 200 200 T 300 200 T 400 200 L 400 320 L 0 320 Z"); }
}
.ll-bind-receptor-base { fill: hsl(var(--ll-primary)); animation: ll-bind-recolor 5s ease-in-out infinite; }
.ll-bind-receptor-hole { fill: hsl(var(--ll-background)); stroke: hsl(var(--ll-primary)); stroke-width: 2; }
@keyframes ll-bind-recolor {
  0%, 28%   { fill: hsl(var(--ll-primary)); }
  34%, 68%  { fill: hsl(var(--ll-accent)); }
  74%, 100% { fill: hsl(var(--ll-primary)); }
}
.ll-bind-glow { fill: none; stroke: hsl(var(--ll-accent)); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ll-bind-glow 5s ease-in-out infinite; }
@keyframes ll-bind-glow {
  0%, 30%   { opacity: 0; transform: scale(0.5); }
  40%       { opacity: 0.6; transform: scale(1.4); }
  55%       { opacity: 0; transform: scale(2); }
  56%, 100% { opacity: 0; }
}
.ll-bind-caption { fill: hsl(var(--ll-muted-foreground)); font-size: 12px; font-weight: 500; }
.ll-bind-caption--sm { font-size: 10px; }
.ll-bind-key { position: absolute; top: 0; left: 0; color: hsl(var(--ll-primary)); animation: ll-bind-key 5s ease-in-out infinite; }
@keyframes ll-bind-key {
  0%        { transform: translate(50px, 30px) rotate(-20deg); }
  30%, 70%  { transform: translate(165px, 118px) rotate(0deg); }
  85%, 100% { transform: translate(50px, 30px) rotate(-20deg); }
}

.ll-bind-status { position: absolute; bottom: 1rem; left: 0; right: 0; display: flex; justify-content: center; }
.ll-bind-status-pill {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.875rem; border-radius: 999px; background: hsl(var(--ll-background) / 0.85);
  border: 1px solid hsl(var(--ll-border)); font-size: 0.75rem; font-weight: 500; color: hsl(var(--ll-foreground));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ll-bind-status-dot { width: 8px; height: 8px; border-radius: 999px; background: hsl(var(--ll-muted-foreground)); animation: ll-bind-dot 5s ease-in-out infinite; }
@keyframes ll-bind-dot {
  0%, 28%   { background: hsl(38 80% 50%); }
  34%, 68%  { background: hsl(160 50% 40%); }
  74%, 100% { background: hsl(var(--ll-muted-foreground)); }
}
.ll-bind-status-text { position: relative; opacity: 0; }
.ll-bind-status-text--1 { animation: ll-bind-t1 5s ease-in-out infinite; }
.ll-bind-status-text--2 { position: absolute; left: 0; animation: ll-bind-t2 5s ease-in-out infinite; }
.ll-bind-status-text--3 { position: absolute; left: 0; white-space: nowrap; animation: ll-bind-t3 5s ease-in-out infinite; }
@keyframes ll-bind-t2 { 0%, 28% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes ll-bind-t3 { 0%, 30% { opacity: 0; } 36%, 68% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes ll-bind-t1 { 0%, 70% { opacity: 0; } 78%, 100% { opacity: 1; } }

/* --- Signal Cascade --- */
.ll-dia-cascade { padding: 2rem 1rem; }
.ll-cascade-track { display: flex; align-items: flex-start; justify-content: space-between; }
.ll-cascade-step { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; text-align: center; opacity: 0.3; transition: opacity 0.3s ease; }
.ll-cascade-step.is-reached { opacity: 1; }
.ll-cascade-line { position: absolute; top: 2rem; left: 50%; width: 100%; height: 2px; background: hsl(var(--ll-border)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease, background-color 0.5s ease; }
.ll-cascade-step.is-past .ll-cascade-line { transform: scaleX(1); background: hsl(var(--ll-foreground)); }
.ll-cascade-circle {
  position: relative; z-index: 1; width: 4rem; height: 4rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: hsl(var(--ll-secondary)); border: 1px solid hsl(var(--ll-border));
  color: hsl(var(--ll-muted-foreground) / 0.5); transition: all 0.3s ease;
}
.ll-cascade-circle .ll-svg-icon { width: 1.25rem; height: 1.25rem; }
.ll-cascade-step.is-reached .ll-cascade-circle { background: hsl(var(--ll-foreground) / 0.08); border-color: hsl(var(--ll-foreground) / 0.3); color: hsl(var(--ll-foreground)); }
.ll-cascade-step.is-active .ll-cascade-circle { transform: scale(1.15); }
.ll-cascade-ring { position: absolute; inset: 0; border-radius: 999px; border: 1px solid hsl(var(--ll-foreground) / 0.3); opacity: 0; }
.ll-cascade-step.is-active .ll-cascade-ring { animation: ll-cascade-ring 1s ease-out infinite; }
@keyframes ll-cascade-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.ll-cascade-label { margin-top: 0.75rem; font-size: 0.8125rem; font-weight: 600; color: hsl(var(--ll-foreground)); }
.ll-cascade-desc-sm { font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); }
@media (max-width: 575px) { .ll-cascade-desc-sm { display: none; } .ll-cascade-circle { width: 3rem; height: 3rem; } }
.ll-cascade-detail { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid hsl(var(--ll-border)); text-align: center; min-height: 3rem; position: relative; }
.ll-cascade-detail-line { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); margin: 0; position: absolute; left: 0; right: 0; opacity: 0; transition: opacity 0.4s ease; }
.ll-cascade-detail-line.is-active { position: relative; opacity: 1; }
.ll-cascade-detail-line strong { color: hsl(var(--ll-foreground)); }

/* --- Pathways --- */
.ll-dia-pathways { padding: 1.5rem; }
.ll-pathways-map { position: relative; height: 340px; max-width: 420px; margin: 0 auto; }
.ll-pathways-cell {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 8rem; height: 8rem; border-radius: 999px; z-index: 2;
  background: hsl(var(--ll-secondary)); border: 2px solid hsl(var(--ll-foreground) / 0.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ll-pathways-cell .ll-svg-icon { width: 2rem; height: 2rem; color: hsl(var(--ll-foreground) / 0.4); margin-bottom: 0.25rem; }
.ll-pathways-cell span { font-size: 0.75rem; font-weight: 500; color: hsl(var(--ll-muted-foreground)); }

.ll-pathway-btn {
  position: absolute; width: 6rem; height: 6rem; border-radius: 1rem; z-index: 3;
  background: hsl(var(--ll-secondary)); border: 1px solid hsl(var(--ll-border));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease;
}
.ll-pathway-btn:hover { transform: scale(1.08); }
.ll-pathway-btn.is-active { border-color: hsl(var(--ll-foreground) / 0.3); transform: scale(1.05); }
.ll-pathway-btn .ll-svg-icon { width: 1.5rem; height: 1.5rem; color: hsl(var(--ll-foreground) / 0.4); transition: color 0.2s ease; }
.ll-pathway-btn.is-active .ll-svg-icon { color: hsl(var(--ll-foreground)); }
.ll-pathway-name { font-size: 0.75rem; font-weight: 600; color: hsl(var(--ll-foreground)); }
.ll-pathway-btn--tl { top: 0.5rem; left: 50%; margin-left: -8.5rem; }
.ll-pathway-btn--tr { top: 0.5rem; left: 50%; margin-left: 2.5rem; }
.ll-pathway-btn--bl { bottom: 0.5rem; left: 50%; margin-left: -8.5rem; }
.ll-pathway-btn--br { bottom: 0.5rem; left: 50%; margin-left: 2.5rem; }
.ll-pathway-line { position: absolute; width: 4rem; height: 0; border-top: 1px dashed hsl(var(--ll-border)); z-index: -1; }
.ll-pathway-btn--tl .ll-pathway-line { right: -3rem; bottom: -1.5rem; transform: rotate(45deg); }
.ll-pathway-btn--tr .ll-pathway-line { left: -3rem; bottom: -1.5rem; transform: rotate(-45deg); }
.ll-pathway-btn--bl .ll-pathway-line { right: -3rem; top: -1.5rem; transform: rotate(-45deg); }
.ll-pathway-btn--br .ll-pathway-line { left: -3rem; top: -1.5rem; transform: rotate(45deg); }
.ll-pathway-btn.is-active .ll-pathway-line { border-top-color: hsl(var(--ll-foreground)); }

.ll-pathway-signal {
  position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 999px;
  background: hsl(var(--ll-foreground) / 0.5); pointer-events: none;
}
.ll-pathway-btn--tl .ll-pathway-signal { animation: ll-sig-tl 1.2s ease-out forwards; }
.ll-pathway-btn--tr .ll-pathway-signal { animation: ll-sig-tr 1.2s ease-out forwards; }
.ll-pathway-btn--bl .ll-pathway-signal { animation: ll-sig-bl 1.2s ease-out forwards; }
.ll-pathway-btn--br .ll-pathway-signal { animation: ll-sig-br 1.2s ease-out forwards; }
@keyframes ll-sig-tl { to { transform: translate(120px, 120px); opacity: 0; } }
@keyframes ll-sig-tr { to { transform: translate(-120px, 120px); opacity: 0; } }
@keyframes ll-sig-bl { to { transform: translate(120px, -120px); opacity: 0; } }
@keyframes ll-sig-br { to { transform: translate(-120px, -120px); opacity: 0; } }

.ll-pathways-panel { margin-top: 1rem; padding: 1rem; min-height: 100px; border-radius: 0.75rem; background: hsl(var(--ll-secondary) / 0.5); border: 1px solid hsl(var(--ll-border)); }
.ll-pathways-panel-empty { text-align: center; color: hsl(var(--ll-muted-foreground)); }
.ll-pathways-panel-empty p { margin: 0; font-size: 0.8125rem; }
.ll-pathways-panel-hint { font-size: 0.6875rem; margin-top: 0.25rem !important; }
.ll-pathways-panel-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.ll-pathways-panel-head .ll-svg-icon { width: 1.125rem; height: 1.125rem; color: hsl(var(--ll-foreground)); }
.ll-pathways-panel-head h4 { font-size: 0.9375rem; font-weight: 600; margin: 0; }
.ll-pathways-panel-desc { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); margin: 0 0 0.75rem; }
.ll-pathways-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ll-pathways-chip { font-size: 0.6875rem; padding: 0.25rem 0.625rem; border-radius: 999px; background: hsl(var(--ll-foreground) / 0.05); color: hsl(var(--ll-foreground) / 0.7); border: 1px solid hsl(var(--ll-border) / 0.5); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .ll-amino-pulse, .ll-amino-bond-dot, .ll-bind-membrane, .ll-bind-receptor-base,
  .ll-bind-glow, .ll-bind-key, .ll-bind-status-dot, .ll-bind-status-text,
  .ll-cascade-ring, .ll-pathway-signal { animation: none; }
  .ll-bind-status-text--1 { opacity: 1; }
  .ll-bind-status-text--2, .ll-bind-status-text--3 { display: none; }
}

/* ============================================================
   14. Catalog (archive-peptide.php)
   Slate/amber values match the peptide-detail conventions above
   (Tailwind slate scale). Layout ported from the React reference.
   ============================================================ */
.ll-catalog {
  background: hsl(var(--ll-muted) / 0.45);
  padding: calc(var(--ll-navbar-height) + 2.5rem) 0 4rem;
  min-height: 100vh;
}

/* --- Header --- */
.ll-catalog-header { text-align: center; margin-bottom: 3rem; }
.ll-catalog-title {
  font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.03em;
  color: hsl(217 33% 17%); margin-bottom: 1rem;
}
.ll-catalog-title-accent { color: hsl(215 16% 47%); }
.ll-catalog-dek {
  font-size: 1.125rem; color: hsl(var(--ll-muted-foreground));
  max-width: 40rem; margin: 0 auto 1.5rem;
}
.ll-catalog-compare-cta { background: hsl(215 25% 27%); }
.ll-catalog-compare-cta:hover, .ll-catalog-compare-cta:focus { background: hsl(215 25% 27%); opacity: 0.9; }
.ll-cat-compare-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; margin-left: 0.125rem;
  border-radius: 999px; background: #fff; color: hsl(215 25% 27%);
  font-size: 0.6875rem; font-weight: 700;
}

/* --- Browse by Pathway --- */
.ll-catalog-pathways { margin-bottom: 1.5rem; }
.ll-catalog-pathways-label {
  font-size: 0.8125rem; font-weight: 500; color: hsl(var(--ll-muted-foreground)); margin-bottom: 0.75rem;
}
.ll-catalog-pathways-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem;
}
@media (min-width: 640px) { .ll-catalog-pathways-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .ll-catalog-pathways-grid { grid-template-columns: repeat(6, 1fr); } }
.ll-catalog-pathway {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.5rem; padding: 0 0.75rem; border: 1px solid hsl(214 32% 91%);
  border-radius: 0.75rem; background: #fff; color: hsl(215 25% 27%);
  font-size: 0.75rem; font-weight: 500; cursor: pointer; min-width: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ll-catalog-pathway span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-catalog-pathway .ll-svg-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.ll-catalog-pathway:hover { background: hsl(210 40% 98%); }
.ll-catalog-pathway.is-active {
  background: hsl(215 25% 27%); border-color: hsl(215 25% 27%); color: #fff;
}

/* --- Search & filter bar --- */
.ll-catalog-bar {
  background: #fff; border: 1px solid hsl(214 32% 91%); border-radius: var(--ll-radius);
  padding: 1rem; margin-bottom: 2rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.ll-catalog-bar-row { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .ll-catalog-bar-row { flex-direction: row; } }

.ll-catalog-search { position: relative; flex: 1; }
.ll-catalog-search-icon {
  position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%);
  width: 1.125rem; height: 1.125rem; color: hsl(215 16% 47%); pointer-events: none;
}
.ll-catalog-search-input {
  width: 100%; height: 3rem; padding: 0 2.75rem; border: 1px solid hsl(214 32% 91%);
  border-radius: 0.75rem; background: hsl(210 40% 98%); color: hsl(217 33% 17%);
  font-size: 0.9375rem; font-family: inherit;
}
.ll-catalog-search-input:focus {
  outline: none; border-color: hsl(215 20% 65%); background: #fff;
  box-shadow: 0 0 0 3px hsl(215 25% 27% / 0.08);
}
.ll-catalog-search-input::placeholder { color: hsl(215 16% 47%); }
.ll-catalog-search-clear {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; padding: 0.25rem; border: 0; border-radius: 999px;
  background: transparent; color: hsl(215 16% 47%); cursor: pointer;
}
.ll-catalog-search-clear:hover { background: hsl(214 32% 91%); }
.ll-catalog-search-clear .ll-svg-icon { width: 1rem; height: 1rem; }

.ll-catalog-bar-actions { display: flex; gap: 0.5rem; }
.ll-catalog-filter-toggle { height: 3rem; }
.ll-catalog-filter-toggle.is-active {
  background: hsl(215 25% 27%); border-color: hsl(215 25% 27%); color: #fff;
}
.ll-cat-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; margin-left: 0.125rem;
  border-radius: 999px; background: hsl(215 16% 47%); color: #fff;
  font-size: 0.6875rem; font-weight: 700;
}
.ll-catalog-clear { height: 3rem; padding: 0 0.875rem; }

/* Type pills */
.ll-catalog-types { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.ll-type-pill {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem;
  padding: 0 0.75rem; border: 1px solid hsl(214 32% 91%); border-radius: 0.625rem;
  background: #fff; color: hsl(215 25% 27%); font-size: 0.8125rem; font-weight: 500;
  cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ll-type-pill .ll-svg-icon { width: 0.875rem; height: 0.875rem; }
.ll-type-pill:hover { background: hsl(210 40% 98%); }
.ll-type-pill.is-active { background: hsl(215 25% 27%); border-color: hsl(215 25% 27%); color: #fff; }
.ll-type-pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.125rem; height: 1.125rem; padding: 0 0.3rem; border-radius: 999px;
  background: hsl(210 40% 96%); color: hsl(215 16% 47%); font-size: 0.6875rem; font-weight: 600;
}
.ll-type-pill.is-active .ll-type-pill-count { background: hsl(215 19% 35%); color: #fff; }

/* Category filters (expandable) */
.ll-catalog-categories { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid hsl(214 32% 91%); }
.ll-catalog-categories-label { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); margin-bottom: 0.75rem; }
.ll-catalog-categories-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ll-cat-pill {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 1.875rem;
  padding: 0 0.625rem; border: 1px solid hsl(214 32% 91%); border-radius: 0.5rem;
  background: #fff; color: hsl(215 25% 27%); font-size: 0.75rem; font-weight: 500;
  cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ll-cat-pill:hover { background: hsl(210 40% 98%); }
.ll-cat-pill.is-active { background: hsl(215 25% 27%); border-color: hsl(215 25% 27%); color: #fff; }
.ll-cat-pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.125rem; height: 1.125rem; padding: 0 0.3rem; border-radius: 999px;
  background: hsl(210 40% 96%); color: hsl(215 16% 47%); font-size: 0.6875rem; font-weight: 600;
}
.ll-cat-pill.is-active .ll-cat-pill-count { background: hsl(215 19% 35%); color: #fff; }

/* --- Results count --- */
.ll-catalog-count { margin-bottom: 1.5rem; color: hsl(var(--ll-muted-foreground)); font-size: 0.9375rem; }
.ll-catalog-count-shown { color: hsl(215 25% 27%); font-weight: 600; }

/* --- Grid --- */
.ll-catalog-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 640px) { .ll-catalog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ll-catalog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ll-catalog-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- Card --- */
.ll-cat-card {
  display: flex; flex-direction: column; height: 100%; min-width: 0; padding: 1.25rem;
  border: 1px solid hsl(214 32% 91%); border-radius: var(--ll-radius-md);
  background: #fff; color: hsl(217 33% 17%); text-decoration: none;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.ll-cat-card:hover {
  box-shadow: 0 12px 28px -8px rgb(15 23 42 / 0.14); border-color: hsl(213 27% 84%);
  transform: translateY(-2px);
}
.ll-cat-card.is-contains { border-color: hsl(45 86% 78%); }
.ll-cat-card.is-contains:hover { border-color: hsl(38 92% 65%); }

.ll-cat-card-contains {
  display: inline-block; align-self: flex-start; margin-bottom: 0.5rem;
  padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600;
  background: hsl(45 93% 90%); color: hsl(28 74% 32%); border: 1px solid hsl(45 86% 78%);
}

.ll-cat-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.ll-cat-card-title {
  flex: 1; min-width: 0;
  font-size: 1.0625rem; font-weight: 600; color: hsl(215 25% 27%); margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ll-cat-card:hover .ll-cat-card-title { color: hsl(217 33% 17%); }

.ll-cat-type {
  display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0;
  padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600;
  border: 1px solid transparent;
}
.ll-cat-type .ll-svg-icon { width: 0.75rem; height: 0.75rem; }
.ll-cat-type--single { background: hsl(210 40% 96%); color: hsl(215 19% 35%); border-color: hsl(214 32% 91%); }
.ll-cat-type--blend  { background: hsl(214 32% 91%); color: hsl(215 25% 27%); border-color: hsl(213 27% 84%); }
.ll-cat-type--stack  { background: hsl(213 27% 84%); color: hsl(217 33% 17%); border-color: hsl(215 20% 65%); }

.ll-cat-card-category {
  align-self: flex-start; margin-top: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 500; background: hsl(210 40% 96%); color: hsl(215 16% 47%);
}
.ll-cat-card-desc {
  margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: hsl(var(--ll-muted-foreground));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ll-cat-card-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem;
}
.ll-cat-spec-label { display: block; font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); margin-bottom: 0.15rem; }
.ll-cat-spec-val { margin: 0; font-size: 0.8125rem; font-weight: 500; color: hsl(215 25% 27%); }

.ll-cat-card-cycle { margin: 0.75rem 0 0; font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); }
.ll-cat-card-cycle span { font-weight: 600; color: hsl(215 19% 35%); }

.ll-cat-card-benefits { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 1rem; }
.ll-cat-benefit {
  padding: 0.2rem 0.5rem; border-radius: 0.5rem; font-size: 0.6875rem; font-weight: 500;
  background: hsl(210 40% 98%); border: 1px solid hsl(214 32% 91%); color: hsl(215 19% 35%);
}

.ll-cat-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid hsl(210 40% 96%);
}
.ll-cat-compare {
  display: inline-flex; align-items: center; gap: 0.25rem; height: 1.875rem; padding: 0 0.625rem;
  border: 1px solid hsl(214 32% 91%); border-radius: 0.5rem; background: #fff;
  color: hsl(215 25% 27%); font-size: 0.75rem; font-weight: 500; cursor: pointer;
  transition: background-color 0.15s ease;
}
.ll-cat-compare .ll-svg-icon { width: 0.8125rem; height: 0.8125rem; }
.ll-cat-compare:hover { background: hsl(210 40% 96%); }
.ll-cat-compare.is-active { background: hsl(214 32% 91%); color: hsl(215 16% 47%); cursor: default; }
.ll-cat-arrow { display: inline-flex; color: hsl(213 27% 84%); transition: color 0.2s ease, transform 0.2s ease; }
.ll-cat-arrow .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-cat-card:hover .ll-cat-arrow { color: hsl(215 25% 27%); transform: translateX(3px); }

.ll-cat-mark { background: hsl(48 96% 76%); color: hsl(217 33% 17%); border-radius: 3px; padding: 0 0.1em; }

/* --- Autocomplete dropdown --- */
.ll-catalog-autocomplete {
  position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 50;
  background: #fff; border: 1px solid hsl(214 32% 91%); border-radius: 0.75rem;
  box-shadow: 0 16px 40px -12px rgb(15 23 42 / 0.2); max-height: 22rem; overflow-y: auto;
}
.ll-ac-row {
  display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem;
  border: 0; border-bottom: 1px solid hsl(210 40% 96%); background: transparent; text-align: left; cursor: pointer;
}
.ll-ac-row:last-of-type { border-bottom: 0; }
.ll-ac-row:hover, .ll-ac-row.is-active { background: hsl(210 40% 98%); }
.ll-ac-body { flex: 1; min-width: 0; }
.ll-ac-name { display: block; font-size: 0.875rem; font-weight: 500; color: hsl(217 33% 17%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-ac-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; }
.ll-ac-cat { font-size: 0.75rem; color: hsl(215 16% 47%); }
.ll-ac-dot { color: hsl(213 27% 84%); }
.ll-ac-match { font-size: 0.75rem; font-weight: 500; color: hsl(28 74% 45%); }
.ll-ac-hint { padding: 0.5rem 1rem; background: hsl(210 40% 98%); border-top: 1px solid hsl(210 40% 96%); font-size: 0.75rem; color: hsl(215 16% 47%); }
.ll-ac-hint span { font-weight: 600; }
.ll-ac-empty { padding: 1.5rem 1rem; text-align: center; }
.ll-ac-empty .ll-svg-icon { width: 2rem; height: 2rem; color: hsl(213 27% 84%); margin-bottom: 0.5rem; }
.ll-ac-empty p { margin: 0; font-size: 0.875rem; color: hsl(215 16% 47%); }
.ll-ac-empty span { font-size: 0.75rem; color: hsl(215 20% 65%); }

/* --- Empty state --- */
.ll-catalog-empty { text-align: center; padding: 4rem 1rem; }
.ll-catalog-empty-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;
  border-radius: 999px; background: hsl(210 40% 96%); color: hsl(215 16% 47%); margin-bottom: 1rem;
}
.ll-catalog-empty-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-catalog-empty-title { font-size: 1.25rem; font-weight: 600; color: hsl(215 25% 27%); margin-bottom: 0.5rem; }
.ll-catalog-empty-dek { color: hsl(var(--ll-muted-foreground)); margin-bottom: 1rem; }

/* --- Toast --- */
.ll-cat-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem); z-index: 1080;
  padding: 0.75rem 1.25rem; border-radius: 0.75rem; background: hsl(217 33% 17%); color: #fff;
  font-size: 0.875rem; font-weight: 500; box-shadow: 0 12px 32px -8px rgb(15 23 42 / 0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.ll-cat-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .ll-cat-card, .ll-cat-arrow, .ll-cat-toast, .ll-catalog-pathway, .ll-type-pill, .ll-cat-pill { transition: none; }
  .ll-cat-card:hover { transform: none; }
}

/* ============================================================
   15. Compare (page-compare.php)
   Client-side tool. Namespaced .ll-compare-*; reuses .ll-cat-type
   (type badges) and .ll-btn-hero (Clear All) from earlier sections.
   ============================================================ */
.ll-compare { background: hsl(var(--ll-muted) / 0.45); min-height: 100vh; }

/* Wider container for Compare page (more room for 4-card layout) */
.ll-compare .ll-container { max-width: 1400px; }

/* --- Hero (dark slate, matches peptide-detail hero) --- */
.ll-compare-hero {
  background: linear-gradient(to bottom, hsl(217 33% 17%), hsl(215 25% 27%));
  color: #fff; padding: calc(var(--ll-navbar-height) + 2rem) 0 3rem;
}
.ll-compare-back {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;
  color: hsl(215 20% 75%); font-size: 0.875rem; font-weight: 500; text-decoration: none;
  transition: color 0.15s ease;
}
.ll-compare-back .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-compare-back:hover { color: #fff; }
.ll-compare-hero-row { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .ll-compare-hero-row { flex-direction: row; align-items: center; justify-content: space-between; } }
.ll-compare-title {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; color: #fff;
}
.ll-compare-title .ll-svg-icon { width: 2rem; height: 2rem; color: hsl(215 20% 75%); }
.ll-compare-dek { margin: 0; max-width: 42rem; color: hsl(215 20% 80%); font-size: 0.9375rem; line-height: 1.6; }
.ll-compare-clear { flex-shrink: 0; }
.ll-compare-clear .ll-svg-icon { width: 1rem; height: 1rem; }

/* --- Body / grid --- */
.ll-compare-body { padding: 3rem 0; }
.ll-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 100%;
}
@media (min-width: 640px) { .ll-compare-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ll-compare-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .ll-compare-grid { grid-template-columns: repeat(4, 1fr); } }
.ll-compare-card, .ll-compare-addslot { display: flex; flex-direction: column; height: 100%; }

/* --- Comparison card --- */
.ll-compare-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid hsl(214 32% 91%); border-radius: var(--ll-radius-md); overflow: hidden;
}
.ll-compare-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
  padding: 1.25rem 1.25rem 0.875rem; background: linear-gradient(to bottom, hsl(210 40% 96%), #fff);
}
.ll-compare-card-headmain { flex: 1; min-width: 0; }
.ll-compare-card-name {
  display: block; font-size: 1.0625rem; font-weight: 600; color: hsl(217 33% 17%);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ll-compare-card-name:hover { text-decoration: underline; }
.ll-compare-card-badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.ll-compare-card-cat {
  display: inline-flex; align-items: center; padding: 0.2rem 0.5rem; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 500; background: hsl(210 40% 96%); color: hsl(215 16% 47%);
}
.ll-compare-card-remove {
  flex-shrink: 0; display: inline-flex; padding: 0.375rem; border: 0; border-radius: 0.5rem;
  background: transparent; color: hsl(215 16% 47%); cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease;
}
.ll-compare-card-remove .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-compare-card-remove:hover { color: hsl(var(--ll-destructive)); background: hsl(var(--ll-destructive) / 0.08); }

.ll-compare-card-body { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }
.ll-compare-sep { margin: 0; border: 0; border-top: 1px solid hsl(210 40% 94%); }
.ll-compare-section { display: flex; flex-direction: column; gap: 0.625rem; }
.ll-compare-section-title {
  display: flex; align-items: center; gap: 0.5rem; margin: 0;
  font-size: 0.875rem; font-weight: 600; color: hsl(215 25% 27%);
}
.ll-compare-section-title .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-compare-title-ok .ll-svg-icon { color: hsl(142 65% 40%); }
.ll-compare-title-warn .ll-svg-icon { color: hsl(38 92% 50%); }

/* Molecular properties */
.ll-compare-molecule {
  display: flex; align-items: center; justify-content: center; padding: 0.5rem;
  background: #fff; border: 1px solid hsl(214 32% 91%); border-radius: 0.5rem;
}
.ll-compare-molecule img { max-height: 8rem; width: auto; object-fit: contain; }
.ll-compare-prop { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.ll-compare-prop > .ll-svg-icon { width: 1rem; height: 1rem; color: hsl(215 16% 47%); flex-shrink: 0; }
.ll-compare-prop-label { color: hsl(215 16% 47%); }
.ll-compare-prop a {
  display: inline-flex; align-items: center; gap: 0.25rem; color: hsl(var(--ll-accent));
  text-decoration: none; font-weight: 500;
}
.ll-compare-prop a:hover { text-decoration: underline; }
.ll-compare-prop a .ll-svg-icon { width: 0.75rem; height: 0.75rem; }

/* Dosing */
.ll-compare-dose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ll-compare-dose-box { background: hsl(210 40% 98%); border-radius: 0.5rem; padding: 0.5rem 0.625rem; min-width: 0; }
.ll-compare-dose-label { margin: 0 0 0.15rem; font-size: 0.6875rem; color: hsl(215 16% 47%); }
.ll-compare-dose-val { margin: 0; font-size: 0.8125rem; font-weight: 500; color: hsl(215 25% 27%); }
.ll-compare-inline { display: flex; align-items: flex-start; gap: 0.375rem; font-size: 0.8125rem; color: hsl(215 25% 27%); }
.ll-compare-inline .ll-svg-icon { width: 1rem; height: 1rem; color: hsl(215 16% 47%); flex-shrink: 0; align-self: center; }
.ll-compare-inline-label { color: hsl(215 16% 47%); }
.ll-compare-admin { margin: 0; font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); }

/* Popularity */
.ll-compare-pop { display: flex; align-items: center; gap: 0.625rem; }
.ll-compare-pop-track { flex: 1; height: 0.5rem; background: hsl(210 40% 94%); border-radius: 999px; overflow: hidden; }
.ll-compare-pop-fill { height: 100%; background: linear-gradient(to right, hsl(215 19% 55%), hsl(215 25% 35%)); border-radius: 999px; }
.ll-compare-pop-val { width: 3rem; text-align: right; font-size: 0.875rem; font-weight: 500; color: hsl(215 19% 40%); }

/* Benefits / side effects lists */
.ll-compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.ll-compare-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; color: hsl(215 19% 40%); line-height: 1.45; }
.ll-compare-dot { margin-top: 0.05rem; font-weight: 700; }
.ll-compare-list--ok .ll-compare-dot { color: hsl(142 65% 45%); }
.ll-compare-list--warn .ll-compare-dot { color: hsl(38 92% 50%); }
.ll-compare-more { font-style: italic; color: hsl(var(--ll-muted-foreground)); }

.ll-compare-card-body { flex: 1; }
.ll-compare-card-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid hsl(210 40% 94%); }
.ll-compare-details { width: 100%; }

/* --- Add slot --- */
.ll-compare-addslot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  min-height: 600px; padding: 2rem; border: 2px dashed hsl(213 27% 84%); border-radius: var(--ll-radius-md);
  background: transparent; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ll-compare-addslot:hover { border-color: hsl(215 16% 60%); background: hsl(210 40% 98%); }
.ll-compare-addslot-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;
  border-radius: 999px; background: hsl(210 40% 96%); color: hsl(215 16% 55%);
}
.ll-compare-addslot-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-compare-addslot-title { font-size: 0.9375rem; font-weight: 500; color: hsl(215 19% 40%); }
.ll-compare-addslot-dek { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); margin-top: -0.75rem; }

/* --- Empty state --- */
.ll-compare-empty { text-align: center; margin-top: 2rem; }
.ll-compare-empty-dek { color: hsl(var(--ll-muted-foreground)); margin-bottom: 1.5rem; }
.ll-compare-presets { max-width: 42rem; margin: 0 auto; }
.ll-compare-presets-title { font-size: 0.875rem; font-weight: 600; color: hsl(215 19% 40%); margin-bottom: 1rem; }
.ll-compare-presets-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.ll-compare-preset { font-size: 0.8125rem; }

/* --- Selector modal --- */
body.ll-modal-open { overflow: hidden; }
.ll-compare-modal { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ll-compare-modal-backdrop { position: absolute; inset: 0; background: hsl(217 33% 17% / 0.5); backdrop-filter: blur(2px); }
.ll-compare-modal-panel {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 42rem;
  max-height: 80vh; background: #fff; border-radius: var(--ll-radius); overflow: hidden;
  box-shadow: 0 24px 60px -12px rgb(15 23 42 / 0.35);
}
.ll-compare-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem 1rem; }
.ll-compare-modal-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.125rem; font-weight: 600; color: hsl(217 33% 17%); }
.ll-compare-modal-title .ll-svg-icon { width: 1.25rem; height: 1.25rem; }
.ll-compare-modal-x { display: inline-flex; padding: 0.375rem; border: 0; border-radius: 0.5rem; background: transparent; color: hsl(215 16% 47%); cursor: pointer; }
.ll-compare-modal-x:hover { background: hsl(210 40% 96%); color: hsl(217 33% 17%); }
.ll-compare-modal-x .ll-svg-icon { width: 1.125rem; height: 1.125rem; }
.ll-compare-modal-search { position: relative; padding: 0 1.5rem 1rem; }
.ll-compare-modal-search-icon { position: absolute; left: 2.25rem; top: 50%; transform: translateY(-50%); margin-top: -0.5rem; width: 1rem; height: 1rem; color: hsl(215 16% 47%); pointer-events: none; }
.ll-compare-modal-input {
  width: 100%; height: 2.75rem; padding: 0 1rem 0 2.5rem; border: 1px solid hsl(214 32% 91%);
  border-radius: 0.75rem; background: #fff; color: hsl(217 33% 17%); font-size: 0.9375rem; font-family: inherit;
}
.ll-compare-modal-input:focus { outline: none; border-color: hsl(215 20% 65%); box-shadow: 0 0 0 3px hsl(215 25% 27% / 0.08); }
.ll-compare-modal-list { flex: 1; overflow-y: auto; padding: 0 1.5rem 1.5rem; }
.ll-compare-modal-group { margin-bottom: 1.25rem; }
.ll-compare-modal-cat { font-size: 0.8125rem; font-weight: 600; color: hsl(215 16% 47%); margin: 0 0 0.5rem; }
.ll-compare-modal-items { display: flex; flex-direction: column; gap: 0.5rem; }
.ll-compare-modal-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; width: 100%;
  padding: 0.75rem; border: 1px solid hsl(214 32% 91%); border-radius: 0.75rem; background: #fff;
  text-align: left; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ll-compare-modal-item:hover { border-color: hsl(213 27% 84%); background: hsl(210 40% 98%); }
.ll-compare-modal-item-body { flex: 1; min-width: 0; }
.ll-compare-modal-item-name { display: block; font-size: 0.875rem; font-weight: 500; color: hsl(215 25% 27%); }
.ll-compare-modal-item-desc { display: block; margin-top: 0.15rem; font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-compare-modal-empty { text-align: center; color: hsl(var(--ll-muted-foreground)); padding: 2rem 0; }

@media (prefers-reduced-motion: reduce) {
  .ll-compare-back, .ll-compare-card-remove, .ll-compare-addslot, .ll-compare-modal-item { transition: none; }
}

/* ============================================================
   16. Articles archive (home.php / the posts page)
   Server-side, namespaced .ll-articles-* and .ll-acard-*.
   ============================================================ */
.ll-articles {
  background: hsl(var(--ll-muted) / 0.45); min-height: 100vh;
  padding: calc(var(--ll-navbar-height) + 2.5rem) 0 4rem;
}

/* --- Header --- */
.ll-articles-header { text-align: center; margin-bottom: 3rem; }
.ll-articles-header-icon { display: flex; justify-content: center; margin-bottom: 1rem; color: hsl(215 19% 40%); }
.ll-articles-header-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-articles-title {
  font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.03em;
  color: hsl(217 33% 17%); margin-bottom: 1rem;
}
.ll-articles-title-accent { color: hsl(215 16% 47%); }
.ll-articles-dek { font-size: 1.125rem; color: hsl(var(--ll-muted-foreground)); max-width: 40rem; margin: 0 auto; }

/* --- Layout --- */
.ll-articles-layout { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 992px) { .ll-articles-layout { flex-direction: row; } }

/* --- Sidebar --- */
.ll-articles-sidebar { width: 100%; flex-shrink: 0; }
@media (min-width: 992px) { .ll-articles-sidebar { width: 16rem; } }
.ll-articles-sidebar-sticky { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 992px) { .ll-articles-sidebar-sticky { position: sticky; top: calc(var(--ll-navbar-height) + 1.5rem); } }
.ll-articles-sidebar-title { font-size: 0.9375rem; font-weight: 600; color: hsl(217 33% 17%); margin-bottom: 0.75rem; }

.ll-articles-search { position: relative; }
.ll-articles-search-input {
  width: 100%; height: 2.75rem; padding: 0 2.75rem 0 0.875rem; border: 1px solid hsl(214 32% 91%);
  border-radius: 0.75rem; background: #fff; color: hsl(217 33% 17%); font-size: 0.875rem; font-family: inherit;
}
.ll-articles-search-input:focus { outline: none; border-color: hsl(215 20% 65%); box-shadow: 0 0 0 3px hsl(215 25% 27% / 0.08); }
.ll-articles-search-input::placeholder { color: hsl(215 16% 55%); }
.ll-articles-search-btn {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; padding: 0.375rem; border: 0; border-radius: 0.5rem;
  background: transparent; color: hsl(215 16% 55%); cursor: pointer;
}
.ll-articles-search-btn:hover { color: hsl(217 33% 17%); }
.ll-articles-search-btn .ll-svg-icon { width: 1rem; height: 1rem; }

.ll-articles-cats { display: flex; flex-direction: column; gap: 0.125rem; max-height: calc(100vh - 320px); overflow-y: auto; padding-right: 0.5rem; }
@media (max-width: 991px) { .ll-articles-cats { max-height: 22rem; } }
.ll-articles-cat {
  display: block; padding: 0.375rem 0.5rem; border-radius: 0.5rem; font-size: 0.875rem;
  color: hsl(215 19% 40%); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease;
}
.ll-articles-cat:hover { background: hsl(210 40% 96%); color: hsl(217 33% 17%); }
.ll-articles-cat.is-empty { color: hsl(215 16% 65%); }
.ll-articles-cat.is-empty:hover { color: hsl(215 16% 47%); background: hsl(210 40% 98%); }
.ll-articles-cat.is-active { color: hsl(var(--ll-accent)); font-weight: 500; background: hsl(var(--ll-accent) / 0.06); }

/* --- Main --- */
.ll-articles-main { flex: 1; min-width: 0; }
.ll-articles-count { margin-bottom: 1.5rem; color: hsl(var(--ll-muted-foreground)); font-size: 0.9375rem; }
.ll-articles-count-n { color: hsl(215 25% 27%); font-weight: 600; }
.ll-articles-count-page { color: hsl(215 16% 55%); }

.ll-articles-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .ll-articles-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Article card --- */
.ll-acard {
  position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 1.5rem;
  background: #fff; border: 1px solid hsl(214 32% 91%); border-radius: var(--ll-radius-md);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.ll-acard:hover { box-shadow: 0 12px 28px -8px rgb(15 23 42 / 0.14); border-color: hsl(213 27% 84%); }
.ll-acard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; }
.ll-acard-cat {
  display: inline-flex; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600;
  border: 1px solid transparent;
}
.ll-acard-cat--slate  { background: hsl(210 40% 96%); color: hsl(215 25% 30%); border-color: hsl(214 32% 91%); }
.ll-acard-cat--green  { background: hsl(141 78% 93%); color: hsl(142 72% 29%); border-color: hsl(141 60% 83%); }
.ll-acard-cat--purple { background: hsl(270 60% 95%); color: hsl(272 51% 45%); border-color: hsl(270 50% 88%); }
.ll-acard-cat--blue   { background: hsl(214 95% 93%); color: hsl(217 91% 45%); border-color: hsl(214 80% 85%); }
.ll-acard-cat--amber  { background: hsl(45 93% 90%); color: hsl(28 74% 35%); border-color: hsl(45 86% 78%); }
.ll-acard-cat--red    { background: hsl(0 86% 94%); color: hsl(0 72% 45%); border-color: hsl(0 80% 87%); }
.ll-acard-cat--teal   { background: hsl(168 76% 90%); color: hsl(175 70% 29%); border-color: hsl(168 60% 80%); }
.ll-acard-ext { position: relative; z-index: 1; display: inline-flex; color: hsl(215 16% 60%); transition: color 0.15s ease; }
.ll-acard-ext:hover { color: hsl(215 25% 30%); }
.ll-acard-ext .ll-svg-icon { width: 1rem; height: 1rem; }

.ll-acard-title { margin: 0 0 0.75rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.ll-acard-titlelink { color: hsl(215 25% 27%); text-decoration: none; transition: color 0.15s ease; }
.ll-acard-titlelink::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.ll-acard:hover .ll-acard-titlelink { color: hsl(217 33% 17%); }
.ll-acard-summary {
  margin: 0 0 1.25rem; font-size: 0.8125rem; line-height: 1.55; color: hsl(var(--ll-muted-foreground));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ll-acard-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; }
.ll-acard-tag {
  padding: 0.15rem 0.5rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 500;
  background: hsl(210 40% 96%); color: hsl(215 16% 47%);
}
.ll-acard-foot {
  display: flex; align-items: center; justify-content: space-between; margin-top: auto;
  padding-top: 1rem; border-top: 1px solid hsl(210 40% 96%);
}
.ll-acard-read { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); }
.ll-acard-read .ll-svg-icon { width: 0.8125rem; height: 0.8125rem; }
.ll-acard-more { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: hsl(215 19% 40%); }
.ll-acard-more .ll-svg-icon { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.ll-acard:hover .ll-acard-more { color: hsl(217 33% 17%); }
.ll-acard:hover .ll-acard-more .ll-svg-icon { transform: translateX(3px); }

/* --- Pagination --- */
.ll-articles-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.375rem; margin-top: 3rem; }
.ll-articles-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 2.5rem; height: 2.25rem;
  padding: 0 0.625rem; border: 1px solid hsl(214 32% 91%); border-radius: 0.625rem; background: #fff;
  color: hsl(215 25% 27%); font-size: 0.8125rem; font-weight: 500; text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ll-articles-pagination a.page-numbers:hover { background: hsl(210 40% 96%); }
.ll-articles-pagination .page-numbers.current { background: hsl(215 25% 27%); border-color: hsl(215 25% 27%); color: #fff; }
.ll-articles-pagination .page-numbers.dots { border: 0; background: transparent; color: hsl(215 16% 60%); min-width: auto; padding: 0 0.25rem; }
.ll-articles-pagination .page-numbers.prev, .ll-articles-pagination .page-numbers.next { padding: 0 0.875rem; }
.ll-articles-pagination .page-numbers .ll-svg-icon { width: 0.875rem; height: 0.875rem; }

/* --- Empty state --- */
.ll-articles-empty { text-align: center; padding: 4rem 1rem; }
.ll-articles-empty-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;
  border-radius: 999px; background: hsl(210 40% 96%); color: hsl(215 16% 47%); margin-bottom: 1rem;
}
.ll-articles-empty-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-articles-empty-title { font-size: 1.25rem; font-weight: 600; color: hsl(215 25% 27%); margin-bottom: 0.5rem; }
.ll-articles-empty-dek { color: hsl(var(--ll-muted-foreground)); margin-bottom: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .ll-acard, .ll-acard-more .ll-svg-icon, .ll-articles-cat, .ll-articles-pagination .page-numbers { transition: none; }
}

/* ============================================================
   17. Single article (single.php → /articles/{slug})
   Namespaced .ll-article-*; .ll-prose styles the markdown body.
   ============================================================ */
.ll-article {
  background: hsl(var(--ll-muted) / 0.45); min-height: 100vh;
  padding: calc(var(--ll-navbar-height) + 1.5rem) 0 4rem;
}
.ll-article-wrap { width: 100%; max-width: 56rem; margin-inline: auto; padding-inline: max(1.25rem, env(safe-area-inset-left, 1.25rem)); }

/* Breadcrumb */
.ll-article-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 0.8125rem; }
.ll-article-crumb a { color: hsl(215 16% 47%); text-decoration: none; }
.ll-article-crumb a:hover { color: hsl(217 33% 17%); text-decoration: underline; }
.ll-article-crumb-sep { color: hsl(213 27% 80%); }
.ll-article-crumb-current { color: hsl(215 25% 27%); font-weight: 500; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Back link */
.ll-article-back { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; color: hsl(215 19% 40%); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.ll-article-back .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-article-back:hover { color: hsl(217 33% 17%); }

/* Header */
.ll-article-header { margin-bottom: 2rem; }
.ll-article-metarow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.ll-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ll-article-readtime, .ll-article-date { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: hsl(var(--ll-muted-foreground)); }
.ll-article-readtime .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-article-simplify {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; height: 2.5rem; padding: 0 1rem;
  border: 1px solid hsl(214 32% 91%); border-radius: 0.75rem; background: hsl(210 40% 96%);
  color: hsl(215 25% 27%); font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.ll-article-simplify .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-article-simplify:disabled { opacity: 0.55; cursor: not-allowed; }
.ll-article-title { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; color: hsl(217 33% 17%); line-height: 1.2; margin: 0 0 1rem; }
.ll-article-summary { font-size: 1.0625rem; line-height: 1.6; color: hsl(var(--ll-muted-foreground)); margin: 0; }

/* --- Prose (rendered markdown) --- */
.ll-prose { color: hsl(215 19% 35%); font-size: 1rem; line-height: 1.7; margin-bottom: 3rem; }
.ll-prose > *:first-child { margin-top: 0; }
.ll-prose h1 { font-size: 1.75rem; font-weight: 700; color: hsl(217 33% 17%); margin: 2rem 0 1rem; letter-spacing: -0.01em; }
.ll-prose h2 { font-size: 1.5rem; font-weight: 700; color: hsl(217 33% 17%); margin: 2rem 0 1rem; letter-spacing: -0.01em; }
.ll-prose h3 { font-size: 1.1875rem; font-weight: 600; color: hsl(215 25% 27%); margin: 1.5rem 0 0.75rem; }
.ll-prose h4, .ll-prose h5, .ll-prose h6 { font-size: 1.0625rem; font-weight: 600; color: hsl(215 25% 27%); margin: 1.25rem 0 0.5rem; }
.ll-prose p { margin: 0 0 1rem; }
.ll-prose ul, .ll-prose ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.ll-prose li { margin-bottom: 0.375rem; }
.ll-prose a { color: hsl(var(--ll-accent)); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.ll-prose a:hover { color: hsl(211 100% 42%); }
.ll-prose strong { font-weight: 600; color: hsl(217 33% 17%); }
.ll-prose em { font-style: italic; }
.ll-prose code { background: hsl(210 40% 94%); padding: 0.15rem 0.4rem; border-radius: 0.375rem; font-family: var(--ll-font-mono); font-size: 0.875em; color: hsl(215 25% 27%); }
.ll-prose blockquote { margin: 1.25rem 0; padding: 0.5rem 0 0.5rem 1rem; border-left: 4px solid hsl(213 27% 84%); background: hsl(210 40% 98%); border-radius: 0 0.5rem 0.5rem 0; font-style: italic; color: hsl(215 19% 40%); }
.ll-prose blockquote p { margin: 0; }

/* --- Tags --- */
.ll-article-tags { margin-bottom: 3rem; }
.ll-article-tags-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; color: hsl(215 16% 47%); }
.ll-article-tags-head .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-article-tags-head span { font-size: 0.875rem; font-weight: 500; color: hsl(215 19% 40%); }
.ll-article-tags-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ll-article-tag { padding: 0.25rem 0.625rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 500; background: hsl(210 40% 96%); color: hsl(215 19% 40%); }

/* --- Related sections --- */
.ll-article-related { border-top: 1px solid hsl(214 32% 91%); padding-top: 2rem; margin-top: 2rem; }
.ll-article-related-title { font-size: 1.25rem; font-weight: 700; color: hsl(217 33% 17%); margin: 0 0 1.5rem; }

.ll-article-related-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .ll-article-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ll-article-related-grid { grid-template-columns: repeat(3, 1fr); } }
.ll-article-pep {
  display: flex; flex-direction: column; min-width: 0; padding: 1rem; background: #fff;
  border: 1px solid hsl(214 32% 91%); border-radius: var(--ll-radius-md); text-decoration: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ll-article-pep:hover { box-shadow: 0 8px 20px -8px rgb(15 23 42 / 0.14); border-color: hsl(213 27% 84%); }
.ll-article-pep-name { font-size: 0.9375rem; font-weight: 600; color: hsl(215 25% 27%); margin: 0 0 0.5rem; }
.ll-article-pep-desc {
  font-size: 0.8125rem; line-height: 1.5; color: hsl(var(--ll-muted-foreground)); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ll-article-pep-benefits { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }
.ll-article-pep-benefit { padding: 0.15rem 0.5rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 500; background: hsl(210 40% 96%); color: hsl(215 19% 40%); border: 1px solid hsl(214 32% 91%); }

.ll-article-related-articles-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .ll-article-related-articles-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- CTA --- */
.ll-article-cta { margin-top: 3rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ll-article-pep { transition: none; }
}

/* ============================================================
   18. Trending / Hot Sheet (page-most-popular.php → /most-popular/)
   White canvas; uses theme grayscale tokens (not the slate palette).
   Namespaced .ll-hot-*.
   ============================================================ */
.ll-hot { background: hsl(var(--ll-background)); padding: calc(var(--ll-navbar-height) + 3rem) 0 5rem; }

/* Header */
.ll-hot-header { max-width: 40rem; margin: 0 auto 3rem; padding: 0 1.5rem; text-align: center; }
.ll-hot-header-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;
  border-radius: 1rem; background: hsl(var(--ll-secondary)); color: hsl(var(--ll-foreground)); margin-bottom: 1.5rem;
}
.ll-hot-header-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-hot-title { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.03em; color: hsl(var(--ll-foreground)); margin-bottom: 1rem; }
.ll-hot-dek { font-size: 1.0625rem; line-height: 1.6; color: hsl(var(--ll-muted-foreground)); margin: 0; }

/* List */
.ll-hot-list { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.ll-hot-row {
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem;
  background: hsl(var(--ll-card)); border: 1px solid hsl(var(--ll-border) / 0.5);
  border-radius: var(--ll-radius-md); text-decoration: none; color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ll-hot-row:hover { box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.1); border-color: hsl(var(--ll-border)); }
.ll-hot-row.is-top3 { border-color: hsl(var(--ll-foreground) / 0.2); }

/* Rank badge */
.ll-hot-rank {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 700;
  background: hsl(var(--ll-secondary)); color: hsl(var(--ll-muted-foreground));
}
.ll-hot-rank.is-top3 { background: hsl(var(--ll-foreground)); color: hsl(var(--ll-background)); }
.ll-hot-rank .ll-svg-icon { width: 1.25rem; height: 1.25rem; }

/* Info */
.ll-hot-info { flex: 1; min-width: 0; }
.ll-hot-info-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.ll-hot-name { font-size: 0.9375rem; font-weight: 600; color: hsl(var(--ll-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-hot-type {
  display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; padding: 0.15rem 0.5rem;
  border: 1px solid hsl(var(--ll-border)); border-radius: 999px; font-size: 0.6875rem; font-weight: 500;
  color: hsl(var(--ll-muted-foreground));
}
.ll-hot-type .ll-svg-icon { width: 0.8125rem; height: 0.8125rem; }
.ll-hot-cat { display: block; font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); margin-bottom: 0.5rem; }
.ll-hot-barrow { display: flex; align-items: center; gap: 0.75rem; }
.ll-hot-track { flex: 1; height: 0.375rem; background: hsl(var(--ll-secondary)); border-radius: 999px; overflow: hidden; }
.ll-hot-fill { display: block; height: 100%; background: hsl(var(--ll-foreground)); border-radius: 999px; }
.ll-hot-pop { width: 2rem; text-align: right; font-size: 0.75rem; font-weight: 500; color: hsl(var(--ll-muted-foreground)); }

/* Arrow */
.ll-hot-arrow { display: inline-flex; flex-shrink: 0; color: hsl(var(--ll-muted-foreground)); transition: color 0.2s ease, transform 0.2s ease; }
.ll-hot-arrow .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-hot-row:hover .ll-hot-arrow { color: hsl(var(--ll-foreground)); transform: translateX(3px); }

/* CTA */
.ll-hot-cta { text-align: center; margin-top: 3rem; }
.ll-hot-cta-dek { color: hsl(var(--ll-muted-foreground)); margin-bottom: 1rem; }
.ll-hot-cta-btn { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
  .ll-hot-row, .ll-hot-arrow { transition: none; }
}

/* ============================================================
   19. Community Forum feed (page-forum.php → /forum/)
   White canvas, theme tokens. Namespaced .ll-forum-*.
   ============================================================ */
.ll-forum { background: hsl(var(--ll-background)); padding: calc(var(--ll-navbar-height) + 3rem) 0 5rem; }
.ll-forum-wrap { width: 100%; max-width: 48rem; margin-inline: auto; padding-inline: max(1.25rem, env(safe-area-inset-left, 1.25rem)); }

/* Header */
.ll-forum-header { margin-bottom: 2rem; }
.ll-forum-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; color: hsl(var(--ll-foreground)); margin: 0; }
.ll-forum-title .ll-svg-icon { width: 1.75rem; height: 1.75rem; }
.ll-forum-dek { margin: 0.5rem 0 0; color: hsl(var(--ll-muted-foreground)); }

/* CTA banner */
.ll-forum-cta {
  display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;
  padding: 1.5rem; border: 1px solid hsl(var(--ll-border)); border-radius: 1rem;
  background: hsl(var(--ll-foreground)); color: hsl(var(--ll-background));
}
@media (min-width: 640px) { .ll-forum-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 2rem; } }
.ll-forum-cta-eyebrow { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.7; margin: 0 0 0.5rem; }
.ll-forum-cta-title { font-size: 1.375rem; font-weight: 600; line-height: 1.2; margin: 0; }
.ll-forum-cta-sub { font-size: 0.875rem; opacity: 0.8; margin: 0.5rem 0 0; max-width: 28rem; }
.ll-forum-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex-shrink: 0;
  height: 3rem; padding: 0 1.5rem; border-radius: 0.75rem; background: hsl(var(--ll-background));
  color: hsl(var(--ll-foreground)); font-size: 0.875rem; font-weight: 600; text-decoration: none;
  transition: opacity 0.15s ease;
}
.ll-forum-cta-btn:hover { opacity: 0.9; color: hsl(var(--ll-foreground)); }
.ll-forum-cta-btn .ll-svg-icon { width: 1rem; height: 1rem; }

/* Feed */
.ll-forum-list { display: flex; flex-direction: column; gap: 0.75rem; }
.ll-forum-post {
  display: block; padding: 1rem; border: 1px solid hsl(var(--ll-border)); border-radius: var(--ll-radius-md);
  background: hsl(var(--ll-card)); color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.ll-forum-post:hover { border-color: hsl(var(--ll-accent) / 0.4); box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.1); }
.ll-forum-post-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; }
.ll-forum-post-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.ll-forum-peptide {
  display: inline-flex; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600;
  background: hsl(var(--ll-secondary)); color: hsl(var(--ll-secondary-foreground));
}
.ll-forum-kind {
  display: inline-flex; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 500;
  border: 1px solid hsl(var(--ll-border)); color: hsl(var(--ll-muted-foreground)); text-transform: capitalize;
}
.ll-forum-stars { display: inline-flex; gap: 1px; }
.ll-forum-star { display: inline-flex; color: hsl(var(--ll-border)); }
.ll-forum-star .ll-svg-icon { width: 0.8125rem; height: 0.8125rem; }
.ll-forum-star.is-on { color: hsl(38 92% 50%); }
.ll-forum-star.is-on .ll-svg-icon { fill: hsl(38 92% 50%); }
.ll-forum-date { font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); }
.ll-forum-post-title { font-size: 0.9375rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0 0 0.25rem; }
.ll-forum-post-body {
  font-size: 0.875rem; line-height: 1.5; color: hsl(var(--ll-muted-foreground)); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ll-forum-post-author { font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); margin: 0.5rem 0 0; }
.ll-forum-empty { color: hsl(var(--ll-muted-foreground)); }

@media (prefers-reduced-motion: reduce) { .ll-forum-post { transition: none; } }

/* ============================================================
   20. Peptide Quiz (page-quiz.php → /quiz/)
   White canvas, theme tokens. Namespaced .ll-quiz-*.
   ============================================================ */
.ll-quiz { background: hsl(var(--ll-background)); padding: calc(var(--ll-navbar-height) + 3rem) 0 5rem; }

/* Hero */
.ll-quiz-hero { max-width: 42rem; margin: 0 auto 3rem; padding: 0 1.5rem; text-align: center; }
.ll-quiz-hero-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;
  border-radius: 1rem; background: hsl(var(--ll-secondary)); color: hsl(var(--ll-foreground)); margin-bottom: 1.5rem;
}
.ll-quiz-hero-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-quiz-title { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.03em; color: hsl(var(--ll-foreground)); margin-bottom: 1rem; }
.ll-quiz-dek { font-size: 1.0625rem; line-height: 1.6; color: hsl(var(--ll-muted-foreground)); margin: 0; }

/* Picker */
.ll-quiz-picker { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }
.ll-quiz-options { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .ll-quiz-options { grid-template-columns: repeat(2, 1fr); } }
.ll-quiz-option {
  display: block; width: 100%; text-align: left; padding: 1.5rem; cursor: pointer;
  background: hsl(var(--ll-card)); border: 1px solid hsl(var(--ll-border) / 0.5); border-radius: var(--ll-radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.ll-quiz-option:hover { border-color: hsl(var(--ll-border)); box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.1); }
.ll-quiz-option.is-selected { background: hsl(var(--ll-foreground)); border-color: hsl(var(--ll-foreground)); color: hsl(var(--ll-background)); box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.35); }
.ll-quiz-option-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  border-radius: 0.75rem; background: hsl(var(--ll-secondary)); color: hsl(var(--ll-foreground));
}
.ll-quiz-option.is-selected .ll-quiz-option-icon { background: hsl(var(--ll-background) / 0.2); color: hsl(var(--ll-background)); }
.ll-quiz-option-icon .ll-svg-icon { width: 1.25rem; height: 1.25rem; }
.ll-quiz-option { display: flex; align-items: flex-start; gap: 1rem; }
.ll-quiz-option-body { flex: 1; min-width: 0; }
.ll-quiz-option-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.ll-quiz-option-label { font-size: 0.9375rem; font-weight: 600; color: hsl(var(--ll-foreground)); }
.ll-quiz-option.is-selected .ll-quiz-option-label { color: hsl(var(--ll-background)); }
.ll-quiz-option-check { display: none; color: hsl(var(--ll-background)); }
.ll-quiz-option-check .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-quiz-option.is-selected .ll-quiz-option-check { display: inline-flex; }
.ll-quiz-option-desc { font-size: 0.875rem; line-height: 1.5; color: hsl(var(--ll-muted-foreground)); }
.ll-quiz-option.is-selected .ll-quiz-option-desc { color: hsl(var(--ll-background) / 0.7); }

/* CTA */
.ll-quiz-cta { text-align: center; }
.ll-quiz-submit { background: hsl(var(--ll-foreground)); color: hsl(var(--ll-background)); }
.ll-quiz-submit:hover:not(:disabled) { background: hsl(var(--ll-foreground)); opacity: 0.9; }
.ll-quiz-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.ll-quiz-hint { font-size: 0.875rem; color: hsl(var(--ll-muted-foreground)); margin-top: 0.75rem; }

/* Results */
.ll-quiz-results { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.ll-quiz-results-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .ll-quiz-results-head { flex-direction: row; align-items: center; justify-content: space-between; } }
.ll-quiz-results-title { font-size: 1.5rem; font-weight: 700; color: hsl(var(--ll-foreground)); margin: 0 0 0.25rem; }
.ll-quiz-results-count { color: hsl(var(--ll-muted-foreground)); margin: 0; }
.ll-quiz-retake { flex-shrink: 0; border-radius: 999px; }
.ll-quiz-retake .ll-svg-icon { width: 1rem; height: 1rem; }

.ll-quiz-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.ll-quiz-chip {
  display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; border-radius: 999px;
  background: hsl(var(--ll-foreground)); color: hsl(var(--ll-background)); font-size: 0.8125rem; font-weight: 500;
}

.ll-quiz-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 3rem; }
@media (min-width: 640px) { .ll-quiz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ll-quiz-grid { grid-template-columns: repeat(3, 1fr); } }
.ll-quiz-card {
  display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 1.25rem;
  background: hsl(var(--ll-card)); border: 1px solid hsl(var(--ll-border) / 0.5); border-radius: var(--ll-radius-md);
  text-decoration: none; color: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ll-quiz-card:hover { border-color: hsl(var(--ll-border)); box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.12); }
.ll-quiz-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; }
.ll-quiz-card-name { font-size: 0.9375rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0; }
.ll-quiz-card-type { flex-shrink: 0; padding: 0.1rem 0.5rem; border-radius: 999px; background: hsl(var(--ll-secondary)); color: hsl(var(--ll-muted-foreground)); font-size: 0.6875rem; }
.ll-quiz-card-cat { font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); margin: 0 0 0.75rem; }
.ll-quiz-card-desc {
  font-size: 0.8125rem; line-height: 1.5; color: hsl(var(--ll-muted-foreground)); margin: 0 0 0.75rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ll-quiz-card-benefits { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: auto; }
.ll-quiz-card-benefit { padding: 0.1rem 0.5rem; border-radius: 999px; background: hsl(var(--ll-secondary)); color: hsl(var(--ll-muted-foreground)); font-size: 0.6875rem; }

.ll-quiz-empty { text-align: center; padding: 2rem 0 3rem; color: hsl(var(--ll-muted-foreground)); }

/* Feedback / newsletter */
.ll-quiz-feedback {
  text-align: center; max-width: 34rem; margin: 0 auto; padding: 2.5rem 2rem;
  background: hsl(var(--ll-secondary) / 0.4); border: 1px solid hsl(var(--ll-border) / 0.5); border-radius: var(--ll-radius);
}
.ll-quiz-feedback-icon { display: flex; justify-content: center; margin-bottom: 1rem; color: hsl(var(--ll-foreground)); }
.ll-quiz-feedback-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-quiz-feedback-title { font-size: 1.25rem; font-weight: 700; color: hsl(var(--ll-foreground)); margin: 0 0 0.5rem; }
.ll-quiz-feedback-dek { color: hsl(var(--ll-muted-foreground)); line-height: 1.6; margin: 0 0 1.5rem; }
.ll-quiz-feedback-form .ll-newsletter-card { background: transparent; border: 0; padding: 0; box-shadow: none; }
.ll-quiz-feedback-form .ll-newsletter-card > h3, .ll-quiz-feedback-form .ll-newsletter-card > p { display: none; }
.ll-quiz-feedback-form .ll-newsletter-form { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .ll-quiz-option, .ll-quiz-card { transition: none; }
}

/* ============================================================
   21. Blogs landing (page-blogs.php → /blogs/)
   3 channel cards (Output Lab / Glow and Go / Second Wind Science).
   Namespaced .ll-blogs-*. Accent gradients: amber/orange, pink/rose, teal/cyan.
   ============================================================ */
.ll-blogs { background: hsl(var(--ll-muted) / 0.45); min-height: 100vh; padding: calc(var(--ll-navbar-height) + 3rem) 0 5rem; }
.ll-blogs-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: max(1.25rem, env(safe-area-inset-left, 1.25rem)); }

/* Header */
.ll-blogs-header { text-align: center; margin-bottom: 3.5rem; }
.ll-blogs-header-icon { display: flex; justify-content: center; margin-bottom: 1rem; color: hsl(215 19% 40%); }
.ll-blogs-header-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-blogs-title { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.03em; color: hsl(217 33% 17%); margin-bottom: 1rem; }
.ll-blogs-title-accent { color: hsl(215 16% 47%); margin-left: 0.4ch; }
.ll-blogs-dek { font-size: 1.125rem; color: hsl(var(--ll-muted-foreground)); max-width: 40rem; margin: 0 auto; }

/* Cards */
.ll-blogs-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .ll-blogs-grid { grid-template-columns: repeat(3, 1fr); } }
.ll-blogs-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid hsl(214 32% 91%);
  border-radius: var(--ll-radius-md); overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.ll-blogs-card:hover { box-shadow: 0 16px 36px -12px rgb(15 23 42 / 0.18); transform: translateY(-2px); }
.ll-blogs-card-top { padding: 2rem 1.5rem; color: #fff; }
.ll-blogs-card--amber .ll-blogs-card-top { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.ll-blogs-card--pink  .ll-blogs-card-top { background: linear-gradient(135deg, #ec4899, #e11d48); }
.ll-blogs-card--teal  .ll-blogs-card-top { background: linear-gradient(135deg, #14b8a6, #0891b2); }
.ll-blogs-card-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;
  border-radius: 0.875rem; background: rgb(255 255 255 / 0.2); margin-bottom: 1rem;
}
.ll-blogs-card-icon .ll-svg-icon { width: 1.5rem; height: 1.5rem; }
.ll-blogs-card-title { font-size: 1.375rem; font-weight: 700; margin: 0 0 0.25rem; }
.ll-blogs-card-tagline { font-size: 0.9375rem; color: rgb(255 255 255 / 0.85); margin: 0; }
.ll-blogs-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.ll-blogs-card-desc { font-size: 0.875rem; line-height: 1.6; color: hsl(215 19% 40%); margin: 0 0 1.25rem; }
.ll-blogs-card-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.ll-blogs-card-topic { padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; background: hsl(210 40% 96%); color: hsl(215 25% 30%); border: 1px solid hsl(214 32% 91%); }
.ll-blogs-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1rem; border-top: 1px solid hsl(210 40% 96%); }
.ll-blogs-card-explore { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); }
.ll-blogs-card-visit { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: gap 0.15s ease; }
.ll-blogs-card-visit .ll-svg-icon { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.ll-blogs-card--amber .ll-blogs-card-visit { color: #ea580c; }
.ll-blogs-card--pink  .ll-blogs-card-visit { color: #e11d48; }
.ll-blogs-card--teal  .ll-blogs-card-visit { color: #0891b2; }
.ll-blogs-card-visit:hover .ll-svg-icon { transform: translateX(3px); }

/* Research CTA */
.ll-blogs-research-cta { text-align: center; }
.ll-blogs-research-cta p { font-size: 1.0625rem; color: hsl(215 19% 40%); margin: 0 0 0.5rem; }
.ll-blogs-research-cta a { display: inline-flex; align-items: center; gap: 0.375rem; color: hsl(var(--ll-accent)); font-weight: 600; text-decoration: none; }
.ll-blogs-research-cta a:hover { text-decoration: underline; }
.ll-blogs-research-cta a .ll-svg-icon { width: 1rem; height: 1rem; }

/* ============================================================
   22. Blog channel archive (taxonomy-blog_channel.php → /blogs/{channel}/)
   Gradient hero per channel (reuses .ll-blogs-card--* accent palette).
   Namespaced .ll-blog-*.
   ============================================================ */
.ll-blog-channel { background: hsl(var(--ll-muted) / 0.45); min-height: 100vh; }

/* Hero */
.ll-blog-hero { color: #fff; padding: calc(var(--ll-navbar-height) + 2rem) 0 3rem; }
.ll-blog-hero--amber { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.ll-blog-hero--pink  { background: linear-gradient(135deg, #ec4899, #e11d48); }
.ll-blog-hero--teal  { background: linear-gradient(135deg, #14b8a6, #0891b2); }
.ll-blog-back { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; color: rgb(255 255 255 / 0.85); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.ll-blog-back .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-blog-back:hover { color: #fff; }
.ll-blog-hero-row { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .ll-blog-hero-row { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.ll-blog-hero-heading { display: flex; align-items: center; gap: 1rem; }
.ll-blog-hero-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; flex-shrink: 0;
  border-radius: 1rem; background: rgb(255 255 255 / 0.2);
}
.ll-blog-hero-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-blog-hero-title { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.ll-blog-hero-tagline { font-size: 1.0625rem; color: rgb(255 255 255 / 0.85); margin: 0.25rem 0 0; }
.ll-blog-hero-desc { max-width: 42rem; font-size: 0.9375rem; line-height: 1.6; color: rgb(255 255 255 / 0.9); margin: 0; }
.ll-blog-hero .ll-share .btn-ll-outline,
.ll-blog-hero .ll-share .ll-btn-hero { background: rgb(255 255 255 / 0.15); border-color: rgb(255 255 255 / 0.35); color: #fff; }
.ll-blog-hero .ll-share .btn-ll-outline:hover { background: rgb(255 255 255 / 0.25); color: #fff; }

/* Body */
.ll-blog-body { padding: 3rem 0 5rem; }

/* Featured */
.ll-blog-featured { margin-bottom: 3rem; }
.ll-blog-featured-title { font-size: 1.375rem; font-weight: 700; color: hsl(217 33% 17%); margin: 0 0 1.25rem; }
.ll-blog-featured-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .ll-blog-featured-grid { grid-template-columns: repeat(2, 1fr); } }
.ll-blog-featured-card {
  display: block; padding: 1.5rem; border-radius: var(--ll-radius-md); color: #fff; text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.ll-blog-featured-card:hover { box-shadow: 0 16px 36px -12px rgb(15 23 42 / 0.25); transform: translateY(-2px); }
.ll-blog-featured-card--amber { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.ll-blog-featured-card--pink  { background: linear-gradient(135deg, #ec4899, #e11d48); }
.ll-blog-featured-card--teal  { background: linear-gradient(135deg, #14b8a6, #0891b2); }
.ll-blog-featured-top { margin-bottom: 0.75rem; }
.ll-blog-featured-badge { display: inline-flex; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; background: rgb(255 255 255 / 0.2); }
.ll-blog-featured-card-title { font-size: 1.1875rem; font-weight: 600; margin: 0 0 0.625rem; }
.ll-blog-featured-card-desc { font-size: 0.875rem; line-height: 1.55; color: rgb(255 255 255 / 0.85); margin: 0 0 1.25rem; }
.ll-blog-featured-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / 0.2); }
.ll-blog-featured-foot-left { display: flex; align-items: center; gap: 0.75rem; }
.ll-blog-featured-tag { padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.6875rem; border: 1px solid rgb(255 255 255 / 0.3); }
.ll-blog-featured-time { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: rgb(255 255 255 / 0.7); }
.ll-blog-featured-time .ll-svg-icon { width: 0.75rem; height: 0.75rem; }
.ll-blog-featured-cta { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; font-weight: 600; }
.ll-blog-featured-cta .ll-svg-icon { width: 0.875rem; height: 0.875rem; }

/* Filter bar */
.ll-blog-filterbar { background: #fff; border: 1px solid hsl(214 32% 91%); border-radius: var(--ll-radius-md); padding: 1rem; margin-bottom: 2rem; }
.ll-blog-search { position: relative; margin-bottom: 0.875rem; }
.ll-blog-search .ll-svg-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: hsl(215 16% 55%); pointer-events: none; }
.ll-blog-search input {
  width: 100%; height: 2.75rem; padding: 0 0.875rem 0 2.5rem; border: 1px solid hsl(214 32% 91%);
  border-radius: 0.75rem; background: hsl(210 40% 98%); color: hsl(217 33% 17%); font-size: 0.875rem; font-family: inherit;
}
.ll-blog-search input:focus { outline: none; border-color: hsl(215 20% 65%); box-shadow: 0 0 0 3px hsl(215 25% 27% / 0.08); }
.ll-blog-tagpills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ll-blog-tagpill {
  padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; text-decoration: none;
  border: 1px solid hsl(214 32% 91%); color: hsl(215 19% 40%); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ll-blog-tagpill:hover { background: hsl(210 40% 96%); }
.ll-blog-tagpill--amber.is-active { background: #ea580c; border-color: #ea580c; color: #fff; }
.ll-blog-tagpill--pink.is-active  { background: #e11d48; border-color: #e11d48; color: #fff; }
.ll-blog-tagpill--teal.is-active  { background: #0891b2; border-color: #0891b2; color: #fff; }

/* Post cards grid */
.ll-blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .ll-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ll-blog-grid { grid-template-columns: repeat(3, 1fr); } }
.ll-blog-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 1.5rem;
  background: #fff; border: 1px solid hsl(214 32% 91%); border-radius: var(--ll-radius-md);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.ll-blog-card:hover { box-shadow: 0 12px 28px -8px rgb(15 23 42 / 0.14); border-color: hsl(213 27% 84%); }
.ll-blog-card-top { margin-bottom: 1rem; }
.ll-blog-card-tag { display: inline-flex; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; }
.ll-blog-card-tag--amber { background: hsl(45 93% 90%); color: hsl(28 74% 35%); }
.ll-blog-card-tag--pink  { background: hsl(330 81% 94%); color: hsl(340 65% 45%); }
.ll-blog-card-tag--teal  { background: hsl(168 76% 90%); color: hsl(175 70% 29%); }
.ll-blog-card-title { margin: 0 0 0.75rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.ll-blog-card-titlelink { color: hsl(215 25% 27%); text-decoration: none; }
.ll-blog-card-titlelink::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.ll-blog-card:hover .ll-blog-card-titlelink { color: hsl(217 33% 17%); }
.ll-blog-card-summary {
  margin: 0 0 1.25rem; font-size: 0.8125rem; line-height: 1.55; color: hsl(var(--ll-muted-foreground));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ll-blog-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1rem; border-top: 1px solid hsl(210 40% 96%); }
.ll-blog-card-read { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); }
.ll-blog-card-read .ll-svg-icon { width: 0.8125rem; height: 0.8125rem; }
.ll-blog-card-more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; }
.ll-blog-card-more .ll-svg-icon { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.ll-blog-card-more--amber { color: #ea580c; }
.ll-blog-card-more--pink  { color: #e11d48; }
.ll-blog-card-more--teal  { color: #0891b2; }
.ll-blog-card:hover .ll-blog-card-more .ll-svg-icon { transform: translateX(3px); }

/* Pagination (shares Articles' page-numbers look) */
.ll-blog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.375rem; margin-top: 3rem; }
.ll-blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 2.5rem; height: 2.25rem;
  padding: 0 0.625rem; border: 1px solid hsl(214 32% 91%); border-radius: 0.625rem; background: #fff;
  color: hsl(215 25% 27%); font-size: 0.8125rem; font-weight: 500; text-decoration: none;
}
.ll-blog-pagination a.page-numbers:hover { background: hsl(210 40% 96%); }
.ll-blog-pagination .page-numbers.current { background: hsl(215 25% 27%); border-color: hsl(215 25% 27%); color: #fff; }
.ll-blog-pagination .page-numbers.dots { border: 0; background: transparent; color: hsl(215 16% 60%); min-width: auto; padding: 0 0.25rem; }

/* Empty state */
.ll-blog-empty { text-align: center; padding: 4rem 1rem; }
.ll-blog-empty-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;
  border-radius: 999px; background: hsl(210 40% 96%); color: hsl(215 16% 47%); margin-bottom: 1rem;
}
.ll-blog-empty-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-blog-empty-title { font-size: 1.25rem; font-weight: 600; color: hsl(215 25% 27%); margin-bottom: 0.5rem; }
.ll-blog-empty-dek { color: hsl(var(--ll-muted-foreground)); margin-bottom: 1rem; }
.ll-blog-empty-btn--amber { background: #ea580c; }
.ll-blog-empty-btn--pink  { background: #e11d48; }
.ll-blog-empty-btn--teal  { background: #0891b2; }

/* ============================================================
   23. Single Blog post (single.php → native `post` single)
   Reuses .ll-prose for body copy. Namespaced .ll-blogpost-*.
   ============================================================ */
.ll-blogpost { background: hsl(var(--ll-muted) / 0.45); min-height: 100vh; padding: calc(var(--ll-navbar-height) + 1.5rem) 0 4rem; }
.ll-blogpost-wrap { width: 100%; max-width: 56rem; margin-inline: auto; padding-inline: max(1.25rem, env(safe-area-inset-left, 1.25rem)); }

.ll-blogpost-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 0.8125rem; }
.ll-blogpost-crumb a { color: hsl(215 16% 47%); text-decoration: none; }
.ll-blogpost-crumb a:hover { color: hsl(217 33% 17%); text-decoration: underline; }
.ll-blogpost-crumb-sep { color: hsl(213 27% 80%); }
.ll-blogpost-crumb-current { color: hsl(215 25% 27%); font-weight: 500; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ll-blogpost-back { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; color: hsl(215 19% 40%); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.ll-blogpost-back .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-blogpost-back:hover { color: hsl(217 33% 17%); }

.ll-blogpost-header { margin-bottom: 2rem; }
.ll-blogpost-metarow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.ll-blogpost-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ll-blog-badge { display: inline-flex; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; }
.ll-blog-badge--amber { background: hsl(45 93% 90%); color: hsl(28 74% 35%); }
.ll-blog-badge--pink  { background: hsl(330 81% 94%); color: hsl(340 65% 45%); }
.ll-blog-badge--teal  { background: hsl(168 76% 90%); color: hsl(175 70% 29%); }
.ll-blogpost-readtime, .ll-blogpost-date { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: hsl(var(--ll-muted-foreground)); }
.ll-blogpost-readtime .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-blogpost-title { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; color: hsl(217 33% 17%); line-height: 1.2; margin: 0 0 1rem; }
.ll-blogpost-summary { font-size: 1.0625rem; line-height: 1.6; color: hsl(var(--ll-muted-foreground)); margin: 0; }

.ll-blogpost-body { margin-bottom: 3rem; }

.ll-blogpost-tags { margin-bottom: 3rem; }
.ll-blogpost-tags-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; color: hsl(215 16% 47%); }
.ll-blogpost-tags-head .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-blogpost-tags-head span { font-size: 0.875rem; font-weight: 500; color: hsl(215 19% 40%); }
.ll-blogpost-tags-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ll-blogpost-tag { padding: 0.25rem 0.625rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 500; background: hsl(210 40% 96%); color: hsl(215 19% 40%); }

.ll-blogpost-cta { margin-top: 3rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ll-blogs-card, .ll-blogs-card-visit .ll-svg-icon, .ll-blog-featured-card, .ll-blog-card, .ll-blog-card-more .ll-svg-icon { transition: none; }
}

/* ============================================================
   24. Glossary (archive-glossary_term.php → /glossary/)
   Client-side search/filter (tiny dataset, ~47 terms); A-Z grouped,
   sticky letter headers, hash-highlight on deep link. Namespaced .ll-glossary-*.
   ============================================================ */
.ll-glossary { background: linear-gradient(to bottom, hsl(210 40% 98%), #fff); min-height: 100vh; padding: calc(var(--ll-navbar-height) + 2.5rem) 0 4rem; }

/* Header */
.ll-glossary-header { text-align: center; margin-bottom: 2.5rem; }
.ll-glossary-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px;
  background: hsl(210 40% 96%); color: hsl(215 19% 40%); font-size: 0.875rem; margin-bottom: 1rem;
}
.ll-glossary-badge .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-glossary-title { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.03em; color: hsl(217 33% 17%); margin-bottom: 1rem; }
.ll-glossary-dek { font-size: 1.125rem; color: hsl(var(--ll-muted-foreground)); max-width: 40rem; margin: 0 auto; }

/* Controls */
.ll-glossary-controls { max-width: 56rem; margin: 0 auto 2.5rem; }
.ll-glossary-search { position: relative; margin-bottom: 1.5rem; }
.ll-glossary-search .ll-svg-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: hsl(215 16% 55%); pointer-events: none; }
.ll-glossary-search input {
  width: 100%; height: 3rem; padding: 0 1rem 0 3rem; border: 1px solid hsl(214 32% 91%);
  border-radius: 0.75rem; background: #fff; color: hsl(217 33% 17%); font-size: 1.0625rem; font-family: inherit;
}
.ll-glossary-search input:focus { outline: none; border-color: hsl(215 20% 65%); box-shadow: 0 0 0 3px hsl(215 25% 27% / 0.08); }
.ll-glossary-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.ll-glossary-pill {
  padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; border: 0; cursor: pointer;
  background: hsl(210 40% 96%); color: hsl(215 19% 40%); transition: background-color 0.15s ease, color 0.15s ease;
}
.ll-glossary-pill:hover { background: hsl(214 32% 91%); }
.ll-glossary-pill.is-active { background: hsl(215 25% 27%); color: #fff; }

/* Groups */
.ll-glossary-list { max-width: 56rem; margin: 0 auto; }
.ll-glossary-group { margin-bottom: 2rem; }
.ll-glossary-group-head { position: sticky; top: calc(var(--ll-navbar-height) - 1px); background: hsl(210 40% 98% / 0.95); backdrop-filter: blur(4px); padding: 0.5rem 0; z-index: 5; }
.ll-glossary-group-head h2 { font-size: 1.5rem; font-weight: 700; color: hsl(215 25% 27%); border-bottom: 1px solid hsl(214 32% 91%); padding-bottom: 0.5rem; margin: 0; }
.ll-glossary-group-cards { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }

/* Card */
.ll-glossary-card {
  scroll-margin-top: 7rem; background: #fff; border: 1px solid hsl(210 40% 94%); border-radius: var(--ll-radius-md);
  padding: 1.5rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.ll-glossary-card:hover { box-shadow: 0 8px 20px -8px rgb(15 23 42 / 0.12); }
.ll-glossary-card.is-highlighted { border-color: hsl(215 20% 65%); box-shadow: 0 0 0 3px hsl(215 25% 55% / 0.35), 0 8px 20px -8px rgb(15 23 42 / 0.16); }
.ll-glossary-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ll-glossary-card-term { font-size: 1.125rem; font-weight: 600; color: hsl(217 33% 17%); margin: 0 0 0.5rem; }
.ll-glossary-card-def { color: hsl(215 19% 40%); line-height: 1.6; }
.ll-glossary-card-def p { margin: 0 0 0.5rem; }
.ll-glossary-card-def p:last-child { margin-bottom: 0; }
.ll-glossary-card-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.ll-glossary-card-cat { padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; background: hsl(210 40% 96%); color: hsl(215 16% 47%); white-space: nowrap; }
.ll-glossary-card-link { font-size: 0.8125rem; color: hsl(215 16% 65%); text-decoration: none; }
.ll-glossary-card-link:hover { color: hsl(var(--ll-accent)); }

/* Empty state */
.ll-glossary-empty { text-align: center; padding: 3rem 0; color: hsl(var(--ll-muted-foreground)); }

/* Disclaimer */
.ll-glossary-disclaimer { max-width: 56rem; margin: 3rem auto 0; padding: 1.5rem; background: hsl(45 93% 96%); border: 1px solid hsl(45 86% 84%); border-radius: var(--ll-radius-md); }
.ll-glossary-disclaimer p { margin: 0; font-size: 0.875rem; color: hsl(28 74% 30%); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ll-glossary-card, .ll-glossary-pill { transition: none; }
}

/* ============================================================
   25. Single glossary term (single-glossary_term.php → /glossary/{slug}/)
   Reuses .ll-glossary-card-cat for the category badge, .ll-prose for body.
   Namespaced .ll-glterm-*.
   ============================================================ */
.ll-glterm { background: hsl(var(--ll-muted) / 0.45); min-height: 100vh; padding: calc(var(--ll-navbar-height) + 1.5rem) 0 4rem; }
.ll-glterm-wrap { width: 100%; max-width: 42rem; margin-inline: auto; padding-inline: max(1.25rem, env(safe-area-inset-left, 1.25rem)); }

.ll-glterm-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 0.8125rem; }
.ll-glterm-crumb a { color: hsl(215 16% 47%); text-decoration: none; }
.ll-glterm-crumb a:hover { color: hsl(217 33% 17%); text-decoration: underline; }
.ll-glterm-crumb-sep { color: hsl(213 27% 80%); }
.ll-glterm-crumb-current { color: hsl(215 25% 27%); font-weight: 500; }

.ll-glterm-back { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; color: hsl(215 19% 40%); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.ll-glterm-back .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-glterm-back:hover { color: hsl(217 33% 17%); }

.ll-glterm-header { margin-bottom: 1.5rem; }
.ll-glterm-header .ll-glossary-card-cat { display: inline-flex; margin-bottom: 0.75rem; }
.ll-glterm-title { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; color: hsl(217 33% 17%); margin: 0; }

.ll-glterm-body { margin-bottom: 2.5rem; }

.ll-glterm-related { border-top: 1px solid hsl(214 32% 91%); padding-top: 1.5rem; margin-bottom: 2.5rem; }
.ll-glterm-related-title { font-size: 1.0625rem; font-weight: 700; color: hsl(217 33% 17%); margin: 0 0 1rem; }
.ll-glterm-related-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ll-glterm-related-pill {
  padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 500;
  background: hsl(210 40% 96%); color: hsl(215 19% 40%); text-decoration: none; transition: background-color 0.15s ease;
}
.ll-glterm-related-pill:hover { background: hsl(214 32% 91%); }

.ll-glterm-cta { text-align: center; }

/* ============================================================
   26. Injection 101 (page-injection-101.php → /injection-101/)
   The canonical source for injection content — Starter Guide links here
   instead of re-embedding it. Namespaced .ll-inj101-*.
   ============================================================ */
.ll-inj101 { background: hsl(var(--ll-background)); }
.ll-inj101-narrow { max-width: 50rem; margin-inline: auto; }
.ll-inj101-narrow-wide { max-width: 70rem; margin-inline: auto; text-align: center; }

.ll-inj101-hero { padding: calc(var(--ll-navbar-height) + 3rem) 0 2rem; text-align: center; }
.ll-inj101-hero-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;
  border-radius: 1rem; background: hsl(var(--ll-secondary)); color: hsl(var(--ll-foreground)); margin-bottom: 1.5rem;
}
.ll-inj101-hero-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-inj101-title { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; color: hsl(var(--ll-foreground)); margin-bottom: 1rem; }
.ll-inj101-dek { font-size: 1.125rem; line-height: 1.7; color: hsl(var(--ll-muted-foreground)); max-width: 40rem; margin: 0 auto; }

.ll-inj101-disclaimer-wrap { padding-bottom: 1rem; }
.ll-inj101-disclaimer {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.25rem; border-radius: var(--ll-radius-md);
  background: hsl(var(--ll-secondary) / 0.5); border: 1px solid hsl(var(--ll-border) / 0.6);
}
.ll-inj101-disclaimer .ll-svg-icon { width: 1.25rem; height: 1.25rem; color: hsl(var(--ll-muted-foreground)); flex-shrink: 0; margin-top: 0.15rem; }
.ll-inj101-disclaimer p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: hsl(var(--ll-muted-foreground)); }
.ll-inj101-disclaimer strong { color: hsl(var(--ll-foreground)); }

.ll-inj101-sections { padding: 2.5rem 0; display: flex; flex-direction: column; gap: 1.5rem; }
.ll-inj101-section {
  background: hsl(var(--ll-card)); border: 1px solid hsl(var(--ll-border) / 0.5); border-radius: var(--ll-radius-md);
  overflow: hidden; transition: box-shadow 0.2s ease;
}
.ll-inj101-section:hover { box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.1); }
.ll-inj101-section-head { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid hsl(var(--ll-border) / 0.4); }
.ll-inj101-section-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  border-radius: 0.75rem; background: hsl(var(--ll-secondary)); color: hsl(var(--ll-foreground));
}
.ll-inj101-section-icon .ll-svg-icon { width: 1.25rem; height: 1.25rem; }
.ll-inj101-section-head h2 { font-size: 1.25rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0; }
.ll-inj101-section-body { padding: 1rem 1.5rem 1.5rem; color: hsl(var(--ll-muted-foreground)); line-height: 1.7; font-size: 0.9375rem; }
.ll-inj101-section-body p { margin: 0 0 1rem; }
.ll-inj101-section-body p:last-child { margin-bottom: 0; }
.ll-inj101-section-body ul, .ll-inj101-section-body ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.ll-inj101-section-body li { margin-bottom: 0.375rem; }
.ll-inj101-section-body strong { color: hsl(var(--ll-foreground)); font-weight: 500; }

.ll-inj101-supplies { padding: 3rem 0; background: hsl(var(--ll-secondary) / 0.4); }
.ll-inj101-supplies-head { text-align: center; margin-bottom: 2rem; }
.ll-inj101-supplies-head .ll-svg-icon { width: 2rem; height: 2rem; color: hsl(var(--ll-foreground)); margin-bottom: 0.75rem; }
.ll-inj101-supplies-head h2 { font-size: 1.5rem; font-weight: 700; color: hsl(var(--ll-foreground)); margin: 0 0 0.5rem; }
.ll-inj101-supplies-head p { color: hsl(var(--ll-muted-foreground)); margin: 0; }
.ll-inj101-supplies-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .ll-inj101-supplies-grid { grid-template-columns: repeat(2, 1fr); } }
.ll-inj101-supply {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: hsl(var(--ll-card));
  border: 1px solid hsl(var(--ll-border) / 0.4); border-radius: var(--ll-radius-md);
}
.ll-inj101-supply .ll-svg-icon { width: 1rem; height: 1rem; color: hsl(var(--ll-foreground)); flex-shrink: 0; }
.ll-inj101-supply span { font-size: 0.875rem; color: hsl(var(--ll-foreground) / 0.85); }

.ll-inj101-cta { padding: 5rem 0; text-align: center; }
.ll-inj101-cta > .ll-container > .ll-svg-icon { width: 2rem; height: 2rem; color: hsl(var(--ll-foreground)); margin-bottom: 1rem; }
.ll-inj101-cta h2 { font-size: 1.875rem; font-weight: 700; color: hsl(var(--ll-foreground)); margin: 0 0 1rem; }
.ll-inj101-cta p { color: hsl(var(--ll-muted-foreground)); max-width: 32rem; margin: 0 auto 2rem; line-height: 1.6; }
.ll-inj101-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* ============================================================
   27. How to Use This Site (page-site-guide.php → /site-guide/)
   Namespaced .ll-siteguide-*. The "quickstart" card pattern is shared
   with Starter Guide's Injection 101 CTA.
   ============================================================ */
.ll-siteguide { background: hsl(var(--ll-background)); }
.ll-siteguide-narrow { max-width: 40rem; margin-inline: auto; text-align: center; }
.ll-siteguide-narrow-wide { max-width: 60rem; margin-inline: auto; }

.ll-siteguide-hero { padding: calc(var(--ll-navbar-height) + 3rem) 0 1.5rem; text-align: center; }
.ll-siteguide-hero-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;
  border-radius: 1rem; background: hsl(var(--ll-secondary)); color: hsl(var(--ll-foreground)); margin-bottom: 1.5rem;
}
.ll-siteguide-hero-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-siteguide-title { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; color: hsl(var(--ll-foreground)); margin-bottom: 1rem; }
.ll-siteguide-dek { font-size: 1.125rem; line-height: 1.7; color: hsl(var(--ll-muted-foreground)); }

.ll-siteguide-quickstart-wrap { padding-bottom: 1rem; }
.ll-siteguide-quickstart, .ll-starter-section .ll-siteguide-quickstart {
  display: flex; align-items: flex-start; gap: 1rem; padding: 2rem; border-radius: var(--ll-radius-md);
  background: hsl(var(--ll-secondary) / 0.5); border: 1px solid hsl(var(--ll-border) / 0.5);
}
.ll-siteguide-quickstart-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  border-radius: 0.75rem; background: hsl(var(--ll-foreground)); color: hsl(var(--ll-background));
}
.ll-siteguide-quickstart-icon .ll-svg-icon { width: 1.25rem; height: 1.25rem; }
.ll-siteguide-quickstart h2 { font-size: 1.25rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0 0 0.5rem; }
.ll-siteguide-quickstart p { color: hsl(var(--ll-muted-foreground)); margin: 0 0 1rem; line-height: 1.6; }

.ll-siteguide-features { padding: 4rem 0; }
.ll-siteguide-features-head { text-align: center; margin-bottom: 3rem; }
.ll-siteguide-features-head h2 { font-size: 1.875rem; font-weight: 700; color: hsl(var(--ll-foreground)); margin: 0 0 0.75rem; }
.ll-siteguide-features-head p { color: hsl(var(--ll-muted-foreground)); margin: 0; }

.ll-siteguide-feature-list { display: flex; flex-direction: column; gap: 1.5rem; }
.ll-siteguide-feature {
  display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem; background: hsl(var(--ll-card));
  border: 1px solid hsl(var(--ll-border) / 0.5); border-radius: var(--ll-radius-md); transition: box-shadow 0.2s ease;
}
@media (min-width: 768px) { .ll-siteguide-feature { flex-direction: row; } }
.ll-siteguide-feature:hover { box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.1); }
.ll-siteguide-feature-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex-shrink: 0;
  border-radius: 1rem; background: hsl(var(--ll-secondary)); color: hsl(var(--ll-foreground));
}
.ll-siteguide-feature-icon .ll-svg-icon { width: 1.5rem; height: 1.5rem; }
.ll-siteguide-feature-body { flex: 1; min-width: 0; }
.ll-siteguide-feature-body h3 { font-size: 1.25rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0 0 0.5rem; }
.ll-siteguide-feature-desc { color: hsl(var(--ll-muted-foreground)); line-height: 1.6; margin: 0 0 1rem; }
.ll-siteguide-feature-tip {
  display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem; margin-bottom: 1rem;
  background: hsl(var(--ll-secondary) / 0.5); border-radius: var(--ll-radius-md);
}
.ll-siteguide-feature-tip .ll-svg-icon { width: 1rem; height: 1rem; color: hsl(var(--ll-foreground)); flex-shrink: 0; margin-top: 0.2rem; }
.ll-siteguide-feature-tip p { margin: 0; font-size: 0.875rem; color: hsl(var(--ll-foreground) / 0.85); }
.ll-siteguide-feature-tip strong { color: hsl(var(--ll-foreground)); }

.ll-siteguide-cta { padding: 5rem 0; text-align: center; background: hsl(var(--ll-secondary) / 0.4); }
.ll-siteguide-cta h2 { font-size: 1.875rem; font-weight: 700; color: hsl(var(--ll-foreground)); margin: 0 0 1rem; }
.ll-siteguide-cta p { color: hsl(var(--ll-muted-foreground)); max-width: 32rem; margin: 0 auto 2rem; line-height: 1.6; }
.ll-siteguide-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* ============================================================
   28. Starter Guide (page-starter-guide.php → /starter-guide/)
   Reuses the shared diagram partials (.ll-dia — see section 16) as
   standalone sections, and the Site Guide "quickstart" card pattern for the
   Injection 101 CTA. Namespaced .ll-starter-*.
   ============================================================ */
.ll-starter { background: hsl(var(--ll-background)); }
.ll-starter-narrow { max-width: 48rem; margin-inline: auto; }
.ll-starter-narrow-wide { max-width: 60rem; margin-inline: auto; }
.ll-starter-wide { max-width: 72rem; margin-inline: auto; }

.ll-starter-hero { padding: calc(var(--ll-navbar-height) + 4rem) 0 3rem; text-align: center; }
.ll-starter-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px;
  background: hsl(var(--ll-secondary)); color: hsl(var(--ll-secondary-foreground)); font-size: 0.875rem; font-weight: 500; margin-bottom: 1.5rem;
}
.ll-starter-badge .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-starter-title { font-size: clamp(2.5rem, 6vw, 3.75rem); font-weight: 700; color: hsl(var(--ll-foreground)); margin-bottom: 1.5rem; letter-spacing: -0.02em; }
.ll-starter-dek { font-size: 1.25rem; line-height: 1.6; color: hsl(var(--ll-muted-foreground)); max-width: 42rem; margin: 0 auto; }

.ll-starter-section { padding: 4rem 0; }
.ll-starter-section-head { text-align: center; margin-bottom: 3rem; }
.ll-starter-section-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;
  border-radius: 1rem; background: hsl(var(--ll-secondary)); color: hsl(var(--ll-foreground)); margin-bottom: 1.5rem;
}
.ll-starter-section-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-starter-section-head h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; color: hsl(var(--ll-foreground)); margin: 0 0 0.75rem; }
.ll-starter-section-head p { color: hsl(var(--ll-muted-foreground)); max-width: 36rem; margin: 0 auto; }

.ll-starter-card {
  padding: 2rem; border-radius: var(--ll-radius); border: 1px solid hsl(var(--ll-border) / 0.6);
  background: hsl(var(--ll-secondary) / 0.35); margin-bottom: 1.5rem;
}
.ll-starter-card:last-child { margin-bottom: 0; }
.ll-starter-card-title { display: flex; align-items: center; gap: 0.75rem; font-size: 1.25rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0 0 1rem; }
.ll-starter-card-title .ll-svg-icon { width: 1.5rem; height: 1.5rem; color: hsl(var(--ll-foreground)); }
.ll-starter-lead { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.ll-starter-lead-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex-shrink: 0;
  border-radius: 0.75rem; background: hsl(var(--ll-background) / 0.7); color: hsl(var(--ll-foreground));
}
.ll-starter-lead-icon .ll-svg-icon { width: 1.5rem; height: 1.5rem; }
.ll-starter-lead h3 { font-size: 1.125rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0 0 0.5rem; }
.ll-starter-lead p { color: hsl(var(--ll-muted-foreground)); line-height: 1.6; margin: 0; }
.ll-starter-lead-text { font-size: 1.0625rem; color: hsl(var(--ll-muted-foreground)); margin: 0 0 1.5rem; }

.ll-starter-callout { padding: 1.5rem; background: hsl(var(--ll-background) / 0.6); border-radius: var(--ll-radius-md); border: 1px solid hsl(var(--ll-border) / 0.5); margin-bottom: 1.5rem; }
.ll-starter-callout:last-child { margin-bottom: 0; }
.ll-starter-callout--accent { background: hsl(var(--ll-accent) / 0.08); border-color: hsl(var(--ll-accent) / 0.2); }
.ll-starter-callout h4 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0 0 0.75rem; }
.ll-starter-callout h4 span { font-size: 1.375rem; }
.ll-starter-callout p { color: hsl(var(--ll-muted-foreground)); line-height: 1.65; margin: 0; }
.ll-starter-callout p + .ll-starter-list { margin-top: 0.75rem; }

.ll-starter-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ll-starter-list li { position: relative; padding-left: 1.25rem; color: hsl(var(--ll-muted-foreground)); font-size: 0.9375rem; line-height: 1.5; }
.ll-starter-list li::before { content: '•'; position: absolute; left: 0.25rem; color: hsl(var(--ll-accent)); font-weight: 700; }

.ll-starter-diagram-wrap { margin-top: 1.5rem; }
.ll-starter-diagram-label { text-align: center; font-size: 0.9375rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0 0 1rem; }

.ll-starter-pathway-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.ll-starter-pathway-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; background: hsl(var(--ll-background) / 0.6); border-radius: var(--ll-radius-md); }
.ll-starter-pathway-item .ll-svg-icon { width: 1.25rem; height: 1.25rem; color: hsl(var(--ll-foreground)); flex-shrink: 0; margin-top: 0.1rem; }
.ll-starter-pathway-item p { margin: 0; color: hsl(var(--ll-muted-foreground)); font-size: 0.9375rem; line-height: 1.5; }
.ll-starter-pathway-item strong { color: hsl(var(--ll-foreground)); }

.ll-starter-why-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .ll-starter-why-grid { grid-template-columns: repeat(2, 1fr); } }
.ll-starter-why { padding: 1.25rem; background: hsl(var(--ll-background) / 0.6); border-radius: var(--ll-radius-md); border: 1px solid hsl(var(--ll-border) / 0.5); }
.ll-starter-why h4 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0 0 0.5rem; }
.ll-starter-why h4 span { font-size: 1.25rem; }
.ll-starter-why p { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); line-height: 1.55; margin: 0; }

.ll-starter-cat-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .ll-starter-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ll-starter-cat-grid { grid-template-columns: repeat(3, 1fr); } }
.ll-starter-cat-card {
  padding: 1.5rem; background: hsl(var(--ll-card)); border: 1px solid hsl(var(--ll-border) / 0.5);
  border-radius: var(--ll-radius-md); transition: box-shadow 0.2s ease;
}
.ll-starter-cat-card:hover { box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.12); }
.ll-starter-cat-icon { display: inline-flex; color: hsl(var(--ll-foreground)); margin-bottom: 1rem; }
.ll-starter-cat-icon .ll-svg-icon { width: 2rem; height: 2rem; }
.ll-starter-cat-card h3 { font-size: 1.0625rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0 0 0.5rem; }
.ll-starter-cat-desc { font-size: 0.875rem; color: hsl(var(--ll-muted-foreground)); line-height: 1.5; margin: 0 0 0.75rem; }
.ll-starter-cat-examples { font-size: 0.75rem; color: hsl(var(--ll-muted-foreground) / 0.8); margin: 0; }
.ll-starter-cat-examples strong { color: hsl(var(--ll-foreground) / 0.8); }

.ll-starter-tips { display: flex; flex-direction: column; gap: 1rem; }
.ll-starter-tip { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: hsl(var(--ll-background) / 0.6); border-radius: var(--ll-radius-md); }
.ll-starter-tip-emoji { font-size: 1.5rem; flex-shrink: 0; }
.ll-starter-tip p { margin: 0; color: hsl(var(--ll-muted-foreground)); line-height: 1.5; }

.ll-starter-cta { padding: 5rem 0; text-align: center; }
.ll-starter-cta h2 { font-size: 1.875rem; font-weight: 700; color: hsl(var(--ll-foreground)); margin: 0 0 1rem; }
.ll-starter-cta p { color: hsl(var(--ll-muted-foreground)); max-width: 32rem; margin: 0 auto 2rem; line-height: 1.6; }
.ll-starter-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .ll-inj101-section, .ll-siteguide-feature, .ll-starter-cat-card { transition: none; }
}

/* --- Peptide detail: quickstart / how-it-works / storage / notes / references --- */
.ll-quickstart-list, .ll-storage-list, .ll-notes-list { list-style: none; margin: 0; padding: 0; }
.ll-quickstart-list li, .ll-storage-list li, .ll-notes-list li { position: relative; padding: 0.375rem 0 0.375rem 1.25rem; font-size: 0.9375rem; line-height: 1.6; }
.ll-quickstart-list li::before, .ll-storage-list li::before, .ll-notes-list li::before { content: ""; position: absolute; left: 0; top: 0.85rem; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: hsl(var(--ll-muted-foreground) / 0.6); }
.ll-quickstart-list li strong { color: hsl(var(--ll-foreground)); }
.ll-how-intro { font-size: 1rem; color: hsl(var(--ll-muted-foreground)); line-height: 1.7; margin-bottom: 1.5rem; }
.ll-component-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0; }
.ll-component-card { padding: 1rem; background: hsl(var(--ll-muted) / 0.4); border: 1px solid hsl(var(--ll-border) / 0.6); border-radius: var(--ll-radius-sm); }
.ll-component-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.375rem; }
.ll-component-head h4 { margin: 0; font-size: 0.9375rem; }
.ll-component-card p { margin: 0; font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); }
.ll-references-list { margin: 0; padding-left: 1.5rem; }
.ll-references-list li { padding: 0.375rem 0; font-size: 0.875rem; }
.ll-references-list a { color: hsl(217 79% 45%); display: inline-flex; align-items: center; gap: 0.375rem; }
.ll-references-list a:hover { text-decoration: underline; }
.ll-references-list .ll-svg-icon { width: 0.75rem; height: 0.75rem; opacity: 0.6; }
/* "Good to know" = amber card (matches reference) */
.ll-peptide-section#notes { background: hsl(43 100% 96%); border-color: hsl(43 90% 80%); }
.ll-notes-card h2 { display: flex; align-items: center; gap: 0.5rem; color: hsl(28 60% 30%); }
.ll-notes-card h2 .ll-svg-icon { width: 1.125rem; height: 1.125rem; }
.ll-notes-list li { color: hsl(28 45% 26%); }
.ll-notes-list li::before { background: hsl(38 92% 50%); }

/* --- Peptide dosing: how-to-mix + syringe math --- */
.ll-dosing-block { margin-top: 1.5rem; }
.ll-dosing-block h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.ll-dosing-recon { font-size: 0.9375rem; color: hsl(var(--ll-muted-foreground)); margin-bottom: 0.75rem; }
.ll-dosing-steps { margin: 0; padding-left: 1.25rem; }
.ll-dosing-steps li { padding: 0.25rem 0; font-size: 0.9375rem; line-height: 1.6; }
.ll-syringe-math { list-style: none; margin: 0; padding: 0; border: 1px solid hsl(var(--ll-border)); border-radius: var(--ll-radius-sm); overflow: hidden; }
.ll-syringe-math li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.625rem 0.875rem; font-size: 0.875rem; background: hsl(var(--ll-muted) / 0.35); }
.ll-syringe-math li:nth-child(even) { background: transparent; }
.ll-sm-label { color: hsl(var(--ll-muted-foreground)); }
.ll-sm-value { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }

/* --- Mechanism of Action: category-driven 4-step flow --- */
.ll-mechanism { padding: 1.5rem 0 0.5rem; }
.ll-mechanism-head { text-align: center; margin-bottom: 2rem; }
.ll-mechanism-eyebrow { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em; color: hsl(var(--ll-muted-foreground)); margin-bottom: 0.375rem; }
.ll-mechanism-title { font-size: 1.125rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0; }
.ll-mechanism-steps { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
@media (min-width: 640px) { .ll-mechanism-steps { grid-template-columns: repeat(4, 1fr); } }
.ll-mechanism-steps::before { content: ""; position: absolute; top: 3rem; left: 12%; right: 12%; height: 1px; background: hsl(var(--ll-border)); display: none; }
@media (min-width: 640px) { .ll-mechanism-steps::before { display: block; } }
.ll-mechanism-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ll-mechanism-icon { position: relative; width: 6rem; height: 6rem; border-radius: 1.5rem; background: hsl(var(--ll-secondary, var(--ll-muted))); border: 1px solid hsl(var(--ll-border)); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; transition: transform 0.2s, box-shadow 0.2s; }
.ll-mechanism-step:hover .ll-mechanism-icon { transform: translateY(-2px); box-shadow: 0 6px 20px rgb(0 0 0 / 0.08); }
.ll-mechanism-emoji { font-size: 1.875rem; line-height: 1; }
.ll-mechanism-num { position: absolute; top: -0.5rem; right: -0.5rem; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: hsl(var(--ll-foreground)); color: hsl(var(--ll-background)); font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.ll-mechanism-step-title { font-size: 0.875rem; font-weight: 600; color: hsl(var(--ll-foreground)); margin: 0 0 0.25rem; }
.ll-mechanism-step-desc { font-size: 0.75rem; line-height: 1.6; color: hsl(var(--ll-muted-foreground)); max-width: 10rem; margin: 0; }

/* --- Category Visual card (per-category, accent-tinted) --- */
.ll-catvisual { text-align: center; padding: 2rem 1.5rem; margin-top: 1rem; border: 1px solid hsl(var(--ll-border)); border-radius: var(--ll-radius-md); background: linear-gradient(to bottom, hsl(var(--ll-cv-accent) / 0.06), transparent); }
.ll-catvisual-orb { width: 4.5rem; height: 4.5rem; margin: 0 auto 1.25rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: hsl(var(--ll-cv-accent) / 0.12); border: 1px solid hsl(var(--ll-cv-accent) / 0.3); }
.ll-catvisual-orb .ll-svg-icon { width: 1.75rem; height: 1.75rem; color: hsl(var(--ll-cv-accent)); }
.ll-catvisual-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em; color: hsl(var(--ll-cv-accent)); font-weight: 600; margin-bottom: 0.5rem; }
.ll-catvisual-caption { font-size: 0.875rem; color: hsl(var(--ll-muted-foreground)); max-width: 22rem; margin: 0 auto; line-height: 1.6; }

/* --- Peptide overview: lede, aliases, full description, analogy, interaction notes --- */
.ll-peptide-aliases { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); margin-bottom: 1rem; }
.ll-peptide-full-desc { font-size: 0.9375rem; color: hsl(var(--ll-muted-foreground)); line-height: 1.7; margin-bottom: 1.5rem; }
.ll-simplify-analogy { font-style: italic; color: hsl(var(--ll-muted-foreground)); margin-top: 0.5rem; }
.ll-interaction-notes { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); margin-top: 0.375rem; }

/* --- Shared toast (app.js) — same look as the Catalog page's, usable anywhere --- */
.ll-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem); z-index: 1080;
  padding: 0.75rem 1.25rem; border-radius: 0.75rem; background: hsl(217 33% 17%); color: #fff;
  font-size: 0.875rem; font-weight: 500; box-shadow: 0 12px 32px -8px rgb(15 23 42 / 0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.ll-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ll-toast { transition: none; } }

/* --- Peptide tools row: "in compare" state --- */
.ll-tool-btn.is-active { background: hsl(var(--ll-foreground)); border-color: hsl(var(--ll-foreground)); color: hsl(var(--ll-background)); }

/* --- Sign in (/auth/) --- */
.ll-auth { display: flex; justify-content: center; padding: 8rem 1.5rem 5rem; }
.ll-auth-wrap { width: 100%; max-width: 28rem; }
.ll-auth-card {
  padding: 1.75rem; border: 1px solid hsl(var(--ll-border)); border-radius: var(--ll-radius-md);
  background: hsl(var(--ll-background)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.ll-auth-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; }
.ll-auth-icon { display: flex; color: hsl(var(--ll-foreground)); }
.ll-auth-icon .ll-svg-icon { width: 1.25rem; height: 1.25rem; }
.ll-auth-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.ll-auth-dek { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); line-height: 1.5; margin-bottom: 1rem; }
.ll-auth-form { display: flex; flex-direction: column; gap: 0.875rem; }
.ll-auth-fine { font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); text-align: center; margin: 0; }
.ll-auth-error {
  font-size: 0.75rem; color: hsl(0 72% 45%); background: hsl(0 72% 45% / 0.08);
  border-radius: var(--ll-radius-sm); padding: 0.625rem 0.75rem; margin-top: 0.875rem;
}
.ll-auth-alert {
  display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; color: hsl(38 80% 30%);
  background: hsl(var(--ll-warning) / 0.12); border-radius: var(--ll-radius-sm); padding: 0.75rem;
  margin-bottom: 1rem; line-height: 1.4;
}
.ll-auth-alert .ll-svg-icon { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem; }
.ll-auth-sent { text-align: center; padding: 1.25rem 0; }
.ll-auth-sent-icon { display: inline-flex; color: hsl(var(--ll-success)); margin-bottom: 0.75rem; }
.ll-auth-sent-icon .ll-svg-icon { width: 2.5rem; height: 2.5rem; }
.ll-auth-sent-title { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.375rem; }
.ll-auth-sent .ll-auth-dek { margin-bottom: 0; }
.ll-auth-back { text-align: center; margin-top: 1rem; }
.ll-auth-back a { font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); text-decoration: none; }
.ll-auth-back a:hover { color: hsl(var(--ll-foreground)); }

/* --- Shared spin (messages loading state) --- */
.ll-spin { animation: ll-spin 0.8s linear infinite; }
@keyframes ll-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ll-spin { animation: none; } }

/* --- Embedded peptide forum (template-parts/forum/peptide-forum.php) --- */
.ll-pforum-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.ll-pforum-watch {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 0.75rem;
  border: 1px solid hsl(var(--ll-border)); border-radius: 999px; background: hsl(var(--ll-background));
  color: hsl(var(--ll-muted-foreground)); font-size: 0.75rem; font-weight: 500; transition: all 0.15s ease;
}
.ll-pforum-watch:hover { border-color: hsl(var(--ll-foreground) / 0.3); color: hsl(var(--ll-foreground)); }
.ll-pforum-watch.is-watching { background: hsl(var(--ll-muted)); color: hsl(var(--ll-foreground)); border-color: hsl(var(--ll-foreground) / 0.2); }
.ll-pforum-watch .ll-svg-icon { width: 0.8125rem; height: 0.8125rem; }

.ll-pforum-rating { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; }
.ll-pforum-stars { display: inline-flex; gap: 1px; }
.ll-pforum-star .ll-svg-icon { width: 0.9375rem; height: 0.9375rem; color: hsl(var(--ll-border)); fill: transparent; }
.ll-pforum-star.is-on .ll-svg-icon { color: hsl(38 92% 50%); fill: hsl(38 92% 50%); }
.ll-pforum-stars--sm .ll-pforum-star .ll-svg-icon { width: 0.75rem; height: 0.75rem; }

.ll-pforum .ll-tab-nav { border-bottom: 1px solid hsl(var(--ll-border)); margin-bottom: 1rem; gap: 0.25rem; }
.ll-pforum .ll-tab-nav .nav-link {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.5rem 0.25rem; margin-right: 1rem;
  font-size: 0.8125rem; font-weight: 500; color: hsl(var(--ll-muted-foreground));
}
.ll-pforum .ll-tab-nav .nav-link.active { color: hsl(var(--ll-foreground)); border-bottom-color: hsl(var(--ll-foreground)); background: none; }

.ll-pforum-composer {
  display: flex; flex-direction: column; gap: 0.625rem; padding: 1rem; margin-bottom: 1rem;
  background: hsl(var(--ll-muted) / 0.4); border: 1px solid hsl(var(--ll-border)); border-radius: var(--ll-radius-sm);
}
.ll-pforum-composer textarea.ll-input { resize: vertical; }
.ll-pforum-star-picker { display: flex; align-items: center; gap: 0.25rem; }
.ll-pforum-star-label { font-size: 0.8125rem; font-weight: 500; margin-right: 0.375rem; }
.ll-pforum-star-btn { padding: 0.125rem; border: 0; background: none; line-height: 0; }
.ll-pforum-star-btn .ll-svg-icon { width: 1.125rem; height: 1.125rem; color: hsl(var(--ll-muted-foreground) / 0.4); }
.ll-pforum-star-btn.is-on .ll-svg-icon { color: hsl(38 92% 50%); fill: hsl(38 92% 50%); }
.ll-pforum-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.ll-pforum-disclaimer { display: flex; align-items: center; gap: 0.3rem; font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); margin: 0; }
.ll-pforum-disclaimer .ll-svg-icon { width: 0.75rem; height: 0.75rem; }
.ll-pforum-error { font-size: 0.75rem; color: hsl(var(--ll-destructive)); margin: 0; }
.ll-pforum-success { font-size: 0.75rem; color: hsl(var(--ll-success)); margin: 0; }

.ll-pforum-empty { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); text-align: center; padding: 1.5rem 0; }

.ll-pforum-post { padding: 1rem; margin-bottom: 0.75rem; border: 1px solid hsl(var(--ll-border)); border-radius: var(--ll-radius-sm); background: hsl(var(--ll-background)); }
.ll-pforum-post-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.ll-pforum-post-who { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ll-pforum-post-author { font-weight: 600; font-size: 0.8125rem; }
.ll-pforum-post-date { font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); white-space: nowrap; }
.ll-pforum-post-title { font-size: 0.875rem; font-weight: 600; margin: 0.125rem 0 0.25rem; }
.ll-pforum-post-body { font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); white-space: pre-wrap; margin: 0 0 0.5rem; }

.ll-msg-btn { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); text-decoration: none; }
.ll-msg-btn:hover { color: hsl(var(--ll-foreground)); }
.ll-msg-btn .ll-svg-icon { width: 0.6875rem; height: 0.6875rem; }
.ll-msg-btn--sm { font-size: 0.625rem; }

.ll-pforum-post-owner-actions { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.ll-pforum-mini-btn {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.5rem; border: 1px solid hsl(var(--ll-border));
  border-radius: 999px; background: none; font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground));
}
.ll-pforum-mini-btn:hover { color: hsl(var(--ll-foreground)); border-color: hsl(var(--ll-foreground) / 0.3); }
.ll-pforum-mini-btn .ll-svg-icon { width: 0.6875rem; height: 0.6875rem; }
.ll-pforum-mini-btn--danger:hover { color: hsl(var(--ll-destructive)); border-color: hsl(var(--ll-destructive) / 0.4); }
.ll-pforum-mini-btn--primary { background: hsl(var(--ll-foreground)); color: hsl(var(--ll-background)); border-color: hsl(var(--ll-foreground)); }
.ll-pforum-mini-btn--primary:hover { color: hsl(var(--ll-background)); opacity: 0.85; }

.ll-pforum-edit-form { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.25rem 0 0.5rem; }
.ll-pforum-edit-actions { display: flex; gap: 0.5rem; }

.ll-pforum-replies { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid hsl(var(--ll-border) / 0.6); }
.ll-pforum-show-replies { padding: 0; border: 0; background: none; font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); }
.ll-pforum-show-replies:hover { color: hsl(var(--ll-foreground)); }
.ll-pforum-reply-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ll-pforum-no-replies { font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); margin: 0; }
.ll-pforum-reply { padding-left: 0.625rem; border-left: 2px solid hsl(var(--ll-border)); font-size: 0.8125rem; }
.ll-pforum-reply-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.125rem; }
.ll-pforum-reply-author { font-weight: 600; }
.ll-pforum-reply-date { font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); }
.ll-pforum-reply-body { color: hsl(var(--ll-muted-foreground)); white-space: pre-wrap; margin: 0; }
.ll-pforum-reply-composer { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: flex-end; }
.ll-pforum-reply-composer textarea { resize: none; min-height: 2.25rem; }
.ll-pforum-signin-reply { display: inline-block; margin-top: 0.5rem; font-size: 0.75rem; color: hsl(var(--ll-foreground)); text-decoration: underline; }

/* --- Messages (/messages/) --- */
.ll-msgs { padding: 7rem 1.25rem 4rem; }
.ll-msgs-wrap { max-width: 1120px; margin: 0 auto; }
.ll-msgs-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }
.ll-msgs-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.5rem; font-weight: 700; margin: 0; }
.ll-msgs-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; min-height: 60vh; }
@media (min-width: 992px) { .ll-msgs-grid { grid-template-columns: 300px 1fr; } }

.ll-msgs-list-card, .ll-msgs-thread-card {
  border: 1px solid hsl(var(--ll-border)); border-radius: var(--ll-radius-md); background: hsl(var(--ll-background));
  overflow: hidden; display: flex; flex-direction: column;
}
@media (max-width: 991.98px) {
  .ll-msgs-list-card.is-hidden-mobile, .ll-msgs-thread-card.is-hidden-mobile { display: none; }
}
.ll-msgs-loading { padding: 1.5rem; text-align: center; color: hsl(var(--ll-muted-foreground)); }
.ll-msgs-empty-list { padding: 2rem 1.25rem; text-align: center; }
.ll-msgs-empty-list .ll-text-muted { font-size: 0.75rem; margin-top: 0.25rem; }

.ll-msgs-thread-btn {
  display: block; width: 100%; text-align: left; padding: 0.75rem; border: 0; border-bottom: 1px solid hsl(var(--ll-border) / 0.6);
  background: none;
}
.ll-msgs-thread-btn:hover, .ll-msgs-thread-btn.is-active { background: hsl(var(--ll-muted) / 0.6); }
.ll-msgs-thread-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.125rem; }
.ll-msgs-thread-name { font-weight: 600; font-size: 0.8125rem; }
.ll-msgs-badge { min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: 999px; background: hsl(var(--ll-foreground)); color: hsl(var(--ll-background)); font-size: 0.625rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.ll-msgs-thread-preview { display: block; font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ll-msgs-thread-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; text-align: center; color: hsl(var(--ll-muted-foreground)); font-size: 0.8125rem; }
.ll-msgs-thread-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid hsl(var(--ll-border)); font-weight: 600; }
.ll-msgs-back-mobile { border: 0; background: none; font-size: 1rem; padding: 0; margin-right: 0.25rem; }
.ll-msgs-thread-body { flex: 1; overflow-y: auto; max-height: 60vh; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ll-msgs-say-hi { text-align: center; color: hsl(var(--ll-muted-foreground)); font-size: 0.8125rem; padding: 2rem 0; }
.ll-msgs-bubble-row { display: flex; justify-content: flex-start; }
.ll-msgs-bubble-row.is-mine { justify-content: flex-end; }
.ll-msgs-bubble { max-width: 75%; padding: 0.55rem 0.85rem; border-radius: 1rem; background: hsl(var(--ll-muted)); color: hsl(var(--ll-foreground)); font-size: 0.8125rem; white-space: pre-wrap; }
.ll-msgs-bubble-row.is-mine .ll-msgs-bubble { background: hsl(var(--ll-foreground)); color: hsl(var(--ll-background)); }
.ll-msgs-bubble-time { font-size: 0.625rem; margin-top: 0.25rem; opacity: 0.6; }
.ll-msgs-composer { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.75rem; border-top: 1px solid hsl(var(--ll-border)); }
.ll-msgs-composer textarea { resize: none; min-height: 2.5rem; }
.ll-msgs-send { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 0; background: hsl(var(--ll-foreground)); color: hsl(var(--ll-background)); display: inline-flex; align-items: center; justify-content: center; }
.ll-msgs-send:disabled { opacity: 0.5; }
.ll-msgs-send .ll-svg-icon { width: 1rem; height: 1rem; }
.ll-msgs-foot { margin-top: 1.5rem; text-align: center; font-size: 0.75rem; color: hsl(var(--ll-muted-foreground)); }
.ll-msgs-foot a { color: hsl(var(--ll-foreground)); text-decoration: underline; margin-left: 0.25rem; }

/* --- Notification bell dropdown --- */
.ll-notif-panel { width: 20rem; padding: 0; }
.ll-notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; border-bottom: 1px solid hsl(var(--ll-border)); font-size: 0.8125rem; font-weight: 600; }
.ll-notif-mark-read { border: 0; background: none; font-size: 0.6875rem; font-weight: 500; color: hsl(var(--ll-muted-foreground)); padding: 0.25rem 0.5rem; }
.ll-notif-mark-read:hover { color: hsl(var(--ll-foreground)); }
.ll-notif-panel-list { max-height: 22rem; overflow-y: auto; }
.ll-notif-empty { padding: 1.5rem 0.75rem; text-align: center; font-size: 0.8125rem; color: hsl(var(--ll-muted-foreground)); margin: 0; }
.ll-notif-item { display: block; padding: 0.625rem 0.75rem; border-bottom: 1px solid hsl(var(--ll-border) / 0.6); font-size: 0.8125rem; text-decoration: none; color: hsl(var(--ll-foreground)); }
.ll-notif-item:hover { background: hsl(var(--ll-muted) / 0.5); }
.ll-notif-item.is-unread { background: hsl(var(--ll-ring) / 0.05); }
.ll-notif-item-label { font-weight: 500; }
.ll-notif-item-time { font-size: 0.6875rem; color: hsl(var(--ll-muted-foreground)); margin-top: 0.125rem; }

/* ============================================================
   21. Receptor Binding diagram (peptide detail only)
   Ports ReceptorBindingVisual.tsx. One shared 6s timeline:
     0–33.3%  approach | 33.3–58.3% bind | 58.3–100% activate
   Namespaced .ll-recbind-* (distinct from .ll-bind-* which is the
   homepage/Starter-Guide PeptideBindingDiagram — do not merge).
   ============================================================ */
.ll-recbind {
  width: 100%;
  padding: 2rem;
  border: 1px solid hsl(var(--ll-border));
  border-radius: var(--ll-radius);
  background: linear-gradient(to bottom, hsl(var(--ll-secondary) / 0.3), hsl(var(--ll-background)));
}

/* --- Head --- */
.ll-recbind-head { text-align: center; margin-bottom: 1.5rem; }
.ll-recbind-eyebrow {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: hsl(var(--ll-muted-foreground)); margin: 0 0 0.25rem;
}
.ll-recbind-caption { font-size: 0.875rem; color: hsl(var(--ll-muted-foreground)); margin: 0; }

/* --- Stage --- */
.ll-recbind-stage { position: relative; height: 12rem; }

.ll-recbind-membrane {
  position: absolute; right: 35%; top: 0; bottom: 0; width: 1px;
  background: hsl(var(--ll-border));
}
.ll-recbind-membrane-label {
  position: absolute; right: 32%; top: 8%;
  padding: 0 0.25rem; background: hsl(var(--ll-background));
  font-size: 0.625rem; color: hsl(var(--ll-muted-foreground));
}

/* Receptor (fixed, right of the membrane) */
.ll-recbind-receptor {
  position: absolute; right: 25%; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  animation: ll-recbind-receptor-scale 6s ease-in-out infinite;
}
.ll-recbind-receptor-box {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; border-radius: 0.75rem; border: 2px solid hsl(var(--ll-border));
  background: hsl(var(--ll-secondary));
  animation: ll-recbind-receptor-lit 6s ease-in-out infinite;
}
.ll-recbind-pocket {
  width: 1.5rem; height: 1.5rem; border-radius: 0.375rem;
  border: 2px dashed hsl(var(--ll-border));
  animation: ll-recbind-pocket 6s ease-in-out infinite;
}
.ll-recbind-glow {
  position: absolute; inset: 0; border-radius: 0.75rem;
  border: 2px solid hsl(var(--ll-accent) / 0.4);
  opacity: 0; pointer-events: none;
  animation: ll-recbind-glow 6s ease-out infinite;
}

/* Peptide (travels toward the receptor) */
.ll-recbind-peptide {
  position: absolute; top: 50%; transform: translateY(-50%); left: 15%;
  display: flex; flex-direction: column; align-items: center;
  animation: ll-recbind-travel 6s ease-in-out infinite;
}
.ll-recbind-peptide-box {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 0.5rem;
  background: hsl(var(--ll-primary) / 0.2); border: 2px solid hsl(var(--ll-primary) / 0.4);
  animation: ll-recbind-peptide-lit 6s ease-in-out infinite;
}
.ll-recbind-peptide-core {
  width: 1rem; height: 1rem; border-radius: 0.25rem; background: hsl(var(--ll-primary) / 0.6);
}

.ll-recbind-label {
  margin-top: 0.5rem; font-size: 0.625rem; color: hsl(var(--ll-muted-foreground)); white-space: nowrap;
}

/* Signal dots fired into the cell on activation */
.ll-recbind-signal {
  position: absolute; right: 15%; width: 0.375rem; height: 0.375rem;
  border-radius: 999px; background: hsl(var(--ll-accent) / 0.6); opacity: 0;
}
.ll-recbind-signal--1 { top: 35%; animation: ll-recbind-signal 6s linear infinite; }
.ll-recbind-signal--2 { top: 50%; animation: ll-recbind-signal 6s linear infinite 0.2s; }
.ll-recbind-signal--3 { top: 65%; animation: ll-recbind-signal 6s linear infinite 0.4s; }

/* --- Phase legend --- */
.ll-recbind-phases {
  display: flex; justify-content: center; gap: 2rem; list-style: none;
  margin: 1.5rem 0 0; padding: 1rem 0 0; border-top: 1px solid hsl(var(--ll-border));
}
.ll-recbind-phase { text-align: center; opacity: 0.35; }
.ll-recbind-phase--1 { animation: ll-recbind-phase-1 6s step-end infinite; }
.ll-recbind-phase--2 { animation: ll-recbind-phase-2 6s step-end infinite; }
.ll-recbind-phase--3 { animation: ll-recbind-phase-3 6s step-end infinite; }
.ll-recbind-phase-icon { display: block; font-size: 1.125rem; line-height: 1; margin-bottom: 0.25rem; color: hsl(var(--ll-foreground)); }
.ll-recbind-phase-label { font-size: 0.75rem; font-weight: 500; color: hsl(var(--ll-foreground)); }

/* --- Keyframes (all share the 6s cycle) --- */
@keyframes ll-recbind-travel {
  0%, 33%   { left: 15%; }
  58%       { left: 33%; }
  94%       { left: 33%; }
  100%      { left: 15%; }
}
@keyframes ll-recbind-receptor-scale {
  0%, 58%   { transform: translateY(-50%) scale(1); }
  63%, 100% { transform: translateY(-50%) scale(1.1); }
}
@keyframes ll-recbind-receptor-lit {
  0%, 58%   { border-color: hsl(var(--ll-border)); background: hsl(var(--ll-secondary)); }
  63%, 100% { border-color: hsl(var(--ll-accent)); background: hsl(var(--ll-accent) / 0.1); }
}
@keyframes ll-recbind-pocket {
  0%, 33%   { border-color: hsl(var(--ll-border)); }
  38%, 100% { border-color: hsl(var(--ll-primary)); }
}
@keyframes ll-recbind-peptide-lit {
  0%, 58%   { background: hsl(var(--ll-primary) / 0.2); border-color: hsl(var(--ll-primary) / 0.4); }
  63%, 100% { background: hsl(var(--ll-accent) / 0.2); border-color: hsl(var(--ll-accent) / 0.6); }
}
@keyframes ll-recbind-glow {
  0%, 57%   { opacity: 0; transform: scale(1); }
  58%       { opacity: 1; transform: scale(1); }
  78%       { opacity: 0; transform: scale(1.6); }
  79%       { opacity: 1; transform: scale(1); }
  99%       { opacity: 0; transform: scale(1.6); }
  100%      { opacity: 0; transform: scale(1); }
}
@keyframes ll-recbind-signal {
  0%, 57%   { opacity: 0; transform: translateX(0); }
  58%       { opacity: 1; transform: translateX(0); }
  75%       { opacity: 0; transform: translateX(40px); }
  100%      { opacity: 0; transform: translateX(40px); }
}
@keyframes ll-recbind-phase-1 { 0% { opacity: 1; } 33% { opacity: 0.35; } 100% { opacity: 0.35; } }
@keyframes ll-recbind-phase-2 { 0% { opacity: 0.35; } 33% { opacity: 1; } 58% { opacity: 0.35; } 100% { opacity: 0.35; } }
@keyframes ll-recbind-phase-3 { 0% { opacity: 0.35; } 58% { opacity: 1; } 100% { opacity: 1; } }

/* Reduced motion: freeze in the fully-bound/activated state and show all
   three phase labels at full strength, so the diagram still reads correctly. */
@media (prefers-reduced-motion: reduce) {
  .ll-recbind-receptor, .ll-recbind-receptor-box, .ll-recbind-pocket, .ll-recbind-glow,
  .ll-recbind-peptide, .ll-recbind-peptide-box, .ll-recbind-signal,
  .ll-recbind-phase--1, .ll-recbind-phase--2, .ll-recbind-phase--3 { animation: none; }
  .ll-recbind-peptide { left: 33%; }
  .ll-recbind-receptor-box { border-color: hsl(var(--ll-accent)); background: hsl(var(--ll-accent) / 0.1); }
  .ll-recbind-pocket { border-color: hsl(var(--ll-primary)); }
  .ll-recbind-glow { opacity: 0; }
  .ll-recbind-phase { opacity: 1; }
}

@media (max-width: 575.98px) {
  .ll-recbind { padding: 1.25rem; }
  .ll-recbind-phases { gap: 1.25rem; }
}

/* ============================================================
   22. Peptide detail — layout pass (2026-07-24)
   Fixes: tools bar clipping its last button; Community Insights +
   forum moved out of the 25% sidebar into a full-width band.
   ============================================================ */

/* --- Tools bar: wrap on desktop, scroll only on small screens --------
   Was max-width:896px + overflow-x:auto + flex-shrink:0 with a hidden
   scrollbar, so the 6th button was silently clipped with no affordance. */
.ll-tools-callout {
  max-width: 1120px;
  padding: 0.875rem 1.125rem;
  background: hsl(var(--ll-card));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.ll-tools-row { flex-wrap: wrap; overflow-x: visible; row-gap: 0.5rem; justify-content: center; }
.ll-tool-btn {
  padding: 0.4375rem 0.8125rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ll-tool-btn:hover { transform: translateY(-1px); }
.ll-tool-btn .ll-svg-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.ll-tools-label { margin-right: 0.375rem; }

/* Below lg the row goes back to a single scrollable line (there isn't
   room to wrap gracefully, and a swipe is the expected gesture there). */
@media (max-width: 991.98px) {
  .ll-tools-row { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .ll-tools-callout { border-radius: 0; border-left: 0; border-right: 0; }
}

/* --- Sidebar rhythm -------------------------------------------------- */
.ll-peptide-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.ll-side-card-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.875rem;
}
.ll-side-card-title .ll-svg-icon { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Molecule Information card */
.ll-molecule-figure {
  display: flex; align-items: center; justify-content: center;
  padding: 0.75rem; margin-bottom: 0.875rem;
  background: #fff; border: 1px solid hsl(var(--ll-border)); border-radius: var(--ll-radius-sm);
}
.ll-molecule-figure img { max-height: 8rem; width: auto; max-width: 100%; object-fit: contain; }
.ll-molecule-row {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; padding: 0.3125rem 0;
}
.ll-molecule-row > .ll-svg-icon { width: 0.875rem; height: 0.875rem; color: hsl(var(--ll-muted-foreground)); flex-shrink: 0; }
.ll-molecule-label { color: hsl(var(--ll-muted-foreground)); }
.ll-molecule-link {
  display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto;
  color: hsl(var(--ll-accent)); font-weight: 500; text-decoration: none; overflow-wrap: anywhere;
}
.ll-molecule-link:hover { text-decoration: underline; }
.ll-molecule-link .ll-svg-icon { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }

/* --- Full-width community band --------------------------------------- */
.ll-peptide-community {
  border-top: 1px solid hsl(var(--ll-border));
  background: hsl(var(--ll-background));
  padding: 3.5rem 0 4rem;
}
.ll-community-block {
  background: hsl(var(--ll-card));
  border: 1px solid hsl(var(--ll-border));
  border-radius: var(--ll-radius);
  padding: 2rem;
}
.ll-community-block + .ll-community-block { margin-top: 1.5rem; }
.ll-community-block-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1.25rem;
}
.ll-community-block-title {
  display: flex; align-items: center; gap: 0.625rem; margin: 0;
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; color: hsl(var(--ll-foreground));
}
.ll-community-block-title .ll-svg-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: hsl(var(--ll-muted-foreground)); }
.ll-community-block-dek { margin: 0; font-size: 0.875rem; color: hsl(var(--ll-muted-foreground)); }

@media (max-width: 575.98px) {
  .ll-community-block { padding: 1.25rem; border-radius: var(--ll-radius-md); }
  .ll-peptide-community { padding: 2.5rem 0 3rem; }
}

/* --- Community Insights (card grid) ---------------------------------- */
.ll-ci-sources {
  display: inline-flex; align-items: center; padding: 0.25rem 0.625rem;
  border-radius: 999px; background: hsl(var(--ll-secondary));
  font-size: 0.6875rem; font-weight: 600; color: hsl(var(--ll-muted-foreground));
  white-space: nowrap;
}
.ll-ci-summary {
  font-size: 1.0625rem; line-height: 1.65; color: hsl(var(--ll-foreground) / 0.85);
  margin: 0 0 1.75rem; max-width: 68ch;
}
.ll-ci-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 640px) { .ll-ci-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ll-ci-grid { grid-template-columns: repeat(4, 1fr); } }

.ll-ci-card {
  padding: 1.125rem; border-radius: var(--ll-radius-md);
  background: hsl(var(--ll-muted) / 0.5); border: 1px solid hsl(var(--ll-border) / 0.7);
  border-top: 3px solid hsl(var(--ll-border));
}
.ll-ci-card--benefits { border-top-color: hsl(142 65% 45%); }
.ll-ci-card--dosages  { border-top-color: hsl(var(--ll-accent)); }
.ll-ci-card--effects  { border-top-color: hsl(38 92% 50%); }
.ll-ci-card--stacking { border-top-color: hsl(272 51% 55%); }

.ll-ci-card-title {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
  color: hsl(var(--ll-foreground));
}
.ll-ci-card-title .ll-svg-icon { width: 0.9375rem; height: 0.9375rem; flex-shrink: 0; }
.ll-ci-card--benefits .ll-ci-card-title .ll-svg-icon { color: hsl(142 65% 38%); }
.ll-ci-card--dosages  .ll-ci-card-title .ll-svg-icon { color: hsl(var(--ll-accent)); }
.ll-ci-card--effects  .ll-ci-card-title .ll-svg-icon { color: hsl(38 92% 42%); }
.ll-ci-card--stacking .ll-ci-card-title .ll-svg-icon { color: hsl(272 51% 50%); }

.ll-ci-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ll-ci-list li {
  position: relative; padding-left: 0.875rem;
  font-size: 0.8125rem; line-height: 1.5; color: hsl(var(--ll-muted-foreground));
}
.ll-ci-list li::before {
  content: ''; position: absolute; left: 0; top: 0.5rem;
  width: 4px; height: 4px; border-radius: 999px; background: hsl(var(--ll-border));
}
.ll-ci-card--benefits .ll-ci-list li::before { background: hsl(142 65% 45%); }
.ll-ci-card--dosages  .ll-ci-list li::before { background: hsl(var(--ll-accent)); }
.ll-ci-card--effects  .ll-ci-list li::before { background: hsl(38 92% 50%); }
.ll-ci-card--stacking .ll-ci-list li::before { background: hsl(272 51% 55%); }

/* Quotes */
.ll-ci-quotes { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--ll-border)); }
.ll-ci-quote-grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
@media (min-width: 768px)  { .ll-ci-quote-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ll-ci-quote-grid { grid-template-columns: repeat(3, 1fr); } }
.ll-ci-quote {
  position: relative; margin: 0; padding: 1rem 1rem 1rem 2.25rem;
  background: hsl(var(--ll-muted) / 0.45); border-radius: var(--ll-radius-md);
  font-size: 0.875rem; line-height: 1.55; font-style: italic; color: hsl(var(--ll-foreground) / 0.8);
}
.ll-ci-quote::before {
  content: '\201C'; position: absolute; left: 0.75rem; top: 0.35rem;
  font-size: 2rem; line-height: 1; font-style: normal;
  color: hsl(var(--ll-border)); font-family: Georgia, serif;
}

/* --- Forum at full width --------------------------------------------- */
.ll-community-block .ll-pforum-posts {
  display: grid; grid-template-columns: 1fr; gap: 0.875rem;
}
@media (min-width: 900px) {
  .ll-community-block .ll-pforum-posts { grid-template-columns: repeat(2, 1fr); }
}
.ll-community-block .ll-pforum-post {
  height: 100%; padding: 1.125rem; border-radius: var(--ll-radius-md);
  border: 1px solid hsl(var(--ll-border)); background: hsl(var(--ll-muted) / 0.35);
}
.ll-community-block .ll-pforum-composer {
  padding: 1.25rem; border-radius: var(--ll-radius-md);
  background: hsl(var(--ll-muted) / 0.45); border: 1px solid hsl(var(--ll-border));
}

/* --- Main column rhythm / alignment polish ---------------------------
   Scoped to .ll-peptide-page: `.ll-peptide-section` is also used by the
   page-builder section parts (template-parts/sections/*) on regular Pages,
   which shouldn't inherit the peptide page's heading rhythm. */
.ll-peptide-page .ll-peptide-section { margin-bottom: 1.5rem; }
.ll-peptide-page .ll-peptide-section > h2 {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 1.125rem;
}
.ll-peptide-page .ll-peptide-section > h2 .ll-svg-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.ll-peptide-page .ll-peptide-section h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.625rem; }
.ll-peptide-page .ll-peptide-section h4 { font-size: 0.875rem; font-weight: 600; margin: 1rem 0 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .ll-tool-btn { transition: none; }
  .ll-tool-btn:hover { transform: none; }
}