/*
 * Happy Charlie design tokens — source of truth for mockups.
 *
 * Port 1:1 to src/packages/design-tokens (tokens.ts) when M0 creates the workspace:
 *   --hc-color-*   -> tokens.color.*      (light + dark objects)
 *   --hc-space-*   -> tokens.space.*      (numbers, px / dp)
 *   --hc-radius-*  -> tokens.radius.*
 *   --hc-font-*    -> tokens.type.*
 * Web consumes them as CSS variables; React Native consumes the same TS object
 * through a ThemeProvider. Never hard-code a color or size in a component.
 *
 * Accessibility (MVP-28, MVP §2.F): every ink/surface pair below is >= 4.5:1.
 * Category colors are always paired with an icon and a text label (never color alone).
 */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Neutrals — warm paper, not clinical white */
  --hc-color-bg: #F2EFE9;
  /* The page background for a boy (blue) or a girl (blush), chosen on the child's profile */
  --hc-color-bg-boy: #EAEFF4;
  --hc-color-bg-girl: #F5EFF0;
  --hc-color-surface: #FFFFFF;
  --hc-color-surface-sunken: #E9E5DD;
  --hc-color-line: #E4DFD6;
  --hc-color-line-strong: #CFC8BC;
  --hc-color-control: #857E71;
  --hc-color-ink: #1C1F2A;
  --hc-color-ink-muted: #585C6C;
  --hc-color-ink-faint: #606474;

  /* Brand / primary action */
  --hc-color-brand: #4449C7;
  --hc-color-brand-hover: #373BB0;
  --hc-color-on-brand: #FFFFFF;
  --hc-color-brand-soft: #ECECFF;
  --hc-color-focus: #4449C7;

  /* Activity categories. Each strong value carries white text (the quick-log fill) and sits on its
     soft tint at 4.5:1 or more; in dark themes the strong value carries --hc-color-on-brand.
     Health (temperature, medication, health notes) shares one hue, and no category uses red,
     orange or the status greens for a health value (README §6, medical boundary).
     -tile is a quick-log button at rest: the strong value at 30% over the surface in both
     themes (owner decision, October 8, 2026, after feedback that the buttons were too tame), edged with the strong value and labelled in -tile-ink at 4.5:1 or more; a button
     whose timer runs is filled with the strong value instead (owner decision, October 3, 2026). */
  --hc-color-nurse: #A35166;
  --hc-color-nurse-soft: #FFEDF2;
  --hc-color-nurse-tile: #FF7FA0;
  --hc-color-nurse-tile-ink: #5C2E3A;
  --hc-color-bottle: #B04A3F;
  --hc-color-bottle-soft: #FFEAE8;
  --hc-color-bottle-tile: #FF6B5B;
  --hc-color-bottle-tile-ink: #52221D;
  --hc-color-pump: #715DB2;
  --hc-color-pump-soft: #F2EEFF;
  --hc-color-pump-tile: #A185FF;
  --hc-color-pump-tile-ink: #32294F;
  --hc-color-sleep: #1E7481;
  --hc-color-sleep-soft: #E3F9FC;
  --hc-color-sleep-tile: #36D2EA;
  --hc-color-sleep-tile-ink: #16545E;
  --hc-color-diaper: #7D671A;
  --hc-color-diaper-soft: #FEF8E2;
  --hc-color-diaper-tile: #F6CA32;
  --hc-color-diaper-tile-ink: #675515;
  --hc-color-weight: #5469A0;
  --hc-color-weight-soft: #EEF3FF;
  --hc-color-weight-tile: #85A7FE;
  --hc-color-weight-tile-ink: #303C5B;
  --hc-color-tummy: #507427;
  --hc-color-tummy-soft: #EFF8E5;
  --hc-color-tummy-tile: #8CCB45;
  --hc-color-tummy-tile-ink: #374F1B;
  --hc-color-solids: #A84973;
  --hc-color-solids-soft: #FBE9F1;
  --hc-color-solids-tile: #E0619A;
  --hc-color-solids-tile-ink: #3C1A2A;
  --hc-color-health: #9350A0;
  --hc-color-health-soft: #F7EAF9;
  --hc-color-health-tile: #C46BD6;
  --hc-color-health-tile-ink: #351D3A;

  /* Chart colours (Insights). A dirty diaper keeps its own brown, which no feed shares, and
     daytime is sun yellow beside night's sleep blue (owner decision, October 6, 2026). */
  --hc-color-dirty: #8A5A2B;
  --hc-color-day: #E0A100;
  --hc-color-day-soft: #FFF4CC;

  /* Status */
  --hc-color-ok: #1F7350;
  --hc-color-ok-soft: #E1F3EA;
  --hc-color-warn: #8F5200;
  --hc-color-warn-soft: #FFF0D4;
  --hc-color-danger: #B8322A;
  --hc-color-on-danger: #FFFFFF;
  --hc-color-danger-soft: #FCE6E3;
  --hc-color-info: #2E5FA8;
  --hc-color-info-soft: #E5EEFB;

  /* Caregiver identity tints (initials avatars; not category colors).
     Each is used as the initial's ink over a 16% tint of itself on --hc-color-surface, so every
     value here is dark enough for that pair to clear 4.5:1 (MVP-28): 5.0, 5.1, 4.9, 4.9, 4.7. */
  --hc-color-person-1: #35609F;
  --hc-color-person-2: #256A59;
  --hc-color-person-3: #8E5329;
  --hc-color-person-4: #7A4F9A;
  --hc-color-person-5: #A2445A;

  --hc-shadow-1: 0 1px 2px rgba(28, 31, 42, .05), 0 4px 14px rgba(28, 31, 42, .05);
  --hc-shadow-2: 0 2px 6px rgba(28, 31, 42, .08), 0 18px 40px rgba(28, 31, 42, .12);
  --hc-hatch: repeating-linear-gradient(135deg, transparent 0 5px, rgba(28, 31, 42, .08) 5px 7px);

  /* Child profile photo brightness (MVP-34); dark themes dim it */
  --hc-photo-brightness: 1;

  /* Selected segment of a SegmentedControl */
  --hc-color-seg-selected: var(--hc-color-surface);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --hc-color-bg: #0E1016;
    --hc-color-bg-boy: #0B1220;
    --hc-color-bg-girl: #150F15;
    --hc-color-surface: #232838;
    --hc-color-surface-sunken: #171A23;
    --hc-color-line: #3A4157;
    --hc-color-line-strong: #525A73;
    --hc-color-control: #737C97;
    --hc-color-ink: #ECEDF2;
    --hc-color-ink-muted: #B8BCCA;
    --hc-color-ink-faint: #A2A6B7;
    --hc-color-brand: #A3A6FF;
    --hc-color-brand-hover: #B8BAFF;
    --hc-color-on-brand: #14163D;
    --hc-color-brand-soft: #30357A;
    --hc-color-focus: #A3A6FF;
    --hc-color-nurse: #FF7FA0;
    --hc-color-nurse-soft: #4D2D3A;
    --hc-color-nurse-tile: #E0708D;
    --hc-color-nurse-tile-ink: #412029;
    --hc-color-bottle: #FF6E5E;
    --hc-color-bottle-soft: #4D2828;
    --hc-color-bottle-tile: #E05E50;
    --hc-color-bottle-tile-ink: #341612;
    --hc-color-pump: #A58AFF;
    --hc-color-pump-soft: #342E53;
    --hc-color-pump-tile: #8E75E0;
    --hc-color-pump-tile-ink: #1F1A31;
    --hc-color-sleep: #36D2EA;
    --hc-color-sleep-soft: #18424D;
    --hc-color-sleep-tile: #30B9CE;
    --hc-color-sleep-tile-ink: #11434A;
    --hc-color-diaper: #F6CA32;
    --hc-color-diaper-soft: #4A401D;
    --hc-color-diaper-tile: #D8B22C;
    --hc-color-diaper-tile-ink: #544511;
    --hc-color-weight: #85A7FE;
    --hc-color-weight-soft: #2D3752;
    --hc-color-weight-tile: #7593E0;
    --hc-color-weight-tile-ink: #232C43;
    --hc-color-tummy: #8CCB45;
    --hc-color-tummy-soft: #2F4122;
    --hc-color-tummy-tile: #7BB33D;
    --hc-color-tummy-tile-ink: #2A3D15;
    --hc-color-solids: #E474A6;
    --hc-color-solids-soft: #452538;
    --hc-color-solids-tile: #C55588;
    --hc-color-solids-tile-ink: #180A10;
    --hc-color-health: #CA7BDB;
    --hc-color-health-soft: #3D2848;
    --hc-color-health-tile: #AC5EBC;
    --hc-color-health-tile-ink: #160C18;
    --hc-color-dirty: #C99A6E;
    --hc-color-day: #F5C842;
    --hc-color-day-soft: #3F3410;
    --hc-color-ok: #74D4A6;
    --hc-color-ok-soft: #173A27;
    --hc-color-warn: #F4BC63;
    --hc-color-warn-soft: #433214;
    --hc-color-danger: #FF9A90;
  --hc-color-on-danger: #2A0D0A;
    --hc-color-danger-soft: #4A221E;
    --hc-color-info: #93B8F2;
    --hc-color-info-soft: #1C3050;
    --hc-color-person-1: #8FB4EC;
    --hc-color-person-2: #7ACDB8;
    --hc-color-person-3: #E3AE80;
    --hc-color-person-4: #C6A2E6;
    --hc-color-person-5: #EE9DB0;
    --hc-shadow-1: none;
    --hc-shadow-2: 0 18px 40px rgba(0, 0, 0, .5);
    --hc-hatch: repeating-linear-gradient(135deg, transparent 0 5px, rgba(236, 237, 242, .10) 5px 7px);
    --hc-photo-brightness: .78;
    --hc-color-seg-selected: var(--hc-color-line-strong);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --hc-color-bg: #0E1016;
  --hc-color-bg-boy: #0B1220;
  --hc-color-bg-girl: #150F15;
  --hc-color-surface: #232838;
  --hc-color-surface-sunken: #171A23;
  --hc-color-line: #3A4157;
  --hc-color-line-strong: #525A73;
  --hc-color-control: #737C97;
  --hc-color-ink: #ECEDF2;
  --hc-color-ink-muted: #B8BCCA;
  --hc-color-ink-faint: #A2A6B7;
  --hc-color-brand: #A3A6FF;
  --hc-color-brand-hover: #B8BAFF;
  --hc-color-on-brand: #14163D;
  --hc-color-brand-soft: #30357A;
  --hc-color-focus: #A3A6FF;
  --hc-color-nurse: #FF7FA0;
  --hc-color-nurse-soft: #4D2D3A;
  --hc-color-nurse-tile: #E0708D;
  --hc-color-nurse-tile-ink: #412029;
  --hc-color-bottle: #FF6E5E;
  --hc-color-bottle-soft: #4D2828;
  --hc-color-bottle-tile: #E05E50;
  --hc-color-bottle-tile-ink: #341612;
  --hc-color-pump: #A58AFF;
  --hc-color-pump-soft: #342E53;
  --hc-color-pump-tile: #8E75E0;
  --hc-color-pump-tile-ink: #1F1A31;
  --hc-color-sleep: #36D2EA;
  --hc-color-sleep-soft: #18424D;
  --hc-color-sleep-tile: #30B9CE;
  --hc-color-sleep-tile-ink: #11434A;
  --hc-color-diaper: #F6CA32;
  --hc-color-diaper-soft: #4A401D;
  --hc-color-diaper-tile: #D8B22C;
  --hc-color-diaper-tile-ink: #544511;
  --hc-color-weight: #85A7FE;
  --hc-color-weight-soft: #2D3752;
  --hc-color-weight-tile: #7593E0;
  --hc-color-weight-tile-ink: #232C43;
  --hc-color-tummy: #8CCB45;
  --hc-color-tummy-soft: #2F4122;
  --hc-color-tummy-tile: #7BB33D;
  --hc-color-tummy-tile-ink: #2A3D15;
  --hc-color-solids: #E474A6;
  --hc-color-solids-soft: #452538;
  --hc-color-solids-tile: #C55588;
  --hc-color-solids-tile-ink: #180A10;
  --hc-color-health: #CA7BDB;
  --hc-color-health-soft: #3D2848;
  --hc-color-health-tile: #AC5EBC;
  --hc-color-health-tile-ink: #160C18;
  --hc-color-dirty: #C99A6E;
  --hc-color-day: #F5C842;
  --hc-color-day-soft: #3F3410;
  --hc-color-ok: #74D4A6;
  --hc-color-ok-soft: #173A27;
  --hc-color-warn: #F4BC63;
  --hc-color-warn-soft: #433214;
  --hc-color-danger: #FF9A90;
  --hc-color-on-danger: #2A0D0A;
  --hc-color-danger-soft: #4A221E;
  --hc-color-info: #93B8F2;
  --hc-color-info-soft: #1C3050;
  --hc-color-person-1: #8FB4EC;
  --hc-color-person-2: #7ACDB8;
  --hc-color-person-3: #E3AE80;
  --hc-color-person-4: #C6A2E6;
  --hc-color-person-5: #EE9DB0;
  --hc-shadow-1: none;
  --hc-shadow-2: 0 18px 40px rgba(0, 0, 0, .5);
  --hc-hatch: repeating-linear-gradient(135deg, transparent 0 5px, rgba(236, 237, 242, .10) 5px 7px);
  --hc-photo-brightness: .78; /* dims the child's profile photo at night (MVP-34) */
  --hc-color-seg-selected: var(--hc-color-line-strong);
}

