/* Display face: Fraunces (SIL OFL 1.1, licence in assets/fraunces-OFL.txt), one static
   18KB instance so headings look the same on every device. Georgia, the old display face,
   does not exist on Android or Linux, where headings fell back to Noto Serif or Times.
   Built from @fontsource-variable/fraunces 5.3.0 (fraunces-latin-full-normal.woff2) with
   fontTools: instancer.instantiateVariableFont(font, {opsz: 48, SOFT: 100, WONK: 0,
   wght: 600}), saved as woff2. Body text stays on the system font (no download). */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fraunces-soft-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core palette - Boreal-inspired */
  --color-bg-base: #f3f6f7;
  --color-surface: #f8fafb;
  --color-bg-elevated: #ffffff;
  --color-bg-hover: #e4edf0;

  --color-text-primary: #102a43;
  --color-text-secondary: #52606d;
  --color-text-tertiary: #5e6770;

  --color-border: #d0d8dd;
  --color-border-subtle: rgba(208, 216, 221, 0.6);

  --color-primary: #0f4c5c;
  --color-primary-hover: #0c3c49;
  --color-primary-soft: rgba(15, 76, 92, 0.08);
  --color-secondary: #56748c;
  --color-accent: #5c775b;

  --color-success: #2e7854;
  --color-warning: #946219;
  --color-error: #c53030;

  --color-on-primary: #f5f9fa;
  --color-shadow: rgba(15, 29, 40, 0.08);
  --color-shadow-strong: rgba(15, 29, 40, 0.16);
  --color-device-frame: #1a1a1a;

  /* Layout: three page widths and one reading measure. Long-form text never runs wider
     than --measure, whatever container it sits in. */
  --max-width: 1160px;
  --max-width-narrow: 960px;
  --max-width-text: 46rem;
  --measure: 44rem;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Spacing - Responsive Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-control-x: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Typography. One scale for the whole site: three heading steps, a lede, one body size,
     one small size and one label size. A rule that needs a size picks one of these; a raw
     rem value on text is drift (the old sheet had four h3 sizes and five body sizes). */
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --text-h1: clamp(2.125rem, 1.5rem + 2.4vw, 3rem);
  --text-h2: clamp(1.625rem, 1.35rem + 1vw, 2rem);
  --text-h3: 1.1875rem;
  --text-lede: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --text-body: 1.0625rem;
  --text-ui: 1rem;
  --text-small: 0.9375rem;
  --text-label: 0.8125rem;
  --leading-body: 1.65;
  --leading-snug: 1.5;
}

/* Mobile Spacing Overrides */
@media (max-width: 768px) {
  :root {
    --space-lg: 1.25rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-base: #0f1c24;
    --color-surface: #0c1317;
    --color-bg-elevated: #101a20;
    --color-bg-hover: #17232b;

    --color-text-primary: #ecf3f5;
    --color-text-secondary: #c2d0d6;
    --color-text-tertiary: #8a9aa3;

    --color-border: #35434b;
    --color-border-subtle: rgba(53, 67, 75, 0.6);

    --color-primary: #4fb3c1;
    --color-primary-hover: #3d9ca8;
    --color-primary-soft: rgba(79, 179, 193, 0.12);
    --color-secondary: #8fb4d0;
    --color-accent: #99b99a;

    --color-success: #58d3a3;
    --color-warning: #f6ad55;
    --color-error: #fc8181;

    --color-on-primary: #0f1c24;
    --color-shadow: rgba(0, 0, 0, 0.45);
    --color-shadow-strong: rgba(0, 0, 0, 0.6);
    --color-device-frame: #2b3940;
  }
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-ui);
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

img {
  max-width: 100%;
}

/* Display font by heading LEVEL, not by class (babytracker-rhmmg.10): per-class
   declarations left every heading outside the listed classes (FAQ h3s, card h3s,
   prose h3s) in the body font. A heading that must stay body font needs an explicit,
   commented opt-out below (landing-structure.test.ts keeps a reasoned allowlist).
   text-wrap: balance stops one-word orphans ("off.", "mean?") on short headings.
   Size is by level too: outside the stash calculator tool a class sets a heading's margins,
   never its font-size, so an
   h3 is the same size in a card, an FAQ and an article. The weight is the one Fraunces
   instance the site ships. */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--text-h2);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.3;
}

/* ============================================
 NAVIGATION
 ============================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--color-bg-base) 90%, transparent);
  border-bottom: 1px solid var(--color-border-subtle);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-control-x) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* The full CTA label needs ~385px with the roomier gutter; tighten it on phones so 380-420px fit. */
@media (max-width: 419px) {
  .nav-inner {
    padding-inline: var(--space-md);
  }

  .nav-actions .btn {
    padding-inline: var(--space-md);
  }
}

/* Long CTA labels wrap instead of pushing the page wider than a 320px phone. */
@media (max-width: 379px) {
  .btn.btn-large {
    white-space: normal;
    text-align: center;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
}

.logo-mark {
  flex-shrink: 0;
}

.logo-mark .wave-main {
  stroke: var(--color-text-primary);
}

.logo-mark .wave-accent {
  stroke: var(--color-primary);
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Nav CTA label (babytracker-dkgwb): below 380px the full label overflows the viewport, so a
   short label shows. The full label stays in the DOM as visually-hidden text so assistive
   tech still hears "no signup". */
.nav-cta-full {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (min-width: 380px) {
  .nav-cta-full {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }

  .nav-cta-short {
    display: none;
  }
}

.nav-link {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition:
    color 0.15s,
    background 0.15s;
}

.nav-link:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-small);
  line-height: 1.2;
  border: none;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    background 0.15s;
  min-height: 44px;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 4px 12px var(--color-shadow);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--color-shadow);
}

