/* ==========================================================================
   Tiny Beginnings — Components
   Buttons (§7) · cards (§8) · icons (§9) · chrome and controls (§12).
   Hover styles live inside @media (hover: hover) throughout.
   ========================================================================== */

/* ==========================================================================
   1. BUTTONS — every button is a pill. Six roles, no others. (§7)
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  min-height: var(--button-height);
  padding-inline: var(--space-md);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-button); line-height: var(--lh-button);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Primary — one per view. Shell label, never Ink (Ink on Action is 3.16:1). */
.btn--primary { background: var(--color-action-aa); color: var(--color-shell); }
@media (hover: hover) { .btn--primary:hover { background: var(--color-action-hover); } }
.btn--primary:active { background: var(--color-action-hover); opacity: .9; }

/* Secondary — a real alternative beside the primary. */
.btn--secondary {
  background: var(--color-surface); color: var(--color-text);
  border-color: var(--color-sand);
}
@media (hover: hover) {
  .btn--secondary:hover { background: var(--color-linen); border-color: var(--color-taupe); }
}
.btn--secondary:active { background: var(--color-sand); }

/* Tertiary / text. */
.btn--tertiary {
  min-height: var(--min-tap-target);
  padding-inline: var(--space-xs);
  background: none; color: var(--color-action-deep);
}
@media (hover: hover) {
  .btn--tertiary:hover { text-decoration: underline; text-underline-offset: 2px;
                         text-decoration-thickness: 2px; }
}

.btn--lg { min-height: var(--button-height-lg); padding-inline: var(--space-lg); }
.btn--sm { min-height: var(--button-height-sm); padding-inline: var(--space-sm);
           font-size: var(--size-body-sm); line-height: var(--lh-body-sm); }

.btn[aria-disabled="true"], .btn:disabled {
  background: var(--color-action-tint); color: var(--color-stone-aa);
  border-color: transparent; cursor: not-allowed; pointer-events: none;
}

.btn .icon { flex: none; }

/* Button groups — stack below 600px, primary first, 12px apart.
   12 is off the 8pt scale by design system §4.1, so this uses 8. */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
@media (max-width: 599px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* ==========================================================================
   2. ICONS (§9) — monoline, 24×24, 1.5px, round caps, currentColor.
   A subject icon always sits in a tint circle; a UI icon never does.
   ========================================================================== */

.icon {
  width: var(--icon-size); height: var(--icon-size);
  display: inline-block; vertical-align: middle;
  object-fit: contain;
  /* The artwork is two-tone raster, so it does not take `currentColor`.
     A glyph that must sit on the Action fill uses the pipeline's
     Shell-tinted copy instead of a CSS filter. See src/icons.js. */
}
.icon--sm { width: 20px; height: 20px; }
.icon--lg { width: 32px; height: 32px; }

.icon-chip {
  display: inline-grid; place-items: center; flex: none;
  width: var(--icon-chip-size); height: var(--icon-chip-size);
  border-radius: var(--radius-circle);
  background: var(--color-linen);
  color: var(--color-ink);
}
.icon-chip .icon { width: 50%; height: 50%; }   /* glyph is 50% of chip (§9.1) */
/* A line icon reads lighter than a filled illustration at the same size, so
   it is set a little smaller to match optically rather than numerically.
   Both rely on tools/build-icons.py having normalised every icon to one
   optical size; without that step these percentages mean nothing. */
.icon-chip--line .icon { width: 44%; height: 44%; }
.icon-chip--sm { width: 40px; height: 40px; }
.icon-chip--lg { width: 56px; height: 56px; }
.icon-chip--xl { width: 64px; height: 64px; }
/* Milestones and memories are the one celebratory thing in the product and
   carry the one different chip (§2.6). */
.icon-chip--accent { background: var(--color-accent-tint); }

/* ==========================================================================
   3. CARDS (§8)
   ========================================================================== */

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  box-shadow: var(--shadow-md);
}
.card--featured {
  background: var(--color-wheat);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
}
@media (min-width: 761px) { .card--featured { padding: var(--space-lg); } }