:root {
  /* Spacing — 4-pt grid */
  --hc-space-1: 4px;
  --hc-space-2: 8px;
  --hc-space-3: 12px;
  --hc-space-4: 16px;
  --hc-space-5: 20px;
  --hc-space-6: 24px;
  --hc-space-8: 32px;
  --hc-space-10: 40px;

  /* Radii */
  --hc-radius-sm: 10px;
  --hc-radius-md: 16px;
  --hc-radius-lg: 22px;
  --hc-radius-xl: 28px;
  --hc-radius-pill: 999px;

  /* Touch targets (MVP §2.F: 44pt iOS / 48dp Android — use 48 everywhere) */
  --hc-target-min: 48px;
  --hc-target-primary: 56px;

  /* Type — Figtree, self-hosted in the apps (no third-party font requests in the tracker) */
  --hc-font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hc-font-display: 700 44px/48px var(--hc-font-family);   /* timers, hero elapsed time */
  --hc-font-title: 700 26px/32px var(--hc-font-family);
  --hc-font-heading: 650 19px/24px var(--hc-font-family);
  --hc-font-body: 450 16px/22px var(--hc-font-family);
  --hc-font-label: 600 14px/18px var(--hc-font-family);
  --hc-font-caption: 500 13px/17px var(--hc-font-family);
  --hc-font-micro: 600 11px/14px var(--hc-font-family);

  /* Motion — disabled under prefers-reduced-motion */
  --hc-motion-fast: 120ms;
  --hc-motion-base: 200ms;
  --hc-ease: cubic-bezier(.2, .7, .2, 1);
}