.btn-large {
  padding: 0.85rem 1.75rem;
  font-size: var(--text-body);
  min-height: 52px;
}

/* ============================================
 HERO SECTION
 ============================================ */
.hero-wrapper {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary-soft) 55%, transparent) 0%,
    transparent 45%
  );
}

.hero {
  padding: var(--space-2xl) var(--space-lg) var(--space-2xl);
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero-grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-2xl);
  }
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-control-x);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-md);
}

.hero-title {
  margin-bottom: var(--space-md);
}

/* The lede: the one or two sentences under a page title. Same rule for the hero pages'
   .hero-subtitle and the article pages' .tagline. */
.hero-subtitle,
.page-header .tagline {
  font-size: var(--text-lede);
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 36rem;
  margin-bottom: var(--space-lg);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  align-items: center;
}

/* Key facts: three or four short proof points under a lede, each a line a thumb-scroller
   can take in without reading a paragraph. The tick is drawn, not a glyph, so it cannot
   fall back to an emoji font. */
.key-facts {
  list-style: none;
  display: grid;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  padding: 0;
  max-width: 36rem;
}

.key-facts li {
  position: relative;
  padding-left: 1.875rem;
  font-size: var(--text-ui);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.key-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
}

.key-facts li::after {
  content: '';
  position: absolute;
  left: 0.45rem;
  top: 0.38em;
  width: 0.35rem;
  height: 0.6rem;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.key-facts strong {
  font-weight: 600;
}

.key-facts a,
.hero-subtitle a,
.page-header .tagline a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Phone frame: the one device mockup. Used by the home hero and by any full-phone capture
   that should read as "this is the app on a phone" rather than as a cropped card. */
.hero-device {
  background: var(--color-bg-elevated);
  border-radius: calc(var(--radius-xl) * 1.5);
  border: 5px solid var(--color-device-frame);
  box-shadow: 0 24px 48px -12px var(--color-shadow-strong);
  overflow: hidden;
  max-width: 300px;
  margin: 0 auto;
}

.hero-device img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 899px) {
  .hero-device {
    max-width: 264px;
    border-width: 4px;
    border-radius: calc(var(--radius-xl) * 1.25);
  }
}

/* ============================================
 SECTIONS
 One vertical rhythm. A section carries --space-2xl above and below; where two sections
 meet the hairline sits in the middle of an even gap. Nothing else adds space at a join:
 wrappers (.prose, .intent-body) have no bottom padding of their own, because that padding
 used to land mid-page, above the FAQ, and left a dead band there.
 ============================================ */
.section {
  padding: var(--space-2xl) var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-divided {
  border-top: 1px solid var(--color-border-subtle);
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-xl);
}

.section-header--prose {
  max-width: var(--measure);
  margin: 0 auto;
  text-align: left;
}

.section-header--prose p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.section-header--prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.section-title {
  margin-bottom: var(--space-sm);
}

/* On the long-form pages (article and intent skeletons) the closing FAQ section reads as
   part of the text: same left edge, same measure, left-aligned title. The home page keeps
   its centred section titles. */
.container--text > .section {
  padding-left: 0;
  padding-right: 0;
}

.intent-page > .section {
  max-width: var(--max-width-narrow);
}

.container--text > .section .section-header,
.intent-page > .section .section-header {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.container--text > .section .faq-list,
.intent-page > .section .faq-list,
.container--text > .section .intent-links--center,
.intent-page > .section .intent-links--center {
  margin-left: 0;
  margin-right: 0;
}

/* Comparison Table */
.comparison-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

/* On desktop a comparison table is wider than the reading column it sits in: three
   columns of sentences wrapped every ten characters at the text measure. */
@media (min-width: 1100px) {
  .container--text .comparison-wrapper {
    margin-left: calc(-1 * var(--space-3xl));
    margin-right: calc(-1 * var(--space-3xl));
  }
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  background: var(--color-bg-elevated);
  font-size: var(--text-ui);
  line-height: var(--leading-snug);
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-subtle);
}

.comparison-table tr:last-child td {
  border-bottom: 0;
}