/* Feature card, marketing (§8.5). One variant per page: this build uses the
   Cream + 1px Sand border variant inside tinted panels and the Shell +
   shadow variant on Cream grounds. */
.card--flat {
  background: var(--color-cream);
  border: 1px solid var(--color-sand);
  box-shadow: var(--shadow-none);
}
.card--plain { background: transparent; box-shadow: none; padding: 0; }

/* Information card — part of the content, so never a shadow (§8.3). */
.card--info {
  background: var(--color-linen);
  box-shadow: var(--shadow-none);
  display: flex; gap: var(--space-sm); align-items: flex-start;
}
.card--info .icon-chip { background: var(--color-shell); }

.card-link {
  display: block; text-decoration: none; color: inherit;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
@media (hover: hover) {
  .card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
}
.card-link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.card .t-h4 { margin-top: var(--space-sm); }
.card .t-h4 + p { margin-top: var(--space-xs); }

/* Highlight — a quote or one reassuring statement. At most one per page. */
.highlight {
  background: var(--color-accent-tint);
  border-radius: var(--radius-2xl);
  padding: var(--space-lg) var(--space-md);
}
@media (min-width: 761px) { .highlight { padding: var(--space-lg) var(--space-xl); } }
@media (min-width: 1024px) { .highlight { padding: var(--space-lg) 48px; } }

/* ==========================================================================
   4. CHIPS & TAGS (§12)
   ========================================================================== */

.tag {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 28px; padding-inline: var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-linen); color: var(--color-ink);
  font-size: var(--size-caption); line-height: var(--lh-caption);
  font-weight: var(--weight-semibold);
}
.tag--accent { background: var(--color-accent-tint); }
.tag--outline { background: var(--color-surface); border: 1px solid var(--color-sand); }

/* ==========================================================================
   5. HEADER (§12)
   ========================================================================== */

.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-cream);
  padding-top: env(safe-area-inset-top);
  transition: background-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.header[data-scrolled="true"] {
  background: rgba(251, 242, 232, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--color-sand);
}
.header__inner {
  height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
}
.header__brand { display: inline-flex; align-items: center; flex: none;
                 min-height: var(--min-tap-target);   /* hit area, not just the mark */
                 text-decoration: none; }
.header__brand img { width: 132px; }
@media (max-width: 760px) { .header__brand img { width: 118px; } }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--space-md); }
}
.nav__link {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: var(--min-tap-target);
  padding-inline: var(--space-xs);
  font-weight: var(--weight-semibold);
  font-size: var(--size-nav); line-height: var(--lh-nav);
  color: var(--color-stone-aa);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
@media (hover: hover) { .nav__link:hover { color: var(--color-ink); } }
.nav__link[aria-current="page"] { color: var(--color-ink); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--space-xs); right: var(--space-xs);
  bottom: 14px; height: 2px; border-radius: 2px;
  background: var(--color-accent);
}
.header__cta { display: none; }
@media (min-width: 1024px) { .header__cta { display: inline-flex; } }
/* No nav means no mobile menu, so this button is the only thing in the header
   besides the wordmark — it shows at every width. */
.header__cta--always { display: inline-flex; }

/* Mobile menu — full-screen Cream overlay, not a drawer (§12). */
.menu-btn {
  display: inline-grid; place-items: center;
  width: var(--min-tap-target); height: var(--min-tap-target);
  border: 0; padding: 0; background: none; color: var(--color-ink);
  border-radius: var(--radius-circle); cursor: pointer;
}
@media (min-width: 1024px) { .menu-btn { display: none; } }
@media (hover: hover) { .menu-btn:hover { background: var(--color-linen); } }

.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--color-cream);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  visibility: hidden; opacity: 0;
  /* visibility flips instantly on open and only after the fade on close, so
     the close button is focusable the moment the menu is asked to open. */
  transition: opacity var(--duration-fast) var(--ease-standard),
              visibility 0s linear var(--duration-fast);
}
.mobile-menu[data-open="true"] {
  visibility: visible; opacity: 1;
  transition: opacity var(--duration-fast) var(--ease-standard),
              visibility 0s linear 0s;
}
/* The overlay's wrap has to be the flex child that grows, or the footer's
   margin-top:auto has nothing to push against. */