@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/Figtree_400Regular.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/Figtree_500Medium.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/Figtree_600SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/Figtree_700Bold.woff2') format('woff2'); }
/*
 * Happy Charlie public website (spec/1 - Public-website.md, Section 10). Built on the shared design
 * tokens, which come first in the same stylesheet. Phone first; no JavaScript; follows the device's
 * light or dark setting (SITE-26).
 */

/* Light-mode neutrals for the public site only: a true gray rather than the app's warm paper, so
   the site reads the same for every family. These follow the shared tokens, which still set the
   dark theme (its rule is more specific than :root). */
:root {
  --hc-color-bg: #F6F6F5;
  --hc-color-surface-sunken: #ECECEA;
  --hc-color-line: #E3E3E0;
  --hc-color-line-strong: #CDCDC9;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--hc-color-bg);
  color: var(--hc-color-ink);
  font: 450 17px/1.55 var(--hc-font-family);
  font-variant-numeric: tabular-nums;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--hc-color-focus); outline-offset: 3px; border-radius: 6px; }

.sprite { display: none; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--hc-color-surface); padding: 10px 16px; border-radius: var(--hc-radius-sm); z-index: 10; }
.skip:focus { left: 8px; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 12px; text-wrap: balance; }
h1 { font-size: clamp(36px, 7vw, 60px); font-weight: 700; }
h2 { font-size: clamp(28px, 4.5vw, 40px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 650; }
p { margin: 0 0 14px; }
.lede { font-size: clamp(18px, 2.4vw, 21px); color: var(--hc-color-ink-muted); max-width: 40ch; text-wrap: pretty; }
.fine { font-size: 14px; color: var(--hc-color-ink-muted); }
.eyebrow { font: var(--hc-font-label); text-transform: uppercase; letter-spacing: .08em; color: var(--hc-color-brand); margin-bottom: 10px; }
.text-link { color: var(--hc-color-brand); font-weight: 600; text-underline-offset: 3px; }

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

.site-header { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--hc-color-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hc-color-line); }
.header-row { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px/1 var(--hc-font-family); letter-spacing: -0.01em; }
.logo { width: 30px; height: 30px; }
.nav-wide { display: none; gap: 4px; margin-left: auto; }
.nav-wide a, .nav-menu nav a { text-decoration: none; color: var(--hc-color-ink-muted); font-weight: 600; font-size: 15px; padding: 10px 12px; border-radius: var(--hc-radius-pill); }
.nav-wide a:hover, .nav-menu nav a:hover { color: var(--hc-color-ink); background: var(--hc-color-surface-sunken); }
.nav-wide a[aria-current="page"], .nav-menu nav a[aria-current="page"] { color: var(--hc-color-ink); background: var(--hc-color-surface); }
.header-cta { margin-left: auto; }
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--hc-radius-pill); cursor: pointer; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary .ic { width: 24px; height: 24px; }
.nav-menu[open] summary { background: var(--hc-color-surface); }
.nav-menu nav { position: absolute; right: 0; top: 56px; display: grid; min-width: 220px; padding: 8px; background: var(--hc-color-surface); border: 1px solid var(--hc-color-line); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow-2); }
.nav-menu nav a { padding: 14px 16px; font-size: 17px; }