.comparison-table th {
  background: var(--color-surface);
  font-weight: 700;
  font-size: var(--text-label);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* The Rhythm column. It used to be bold teal text, which is the link colour, so every
   cell read as a link. Now: body colour on a tint. No left stripe: the left-accent guard
   (rhmmg.62) rules those out site-wide. */
.comparison-table .highlight {
  color: var(--color-text-primary);
  font-weight: 500;
  background: var(--color-primary-soft);
}

.comparison-table a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.comparison-label {
  display: none;
}

/* Below this width the table's forced min-width (480px) plus the page's side padding
   overflows narrow phones; the row content is paragraph-length text, not short values,
   so a horizontal-scroll table reads badly even with a scroll affordance. Switch to
   stacked cards (one per row) instead. */
@media (max-width: 600px) {
  .comparison-wrapper {
    overflow-x: visible;
    border: none;
    border-radius: 0;
  }

  .comparison-table {
    min-width: 0;
    background: none;
  }

  .comparison-table thead {
    display: none;
  }

  .comparison-table,
  .comparison-table tbody,
  .comparison-table tr {
    display: block;
    width: 100%;
  }

  .comparison-table tr {
    margin-bottom: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-elevated);
  }

  .comparison-table tr:last-child {
    margin-bottom: 0;
  }

  .comparison-table td {
    display: block;
    border-bottom: none;
    padding: var(--space-control-x) var(--space-md);
  }

  .comparison-table td:first-child {
    background: var(--color-surface);
    font-weight: 700;
    font-size: var(--text-label);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  /* App names are brands (nappi, ParAI), so this table opts out of the card
     header's uppercasing that the two-column compare tables rely on. */
  .comparison-table--apps td:first-child {
    text-transform: none;
    font-size: var(--text-ui);
    letter-spacing: normal;
  }

  .comparison-label {
    display: block;
    font-size: var(--text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-xs);
  }

  /* --plain: a single-value-per-row table (wake windows by age) whose cells carry no
     .comparison-label spans, so stacking would drop the column meaning and box every row.
     Restore the real table layout (kept last so it wins over the stacked rules above). */
  .comparison-wrapper--plain {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .comparison-table--plain {
    display: table;
    width: 100%;
    background: var(--color-bg-elevated);
  }

  .comparison-table--plain thead {
    display: table-header-group;
  }

  .comparison-table--plain tbody {
    display: table-row-group;
    width: auto;
  }

  .comparison-table--plain tr {
    display: table-row;
    width: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
  }

  .comparison-table--plain th,
  .comparison-table--plain td {
    display: table-cell;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .comparison-table--plain td:first-child {
    background: none;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    text-transform: none;
    letter-spacing: normal;
  }
}

/* Final CTA: the closing band. Tinted and full width so the page ends on it instead of a
   button floating in empty space above the footer. */
.final-cta {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  background: var(--color-primary-soft);
  border-top: 1px solid var(--color-border-subtle);
}

.final-cta-title {
  margin-bottom: var(--space-md);
}

.final-cta-note {
  margin-top: var(--space-md);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.final-cta-note a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Footer */
.footer {
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

@media (min-width: 640px) {
  .footer-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer-column {
  display: flex;
  flex-direction: column;
}

/* Explicit body-font opt-out from the base h1,h2,h3 display rule: footer column
   labels are small uppercase UI labels, not display headings (leading, wrapping and
   tracking revert too). */
.footer-column h2 {
  font-family: var(--font-body);
  line-height: inherit;
  text-wrap: wrap;
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-xs);
}

/* Each footer link is a 44px row on phones so a thumb can hit it. */
.footer-column a,
.footer-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-small);
}

@media (min-width: 640px) {
  .footer-column a,
  .footer-links a {
    min-height: 36px;
  }
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.footer-links {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.footer a {
  color: var(--color-text-secondary);
  transition: color 0.15s;
}

.footer a:hover {
  color: var(--color-primary);
}

.footer p {
  color: var(--color-text-tertiary);
  font-size: var(--text-small);
  margin: 0;
}

.hidden-mobile {
  display: none;
}
@media (min-width: 768px) {
  .hidden-mobile {
    display: inline-block;
  }
}

/* Sticky Mobile CTA */
.sticky-cta {
  display: none;
}

@media (max-width: 768px) {
  .sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-control-x) var(--space-md);
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 12px var(--color-shadow);
    z-index: 99;
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .sticky-cta.visible {
    transform: translateY(0);
  }

  .sticky-cta .btn {
    flex: 1;
    max-width: 22rem;
  }

  /* Add padding to footer to prevent sticky CTA from overlapping */
  .footer {
    padding-bottom: calc(var(--space-lg) + 72px);
  }
}

/* ============================================
   PAGE SKELETONS
   ============================================ */

/* Container variants */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container--narrow {
  max-width: var(--max-width-narrow);
}

.container--text {
  max-width: var(--max-width-text);
}

/* Page header (article, legal and features pages). Left-aligned on the text edge: a
   centred four-line title over left-aligned prose gave the page two axes. */
.page-header {
  padding: var(--space-2xl) 0 var(--space-xl);
}

.page-header h1 {
  margin-bottom: var(--space-md);
  overflow-wrap: break-word;
}

.page-header .tagline {
  max-width: var(--measure);
  margin-bottom: 0;
}

.page-header .tagline + .tagline {
  margin-top: var(--space-md);
}

.page-header .key-facts {
  margin: var(--space-lg) 0 0;
}

.page-header .last-updated {
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
  margin-top: var(--space-md);
}

/* Call to action directly under a page title or inside a short-answer box: one primary
   button and a quiet line beside it. */
.page-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
}

.page-cta-note {
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

.page-cta-note a,
.page-cta-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The short answer: an article page's conclusion, stated before the long text, with the
   way in. Sits first in .prose. */
.short-answer {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px -16px var(--color-shadow-strong);
  padding: var(--space-lg);
  margin: 0 0 var(--space-xl);
}

.short-answer-label {
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.short-answer .key-facts {
  max-width: none;
  margin-bottom: 0;
}

/* Feature page (/features): alternating text and capture */
.feature-section {
  padding: var(--space-3xl) 0;
  border-top: 1px solid var(--color-border-subtle);
}

.feature-grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
  .feature-grid.reverse {
    direction: rtl;
  }
  .feature-grid.reverse > div {
    direction: ltr;
  }
}

.feature-content h2 {
  margin-bottom: var(--space-md);
}

.feature-content p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin-bottom: var(--space-md);
  max-width: var(--measure);
}

.feature-content p:last-child {
  margin-bottom: 0;
}

.feature-content .feature-row-link + p {
  margin-top: var(--space-sm);
}

.feature-content a:not(.btn) {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-md);
}

.feature-list li {
  margin-bottom: var(--space-sm);
  padding-left: 1.5rem;
  position: relative;
  font-size: var(--text-body);
  line-height: var(--leading-snug);
}

.feature-list li::before {
  content: '\2022';
  color: var(--color-primary);
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* A capture beside feature copy. The image is never cropped: the box takes the image's
   own height (the old fixed max-height with object-fit: cover cut phone captures in half
   on desktop). */
.visual-box {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 12px 32px -16px var(--color-shadow-strong);
  overflow: hidden;
  max-width: 20rem;
  width: 100%;
  margin: 0 auto;
}

.visual-box img {
  width: 100%;
  height: auto;
  display: block;
}

.visual-box--dark {
  background: #000;
  border-color: var(--color-device-frame);
}

.visual-box-carousel {
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 12px 32px -16px var(--color-shadow-strong);
  max-width: 22rem;
  width: 100%;
  margin: 0 auto;
}

.compare-slides {
  display: flex;
  align-items: flex-start;
  transition: transform 0.3s ease;
}

.compare-slides img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
  display: block;
}

.compare-labels {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) 0 var(--space-md);
  justify-content: center;
  background: var(--color-surface);
}

.compare-label,
.theme-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  background: none;
  font-family: inherit;
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.2s;
}

