/* ============================================================================
   Cradle Web — design system
   Tokens transcribed from ~/cradle/src/lib/theme.ts (dusk + palette).
   Do not invent colors. If a value isn't here, it isn't in the app.
   ========================================================================= */

:root {
  /* dusk gradient — theme.ts `dusk.gradient` */
  --dusk-1: #A697D6;
  --dusk-2: #BFB6E6;
  --dusk-3: #F1D2DC;

  /* dusk ink */
  --plum:       #3B3068;
  --plum-soft:  #6A5F96;
  --plum-mute:  #9389B5;   /* DECORATIVE ONLY — 2.89:1 on glass. Never text. */
  --dusk-accent:#7563C2;   /* brand accent; 2.34:1 on the gradient — never text on sky */

  /* Accessible derivatives. The brand tokens above are transcribed from the
     app, where they sit on different grounds. On the web's gradient they fail
     WCAG AA, so text uses these instead. Same hue family, darker only.
     (This is the same fix the app made for duskAxis ticks: plumMute -> plumSoft.) */
  --accent-ink: #43317A;   /* 9.3:1 on glass, 5.16:1 on sky */
  --cta-ink:    #317C61;   /* white on this = 5.02:1; #3E9C7A was 3.36:1 */

  /* dusk glass */
  --glass:        rgba(255,255,255,0.40);
  --glass-strong: rgba(255,255,255,0.82);
  --glass-rim:    rgba(255,255,255,0.65);

  /* dusk data-viz fills */
  --sleep-night: #5E4DA8;
  --sleep-nap:   #B6A9E0;
  --feed-fill:   #8480C9;
  --diaper-fill: #B3A9C6;

  /* app palette (light) — for category coding, per feedback_dusk_keeps_category_colors */
  --cat-sleep:  #3D7AAB;
  --cat-feed:   #E07650;
  --cat-diaper: #D89E2C;
  --cat-solids: #C7679B;
  --cat-pump:   #8B6FB4;

  --cta:     #3E9C7A;
  --cta-text:#FFFFFF;
  --success: #3E9C7A;
  --warning: #E0A33D;
  --danger:  #D9594B;

  /* splash night-sky — theme.ts `palette.splash` */
  --night-top:    #06081A;
  --night-mid:    #10193A;
  --night-inner:  #1A2754;
  --night-bottom: #1E3A5C;
  --moon-from:    #FFF8DC;
  --moon-to:      #E8C475;
  --star:         #FFFCEC;

  /* radii + spacing — theme.ts `radii` / `spacing` */
  --r-sm: 8px;  --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --s-xs: 4px;  --s-sm: 8px;  --s-md: 12px; --s-lg: 16px; --s-xl: 24px; --s-xxl: 32px;

  --shadow-card:  0 3px 12px rgba(59,48,104,0.12);
  --shadow-lift:  0 12px 40px rgba(59,48,104,0.18);
  --shadow-deep:  0 28px 70px rgba(59,48,104,0.26);

  --maxw: 1140px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter,
          Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--plum);
  background: var(--dusk-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` rather than `hidden` — hidden turns body into a scroll container
     in some engines and kills the sticky nav. */
  overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1,h2,h3,h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.08; font-weight: 700; }
p { margin: 0; }

/* ------------------------------------------------------------- the page */
/* One continuous dusk wash top-to-bottom, the way the app's Reports tab
   reads: lavender at the crown, blush at the horizon. Fixed so cards feel
   like they float over one sky rather than each having its own. */
.sky {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 700px at 12% -8%,  rgba(255,255,255,0.55), transparent 62%),
    radial-gradient(900px 600px at 88% 6%,    rgba(255,255,255,0.30), transparent 60%),
    linear-gradient(168deg, var(--dusk-1) 0%, var(--dusk-2) 46%, var(--dusk-3) 100%);
}
.sky::after {
  /* very fine grain so the gradient doesn't band on wide displays */
  content: ""; position: absolute; inset: 0; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ----------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  background: rgba(255,255,255,0.34);
  border-bottom: 1px solid rgba(255,255,255,0.45);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -0.03em; }
.brand .mark { width: 30px; height: 30px; flex: none; }
.nav-links { display: flex; gap: 26px; margin-left: 10px; }
.nav-links a { font-size: 14.5px; font-weight: 500; color: var(--plum); transition: opacity .18s; opacity: .92; }
.nav-links a:hover { opacity: 1; }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--r-pill); padding: 12px 22px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  transition: transform .16s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--plum); color: #fff; box-shadow: 0 6px 20px rgba(59,48,104,0.28); }
.btn-primary:hover { background: #2E2553; box-shadow: 0 10px 28px rgba(59,48,104,0.34); }
.btn-ghost { background: rgba(255,255,255,0.55); color: var(--plum); border: 1px solid var(--glass-rim); }
.btn-ghost:hover { background: rgba(255,255,255,0.78); }
.btn-cta { background: var(--cta-ink); color: var(--cta-text); box-shadow: 0 6px 20px rgba(49,124,97,0.34); }
.btn-cta:hover { background: #2A6B53; }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ---------------------------------------------------------------- hero */
.hero { padding: 76px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 56px; align-items: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-ink);
  background: rgba(255,255,255,0.58); border: 1px solid var(--glass-rim);
  padding: 7px 14px; border-radius: var(--r-pill); margin-bottom: 22px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cta); }

h1.display {
  font-size: clamp(40px, 5.4vw, 66px);
  line-height: 1.03; letter-spacing: -0.035em; margin-bottom: 20px;
}
h1.display .soft { color: #544878; display: block; }  /* 3.9:1 on the hero sky; plumSoft was 2.99 */
.lede { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; color: var(--plum); max-width: 30em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { margin-top: 16px; font-size: 13.5px; color: var(--plum); }

/* store badges */
.stores { display: flex; gap: 10px; flex-wrap: wrap; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--plum); color: #fff; border-radius: 14px; padding: 10px 18px;
  box-shadow: 0 6px 20px rgba(59,48,104,0.26); transition: transform .16s, box-shadow .18s;
}
.store:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(59,48,104,0.32); }
.store svg { width: 22px; height: 22px; flex: none; }
.store span { display: block; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .72; line-height: 1.2; }
.store strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }

/* ---------------------------------------------------------- glass card */
.card {
  background: var(--glass-strong);
  border: 1px solid var(--glass-rim);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  box-shadow: var(--shadow-card);
}
.card-xl { border-radius: var(--r-xl); padding: 26px; }

/* --------------------------------------------------------- phone mock  */
.phone-stage { position: relative; display: flex; justify-content: center; }
.phone {
  position: relative; width: 300px; border-radius: 44px; padding: 11px;
  background: linear-gradient(160deg, #4A3F7A, #241C46);
  box-shadow: var(--shadow-deep), inset 0 0 0 1px rgba(255,255,255,0.16);
}
.phone-screen {
  border-radius: 34px; overflow: hidden; height: 604px; position: relative;
  background: linear-gradient(168deg, var(--dusk-1), var(--dusk-2) 48%, var(--dusk-3));
}
.phone-notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 26px; border-radius: var(--r-pill); background: #1B1436; z-index: 3;
}
.screen-pad { padding: 46px 16px 16px; display: flex; flex-direction: column; gap: 10px; }

.mini-card {
  background: var(--glass-strong); border: 1px solid var(--glass-rim);
  border-radius: 16px; padding: 12px 13px; box-shadow: 0 2px 8px rgba(59,48,104,0.10);
}
.mini-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plum-soft); }
.mini-value { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin-top: 2px; }
.mini-sub { font-size: 11px; color: var(--plum-soft); margin-top: 2px; }

/* score ring */
.ring-row { display: flex; align-items: center; gap: 14px; }
.ring { width: 78px; height: 78px; flex: none; }
.ring-track { fill: none; stroke: rgba(59,48,104,0.12); stroke-width: 8; }
.ring-fill  { fill: none; stroke: var(--sleep-night); stroke-width: 8; stroke-linecap: round;
              transform: rotate(-90deg); transform-origin: 50% 50%; }

/* Floating callouts. z-index 4 puts them ABOVE the device — the phone is
   painted later in the DOM and was otherwise clipping them. */
.float {
  position: absolute; z-index: 4;
  background: var(--glass-strong); border: 1px solid var(--glass-rim);
  border-radius: 16px; padding: 11px 14px; box-shadow: var(--shadow-lift);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12.5px; font-weight: 600; line-height: 1.25;
  display: flex; align-items: center; gap: 9px; width: max-content; max-width: 200px;
  animation: bob 6s ease-in-out infinite;
}
.float small { display: block; font-size: 10.5px; font-weight: 500; color: var(--plum-soft); margin-top: 2px; }
.float .pip { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.float-a { top: 128px;    left: -54px;  animation-delay: -1s; }
.float-b { bottom: 128px; right: -46px; animation-delay: -3.5s; }
/* Pull the callouts inboard before they can push past the viewport on
   narrower desktops (wrap is capped at 1140, so the gutter runs out first). */
@media (max-width: 1320px) {
  .float-a { left: -12px; }
  .float-b { right: -12px; }
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }

/* ------------------------------------------------------------- section */
section { padding: 74px 0; }
.sec-head { max-width: 34em; margin-bottom: 40px; }
.sec-kicker {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 14px;
}
h2 { font-size: clamp(29px, 3.4vw, 42px); letter-spacing: -0.032em; margin-bottom: 14px; }
.sec-sub { font-size: 17px; line-height: 1.55; color: var(--plum); }

/* ------------------------------------------------------------- pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar { padding: 26px; border-radius: var(--r-xl); }
.pillar .icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 18px; background: rgba(117,99,194,0.14); color: var(--dusk-accent);
}
.pillar h3 { font-size: 19.5px; margin-bottom: 9px; letter-spacing: -0.025em; }
.pillar p { font-size: 14.8px; line-height: 1.6; color: var(--plum-soft); }

/* ----------------------------------------------------- reports feature */
.reports-panel {
  border-radius: var(--r-xl); padding: 28px;
  background: var(--glass-strong); border: 1px solid var(--glass-rim);
  box-shadow: var(--shadow-lift);
}
.panel-chrome { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.panel-chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(59,48,104,0.16); }
.panel-chrome .url {
  margin-left: 10px; flex: 1; height: 28px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.7); border: 1px solid rgba(59,48,104,0.10);
  display: flex; align-items: center; padding: 0 14px;
  font-size: 11.5px; color: var(--plum-soft); font-weight: 500;
}
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.dash-card {
  background: rgba(255,255,255,0.66); border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--r-lg); padding: 16px; box-shadow: 0 2px 8px rgba(59,48,104,0.07);
}
.dash-card h4 { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plum-soft); margin-bottom: 10px; }
.stat { font-size: 30px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.stat-sub { font-size: 12.5px; color: var(--plum-soft); margin-top: 6px; }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); }
.delta-up { background: rgba(62,156,122,0.15); color: #2C7357; }
.delta-flat { background: rgba(59,48,104,0.10); color: var(--plum-soft); }

.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.legend span { font-size: 11.5px; color: var(--plum-soft); font-weight: 500; display: inline-flex; align-items: center; }

/* ------------------------------------------------------------ portal   */
.split { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 52px; align-items: center; }
.checklist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--plum); }
.checklist svg { width: 21px; height: 21px; flex: none; margin-top: 1px; color: var(--cta); }
.checklist b { color: var(--plum); font-weight: 600; }

/* ------------------------------------------------------------- science */
.sci-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.sci-note {
  margin-top: 22px; font-size: 13.5px; line-height: 1.6; color: var(--plum);
  background: rgba(255,255,255,0.5); border: 1px solid var(--glass-rim);
  border-radius: var(--r-md); padding: 13px 16px;
}
.sci-note a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.ladder { display: grid; gap: 11px; }
.lad-row { display: grid; grid-template-columns: 74px 1fr 88px; align-items: center; gap: 12px; }
.lad-age { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.lad-track { height: 26px; border-radius: 8px; background: rgba(59,48,104,0.07); position: relative; overflow: hidden; }
.lad-bar {
  position: absolute; top: 0; bottom: 0; border-radius: 8px;
  background: linear-gradient(90deg, var(--sleep-nap), var(--sleep-night));
}
.lad-val { font-size: 12.5px; font-weight: 600; color: var(--plum-soft); text-align: right; font-variant-numeric: tabular-nums; }

/* The ladder has as many windows as the age has — five at 4 months, three at
   14. Never hard-code the column count: a fixed repeat(4) wrapped the fifth
   window onto its own row and the chart read as broken. Auto-flow column with
   minmax(0,1fr) tracks lays out however many the data hands us, and minmax's
   0 floor is what lets narrow columns shrink instead of overflowing. */
.ramp { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        gap: 9px; margin-top: 8px; align-items: end; }
/* Bars grow off a shared floor, so the ramp reads as a staircase. The label
   is reserved two lines high — otherwise a column whose caption wraps sits
   lower than its neighbours and the baseline visibly staggers. */
.ramp-col { text-align: center; min-width: 0;
            display: flex; flex-direction: column; justify-content: flex-end; }
.ramp-bar { border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--sleep-nap), var(--sleep-night)); }
.ramp-lb { font-size: 11px; font-weight: 700; color: var(--plum-soft); margin-top: 6px;
           min-height: 2.4em; line-height: 1.2; overflow-wrap: anywhere; }
.ramp-vl { font-size: 12px; font-weight: 700; margin-top: 6px; }
@media (max-width: 560px) {
  .ramp { gap: 5px; }
  .ramp-lb { font-size: 10px; min-height: 3.6em; }
  .ramp-vl { font-size: 11px; }
}

/* ------------------------------------------------------------- founder */
.founder {
  border-radius: var(--r-xl); padding: 44px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--night-mid), var(--night-inner) 55%, var(--night-bottom));
  color: #fff; box-shadow: var(--shadow-deep);
}
.founder .stars { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.founder-in { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 26px; align-items: start; }
.founder-av {
  width: 96px; height: 96px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, #7563C2, #3F3080);
  border: 2px solid rgba(255,255,255,0.28); font-size: 30px; font-weight: 700; letter-spacing: -0.03em;
}
.founder blockquote {
  margin: 0; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.44; letter-spacing: -0.02em;
  font-weight: 600;
}
.founder .sig { margin-top: 20px; font-size: 14.5px; color: rgba(255,255,255,0.7); }
.founder .sig b { color: #fff; font-weight: 700; }
.founder .caveat {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 14px; color: rgba(255,255,255,0.78); line-height: 1.6;
}
.founder .caveat b { color: #fff; }

@media (max-width: 900px) {
  .sci-grid { grid-template-columns: 1fr; gap: 34px; }
  .founder { padding: 30px 22px; }
  .founder-in { grid-template-columns: 1fr; gap: 18px; }
  .founder-av { width: 72px; height: 72px; font-size: 24px; }
}

/* ------------------------------------------------------------- pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { padding: 28px; border-radius: var(--r-xl); display: flex; flex-direction: column; }
.plan.featured { background: var(--plum); color: #fff; border-color: rgba(255,255,255,0.2); box-shadow: var(--shadow-deep); }
.plan.featured .plan-sub, .plan.featured .plan-feats li { color: rgba(255,255,255,0.78); }
.plan.featured .plan-feats b { color: #fff; }
.plan-name { font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--plum-soft); }
.plan.featured .plan-name { color: rgba(255,255,255,0.66); }
.plan-price { font-size: 42px; font-weight: 700; letter-spacing: -0.04em; margin: 12px 0 2px; }
.plan-price em { font-size: 15px; font-weight: 500; font-style: normal; opacity: .6; letter-spacing: 0; }
.plan-sub { font-size: 14px; color: var(--plum-soft); margin-bottom: 20px; }
.plan-feats { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; font-size: 14.5px; color: var(--plum-soft); }
.plan-feats li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; }
.plan-feats svg { width: 17px; height: 17px; flex: none; margin-top: 2px; opacity: .8; }
.plan .btn { margin-top: auto; width: 100%; }
.badge-best {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--cta-ink); color: #fff;
  padding: 4px 11px; border-radius: var(--r-pill); margin-left: 9px; vertical-align: 3px;
}

/* ----------------------------------------------------------------- faq */
.faq { display: grid; gap: 12px; max-width: 800px; }
.qa { border-radius: var(--r-lg); overflow: hidden; }
.qa summary {
  list-style: none; cursor: pointer; padding: 19px 22px; font-weight: 600; font-size: 16.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--plum-soft); flex: none; }
.qa[open] summary::after { content: "\2212"; }
.qa p { padding: 0 22px 20px; font-size: 15.2px; line-height: 1.62; color: var(--plum-soft); }

/* ---------------------------------------------------------------- band */
.band {
  border-radius: var(--r-xl); padding: 56px 44px; text-align: center;
  background: linear-gradient(150deg, var(--night-mid), var(--night-inner) 55%, var(--night-bottom));
  color: #fff; box-shadow: var(--shadow-deep); position: relative; overflow: hidden;
}
.band h2 { color: #fff; }
.band p { color: rgba(255,255,255,0.72); font-size: 17px; max-width: 34em; margin: 14px auto 28px; line-height: 1.55; }
.band .stores { justify-content: center; }
.band .store { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(8px); }
.band .stars { position: absolute; inset: 0; opacity: .55; pointer-events: none; }

/* -------------------------------------------------------------- footer */
footer { padding: 56px 0 40px; border-top: 1px solid rgba(255,255,255,0.5); margin-top: 24px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot-grid h5 { font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--plum-soft); margin: 0 0 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a { font-size: 14.5px; color: var(--plum); }
.foot-grid a:hover { color: var(--plum); }
.foot-note { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.5);
             display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
             font-size: 13px; color: var(--plum); }

/* ------------------------------------------------------------ reveal   */
/* Content is visible BY DEFAULT. The hidden-then-revealed state only
   applies once app.js has stamped `js` on <html> — so a blocked, slow, or
   failed script can never leave the page blank. (It did: a backgrounded tab
   never fires IntersectionObserver, and every section stayed at opacity 0.) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .hero-grid, .split { grid-template-columns: 1fr; gap: 44px; }
  .pillars, .plans { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .dash-grid > * { grid-column: span 12 !important; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .float-a, .float-b, .float-c { display: none; }
  section { padding: 56px 0; }
  .hero { padding: 48px 0 24px; }
}
@media (max-width: 560px) {
  .band { padding: 40px 22px; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- screens */
/* Real app screenshots (750x1630) inside the device frame. */
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.shot { margin: 0; }
.shot-phone {
  border-radius: 30px; padding: 7px;
  background: linear-gradient(160deg, #4A3F7A, #241C46);
  box-shadow: var(--shadow-lift), inset 0 0 0 1px rgba(255,255,255,0.16);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.shot:hover .shot-phone { transform: translateY(-6px); box-shadow: var(--shadow-deep), inset 0 0 0 1px rgba(255,255,255,0.2); }
.shot-phone img { width: 100%; height: auto; border-radius: 23px; display: block; }
.shot figcaption { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--plum); }
.shot figcaption b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 2px; }

@media (max-width: 900px) { .shots { grid-template-columns: 1fr 1fr; gap: 18px; } }
@media (max-width: 520px) { .shots { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- nav (mobile) */
/* A checkbox toggle, not <details>: Safari hides the contents of a closed
   <details> through the slot model, which `display` cannot reliably override,
   and this has to work without JS. */
.nav-burger { display: none; }
.only-mobile { display: none; }

@media (max-width: 980px) {
  .nav-in { gap: 12px; }
  .nav-burger {
    display: grid; place-items: center; width: 42px; height: 42px; flex: none;
    margin-left: auto; border-radius: var(--r-pill); cursor: pointer;
    background: rgba(255,255,255,0.55); border: 1px solid var(--glass-rim);
    color: var(--plum);
  }
  .nav-burger svg { width: 20px; height: 20px; }
  .nav-toggle:checked ~ .nav-burger { background: rgba(255,255,255,0.95); }

  .nav-links { display: none; }
  .nav-toggle:checked ~ .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; right: 24px; top: calc(100% + 8px); z-index: 60;
    min-width: 210px; padding: 8px; margin-left: 0;
    background: rgba(255,255,255,0.97); border: 1px solid var(--glass-rim);
    border-radius: var(--r-lg); box-shadow: var(--shadow-deep);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .nav-links a { padding: 12px 14px; border-radius: var(--r-md); font-size: 15.5px; opacity: 1; }
  .nav-links a:hover { background: rgba(117,99,194,0.10); }
  .nav-cta { margin-left: 0; }
  /* Brand + burger + two buttons will not fit 327px. The secondary action
     lives in the menu instead; only the primary CTA stays in the bar. */
  .nav-cta .btn-ghost { display: none; }
  .only-mobile { display: block; }
  .nav { position: sticky; }
  .nav-in { position: relative; }
}

/* Footer links were 17px tall — under any reasonable touch target. */
@media (max-width: 900px) {
  .foot-grid ul { gap: 2px; }
  .foot-grid a { display: inline-block; padding: 10px 0; }
}

/* When multi-column grids collapse, cap the measure. A full-width 720px card
   at 15px is ~90 characters per line — well past comfortable reading. */
@media (max-width: 980px) and (min-width: 561px) {
  .pillars, .plans, .faq, .sci-grid, .split, .shots { max-width: 620px; margin-left: auto; margin-right: auto; }
  .sec-head, .lede { max-width: 620px; }
}
@media (max-width: 980px) {
  .hero-grid > div:first-child { max-width: 620px; }
}

/* Two-plan pricing (no free tier). Centred so two cards don't stretch. */
.plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin: 0 auto; }
@media (max-width: 980px) { .plans-2 { grid-template-columns: 1fr; max-width: 620px; } }

/* Current page in the nav — marked, not removed. The menu is identical on
   every page so people don't lose their place when they land on a subpage. */
.nav-links a[aria-current="page"] {
  opacity: 1; font-weight: 700; color: var(--accent-ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
@media (max-width: 980px) {
  .nav-links a[aria-current="page"] {
    background: rgba(117,99,194,0.12); text-decoration: none;
  }
}

/* ── email capture modal ────────────────────────────────────────────────
   Injected by email-capture.js. Text colours use --accent-ink, never
   --plum-mute: that token is decorative at 2.89:1 and fails AA the moment
   it carries a word. Controls are held at 44px+ per the same tap-target
   rule the nav and source links were fixed to. */
.ec { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
      padding: 20px; }
.ec[hidden] { display: none; }

.ec-scrim { position: absolute; inset: 0; background: rgba(16,25,58,0.58);
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            opacity: 0; transition: opacity .2s ease; }
.ec.is-open .ec-scrim { opacity: 1; }

.ec-card { position: relative; width: min(520px, 100%);
           max-height: min(88vh, 760px); overflow: auto;
           background: linear-gradient(160deg, var(--dusk-2), var(--dusk-3));
           border: 1px solid var(--glass-rim); border-radius: var(--r-xl);
           box-shadow: var(--shadow-deep);
           opacity: 0; transform: translateY(10px) scale(.985);
           transition: opacity .2s ease, transform .2s ease; }
.ec.is-open .ec-card { opacity: 1; transform: none; }

.ec-body { padding: 34px 32px 26px; }
@media (max-width: 520px) { .ec-body { padding: 28px 20px 22px; } }

.ec-x { position: absolute; top: 8px; right: 8px;
        width: 44px; height: 44px; display: inline-flex;
        align-items: center; justify-content: center;
        background: transparent; border: 0; border-radius: var(--r-pill);
        color: var(--accent-ink); cursor: pointer; opacity: .7; }
.ec-x:hover { opacity: 1; background: var(--glass); }
.ec-x:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.ec-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700;
             letter-spacing: .14em; text-transform: uppercase;
             color: var(--accent-ink); opacity: .75; }
.ec-title { margin: 0 0 8px; font-size: 26px; line-height: 1.2;
            letter-spacing: -.02em; color: var(--plum); }
.ec-sub { margin: 0 0 20px; font-size: 15px; line-height: 1.55;
          color: var(--accent-ink); }

.ec-label { display: block; font-size: 13px; font-weight: 600;
            color: var(--accent-ink); margin-bottom: 6px; }
.ec-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ec-input { flex: 1 1 200px; min-width: 0; min-height: 48px;
            padding: 0 14px; font: inherit; font-size: 16px; /* 16px: iOS zooms below it */
            color: var(--plum); background: var(--glass-strong);
            border: 1px solid var(--glass-rim); border-radius: var(--r-md); }
.ec-input::placeholder { color: var(--plum-soft); opacity: .8; }
.ec-input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }

.ec-go { min-height: 48px; padding: 0 22px; font: inherit; font-weight: 700;
         font-size: 15px; color: var(--cta-text); background: var(--cta-ink);
         border: 0; border-radius: var(--r-md); cursor: pointer;
         white-space: nowrap; }
.ec-go:hover:not(:disabled) { filter: brightness(1.07); }
.ec-go:disabled { opacity: .6; cursor: default; }
.ec-go:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

.ec-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45;
           color: var(--accent-ink); min-height: 1px; }
.ec-note.is-bad { color: var(--danger); font-weight: 600; }

.ec-fine { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5;
           color: var(--accent-ink); opacity: .78; }
.ec-fine a { color: inherit; text-decoration: underline;
             text-underline-offset: 2px; }

/* Honeypot: positioned off-screen rather than display:none, which some bots
   skip. Never reachable by tab or screen reader. */
.ec-hp { position: absolute; left: -9999px; width: 1px; height: 1px;
         overflow: hidden; }

/* Success state — the age chart from tables.js. */
.ec-table { width: 100%; border-collapse: collapse; margin: 4px 0 2px;
            font-size: 14px; color: var(--plum); }
.ec-cap { caption-side: top; text-align: left; font-size: 13px;
          color: var(--accent-ink); opacity: .8; padding-bottom: 10px; }
.ec-table th[scope="col"] { font-size: 11.5px; font-weight: 700;
            letter-spacing: .08em; text-transform: uppercase;
            color: var(--accent-ink); opacity: .75; text-align: left;
            padding: 0 8px 8px 0; }
.ec-table th[scope="row"] { font-weight: 600; text-align: left; white-space: nowrap; }
.ec-table td, .ec-table th[scope="row"] { padding: 9px 8px 9px 0;
            border-top: 1px solid var(--glass-rim); }
.ec-table td:last-child { text-align: right; padding-right: 0; }

html.ec-lock, html.ec-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ec-scrim, .ec-card { transition: none; }
  .ec-card { transform: none; }
}

/* Success-state address echo. overflow-wrap matters: a long address would
   otherwise push the card wider than a 375px screen. */
.ec-addr { color: var(--plum); font-weight: 700; overflow-wrap: anywhere; }
/* The success heading takes programmatic focus so screen readers announce the
   result. It is not keyboard-reachable, so a visible ring would only ever be
   confusing. */
.ec-title:focus { outline: none; }

/* ═══════════════════════════════════════════════════════════ BLOG
   Index grid + article pages. Posts live one level deep at
   /blog/<slug>.html, so those pages reference assets root-absolutely. */

.blog-hero { padding: 60px 0 34px; text-align: center; }
.blog-hero h1 { margin: 6px 0 12px; font-size: clamp(32px, 5vw, 46px);
                line-height: 1.08; letter-spacing: -.025em; color: var(--plum); }
.blog-hero p { max-width: 62ch; margin: 0 auto; font-size: 17px; line-height: 1.6;
               color: var(--accent-ink); }

.blog-grid { display: grid; gap: 20px; padding-bottom: 72px;
             grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.post-card { display: flex; flex-direction: column; padding: 26px 26px 22px;
             background: var(--glass); border: 1px solid var(--glass-rim);
             border-radius: var(--r-lg); box-shadow: var(--shadow-card);
             text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.post-card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
/* The whole card is the link, so the heading must not re-announce the URL. */
.post-card h2 { margin: 8px 0 10px; font-size: 21px; line-height: 1.25;
                letter-spacing: -.015em; color: var(--plum); }
.post-card p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55;
               color: var(--accent-ink); }
.post-card .post-meta { margin-top: auto; font-size: 12.5px; font-weight: 600;
                        letter-spacing: .04em; text-transform: uppercase;
                        color: var(--accent-ink); opacity: .7; }
.post-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
               text-transform: uppercase; color: var(--accent-ink); opacity: .75; }

/* ── article page ───────────────────────────────────────────────────── */
.article { max-width: 720px; margin: 0 auto; padding: 44px 0 80px; }
.article-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
                font-size: 14px; font-weight: 600; color: var(--accent-ink);
                text-decoration: none; }
.article-back:hover { text-decoration: underline; }
.article h1 { margin: 10px 0 14px; font-size: clamp(30px, 4.6vw, 42px); line-height: 1.1;
              letter-spacing: -.025em; color: var(--plum); }
.article-dek { margin: 0 0 18px; font-size: 19px; line-height: 1.5; color: var(--accent-ink); }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
                padding-bottom: 26px; margin-bottom: 30px;
                border-bottom: 1px solid var(--glass-rim);
                font-size: 13px; color: var(--accent-ink); opacity: .78; }

.article-body h2 { margin: 38px 0 12px; font-size: 24px; line-height: 1.25;
                   letter-spacing: -.015em; color: var(--plum); }
.article-body p { margin: 0 0 17px; font-size: 17px; line-height: 1.68; color: var(--plum); }
.article-body ul, .article-body ol { margin: 0 0 17px; padding-left: 22px; }
.article-body li { margin-bottom: 9px; font-size: 17px; line-height: 1.62; color: var(--plum); }
.article-body strong { color: var(--plum); font-weight: 700; }
.article-body a { color: var(--accent-ink); text-decoration: underline;
                  text-underline-offset: 2px; }

.pull { margin: 34px 0; padding: 22px 26px;
        border-left: 3px solid var(--dusk-accent);
        background: var(--glass); border-radius: 0 var(--r-md) var(--r-md) 0;
        font-size: 20px; line-height: 1.45; letter-spacing: -.01em;
        color: var(--plum); font-weight: 600; }

/* Sources sit visually apart: they are the receipts, not the argument. */
.article-sources { margin-top: 44px; padding: 22px 24px; background: var(--glass);
                   border: 1px solid var(--glass-rim); border-radius: var(--r-md); }
.article-sources h3 { margin: 0 0 10px; font-size: 12px; font-weight: 700;
                      letter-spacing: .12em; text-transform: uppercase;
                      color: var(--accent-ink); }
.article-sources li { font-size: 13.5px; line-height: 1.55; color: var(--accent-ink);
                      margin-bottom: 7px; }

/* Standing medical disclaimer. Present on every article by construction rather
   than by the writer remembering: this is infant-health-adjacent content. */
.article-note { margin-top: 26px; font-size: 13.5px; line-height: 1.6;
                color: var(--accent-ink); opacity: .85; }

.article-cta { margin-top: 40px; padding: 28px 26px; text-align: center;
               background: linear-gradient(160deg, var(--dusk-2), var(--dusk-3));
               border: 1px solid var(--glass-rim); border-radius: var(--r-lg); }
.article-cta h3 { margin: 0 0 8px; font-size: 21px; color: var(--plum);
                  letter-spacing: -.015em; }
.article-cta p { margin: 0 0 16px; font-size: 15px; line-height: 1.55;
                 color: var(--accent-ink); }

.more-posts { margin-top: 64px; padding-top: 30px; border-top: 1px solid var(--glass-rim); }
.more-posts h3 { margin: 0 0 16px; font-size: 12px; font-weight: 700;
                 letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }

/* Insight cards on /insights.html that now open a full article. */
/* These sit at the foot of dense chart cards. As plain bold text they read as
   a caption, not an affordance - they need to look pressable. */
.read-more { display: inline-flex; align-items: center; gap: 7px;
             min-height: 44px; margin-top: 14px; padding: 0 16px;
             font-size: 14px; font-weight: 700; text-decoration: none;
             color: var(--accent-ink);
             background: var(--glass-strong); border: 1px solid var(--glass-rim);
             border-radius: var(--r-pill); box-shadow: var(--shadow-card);
             transition: transform .15s ease, box-shadow .15s ease; }
.read-more::after { content: ""; width: 7px; height: 7px; flex: none;
                    border-right: 2px solid currentColor;
                    border-top: 2px solid currentColor;
                    transform: rotate(45deg); margin-left: 1px; }
.read-more:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.read-more:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
/* the arrow is drawn above, so drop the one baked into the label text */
.ins-dark .read-more { background: rgba(255,255,255,0.92); }

@media (max-width: 640px) {
  .blog-hero { padding: 40px 0 26px; }
  .article { padding: 28px 0 60px; }
  .article-body p, .article-body li { font-size: 16.5px; }
  .pull { font-size: 18px; padding: 18px 20px; }
}

/* ── blog artwork + richer index ───────────────────────────────────────── */
.blog-hero-art { display: block; width: 100%; height: auto; margin: 30px auto 0;
                 border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }

.blog-sec { padding-bottom: 12px; }
.blog-sec-h { margin: 52px 0 18px; font-size: 13px; font-weight: 700;
              letter-spacing: .14em; text-transform: uppercase;
              color: var(--accent-ink); opacity: .8; }

/* The whole card is one link, so its inner blocks are spans, not divs. */
.post-card { padding: 0; overflow: hidden; }
.post-art { display: block; line-height: 0; }
.post-art img { width: 100%; height: auto; display: block; }
.post-body { display: flex; flex-direction: column; flex: 1;
             padding: 22px 24px 20px; }

/* Lead post: art beside the words instead of above them. */
.post-card-lead { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.post-card-lead .post-art { height: 100%; }
.post-card-lead .post-art img { height: 100%; object-fit: cover; }
.post-card-lead .post-body { padding: 34px 34px 30px; justify-content: center; }
.post-card-lead h2 { font-size: 27px; }
.post-card-lead p { font-size: 16px; }
@media (max-width: 760px) { .post-card-lead { grid-template-columns: 1fr; } }

.blog-trust { margin: 62px 0 76px; padding: 34px 32px;
              background: var(--glass); border: 1px solid var(--glass-rim);
              border-radius: var(--r-lg); }
.blog-trust > h2 { margin: 0 0 22px; font-size: 22px; letter-spacing: -.015em;
                   color: var(--plum); }
.trust-grid { display: grid; gap: 24px 34px;
              grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.trust-grid h3 { margin: 0 0 7px; font-size: 15.5px; color: var(--plum); }
.trust-grid p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--accent-ink); }
.trust-grid a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) { .blog-trust { padding: 26px 20px; } }

.article-art { display: block; width: 100%; height: auto; margin: 4px 0 34px;
               border-radius: var(--r-md); box-shadow: var(--shadow-card); }

.crumbs { display: flex; align-items: center; gap: 8px; min-height: 44px;
          font-size: 13.5px; color: var(--accent-ink); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { opacity: .5; }

.article-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.more-posts h2 { margin: 0 0 16px; font-size: 12px; font-weight: 700;
                 letter-spacing: .12em; text-transform: uppercase;
                 color: var(--accent-ink); }
.more-posts .post-card h2 { font-size: 18px; text-transform: none; letter-spacing: -.015em;
                            color: var(--plum); font-weight: 700; margin: 8px 0 10px; }

/* Modal value points. The card can now exceed a short viewport, so .ec-card's
   existing max-height + overflow does the work; these just need to not fight it. */
.ec-points { list-style: none; margin: 0 0 20px; padding: 0; }
.ec-points li { display: flex; gap: 10px; align-items: flex-start;
                margin-bottom: 10px; font-size: 14.5px; line-height: 1.5;
                color: var(--accent-ink); }
.ec-points svg { flex: none; margin-top: 3px; color: var(--cta-ink); }
.ec-closer { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55;
             color: var(--accent-ink); opacity: .9; }
@media (max-width: 520px) { .ec-points li { font-size: 14px; } }

/* Guides strip on /insights.html — generated between markers by build_blog.py */
.guide-strip { display: flex; flex-direction: column; align-items: flex-start; }
.guide-lede { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6;
              color: var(--accent-ink); max-width: 62ch; }
.guide-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.guide-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
              padding: 0 17px; font-size: 14.5px; font-weight: 600;
              text-decoration: none; color: var(--plum);
              background: var(--glass-strong); border: 1px solid var(--glass-rim);
              border-radius: var(--r-pill); box-shadow: var(--shadow-card);
              transition: transform .15s ease, box-shadow .15s ease; }
.guide-pill::after { content: ""; width: 6px; height: 6px; flex: none;
                     border-right: 2px solid var(--accent-ink);
                     border-top: 2px solid var(--accent-ink);
                     transform: rotate(45deg); opacity: .75; }
.guide-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.guide-pill:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.guide-all { align-self: flex-start; }

/* The two science columns carry intro paragraphs of different lengths, so the
   ladder and the ramp chart below them used to start at different heights.
   Subgrid lets both columns share one row track for the heading block, which
   levels the visuals without hard-coding a paragraph height that would break
   the first time the copy changed. Desktop only: in the single-column layout
   there is nothing to align. */
@media (min-width: 981px) {
  .sci-grid { grid-template-rows: auto 1fr; }
  .sci-grid > .reveal { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  /* Safari <16 and any engine without subgrid: fall back to a floor that fits
     the longer of the two intros rather than leaving them ragged. */
  @supports not (grid-template-rows: subgrid) {
    .sci-grid > .reveal { display: block; }
    .sci-head { min-height: 104px; }
  }
}

/* "What Cradle is doing all day" used to live inside the right science column,
   which made that column far taller than the left and left a void under the
   ladder. It is a separate idea, so it spans the full width and its list runs
   in two columns rather than one long stack. */
.sci-after { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--glass-rim); }
/* .checklist is display:grid, and CSS multi-column does nothing to a grid
   container - `columns: 2` was silently ignored and every item stayed full
   width. Use grid tracks instead. */
.sci-check { margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr));
             column-gap: 44px; }
@media (max-width: 760px) {
  .sci-check { grid-template-columns: 1fr; }
  .sci-after { margin-top: 30px; }
}

/* ── in-article data figure ────────────────────────────────────────────
   Shows the shape of what families logged, never the volume. A total
   invites a breadth claim the dataset cannot carry; a distribution is the
   part that is actually worth reading. */
.fig { margin: 30px 0; padding: 22px 24px; background: var(--glass);
       border: 1px solid var(--glass-rim); border-radius: var(--r-md); }
.fig-cap { font-size: 12px; font-weight: 700; letter-spacing: .12em;
           text-transform: uppercase; color: var(--accent-ink);
           margin-bottom: 16px; }
.fig-row { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: 14px;
           align-items: center; margin-bottom: 10px; }
.fig-label { font-size: 14px; font-weight: 600; color: var(--plum); }
.fig-track { height: 12px; border-radius: 6px; background: rgba(59,48,104,0.12);
             overflow: hidden; }
.fig-bar { display: block; height: 100%;
           background: linear-gradient(90deg, var(--sleep-nap), var(--sleep-night));
           border-radius: 6px; }
.fig-value { font-size: 14px; font-weight: 700; color: var(--plum);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig-note { margin: 14px 0 0; font-size: 13px; line-height: 1.55;
            color: var(--accent-ink); opacity: .85; }
@media (max-width: 560px) {
  .fig { padding: 18px 16px; }
  .fig-row { grid-template-columns: 6.5rem 1fr auto; gap: 10px; }
  .fig-label, .fig-value { font-size: 13px; }
}

/* ── article share bar ─────────────────────────────────────────────── */
.share-bar { display: inline-flex; gap: 8px; align-items: center; margin-left: 2px; }
.share-btn { display: inline-flex; align-items: center; gap: 7px;
             min-height: 36px; padding: 0 12px; font: inherit; font-size: 13px;
             font-weight: 600; cursor: pointer; color: var(--accent-ink);
             background: var(--glass-strong); border: 1px solid var(--glass-rim);
             border-radius: var(--r-pill);
             transition: transform .14s ease, box-shadow .14s ease; }
.share-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.share-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.share-btn.done { color: var(--cta-ink); border-color: var(--cta-ink); }
/* Icon-only buttons stay square so they keep a comfortable target. */
.share-btn:not(:has(.lbl)) { width: 36px; padding: 0; justify-content: center; }
.article-meta .share-slot { margin-left: auto; }
@media (max-width: 620px) {
  .article-meta { gap: 8px; }
  .article-meta .share-slot { margin-left: 0; width: 100%; margin-top: 6px; }
}

/* 36px is fine for a mouse and too small for a thumb. Bump on touch rather
   than everywhere, so the desktop byline row stays compact. */
@media (pointer: coarse) {
  .share-btn { min-height: 44px; padding: 0 14px; }
  .share-btn:not(:has(.lbl)) { width: 44px; }
}