@media (min-width: 900px) {
  .nav-wide { display: flex; }
  .header-cta { margin-left: 8px; }
  .nav-menu { display: none; }
}
@media (max-width: 420px) {
  .header-cta { display: none; }
  .nav-menu { margin-left: auto; }
}

/* ----------------------------------------------------------------- buttons */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--hc-target-primary); padding: 0 24px; border-radius: var(--hc-radius-pill); font: 650 17px/1 var(--hc-font-family); text-decoration: none; border: 0; cursor: pointer; transition: background var(--hc-motion-fast) var(--hc-ease); }
.btn-primary { background: var(--hc-color-brand); color: var(--hc-color-on-brand); }
.btn-primary:hover { background: var(--hc-color-brand-hover); }
.btn-quiet { background: var(--hc-color-surface); color: var(--hc-color-ink); border: 1px solid var(--hc-color-line-strong); }
.btn-quiet:hover { background: var(--hc-color-surface-sunken); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 15px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-note { margin-top: 14px; font-size: 15px; color: var(--hc-color-ink-muted); }

/* ---------------------------------------------------------------- sections */

.section { padding: 72px 0; }
.section-tight { padding: 40px 0; }
.section-alt { background: var(--hc-color-surface-sunken); }
.section-head { max-width: 640px; margin-bottom: 36px; }
.section-head .lede { max-width: none; }

.hero { padding: 48px 0 64px; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero h1 { max-width: 13ch; }
.page-hero { padding: 56px 0 24px; }
.page-hero h1 { max-width: 18ch; }

@media (min-width: 900px) {
  .hero { padding: 80px 0 96px; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .split.reverse > :first-child { order: 2; }
}
.split > * + * { margin-top: 32px; }
@media (min-width: 900px) { .split > * + * { margin-top: 0; } }

.card { background: var(--hc-color-surface); border: 1px solid var(--hc-color-line); border-radius: var(--hc-radius-lg); padding: 24px; box-shadow: var(--hc-shadow-1); }

.benefits { display: grid; gap: 16px; counter-reset: benefit; }
@media (min-width: 760px) { .benefits { grid-template-columns: repeat(3, 1fr); } }
.benefit { position: relative; padding-top: 64px; }
.benefit::before { counter-increment: benefit; content: counter(benefit); position: absolute; top: 24px; left: 24px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--hc-color-brand-soft); color: var(--hc-color-brand); font-weight: 700; font-size: 15px; }
.benefit p { color: var(--hc-color-ink-muted); margin: 0; }

.ticks { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .ic { color: var(--hc-color-brand); margin-top: 3px; }

.grid-2, .grid-3 { display: grid; gap: 16px; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.feature h3 { display: flex; align-items: center; gap: 10px; }
.feature p, .feature ul { color: var(--hc-color-ink-muted); margin: 0; }
.feature ul { padding-left: 20px; margin-top: 6px; }
.feature .ic { color: var(--hc-color-brand); }

/* Activity tiles: category colour marks the activity, never a value (design README §4). */
.lanes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .lanes { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .lanes { grid-template-columns: repeat(6, 1fr); } }
.lane { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--hc-radius-md); background: var(--tile); color: var(--tile-ink); border: 1.5px solid color-mix(in srgb, var(--strong) 40%, transparent); font-weight: 650; }
.lane .ic { width: 28px; height: 28px; }
.lane small { font-weight: 500; font-size: 14px; opacity: .9; }
.l-nurse { --tile: var(--hc-color-nurse-tile); --tile-ink: var(--hc-color-nurse-tile-ink); --strong: var(--hc-color-nurse); }
.l-bottle { --tile: var(--hc-color-bottle-tile); --tile-ink: var(--hc-color-bottle-tile-ink); --strong: var(--hc-color-bottle); }
.l-pump { --tile: var(--hc-color-pump-tile); --tile-ink: var(--hc-color-pump-tile-ink); --strong: var(--hc-color-pump); }
.l-solids { --tile: var(--hc-color-solids-tile); --tile-ink: var(--hc-color-solids-tile-ink); --strong: var(--hc-color-solids); }
.l-sleep { --tile: var(--hc-color-sleep-tile); --tile-ink: var(--hc-color-sleep-tile-ink); --strong: var(--hc-color-sleep); }
.l-diaper { --tile: var(--hc-color-diaper-tile); --tile-ink: var(--hc-color-diaper-tile-ink); --strong: var(--hc-color-diaper); }
.l-weight { --tile: var(--hc-color-weight-tile); --tile-ink: var(--hc-color-weight-tile-ink); --strong: var(--hc-color-weight); }
.l-tummy { --tile: var(--hc-color-tummy-tile); --tile-ink: var(--hc-color-tummy-tile-ink); --strong: var(--hc-color-tummy); }
.l-health { --tile: var(--hc-color-health-tile); --tile-ink: var(--hc-color-health-tile-ink); --strong: var(--hc-color-health); }

.lane-block { border-left: 4px solid var(--strong); }
.lane-block h3 .ic { color: var(--strong); }

/* ----------------------------------------------------------- phone mock-ups */

.phone { width: min(340px, 100%); margin: 0 auto; padding: 14px; border-radius: 44px; background: var(--hc-color-ink); box-shadow: var(--hc-shadow-2); }
.screen { border-radius: 32px; background: var(--hc-color-bg); padding: 22px 16px 18px; min-height: 520px; display: flex; flex-direction: column; gap: 12px; color: var(--hc-color-ink); font-size: 15px; }
.screen-top { display: flex; align-items: center; justify-content: space-between; font: var(--hc-font-label); color: var(--hc-color-ink-muted); }
.child { display: flex; align-items: center; gap: 10px; font: var(--hc-font-heading); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--hc-font-family); background: color-mix(in srgb, var(--who, var(--hc-color-brand)) 16%, var(--hc-color-surface)); color: var(--who, var(--hc-color-brand)); flex: none; }
.p1 { --who: var(--hc-color-person-1); } .p2 { --who: var(--hc-color-person-2); } .p3 { --who: var(--hc-color-person-3); } .p4 { --who: var(--hc-color-person-4); }
.say { align-self: flex-end; max-width: 85%; background: var(--hc-color-brand); color: var(--hc-color-on-brand); padding: 12px 16px; border-radius: 20px 20px 6px 20px; font-weight: 600; }
.mini { background: var(--hc-color-surface); border: 1px solid var(--hc-color-line); border-radius: var(--hc-radius-md); padding: 14px; }
.mini-row { display: flex; align-items: center; gap: 12px; }
.mini-row + .mini-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hc-color-line); }
.mini-row .meta { color: var(--hc-color-ink-muted); font-size: 13px; }
.mini-row .grow { flex: 1; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--hc-radius-pill); font: var(--hc-font-label); background: var(--hc-color-surface-sunken); color: var(--hc-color-ink); }
.dot { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--tile); color: var(--tile-ink); flex: none; }
.dot .ic { width: 20px; height: 20px; }
.dock { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dock .lane { padding: 10px 6px; align-items: center; font-size: 12px; gap: 6px; border-radius: 14px; }
.dock .lane .ic { width: 22px; height: 22px; }
.bar { height: 10px; border-radius: 99px; background: var(--hc-color-surface-sunken); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--hc-color-sleep); border-radius: 99px; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 120px; }
.week span { background: var(--hc-color-sleep); border-radius: 6px 6px 2px 2px; }
.week span.none { background: var(--hc-hatch); border: 1px dashed var(--hc-color-line-strong); }
.week-labels { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: 12px; color: var(--hc-color-ink-muted); }