.compare-label.active,
.theme-label.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: 600;
}

/* A compare carousel inside a phone-column row (home Calm Mode): the row's generic
   `.feature-row-img--phone img { max-width }` would shrink each slide below the carousel
   width and let the next slide show beside it, so the slides keep the carousel's width. */
.feature-row-visual .feature-row-img--phone .visual-box-carousel {
  width: 100%;
  max-width: 280px;
}

.feature-row-visual .feature-row-img--phone .compare-slides img {
  max-width: none;
  border-radius: 0;
}

.calm-compare {
  max-width: 22rem;
  margin: 0 auto;
}

.lifecycle-carousel {
  max-width: 22rem;
  margin: var(--space-xl) auto 0;
}

.lifecycle-caption {
  max-width: 46ch;
  margin: var(--space-md) auto 0;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--text-small);
}

.feature-row > .feature-row-link,
.feature-row-text > .feature-row-link {
  display: flex;
}

.feature-row-text p + .feature-row-link {
  margin-top: var(--space-xs);
}

.feature-row-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-primary);
  font-weight: 600;
}

.feature-row-link:hover {
  text-decoration: underline;
}

/* Source and date notes under a table or claim. */
.comparison-source-note {
  margin-top: var(--space-md);
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Long-form text pages (privacy, terms, security, about, compare, guides, ...).
   Was .legal-content, which only three of its 13 pages are; headings inherit the
   text colour (the teal --color-primary read as links) and the display font comes
   from the base h1,h2,h3 rule. When .prose is the last thing in its
   container the :last-child rule below closes the page; otherwise it ends one section step
   above the FAQ's hairline, the same step that sits below it. */
.prose {
  padding-bottom: var(--space-2xl);
}

.prose:last-child {
  padding-bottom: var(--space-3xl);
}

.prose h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

/* The page header already provides the gap under the title. */
.prose > section:first-child > h2:first-child {
  margin-top: 0;
}

/* A subhead belongs to the paragraph under it: a full step above, a half step below.
   Unstyled, it sat 2px over its paragraph and as close to the one above. */
.prose h3 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.prose h2 + h3 {
  margin-top: 0;
}

.prose p,
.prose li {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.prose p {
  margin-bottom: var(--space-md);
}

.prose ul,
.prose ol {
  margin-bottom: var(--space-md);
  padding-left: 1.5rem;
}

.prose li {
  margin-bottom: var(--space-sm);
}

.prose .key-facts {
  padding-left: 0;
}

.prose .key-facts li {
  font-size: var(--text-ui);
  line-height: var(--leading-snug);
  margin-bottom: 0;
}

.prose .short-answer-label {
  font-size: var(--text-label);
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

.prose .short-answer > :last-child {
  margin-bottom: 0;
}

.prose a:not(.btn) {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.prose a:not(.btn):hover {
  text-decoration: none;
}

/* A list of pages (the guides index): each item is a link on its own line with a muted
   one-line description under it, instead of a link running into same-coloured text. */
.prose .page-list {
  list-style: none;
  padding-left: 0;
}

.prose .page-list li {
  margin-bottom: var(--space-md);
  color: var(--color-text-secondary);
}

.prose .page-list li > a:first-child {
  display: block;
  font-weight: 600;
}

/* A text column's last block ends flush, so the section below sets the gap. */
.prose > section:last-child > :last-child {
  margin-bottom: 0;
}

/* ============================================
   FEATURE ROWS (home): a heading, a short paragraph and, in the visual variant, a capture
   ============================================ */
.feature-row {
  max-width: var(--measure);
  margin: 0 auto;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-align: left;
}

.feature-row--wide {
  max-width: 52rem;
}

/* Rows sit one step apart, whichever kinds meet. (Two text rows used to have no rule and
   the second heading touched the paragraph above it.) */
.feature-row + .feature-row,
.feature-row + .feature-row-visual,
.feature-row-visual + .feature-row,
.feature-row-visual + .feature-row-visual {
  margin-top: var(--space-2xl);
}

.feature-row p + p {
  margin-top: var(--space-md);
}

/* Screenshot in a rounded frame; --card is a single phone-width card capture (wake window,
   put-down cue) kept near native size; --phone is the 280px phone column used by the theme
   carousel. */
.media-frame {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.media-frame--card {
  max-width: 26rem;
  margin: var(--space-lg) auto 0;
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 12px 32px -16px var(--color-shadow-strong);
}

.media-frame--card img {
  width: 100%;
  height: auto;
  display: block;
}

.media-frame--phone {
  max-width: 300px;
  margin: 0 auto;
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 12px 32px -16px var(--color-shadow-strong);
}

.feature-row-visual {
  display: flex;
  flex-direction: column;
  max-width: 52rem;
  margin: 0 auto;
  gap: var(--space-lg);
}

.feature-row-visual .feature-row-text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-align: left;
}

.feature-row-visual .feature-row-img {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.feature-row-visual .feature-row-img img {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 12px 32px -16px var(--color-shadow-strong);
  display: block;
}

.feature-row-visual .feature-row-img--card img {
  max-width: 26rem;
}

.feature-row-title {
  display: block;
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .feature-row-visual {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
  }

  .feature-row-visual .feature-row-text {
    flex: 1 1 0;
    min-width: 0;
  }

  .feature-row-visual .feature-row-img {
    flex: 0 0 46%;
    align-items: center;
  }

  .feature-row-visual.reverse {
    flex-direction: row-reverse;
  }
}

/* Theme Carousel */
.theme-radio {
  display: none;
}

.theme-slides {
  display: flex;
  transition: transform 0.3s ease;
}

.theme-slides img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
  display: block;
}

.theme-labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  justify-content: center;
}

.theme-carousel-cell {
  min-width: 0;
  align-self: center;
  width: 100%;
}

/* Rapid-fire callouts (homepage) */
.callout-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 52rem;
  margin: 0 auto;
}

.callout-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.callout-item h3 {
  margin: 0;
}

.callout-item span {
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-size: var(--text-ui);
}

.callout-item a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-small);
}