.mobile-menu > .wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mobile-menu__top {
  height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between;
}
/* Scoped to the wordmark: a bare `img` here also catches the close
   button's icon, which the old inline-SVG set was immune to. */
.mobile-menu__top .header__brand img { width: 118px; }
.mobile-menu__links {
  list-style: none; margin: var(--space-lg) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-md);
}
.mobile-menu__links a {
  display: inline-flex; align-items: center;
  min-height: var(--min-tap-target);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-h4); line-height: var(--lh-h4);
  color: var(--color-ink); text-decoration: none;
}
.mobile-menu__links a[aria-current="page"] { color: var(--color-accent-deep); }
.mobile-menu__foot { margin-top: auto; padding-block: var(--space-md); }
.mobile-menu__foot .btn { width: 100%; }

body[data-menu-state="true"] { overflow: hidden; }

/* ==========================================================================
   6. FOOTER (§12) — Cream, never dark.
   ========================================================================== */

.footer {
  background: var(--color-cream);
  border-top: 1px solid var(--color-sand);
  padding-top: 48px; padding-bottom: var(--space-lg);
}
@media (min-width: 761px) { .footer { padding-top: var(--space-2xl);
                                      padding-bottom: var(--space-2xl); } }
.footer__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 761px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr;
                                             gap: var(--space-xl); } }
.footer__brand img { width: 140px; }
.footer__brand p { margin-top: var(--space-sm); }
.footer__col ul { list-style: none; margin-top: var(--space-sm); }
/* No gap between rows: the 44px hit areas already set the rhythm, and
   stacking a margin on top of them makes the footer needlessly tall. */
.footer__col a {
  display: inline-flex; align-items: center;
  min-height: var(--min-tap-target);
  color: var(--color-stone-aa); text-decoration: none;
  font-size: var(--size-body-sm); line-height: var(--lh-body-sm);
  transition: color var(--duration-fast) var(--ease-standard);
}
@media (hover: hover) { .footer__col a:hover { color: var(--color-ink);
                                               text-decoration: underline;
                                               text-underline-offset: 2px; } }
.footer__bar {
  margin-top: var(--space-xl); padding-top: var(--space-md);
  border-top: 1px solid var(--color-sand);
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md);
  align-items: center; justify-content: space-between;
}

/* ==========================================================================
   7. ACCORDION (§12)
   ========================================================================== */

.accordion { }
.accordion + .accordion { margin-top: var(--space-md); }
.accordion__group-title { margin-bottom: var(--space-sm); }
.accordion__item { border-bottom: 1px solid var(--color-linen); }
.accordion__item:last-child { border-bottom: 0; }
.accordion__btn {
  width: 100%; min-height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--size-body); line-height: var(--lh-body);
  font-weight: var(--weight-semibold);
  color: var(--color-ink); text-align: left;
}
.accordion__btn:focus-visible { outline: var(--focus-ring); outline-offset: 0; }
.accordion__btn .icon { flex: none; color: var(--color-taupe);
                        transition: transform var(--duration-base) var(--ease-standard); }
.accordion__btn[aria-expanded="true"] .icon { transform: rotate(90deg); }
/* Open by default so every answer is readable — and indexable — without
   JavaScript. site.js collapses them on load. */
.accordion__panel { display: block; padding-bottom: var(--space-sm); }
.accordion__panel[data-open="false"] { display: none; }
.accordion__panel p { color: var(--color-muted); }

/* ==========================================================================
   8. FORMS (§12)
   ========================================================================== */

.field + .field { margin-top: var(--space-sm); }
.field__label {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: var(--size-caption); line-height: var(--lh-caption);
  letter-spacing: .3px;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}
