/* BabyTeller, the Nursery palette (BAB-45), carried from
   Packages/BabyTellerTheme/Palette.swift so the site and the app agree.
   Cream and pastel by day, the same tints dimmed on deep plum at night.
   Never pure white or pure black: full contrast glares at 3am.

   Theme: the light tokens are the base. The dark tokens are declared twice,
   once for the system preference and once for an explicit [data-theme="dark"],
   so a visitor's choice wins in both directions and the default still follows
   the phone they are reading on. */

:root {
  --bg: #fbf6f1;
  --band: #f6efe9;
  --surface: #ffffff;
  --surface2: #f4eef3;
  --hairline: #efe4e6;

  --ink: #3a2f3a;
  --subtle: #6e6072;
  --muted: #8f8090;

  --accent: #8b6ad6;
  --accent-ink: #ffffff;

  --lavender: #e6dbfa;  --violet: #8b6ad6;
  --blush:    #fbe0e3;  --rose:   #b85c74;
  --mint:     #d9f0e6;  --pine:   #3f8f76;
  --butter:   #fdefcf;  --amber:  #b07d2a;
  --sky:      #dde9fb;  --cobalt: #5a7fc0;
  --aqua:     #d6f1ee;  --teal:   #3a8c8a;
  --peach:    #fde3d3;  --coral:  #c4704e;

  --shadow: rgba(120, 90, 150, 0.10);
  --shadow-lift: rgba(120, 90, 150, 0.16);

  --r-card: 28px;
  --r-pill: 16px;
  --step: clamp(3rem, 7vw, 5.5rem);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #221a26;
    --band: #281f2c;
    --surface: #2e2531;
    --surface2: #3a3040;
    --hairline: #3d323f;

    --ink: #f4ebe6;
    --subtle: #ddd0dc;
    --muted: #c2b4c2;

    --accent: #c9b0f2;
    --accent-ink: #221a26;

    --lavender: #3d3150;  --violet: #c9b0f2;
    --blush:    #48323c;  --rose:   #f0a8bb;
    --mint:     #2d3f3a;  --pine:   #8fd6bd;
    --butter:   #4a3f2c;  --amber:  #f0c46a;
    --sky:      #26324d;  --cobalt: #a4c0ee;
    --aqua:     #263f3f;  --teal:   #8fd4cf;
    --peach:    #4a3a32;  --coral:  #f2ab90;

    /* A shadow on plum is mud; cards separate by tone instead. */
    --shadow: transparent;
    --shadow-lift: rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #221a26;
  --band: #281f2c;
  --surface: #2e2531;
  --surface2: #3a3040;
  --hairline: #3d323f;
  --ink: #f4ebe6;
  --subtle: #ddd0dc;
  --muted: #c2b4c2;
  --accent: #c9b0f2;
  --accent-ink: #221a26;
  --lavender: #3d3150;  --violet: #c9b0f2;
  --blush:    #48323c;  --rose:   #f0a8bb;
  --mint:     #2d3f3a;  --pine:   #8fd6bd;
  --butter:   #4a3f2c;  --amber:  #f0c46a;
  --sky:      #26324d;  --cobalt: #a4c0ee;
  --aqua:     #263f3f;  --teal:   #8fd4cf;
  --peach:    #4a3a32;  --coral:  #f2ab90;
  --shadow: transparent;
  --shadow-lift: rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Nunito", ui-rounded, -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3 {
  font-family: "Fraunces", ui-serif, "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.012em;
}
h1 { font-size: clamp(2.3rem, 6.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h3 { font-size: 1.12rem; letter-spacing: 0; }

p { margin: 0 0 1rem; }
a { color: var(--violet); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
strong { font-weight: 800; }

/* ---- layout ------------------------------------------------------- */

.wrap { max-width: 58rem; margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 42rem; }

section { padding: var(--step) 0; }
/* Alternating full-bleed bands give the page a rhythm; without them
   fourteen sections read as one long list. */
section.band { background: var(--band); }

.eyebrow {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--violet); margin-bottom: 0.7rem;
}
.lede { font-size: 1.12rem; color: var(--subtle); max-width: 36rem; margin-top: 0.9rem; }
h2 + .lede { margin-top: 0.75rem; }

/* ---- header ------------------------------------------------------- */

header.site {
  position: sticky; top: 0; z-index: 20;
  padding: 0.85rem 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
header.site .wrap { display: flex; align-items: center; gap: 1rem; }
.brand {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-weight: 600; font-size: 1.18rem; color: var(--ink);
  text-decoration: none; display: flex; align-items: center; gap: 0.6rem;
}
.brand:hover { color: var(--ink); }
.brand .mark {
  width: 1.95rem; height: 1.95rem; border-radius: 22.4%;
  display: block; box-shadow: 0 2px 8px var(--shadow);
}
nav.site { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; font-size: 0.94rem; font-weight: 700; }
nav.site a { color: var(--subtle); text-decoration: none; }
nav.site a:hover { color: var(--violet); }

/* An icon, not a word: the sun, the moon, or the half circle that means
   whichever the device is using. */
.theme {
  display: inline-grid; place-items: center;
  width: 2.1rem; height: 2.1rem; padding: 0;
  color: var(--subtle); background: var(--surface2);
  border: 1px solid var(--hairline); border-radius: 999px;
  cursor: pointer; line-height: 0;
}
.theme svg { display: block; }
.theme:hover { color: var(--violet); border-color: var(--violet); }
.theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- hero --------------------------------------------------------- */

.hero { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 54rem) {
  .hero { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
  .hero .phone { max-width: 20rem; margin-left: auto; }
}

/* ---- cards -------------------------------------------------------- */

.cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 2rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: 0 10px 26px var(--shadow);
  padding: 1.6rem;
}
.card h3 { margin-bottom: 0.45rem; }
.card p { color: var(--subtle); font-size: 0.98rem; margin-bottom: 0; }
.card .badge {
  width: 2.7rem; height: 2.7rem; border-radius: 0.95rem;
  display: grid; place-items: center;
  font-size: 1.35rem; line-height: 1; margin-bottom: 1rem;
}
/* A counted badge (the tap counts) reads as a number, not an icon. */
.card .badge.count {
  font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: 1.5rem; color: var(--violet);
}
.b-lavender { background: var(--lavender); }
.b-blush { background: var(--blush); }
.b-mint { background: var(--mint); }
.b-butter { background: var(--butter); }
.b-sky { background: var(--sky); }
.b-aqua { background: var(--aqua); }
.b-peach { background: var(--peach); }

.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 1.75rem;
  margin-top: 2rem;
}
.panel:first-child { margin-top: 0; }
section.band .panel { background: var(--surface); }

/* Things you say out loud: the phrase is the whole point, so it gets a
   card of its own and nothing else on the line. */
.says { display: grid; gap: 0.5rem; grid-template-columns: 1fr; margin: 1.6rem 0 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .says { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .says { grid-template-columns: repeat(3, 1fr); } }
.says li {
  padding: 0.75rem 1rem;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
.says q {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-size: 0.98rem; font-weight: 500; color: var(--ink);
  quotes: "\201C" "\201D";
}

/* ---- device framing ----------------------------------------------- */

.phone {
  position: relative;
  border-radius: 2.6rem;
  padding: 0.4rem;
  background: linear-gradient(160deg, #4a3f4c, #2a222c);
  box-shadow: 0 20px 48px var(--shadow-lift), 0 2px 6px var(--shadow);
  width: 100%;
}
.phone img, .phone video {
  display: block; width: 100%; height: auto;
  border-radius: 2.25rem;
  background: var(--bg);
}

.shots {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  align-items: start; margin-top: 2rem;
}
/* Two-up, capped: a pair at full wrap width dwarfs the single phones
   elsewhere on the page. */
.shots.pair {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  align-items: center; gap: 1.25rem;
  max-width: 32rem; margin-inline: auto;
}
/* Six shots want an even 3 + 3. Left to auto-fit they land 4 + 2 and the
   last row reads as leftovers. */
@media (min-width: 52rem) { .shots.three { grid-template-columns: repeat(3, 1fr); } }
.shots.pair .panel { margin-top: 0; }
figure.shot { margin: 0; }
.shot figcaption {
  margin-top: 0.9rem; font-size: 0.9rem; color: var(--muted);
  text-align: center; text-wrap: balance;
}
.showcase.narrow-media { max-width: 22rem; margin-inline: auto; margin-top: 2rem; }

/* ---- not-yet-built ------------------------------------------------- */

.soon {
  border: 1px dashed var(--hairline);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 2.5rem 1.75rem; text-align: center;
  color: var(--subtle); margin-top: 2rem;
}
.tag {
  display: inline-block;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--violet);
  background: var(--lavender); border-radius: 999px;
  padding: 0.28rem 0.75rem;
}
.soon .tag { margin-bottom: 0.9rem; }
/* The one paid marker: warm, so it reads apart from the violet eyebrow. */
.tag.paid { color: var(--amber); background: var(--butter); }
/* An eyebrow with a tag beside it. */
.eyebrow-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.eyebrow-row .eyebrow { margin-bottom: 0; }

/* ---- story -------------------------------------------------------- */

.story p { font-size: 1.06rem; color: var(--subtle); }
.story p strong { color: var(--ink); }
.signoff {
  margin-top: 1.4rem; color: var(--muted);
  font-family: "Fraunces", Georgia, serif; font-size: 1rem;
}

/* ---- prose pages --------------------------------------------------- */

.prose h2 { margin: 2.75rem 0 0.8rem; }
.prose h3 { margin: 1.9rem 0 0.5rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--subtle); }
.prose li { margin-bottom: 0.5rem; }
.prose > p { color: var(--subtle); }
.prose strong { color: var(--ink); }
.updated { color: var(--muted); font-size: 0.9rem; }
.callout {
  background: var(--surface); border: 1px solid var(--hairline);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-pill); padding: 1.1rem 1.35rem; margin: 1.6rem 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---- footer -------------------------------------------------------- */

footer.site {
  border-top: 1px solid var(--hairline);
  padding: 2.5rem 0 3.5rem; color: var(--muted); font-size: 0.9rem;
  background: var(--band);
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: baseline; }
footer.site a { color: var(--subtle); text-decoration: none; }
footer.site a:hover { color: var(--violet); }
footer.site .spacer { margin-left: auto; }

@media (max-width: 34rem) {
  .card { padding: 1.3rem; }
  .panel { padding: 1.35rem; }
  footer.site .spacer { margin-left: 0; width: 100%; }
  nav.site { gap: 0.8rem; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ---- free vs paid -------------------------------------------------- */

.compare { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 46rem) {
  /* Free is wider on purpose: the balance of the page should say what the
     balance of the app says. */
  .compare { grid-template-columns: 1.55fr 1fr; align-items: start; }
}
.plan {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 1.6rem;
  box-shadow: 0 10px 26px var(--shadow);
}
.plan.free { border-color: color-mix(in srgb, var(--accent) 35%, var(--hairline)); }
.plan h3 { font-size: 1.3rem; margin-bottom: 0.15rem; }
.plan .price {
  font-family: "Fraunces", Georgia, serif; font-weight: 600;
  color: var(--violet); font-size: 0.95rem; margin-bottom: 1.1rem; display: block;
}
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.plan li {
  display: grid; grid-template-columns: 1.15rem 1fr; gap: 0.65rem;
  align-items: start; font-size: 0.97rem; color: var(--subtle);
}
.plan li::before { content: "✓"; color: var(--pine); font-weight: 800; line-height: 1.5; }
.plan.paid li::before { content: "+"; color: var(--violet); }
.plan .note {
  margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hairline);
  font-size: 0.9rem; color: var(--muted);
}

/* ---- what the parser hears ------------------------------------------ */

.parse { display: grid; gap: 0.5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.parse li {
  display: grid; gap: 0.15rem 0.8rem;
  grid-template-columns: 1fr;
  padding: 0.6rem 0.9rem;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
@media (min-width: 40rem) {
  .parse li { grid-template-columns: 1.1fr 1fr; align-items: baseline; }
}
/* Two across, wider than the wrap, so seven examples read as four rows. */
@media (min-width: 64rem) {
  .parse.two {
    grid-template-columns: 1fr 1fr;
    width: min(74rem, calc(100vw - 3rem));
    margin-left: 50%; transform: translateX(-50%);
  }
}
.parse .said {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-size: 1.02rem; color: var(--ink); font-weight: 500;
}
.parse .got {
  font-size: 0.9rem; color: var(--subtle);
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: baseline;
}
.parse .got::before { content: "→"; color: var(--accent); font-weight: 800; }
section.band .parse li { background: var(--surface); }

.parse-group { margin-top: 2rem; }
.parse-group h3 { margin-bottom: 0.9rem; font-size: 1.05rem; color: var(--ink); }

/* ---- four across --------------------------------------------------- */
/* The Siri cards hold short lines, so four fit where three would leave a
   lonely fourth on its own row. Wider than the wrap, centred on it. */
@media (min-width: 42rem) and (max-width: 63.99rem) {
  .cards.four { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .cards.four {
    grid-template-columns: repeat(4, 1fr);
    width: min(74rem, calc(100vw - 3rem));
    margin-left: 50%;
    transform: translateX(-50%);
    gap: 0.9rem;
  }
  .cards.four .card { padding: 1.4rem 1.2rem; }
  .cards.four .card h3 { font-size: 1.12rem; }
  .cards.four .say { font-size: 0.9rem; }
}

/* ---- phone flanked by its notes ------------------------------------ */
/* Instead of heading, phone, footnote stacked down the page: the shot in
   the middle with what it means either side of it. */
.flank { display: grid; gap: 1.6rem; margin-top: 2rem; justify-items: center; }
.flank .shot { max-width: 17rem; width: 100%; order: -1; }
.flank-side { display: grid; gap: 1rem; align-content: center; }
.flank-side p { color: var(--subtle); margin: 0; font-size: 0.98rem; }
.flank-side p strong { color: var(--ink); }
@media (min-width: 58rem) {
  .flank {
    grid-template-columns: 1fr minmax(0, 18rem) 1fr;
    gap: 2.2rem; align-items: center;
    width: min(72rem, calc(100vw - 3rem));
    margin-left: 50%; transform: translateX(-50%);
  }
  .flank .shot { order: 0; max-width: none; }
}
/* When the flank breaks out wider than the wrap, its heading centres over
   it; left-aligned it would sit indented from the left column. */
@media (min-width: 58rem) {
  .centred-head > .eyebrow, .centred-head > h2 { text-align: center; }
}
/* A lede that bridges into a full-width grid below it. */
.lede.wide { max-width: none; margin-top: 2.6rem; }
/* The free-run note under a premium feature's lede. */
.tryline {
  margin-top: 1rem; max-width: 36rem;
  font-size: 0.94rem; color: var(--muted);
  border-left: 2px solid var(--butter); padding-left: 0.9rem;
}

/* ---- a small shot beside its notes ---------------------------------- */
/* For a secondary section: the screenshot is evidence, not the point. */
.aside { display: grid; gap: 1.4rem; margin-top: 2rem; }
.aside .shot { max-width: 13rem; }
.aside-body { display: grid; gap: 0.9rem; align-content: center; }
.aside-body p { color: var(--subtle); margin: 0; font-size: 0.98rem; }
.aside-body p strong { color: var(--ink); }
.aside-body .lede { margin: 0; max-width: none; font-size: 1.05rem; }
@media (min-width: 46rem) {
  .aside { grid-template-columns: 13rem 1fr; gap: 2.4rem; align-items: center; }
}

/* ---- the three zeroes ----------------------------------------------- */
.zeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-top: 2rem; text-align: center; }
.zeros > div {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 1.25rem 0.5rem;
}
.zeros .z {
  display: block; font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: 2.7rem; line-height: 1; color: var(--violet);
}
.zeros .zl {
  display: block; margin-top: 0.45rem;
  font-size: clamp(0.68rem, 2.4vw, 0.84rem); font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}

/* What it runs on, and what it will run on. */
.platforms { margin-top: 1.4rem; font-size: 0.95rem; color: var(--subtle); }
.platforms strong { color: var(--ink); }
.platforms span { color: var(--muted); }

/* The story reads in two columns on a wide screen: same words, half the
   scroll, and a measure that is still comfortable. */
.story-body { margin-top: 1.2rem; }
.story-body p:last-child { margin-bottom: 0; }
@media (min-width: 52rem) {
  .story-body { columns: 2; column-gap: 2.6rem; }
  .story-body p { break-inside: avoid; margin-top: 0; }
}
.story .signoff { margin-top: 1.4rem; }
.plan .price strong { font-size: 1.25rem; color: var(--violet); }