@media (max-width: 767px) {
  .callout-list {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* FAQ: one column on the reading measure, a hairline between questions so each question
   visibly belongs to the answer under it, not the one above. */
.faq-list {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.faq-item {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border-subtle);
}

.faq-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.faq-item:last-child {
  padding-bottom: 0;
}

.faq-item h3 {
  margin: 0 0 var(--space-sm);
}

.faq-item p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin: 0;
}

.faq-item p + p {
  margin-top: var(--space-md);
}

.faq-item a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: 52rem;
  margin: 0 auto;
}

/* ============================================
   INTENT PAGES (search-intent landing pages): hero + sections
   ============================================ */

/* The hero shares the body's width so the headline, the sections and the FAQ start on one
   left edge (the hero used to sit on the wide 1160px container, 130px left of the body). */
.intent-hero,
.intent-hero--text {
  max-width: var(--max-width-narrow);
}

.intent-hero-visual {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 32px -12px var(--color-shadow-strong);
  overflow: hidden;
}

.intent-hero-visual img {
  display: block;
  height: auto;
  width: 100%;
}

.intent-hero-visual--phone {
  justify-self: center;
  max-width: 22rem;
  width: 100%;
}

.intent-small {
  color: var(--color-text-tertiary);
  font-size: var(--text-small);
  line-height: 1.6;
  max-width: var(--measure);
}

.intent-section {
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-2xl) 0;
}

.intent-section h2 {
  margin-bottom: var(--space-md);
  max-width: var(--measure);
}

.intent-section h3 {
  margin-bottom: var(--space-sm);
}

.intent-section p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin-bottom: var(--space-md);
  max-width: var(--measure);
}

.intent-section > :last-child {
  margin-bottom: 0;
}

.intent-section * + h3 {
  margin-top: var(--space-xl);
}

.intent-section a:not(.btn),
.intent-links a,
.feature-row p a,
.feature-row-text p a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.intent-columns {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

@media (min-width: 700px) {
  .intent-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

.intent-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.intent-section .intent-card h3 {
  margin-top: 0;
}

.intent-card p:last-child {
  margin-bottom: 0;
}

/* A capture inside the text flow, on any long-form page: framed like every other capture
   and as wide as a phone column allows. --wide is for landscape crops (a card, a chart). */
.intent-figure {
  margin: var(--space-lg) auto;
  max-width: 22rem;
}

.intent-figure--wide {
  max-width: 30rem;
}

@media (min-width: 900px) {
  .intent-section > .intent-figure,
  .intent-section > .lifecycle-carousel {
    margin-left: calc((var(--measure) - 22rem) / 2);
    margin-right: 0;
  }

  .intent-section > .lifecycle-caption {
    margin-left: 0;
    margin-right: 0;
  }
}

.intent-figure img {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px -16px var(--color-shadow-strong);
  display: block;
  height: auto;
  width: 100%;
}

/* --clip: a long capture (the full import preview) shown from its top, faded out at a
   fixed height so one figure does not run two phone screens. */
.intent-figure--clip img {
  max-height: 38rem;
  object-fit: cover;
  object-position: top;
  mask-image: linear-gradient(to bottom, black 82%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent);
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.intent-figure figcaption {
  text-wrap: balance;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  margin-top: var(--space-sm);
  text-align: center;
}

.intent-note {
  background: var(--color-primary-soft);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  max-width: var(--measure);
}

.intent-note p,
.intent-note p:last-child {
  color: var(--color-text-primary);
  margin-bottom: 0;
}

.intent-steps {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  padding-left: var(--space-xl);
  max-width: var(--measure);
}

.intent-steps li {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  padding-left: var(--space-sm);
}

.intent-section ul:not(.key-facts):not(.intent-steps) {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin-bottom: var(--space-md);
  padding-left: 1.5rem;
  max-width: var(--measure);
}

.intent-section ul:not(.key-facts):not(.intent-steps) li + li {
  margin-top: var(--space-sm);
}

.intent-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
}

/* "Keep reading": the related-page list that closes an FAQ. A labelled, left-aligned list
   (two columns on desktop) of 44px rows; it used to be a centred pile of bold underlined
   links that wrapped unevenly and read as neither a list nor a button row. The class name
   is historical. */
.intent-links--center {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-xl);
  max-width: var(--measure);
  margin: var(--space-xl) auto 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
}

.intent-links--center a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-sm) 0;
  font-size: var(--text-ui);
  line-height: 1.35;
}

