/*
 * Intuitive Mothers — Components
 * Buttons, cards, pull quotes, hero gradients, tag pills, form fields.
 * Built on top of colors_and_type.css. Import that first.
 */

/* ============================================================
 * LAYOUT — page container
 * Centered column used to wrap most page sections so content has
 * breathing room on the left/right. Marquees and other full-bleed
 * patterns intentionally sit OUTSIDE this wrapper.
 * ============================================================ */

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
}

/* ============================================================
 * BUTTONS
 * ============================================================ */

.btn {
  font-family: var(--body);
  font-weight: var(--w-medium);
  font-size: 18px;
  line-height: 1.2;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity var(--t-fast) var(--ease-soft),
              background var(--t-fast) var(--ease-soft),
              color var(--t-fast) var(--ease-soft);
  text-decoration: none;
}

/* Primary CTA — Strawberry pill (the Tier 1 default for the brand).
 *
 * Visual: Strawberry background, Cream text, soft Strawberry-tinted shadow
 * at rest, deeper Strawberry shadow on hover, magnetic lift (translateY).
 * Same treatment as the pill nav's "Join the community" CTA — keeps the
 * brand quiet and editorial; the lift + shadow deepening is the magnetic
 * affordance, no decorative halo.
 *
 * Magnetic lift transform lives in motion.css. */
.btn-primary {
  background: var(--primary-cta-bg);
  color: var(--primary-cta-fg);
  box-shadow: 0 4px 12px rgba(188, 69, 101, 0.18);
  transition: box-shadow var(--t-default) var(--ease-out),
              transform var(--t-default) var(--ease-out);
}
.btn-primary:active { background: var(--ink); }

.btn-secondary {
  background: var(--secondary-cta-bg);
  color: var(--secondary-cta-fg);
}
.btn-secondary:hover { opacity: 0.92; }

/* ──────────────────────────────────────────────────────────────
 * .btn-arrow — major / hero variant
 *
 * Adds a Cream circle on the right of the button containing a small
 * arrow SVG. Pair with .btn-primary for hero CTAs and "this is the
 * moment" sections. Use sparingly — 1–2 per page max. Smaller in-flow
 * CTAs stay as plain .btn-primary (no arrow).
 *
 * Markup:
 *   <button class="btn btn-primary btn-arrow">
 *     Join the community
 *     <span class="btn-arrow-circle">
 *       <svg viewBox="0 0 14 14" fill="none">
 *         <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor"
 *               stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 *       </svg>
 *     </span>
 *   </button>
 * ────────────────────────────────────────────────────────────── */
.btn-arrow {
  padding: 8px 8px 8px 28px;
  gap: 14px;
}
.btn-arrow-circle {
  width: 38px;
  height: 38px;
  background: var(--cream);
  color: var(--strawberry);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 280ms var(--ease-out);
}
.btn-arrow:hover .btn-arrow-circle { transform: scale(1.08) translateX(2px); }
.btn-arrow-circle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* Tertiary — text link with Peach underline */
.btn-text {
  font-family: var(--body);
  font-weight: var(--w-medium);
  font-size: var(--size-body);
  color: var(--strawberry);
  text-decoration: underline;
  text-decoration-color: var(--peach);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: text-decoration-color var(--t-fast) var(--ease-soft);
}
.btn-text:hover { text-decoration-color: var(--strawberry); }

/* Quiet ghost button — Strawberry text on transparent with thin Strawberry border */
.btn-ghost {
  background: transparent;
  color: var(--strawberry);
  border: 1px solid var(--strawberry);
  padding: 15px 31px;  /* one less px each side to compensate for the 1px border */
}
.btn-ghost:hover { background: var(--strawberry); color: var(--cream); }

/* Smaller button variant */
.btn-sm { padding: 12px 22px; font-size: 15px; }

/* ============================================================
 * CARDS
 * ============================================================ */

.card {
  background: var(--bg-layer);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.card-flush { padding: 0; overflow: hidden; }

.card-dark {
  /* Class name kept for backward compat but the brand never uses Ink as a card bg.
     The "dark / anchor" variant is now a saturated Strawberry card with Cream text. */
  background: var(--strawberry);
  color: var(--cream);
  border: none;
}
.card-dark h1, .card-dark h2, .card-dark h3 { color: var(--cream); }
.card-dark .tag { color: var(--peach); }
.card-dark .caption { color: rgba(255, 255, 255, 0.6); }

/* ============================================================
 * PULL QUOTES — four locked treatments
 *
 * Default (.pull-quote)        → editorial drop-quote (giant Marcellus
 *                                 quotation glyph in Strawberry low-opacity
 *                                 next to the quote text). Magazine-style.
 * .pull-quote--aurora          → quote on warm aurora gradient background
 *                                 (atmospheric, mood-driven). Pair with
 *                                 .section-aurora-bg.section-aurora-bg--warm.
 * .pull-quote--sprig           → botanical sprig ornaments above and below
 *                                 the quote (print-magazine elegance).
 *
 * Markup (default — drop-quote):
 *   <blockquote class="pull-quote">
 *     <span class="pull-quote__glyph">&ldquo;</span>
 *     <p class="pull-quote__body">Babies were not designed to sleep alone…</p>
 *     <cite class="pull-quote__author">— from the weekly letter</cite>
 *   </blockquote>
 *
 * Each variant uses the same .pull-quote__body and .pull-quote__author.
 * The variants override layout/decoration via the --modifier class.
 * Old .pull-quote-mood (Lilac block) and .pull-quote-cool (Sky block)
 * were removed — those colored block treatments don't fit the brand.
 * ============================================================ */

/* Shared body + attribution (used by all four variants) */
.pull-quote {
  margin: var(--space-7) 0;
}
.pull-quote__body {
  font-family: var(--quote);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: 32px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.pull-quote__author {
  display: block;
  font-family: var(--body);
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--strawberry);
  margin-top: var(--space-5);
  opacity: 0.85;
}

/* ── #1 (default): Editorial drop-quote ─────────────────────── */
.pull-quote {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-7) var(--space-6);
  background: var(--mist);
  border-radius: var(--radius-lg);
}
.pull-quote__glyph {
  font-family: var(--quote);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: 220px;
  line-height: 0.8;
  color: var(--strawberry);
  opacity: 0.22;
  user-select: none;
  margin-top: -10px;
  text-align: right;
}
.pull-quote > .pull-quote__body { padding-top: 40px; }

@media (max-width: 640px) {
  .pull-quote {
    grid-template-columns: 1fr;
    gap: 0;
    padding: var(--space-6) var(--space-5);
  }
  .pull-quote__glyph { text-align: left; font-size: 140px; }
  .pull-quote > .pull-quote__body { padding-top: 0; font-size: 22px; }
}

/* ── #2: Aurora warm wash ─────────────────────────────────── */
/* Pair with .section-aurora-bg.section-aurora-bg--warm in markup */
.pull-quote.pull-quote--aurora {
  display: block;
  grid-template-columns: none;
  padding: 96px var(--space-6);
  background: transparent;          /* aurora bg comes from sibling class */
  border-radius: var(--radius-lg);
  text-align: center;
}
.pull-quote.pull-quote--aurora .pull-quote__body {
  font-size: 36px;
  max-width: 760px;
  margin: 0 auto;
  padding-top: 0;
}
.pull-quote.pull-quote--aurora .pull-quote__author {
  margin-top: var(--space-6);
}