/* ------------------------------------------------------------------- facts */

.facts { display: grid; gap: 16px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact .ic { width: 28px; height: 28px; color: var(--hc-color-brand); margin-bottom: 12px; }
.fact p { color: var(--hc-color-ink-muted); margin: 0; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hc-color-line); vertical-align: top; }
th { font: var(--hc-font-label); color: var(--hc-color-ink-muted); }
td .ic { color: var(--hc-color-brand); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; margin-bottom: 14px; background: var(--hc-color-brand); color: var(--hc-color-on-brand); font-weight: 700; }
.steps p { color: var(--hc-color-ink-muted); margin: 0; }

.coming { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: var(--hc-radius-pill); background: var(--hc-color-surface-sunken); color: var(--hc-color-ink-muted); font: var(--hc-font-micro); text-transform: uppercase; letter-spacing: .06em; vertical-align: middle; }

.final { text-align: center; }
.final .lede { margin: 0 auto 24px; }
.final .cta-row { justify-content: center; }

/* --------------------------------------------------------------------- FAQ */

.faq-group + .faq-group { margin-top: 40px; }
.faq { background: var(--hc-color-surface); border: 1px solid var(--hc-color-line); border-radius: var(--hc-radius-md); margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 18px 20px; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--hc-color-brand); }
.faq[open] summary::after { content: "–"; }
.faq > div { padding: 0 20px 18px; color: var(--hc-color-ink-muted); }
.faq > div p:last-child { margin: 0; }

