/* Baby Bounty · shared design system v1
   Used across all three site pages. */

:root {
  --bb-coral: #FF6B6B;
  --bb-coral-soft: #FFF5F5;
  --bb-coral-soft-2: #FFEBEB;
  --bb-coral-deep: #E55555;
  --bb-ink: #1A1A1A;
  --bb-ink-soft: #2A2A2A;
  --bb-bg: #FBF8F4;       /* warmer cream than original #fdfdfd */
  --bb-card: #FFFFFF;
  --bb-line: #ECE6DE;
  --bb-line-strong: #DCD5CA;
  --bb-muted: #6B635A;
  --bb-muted-2: #9A938A;
  --bb-mute-3: #C4BEB4;
  --bb-green: #10B981;
  --bb-green-soft: #E8FDF5;
  --bb-amber: #F59E0B;
  --bb-amber-soft: #FFFBEB;
  --bb-radius-sm: 10px;
  --bb-radius: 16px;
  --bb-radius-lg: 24px;
  --bb-radius-xl: 32px;
  --bb-shadow-sm: 0 2px 6px rgba(40,30,15,0.04);
  --bb-shadow: 0 8px 24px rgba(40,30,15,0.06);
  --bb-shadow-lg: 0 24px 60px rgba(40,30,15,0.10);
  --bb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bb-font-display: "Fraunces", "Times New Roman", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--bb-font);
  background: var(--bb-bg);
  color: var(--bb-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: var(--bb-coral); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Top nav (shared) ──────────────────── */
.bb-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,248,244,0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bb-line);
}
.bb-nav-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
}
.bb-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 18px; color: var(--bb-ink);
  letter-spacing: -0.2px;
}
.bb-logo-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--bb-ink); color: var(--bb-coral);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
}
.bb-nav-links {
  display: flex; gap: 28px; align-items: center;
  font-size: 14px; font-weight: 600;
}
.bb-nav-links a { color: var(--bb-muted); }
.bb-nav-links a:hover { color: var(--bb-ink); text-decoration: none; }
.bb-cta-sm {
  background: var(--bb-ink); color: #fff !important;
  padding: 10px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.2px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform .15s, background .15s;
}
.bb-cta-sm:hover { background: #000; text-decoration: none; transform: translateY(-1px); }

/* ── Buttons ─────────────────────────── */
.bb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 12px; border: none;
  font: 700 14px/1 var(--bb-font); cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
  text-decoration: none;
}
.bb-btn-primary { background: var(--bb-coral); color: #fff; box-shadow: 0 6px 16px rgba(255,107,107,0.3); }
.bb-btn-primary:hover { background: var(--bb-coral-deep); text-decoration: none; transform: translateY(-1px); }
.bb-btn-ink { background: var(--bb-ink); color: #fff; }
.bb-btn-ink:hover { background: #000; text-decoration: none; transform: translateY(-1px); }
.bb-btn-ghost {
  background: transparent; color: var(--bb-ink);
  border: 1px solid var(--bb-line-strong);
}
.bb-btn-ghost:hover { background: rgba(0,0,0,0.04); text-decoration: none; }
.bb-btn-lg { padding: 18px 28px; font-size: 15px; border-radius: 14px; }
.bb-btn-block { width: 100%; }

/* ── Pills / badges ──────────────────── */
.bb-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bb-coral-soft); color: var(--bb-coral);
  padding: 8px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  border: 1px solid var(--bb-coral-soft-2);
}
.bb-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
}
.bb-pill-green { background: var(--bb-green-soft); color: var(--bb-green); }
.bb-pill-ink { background: var(--bb-ink); color: #fff; }

/* ── Containers / sections ───────────── */
.bb-shell { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.bb-shell-narrow { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.bb-section { padding: 80px 0; }
.bb-section-tight { padding: 48px 0; }
.bb-divider { height: 1px; background: var(--bb-line); margin: 0 24px; }

/* ── Cards ───────────────────────────── */
.bb-card {
  background: var(--bb-card);
  border-radius: var(--bb-radius-lg);
  border: 1px solid var(--bb-line);
  padding: 28px;
  box-shadow: var(--bb-shadow-sm);
}

/* ── Type ────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--bb-font-display); letter-spacing: -0.02em; margin: 0; line-height: 1.1; font-weight: 600; }
.bb-h1 { font-size: clamp(40px, 6vw, 64px); letter-spacing: -0.03em; line-height: 1.05; }
.bb-h2 { font-size: clamp(28px, 4vw, 40px); }
.bb-h3 { font-size: 20px; line-height: 1.3; font-weight: 600; }
.bb-lead { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: var(--bb-muted); }
.bb-body { font-size: 15px; line-height: 1.65; color: var(--bb-muted); }
.bb-tiny { font-size: 12px; color: var(--bb-muted-2); }
.bb-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ── Footer (shared) ─────────────────── */
.bb-footer {
  background: var(--bb-ink); color: #BDB6AC;
  padding: 64px 0 40px; margin-top: 80px;
}
.bb-footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid #2A2A2A;
}
.bb-footer h5 {
  color: #fff; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: 16px; font-family: var(--bb-font);
}
.bb-footer ul { list-style: none; padding: 0; margin: 0; }
.bb-footer ul li { margin-bottom: 10px; }
.bb-footer a { color: #BDB6AC; font-size: 14px; }
.bb-footer a:hover { color: #fff; text-decoration: none; }
.bb-footer-bottom {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-top: 32px; font-size: 13px; flex-wrap: wrap; gap: 16px;
}
.bb-footer-logo { color: var(--bb-coral); font-weight: 800; font-size: 16px; }

/* ── Responsive ──────────────────────── */
@media (max-width: 720px) {
  .bb-nav-links { display: none; }
  .bb-section { padding: 56px 0; }
  .bb-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ── Forms ───────────────────────────── */
.bb-label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--bb-muted); margin: 16px 0 6px;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.bb-input {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--bb-line-strong); border-radius: 10px;
  font: 14px/1.4 var(--bb-font); background: #fff; color: var(--bb-ink);
  transition: border-color .15s, box-shadow .15s;
}
.bb-input:focus { outline: none; border-color: var(--bb-coral); box-shadow: 0 0 0 3px var(--bb-coral-soft); }
.bb-textarea { min-height: 80px; resize: vertical; font-family: var(--bb-font); }

.final-cta-aside {
  margin-top: 24px; /* Adjust the pixels to your liking */
  display: block;   /* Ensures it sits on its own line properly */
}
/* Time Capsule Section */
.time-capsule {
  padding: 80px 0;
  background: linear-gradient(180deg, #fff 0%, var(--bb-bg) 100%);
}
.time-capsule-content {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}
.capsule-price-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bb-coral-soft);
  border: 1px solid var(--bb-coral-soft-2);
  padding: 10px 18px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.capsule-price-tag span {
  font: 800 16px var(--bb-font);
  color: var(--bb-coral);
}
.capsule-price-tag small {
  font: 600 13px var(--bb-font);
  color: var(--bb-muted);
}