/* "Last updated" under a related-links list or a closing section. */
.section > .last-updated,
.intent-links--center + .last-updated,
.intent-links--center + .intent-small {
  margin-top: var(--space-lg);
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
}

.related-label {
  grid-column: 1 / -1;
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-sm);
}

@media (min-width: 700px) {
  .intent-links--center {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.pricing-card--accent {
  border-color: var(--color-accent);
  box-shadow: 0 12px 28px -16px var(--color-shadow-strong);
}

.pricing-card .pricing-price {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.pricing-card .pricing-price span {
  display: block;
  font-size: var(--text-small);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
  font-size: var(--text-ui);
}

.pricing-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

.pricing-card .feature-row-link {
  margin-top: var(--space-xs);
}

@media (max-width: 767px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   STASH CALCULATOR (/breast-milk-stash-calculator)
   One commented section. Every class carries the sc- prefix because .section-title, .hint,
   .field, .step, .eyebrow, .days and .split already exist (or could collide) in this file.
   Colours, spacing and radii come from the :root tokens above; none are redeclared here.
   No !important and no @supports: landing-structure.test.ts parses this file with a small
   cascade model that rejects both. Hidden parts use the [hidden] attribute, re-asserted by
   the .sc-tool [hidden] rule at the end of this section.
   ============================================ */

/* Intro: the h1 carries the kicker pill, so it renders on its own line in the body font */
.hero.sc-hero {
  max-width: var(--max-width);
}

.sc-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: end;
}

.sc-hero .hero-kicker {
  display: flex;
  width: fit-content;
  font-family: var(--font-body);
  line-height: 1.6;
}

.sc-intro-copy {
  display: grid;
  gap: var(--space-sm);
}

.sc-intro-copy .hero-subtitle {
  margin-bottom: 0;
}

.sc-tiny-mark {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary);
  vertical-align: middle;
  margin-right: var(--space-sm);
}

.sc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The tool follows the hero; the hero's own shared padding sets the gap, and the hero wash ends inside it */
.sc-tool {
  color-scheme: light dark;
}

.sc-tool button,
.sc-tool input,
.sc-tool select {
  font: inherit;
  color: inherit;
}

.sc-tool button {
  cursor: pointer;
}

.sc-tool fieldset {
  border: 0;
  min-width: 0;
}

.sc-tool input[type='number'],
.sc-tool input[type='date'],
.sc-tool select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  padding: var(--space-sm) var(--space-control-x);
  font-variant-numeric: tabular-nums;
}

.sc-tool input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.sc-tool input::-webkit-inner-spin-button,
.sc-tool input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sc-tool input[type='checkbox'],
.sc-tool input[type='radio'] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex: none;
}

.sc-tool input:focus-visible,
.sc-tool select:focus-visible,
.sc-tool summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.sc-tool input[aria-invalid='true'] {
  border-color: var(--color-warning);
}

.sc-eyebrow {
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
}

.sc-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

/* Inputs card */
.sc-inputs {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 24px -8px var(--color-shadow);
  overflow: hidden;
  min-width: 0;
}

.sc-example-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-control-x);
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-xl);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  min-height: 44px;
}

.sc-example {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.sc-example-dot {
  width: 7px;
  height: 7px;
  border: 1px solid var(--color-secondary);
  background: var(--color-primary-soft);
  border-radius: 50%;
  flex: none;
}

.sc-text-button {
  font-size: var(--text-small);
  min-height: 44px;
  background: transparent;
  border: 0;
  padding: var(--space-xs) 0;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sc-unit-switch {
  display: flex;
  gap: calc(var(--space-xs) / 2);
  background: var(--color-bg-base);
  padding: calc(var(--space-xs) * 0.75);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  margin-left: auto;
}

.sc-unit-switch button {
  border: 0;
  min-height: 32px;
  min-width: 44px;
  padding: calc(var(--space-xs) / 2) var(--space-control-x);
  font-size: var(--text-small);
  border-radius: var(--radius-full);
  background: transparent;
}

.sc-unit-switch button[aria-pressed='true'] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
}

.sc-section {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  display: grid;
  gap: var(--space-lg);
}

.sc-section + .sc-section {
  border-top: 1px solid var(--color-border);
}

.sc-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-control-x);
}

.sc-section-title h2 {
  font-size: 1.35rem;
}

.sc-step {
  font: 700 0.75rem/1 var(--font-body);
  color: var(--color-primary);
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}

.sc-field-label {
  font-size: var(--text-small);
  font-weight: 600;
}

.sc-hint {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.sc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.sc-field {
  display: grid;
  gap: var(--space-sm);
}

.sc-segmented {
  display: flex;
  gap: var(--space-xs);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
}

.sc-segmented label {
  position: relative;
  flex: 1;
  cursor: pointer;
}

.sc-segmented input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.sc-segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-small);
  text-align: center;
  border-radius: 6px;
  line-height: 1.3;
}