/* ── #3: Sprig-flanked classic ────────────────────────────── */
.pull-quote.pull-quote--sprig {
  display: block;
  grid-template-columns: none;
  text-align: center;
  padding: var(--space-7) var(--space-6);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.pull-quote.pull-quote--sprig .pull-quote__body {
  font-size: 30px;
  max-width: 720px;
  margin: 0 auto;
  padding-top: 0;
}
.pull-quote__sprig {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-6);
  display: block;
}
.pull-quote__sprig--bottom {
  margin: var(--space-6) auto 0;
  transform: rotate(180deg);
}

/* ============================================================
 * TESTIMONIAL CARDS — 3-up editorial grid
 *
 * The brand's social-proof block. Three cream cards in a row,
 * each with a five-star row, an italic Marcellus quote, and a
 * small author block (avatar + name + role). Soft shadow,
 * hover lift.
 *
 * Markup:
 *   <div class="tcards-grid">
 *     <article class="tcards-card">
 *       <div class="tcards-stars" aria-label="5 out of 5">★ ★ ★ ★ ★</div>
 *       <p class="tcards-quote">…</p>
 *       <div class="tcards-author">
 *         <div class="avatar peach">M</div>
 *         <div>
 *           <div class="tcards-name">Maya R.</div>
 *           <div class="tcards-role">Brooklyn · 4 weeks postpartum</div>
 *         </div>
 *       </div>
 *     </article>
 *     ...two more cards...
 *   </div>
 *
 * Avatars use the existing .avatar component (#22) — pick a color
 * modifier per card (.peach / .lilac / .sky / .butter / .berry).
 *
 * Responsive: 3-up desktop → 2-up tablet (≤1024) → 1-up mobile (≤640).
 * ============================================================ */

.tcards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.tcards-card {
  background: var(--cream);
  border: 1px solid rgba(45, 26, 40, 0.06);
  border-radius: var(--radius-lg);
  padding: 32px 28px 26px;
  box-shadow: 0 12px 28px rgba(45, 26, 40, 0.05);
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.tcards-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(45, 26, 40, 0.09);
}
.tcards-stars {
  display: flex;
  gap: 2px;
  color: var(--strawberry);
  font-size: 14px;
  letter-spacing: 1px;
}
.tcards-quote {
  font-family: var(--quote);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.tcards-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(45, 26, 40, 0.06);
}
.tcards-name {
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.3;
}
.tcards-role {
  font-family: var(--body);
  font-size: 12px;
  color: var(--ink);
  opacity: 0.6;
  line-height: 1.3;
}
@media (max-width: 1024px) {
  .tcards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tcards-grid { grid-template-columns: 1fr; gap: 16px; }
  .tcards-card { padding: 24px 22px 20px; }
  .tcards-quote { font-size: 16px; }
}

/* ============================================================
 * TAGS / PILLS
 * ============================================================ */

.tag-pill {
  font-family: var(--body);
  font-weight: var(--w-medium);
  font-size: var(--size-tag);
  letter-spacing: var(--tracking-tag);
  text-transform: uppercase;
  color: var(--strawberry);
  background: var(--cream);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  display: inline-block;
}

.tag-pill-filled {
  background: var(--peach);
  color: var(--strawberry);
  border: none;
}

/* ============================================================
 * HERO GRADIENTS — the two sanctioned recipes
 * ============================================================ */

.hero-gradient {
  background: linear-gradient(160deg,
    var(--peach) 0%,
    var(--cream) 50%,
    var(--sky) 100%);
}

.hero-gradient-warm {
  background: linear-gradient(160deg,
    var(--lilac) 0%,
    var(--peach) 50%,
    var(--butter) 100%);
}

/* Soft Mist→Cream wash for "calm" hero sections */
.wash-soft {
  background: linear-gradient(180deg, var(--mist) 0%, var(--cream) 100%);
}

/* ============================================================
 * FORM FIELDS
 * ============================================================ */

.field {
  display: block;
  width: 100%;
  font-family: var(--body);
  font-size: var(--size-body);
  line-height: 1.4;
  color: var(--ink);
  background: var(--mist);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: border-color var(--t-fast) var(--ease-soft),
              background var(--t-fast) var(--ease-soft);
}
.field::placeholder { color: var(--stone); }
.field:hover { border-color: rgba(45, 26, 40, 0.25); }
.field:focus {
  outline: none;
  border-color: var(--strawberry);
  background: var(--cream);
}
.field-label {
  display: block;
  font-family: var(--body);
  font-size: var(--size-caption);
  color: var(--ink);
  margin-bottom: 8px;
  font-weight: var(--w-medium);
}
.field-help {
  display: block;
  font-family: var(--body);
  font-size: 12px;
  color: var(--fg-subtle);
  margin-top: 6px;
}

/* ============================================================
 * RULES / DIVIDERS
 * ============================================================ */

.rule-editorial {
  width: 48px;
  height: 2px;
  background: var(--strawberry);
  border: none;
  margin: 0;
}

.rule-soft {
  height: 1px;
  background: var(--border);
  border: none;
}

/* ============================================================
 * NUMBERED CIRCLE STAMP
 * ============================================================ */

.circle-stamp {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--strawberry);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--quote);
  font-style: italic;
  font-weight: var(--w-light);
  font-size: 20px;
}

.circle-stamp-soft {
  background: var(--cream);
  color: var(--strawberry);
  border: 1px solid var(--strawberry);
}

/* ============================================================
 * STATUS / FUNCTIONAL
 * ============================================================ */

.status {
  font-family: var(--body);
  font-size: var(--size-caption);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-success { background: rgba(143, 170, 139, 0.15); color: #4a6447; }
.status-success::before { background: var(--success); }
.status-warning { background: rgba(201, 117, 83, 0.15); color: #8a4a30; }
.status-warning::before { background: var(--warn); }

/* ============================================================
 * NAV
 * ============================================================ */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
}
.nav-links {
  display: flex;
  gap: var(--space-5);
  font-family: var(--body);
  font-size: var(--size-caption);
  color: var(--ink);
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity var(--t-fast) var(--ease-soft);
}
.nav-links a:hover { opacity: 1; color: var(--strawberry); }
.nav-links a.active { opacity: 1; color: var(--strawberry); }

/* ============================================================
 * AVATAR — profile circle with optional status indicator
 * Tier 2 — for member cards, comment authors, testimonials, "who's online" lists.
 *
 * Markup:
 *   <div class="avatar peach">m</div>
 *   <div class="avatar lilac sm">a<span class="avatar-status status-online"></span></div>
 *
 * Sizes: default 48px · .sm 32px · .lg 64px · .xl 96px
 * Backgrounds: .peach .lilac .sky .butter .berry .ink .cream (default = peach)
 * Status: .status-online (Sage) · .status-offline (Stone) · .status-away (Butter) · .status-busy (Rust)
 * ============================================================ */

.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--peach);
  color: var(--strawberry);
  font-family: var(--display);
  font-weight: var(--w-extrabold);
  font-size: 19px;
  letter-spacing: -0.04em;
  flex-shrink: 0;
  overflow: hidden;
  text-transform: lowercase;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar.sm { width: 32px; height: 32px; font-size: 14px; }
.avatar.lg { width: 64px; height: 64px; font-size: 26px; }
.avatar.xl { width: 96px; height: 96px; font-size: 36px; }

.avatar.peach  { background: var(--peach);  color: var(--strawberry); }
.avatar.lilac  { background: var(--lilac);  color: var(--strawberry); }
.avatar.sky    { background: var(--sky);    color: var(--strawberry); }
.avatar.butter { background: var(--butter); color: var(--strawberry); }
.avatar.berry  { background: var(--strawberry);  color: var(--cream); }
.avatar.ink    { background: var(--ink);    color: var(--cream); }
.avatar.cream  { background: var(--cream);  color: var(--strawberry); border: 1px solid var(--border); }

.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--cream);
}
.avatar.sm .avatar-status { width: 8px; height: 8px; border-width: 1.5px; }
.avatar.lg .avatar-status { width: 16px; height: 16px; border-width: 2.5px; }
.avatar.xl .avatar-status { width: 22px; height: 22px; border-width: 3px; }