/* ------------------------------------------------------------------- legal */

.legal { padding-top: 32px; padding-bottom: 64px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.tabs a { text-decoration: none; padding: 10px 16px; border-radius: var(--hc-radius-pill); font-weight: 600; color: var(--hc-color-ink-muted); }
.tabs a[aria-current="page"] { background: var(--hc-color-surface); color: var(--hc-color-ink); }
.prose { background: var(--hc-color-surface); border: 1px solid var(--hc-color-line); border-radius: var(--hc-radius-lg); padding: clamp(20px, 4vw, 48px); overflow-wrap: anywhere; }
.prose h1 { font-size: clamp(30px, 5vw, 40px); }
.prose h2 { font-size: 24px; margin-top: 36px; }
.prose h3 { margin-top: 24px; }
.prose a { color: var(--hc-color-brand); }
.prose table { display: block; overflow-x: auto; font-size: 15px; }
.prose blockquote { margin: 0 0 20px; padding: 14px 18px; border-radius: var(--hc-radius-sm); background: var(--hc-color-warn-soft); }
.prose blockquote p:last-child { margin: 0; }
.prose code { font-size: .9em; }

/* -------------------------------------------------------------------- help */

.help-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 4px; }
.help-list a { display: block; padding: 12px 16px; border-radius: var(--hc-radius-sm); background: var(--hc-color-surface); border: 1px solid var(--hc-color-line); text-decoration: none; font-weight: 600; }
.help-article { padding-top: 32px; padding-bottom: 64px; }
.help-article .eyebrow { margin-bottom: 12px; }
.prose ol, .prose ul { padding-left: 1.4em; }
.prose li { margin-bottom: 6px; }