.sc-segmented input:checked + span {
  background: var(--color-bg-elevated);
  color: var(--color-primary);
  box-shadow: 0 1px 4px var(--color-shadow);
  font-weight: 600;
}

.sc-segmented input:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.sc-days {
  display: flex;
  gap: var(--space-xs);
}

.sc-days label {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.sc-days input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.sc-days span {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-label);
  background: var(--color-bg-elevated);
}

.sc-days input:checked + span {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.sc-days input:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* One stepper for every number on the page (native spinners hidden above) */
.sc-stepper {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-elevated);
  min-width: 0;
}

.sc-stepper button {
  border: 0;
  background: transparent;
  width: 44px;
  flex: none;
  font-size: 1.25rem;
  line-height: 1;
  min-height: 44px;
}

.sc-stepper button:hover {
  background: var(--color-bg-hover);
}

.sc-stepper button:disabled {
  opacity: 0.35;
  cursor: default;
}

.sc-tool .sc-stepper input {
  border: 0;
  border-radius: 0;
  text-align: center;
  min-height: 44px;
  padding: var(--space-xs) 0;
  font-size: 1.1rem;
  flex: 1;
  width: 0;
  min-width: 2.6em;
}

.sc-suffix {
  align-self: center;
  font-size: var(--text-label);
  color: var(--color-text-secondary);
  padding-right: var(--space-sm);
}

.sc-stepper[data-f='formula'] {
  max-width: 50%;
}

.sc-stepper[data-f='pump'],
.sc-stepper[data-f='preFreeze'] {
  max-width: 60%;
}

.sc-mini-label {
  font-size: var(--text-label);
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: var(--space-xs);
}

.sc-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-control-x);
}

.sc-sub-total {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.sc-sub-total strong {
  font-weight: 600;
  color: var(--color-primary);
}

.sc-split {
  display: flex;
  height: 8px;
  border-radius: var(--radius-full);
  overflow: hidden;
  gap: calc(var(--space-xs) / 2);
}

.sc-split i {
  display: block;
  flex: 1;
  background: var(--color-secondary);
  border-radius: var(--radius-full);
}

.sc-split i.sc-f {
  background: var(--color-border);
}

.sc-bag-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  gap: var(--space-sm);
  align-items: end;
}

.sc-remove {
  border: 0;
  background: transparent;
  padding: 0;
  width: 36px;
  min-height: 44px;
  font-size: 1.2rem;
  color: var(--color-text-secondary);
}

.sc-remove:disabled {
  opacity: 0.3;
  cursor: default;
}

.sc-add-bag {
  font-size: var(--text-small);
  border: 1px dashed var(--color-border);
  background: transparent;
  width: 100%;
  min-height: 44px;
  border-radius: var(--radius-sm);
}

.sc-stash-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  gap: var(--space-control-x);
}

.sc-stash-total strong {
  font: 600 1.75rem/1.1 var(--font-display);
  color: var(--color-text-primary);
}

.sc-pump-read {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.sc-pump-read strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.sc-divider {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}

.sc-goal-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font: 600 1.2rem/1.2 var(--font-display);
  cursor: pointer;
  min-height: 44px;
}

.sc-goal-fields {
  display: grid;
  gap: var(--space-md);
}

.sc-error {
  color: var(--color-warning);
  font-size: var(--text-small);
}

/* Result card */
.sc-result-column {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-lg));
  min-width: 0;
}

.sc-result-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 24px -8px var(--color-shadow);
}

.sc-cover {
  background: var(--color-primary-soft);
  padding: var(--space-lg) var(--space-xl);
}

.sc-example-tag {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-full);
  padding: calc(var(--space-xs) / 2) var(--space-sm);
}