.status-online  { background: var(--success); }
.status-offline { background: var(--stone); }
.status-away    { background: var(--butter); }
.status-busy    { background: var(--warn); }

/* Avatar group — overlapping, for "8 mothers in this thread" lists */
.avatar-group { display: inline-flex; align-items: center; }
.avatar-group .avatar {
  margin-left: -12px;
  border: 2px solid var(--cream);
}
.avatar-group .avatar:first-child { margin-left: 0; }

/* Composition: avatar + name + role */
.avatar-card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.avatar-card .name {
  font-family: var(--display);
  font-weight: var(--w-bold);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.avatar-card .role {
  font-family: var(--body);
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* Note: standalone .btn-glow / .btn-glow-wrap / .btn-glow-blur classes
 * were removed — Glow is now built into .btn-primary as the Tier 1 default.
 * The halo lives on .btn-primary::before. For the hero / major-section
 * variant with the circle arrow, use .btn-primary.btn-arrow (defined above
 * in the buttons section). */

/* ============================================================
 * PHOTO GALLERY — scattered polaroid layout
 * Tier 3 — Optional. Use for "moments from the community" or "behind the
 * scenes with Melissa" sections only. NEVER for the homepage hero or any
 * authoritative content. Pulls the brand toward lifestyle-Instagram if used
 * broadly. Honest call: a clean grid using .img-hover is more on-brand for
 * most cases; reach for this only when you want a deliberately playful section.
 *
 * Markup:
 *   <div class="gallery-stage">
 *     <div class="gallery-photos">
 *       <div class="gallery-photo"><div class="gallery-photo-img" style="background-image:url(…)"></div></div>
 *       (5 photos for the default scatter; see scatter-positions below)
 *     </div>
 *   </div>
 * ============================================================ */

.gallery-stage {
  position: relative;
  height: 380px;
  margin: var(--space-8) 0;
  overflow: visible;
}
.gallery-photos {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gallery-photo {
  position: absolute;
  width: 200px;
  height: 240px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(45, 26, 40, 0.12);
  background: var(--mist);
  border: 8px solid var(--cream);
  cursor: pointer;
  transition: transform 400ms var(--ease-out),
              box-shadow 400ms var(--ease-out),
              z-index 0ms 400ms;
}
.gallery-photo:hover {
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(0deg) scale(1.06) !important;
  box-shadow: 0 20px 48px rgba(45, 26, 40, 0.22);
  z-index: 100 !important;
  transition: transform 400ms var(--ease-out),
              box-shadow 400ms var(--ease-out),
              z-index 0ms 0ms;
}
.gallery-photo-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* Default 5-photo horizontal scatter */
.gallery-photo:nth-child(1) {
  --tx: -300px; --ty: 30px;
  transform: translate(var(--tx), var(--ty)) rotate(-6deg);
  z-index: 5;
}
.gallery-photo:nth-child(2) {
  --tx: -150px; --ty: -10px;
  transform: translate(var(--tx), var(--ty)) rotate(3deg);
  z-index: 4;
}
.gallery-photo:nth-child(3) {
  --tx: 0; --ty: 20px;
  transform: translate(var(--tx), var(--ty)) rotate(-2deg);
  z-index: 3;
}
.gallery-photo:nth-child(4) {
  --tx: 150px; --ty: -5px;
  transform: translate(var(--tx), var(--ty)) rotate(4deg);
  z-index: 2;
}
.gallery-photo:nth-child(5) {
  --tx: 300px; --ty: 35px;
  transform: translate(var(--tx), var(--ty)) rotate(-3deg);
  z-index: 1;
}

@media (max-width: 1024px) {
  .gallery-stage { height: 320px; }
  .gallery-photo { width: 160px; height: 200px; border: 6px solid var(--cream); }
}
@media (max-width: 640px) {
  /* Mobile photo gallery — keep the polaroid stack aesthetic.
   * 3 photos visible side-by-side with overlap and tilt; 4th and 5th hidden.
   * Fixed stage height keeps it compact on a phone. */
  .gallery-stage {
    position: relative;
    height: 280px;
    min-height: auto;
    margin: 24px 0;
    padding: 16px;
    overflow: visible;
  }
  .gallery-photos {
    position: absolute;
    inset: 0;
    display: block;
    transform: none;
  }
  .gallery-photo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 120px !important;
    height: 150px !important;
    aspect-ratio: auto !important;
    border: 5px solid var(--cream);
    box-shadow: 0 8px 22px rgba(45, 26, 40, 0.12);
    margin: -75px 0 0 -60px; /* center the 120x150 box on 50%/50% */
  }
  .gallery-photo:nth-child(1) {
    transform: translate(-90px, 0) rotate(-8deg) !important;
    z-index: 3;
  }
  .gallery-photo:nth-child(2) {
    transform: translate(0, -6px) rotate(4deg) !important;
    z-index: 5;
  }
  .gallery-photo:nth-child(3) {
    transform: translate(90px, 8px) rotate(-3deg) !important;
    z-index: 4;
  }
  .gallery-photo:nth-child(4),
  .gallery-photo:nth-child(5) { display: none !important; }
  .gallery-photo:hover { transform: none !important; }
  .gallery-photo:nth-child(1):hover { transform: translate(-90px, 0) rotate(-8deg) !important; }
  .gallery-photo:nth-child(2):hover { transform: translate(0, -6px) rotate(4deg) !important; }
  .gallery-photo:nth-child(3):hover { transform: translate(90px, 8px) rotate(-3deg) !important; }
}

/* ============================================================
 * VIDEO HERO — ambient cinematic video background with big wordmark
 * Tier 1 — alternative hero pattern when you have calm/cinematic muted
 * footage. The original "no autoplay video" ban is softened to:
 *   "Ambient hero video allowed when MUTED, LOOPED, SLOW, CINEMATIC,
 *    and never the only message — text + CTA always overlaid."
 * No talking heads. No fast cuts. No sound. No product demos.
 *
 * Markup:
 *   <section class="hero-video">
 *     <video class="hero-video-bg" autoplay loop muted playsinline preload="metadata"
 *            poster="poster.jpg" src="your-video.mp4"></video>
 *     <div class="hero-video-noise"></div>
 *     <div class="hero-video-darken"></div>
 *     <div class="hero-video-content">
 *       <h1 class="hero-video-title hero-words">
 *         <span class="word"><span>intuitive</span></span>
 *         <span class="word"><span>mothers<span class="star">*</span></span></span>
 *       </h1>
 *       <div class="hero-video-side">
 *         <p class="hero-video-desc">Description here.</p>
 *         <button class="btn-video">
 *           Join the community
 *           <span class="btn-video-circle">
 *             <svg viewBox="0 0 14 14" fill="none">
 *               <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 *             </svg>
 *           </span>
 *         </button>
 *       </div>
 *     </div>
 *   </section>
 *
 * If no video URL: omit the <video> tag and a soft brand-color gradient
 * placeholder shows automatically (.hero-video-placeholder).
 * ============================================================ */

.hero-video {
  position: relative;
  width: 100%;
  height: 95vh;
  min-height: 640px;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Optional placeholder when no video — slowly drifts brand colors */
.hero-video-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg,
    var(--strawberry) 0%,
    var(--lilac) 25%,
    var(--peach) 50%,
    var(--butter) 75%,
    var(--lilac) 100%);
  background-size: 400% 400%;
  animation: hero-video-drift 18s ease-in-out infinite;
}
@keyframes hero-video-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero-video-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.4'/></svg>");
}
.hero-video-darken {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(45, 26, 40, 0.25) 0%,
    transparent 40%,
    transparent 60%,
    rgba(45, 26, 40, 0.55) 100%);
  pointer-events: none;
}
.hero-video-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  padding: 40px 48px 8px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: 48px;
}
.hero-video-title {
  font-family: var(--display);
  font-weight: var(--w-extrabold);
  font-size: clamp(120px, 24vw, 360px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--cream);
  margin: 0;
  text-transform: lowercase;
}
.hero-video-title .star {
  font-size: 0.32em;
  vertical-align: top;
  color: var(--peach);
  margin-left: 0.05em;
  line-height: 1;
}
.hero-video-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 40px;
}
.hero-video-desc {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  max-width: 360px;
  margin: 0;
}

