/* ═══════════════════════════════════════════════════════════════════
   mommy.baby — foundation
   Tokens, resets and the primitives every block reuses (buttons,
   section frame, eyebrow, card). Block-specific rules live in
   landing.css, which loads after this and may override.

   Palette is taken from the real brand assets: the crimson logo
   field, the cream figure inside it, and the blue of the diaper
   pack. Nothing here is invented colour.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* surfaces */
  --paper:      #FBF7F2;   /* page ground — warm, not white */
  --paper-2:    #F4EDE4;   /* alternating band */
  --surface:    #FFFFFF;
  --ink:        #241E1A;
  --muted:      #7A6E64;
  --faint:      #A99C90;
  --line:       #EBE2D7;
  --line-2:     #DCD0C2;

  /* brand */
  --crimson:      #DA0840;
  --crimson-dark: #B00532;
  --crimson-tint: #FDECF0;
  --cream:        #F2DCA8;   /* the figure inside the logo */

  /* secondary, from the packaging */
  --sky:       #35A8DE;      /* diaper pack blue */
  --sky-tint:  #E7F5FC;
  --plum:      #6E4B8E;      /* premium pants purple */
  --plum-tint: #F1EBF6;
  --moss:      #2F5D50;
  --moss-tint: #E4EEE9;

  /* radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(36,30,26,.05), 0 2px 6px rgba(36,30,26,.04);
  --shadow-md: 0 2px 6px rgba(36,30,26,.06), 0 10px 26px rgba(36,30,26,.08);
  --shadow-lg: 0 8px 20px rgba(36,30,26,.10), 0 24px 60px rgba(36,30,26,.14);

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 56px;

  --wrap: 1180px;
  --gut: 20px;

  /* Faint paper grain. Flat cream over a full page reads as dead CSS;
     this puts a little tooth on it without costing a request. */
  --grain: 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='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

@media (min-width: 720px) { :root { --header-h: 72px; --gut: 32px; } }

/* ── reset ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchor targets must clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper) var(--grain);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: "Unbounded", "Onest", sans-serif;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── layout primitives ─────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: 64px; }
@media (min-width: 720px) { .section { padding-block: 104px; } }

.section--tint { background: var(--paper-2); }
.section--white { background: var(--surface); }

.section__head { max-width: 720px; margin-bottom: 36px; }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crimson);
}
.eyebrow::before {
  content: "";
  width: 18px; height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.section__head--center .eyebrow::before { display: none; }

.h2 { font-size: clamp(27px, 5.2vw, 44px); }
.h3 { font-size: clamp(19px, 2.6vw, 24px); }

.lead {
  margin-top: 14px;
  font-size: clamp(15.5px, 1.9vw, 18px);
  color: var(--muted);
}

/* ── buttons ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;              /* thumb-sized: spec asks for big tap zones */
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s var(--ease), background-color .16s var(--ease),
              box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--icon {
  width: 48px; height: 48px; padding: 0;
  justify-content: center;
}
.btn--icon svg { width: 20px; height: 20px; }

.btn--primary {
  background: var(--crimson);
  color: #fff;
  box-shadow: 0 4px 14px rgba(218,8,64,.26);
}
.btn--primary:hover { background: var(--crimson-dark); box-shadow: 0 6px 20px rgba(218,8,64,.32); }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--quiet:hover { background: var(--surface); }

/* WhatsApp keeps its own green — recognisability beats brand consistency
   here, and the spec calls it out explicitly. */
.btn--wa { background: #25D366; color: #06301A; box-shadow: 0 4px 14px rgba(37,211,102,.3); }
.btn--wa:hover { background: #1FBC5A; }

.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn--block { width: 100%; }

/* ── card ──────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ── utilities ─────────────────────────────────────────────────── */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--ink); color: #fff; font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* Sections fade up once as they enter view.

   The hidden state hangs off `.reveal-on`, which app.js sets only once
   it has actually built the IntersectionObserver — and drops again if
   the observer turns out never to fire. Hiding content on `.js` alone
   would mean any failure in that path leaves a blank page, which is a
   far worse outcome than no animation. */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(18px); }
.reveal-on [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on [data-reveal] { opacity: 1; transform: none; }
}