:root {
  --ink:#193d30;
  --green:#28784e;
  --muted:#52645a;
  --cream:#f8f7ef;
  --line:#d9e2d7;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}
body {
  margin:0;
  color:var(--ink);
  background:var(--cream);
  font:17px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a {
  color:inherit;
  text-underline-offset:5px;
}
a:focus-visible,summary:focus-visible,button:focus-visible {
  outline:3px solid #9b5828;
  outline-offset:5px;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
.wrap {
  width:min(1160px,calc(100% - 48px));
  margin-inline:auto;
}
.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:24px;
  border-bottom:1px solid var(--line);
}
nav {
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}
nav a {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
}
nav a:hover,.text-link:hover {
  text-decoration:underline;
}
.sign-in {
  gap:20px;
  border:1px solid var(--line);
  padding:6px 18px;
  border-radius:99px;
}
.skip {
  position:absolute;
  left:20px;
  top:-100px;
  background:white;
  padding:12px;
  z-index:10;
}
.skip:focus {
  top:12px;
}
.hero {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:center;
  gap:88px;
  padding-block:84px 96px;
}
.eyebrow {
  font-size:12px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--green);
  margin:0 0 20px;
}
h1,h2,h3,h4,p {
  margin-top:0;
}
h1,h2 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.045em;
  line-height:1.08;
}
h1 {
  font-size:clamp(46px,5.1vw,72px);
  margin-bottom:26px;
  max-width:680px;
}
h2 {
  font-size:clamp(34px,3.5vw,48px);
  max-width:690px;
  margin-bottom:32px;
}
h3 {
  font-size:21px;
  line-height:1.35;
  margin-bottom:16px;
}
p {
  color:var(--muted);
}
.intro {
  max-width:490px;
  font-size:18px;
}
.actions {
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin:32px 0 20px;
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:35px;
  min-height:52px;
  background:var(--green);
  color:white;
  border-radius:99px;
  padding:12px 26px;
  font-size:15px;
  font-weight:650;
  text-decoration:none;
}
.button:hover {
  background:#205f3e;
}
.text-link {
  padding-block:12px;
  font-size:15px;
  font-weight:600;
}
.quiet {
  font-size:13px;
  line-height:1.6;
}
.preview {
  margin:0;
  background:white;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 25px 70px #234c3010;
  overflow:hidden;
  transform:rotate(2deg);
}
.preview-top {
  display:flex;
  align-items:center;
  gap:14px;
  padding:17px 22px;
  border-bottom:1px solid var(--line);
  font-size:12px;
}
.preview-top strong {
  margin-left:auto;
}
.preview-body {
  padding:24px;
}
.preview-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.preview-heading h2 {
  font:700 25px system-ui;
  letter-spacing:-.04em;
  margin:0 0 20px;
}
.preview-heading span {
  font-size:11px;
  color:var(--muted);
}
.totals {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:24px;
}
.totals div {
  display:flex;
  flex-direction:column;
  text-align:center;
  background:#f3f6f1;
  border-radius:12px;
  padding:14px 4px;
}
.totals strong {
  font-size:24px;
}
.totals span {
  font-size:12px;
}
.preview h3 {
  font-size:16px;
  margin-bottom:10px;
}
.record {
  display:flex;
  gap:16px;
  border:1px solid #e6eae4;
  border-radius:12px;
  margin-top:10px;
  padding:12px 15px;
  align-items:center;
}
.record h4 {
  font-size:11px;
  color:var(--muted);
  margin:0 0 2px;
}
.record strong {
  font-size:14px;
}
.record p {
  font-size:11px;
  margin:2px 0 0;
}
.record-dot {
  width:32px;
  height:32px;
  border-radius:50%;
  flex-shrink:0;
}
.feed {
  background:#f4e6c9;
}
.diaper {
  background:#dcebe3;
}
.sleep {
  background:#e6e2f1;
}
figcaption {
  font-size:11px;
  color:var(--muted);
  text-align:center;
  padding:0 12px 20px;
}
.section {
  padding-block:74px;
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.card {
  background:white;
  border:1px solid var(--line);
  border-radius:18px;
  padding:30px;
}
.number {
  display:block;
  color:var(--green);
  font-size:13px;
  letter-spacing:.12em;
  margin-bottom:32px;
}
.card p {
  font-size:15px;
  margin-bottom:0;
}
.band {
  background:#eaf0e5;
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  list-style:none;
  counter-reset:step;
  padding:0;
  margin:45px 0 0;
}
.steps li {
  counter-increment:step;
}
.steps li:before {
  content:counter(step,decimal-leading-zero);
  display:block;
  color:var(--green);
  border-top:1px solid #bacbb9;
  padding-top:20px;
  margin-bottom:24px;
  font-size:13px;
}
.steps p {
  font-size:15px;
}
.stories {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.story {
  padding:40px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
}
.story h2 {
  font-size:38px;
}
.story p {
  font-size:15px;
}
.story .eyebrow {
  font-size:11px;
}
.offline {
  background:#edf2e8;
}
.story-note {
  display:block;
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-top:30px;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:20px;
}
.pricing { border-top:1px solid var(--line); }
.pricing > div:first-child { max-width:700px; }
.price-options { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
.price-card { background:white; border:1px solid var(--line); border-radius:20px; padding:32px; }
.price-card.yearly { background:#eaf0e5; border-color:#92af99; }
.price-card h3 { margin:0; }
.price-card .price { margin:16px 0; font-size:14px; }
.price strong { color:var(--ink); font-size:42px; letter-spacing:-.04em; }
.price-card ul { padding-left:22px; margin:24px 0 30px; color:var(--muted); }
.price-card li { margin:10px 0; font-size:15px; }
.price-card .button { width:100%; }
.pricing-terms { margin-top:24px; max-width:800px; font-size:14px; }
.offline-note { padding:16px; background:#ffffff80; border-left:3px solid #648b6d; border-radius:0 8px 8px 0; }
.story .offline-note { font-size:13px; }
.record-dot { display:grid; place-items:center; }
.record-dot svg { width:20px; height:20px; }
.preview-add { margin:0 24px 20px; padding:16px 0 0; border-top:1px solid var(--line); }
.preview-add > p { font-size:13px; font-weight:650; margin-bottom:12px; }
.preview-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.preview-choices > span { display:flex; align-items:center; flex-direction:column; background:#f3f6f1; border-radius:10px; padding:12px 2px; }
.preview-choices strong { font-size:12px; margin-top:6px; }
.preview-choices small { font-size:9px; }
.mobile-nav { display:none; }
.analytics-consent { margin-block:24px; padding:24px; border:1px solid var(--line); border-radius:16px; }
.analytics-consent h2 { font:600 19px system-ui; letter-spacing:normal; margin-bottom:12px; }
.analytics-consent p { font-size:14px; }
.analytics-consent button { font:inherit; font-size:14px; cursor:pointer; min-height:44px; padding:8px 18px; border:1px solid var(--green); background:white; color:var(--ink); border-radius:8px; margin:0 10px 12px 0; }
.faq {
  max-width:850px;
  padding-bottom:100px;
}
.faq details {
  border-bottom:1px solid var(--line);
  padding-block:6px;
}
.faq summary {
  padding:20px 0;
  cursor:pointer;
  font-weight:600;
  min-height:48px;
}
.faq details p {
  font-size:15px;
  padding-right:24px;
}
.footer {
  background:#eaf0e5;
  padding-block:46px 24px;
  border-top:1px solid var(--line);
}
.footer-top {
  display:flex;
  justify-content:space-between;
  gap:40px;
}
.footer p {
  font-size:13px;
  margin-top:16px;
  max-width:460px;
}
.footer nav {
  border-top:1px solid #cbd6c7;
  padding-top:20px;
  gap:24px;
}
.footer nav span,.footer nav a {
  font-size:13px;
}
.footer small {
  font-size:11px;
}
@media(max-width:800px) {
  .hero {
    gap:35px;
    padding-block:56px;
    grid-template-columns:1fr 1fr;
  }
  h1 {
    font-size:48px;
  }
  .header {
    flex-wrap:wrap;
  }
  .header nav {
    gap:20px;
  }
  .cards,.steps {
    gap:14px;
  }
  .card {
    padding:22px;
  }
  .stories {
    gap:16px;
  }
  .story {
    padding:25px;
  }
  .pricing {
    gap:30px;
  }
  .section {
    padding-block:50px;
  }
}
@media(max-width:600px) {
  .wrap {
    width:calc(100% - 36px);
  }
  .header {
    gap:14px;
    padding-block:16px;
  }
  .brand img {
    width:150px;
  }
  .header nav {
    gap:10px 20px;
    width:100%;
    justify-content:space-between;
  }
  .header nav a {
    font-size:12px;
  }
  .sign-in {
    padding:2px 12px;
    gap:8px;
  }
  .hero {
    grid-template-columns:1fr;
    gap:38px;
    padding-top:40px;
  }
  .hero h1 {
    font-size:52px;
  }
  .intro {
    font-size:16px;
  }
  .preview {
    transform:none;
    width:min(100%,390px);
    margin:auto;
  }
  .cards,.steps,.stories,.pricing {
    grid-template-columns:1fr;
  }
  .card {
    padding:26px;
  }
  .number {
    margin-bottom:18px;
  }
  .steps {
    gap:22px;
  }
  .steps h3 {
    margin-bottom:10px;
  }
  .story {
    padding:28px;
  }
  .pricing {
    gap:20px;
  }
  .price-card {
    padding:25px;
  }
  .footer-top {
    display:block;
  }
  .footer nav {
    gap:14px 22px;
  }
  .faq {
    padding-bottom:60px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
}

/* Native disclosure keeps the mobile header compact, keyboard accessible and script-free. */
@media(max-width:1000px) {
  .header { flex-wrap:nowrap; align-items:flex-start; }
  .header .desktop-nav { display:none; }
  .mobile-nav { display:block; position:relative; margin-left:auto; }
  .mobile-nav summary { cursor:pointer; min-height:44px; padding:8px 16px; border:1px solid var(--line); border-radius:22px; }
  .mobile-nav nav { width:190px; display:flex; flex-direction:column; align-items:stretch; gap:4px; margin-top:12px; }
  .mobile-nav nav a { font-size:14px; justify-content:center; padding:10px; }
}
@media(max-width:600px) {
  .price-options { grid-template-columns:1fr; }
  .hero h1 { font-size:clamp(42px,12vw,52px); }
  .hero .eyebrow { font-size:11px; letter-spacing:.08em; }
  .header .brand img { width:145px; }
  .mobile-nav[open] { position:static; }
  .header:has(.mobile-nav[open]) { flex-wrap:wrap; }
  .mobile-nav[open] { width:100%; }
  .mobile-nav[open] summary { width:max-content; margin-left:auto; }
  .mobile-nav nav { width:100%; }
}