.field__input, .field__textarea {
  width: 100%;
  min-height: var(--input-height);
  padding: 12px var(--space-sm);
  background: var(--color-linen);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  /* 16px is a hard minimum — iOS Safari zooms the viewport below it. */
  font-size: 16px; line-height: 24px;
  color: var(--color-ink);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
/* A textarea sets font-size alone — a line-height here clips descenders. */
.field__textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
.field__input::placeholder, .field__textarea::placeholder { color: var(--color-stone-aa); }
.field__input:focus-visible, .field__textarea:focus-visible {
  background: var(--color-shell);
  border-color: var(--color-taupe);
  outline: var(--focus-ring); outline-offset: var(--focus-offset);
}
.field__help { margin-top: var(--space-xs); }

/* ==========================================================================
   9. STEPS — the numbered how-it-works flow
   ========================================================================== */

.steps { list-style: none; counter-reset: step; }
.steps > li { position: relative; counter-increment: step;
              padding-left: var(--space-2xl); }
.steps > li + li { margin-top: var(--space-lg); }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--radius-circle);
  /* Shell with a Sand hairline, not Linen: a Linen disc vanishes when the
     steps sit inside a Linen panel, which is exactly where they do sit. */
  background: var(--color-shell);
  border: 1px solid var(--color-sand);
  color: var(--color-ink);
  font-weight: var(--weight-bold);
  font-size: var(--size-h5); line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* The connecting rule between steps. Space separates; this line is for when
   space cannot carry the sequence. */
.steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 23px; top: 56px; bottom: -32px;
  width: 1px; background: var(--color-sand);
}

/* ==========================================================================
   10. TRACKER INDEX — two-column list of what the app records
   ========================================================================== */

/* --------------------------------------------------------------------------
   The ten trackers, Home only. A chip and a name — no rule, no description.
   The Features page carries the same ten with their descriptions; repeating
   those here made Home argue the same point twice in two paragraph-heavy
   blocks. Home's job is breadth: *ten*, covering the whole journey.

   Three things decide the layout, and all three were measured rather than
   reasoned about:

   1. Ten divides cleanly by 2 and by 5, never by 3 or 4 — a three-column
      version leaves a last row of one, which reads as a mistake. So the grid
      steps 2 → 5 and skips the sizes between.
   2. The name sits beside its chip, never under it. Stacked, a 60px word in a
      160–205px cell leaves most of the cell empty and the ten read as
      scattered marks rather than one list; on a phone it also ran 828px,
      which is a lot of scrolling for ten short words. Inline: 604px.
   3. `Appointments` is one unbreakable ~113px word, and it sets every
      remaining number. A cell has to clear chip + gap + 113px or it pushes
      into the right gutter. That is why five columns wait for desktop (at the
      tablet width they are 132px), why the grid is capped short of the 1120
      wrap, and why the chip is 40px rather than the default 48.
   -------------------------------------------------------------------------- */
.tracker-grid {
  list-style: none; display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-sm);
}
.tracker-grid li {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; justify-items: start;
  gap: var(--space-sm);
  min-width: 0;                       /* let the long names wrap, not overflow */
}
/* 40, not the default 48: the 8px buys the headroom `Appointments` needs in
   the narrowest cell. The chip steps down rather than the label, because §14
   fixes label sizes across breakpoints and a 15px label here is how a type
   scale starts to drift. */
.tracker-grid .icon-chip { width: 40px; height: 40px; }

@media (max-width: 760px) {
  .tracker-grid { column-gap: var(--space-xs); }
  .tracker-grid li { gap: var(--space-xs); }
}
@media (min-width: 1024px) {
  .tracker-grid {
    grid-template-columns: repeat(5, 1fr);
    max-width: 980px;
    /* 16, not 24: at exactly 1024 the wrap is 960 and the columns are at their
       tightest, and the wider gap left `Appointments` 10px short of a line. */
    column-gap: var(--space-sm); row-gap: var(--space-lg);
  }
}
/* The floor, for the 320px screens where even that headroom runs out. Neither
   property does anything at a width where the word already fits, so this is a
   safety net, not a layout choice. `hyphens` gives the nicer result where the
   engine ships hyphenation dictionaries — headless Chromium does not, so it
   is not something to rely on, and `overflow-wrap` is the guarantee.

   It has to be `anywhere`, not `break-word`: only `anywhere` lowers the grid
   column's own minimum size, and the column is what refuses to shrink.
   `break-word` wraps text inside a box but lets the box stay as wide as the
   longest word, which is the overflow being fixed. */