/* CTA — Cream pill with Ink arrow circle, magnetic lift on hover */
.btn-video {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--cream);
  color: var(--ink);
  border: none;
  padding: 8px 8px 8px 26px;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: var(--w-medium);
  font-size: 17px;
  cursor: pointer;
  transition: gap 280ms var(--ease-out),
              transform 280ms var(--ease-out),
              box-shadow 280ms var(--ease-out);
}
.btn-video:hover {
  gap: 14px;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 26, 40, 0.25);
}
.btn-video-circle {
  width: 42px;
  height: 42px;
  background: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  transition: transform 280ms var(--ease-out);
  flex-shrink: 0;
}
.btn-video:hover .btn-video-circle { transform: scale(1.08); }
.btn-video-circle svg { width: 16px; height: 16px; }

/* Mobile adjustments */
@media (max-width: 1024px) {
  .hero-video { height: 75vh; min-height: 480px; }
  .hero-video-title { font-size: clamp(48px, 18vw, 120px); }
}
@media (max-width: 640px) {
  .hero-video { height: 70vh; min-height: 420px; border-radius: var(--radius-lg); }
  .hero-video-content {
    grid-template-columns: 1fr;
    padding: 24px 16px 8px;
    gap: 16px;
  }
  .hero-video-title { font-size: clamp(32px, 20vw, 80px); line-height: 0.85; }
  .hero-video-side { padding-bottom: 20px; }
}

/* ============================================================
 * NAV — floating pill (Tier 1, the brand's locked nav)
 *
 * Floating pill that sits 20px below the viewport top via position: fixed.
 * Doesn't take vertical space in the document flow, so the hero (or any
 * first section) can be edge-to-edge. Three sections inside the pill:
 * wordmark on the left, links in the middle, primary CTA on the right.
 * Mobile: hamburger replaces links + CTA, opens a full-screen overlay
 * that slides in from the right. ESC and link clicks close it.
 *
 * Markup:
 *   <div class="pill-nav-wrap">
 *     <nav class="pill-nav" aria-label="Primary">
 *       <a href="#" class="pill-nav-wm">intuitive mothers</a>
 *       <ul class="pill-nav-links">
 *         <li><a href="#community">Community</a></li>
 *         …
 *       </ul>
 *       <a href="#pricing" class="pill-nav-cta">Join the community</a>
 *       <button class="pill-nav-burger" id="pill-nav-burger"
 *         aria-label="Open menu" aria-expanded="false">
 *         <span></span><span></span><span></span>
 *       </button>
 *     </nav>
 *   </div>
 *   <div class="pill-nav-overlay" id="pill-nav-overlay" role="dialog"
 *     aria-modal="true" aria-label="Menu">
 *     <button class="pill-nav-overlay-close" id="pill-nav-close"
 *       aria-label="Close menu">×</button>
 *     <ul>
 *       <li><a class="mobile-link" href="#community">Community</a></li>
 *       …
 *     </ul>
 *     <a href="#pricing" class="mobile-cta">Join the community →</a>
 *   </div>
 *
 * The IDs (#pill-nav-burger, #pill-nav-overlay, #pill-nav-close) are wired
 * up by motion.js — keep them as-is unless you update the JS too.
 * ============================================================ */

.pill-nav-wrap {
  /* Positioned at the top of the page, scrolls away with content (NOT fixed/sticky).
     If a page genuinely needs a floating nav, override page-locally with
     position: fixed; — but the brand default is non-sticky. */
  position: absolute; top: 20px; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center;
  width: 100%; padding: 0 20px;
  pointer-events: none; /* let clicks pass through gutters */
}
.pill-nav {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 36px;
  width: 100%; max-width: 1020px;
  padding: 12px 14px 12px 32px;
  background: var(--cream);
  border: 1px solid rgba(45, 26, 40, 0.06);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 36px rgba(45, 26, 40, 0.10), 0 2px 6px rgba(45, 26, 40, 0.04);
  transition: box-shadow 280ms var(--ease-soft);
}
.pill-nav:hover {
  box-shadow: 0 16px 44px rgba(45, 26, 40, 0.14), 0 2px 6px rgba(45, 26, 40, 0.04);
}
.pill-nav-wm {
  font-family: var(--display); font-weight: 800; font-size: 21px;
  color: var(--ink); letter-spacing: -0.025em; text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
}
.pill-nav-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; align-items: center; gap: 36px;
  font-family: var(--body); font-size: 18px;
}
.pill-nav-links a {
  color: var(--ink); text-decoration: none;
  opacity: 0.75; font-weight: 500;
  transition: opacity 200ms var(--ease-soft), color 200ms var(--ease-soft);
}
.pill-nav-links a:hover { opacity: 1; color: var(--strawberry); }
.pill-nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 500; font-size: 17px;
  background: var(--strawberry); color: var(--cream);
  padding: 14px 28px; border-radius: var(--radius-pill);
  text-decoration: none; flex-shrink: 0;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
  box-shadow: 0 4px 12px rgba(188, 69, 101, 0.18);
}
.pill-nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(188, 69, 101, 0.28);
}
.pill-nav-burger {
  display: none;            /* mobile-only — revealed in @media block below */
  position: relative;
  background: transparent; border: none; cursor: pointer;
  padding: 6px 4px 14px;    /* bottom padding leaves room for the brush */
  align-items: baseline;
  font-family: var(--quote), Georgia, serif;
  font-style: italic; font-weight: 500; font-size: 19px;
  color: var(--ink); line-height: 1;
}
.pill-nav-burger__label { display: inline-block; }
.pill-nav-burger__brush {
  position: absolute;
  left: 2px; right: 2px; bottom: 2px;
  width: calc(100% - 4px); height: 6px;
  pointer-events: none;
  overflow: visible;
}
.pill-nav-burger__brush path {
  fill: var(--strawberry);
  opacity: 0.85;
}
/* Mobile overlay */
.pill-nav-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--cream);
  padding: 96px 32px 48px;
  display: none;
  flex-direction: column; gap: 28px;
  transform: translateX(100%);
  transition: transform 360ms var(--ease-out);
}
.pill-nav-overlay.open { display: flex; transform: translateX(0); }
.pill-nav-overlay-close {
  position: absolute; top: 24px; right: 24px;
  background: transparent; border: none; cursor: pointer;
  width: 44px; height: 44px;
  font-family: var(--body); font-size: 28px; color: var(--ink);
  line-height: 1;
}
.pill-nav-overlay ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 24px;
}
.pill-nav-overlay a.mobile-link {
  font-family: var(--display); font-weight: 700; font-size: 28px;
  color: var(--ink); text-decoration: none;
  letter-spacing: -0.02em;
}
.pill-nav-overlay .mobile-cta {
  margin-top: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  background: var(--strawberry); color: var(--cream);
  padding: 16px 24px; border-radius: var(--radius-pill);
  font-family: var(--body); font-weight: 500; font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  /* Editorial split mobile nav — wordmark left, italic "Menu" right with
     brush underline. No pill, no shadow — just a hairline beneath.
     Tight padding so the nav lives in ~42px and the hero below has
     maximum visible-viewport room.
     Engages at ≤1024px (tablet + phone) because the desktop pill-nav,
     with this site's link count + long "Become a founding member" CTA,
     needs ~900px to fit cleanly. Tablet portrait (810) and landscape
     (1080) split cleanly: portrait gets editorial, landscape gets pill. */
  .pill-nav-wrap { padding: 0; }
  .pill-nav {
    width: 100%;
    max-width: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 8px 22px 6px;
    gap: 12px;
    border-bottom: 1px solid var(--border);
  }
  .pill-nav:hover { box-shadow: none; }
  .pill-nav-wm { font-size: 19px; }
  .pill-nav-links, .pill-nav-cta { display: none; }
  .pill-nav-burger { display: inline-flex; }
}

