/* ============================================================
   Bionomy landing-page stylesheet
   Layered on top of ../styles.css. Self-contained for /lp/* pages.
   ============================================================ */

/* --- LP hero ----------------------------------------------- */
.lp-hero {
  background: #f4eede;
  padding: 90px 24px 70px;
  text-align: left;
}
.lp-hero-inner {
  max-width: 880px;
  margin: 0 auto;
}
.lp-hero-dark {
  background: linear-gradient(180deg, #0f1a1a 0%, #15252a 100%);
  color: #f4eede;
}
.lp-hero-dark .lp-h1,
.lp-hero-dark .lp-sub,
.lp-hero-dark .lp-microcopy {
  color: #f4eede;
}
.lp-hero-cream { background: #f4eede; }
.lp-hero-orange { background: linear-gradient(180deg, #d35a2a 0%, #b94d22 100%); color: #fff; }
.lp-hero-orange .lp-h1,
.lp-hero-orange .lp-sub,
.lp-hero-orange .lp-microcopy { color: #fff; }
.lp-hero-orange .lp-eyebrow { color: rgba(255,255,255,.7); }

.lp-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #0e8d80;
  margin: 0 0 22px 0;
}
.lp-eyebrow.center { text-align: center; }

.lp-h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: #0f1a1a;
  margin: 0 0 22px 0;
  font-weight: 400;
}
.lp-h1 em {
  color: #0e8d80;
  font-style: italic;
  font-weight: 400;
}
.lp-hero-dark .lp-h1 em { color: #7cc7c0; }
.lp-hero-orange .lp-h1 em { color: #f7dec6; }

.lp-sub {
  font-family: Inter, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: #2a3838;
  max-width: 680px;
  margin: 0 0 32px 0;
}

.lp-cta {
  margin-top: 8px;
  font-size: 16px;
}

.lp-microcopy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: #6a7878;
  margin: 18px 0 0 0;
}

/* --- Stat strip -------------------------------------------- */
.lp-stat-strip {
  background: #ede5d2;
  padding: 36px 24px;
  border-top: 1px solid rgba(15,26,26,.08);
  border-bottom: 1px solid rgba(15,26,26,.08);
}
.lp-stat-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.lp-stat-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-stat-grid .stat-num {
  font-family: 'DM Serif Display', serif;
  font-size: 30px;
  line-height: 1.05;
  color: #0f1a1a;
  font-weight: 400;
}
.lp-stat-grid .stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6a7878;
}

/* --- LP sections ------------------------------------------- */
.lp-section {
  padding: 88px 24px;
  background: #f4eede;
}
.lp-section-cream { background: #ede5d2; }
.lp-section-dark { background: #0f1a1a; color: #f4eede; }
.lp-section-dark .lp-h2 { color: #f4eede; }
.lp-section-dark .lp-lede { color: #d2cab8; }
.lp-section-orange { background: linear-gradient(180deg, #d35a2a 0%, #b94d22 100%); color: #fff; }
.lp-section-orange .lp-h2 { color: #fff; }
.lp-section-orange .lp-lede { color: rgba(255,255,255,.92); }
.lp-section-orange .lp-eyebrow { color: rgba(255,255,255,.7); }

.lp-narrow { max-width: 760px; margin: 0 auto; }
.lp-wide { max-width: 1100px; margin: 0 auto; }

.lp-h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #0f1a1a;
  margin: 0 0 24px 0;
  font-weight: 400;
  text-align: center;
}
.lp-h2 em { color: #0e8d80; font-style: italic; font-weight: 400; }
.lp-section-dark .lp-h2 em { color: #7cc7c0; }

.lp-lede {
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #2a3838;
  text-align: center;
  margin: 0 auto 44px;
  max-width: 620px;
}

/* --- Myth blocks (TOFU) ------------------------------------ */
.lp-myth {
  background: #fff;
  border-radius: 14px;
  padding: 28px 30px;
  margin: 0 0 18px 0;
  box-shadow: 0 1px 0 rgba(15,26,26,.04);
}
.lp-myth h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 12px 0;
  color: #0f1a1a;
}
.lp-myth p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #3a4848;
  margin: 0;
}

/* --- Marker grid (TOFU) ------------------------------------ */
.lp-marker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.lp-marker-grid > div {
  background: #fff;
  border-radius: 12px;
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-marker-grid .marker-num {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: #0e8d80;
}
.lp-marker-grid .marker-lbl {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #3a4848;
}

/* --- Comparison table (MOFU) ------------------------------- */
.lp-compare {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15,26,26,.05);
}
.lp-compare-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  border-bottom: 1px solid #ece4d1;
}
.lp-compare-row:last-child { border-bottom: 0; }
.lp-compare-row > div {
  padding: 18px 22px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #2a3838;
  border-right: 1px solid #ece4d1;
}
.lp-compare-row > div:last-child { border-right: 0; }
.lp-compare-row.header > div {
  background: #0f1a1a;
  color: #f4eede;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lp-compare-row.header > div:first-child { background: #1c2a2a; }
.lp-compare-row .yes { color: #0e8d80; font-weight: 500; }
.lp-compare-row .no  { color: #b04a3a; }
.lp-compare-row > div:first-child {
  background: #f8f2e2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #2a3838;
  font-weight: 500;
}

/* --- Proof cards (MOFU) ------------------------------------ */
.lp-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 36px 0;
}
.lp-proof {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
}
.lp-proof-num {
  font-family: 'DM Serif Display', serif;
  font-size: 36px;
  color: #0e8d80;
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}
.lp-proof-headline {
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: #0f1a1a;
  margin: 0 0 8px 0;
}
.lp-proof-body {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #3a4848;
  margin: 0;
}

/* --- BOFU: single-screen direct response ------------------- */
.lp-direct {
  min-height: 86vh;
  display: flex;
  align-items: center;
  padding: 80px 24px;
  background: #f4eede;
}
.lp-direct-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.lp-direct-img {
  border-radius: 18px;
  overflow: hidden;
}
.lp-direct-img img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.lp-direct h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.06;
  margin: 0 0 18px 0;
  font-weight: 400;
  color: #0f1a1a;
}
.lp-direct h1 em { color: #0e8d80; font-style: italic; }
.lp-direct p.lp-direct-sub {
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #2a3838;
  margin: 0 0 28px 0;
}
.lp-direct ul {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}
.lp-direct ul li {
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #2a3838;
  padding: 10px 0 10px 26px;
  position: relative;
  border-bottom: 1px solid rgba(15,26,26,.08);
}
.lp-direct ul li:last-child { border-bottom: 0; }
.lp-direct ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 10px;
  color: #0e8d80;
  font-weight: 500;
}
.lp-direct .lp-price {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: #0f1a1a;
  margin: 0 0 14px 0;
}
.lp-direct .lp-price em { color: #0e8d80; font-style: italic; }

/* --- Thanks page ------------------------------------------- */
.lp-thanks {
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  background: #f4eede;
}
.lp-thanks-inner { max-width: 600px; }
.lp-thanks .check-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #0e8d80;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 0 26px 0;
}
.lp-thanks h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.1;
  font-weight: 400;
  color: #0f1a1a;
  margin: 0 0 18px 0;
}
.lp-thanks h1 em { color: #0e8d80; font-style: italic; }
.lp-thanks p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #2a3838;
  margin: 0 0 28px 0;
}
.lp-thanks .step-list {
  text-align: left;
  margin: 28px auto 32px;
  max-width: 440px;
  list-style: none;
  padding: 0;
}
.lp-thanks .step-list li {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #2a3838;
  padding: 12px 0 12px 38px;
  position: relative;
  border-bottom: 1px solid rgba(15,26,26,.08);
}
.lp-thanks .step-list li:last-child { border-bottom: 0; }
.lp-thanks .step-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0e8d80;
  color: #fff;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lp-thanks .step-list li:nth-child(1)::before { content: "1"; }
.lp-thanks .step-list li:nth-child(2)::before { content: "2"; }
.lp-thanks .step-list li:nth-child(3)::before { content: "3"; }
.lp-thanks .step-list li:nth-child(4)::before { content: "4"; }

/* --- Mini footer ------------------------------------------- */
.footer-mini {
  background: #ede5d2;
  padding: 40px 24px 32px;
  text-align: center;
}
.footer-mini-inner { max-width: 880px; margin: 0 auto; }
.footer-mini .footer-brand {
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  letter-spacing: .12em;
  margin: 0 0 4px 0;
  color: #0f1a1a;
}
.footer-mini .footer-tag {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 14px;
  color: #0e8d80;
  margin: 0 0 18px 0;
}
.footer-nav-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 0 0 18px 0;
}
.footer-nav-mini a {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  color: #3a4848;
  text-decoration: none;
}
.footer-nav-mini a:hover { color: #0e8d80; }
.footer-mini .footer-fine {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .03em;
  color: #6a7878;
  margin: 0;
  line-height: 1.55;
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 880px) {
  .lp-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .lp-marker-grid { grid-template-columns: 1fr; }
  .lp-proof-grid { grid-template-columns: 1fr; }
  .lp-compare-row { grid-template-columns: 1.4fr 1fr 1fr; }
  .lp-compare-row > div:nth-child(4) { display: none; }
  .lp-direct-inner { grid-template-columns: 1fr; gap: 32px; }
  .lp-direct-img { order: -1; max-width: 320px; margin: 0 auto; }
  .lp-section { padding: 60px 20px; }
  .lp-hero { padding: 70px 20px 50px; }
}
@media (max-width: 520px) {
  .lp-stat-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .lp-compare-row { grid-template-columns: 1.2fr 1fr; }
  .lp-compare-row > div:nth-child(3),
  .lp-compare-row > div:nth-child(4) { display: none; }
  .lp-myth { padding: 22px 20px; }
}

/* ── Nav contrast fix for LPs without dark hero ─────────────────────── */
/* TOFU pages have .lp-hero-dark → white nav over dark hero works.
   MOFU pages have .lp-hero (cream) → need ink nav.
   BOFU pages have .lp-direct (cream) → need ink nav.
   /lp/thanks has .lp-thanks (cream) → need ink nav. */
body:has(.lp-hero:not(.lp-hero-dark)) .nav,
body:has(.lp-direct) .nav,
body:has(.lp-thanks) .nav {
  background: var(--cream);
  border-bottom: 1px solid rgba(15, 38, 36, 0.08);
}
body:has(.lp-hero:not(.lp-hero-dark)) .nav .logo,
body:has(.lp-direct) .nav .logo,
body:has(.lp-thanks) .nav .logo,
body:has(.lp-hero:not(.lp-hero-dark)) .nav .logo svg,
body:has(.lp-direct) .nav .logo svg,
body:has(.lp-thanks) .nav .logo svg {
  color: var(--ink);
}
body:has(.lp-hero:not(.lp-hero-dark)) .nav .nav-links a,
body:has(.lp-direct) .nav .nav-links a,
body:has(.lp-thanks) .nav .nav-links a {
  color: var(--ink);
}