/* Our Baby Tracker website. Colours from design/tokens.json: the light
   palette by day, the app's night palette when the device is in dark mode.
   The font is the device's own rounded system font (SF Pro Rounded on Apple
   devices): no web fonts, no requests to anyone else. */

:root {
  --bg: #FAF7F2;
  --card: #FFFFFF;
  --text: #203B2B;
  --text-2: #5A695D;
  --hairline: #E7E1D6;
  --accent: #52784B;
  --accent-text: #FFFFFF;
  --accent-ink: #35592F;
  --sage-tint: #E6EDE2;
  --sleep-tint: #DFEAF5;
  --sleep-ink: #2F557F;
  --diaper-tint: #F5E8C8;
  --diaper-ink: #6B5015;
  --night-band: #141C17;
  --night-text: #EDF3EA;
  --night-text-2: #A8B5A8;
  --night-accent: #BDD5B0;
  --bezel: #1D2320;
  --shadow: 0 18px 40px rgba(32, 59, 43, 0.12), 0 0 0 1px rgba(32, 59, 43, 0.06);
  --radius: 22px;
  --max: 1080px;
  --font: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141C17;
    --card: #1B251E;
    --text: #EDF3EA;
    --text-2: #A8B5A8;
    --hairline: #2B382E;
    --accent: #87A77D;
    --accent-text: #0E1410;
    --accent-ink: #BDD5B0;
    --sage-tint: #243322;
    --sleep-tint: #1D2A36;
    --sleep-ink: #A9CBE8;
    --diaper-tint: #322A17;
    --diaper-ink: #E0C685;
    --night-band: #0E1410;
    --bezel: #3A423B;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(237, 243, 234, 0.06);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2.5px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 32px; } }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; background: var(--card); padding: 8px 12px; border-radius: 10px; z-index: 10; }

/* Header and footer */

.site-header { padding: 18px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 18px; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.nav { display: flex; gap: 18px; font-weight: 700; font-size: 16px; }
.nav a { color: var(--text-2); text-decoration: none; }
.brand { white-space: nowrap; }
@media (max-width: 420px) {
  .brand { font-size: 16px; gap: 8px; }
  .brand img { width: 32px; height: 32px; }
  .nav { gap: 14px; font-size: 15px; }
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }

.site-footer { border-top: 1px solid var(--hairline); margin-top: 72px; padding: 28px 0 40px; color: var(--text-2); font-size: 15px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer a { color: var(--text-2); }

/* Type */

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(38px, 7vw, 62px); }
h2 { font-size: clamp(30px, 4.6vw, 44px); }
h3 { font-size: 21px; letter-spacing: -0.01em; line-height: 1.2; }
.accent { color: var(--accent-ink); }
.lede { font-size: clamp(19px, 2.4vw, 22px); color: var(--text-2); margin: 18px 0 0; max-width: 34ch; }
.eyebrow { font-weight: 800; font-size: 15px; letter-spacing: 0.02em; color: var(--accent-ink); margin: 0 0 10px; }
p { margin: 12px 0 0; }

/* Hero */

.hero { padding: 24px 0 40px; }
.hero .wrap { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1.05fr 1fr; gap: 56px; } }

.store-badge {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 28px;
  padding: 12px 20px 12px 14px; border-radius: 16px;
  background: var(--text); color: var(--bg); text-decoration: none; font-weight: 800;
}
.store-badge img { width: 34px; height: 34px; border-radius: 8px; }
.store-badge small { display: block; font-weight: 600; font-size: 13px; opacity: 0.8; }
.store-badge span { display: block; font-size: 18px; line-height: 1.15; }
.fine { color: var(--text-2); font-size: 15px; margin-top: 12px; }

/* align-items: flex-start keeps each phone as tall as its screen; stretched,
   the first phone grew to match the lower second one and showed bezel below. */
.phones { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 0; padding: 8px 0 20px; }
.phones .phone:nth-child(2) { margin-left: -14%; margin-top: 12%; }

/* A plain phone outline around a screenshot */
.phone {
  width: min(280px, 62vw);
  padding: 9px; border-radius: 46px;
  background: var(--bezel);
  box-shadow: var(--shadow);
  flex: none;
}
.phone img { border-radius: 38px; width: 100%; height: auto; aspect-ratio: 1320 / 2868; }
.phones .phone { width: min(250px, 46vw); }

/* One-tap cards */

.section { padding: 56px 0; }
.section-head { max-width: 640px; margin-bottom: 28px; }

.cards { display: grid; gap: 14px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--card); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.card .emoji { font-size: 32px; line-height: 1; margin-bottom: 14px; display: block; }
.card p { color: var(--text-2); margin-top: 8px; }
.card.feed { background: var(--sage-tint); box-shadow: none; }
.card.sleep { background: var(--sleep-tint); box-shadow: none; }
.card.diaper { background: var(--diaper-tint); box-shadow: none; }
.card.feed h3 { color: var(--accent-ink); }
.card.sleep h3 { color: var(--sleep-ink); }
.card.diaper h3 { color: var(--diaper-ink); }

/* Feature rows: words beside a phone, alternating sides on wide screens */

.feature { display: grid; gap: 28px; align-items: center; padding: 40px 0; }
.feature .phone { justify-self: center; }
@media (min-width: 860px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 64px; padding: 56px 0; }
  .feature.flip .copy { order: 2; }
}
.feature .copy { max-width: 460px; }
.feature .copy p { font-size: 19px; color: var(--text-2); }