/* ============================================================
 * BUBBLES SCENE (Tier 1)
 *
 * A scattered composition of circular avatar bubbles around a centered
 * headline, with floating question pills nearby. Each bubble is either
 * an image (.bubble--photo) or a video (.bubble--video). The bubbles
 * have idle floating animations + a light scroll-position parallax
 * (handled in motion.js). Pills float gently and fade with their bubble.
 *
 * Markup:
 *   <section class="bubbles-scene">
 *     <div class="bubbles-scene__center">
 *       <h2>For the mothers <em>who do it all.</em></h2>
 *       <p>…</p>
 *     </div>
 *     <div class="bubble bubble--video" style="--x: 18%; --y: 22%; --size: 120px; --float: a;">
 *       <video autoplay loop muted playsinline><source src="…mom.mp4"></video>
 *     </div>
 *     <div class="bubble bubble--photo" style="--x: 78%; --y: 35%; --size: 96px; --float: b;">
 *       <img src="…amelia.avif" alt="Amelia">
 *     </div>
 *     <div class="bubble-pill" style="--x: 30%; --y: 14%;">Will my baby ever sleep through the night?</div>
 *   </section>
 *
 * Position each bubble/pill via inline `--x` (left %) and `--y` (top %).
 * `--size` controls the circle diameter. `--float: a|b|c|d` picks one of
 * the four idle float keyframes so they don't all sync.
 * ============================================================ */

.bubbles-scene {
  position: relative;
  min-height: 720px;
  padding: var(--space-9) var(--space-6);
  overflow: hidden;
}
.bubbles-scene__center {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-7) 0;
}
.bubble {
  position: absolute;
  left: var(--x, 50%); top: var(--y, 50%);
  width: var(--size, 110px); height: var(--size, 110px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(45, 26, 40, 0.10);
  background: var(--mist);
  z-index: 1;
  /* Idle floating — overridden per --float */
  animation: bubble-float-a 14s ease-in-out infinite;
  will-change: transform;
}
.bubble[style*="--float: b"], .bubble[style*="--float:b"] { animation-name: bubble-float-b; animation-duration: 16s; }
.bubble[style*="--float: c"], .bubble[style*="--float:c"] { animation-name: bubble-float-c; animation-duration: 13s; }
.bubble[style*="--float: d"], .bubble[style*="--float:d"] { animation-name: bubble-float-d; animation-duration: 17s; }

.bubble img, .bubble video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bubble-pill {
  position: absolute;
  left: var(--x, 50%); top: var(--y, 50%);
  transform: translate(-50%, -50%);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  opacity: 0.85;
  box-shadow: 0 2px 8px rgba(45, 26, 40, 0.06);
  z-index: 1;
  white-space: nowrap;
  animation: bubble-float-a 18s ease-in-out infinite;
  animation-delay: -3s;
  will-change: transform;
}

/* Optional parallax — motion.js translates each bubble by scroll progress */
.bubble[data-parallax], .bubble-pill[data-parallax] {
  transition: transform 80ms linear;
}

/* Mobile (≤720px) — bubbles shrink to a denser cluster, pills truncate.
 * Inline --size on each bubble is overridden via !important so the design
 * system's mobile rule wins regardless of what's set inline. */
@media (max-width: 1024px) {
  .bubbles-scene { min-height: 600px; padding: var(--space-8) var(--space-6); }
  .bubble { width: 80px !important; height: 80px !important; }
  .bubble:nth-of-type(1),
  .bubble:nth-of-type(4) { width: 100px !important; height: 100px !important; }
}
@media (max-width: 640px) {
  .bubbles-scene {
    min-height: auto;
    padding: var(--space-6) var(--space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  .bubble {
    position: static !important;
    transform: none !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    animation: none !important;
  }
  .bubble:nth-of-type(1),
  .bubble:nth-of-type(4) { width: 80px !important; height: 80px !important; }
  .bubble-pill {
    position: static !important;
    transform: none !important;
    font-size: 12px;
    padding: 8px 12px;
    max-width: 60vw;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    animation: none !important;
    flex-basis: 100%;
    margin: 0 auto !important;
  }
  .bubble-pill:nth-of-type(2),
  .bubble-pill:nth-of-type(4) { display: none; }
}

/* ============================================================
 * AVATAR-VIDEO — variant of .avatar that holds a looping video
 * ============================================================ */
.avatar.avatar--video, .avatar-video {
  overflow: hidden;
  background: var(--mist);
}
.avatar.avatar--video > video, .avatar-video > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
 * AVATAR MARQUEE (Tier 1)
 *
 * Horizontal infinite-scroll row of circular avatars. Pure CSS keyframe
 * animation — no JS, no video file. Markup duplicates the children to
 * make the loop seamless. Each track child is one .avatar-marquee-item.
 *
 *   <div class="avatar-marquee">
 *     <div class="avatar-marquee-track">
 *       <div class="avatar-marquee-item"><img src="…"></div>
 *       <!-- repeat 6–12 items, then duplicate the whole set inline -->
 *       <div class="avatar-marquee-item"><img src="…"></div>
 *     </div>
 *   </div>
 *
 * For the loop to be seamless, the inner track must contain the avatar
 * set TWICE (or 3x). Animation translates -50% (or -33.3%).
 * ============================================================ */

.avatar-marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  padding: var(--space-5) 0;
}
.avatar-marquee-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: avatar-marquee-scroll 32s linear infinite;
  will-change: transform;
}
.avatar-marquee-item {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(45, 26, 40, 0.08);
  background: var(--mist);
}
.avatar-marquee-item img, .avatar-marquee-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-marquee:hover .avatar-marquee-track { animation-play-state: paused; }

/* ============================================================
 * TOPIC MARQUEE (Tier 1)
 *
 * Horizontal infinite-scroll row of pastel topic chips. Used to signal
 * topic breadth without committing to a hard count — perfect for the
 * "we cover all of these" moment on a community/library page.
 *
 * Two modes:
 *   1. Single row — default
 *   2. Dual rows scrolling opposite directions — wrap each row in
 *      .topic-marquee-row inside .topic-marquee.dual, and add the
 *      .reverse modifier to the second .topic-marquee-track.
 *
 *   <!-- Single row -->
 *   <div class="topic-marquee">
 *     <div class="topic-marquee-track">
 *       <span class="topic-marquee-chip peach">Topic name</span>
 *       <!-- ...12+ chips, then duplicate the whole set inline -->
 *     </div>
 *   </div>
 *
 *   <!-- Dual rows, opposite directions -->
 *   <div class="topic-marquee dual">
 *     <div class="topic-marquee-row">
 *       <div class="topic-marquee-track"> ...chips... </div>
 *     </div>
 *     <div class="topic-marquee-row">
 *       <div class="topic-marquee-track reverse"> ...chips... </div>
 *     </div>
 *   </div>
 *
 * For the loop to be seamless, each track must contain the chip set
 * TWICE. Animation translates -50%. Hover pauses both rows.
 * Typography is Karla bold lowercase — display font, never italic.
 * ============================================================ */

.topic-marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
  padding: var(--space-3) 0;
}
.topic-marquee.dual {
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
  padding: var(--space-1) 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.topic-marquee.dual .topic-marquee-row {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
}
.topic-marquee-track {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  animation: topic-marquee-scroll 60s linear infinite;
  will-change: transform;
}
.topic-marquee-track.reverse { animation-direction: reverse; }
.topic-marquee:hover .topic-marquee-track { animation-play-state: paused; }
.topic-marquee-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--display);
  font-weight: var(--w-bold);
  font-size: 17px;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.topic-marquee-chip.peach  { background: rgba(242, 184, 154, 0.45); }