.tracker-grid .t-h5 { text-wrap: balance; hyphens: auto; overflow-wrap: anywhere; }

.tracker-list { list-style: none; display: grid; gap: 0; }
@media (min-width: 761px) { .tracker-list { grid-template-columns: repeat(2, 1fr);
                                            column-gap: var(--space-xl); } }
.tracker-list li {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-sand);
}
.tracker-list li > div { min-width: 0; }
.tracker-list .t-h5 { margin-bottom: var(--space-2xs); }

/* ==========================================================================
   11. MASCOT PLACEMENT (§10.6) — Linen halo, no shadow, never on a photo.
   ========================================================================== */

.mascot { position: relative; display: grid; place-items: center; }
.mascot::before {
  content: ""; position: absolute;
  width: 86%; aspect-ratio: 1; border-radius: var(--radius-circle);
  background: var(--color-linen);
}
.mascot img { position: relative; width: 100%; max-width: 420px; }
.mascot--sm img { max-width: 260px; }

/* ==========================================================================
   12. MISC
   ========================================================================== */

.hr { height: 1px; background: var(--color-sand); border: 0; margin: 0; }

.note {
  margin-top: var(--space-md);
  background: var(--color-linen);
  border-left: 3px solid var(--color-action-deep);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  display: flex; gap: var(--space-sm); align-items: flex-start;
}
.note .icon { flex: none; color: var(--color-action-deep); margin-top: 2px; }
.note p { font-size: var(--size-body-sm); line-height: var(--lh-body-sm);
          color: var(--color-muted); }
.note p strong { color: var(--color-ink); }

