/* BabyMeter marketing site — shared styles.
   App design language: SF Pro Rounded headers, TypeRegistry palette, light/dark, responsive.
   Self-contained, no external fonts or frameworks (WEBSITE.md §0, §8). */

:root {
  --font-rounded: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;

  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface-2: #f2f0ea;
  --text: #1a1a1c;
  /* A neutral for secondary text, NOT a kind colour — it only ever coincided with the app's notes
     graphite. Left at 5.05:1; the palette's note token is lighter and would put body copy under
     the 4.5 floor. */
  --muted: #6b6f76;
  --border: rgba(0, 0, 0, 0.08);
  /* Kind colours from BMPalette (BabyMeterCore). Each takes the TIER matching its job here, which
     is not always the app's standard tier: --accent-ink and --indigo set TEXT, so they take a
     contrast-bearing value; --green marks a ✓ glyph (graphical, 3:1); --amber is only ever a 14%
     wash. The two text inks are solved against THIS page's paper (#fbfaf8), not white — the app's
     high-contrast tier lands at 4.32:1 here, which reads as passing and isn't. */
  --accent: #2b91e5;          /* app activity blue — BMPalette.activity light */
  --accent-ink: #0077c7;      /* 4.51:1 on --bg */
  --amber: #c47800;           /* app diaper amber — BMPalette.diaper light */
  --indigo: #6067da;          /* app sleep indigo, darkened for text — 4.52:1 on --bg */
  --green: #23a65b;           /* app solids green — BMPalette.solid light */

  /* The kind palette itself, verbatim from BMPalette's `light` tier. These only ever drive an
     ICON (a ~24px stroke glyph on a 14% wash of its own hue) or a small uppercase kicker — never
     body copy — so they take the plain light value rather than a text-contrast tier. Kickers are
     the one text use and are bumped a step by --c-ink below. */
  --k-bottle: #00A293;        /* teal */
  --k-nursing: #D75E7F;       /* rose */
  --k-sleep: #7680E8;         /* indigo */
  --k-diaper: #C47800;        /* amber */
  --k-pump: #9775DE;          /* violet */
  --k-mishap: #AC8700;        /* goldenrod */
  --k-solid: #23A65B;         /* green */
  --k-medicine: #DA5F60;      /* red */
  --k-activity: #2B91E5;      /* blue */
  --k-growth: #C862A9;        /* magenta */
  --k-temperature: #D76732;   /* coral */
  --k-note: #7C8089;          /* graphite */

  /* The brand glyph's own cap teal, sampled from icons/BabyMeter-glyph-premium.svg. Deliberately
     ONE value with no dark variant and no contrast adjustment: it is the Premium mark's colour,
     and the whole point of the mark is that it looks the same everywhere it appears. */
  --brand-teal: #6FCDC0;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.05), 0 18px 44px rgba(0, 0, 0, 0.09);
  --radius: 20px;
  --radius-sm: 12px;
  --maxw: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f11;
    --surface: #17181b;
    --surface-2: #1f2126;
    --text: #f2f2f4;
    --muted: #9ba0a8;
    --border: rgba(255, 255, 255, 0.10);
    --accent: #52acfe;          /* BMPalette.activity dark */
    --accent-ink: #82bef8;
    /* These three had NO dark override before and fell through to their light values. --indigo was
       the visible cost: 3.69:1 on the dark page, i.e. premium kickers set below the text floor.
       Now each takes its token's dark tier. */
    --amber: #e39129;           /* BMPalette.diaper dark */
    --indigo: #909cff;          /* BMPalette.sleep dark — 7.66:1, was 3.69:1 */
    --green: #50c078;           /* BMPalette.solid dark */

    /* BMPalette `dark` tier. Same rule as light: these are lifted values meant to sit on a dark
       ground, so swapping the whole set is what keeps a tile's glyph legible on its own wash. */
    --k-bottle: #00C0AE;
    --k-nursing: #F17B9A;
    --k-sleep: #909CFF;
    --k-diaper: #E39129;
    --k-pump: #B090F7;
    --k-mishap: #CBA005;
    --k-solid: #50C078;
    --k-medicine: #F57D7C;
    --k-activity: #52ACFE;
    --k-growth: #E27FC3;
    --k-temperature: #F18454;
    --k-note: #959AA2;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 2px 8px rgba(0, 0, 0, 0.35), 0 20px 50px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }

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

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

h1, h2, h3, .rounded {
  font-family: var(--font-rounded);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* The inline icon sprite itself is never painted — only its <symbol>s, through <use>. */
svg.sprite { display: none; }

/* ---- Icon tiles ---------------------------------------------------------------------------
   The app's own idiom: a stroke glyph on a soft rounded square washed with its OWN kind colour,
   the way KindIcon and PremiumIconTile draw one. Every tile sets --c to a --k-* token; the glyph
   inherits it and the wash is mixed from it, so a tile can never drift from its hue. */
.tile {
  width: 44px; height: 44px; border-radius: 13px;
  display: inline-grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--c) 15%, var(--surface));
}
.tile svg {
  width: 24px; height: 24px;
  fill: none; stroke: var(--c);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.tile.lg { width: 60px; height: 60px; border-radius: 18px; }
.tile.lg svg { width: 32px; height: 32px; stroke-width: 1.8; }
/* The app's own kind glyphs are FILLED template art, not stroked outlines, so they need the
   opposite treatment. A stylesheet rule beats the SVG's `fill="#000"` presentation attribute,
   which is what lets one copy of the artwork be retinted per kind. The `[fill="none"]` exception
   matters: CSS would otherwise fill the stroke-only paths inside a glyph (the tummy-time figure
   has two), turning a line drawing into a blob. */
.tile.filled svg { fill: var(--c); stroke: var(--c); stroke-width: 0; width: 27px; height: 27px; }
.tile.filled svg [fill="none"] { fill: none; }
.tile.lg.filled svg { width: 36px; height: 36px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-rounded); font-weight: 600; font-size: 16px;
  padding: 12px 20px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .08s ease, filter .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: #fff; padding: 8px 16px; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
@media (prefers-color-scheme: dark) { .btn-primary { color: #06131f; } }

/* TODO(P0): Replace this placeholder with Apple's official badge when the listing is live. */
.appstore {
  display: inline-flex; align-items: center; gap: 10px;
  background: #000; color: #fff; padding: 11px 18px; border-radius: 12px;
  font-family: var(--font-rounded); text-decoration: none;
}
.appstore .apple { font-size: 22px; line-height: 1; }
.appstore small { display: block; font-size: 10px; opacity: .8; font-weight: 500; }
.appstore strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.appstore:hover { text-decoration: none; filter: brightness(1.1); }
@media (prefers-color-scheme: dark) { .appstore { background: #fff; color: #000; } }

/* ---- Header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-rounded); font-weight: 700; font-size: 19px; color: var(--text); }
/* The real app mark. It floats in a mostly-transparent canvas (icons/README.md), so it is set a
   little larger than the old emoji chip and given no background of its own. */
.brand .mark { width: 42px; height: 42px; object-fit: contain; display: block; margin: -4px 0; }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a { color: var(--muted); font-size: 15px; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a.btn-primary { color: #fff; }
@media (prefers-color-scheme: dark) { .nav-links a.btn-primary { color: #06131f; } }
@media (max-width: 720px) { .nav-links a.hide-sm { display: none; } }
/* At phone width the brand, the one surviving link and the CTA are nearly touching. */
@media (max-width: 460px) {
  .brand { font-size: 17px; gap: 7px; }
  .brand .mark { width: 30px; height: 30px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 14px; }
  .btn-primary { padding: 8px 13px; font-size: 15px; }
  .container { padding: 0 18px; }
}

/* ---- Hero ---- */
.hero { padding: 64px 0 32px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } }
.hero h1 { font-size: clamp(34px, 5.6vw, 52px); margin: 0 0 18px; }
.hero-promise {
  font-family: var(--font-rounded); font-size: clamp(20px, 2.6vw, 25px); font-weight: 700;
  letter-spacing: -0.015em; margin: 0 0 10px; max-width: 32ch;
}
.hero .sub { font-size: clamp(16.5px, 2.2vw, 19px); color: var(--muted); margin: 0 0 28px; max-width: 42ch; }
@media (max-width: 900px) { .hero .sub { margin-left: auto; margin-right: auto; } }
@media (max-width: 900px) { .hero-promise { margin-left: auto; margin-right: auto; } }
.hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) { .hero-cta { justify-content: center; } }
.hero-note { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* Hero device stack. Add stays primary; Summary peeks out behind it to show both quick capture
   and the useful view that follows. Both captures share the same 644×1400 aspect ratio. */
.devices { position: relative; min-height: 500px; }
.device {
  border-radius: 26px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.device .shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.device.phone {
  aspect-ratio: 644 / 1400; border-radius: 32px;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  transform-origin: center bottom;
}
.hero-stack .hero-summary { width: 202px; margin-left: -72px; transform: translate(-50%, -50%) rotate(-5deg); z-index: 1; }
.hero-stack .hero-add { width: 220px; margin-left: 68px; transform: translate(-50%, -50%) rotate(3deg); z-index: 2; }
@media (max-width: 900px) {
  .devices { min-height: 440px; }
  .hero-stack .hero-summary { width: 178px; margin-left: -60px; }
  .hero-stack .hero-add { width: 194px; margin-left: 58px; }
}
@media (max-width: 520px) {
  .devices { min-height: 390px; }
  .hero-stack .hero-summary { width: 158px; margin-left: -50px; }
  .hero-stack .hero-add { width: 172px; margin-left: 48px; }
}

/* ---- Value strip ---- */
.value-strip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  margin: 34px 0 18px; padding: 0; list-style: none;
}
.value-strip.proposition-strip { grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .value-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .value-strip { grid-template-columns: repeat(2, 1fr); }
  .value-strip.proposition-strip { grid-template-columns: 1fr; }
}
.fact-strip.centered { justify-content: center; margin-top: 0; }
.value {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.value b { font-family: var(--font-rounded); margin-top: 10px; font-size: 15px; }
.value .vs { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.proposition-strip .value { padding: 22px 20px; text-align: left; align-items: flex-start; }
.proposition-strip .value b { font-size: 17px; }
.proposition-strip .value .vs { font-size: 14px; line-height: 1.5; }
.proposition-strip .value-link {
  margin-top: 10px; color: var(--text); font-family: var(--font-rounded); font-size: 13.5px;
  font-weight: 650; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 40%, transparent);
  text-underline-offset: 3px;
}
.proposition-strip .value-link:hover { text-decoration-color: currentColor; }
.premium-value-mark {
  width: 52px; height: 52px; margin: -4px 0 -4px -4px; object-fit: contain; display: block;
}

/* ---- Sections ---- */
section { padding: 64px 0; }
section[id] { scroll-margin-top: 60px; }
/* Alternating ground, so a long scroll has rhythm instead of one continuous sheet. */
section.band { background: var(--surface-2); }
/* Premium gets its own ground, washed with the BRAND teal rather than the page accent — the same
   colour as the crown and the crowned bottle, so the section reads as one thing. Kept to a low
   percentage: this sits behind body copy and two cards, not behind a hero. */
section.premium-band {
  background:
    radial-gradient(900px 460px at 50% 0%, color-mix(in srgb, var(--brand-teal) 42%, transparent), transparent 72%),
    color-mix(in srgb, var(--brand-teal) 17%, var(--bg));
  border-block: 1px solid color-mix(in srgb, var(--brand-teal) 34%, transparent);
}
@media (prefers-color-scheme: dark) {
  section.premium-band {
    background:
      radial-gradient(900px 460px at 50% 0%, color-mix(in srgb, var(--brand-teal) 24%, transparent), transparent 72%),
      color-mix(in srgb, var(--brand-teal) 12%, var(--bg));
  }
}
/* ⚠️ The lockup floats in a mostly-transparent canvas — the bottle is 44.9% x 73.5% of it
   (icons/README.md), so this frame is ~1.36x the height the mark should actually read at. */
/* The glyph's bottle body is a very pale mint, which all but vanishes on the teal wash behind it.
   A soft light tile restores the contrast and reads as the app icon it is. */
.premium-lockup {
  display: block; width: 104px; height: 104px; margin: 0 auto 18px; object-fit: contain;
  background: var(--surface); border-radius: 26px; padding: 6px 6px 2px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
.section-title { font-size: clamp(26px, 4vw, 36px); margin: 0 0 10px; text-align: center; }
.section-lede, .group-lede { color: var(--muted); text-align: center; max-width: 62ch; margin: 0 auto 40px; }

/* A small uppercase label above a heading, tinted by its kind. --c-ink keeps it legible: the raw
   kind value is tuned for a glyph, and a few of them (solid, bottle) sit under 4.5:1 as text. */
.kicker {
  font-family: var(--font-rounded); font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .07em; margin: 0 0 6px;
  color: color-mix(in srgb, var(--c, var(--accent)) 78%, var(--text));
}

/* ---- Feature rows ---- */
.feature {
  display: grid; grid-template-columns: 1fr 0.82fr; gap: 44px; align-items: center;
  padding: 26px 0;
}
/* Reversed rows must mirror the COLUMN widths too, not just the order — otherwise the narrow
   media lands in the wide column and re-opens the gap the ratio exists to close. */
.feature.reverse { grid-template-columns: 0.82fr 1fr; }
.feature.reverse .feature-copy { order: 2; }
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .feature.reverse .feature-copy { order: 0; }
}
.feature h3 { font-size: clamp(21px, 2.6vw, 26px); margin: 0 0 10px; }
.feature p { color: var(--muted); margin: 0; max-width: 46ch; }
@media (max-width: 820px) { .feature p { margin-inline: auto; } }
.feature-media { display: grid; place-items: center; }
/* The widget board is the one capture shown WHOLE: it is a picture of four separate widgets, and
   cropping it cuts the largest one — the one the copy is actually about — clean in half. */
.widget-media img {
  width: auto; max-width: 100%; max-height: 640px; aspect-ratio: auto;
  border-radius: 26px; box-shadow: var(--shadow-lift); border: 1px solid var(--border); display: block;
}

/* A sub-heading inside a section, above a grid. */
.grid-head { text-align: center; font-size: clamp(20px, 2.8vw, 26px); margin: 46px 0 8px; }
.grid-sub { color: var(--muted); text-align: center; max-width: 58ch; margin: 0 auto 30px; }
/* A phone capture is 0.46 wide-to-tall, so shown whole it occupies a third of its column and
   leaves the rest white — that was most of the page's dead space. Cropping to the top ~60% lets
   it FILL the column instead: same pixels, no letterboxing. Nothing informative lives in the
   part that goes (the tab bar, and whatever trailing rows the seeded day hadn't filled). */
.feature-media.has-shot img {
  width: 100%; max-width: 372px; display: block;
  aspect-ratio: 644 / 840; object-fit: cover; object-position: top center;
  border-radius: 26px; box-shadow: var(--shadow-lift);
  border: 1px solid var(--border);
}

/* ---- 3-up screenshot grid --------------------------------------------------------------------
   The screenshots are the content here, so each fills its column instead of floating small inside
   it — that gap between a 250px image and a 340px column was most of the page's dead space. */
.shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 26px 0 8px; }
@media (max-width: 820px) { .shot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .shot-grid { grid-template-columns: 1fr; max-width: 330px; margin-inline: auto; } }
.shot-card { margin: 0; text-align: center; }
.shot-card img {
  width: 100%; border-radius: 22px; box-shadow: var(--shadow); display: block;
  margin: 0 auto 16px; border: 1px solid var(--border);
  /* Crop to the top of the screen: the tab bar and trailing empty rows carry no information at
     this size, and cropping is what lets the image fill its column without going enormous. */
  aspect-ratio: 644 / 720; object-fit: cover; object-position: top center;
}
/* A detail page puts its nav bar and "LATEST" readout at the top and the CHART below, so a
   top-anchored crop shows the header and cuts the graph in half — which is exactly what made
   these read as broken. Framing on the chart costs the title, which the caption already says. */
.shot-card img.focus-chart { aspect-ratio: 644 / 620; object-position: center 30%; }
.shot-card h3 { font-size: 18px; margin: 0 0 6px; }
.shot-card p { color: var(--muted); font-size: 14.5px; margin: 0 auto; max-width: 32ch; }

/* ---- 2-up cards (one real shot beside one drawn card) ---- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 30px; }
@media (max-width: 820px) { .duo { grid-template-columns: 1fr; } }
.duo-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px; margin: 0;
}
.duo-card h3 { font-size: 20px; margin: 0 0 8px; }
.duo-card p { color: var(--muted); margin: 0; }
.duo-card.has-shot { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.duo-card.has-shot img {
  width: 100%; display: block; border-bottom: 1px solid var(--border);
  aspect-ratio: 644 / 460; object-fit: cover; object-position: top center;
}
.duo-card.has-shot figcaption { padding: 24px 26px 26px; }
/* The Live Activity card carries no screenshot — a Lock Screen card cannot be captured off a
   simulator (scripts/README-screenshots.md), and drawing a fake one would be a picture of
   something the parent has not been shown. So it stays type + mark, and reads as a card on purpose. */
.duo-card.mock { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 220px; }
.duo-card.mock .tile.lg { margin-bottom: 20px; }
.duo-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.duo-chip {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 13px; font-size: 13.5px; font-family: var(--font-rounded); font-weight: 600;
  color: var(--muted);
}

/* ---- Pricing ---- */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 880px; margin: 0 auto; }
@media (max-width: 780px) { .price-grid { grid-template-columns: 1fr; } }
.price-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow);
}
.price-card.highlight { border-color: color-mix(in srgb, var(--k-bottle) 45%, var(--border)); }
.price-card .tag {
  font-family: var(--font-rounded); font-weight: 700; font-size: 14px; color: var(--accent-ink);
  display: flex; align-items: center; gap: 6px;
}
.price-card.highlight .tag { color: color-mix(in srgb, var(--brand-teal) 68%, var(--text)); }
/* The brand crown is FILLED and drawn in the brand teal EXACTLY — never the page accent, never a
   contrast-adjusted variant. The app learned this the hard way: a "readable" transform dropped the
   mark to a muted sage, so the crown on one screen and the crown three taps away were visibly
   different colours. It is decorative, always sits beside its own label, and never carries meaning
   on its own. */
.crown-mark { width: 20px; height: 20px; fill: var(--brand-teal); stroke: none; flex: none; }
.price-card .amount { font-family: var(--font-rounded); font-size: 34px; font-weight: 800; margin: 6px 0 4px; }
.price-card .amount small { font-size: 15px; color: var(--muted); font-weight: 600; }
.price-card ul { list-style: none; padding: 0; margin: 16px 0 0; }
.price-card li { padding: 7px 0 7px 26px; position: relative; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.price-note { color: var(--muted); font-size: 13.5px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }

/* ---- Premium features --------------------------------------------------------------------
   Sleep is the lead feature and spans the section. Caregivers and medication reminders each get
   one equal card below it; the two medication screenshots are deliberately kept inside that one
   feature so reminder configuration does not outweigh the other paid benefits. */
.premium-features {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; margin-top: 34px;
}
.premium-feature {
  margin: 0; overflow: hidden; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.premium-feature-sleep {
  grid-column: 1 / -1; padding: 28px;
  display: grid; grid-template-columns: .72fr 1.28fr; gap: 30px; align-items: center;
}
.premium-feature figcaption { padding: 22px 24px 24px; }
.premium-feature-sleep figcaption { padding: 0; }
.premium-feature h3 { font-size: 21px; margin: 0 0 8px; }
.premium-feature figcaption > p:not(.kicker) { color: var(--muted); font-size: 14.5px; margin: 0; }
.premium-feature .feature-note { margin-top: 12px !important; font-size: 13px !important; }
.premium-sleep-visuals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.premium-crop {
  position: relative; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 16px;
}
.premium-crop img { width: 100%; height: 100%; display: block; object-fit: cover; }
.premium-crop-day, .premium-crop-windows { aspect-ratio: 4 / 3; }
.premium-crop-day img { object-position: center 9%; }
.premium-crop-windows img { object-position: center 60%; }
.premium-feature-visual { border-bottom: 1px solid var(--border); }
.caregiver-panel {
  aspect-ratio: 2 / 1; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 10%, var(--surface));
}
/* An overlapping row of caregiver initials — the same shape the app draws beside each entry to
   say who logged it. */
.avatars { display: flex; align-items: center; }
.avatars span {
  width: 54px; height: 54px; border-radius: 50%; margin-left: -14px;
  display: grid; place-items: center;
  font-family: var(--font-rounded); font-weight: 700; font-size: 20px;
  border: 3px solid var(--surface);
  background: color-mix(in srgb, var(--ac) 22%, var(--surface));
  color: color-mix(in srgb, var(--ac) 72%, var(--text));
}
.avatars span:first-child { margin-left: 0; }
.avatars span.more { font-size: 22px; }
.medication-visuals {
  aspect-ratio: 2 / 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  min-height: 0; overflow: hidden;
  padding: 14px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.medication-visuals .premium-crop { min-height: 0; border-radius: 12px; }
.premium-crop-med-list img { object-position: center 24%; }
.premium-crop-med-clock img { object-position: center 78%; }
@media (max-width: 860px) {
  .premium-feature-sleep { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .premium-features { grid-template-columns: 1fr; }
  .premium-feature-sleep { grid-column: auto; padding: 22px; }
  .premium-sleep-visuals { grid-template-columns: 1fr; }
  .premium-crop-day, .premium-crop-windows { aspect-ratio: 16 / 10; }
}

/* ---- iPad -------------------------------------------------------------------------------
   This is a platform-layout story, not another feature inventory: two landscape screens show
   the permanent rail and the extra context the iPad keeps visible. */
.ipad-heading .kicker { text-align: center; }
.ipad-showcase {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px; align-items: stretch;
}
.ipad-card {
  margin: 0; overflow: hidden; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ipad-frame {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.ipad-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ipad-card figcaption { padding: 22px 24px 24px; }
.ipad-card h3 { font-size: 20px; margin: 0 0 8px; }
.ipad-card figcaption p { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 780px) {
  .ipad-showcase { grid-template-columns: 1fr; }
}

/* ---- "Still free" strip ---- */
.free-note {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 30px 34px; margin-top: 40px; overflow: hidden;
}
@media (max-width: 820px) { .free-note { grid-template-columns: 1fr; text-align: center; } }
.free-note h3 { font-size: 21px; margin: 0 0 8px; }
.free-note p { color: var(--muted); margin: 0; }
.free-note img {
  width: 100%; max-width: 300px; justify-self: center; display: block;
  border-radius: 18px; border: 1px solid var(--border); box-shadow: var(--shadow);
  aspect-ratio: 644 / 500; object-fit: cover; object-position: top center;
}
/* Alternate sides so two of these in a row don't read as one repeated block. */
.free-note:nth-of-type(even) .free-note-copy { order: 2; }
.free-note:nth-of-type(even) { grid-template-columns: .85fr 1.15fr; }
@media (max-width: 820px) {
  .free-note:nth-of-type(even) .free-note-copy { order: 0; }
  .free-note:nth-of-type(even) { grid-template-columns: 1fr; }
}

/* ---- "And more" grid ---- */
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; padding: 0; list-style: none; }
@media (max-width: 820px) { .more-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .more-grid { grid-template-columns: 1fr; } }
.more-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; }
.more-item > .tile { display: grid; place-items: center; }
.more-item b { display: block; font-family: var(--font-rounded); margin-top: 12px; font-size: 15.5px; }
.more-item span { color: var(--muted); font-size: 13.5px; display: block; line-height: 1.45; }

/* ---- Callout (switching / privacy) ---- */
.callout {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow); max-width: 820px; margin: 0 auto;
}
.callout h2 { margin-top: 0; font-size: clamp(23px, 3.2vw, 30px); }
.callout p { margin: 0 0 12px; }
.callout .steps { color: var(--muted); font-size: 15px; margin-top: 16px; }
.privacy-callout .tile.lg { margin-bottom: 16px; }
.fact-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.fact { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 8px 15px; font-size: 14px; font-family: var(--font-rounded); }
/* Fine-print (e.g. the Huckleberry non-affiliation note). The .callout p rule outranks a bare
   .disclaimer on specificity, so the spacing has to be set at that depth or it collapses. */
.disclaimer { color: var(--muted); font-size: 12px; line-height: 1.5; max-width: 62ch; }
.callout .disclaimer { margin-top: 20px; }

/* ---- FAQ ---- */
.faq { max-width: 760px; margin: 0 auto; }
details.qa {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 20px; margin-bottom: 12px;
}
details.qa summary {
  cursor: pointer; font-family: var(--font-rounded); font-weight: 600; padding: 14px 0;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: "+"; color: var(--muted); font-size: 22px; flex: none; }
details.qa[open] summary::after { content: "–"; }
details.qa p { color: var(--muted); margin: 0 0 16px; }
details.qa ul, details.qa ol { color: var(--muted); margin: 0 0 16px; padding-left: 22px; }
details.qa li { margin: 5px 0; }
details.qa strong { color: var(--text); }
.faq-more { text-align: center; margin-top: 24px; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0; color: var(--muted); }
.footer-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); font-size: 15px; }
.footer-note { font-size: 14px; margin-top: 18px; }

/* ---- Legal / support prose (rendered from markdown or hand-written) ---- */
.page-head { padding: 56px 0 8px; }
.page-head h1 { font-size: clamp(30px, 5vw, 42px); margin: 0; }
.page-head .meta { color: var(--muted); margin-top: 8px; font-size: 15px; }

.prose { padding: 20px 0 64px; font-size: 16.5px; }
.prose h1 { display: none; } /* the page-head already shows the title */
.prose h2 { font-size: 22px; margin: 34px 0 10px; }
.prose h3 { font-size: 18px; margin: 22px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose strong { color: var(--text); }
.prose a { word-break: break-word; }
.prose .loading { color: var(--muted); }

.disclaimer-banner {
  background: color-mix(in srgb, var(--amber) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--border));
  border-radius: var(--radius-sm); padding: 14px 18px; margin: 20px 0; font-size: 15px;
}

/* ---- Crop utilities -------------------------------------------------------------------------
   Declared LAST on purpose. Every framed image already sets object-position in its own component
   rule at equal specificity, so a utility defined earlier silently loses the cascade — which is
   exactly how the medication card kept cropping away the dose clock its caption promises. */
img.focus-lower { object-position: center 82%; }
.free-note img.focus-lower { object-position: center 26%; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: var(--surface); padding: 8px 14px; border-radius: 8px; z-index: 50; }


/* ---- The tracked-type roster ------------------------------------------------------------------
   Moved off the hero, where it competed with the platform story, and down beside the day view
   where "what can this actually record?" is the question a reader has. */
.kinds-strip {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 30px 34px 26px; margin: 46px 0 8px;
}
.kinds-head { text-align: center; max-width: 56ch; margin: 0 auto 24px; }
.kinds-head h3 { font-size: clamp(20px, 2.6vw, 25px); margin: 0 0 8px; }
.kinds-head p { color: var(--muted); margin: 0; }
.kinds {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 12px;
}
@media (max-width: 860px) { .kinds { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .kinds { grid-template-columns: repeat(3, 1fr); } }
.kinds li {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  font-family: var(--font-rounded); font-weight: 600; font-size: 13.5px;
}

/* ---- Per-image crop windows --------------------------------------------------------------------
   Each capture is a whole phone screen, and the part worth showing sits at a different height in
   each one — a chart under a nav bar, a detail form halfway down, a dose clock near the bottom.
   One shared crop cut every one of them somewhere. `--ar` and `--op` let a card frame its own
   subject; the defaults keep the old top-anchored behaviour for anything that doesn't set them. */
.shot-card img, .free-note img, .duo-card.has-shot img {
  aspect-ratio: var(--ar, 644 / 720);
  object-position: var(--op, top center);
}