.topic-marquee-chip.sky    { background: rgba(181, 213, 220, 0.55); }
.topic-marquee-chip.lilac  { background: rgba(197, 168, 212, 0.42); }
.topic-marquee-chip.sage   { background: rgba(212, 228, 209, 0.75); }
.topic-marquee-chip.butter { background: rgba(242, 213, 142, 0.5); }
@keyframes topic-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
 * SCROLL CONVERGE (Tier 1)
 *
 * Storytelling pattern: six bubbles arranged in an ARC across the top
 * half of the stage (one per "mother") drift while the user scrolls;
 * as the user scrolls down, the bubbles morph from circles into
 * rectangles AND converge into a 3×2 video-call grid inside a tablet
 * frame, while the headline crossfades from "individual" to "together."
 * Many voices → one conversation.
 *
 * Implementation: outer .scroll-converge is 200vh tall. Inner
 * .scroll-converge__sticky is position: sticky / 100vh, so it pins for
 * one viewport of scroll travel. motion.js calculates progress 0→1
 * across that pinned window and writes per-bubble transforms +
 * width/height/border-radius (so bubbles smoothly morph circle→rect).
 *
 * Coordinate space: the .converge-stage is a fixed 720×640 px frame
 * (visually scaled to fit the viewport via --stage-scale). All bubble
 * positions are in those native stage pixels.
 *
 * Per-bubble data attributes:
 *   - data-scatter-x / data-scatter-y: top-left of the 140×140 circle
 *     bubble at progress=0 (somewhere on the arc)
 *   - data-slot-x / data-slot-y: top-left of the 152×130 rectangle
 *     bubble at progress=1 (a tile inside the tablet)
 *
 * Section-level CSS variables (override per-instance if needed):
 *   --scatter-size  140px  — circle diameter at scatter
 *   --slot-w        152px  — tile width at converged
 *   --slot-h        130px  — tile height at converged
 *   --stage-scale   1      — visual scale of the whole stage
 *
 * Markup:
 *   <section class="scroll-converge">
 *     <div class="scroll-converge__sticky">
 *       <div class="converge-stage">
 *         <div class="converge-headline">
 *           <div class="converge-headline__a"><h3>Six individual mothers.</h3></div>
 *           <div class="converge-headline__b"><h3>One quiet community.</h3></div>
 *         </div>
 *         <div class="converge-tablet"><div class="converge-tablet__bar"></div></div>
 *         <div class="converge-bubble"
 *              data-scatter-x="8"   data-scatter-y="197"
 *              data-slot-x="116"    data-slot-y="180">
 *           <img src="…amelia.avif" alt="Amelia">
 *         </div>
 *         <!-- repeat 5 more bubbles -->
 *       </div>
 *     </div>
 *   </section>
 * ============================================================ */

.scroll-converge {
  position: relative;
  height: 200vh; /* 1 viewport of pin travel */
  --stage-scale: 1;
  --scatter-size: 140px;
  --slot-w: 152px;
  --slot-h: 130px;
  --slot-radius: 10px;
}
.scroll-converge__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.converge-stage {
  position: relative;
  width: 720px;
  height: 640px;
  transform: scale(var(--stage-scale));
  transform-origin: center center;
  /* Stage layout box stays 720×640 always; --stage-scale visually shrinks it
   * on smaller viewports. The sticky parent's overflow:hidden clips any
   * visual overflow. */
}
.converge-headline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 3;
  pointer-events: none;
}
.converge-headline__a,
.converge-headline__b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Opacity is driven from JS — JS sets initial values too. */
}
.converge-headline h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin: 0;
}
.converge-headline h3 em {
  font-family: var(--quote);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--strawberry);
}
.converge-tablet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 340px;
  border-radius: 22px;
  background: var(--cream);
  border: 4px solid var(--ink);
  box-shadow: 0 30px 80px rgba(45, 26, 40, 0.18);
  /* Initial state — JS overwrites both opacity + transform on scroll */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 1;
  will-change: transform, opacity;
  overflow: hidden;
}
/* Subtle status bar at the top of the tablet — hints "screen" without a notch */
.converge-tablet__bar {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 5px;
  background: rgba(45, 26, 40, 0.18);
  border-radius: 999px;
}
.converge-bubble {
  position: absolute;
  top: 0;
  left: 0;
  /* width / height / border-radius / transform set per-frame by JS */
  background: var(--mist);
  box-shadow: 0 4px 12px rgba(45, 26, 40, 0.10);
  overflow: hidden;
  z-index: 2; /* above tablet so they appear ON the tablet screen at progress=1 */
  will-change: transform, width, height, border-radius;
}
.converge-bubble > img,
.converge-bubble > video,
.converge-bubble > div {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile — shrink the whole stage so the 720×640 native coords still fit.
 * No per-attribute scaling needed since CSS scale handles everything. */
@media (max-width: 1024px) {
  .scroll-converge { --stage-scale: 0.6; }
}
@media (max-width: 640px) {
  .scroll-converge {
    height: auto;
    --stage-scale: 1;
  }
  .scroll-converge__sticky {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
    padding: 24px 0;
  }
  .converge-stage {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 16px;
    max-width: 100%;
  }
  .converge-headline,
  .converge-tablet { display: none; }
  .converge-bubble {
    position: static !important;
    width: 100% !important;
    height: 110px !important;
    border-radius: 10px !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }
}

/* ============================================================
 * SECTION-AURORA-BG (Tier 1)
 *
 * Animated gradient-mesh background for sections — a CSS replacement
 * for the "shader-feeling" video backgrounds. Three soft radial blobs
 * (peach, lilac, sky) drift slowly behind the section content. Zero
 * bandwidth, GPU-accelerated, infinite. Use as the default for "mood"
 * sections (manifesto, final CTA, highlight statement).
 *
 *   <section class="section-aurora-bg">
 *     <div class="container"> …content… </div>
 *   </section>
 *
 * Variants:
 *   .section-aurora-bg--warm  → peach + butter (warmer)
 *   .section-aurora-bg--cool  → lilac + sky (cooler)
 *   .section-aurora-bg--deep  → over Ink (manifesto/dark)
 * ============================================================ */

.section-aurora-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section-aurora-bg::before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 18% 28%, var(--lilac) 0%, transparent 38%),
    radial-gradient(circle at 78% 18%, var(--peach) 0%, transparent 42%),
    radial-gradient(circle at 50% 78%, var(--butter) 0%, transparent 36%),
    radial-gradient(circle at 88% 72%, var(--sky) 0%, transparent 40%);
  filter: blur(60px);
  opacity: 0.85;
  z-index: -1;
  animation: aurora-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}
