/*
 * BabyBoom pages on marianpavel.ro/babyboom/. Built on the site's shared /assets/site.css; this adds the app's own
 * look: Nunito (the app's font, subset to Latin, SIL OFL: fonts/OFL.txt) and its coral, lavender and mint.
 */

@font-face { font-family: "Nunito"; src: url("fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

.app-babyboom {
  /* A shade deeper than the app's #F0675C, so white button text and small coral text stay readable (AA). */
  --accent: #c2453b;
  --coral: #f0675c;
  --lavender: #6c63ff;
  --mint: #1db98a;
  --amber: #ff9f43;
  --round: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .app-babyboom { --accent: #ff8f80; --accent-ink: #1a1014; --lavender: #9a94ff; --mint: #4fd6ab; }
}

.app-babyboom h1, .app-babyboom h2, .app-babyboom h3, .app-babyboom .eyebrow, .app-babyboom .btn,
.app-babyboom .bb-pill, .app-babyboom .plan { font-family: var(--round); }
.app-babyboom h1 { font-weight: 900; letter-spacing: -0.02em; }
.app-babyboom h2 { font-weight: 850; letter-spacing: -0.015em; }
.app-babyboom h3 { font-weight: 800; }

/* ---------- Hero ---------- */

.app-babyboom .app-hero::before {
  background:
    radial-gradient(55% 65% at 88% 28%, color-mix(in srgb, var(--coral) 30%, transparent), transparent 70%),
    radial-gradient(40% 45% at 70% 85%, color-mix(in srgb, var(--lavender) 16%, transparent), transparent 70%),
    radial-gradient(45% 50% at 8% 0%, color-mix(in srgb, var(--coral) 12%, transparent), transparent 70%);
}
.fan.is-hero { height: clamp(420px, 48vw, 600px); }
.fan.is-hero .device { width: clamp(160px, 18.5vw, 232px); }

.bb-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.bb-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px;
  font-size: 0.92rem; font-weight: 750; background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.bb-pill i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 0.85rem;
  background: color-mix(in srgb, var(--c, var(--coral)) 16%, var(--surface)); }

/* ---------- Features ---------- */

.app-babyboom .bento .card:nth-child(3n + 2) .icon-badge { background: color-mix(in srgb, var(--lavender) 14%, var(--bg)); color: var(--lavender); }
.app-babyboom .bento .card:nth-child(3n) .icon-badge { background: color-mix(in srgb, var(--mint) 14%, var(--bg)); color: var(--mint); }

/* The category grid, like the app's "Add an entry" sheet. */
.bb-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.bb-cats li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 18px;
  font-size: 0.78rem; font-weight: 650; text-align: center; line-height: 1.2;
  background: color-mix(in srgb, var(--c) 11%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); }
.bb-cats li span { font-size: 1.5rem; line-height: 1; }

/* ---------- Pricing ---------- */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 860px; margin: 0 auto; }
.plan { position: relative; padding: 28px; border-radius: calc(var(--radius) + 4px); background: var(--surface);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.plan h3 { margin: 0 0 4px; font-size: 1.4rem; }
.plan .price { margin: 0 0 18px; color: var(--muted); font-weight: 650; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font, system-ui); }
.plan li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: color-mix(in srgb, var(--mint) 18%, var(--surface)) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%231db98a'/></svg>") center / 14px no-repeat; }
.plan.is-premium { background:
  radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--coral) 22%, transparent), transparent 65%),
  linear-gradient(160deg, color-mix(in srgb, var(--lavender) 8%, var(--surface)), var(--surface)); }
.plan .tag { position: absolute; top: 22px; right: 22px; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.04em; color: #fff; background: linear-gradient(135deg, #ff8a70, #f0675c); }
.plans-note { max-width: 860px; margin: 16px auto 0; text-align: center; color: var(--muted); font-size: 0.9rem; }

/* ---------- Invite page ---------- */

.invite-code { margin: 0.3em 0 0.6em; font: 900 2.4rem/1.1 var(--round); letter-spacing: 0.18em; color: var(--accent); }
.steps { padding-left: 1.2em; }
.steps li { margin: 0.35em 0; }

@media (max-width: 760px) {
  .plans { grid-template-columns: 1fr; }
}