.stat { }
.stat__value {
  font-family: var(--font-body); font-weight: var(--weight-bold);
  font-size: var(--size-numeric); line-height: var(--lh-numeric);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

/* ==========================================================================
   13. HERO
   Section spacing from design system §4.3. The art is scaled to the
   reference board's imagery scale (PROJECT-RULES §6 allows a reference to
   drive imagery scale, section air and overall loudness) and is allowed to
   run past its column — this is the page's one break in the grid (§14).
   ========================================================================== */

.hero {
  padding-top: var(--space-md);
  padding-bottom: var(--space-xl);
  overflow-x: clip;            /* contains the grid break */
}
@media (min-width: 761px)  { .hero { padding-top: var(--space-lg);
                                     padding-bottom: var(--space-2xl); } }
@media (min-width: 1024px) { .hero { padding-top: var(--space-lg);
                                     padding-bottom: var(--space-2xl); } }

.hero__inner { align-items: center; }
.hero__art { display: grid; place-items: center; }

/* The mascot overruns its column and lifts above the text's cap line, so the
   hero reads as one composition rather than a column of text beside a
   picture. Clipped by .hero's overflow, so it can never cause a scrollbar. */
/* The artwork sits inside its column rather than running past it. It is the
   hero's second element, not its subject — the headline is the subject. */
/* The artwork sets the hero's height on its own: at 440px wide it is 591px
   tall, and the whole band was 687px, so the text column was never the
   constraint. That left the hero filling 85-88% of a laptop screen with only
   15-51px of the next section showing — no signal that the page continues.
   Smaller art, and the band comes down with it roughly one-for-one until the
   text column becomes the taller element. Well clear of §10.3's 96px floor. */
@media (min-width: 1024px) {
  .hero .mascot img { max-width: 330px; }
}
@media (min-width: 1440px) {
  .hero .mascot img { max-width: 360px; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .hero .mascot img { max-width: 290px; }
}
@media (max-width: 760px) {
  /* On a phone the art stacks *below* the button, so every pixel of it is
     decoration the reader scrolls past after they have already seen the one
     thing the hero is asking them to do. It is the single largest item in the
     band (298px of 840), so it is the one that comes down. */
  .hero .mascot img { max-width: 170px; }
  .hero .mascot { margin-top: 0; }
  .hero__inner { gap: var(--space-md); }
}

/* A feathered Linen halo rather than a hard disc — §10.6's halo, softened so
   the edge of the circle does not cut across the artwork. */
.hero .mascot::before {
  width: 96%; height: 96%; aspect-ratio: auto;
  background: radial-gradient(closest-side,
              var(--color-linen) 0%,
              var(--color-linen) 52%,
              rgba(247, 231, 218, 0) 100%);
}

/* ==========================================================================
   13b. BENEFIT STRIP
   Four plain blocks on a tint panel, directly under the hero. No cards: the
   panel is the surface, and a card on a tint ground would be a second
   surface doing the same job.
   ========================================================================== */

.benefits { display: grid; gap: var(--space-lg) var(--grid-gap); }
@media (min-width: 600px)  { .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benefits { grid-template-columns: repeat(4, 1fr);
                                         gap: var(--space-md); } }
.benefits .icon-chip { background: var(--color-shell); }
.benefits h3 { margin-top: var(--space-sm); }
.benefits p  { margin-top: var(--space-xs); }

/* ==========================================================================
   14. PRIVACY POINTS — a hairline-ruled list, not cards
   ========================================================================== */

.privacy-points { list-style: none; }
.privacy-points li {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding-block: var(--space-sm);
  border-top: 1px solid var(--color-sand);
}
.privacy-points li:last-child { border-bottom: 1px solid var(--color-sand); }
.privacy-points .t-h5 { margin-bottom: var(--space-2xs); }

/* ==========================================================================
   15. STAGE CARDS — pregnancy / newborn / toddler
   ========================================================================== */

.stage-card { display: flex; flex-direction: column; height: 100%; }
.stage-card ul { margin-top: var(--space-sm); }

/* ==========================================================================
   16. TWO-COLUMN DEFINITION LIST — used on Privacy and About
   ========================================================================== */

.deflist { }
.deflist > div { padding-block: var(--space-md); border-top: 1px solid var(--color-sand); }
.deflist > div:last-child { border-bottom: 1px solid var(--color-sand); }
@media (min-width: 761px) {
  .deflist > div { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-lg); }
}
.deflist dt { font-weight: var(--weight-semibold);
              font-size: var(--size-h5); line-height: var(--lh-h5); }
.deflist dd { margin: var(--space-xs) 0 0; color: var(--color-muted);
              font-size: var(--size-body-sm); line-height: var(--lh-body-sm);
              max-width: var(--measure-prose); }
@media (min-width: 761px) { .deflist dd { margin-top: 0; } }


/* ==========================================================================
   17. JUMP LINKS — an in-page index at the top of a long page
   ========================================================================== */

.jumps { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; }
.jumps a {
  display: inline-flex; align-items: center;
  min-height: var(--min-tap-target);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-sand);
  color: var(--color-ink); text-decoration: none;
  font-size: var(--size-body-sm); line-height: var(--lh-body-sm);
  font-weight: var(--weight-semibold);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
@media (hover: hover) {
  .jumps a:hover { background: var(--color-linen); border-color: var(--color-taupe); }
}

/* ==========================================================================
   18. MUTED TEXT ON A TINTED GROUND
   --------------------------------------------------------------------------
   The design system measures Stone AA (#7B6556) against Cream, where it is
   4.94:1. On the warmer grounds it is not: 4.31:1 on Accent Tint and 4.07:1
   on Wheat, both below AA. Inside those grounds muted text steps to Bark
   (#6A4A35), which measures 6.11:1 and 5.75:1 respectively.

   This overrides the alias, not the palette — no new colour is introduced,
   and the swatch tokens keep their documented values.
   ========================================================================== */

.highlight,
.panel,
.panel--accent,
.panel--wheat,
.card--featured { --color-muted: var(--color-bark); }

/* The brand's one emphasis word (§2.4). Terracotta is the single spark in
   this palette and the thing that stops it reading as dead beige — and it was
   painted nowhere on the site. Accent Deep measures 5.69:1 on Cream, so it
   clears AA at display size with room to spare. One per view is the budget,
   and the hero headline is the view it belongs to. */
.t-display em,
.t-hero em { font-style: normal; color: var(--color-accent-deep); }

/* ==========================================================================
   18b. THE BOTANICAL SPRIG
   --------------------------------------------------------------------------
   A tonal watermark, not an illustration. See the component comment in
   src/components.js for the two rules that keep it from becoming wallpaper.

   `overflow: clip` on the host is load-bearing: the sprig is sized and placed
   to run past the section edge, and without the clip it would widen the
   document — which `tools/shoot.mjs` checks for on every run.
   ========================================================================== */

.has-sprig { position: relative; overflow: clip; }

.sprig {
  position: absolute;
  width: 120px; height: auto;
  color: var(--color-wheat);     /* 1.22:1 on Cream — present, not loud */
  pointer-events: none;
  z-index: 0;
}
/* On a Wheat panel the same value would vanish, so it steps to Sand. */
.panel .sprig { color: var(--color-sand); opacity: .55; }

/* The content has to sit above it. */
.has-sprig > .wrap { position: relative; z-index: 1; }

.sprig--tr { top: -28px;    right: 4%; transform: rotate(14deg); }
/* Bottom-right, not bottom-left: the tracker grid is capped at 980px inside a
   1120 wrap, so the right of that section is genuinely empty. On the left the
   sprig sat behind the first column of chips and fought the labels. */
.sprig--br { bottom: -40px; right: 1%; transform: rotate(168deg); }

@media (min-width: 1024px) {
  .sprig       { width: 168px; }
  .sprig--tr   { right: 7%; }
}
/* Below the tablet breakpoint the columns are stacked and the margins are
   narrow, so an ornament at the edge crowds the text rather than framing it. */
@media (max-width: 760px) { .sprig { display: none; } }

/* ==========================================================================
   19. LEGAL — the Privacy Policy, injected verbatim
   --------------------------------------------------------------------------
   The policy's markup comes from the app repo and is NOT edited (see the
   header comment in src/pages/privacy.js). These rules style whatever plain
   HTML it contains — headings, numbered clauses, lists, links — so it reads
   as part of this site without a single character of it changing.
   ========================================================================== */

/* The page's own "Privacy Policy" heading sits OUTSIDE this wrapper: `.legal h2`
   would otherwise out-specify `.t-h2` and restyle it as a clause heading. */
.legal { max-width: var(--measure-prose); margin-top: var(--space-lg); }

/* The policy's own headings sit a tier below the page's H2. */
.legal h1 { font-family: var(--font-display); font-weight: var(--weight-medium);
            font-size: var(--size-h3); line-height: var(--lh-h3);
            letter-spacing: var(--tracking-heading);
            margin: var(--space-2xl) 0 var(--space-md); }
.legal h2 { font-family: var(--font-body); font-weight: var(--weight-semibold);
            font-size: var(--size-h4); line-height: var(--lh-h4);
            margin: var(--space-lg) 0 var(--space-xs); }
.legal h3, .legal h4 {
            font-family: var(--font-body); font-weight: var(--weight-semibold);
            font-size: var(--size-h5); line-height: var(--lh-h5);
            margin: var(--space-md) 0 var(--space-2xs); }
.legal > *:first-child { margin-top: 0; }

.legal p { margin: 0 0 var(--space-sm); color: var(--color-muted); }
.legal strong { color: var(--color-text); }

.legal ul, .legal ol { margin: 0 0 var(--space-sm); padding-left: var(--space-md);
                       color: var(--color-muted); }
.legal li + li { margin-top: var(--space-xs); }
.legal li::marker { color: var(--color-taupe); }

.legal a { color: var(--color-action-deep); }

.legal hr { height: 1px; border: 0; background: var(--color-sand);
            margin-block: var(--space-lg); }

.legal table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-sm);
               font-size: var(--size-body-sm); line-height: var(--lh-body-sm); }
.legal th, .legal td { text-align: left; padding: var(--space-xs) var(--space-sm);
                       border-bottom: 1px solid var(--color-sand); }
.legal th { font-weight: var(--weight-semibold); color: var(--color-text); }
.legal td { color: var(--color-muted); }

/* A date line or similar sitting on its own above the first clause. */
.legal time, .legal .updated { display: block; color: var(--color-muted);
                               font-size: var(--size-body-sm);
                               line-height: var(--lh-body-sm);
                               margin-bottom: var(--space-lg); }