:root {
  --cream: #FFFCF5;
  --ink: #2b2b2b;
  --ink-soft: #6b6b6b;
  --line: rgba(0,0,0,0.08);
  --women: #B97088;
  --men: #5D7E9E;
  --kids: #4E9585;
  --btn: #2b2b2b;
  --btn-text: #FFFCF5;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Libre Baskerville', serif;
  line-height: 1.5;
}
.logo {
  font-family: 'Quicksand', sans-serif;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Header / nav ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.logo {
  font-weight: 700;
  font-size: 28px;
  margin-right: auto;
  background: linear-gradient(90deg, #E63946, #FF8C42, #FFD23F, #67C23A, #2EC4B6, #9B5DE5, #FF6FA5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-link {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Libre Baskerville', serif;
  padding: 8px 0;
}
.dropdown { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  padding: 8px;
  min-width: 160px;
}
.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}
.dropdown-menu a:hover { background: var(--cream); }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  border: none;
  text-align: center;
}
.btn-cta { background: var(--btn); color: var(--btn-text); }
.btn-cta:hover { opacity: 0.88; }
.btn-outline {
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
}

/* ---------- Layout helpers ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { padding: 72px 0; }
.section-tight { padding: 48px 0; }
.center { text-align: center; }
.eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
h2 { font-size: 34px; margin: 8px 0 16px; }
.lede { font-size: 18px; color: var(--ink-soft); max-width: 640px; }
.lede.center { margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 64px 0 80px;
}
.hero h1 { font-size: 46px; line-height: 1.15; margin: 0 0 18px; }
.hero p.lede { margin-bottom: 28px; }

/* ---------- Photo placeholders ---------- */
.photo-placeholder {
  border-radius: var(--radius);
  border: 1.5px dashed rgba(0,0,0,0.18);
  background: linear-gradient(135deg, #fff4e6, #eafaf7 60%, #f5eaff);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Hero photos (real stock photography) ---------- */
.hero-photo {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}
.photo-credit {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 8px;
  text-align: right;
}
.photo-credit a { text-decoration: underline; }

/* ---------- Value prop / feature grid ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.feature-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.feature-card h3 { margin: 0 0 8px; font-size: 20px; }
.feature-card p { color: var(--ink-soft); margin: 0; font-size: 15px; }

/* ---------- Line preview / shop cards ---------- */
.lines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.line-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}
.line-banner {
  padding: 20px 22px;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
}
.line-card.women .line-banner { background: var(--women); }
.line-card.men .line-banner { background: var(--men); }
.line-card.kids .line-banner { background: var(--kids); }
.line-body { padding: 22px; }
.line-body p { color: var(--ink-soft); font-size: 14px; margin: 0 0 18px; }
.line-wordmark {
  font-family: 'Quicksand', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.85;
}
.line-sub { font-size: 12px; font-weight: 600; opacity: 0.9; margin-top: 2px; }
.line-caption {
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 14px 0 0;
}
.line-card.kids .line-body {
  background-image: radial-gradient(#ffe1b3 2px, transparent 2px),
                     radial-gradient(#c8f2ec 2px, transparent 2px);
  background-size: 26px 26px;
  background-position: 0 0, 13px 13px;
  background-color: var(--cream);
}
.pkg-mock { max-width: 320px; margin-top: 24px; }

/* ---------- Gummy grid (nutrient icons) ---------- */
.gummy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.gummy-cell { display: flex; flex-direction: column; align-items: center; }
.gummy {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.12);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}

/* ---------- Gummy shapes, one per nutrient ---------- */
.shape-root { border-radius: 42% 58% 55% 45% / 55% 45% 55% 45%; }
.shape-sun-half {
  clip-path: polygon(4.0% 50.0%, 19.1% 41.7%, 10.2% 27.0%, 27.4% 27.4%, 27.0% 10.2%, 41.7% 19.1%, 50.0% 4.0%, 58.3% 19.1%, 73.0% 10.2%, 72.6% 27.4%, 89.8% 27.0%, 80.9% 41.7%, 96.0% 50.0%);
  align-items: flex-start;
  padding-top: 12%;
}
.shape-sun {
  clip-path: polygon(50.0% 2.0%, 62.6% 19.5%, 83.9% 16.1%, 80.5% 37.4%, 98.0% 50.0%, 80.5% 62.6%, 83.9% 83.9%, 62.6% 80.5%, 50.0% 98.0%, 37.4% 80.5%, 16.1% 83.9%, 19.5% 62.6%, 2.0% 50.0%, 19.5% 37.4%, 16.1% 16.1%, 37.4% 19.5%);
}
.shape-star {
  clip-path: polygon(50.0% 2.0%, 61.8% 33.8%, 95.7% 35.2%, 69.0% 56.2%, 78.2% 88.8%, 50.0% 70.0%, 21.8% 88.8%, 31.0% 56.2%, 4.3% 35.2%, 38.2% 33.8%);
}
.shape-flower {
  clip-path: polygon(50.0% 2.0%, 70.0% 22.5%, 95.7% 35.2%, 82.3% 60.5%, 78.2% 88.8%, 50.0% 84.0%, 21.8% 88.8%, 17.7% 60.5%, 4.3% 35.2%, 30.0% 22.5%);
}
.shape-berry {
  clip-path: polygon(50.0% 3.0%, 66.5% 15.8%, 86.7% 20.7%, 87.0% 41.5%, 95.8% 60.5%, 79.7% 73.7%, 70.4% 92.3%, 50.0% 88.0%, 29.6% 92.3%, 20.3% 73.7%, 4.2% 60.5%, 13.0% 41.5%, 13.3% 20.7%, 33.5% 15.8%);
}
.shape-shield {
  clip-path: polygon(12% 12%, 88% 12%, 90% 48%, 50% 94%, 10% 48%);
  padding-top: 6%;
}
.shape-leaf {
  clip-path: polygon(50% 4%, 84% 50%, 50% 96%, 16% 50%);
}
.shape-bolt {
  clip-path: polygon(58% 2%, 22% 56%, 46% 56%, 38% 98%, 82% 38%, 54% 38%);
}
.shape-mountain {
  clip-path: polygon(2% 96%, 22% 38%, 38% 64%, 52% 18%, 68% 58%, 84% 32%, 98% 96%);
  align-items: flex-end;
  padding-bottom: 10%;
}
.shape-carrot {
  clip-path: polygon(18% 22%, 82% 22%, 88% 40%, 52% 96%, 50% 96%, 16% 42%);
  align-items: flex-start;
  padding-top: 16%;
}
.shape-pill {
  clip-path: polygon(78.0% 33.0%, 84.5% 34.3%, 90.0% 38.0%, 93.7% 43.5%, 95.0% 50.0%, 93.7% 56.5%, 90.0% 62.0%, 84.5% 65.7%, 78.0% 67.0%, 22.0% 67.0%, 15.5% 65.7%, 10.0% 62.0%, 6.3% 56.5%, 5.0% 50.0%, 6.3% 43.5%, 10.0% 38.0%, 15.5% 34.3%, 22.0% 33.0%);
}
.shape-droplet {
  clip-path: polygon(50% 2%, 91.3% 69.0%, 84.3% 81.5%, 73.6% 91.1%, 60.5% 96.7%, 46.2% 97.8%, 32.3% 94.3%, 20.3% 86.4%, 11.4% 75.2%, 6.7% 61.6%, 6.5% 47.3%, 11.0% 33.7%, 19.6% 22.2%, 31.4% 14.1%, 45.2% 10.3%, 59.5% 11.0%, 72.8% 16.4%, 83.7% 25.7%);
}
.gummy-label {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.2;
}

/* ---------- Trust / promise section ---------- */
.promise-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.promise-item {
  border-left: 3px solid var(--ink);
  padding-left: 16px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- Waitlist ---------- */
.waitlist {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 48px;
  text-align: center;
}
.waitlist-form {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}
.waitlist-form input[type=email] {
  padding: 13px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 15px;
  min-width: 280px;
  font-family: 'Libre Baskerville', serif;
}
.form-message {
  margin-top: 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--kids);
  min-height: 20px;
}

/* ---------- Supplement facts ---------- */
.supp-facts {
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 13px;
  max-width: 340px;
}
.supp-facts h4 {
  margin: 0 0 4px;
  font-size: 18px;
  border-bottom: 6px solid var(--ink);
  padding-bottom: 6px;
}
.supp-facts table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.supp-facts td { border-top: 1px solid #ddd; padding: 4px 0; }
.supp-facts .note {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 10px;
  font-style: italic;
}

/* ---------- Product page hero ---------- */
.product-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.product-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 14px;
}
.tag-women { background: var(--women); }
.tag-men { background: var(--men); }
.tag-kids { background: var(--kids); }

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq-item h3 { margin: 0 0 8px; font-size: 18px; }
.faq-item p { color: var(--ink-soft); margin: 0; }

/* ---------- Steps (how it works) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 32px;
}
.step {
  text-align: center;
}
.step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 0 auto 14px;
}
.step p { color: var(--ink-soft); font-size: 14px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 32px;
  margin-top: 40px;
}
.footer-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.footer-brand { font-weight: 700; font-size: 22px; margin-bottom: 12px; }
.footer-links { display: flex; gap: 20px; font-weight: 600; font-size: 14px; margin-bottom: 24px; }
.footer-waitlist { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.footer-waitlist input[type=email] {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  min-width: 240px;
  font-family: 'Libre Baskerville', serif;
}
.disclaimer { font-size: 12px; color: var(--ink-soft); max-width: 640px; margin-bottom: 8px; }
.copyright { font-size: 12px; color: var(--ink-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .hero, .product-hero { grid-template-columns: 1fr; }
  .features, .lines-grid, .promise-list, .steps { grid-template-columns: 1fr; }
  .main-nav { display: none; }
}