.section-aurora-bg > * { position: relative; z-index: 1; }

.section-aurora-bg--warm::before {
  background:
    radial-gradient(circle at 22% 30%, var(--peach) 0%, transparent 42%),
    radial-gradient(circle at 75% 25%, var(--butter) 0%, transparent 38%),
    radial-gradient(circle at 50% 80%, var(--peach) 0%, transparent 36%);
}
.section-aurora-bg--cool::before {
  background:
    radial-gradient(circle at 20% 30%, var(--lilac) 0%, transparent 42%),
    radial-gradient(circle at 78% 22%, var(--sky) 0%, transparent 40%),
    radial-gradient(circle at 60% 78%, var(--lilac) 0%, transparent 36%);
}
/* Note: a dark "deep" aurora variant existed briefly but was removed —
   the brand never uses Ink as a section background. For "anchor" surfaces
   (manifesto, footer, etc.) use .section-aurora-bg--warm instead. */

/* ============================================================
 * SECTION-VIDEO-BG (Tier 1)
 *
 * Reserved for sections where the video itself carries content
 * (real mother + baby footage, hands, intimate moments) — NOT for
 * "ambient pretty motion behind a section" (use .section-aurora-bg
 * for that). Lower bandwidth/CPU is the default; reach for video
 * only when narrative weight justifies it.
 *
 *   <section class="section-video-bg">
 *     <video class="section-video-bg__media"
 *            autoplay loop muted playsinline poster="…poster.jpg">
 *       <source src="…footage.mp4" type="video/mp4">
 *     </video>
 *     <div class="section-video-bg__darken"></div>
 *     <div class="container"> …content… </div>
 *   </section>
 *
 * motion.js auto-pauses these when off-screen (intersection observer).
 * Add `data-pause-when-offscreen` to opt in (default: opted in).
 * ============================================================ */

.section-video-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--cream);
}
.section-video-bg__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.section-video-bg__darken {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(45, 26, 40, 0.30) 0%,
    rgba(45, 26, 40, 0.10) 30%,
    rgba(45, 26, 40, 0.10) 70%,
    rgba(45, 26, 40, 0.45) 100%);
  z-index: -1;
}
.section-video-bg > * { position: relative; }
.section-video-bg .container { color: var(--cream); }

/* ============================================================
 * BENTO GRID (Tier 2 — community / features section)
 *
 * Three-column / two-row asymmetric grid. The .feature card spans
 * two rows on the left (the "anchor" tile); .lilac spans two columns
 * on the bottom-right (the "wide footer" tile); .peach and .sky
 * fill the two square tiles top-right.
 *
 * Default colors: feature = Strawberry (anchor), peach, sky, lilac.
 * Each card uses the brand's tag → headline (Karla bold + Marcellus
 * italic emphasis word) → optional supporting body text pattern.
 *
 * Markup:
 *   <div class="bento-wrap">
 *     <div class="bento-card feature">
 *       <div>
 *         <div class="tag">The library</div>
 *         <h3>The full library, the weekly letter, and a quiet group
 *             of <em>mothers like you.</em></h3>
 *         <p>Optional supporting copy.</p>
 *       </div>
 *     </div>
 *     <div class="bento-card peach">
 *       <div><div class="tag">$29/month</div>
 *         <h3>One price, <em>everything inside.</em></h3></div>
 *     </div>
 *     <div class="bento-card sky">…</div>
 *     <div class="bento-card lilac">…</div>
 *   </div>
 *
 * Use for: "What's inside the community" / features grids on the
 * landing page. Two per page max — the bento is high-saturation and
 * loses power when repeated. Mobile (≤900px): collapses to a single
 * column with each card stacking; .feature and .lilac drop their
 * special grid-column / grid-row spans.
 * ============================================================ */

.bento-wrap {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  min-height: 480px;
}
.bento-card {
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bento-card.feature {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: var(--strawberry);
  color: var(--cream);
}
.bento-card.peach  { background: var(--peach); }
.bento-card.sky    { background: var(--sky); }
.bento-card.lilac  { background: var(--lilac); grid-column: 2 / span 2; }

.bento-card .tag {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--strawberry);
  margin-bottom: 12px;
}
.bento-card.feature .tag { color: var(--peach); }

.bento-card h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0;
}
.bento-card.feature h3 { color: var(--cream); font-size: 40px; }
.bento-card h3 em {
  font-family: var(--quote);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.bento-card p {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  opacity: 0.85;
  line-height: 1.5;
  margin-top: 12px;
}
.bento-card.feature p { color: var(--cream); opacity: 0.85; }

@media (max-width: 1024px) {
  .bento-wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 14px;
    min-height: auto;
  }
  .bento-card.feature { grid-column: 1 / span 2; grid-row: 1; }
  .bento-card.peach   { grid-column: 1; grid-row: 2; }
  .bento-card.sky     { grid-column: 2; grid-row: 2; }
  .bento-card.lilac   { grid-column: 1 / span 2; grid-row: 3; }
}
@media (max-width: 640px) {
  .bento-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
    min-height: auto;
  }
  .bento-card { padding: 24px 20px; }
  .bento-card.feature,
  .bento-card.peach,
  .bento-card.sky,
  .bento-card.lilac { grid-column: auto; grid-row: auto; }
  .bento-card h3,
  .bento-card.feature h3 { font-size: clamp(22px, 5vw, 28px); }
}

/* ============================================================
 * TILT CARD
 * Interactive 3-D tilt on pointer move. Two modes:
 *   effect="evade"    — card tilts away from the cursor (default)
 *   effect="gravitate"— card tilts toward the cursor
 * Optional spotlight: a radial-gradient flare that tracks the cursor.
 * JS handler wired in motion.js (#11). Add class .tilt-card to any
 * card element. Configure via data attributes:
 *   data-tilt-limit="15"        max tilt angle in degrees
 *   data-tilt-scale="1.05"      hover scale factor
 *   data-tilt-perspective="1200" perspective distance in px
 *   data-tilt-effect="evade"    "evade" | "gravitate"
 *   data-tilt-spotlight="true"  show/hide the spotlight
 * ============================================================ */

.tilt-card {
  will-change: transform;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  cursor: default;
}

/* Spotlight overlay — positioned by JS via CSS custom properties */
.tilt-card__spotlight {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}
.tilt-card:hover .tilt-card__spotlight,
.tilt-card.tilt-active .tilt-card__spotlight {
  opacity: 1;
}
.tilt-card__spotlight::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 40%);
  transform: translate(-50%, -50%);
  /* JS sets --spot-x / --spot-y as percentages */
  left: var(--spot-x, 50%);
  top:  var(--spot-y, 50%);
}

/* ============================================================
 * AWARD BADGE
 * Holographic milestone badge. Idle state: rainbow polygon overlays
 * rotate slowly via CSS keyframes (shimmer). On hover: tilt tracks the
 * cursor in 3-D + overlays snap to cursor angle (idle anim pauses).
 * JS handler wired in motion.js (#12). Add class .award-badge to any
 * <div> containing the badge SVG. The SVG structure is hand-written
 * (see showcase section 32 for the full markup pattern).
 *
 * Variants — swap data-badge-bg for different milestone tones:
 *   "gold"   → Butter #F2D58E  (default — milestone)
 *   "cream"  → Cream  #FFFFFF
 *   "peach"  → Peach  #F2B89A
 * ============================================================ */