.sc-cover-number {
  display: flex;
  align-items: baseline;
  gap: var(--space-control-x);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

/* the numeral stays regular weight: bold Georgia at this size reads heavy */
.sc-cover-number strong {
  font: 600 5rem/0.95 var(--font-display);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.sc-cover-number > span {
  font: 600 1.35rem/1.15 var(--font-display);
  max-width: 10em;
}

/* the stop-type answer sits right under the number, inside the first screen */
.sc-cover-stop {
  margin-top: var(--space-md);
  display: grid;
  gap: calc(var(--space-xs) / 2);
}

.sc-cover-stop span {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.sc-cover-stop strong {
  font: 600 1.35rem/1.25 var(--font-display);
  text-wrap: balance;
}

/* One bottom bar at a time: while the calculator bar is up, the site sticky CTA stays tucked
   away (stash-calculator.js toggles .sc-bar-on on <body>); it returns once the tool scrolls off. */
.sc-bar-on .sticky-cta.visible {
  transform: translateY(100%);
}

.sc-cover-context {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
}

.sc-week-strip {
  display: flex;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 var(--space-sm);
}

.sc-week-block {
  flex: 1;
  min-width: 0;
}

.sc-week-days {
  display: flex;
  gap: var(--space-xs);
}

.sc-day-mark {
  height: 28px;
  border: 1px solid var(--color-secondary);
  border-radius: 4px;
  flex: 1;
  background: transparent;
  opacity: 0.85;
}

.sc-day-mark.sc-on {
  background: var(--color-secondary);
}

.sc-week-label {
  font-size: var(--text-label);
  color: var(--color-text-tertiary);
  display: block;
  margin-top: var(--space-xs);
  text-align: center;
}

.sc-diagram-note {
  font-size: var(--text-label);
  color: var(--color-text-secondary);
}

.sc-buffer-alt {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-md);
  font-size: var(--text-small);
}

.sc-buffer-alt strong {
  font-weight: 600;
}

.sc-buffer-alt span {
  display: block;
  font-size: var(--text-label);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.sc-outlook {
  background: var(--color-bg-elevated);
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.sc-outlook h2 {
  font-size: 1.35rem;
}

.sc-outlook-intro {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  margin: var(--space-xs) 0 var(--space-lg);
}

.sc-timeline {
  margin-left: var(--space-xs);
}

.sc-time-item {
  position: relative;
  padding: 0 0 var(--space-lg) var(--space-lg);
  border-left: 1px solid var(--color-border);
}

.sc-time-item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.sc-time-item::before {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  left: -5px;
  top: 7px;
  border: 1px solid var(--color-secondary);
  background: var(--color-bg-elevated);
}

.sc-time-item:last-child::before {
  background: var(--color-secondary);
}

.sc-time-item.sc-goal::before {
  border-color: var(--color-primary);
  background: var(--color-primary);
  border-radius: 2px;
  transform: rotate(45deg);
}

.sc-time-item.sc-goal .sc-time-label {
  color: var(--color-primary);
  font-weight: 600;
}

.sc-time-label {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.sc-time-value {
  font: 600 1.35rem/1.25 var(--font-display);
  text-wrap: balance;
  margin: calc(var(--space-xs) / 2) 0;
}

.sc-time-detail {
  font-size: var(--text-label);
  color: var(--color-text-secondary);
}

.sc-goal-result {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}

.sc-goal-result h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

.sc-goal-result p {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.sc-goal-result p.sc-eyebrow {
  font-size: var(--text-label);
  color: var(--color-primary);
}

.sc-add-goal {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-control-x);
  border: 0;
  border-top: 1px solid var(--color-border);
  background: transparent;
  margin-top: var(--space-lg);
  padding: var(--space-md) 0 0;
  text-align: left;
  color: var(--color-primary);
  font-size: var(--text-small);
}

.sc-under-result {
  padding: var(--space-md) var(--space-xs) 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  display: grid;
  gap: var(--space-sm);
}

.sc-back-to-inputs {
  display: none;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Keep-the-count band under the tool */
.sc-note {
  padding: var(--space-xl) 0 var(--space-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.sc-note h2 {
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  margin-bottom: var(--space-sm);
}

.sc-note p {
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: var(--measure);
}

.sc-note p + p {
  margin-top: var(--space-sm);
}

/* Phone bar: the answer plus a jump to the result. Shown only while the tool is on screen. */
.sc-mobile-cover {
  display: none;
}

@media (max-width: 800px) {
  .sc-intro {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .sc-workspace {
    display: flex;
    flex-direction: column;
  }

  .sc-inputs,
  .sc-result-column {
    width: 100%;
  }

  .sc-result-column {
    position: static;
  }
}

/* phone: 16px page gutter + 20px card padding = 36px, inside the 48px mobile padding budget */
@media (max-width: 640px) {
  .sc-tool {
    padding-inline: var(--space-md);
  }

  .sc-example-bar {
    padding-inline: var(--space-lg);
  }

  .sc-section,
  .sc-cover,
  .sc-outlook {
    padding: var(--space-lg);
  }

  .sc-mobile-cover {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: var(--space-sm) var(--space-md)
      calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    box-shadow: 0 -3px 20px var(--color-shadow);
  }

  .sc-mobile-cover.sc-off {
    display: none;
  }

  .sc-mobile-cover small {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--text-label);
  }

  .sc-mobile-cover strong {
    font: 600 1.15rem/1.25 var(--font-display);
  }

  .sc-mobile-cover a {
    flex: none;
    font-size: var(--text-small);
    font-weight: 600;
    background: var(--color-primary);
    color: var(--color-on-primary);
    padding: var(--space-control-x) var(--space-md);
    border-radius: var(--radius-full);
  }

  .sc-back-to-inputs {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .sc-days span {
    font-size: var(--text-label);
  }

  .sc-cover-number strong {
    font-size: 4.25rem;
  }

  /* bag rows put two steppers with a unit suffix in ~130px columns: 36px buttons and a 1.6em number floor keep the + inside */
  .sc-stepper button {
    width: 36px;
  }

  .sc-tool .sc-stepper input {
    min-width: 1.6em;
  }

  .sc-suffix {
    padding-right: var(--space-xs);
  }
}

/* phones: the remove x moves up into the label line so both bag steppers get the full row */
@media (max-width: 480px) {
  .sc-bag-row {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sc-remove {
    position: absolute;
    top: -6px;
    right: 0;
    width: 32px;
    min-height: 32px;
    height: 32px;
  }
}

/* very narrow phones (320px): paired steppers stack rather than squeeze */
@media (max-width: 359px) {
  .sc-bag-row,
  .sc-entry-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-stepper[data-f='formula'],
  .sc-stepper[data-f='pump'],
  .sc-stepper[data-f='preFreeze'] {
    max-width: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sc-tool button,
  .sc-tool a {
    transition:
      background-color 0.15s,
      border-color 0.15s;
  }
}

/* Last on purpose: display rules above (grid, flex) would otherwise beat the [hidden] attribute.
   Specificity (class + attribute) is higher than any single-class rule in this section. */
.sc-tool [hidden] {
  display: none;
}

.sc-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: var(--space-xs);
}