/* Help articles: numbered steps, the app's buttons as chips, a picture (owner request, October 5, 2026) */
.help-image { display: block; width: 100%; max-width: 360px; height: auto; border: 1px solid var(--hc-color-line); border-radius: var(--hc-radius-md); margin: 0 0 20px; }
.help-steps { list-style: none; counter-reset: help-step; padding-left: 0; }
.help-steps > li { counter-increment: help-step; position: relative; padding-left: 42px; min-height: 30px; margin-bottom: 10px; }
.help-steps > li::before { content: counter(help-step); position: absolute; left: 0; top: -1px; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background: var(--hc-color-brand-soft); color: var(--hc-color-brand); font-weight: 650; text-align: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid var(--hc-color-line); border-radius: var(--hc-radius-pill); background: var(--hc-color-surface); font-weight: 600; white-space: nowrap; }
.chip .ic { width: 15px; height: 15px; color: var(--hc-color-brand); }

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

.site-footer { border-top: 1px solid var(--hc-color-line); padding: 48px 0 32px; margin-top: 24px; }
.footer-cols { display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); margin-bottom: 32px; }
.footer-cols > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer-cols { grid-template-columns: 2fr 1fr 1fr 1fr; } .footer-cols > :first-child { grid-column: auto; } }
.footer-cols nav { display: grid; gap: 4px; align-content: start; }
.footer-cols h2 { font: var(--hc-font-label); color: var(--hc-color-ink-muted); margin-bottom: 6px; }
.footer-cols nav a { text-decoration: none; padding: 6px 0; overflow-wrap: anywhere; }
.footer-cols nav a:hover { text-decoration: underline; }
.footer-cols .brand { margin-bottom: 12px; }
.medical { padding: 14px 16px; border-radius: var(--hc-radius-sm); background: var(--hc-color-surface); border: 1px solid var(--hc-color-line); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Utilities (no inline styles: the content security policy blocks them). */
.more { margin-top: 24px; }
.week { margin-top: 18px; }
.week-labels { margin-top: 6px; }
.week-note { margin: 12px 0 0; }
.h55 { height: 55%; } .h58 { height: 58%; } .h60 { height: 60%; } .h66 { height: 66%; } .h70 { height: 70%; } .h74 { height: 74%; } .h100 { height: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grid-3 .say, .grid-2 .say { margin: 0; display: inline-block; }
.phone .cta-row .btn { flex: 1; }
.h3 { font-size: 20px; font-weight: 650; }

/* ------------------------------------------------------ product screenshots */
/* Real app screens from a synthetic family (SITE-08), framed as a phone or a browser window. */

.shot-phone { display: block; width: min(300px, 100%); margin: 0 auto; padding: 9px; border-radius: 42px; background: #1C1F2A; box-shadow: var(--hc-shadow-2); }
.shot-phone img { width: 100%; height: auto; border-radius: 33px; }
.shot-web { display: block; border-radius: 14px; overflow: hidden; background: var(--hc-color-surface); border: 1px solid var(--hc-color-line-strong); box-shadow: var(--hc-shadow-2); }
.shot-web img { width: 100%; height: auto; }
.shot-bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--hc-color-surface-sunken); border-bottom: 1px solid var(--hc-color-line); }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--hc-color-line-strong); }