/* The night band is always dark, whatever the device setting */
.night-band { background: var(--night-band); color: var(--night-text); border-radius: 32px; margin: 24px 0; padding: 8px 24px; }
@media (min-width: 860px) { .night-band { padding: 8px 56px; } }
.night-band .copy p { color: var(--night-text-2); }
.night-band .eyebrow, .night-band .accent { color: var(--night-accent); }
.night-band .phone { background: #3A423B; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
@media (prefers-color-scheme: dark) {
  .night-band { box-shadow: 0 0 0 1px var(--hairline); }
}

/* Privacy */

.privacy-band { background: var(--sage-tint); border-radius: 32px; padding: 40px 24px; }
@media (min-width: 760px) { .privacy-band { padding: 56px; } }
.checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .checks { grid-template-columns: 1fr 1fr; gap: 14px 32px; } }
.checks li { position: relative; padding-left: 34px; font-size: 18px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  -webkit-mask: radial-gradient(circle, #000 0 100%);
}
.checks li::after {
  content: ""; position: absolute; left: 7px; top: 8px; width: 7px; height: 11px;
  border: solid var(--accent-text); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* Questions */

.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--hairline); padding: 4px 0; }
.faq summary {
  cursor: pointer; list-style: none; font-weight: 800; font-size: 19px; padding: 16px 32px 16px 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 26px; font-weight: 600; color: var(--text-2); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 18px; color: var(--text-2); max-width: 62ch; }

/* Closing call */

.closing { text-align: center; padding: 64px 0 8px; }
.closing img.icon { width: 96px; height: 96px; border-radius: 22px; margin: 0 auto 20px; box-shadow: var(--shadow); }
.closing .store-badge { margin-top: 24px; }
.closing .lede { margin-left: auto; margin-right: auto; }

/* Plain pages: support, privacy */

.page { max-width: 760px; padding-top: 24px; }
.page h1 { font-size: clamp(36px, 6vw, 52px); }
.page h2 { font-size: 26px; margin-top: 44px; }
.page h3 { margin-top: 26px; }
.page p, .page li { color: var(--text-2); font-size: 18px; }
.page strong { color: var(--text); }
.page ul { padding-left: 22px; margin: 12px 0 0; }
.page li { margin: 6px 0; }
.meta { color: var(--text-2); margin-top: 12px; }

.contact-card { background: var(--sage-tint); border-radius: var(--radius); padding: 24px; margin-top: 28px; }
.contact-card p { margin: 0; color: var(--text); }
.contact-card .email { font-size: clamp(20px, 4vw, 26px); font-weight: 800; display: inline-block; margin: 6px 0 4px; word-break: break-all; }

.howto { display: grid; gap: 12px; margin-top: 20px; }
.howto div { background: var(--card); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow); }
.howto h3 { margin: 0; font-size: 18px; }
.howto p { margin: 6px 0 0; font-size: 17px; }
.path { font-weight: 700; color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}