/* type +2px readability pass applied */
/* =========================================================================
   The Womb Care · funnel system (system B, Nina's own brand)
   Her real world, elevated: warm cream paper, deep wine ink and CTAs (her
   burgundy suit, the NourishHer plum), sage from the book and the "THE WOMB
   CARE" thumbnails. DM Serif Display (soft editorial serif, like her book
   cover) + Figtree (warm, very legible). Background: delicate sage wave
   line-art anchored to the corners (gradients.md 5b), never behind text.
   ========================================================================= */

@font-face { font-family: "DM Serif Display"; src: url("fonts/dm-serif-display-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("fonts/dm-serif-display-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin-wght-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #f8f3ed;
  --bg-2: #f1e8df;
  --surface: #fffdf9;
  --surface-2: #fbf6f0;
  --sage-50: #eaf2eb;
  --sage: #a9c7b0;
  --sage-deep: #3d6a51;
  --ink: #2a1a21;
  --muted: #6a5860;
  --faint: #7a6870;
  --hair: rgba(42, 26, 33, 0.1);
  --hair-soft: rgba(42, 26, 33, 0.06);
  --accent: #7a1f3d;
  --accent-2: #93284b;
  --accent-deep: #5a1229;
  --accent-ink: #ffffff;
  --accent-soft: rgba(122, 31, 61, 0.07);
  --accent-glow: rgba(122, 31, 61, 0.28);
  --money: #1f7a46;
  --shadow: rgba(70, 30, 45, 0.12);
  --display: "DM Serif Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 20px;
  --maxw: 1120px;
  --gutter: clamp(18px, 5vw, 32px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font-family: var(--sans); font-size: calc(17px + 2px); line-height: 1.65;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
  background: var(--bg); position: relative;
}
/* one continuous page canvas (no section seams): cream paper, a sage bloom top-left,
   a wine whisper bottom-right, and thin sage wave contours tucked into two corners */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600' fill='none' stroke='%233d6a51' stroke-width='1.2'%3E%3Cpath opacity='.10' d='M-20 520 C 160 440, 300 600, 480 520 S 760 420, 920 500'/%3E%3Cpath opacity='.085' d='M-20 548 C 160 468, 300 628, 480 548 S 760 448, 920 528'/%3E%3Cpath opacity='.07' d='M-20 576 C 160 496, 300 656, 480 576 S 760 476, 920 556'/%3E%3Cpath opacity='.055' d='M-20 604 C 160 524, 300 684, 480 604 S 760 504, 920 584'/%3E%3C/svg%3E") right -120px bottom -80px / 900px 600px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='420' viewBox='0 0 760 420' fill='none' stroke='%237a1f3d' stroke-width='1'%3E%3Cpath opacity='.06' d='M-20 60 C 140 0, 260 140, 420 70 S 640 -10, 780 60'/%3E%3Cpath opacity='.05' d='M-20 86 C 140 26, 260 166, 420 96 S 640 16, 780 86'/%3E%3Cpath opacity='.04' d='M-20 112 C 140 52, 260 192, 420 122 S 640 42, 780 112'/%3E%3C/svg%3E") left -140px top -20px / 760px 420px no-repeat,
    radial-gradient(60% 45% at 0% 0%, rgba(169, 199, 176, 0.28), transparent 62%),
    radial-gradient(50% 40% at 100% 100%, rgba(122, 31, 61, 0.05), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 880px; }
.section { padding-block: clamp(64px, 10vw, 112px); position: relative; }
.section--tight { padding-top: clamp(24px, 4vw, 40px); }

/* ---- type ---- */
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; color: var(--ink); text-wrap: balance; }
h1 { font-size: calc(clamp(34px, 4.6vw, 58px) + 2px); line-height: 1.08; letter-spacing: -0.012em; }
h2 { font-size: calc(clamp(30px, 3.8vw, 46px) + 2px); line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-size: calc(clamp(21px, 2vw, 25px) + 2px); line-height: 1.22; letter-spacing: -0.005em; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }
.eyebrow { display: inline-block; margin: 0 0 18px; font-family: var(--sans); font-size: calc(12.5px + 2px); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-deep); }
.lead { margin: 22px auto 0; max-width: 60ch; font-size: calc(clamp(17px, 1.6vw, 19.5px) + 2px); line-height: 1.6; color: var(--muted); }
.sec-head { text-align: center; max-width: 760px; margin: 0 auto clamp(48px, 7vw, 72px); }
.center { text-align: center; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px;
  font-family: var(--sans); font-weight: 700; font-size: calc(17px + 2px); letter-spacing: -0.005em;
  padding: 16px 34px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.btn .ar { display: inline-block; transition: transform 0.25s var(--ease); }
.btn-primary {
  position: relative; overflow: hidden; color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 16px 34px -14px var(--accent-glow);
}
.btn-primary::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.26), transparent); transition: transform 0.7s var(--ease); }
.btn-primary:hover { transform: translate(var(--mgx, 0), calc(var(--mgy, 0px) - 2px)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 22px 40px -14px var(--accent-glow); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:hover .ar { transform: translateX(3px); }
.btn-primary:active { transform: scale(0.98); }
.btn-lg { font-size: calc(18px + 2px); padding: 19px 44px; min-height: 62px; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--hair); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---- reveal system (progressive: visible without JS) ---- */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .stagger.in > * { opacity: 1; transform: none; }
.js .stagger.in > *:nth-child(2) { transition-delay: 0.08s; }
.js .stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
.js .stagger.in > *:nth-child(4) { transition-delay: 0.24s; }
.js .stagger.in > *:nth-child(5) { transition-delay: 0.32s; }
.js .stagger.in > *:nth-child(6) { transition-delay: 0.4s; }
.js .stagger.in > *:nth-child(7) { transition-delay: 0.48s; }
.js .stagger.in > *:nth-child(8) { transition-delay: 0.56s; }

/* signature: hero headline line-mask reveal */
.mask-h .ln { display: block; overflow: hidden; padding-bottom: 0.08em; }
.mask-h .ln > span { display: inline-block; }
.js .mask-h .ln > span { transform: translateY(105%); transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); }
.js .mask-h.in .ln > span { transform: none; }
.js .mask-h.in .ln:nth-child(2) > span { transition-delay: 0.1s; }
.js .mask-h.in .ln:nth-child(3) > span { transition-delay: 0.2s; }

/* ---- YouTube testimonial cards (2-up, name + description centred below, no "Watch on YouTube") ---- */
.vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 4vw, 44px) clamp(22px, 3.4vw, 36px); max-width: 1000px; margin: 0 auto; }
.vcard { text-align: center; min-width: 0; }
.ytc {
  appearance: none; font: inherit; padding: 0; margin: 0; width: 100%; display: block;
  position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--sage-50);
  border: 1px solid var(--hair); box-shadow: 0 30px 60px -38px var(--shadow), 0 2px 6px -2px var(--shadow);
  cursor: pointer; isolation: isolate;
}
.ytc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.ytc:hover img { transform: scale(1.025); }
.ytc::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 80% at 50% 50%, transparent 40%, rgba(42, 26, 33, 0.18)); pointer-events: none; }
.ytc .vplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 70px; height: 70px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 253, 249, 0.95); color: var(--accent);
  box-shadow: 0 14px 34px -10px rgba(42, 26, 33, 0.45); transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.ytc .vplay svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.ytc:hover .vplay { transform: translate(-50%, -50%) scale(1.07); background: var(--accent); color: #fff; }
.ytc .vlen { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 4px 9px; border-radius: 8px; background: rgba(42, 26, 33, 0.78); color: #fff; font-size: calc(12.5px + 2px); font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.ytframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 20px; background: #000; box-shadow: 0 30px 60px -38px var(--shadow); }
.vname { margin: 22px 0 6px; font-family: var(--display); font-size: calc(23px + 2px); font-weight: 400; letter-spacing: -0.005em; }
.vdesc { margin: 0 auto; max-width: 36ch; font-size: calc(15.5px + 2px); line-height: 1.55; color: var(--muted); }

/* ---- proof grid: 8 equal Trustpilot review cards (4×2) ---- */
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rev {
  display: flex; flex-direction: column; gap: 12px; min-height: 100%; padding: 20px 20px 18px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 18px 40px -32px var(--shadow);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.rev:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -32px var(--shadow); }
.rev__stars { display: flex; gap: 3px; }
.rev__stars i { width: 20px; height: 20px; display: grid; place-items: center; background: #00b67a; }
.rev__stars i::before { content: ""; width: 13px; height: 13px; background: #fff; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.rev__title { margin: 0; font-family: var(--sans); font-weight: 800; font-size: calc(15.5px + 2px); line-height: 1.35; color: var(--ink); }
.rev__text { margin: 0; font-size: calc(14.5px + 2px); line-height: 1.55; color: var(--muted); flex: 1; }
.rev__who { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hair-soft); font-size: calc(13px + 2px); color: var(--faint); }
.rev__who b { color: var(--ink); font-weight: 700; }
.rev__tp { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink); }
.rev__tp svg { width: 15px; height: 15px; fill: #00b67a; }
.proof-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 26px auto 0; font-size: calc(15px + 2px); color: var(--muted); }
.proof-sum b { color: var(--ink); }
.proof-sum svg { width: 18px; height: 18px; fill: #00b67a; }

/* ---- "as featured" press row ---- */
.press { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 34px; }
.press img { height: 30px; width: auto; filter: grayscale(1); opacity: 0.72; mix-blend-mode: multiply; }

/* ---- footer: branding-only banner, height = 1.5 × logo, logo centred ---- */
.ffoot { position: relative; height: 54px; display: flex; align-items: center; justify-content: center; background: var(--surface); }
.ffoot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px; pointer-events: none; background: linear-gradient(180deg, transparent, var(--surface)); }
.ffoot img { height: 36px; width: auto; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js .stagger > *, .js .mask-h .ln > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .btn-primary::after, .rev, .ytc img, .ytc .vplay { transition: none; }
}

@media (max-width: 960px) {
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  body { font-size: calc(16.5px + 2px); }
  .vgrid { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .btn-lg { width: 100%; padding-inline: 24px; }
  .proof-grid { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin: 0 auto; }
  .press img { height: 24px; }
}

/* ---- mobile hardening (references/mobile.md) ---- */
img, svg, video, canvas, iframe { max-width: 100%; }
p, li, td, th, blockquote, figcaption, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
table, pre { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
  .tag, [class*="badge"], [class*="pill"] { margin-left: 0; }
}
@media (max-width: 420px) {
  .tok-merge, .tok-link, code { white-space: normal; }
}

/* ---- designed client-story posters (the real YouTube player loads on tap) ---- */
.ytc { text-align: left; color: var(--ink); }
.ytc--sage { background: radial-gradient(90% 120% at 100% 100%, rgba(61, 106, 81, 0.16), transparent 60%), linear-gradient(150deg, #eef5ee, #d9e8db); }
.ytc--blush { background: radial-gradient(90% 120% at 100% 100%, rgba(122, 31, 61, 0.12), transparent 60%), linear-gradient(150deg, #fbf1ec, #f1dcd8); }
.ytc::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='340' viewBox='0 0 600 340' fill='none' stroke='%233d6a51' stroke-width='1.2'%3E%3Cpath opacity='.22' d='M-10 260 C 110 200, 210 320, 330 260 S 520 180, 610 240'/%3E%3Cpath opacity='.16' d='M-10 284 C 110 224, 210 344, 330 284 S 520 204, 610 264'/%3E%3Cpath opacity='.1' d='M-10 308 C 110 248, 210 368, 330 308 S 520 228, 610 288'/%3E%3C/svg%3E") right bottom / 100% auto no-repeat; }
.ytc::after { display: none; }
.ytc__k { position: absolute; left: 7%; top: 11%; font-size: calc(11.5px + 2px); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-deep); }
.ytc--blush .ytc__k { color: var(--accent); }
.ytc__q { position: absolute; left: 7%; right: 34%; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: calc(clamp(22px, 2.5vw, 31px) + 2px); line-height: 1.1; color: var(--ink); }
.ytc__q em { font-style: italic; color: var(--accent); }
.ytc__w { position: absolute; left: 7%; bottom: 11%; font-size: calc(14px + 2px); font-weight: 700; color: var(--muted); }
.ytc .vplay { left: auto; right: 9%; top: 50%; transform: translateY(-50%); background: var(--accent); color: #fff; width: 64px; height: 64px; box-shadow: 0 16px 34px -12px var(--accent-glow); }
.ytc:hover .vplay { transform: translateY(-50%) scale(1.07); background: var(--accent-2); }
.ytc .vlen { background: rgba(42, 26, 33, 0.72); }
@media (max-width: 420px) { .ytc__q { font-size: calc(21px + 2px); right: 30%; } .ytc .vplay { width: 54px; height: 54px; } }