.award-badge {
  display: inline-block;
  width: 280px;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.award-badge__inner {
  transform-origin: center center;
  transition: transform 200ms ease-out;
  will-change: transform;
}

/* The 10 shimmer overlay <g> elements get their animation
   names from these keyframes (applied inline in the SVG markup). */
@keyframes badge-shimmer-1  { 0%,100%{ transform: rotate(0deg);   } 50%{ transform: rotate(10deg);  } }
@keyframes badge-shimmer-2  { 0%,100%{ transform: rotate(10deg);  } 50%{ transform: rotate(20deg);  } }
@keyframes badge-shimmer-3  { 0%,100%{ transform: rotate(20deg);  } 50%{ transform: rotate(30deg);  } }
@keyframes badge-shimmer-4  { 0%,100%{ transform: rotate(30deg);  } 50%{ transform: rotate(40deg);  } }
@keyframes badge-shimmer-5  { 0%,100%{ transform: rotate(40deg);  } 50%{ transform: rotate(50deg);  } }
@keyframes badge-shimmer-6  { 0%,100%{ transform: rotate(50deg);  } 50%{ transform: rotate(60deg);  } }
@keyframes badge-shimmer-7  { 0%,100%{ transform: rotate(60deg);  } 50%{ transform: rotate(70deg);  } }
@keyframes badge-shimmer-8  { 0%,100%{ transform: rotate(70deg);  } 50%{ transform: rotate(80deg);  } }
@keyframes badge-shimmer-9  { 0%,100%{ transform: rotate(80deg);  } 50%{ transform: rotate(90deg);  } }
@keyframes badge-shimmer-10 { 0%,100%{ transform: rotate(90deg);  } 50%{ transform: rotate(100deg); } }

/* ============================================================
 * FLOATING LABEL FORM  (Option A)
 * Labels live inside the field at rest; float up on focus/fill.
 * Pure CSS — no JS except for .float-select (motion.js adds
 * .has-value when a non-default option is chosen).
 * Markup: .float-form > .float-row(.float-row--full) >
 *   .float-field > input.float-input[placeholder=" "] + label.float-label
 *   .float-field.float-select-wrap > select.float-select + label.float-label
 * ============================================================ */

.float-form { max-width: 560px; width: 100%; }

.float-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.float-row--full { grid-template-columns: 1fr; }

.float-field { position: relative; }

.float-input,
.float-select {
  width: 100%;
  padding: 22px 16px 8px;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: var(--mist);
  border: 1.5px solid var(--stone);
  border-radius: 12px;
  outline: none;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.float-input:focus,
.float-select:focus {
  border-color: var(--strawberry);
  background: #fff;
}

.float-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  opacity: 0.42;
  pointer-events: none;
  transition: top 180ms var(--ease-out),
              transform 180ms var(--ease-out),
              font-size 180ms var(--ease-out),
              opacity 180ms var(--ease-out),
              color 180ms var(--ease-out);
  white-space: nowrap;
}

/* Float up when focused or filled (input uses :placeholder-shown; select uses .has-value) */
.float-input:focus + .float-label,
.float-input:not(:placeholder-shown) + .float-label,
.float-select:focus + .float-label,
.float-select.has-value + .float-label {
  top: 10px;
  transform: translateY(0);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.7;
  color: var(--strawberry);
}

/* Chevron for select */
.float-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--ink);
  opacity: 0.35;
  pointer-events: none;
}

.float-form-footer {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.float-form-trust {
  font-family: var(--body);
  font-size: 12px;
  color: var(--ink);
  opacity: 0.4;
}

@media (max-width: 560px) {
  .float-row { grid-template-columns: 1fr; }
}

/* ============================================================
 * CONVERSATIONAL FORM  (Option C)
 * One question at a time, Typeform-style. Progress bar fills as
 * the user advances. Questions slide up in / slide up out.
 * JS handler in motion.js (#13). Enter key or Continue button advances.
 * Markup: .convo-form > .convo-progress > .convo-progress__fill
 *                      + .convo-slides > .convo-slide[data-step] * N
 *                      + .convo-thank
 * Each .convo-slide: .convo-eyebrow + .convo-q + .convo-input + .convo-continue + .convo-hint
 * ============================================================ */

.convo-form { max-width: 600px; width: 100%; }

.convo-progress {
  height: 2px;
  background: var(--stone);
  border-radius: 2px;
  margin-bottom: 56px;
  overflow: hidden;
}
.convo-progress__fill {
  height: 100%;
  background: var(--strawberry);
  border-radius: 2px;
  width: 0%;
  transition: width 400ms var(--ease-out);
}

.convo-slides { position: relative; }

/* Default (hidden): absolute, translated down */
.convo-slide {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transform: translateY(36px);
  pointer-events: none;
  transition: opacity 340ms var(--ease-out), transform 340ms var(--ease-out);
}
/* Active: relative so the container grows to its height */
.convo-slide.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Exiting: absolute again, slides up */
.convo-slide.exit {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transform: translateY(-28px);
  pointer-events: none;
}

.convo-eyebrow {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--strawberry);
  opacity: 0.7;
  margin-bottom: 18px;
}

.convo-q {
  font-family: var(--headline);
  font-weight: 800;
  font-size: 34px;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 36px;
}
.convo-q em {
  font-family: var(--quote);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.convo-input {
  width: 100%;
  font-family: var(--body);
  font-size: 20px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--stone);
  padding: 6px 0 12px;
  outline: none;
  transition: border-color 200ms var(--ease-out);
  box-sizing: border-box;
}
.convo-input:focus { border-bottom-color: var(--strawberry); }
.convo-input::placeholder { color: var(--stone); opacity: 1; }

.convo-continue {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: background 200ms var(--ease-out), transform 150ms var(--ease-out);
}
.convo-continue:hover { background: var(--strawberry); transform: translateY(-2px); }
.convo-continue:active { transform: translateY(0); }
.convo-continue svg { width: 16px; height: 16px; flex-shrink: 0; }

.convo-hint {
  margin-top: 10px;
  font-family: var(--body);
  font-size: 12px;
  color: var(--ink);
  opacity: 0.32;
}

/* Thank-you state */
.convo-thank {
  display: none;
  text-align: center;
  padding: 48px 0 32px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.convo-thank.visible { opacity: 1; transform: translateY(0); }

.convo-thank__icon {
  display: block;
  text-align: center;
  margin: 0 auto 16px;
  font-size: 36px;
  line-height: 1;
}
.convo-thank h3 {
  font-family: var(--headline);
  font-weight: 800;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.convo-thank p {
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  opacity: 0.55;
  margin: 0;
}

/* ============================================================
   Brush underline — watercolor highlight that wipes in on scroll.
   Single thick tapered SVG path with rounded ends, soft Gaussian
   edge blur, no turbulence. Auto-injected by motion.js.

   Usage:  <span class="brush-underline">Word</span>
   Colors: add .peach | .lilac | .sky | .sage | .strawberry
           (default = warm butter)

   Tuning: bottom -13px sits the brush close-but-not-touching under
   the baseline; width 75% deliberately stops short of the word's
   right edge so the stroke reads as a casual flick, not a ruled line.
   ============================================================ */
.brush-underline {
  position: relative;
  display: inline;
  --bu-color: #E8C56A;
}
.brush-underline.peach      { --bu-color: #E89B73; }
.brush-underline.lilac      { --bu-color: #B89BCF; }
.brush-underline.sky        { --bu-color: #8FB8D4; }
.brush-underline.sage       { --bu-color: #9BBE9F; }
.brush-underline.strawberry { --bu-color: #BC4565; }
.brush-underline > svg {
  position: absolute;
  left: -2%;
  bottom: -13px;
  width: 75%;
  height: 22px;
  overflow: visible;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.brush-underline.drawn > svg { clip-path: inset(0 0 0 0); }
.brush-underline > svg .bu-core { fill: var(--bu-color); opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  .brush-underline > svg { transition: none; clip-path: inset(0 0 0 0); }
}