/*
 * made for me — landing page styles.
 *
 * The page markup keeps the design's inline styles verbatim for fidelity; this
 * file adds only what inline styles can't do well:
 *   1. @font-face for the brand fonts (Benguiat Caslon + Bilo, self-hosted).
 *   2. base resets + keyframes (ported from the design's <helmet> block).
 *   3. the interactive life-stage chip styles.
 *   4. a responsive layer (media queries) — the source design is desktop-only.
 * Fluid type/padding is done with clamp() directly in the inline styles; the
 * media queries here only handle grid column-count changes and the nav.
 */

/* ---- Fonts (self-hosted, copied from mobile/assets/fonts) ---- */
@font-face {
  font-family: "Benguiat Caslon";
  src: url("/fonts/BenguiatCaslon_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bilo";
  src: url("/fonts/Bilo_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bilo";
  src: url("/fonts/Bilo_Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bilo";
  src: url("/fonts/Bilo_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bilo";
  src: url("/fonts/Bilo_ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Base (ported from the design's inline <helmet> styles) ---- */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #fbf9f7;
  color: #243776;
  font-family: "Bilo", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
}
a {
  color: #e75c9d;
  text-decoration: none;
}
a:hover {
  color: #d43b86;
}

@keyframes mfmFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}
@keyframes mfmFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Life-stage selector chips (driven by app.js) ---- */
.stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Bilo", sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  padding: 11px 20px;
  transition: all 0.2s ease;
  background: #fff;
  color: #243776;
  border: 2px solid #dde0e8;
}
.stage-chip img {
  width: 22px;
  height: 22px;
}
.stage-chip:hover {
  border-color: #243776;
}
.stage-chip.is-active {
  background: #243776;
  color: #fff;
  border-color: #243776;
}

/*
 * Photo containers. The real brand photo is the top background layer; a brand
 * gradient sits underneath so the block looks intentional if the photo file
 * is missing, and the photo appears automatically once it's added on disk.
 */
.mfm-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*
 * Newsletter (Ecomail widget). The embedded form is authored at a fixed 800px,
 * which overflows its card and breaks on mobile. Force it fluid so it fills the
 * white card at any width. #id + descendant beats the widget's own class rules.
 */
#f-3-b6fcc542fb021c84fdaff536dd0a74a1 .ec-v-form-holder,
#f-3-b6fcc542fb021c84fdaff536dd0a74a1 form,
#f-3-b6fcc542fb021c84fdaff536dd0a74a1 .ec-v-form-step,
#f-3-b6fcc542fb021c84fdaff536dd0a74a1 .ec-v-form-column {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ---- Responsive layer (source design is desktop-only) ---- */
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .stage-panel {
    grid-template-columns: 1fr !important;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .brands-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .store-grid {
    grid-template-columns: 1fr !important;
  }
  .founder-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .main-nav .nav-link {
    display: none !important;
  }
}
@media (max-width: 560px) {
  .features-grid {
    grid-template-columns: 1fr !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
  .stats-row {
    gap: 28px !important;
  }
}