/* A browser window with a phone overlapping its lower corner. */
.devices { position: relative; padding: 0 0 48px; }
.devices .shot-web { width: 100%; }
.devices .shot-phone { position: absolute; right: -8px; bottom: 0; width: 34%; min-width: 120px; padding: 6px; border-radius: 28px; }
.devices .shot-phone img { border-radius: 22px; }
@media (max-width: 899px) { .devices { margin-top: 8px; } }

/* A row of phone screens; scrolls sideways on narrow screens. */
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 24px; margin: 0 -4px; }
.gallery figure { margin: 0; scroll-snap-align: start; }
.gallery figcaption, .figure figcaption { margin-top: 16px; text-align: center; font-weight: 650; }
.gallery figcaption span, .figure figcaption span { display: block; font-weight: 450; font-size: 15px; color: var(--hc-color-ink-muted); }
.figure { margin: 0; }
.pair { display: grid; gap: 32px; align-items: end; }
@media (min-width: 760px) { .pair { grid-template-columns: 1fr 1.6fr; } .pair.even { grid-template-columns: 1fr 1fr; } }
.shot-crop { display: block; width: min(360px, 100%); margin: 0 auto; border-radius: 24px; overflow: hidden; border: 1px solid var(--hc-color-line-strong); box-shadow: var(--hc-shadow-2); }
.shot-crop .shot-phone { width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.shot-crop .shot-phone img { border-radius: 0; }
.signin-points { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.signin-points li { padding: 8px 14px; border-radius: var(--hc-radius-pill); background: var(--hc-color-surface); border: 1px solid var(--hc-color-line); font-weight: 600; font-size: 15px; }
@media (min-width: 760px) { .pair.signin { grid-template-columns: 1fr 1.3fr; max-width: 900px; align-items: center; } }