/* .column, .prose, .section-heading, .footnote — styles for
   src/lib/expand.mjs's `x-column`, `x-prose`, `x-heading`, `x-footnote`.
   Load AFTER tokens.css. See public/components/README.md for load
   order and the split rationale. */

.column {
  max-width: var(--column);
  margin: 0 auto;
  padding: var(--space-6) var(--space-3) var(--space-8);
}

/* --column-wide (1080px, layout.css) rather than --column (760px): a page
   with multi-column grids — a text-plus-figure split, a feature grid — needs
   the room a single prose measure does not. The auto landing page is the
   first to use it.

   Horizontal padding is also overridden, to --column-wide-inset rather than
   the inherited --space-3: a --column-wide page pairs this with .hero and
   .site-header (hero.css, header.css), which use that same inset, and
   --space-3 is a fixed 24px while --column-wide-inset is a clamp that grows
   with the viewport — past a certain width the two stopped agreeing even
   though all three shared the same max-width. */
.column--wide {
  max-width: var(--column-wide);
  padding-left: var(--column-wide-inset);
  padding-right: var(--column-wide-inset);
}

.prose {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
  font-size: var(--size-500);
  line-height: var(--line-height-prose);
  text-wrap: pretty;
}

/* Same size as .prose, muted colour — a second paragraph continuing the
   thought in a quieter voice, not a footnote. Distinct from
   .text-muted-note (below), which is --size-400 and meant for something
   smaller (a pricing disclosure, a caption) — reusing it here would have
   shrunk this paragraph along with whatever else already uses it. */
.prose-muted {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
  font-size: var(--size-500);
  line-height: var(--line-height-prose);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.section-heading {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--size-700);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
}

.footnote {
  margin: var(--space-1) 0 0;
  font-size: var(--size-100);
  line-height: var(--line-height-prose);
  opacity: 0.75;
}

/* --- section composition -------------------------------------------------- */
/* A handful of small layout primitives for pages built from stacked
   sections rather than a single flow — the auto landing page is the first,
   but the shape (heading, then content, separated from the next section by
   a hairline rather than a box) is generic across marketing pages. See
   guidance/microsite-subsection-layout.md: "Sections are separated by a
   hairline rule, not by boxes." */

/* Groups a section's own children with one consistent gap, so a heading, a
   media split, a feature grid and a CTA row do not each need their own
   margin-top tuned by hand. */
.section-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 40px);
}

/* .section-heading's own margin-bottom (--space-2, 16px) and .section-stack's
   gap are two independent spacing mechanisms — flex `gap` does not collapse
   with a child's own margin, it adds to it. Every section built as
   .section-stack > .section-heading + body (auto's page and apricotter.com's
   homepage both do this) was getting 16px + 28-40px = 44-56px under every
   heading, visibly heavier than any of the approved designs call for.
   Zeroing the heading's own margin here leaves .section-stack's gap as the
   ONE spacing source for a section's heading-to-body relationship, rather
   than two rules quietly stacking. */
.section-stack > .section-heading {
  margin-bottom: 0;
}

/* The hairline between two stacked sections. Applied to the section that
   FOLLOWS the rule, not a <hr>, so the gap above and below can differ from
   the gap inside .section-stack. */
.section-divider {
  border-top: var(--border-width-hairline) solid var(--color-border-subtle);
  padding-top: clamp(32px, 4vw, 48px);
  margin-top: clamp(56px, 7vw, 96px);
}

/* A heading with something (a Partner tag, a badge) inline beside it. */
.heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.heading-row .section-heading {
  margin: 0;
}

/* Centers a single CTA below a section's content. */
.section-cta {
  display: flex;
  justify-content: center;
  padding-top: var(--space-2);
}

.text-muted-note {
  margin: 0;
  font-size: var(--size-400);
  color: var(--color-text-muted);
}

/* Marks a brand/product name inline, in running text or a heading — the
   first mention of "Shop Watch" in the Shop Watch section, not every
   occurrence. --color-mark-accent is the same static accent bullets, step
   numerals and the price tag already use, so this reads as one system doing
   the same job in a new place rather than a new colour. */
.text-accent {
  color: var(--color-mark-accent);
}

/* A figure with a caption, spaced tighter than .prose's paragraph rhythm —
   the caption is a label for the image above it, not body copy. */
.figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* CTAs side by side ("Want to chat?"'s Text/Email/Call) — distinct from
   .section-cta above, which centers a single button. flex: 1 1 auto on the
   buttons themselves (not just this row) so they fill the row as equal-
   width siblings rather than sizing to their own label — the only current
   consumer is a 3-up row where that reads as one deliberate set, not three
   differently-important actions. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.cta-row .btn {
  flex: 1 1 auto;
}

/* --- statement list ---------------------------------------------------- */
/* "How we work"'s three input/process/output rows: a claim beside its
   plain-language support, separated by hairlines rather than three numbered
   cards — "the numbered three-up grid is the SaaS trope this page is trying
   not to be" (APRICOTTER-HOMEPAGE.md). flex-basis in ch units, not a grid
   with a fixed first column: a minmax(0,300px) 1fr grid held its two columns
   at phone width and crushed the support text to one word per line (same
   doc, "Layout notes"). */
.statement-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.statement-list__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
}

.statement-list__row:last-child {
  border-bottom: none;
}

.statement-list__claim {
  flex: 1 1 22ch;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: var(--size-500);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
  text-wrap: balance;
}

.statement-list__support {
  flex: 1 1 26ch;
  min-width: 0;
  max-width: var(--measure);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* --- statement card -------------------------------------------------------- */
/* A single-argument lede — one bordered card with a vertical accent bar,
   not a list row. design/SHOP-WATCH-LEDE-SPEC.md has the full reasoning:
   a card because this is the one place under the hero making an argument
   rather than listing facts (at prose size it read as a caption under the
   photo); a vertical bar rather than a rule underneath because a horizontal
   rule read as a divider between sections instead of as part of the
   statement; two blocks rather than one wrapped paragraph so the second
   sentence always starts its own line, carrying the emphasis a removed
   heading used to provide.

   font-size uses --size-700 (x-heading's own size), not a larger step: the
   original comp ran slightly larger, but no token between --size-700 (2rem)
   and the hero-only steps exists — --size-800 is actually SMALLER (1.85rem),
   not a next step up, so it is not a substitute. Matching x-heading exactly
   was the honest choice available rather than inventing a new token for a
   one-page nuance. */
.statement-card {
  display: flex;
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
  background-color: var(--color-surface-raised);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-default);
}

.statement-card::before {
  content: "";
  flex: none;
  width: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-mark-accent);
}

.statement-card__text {
  margin: 0;
  flex: 1;
  font-family: var(--font-serif);
  font-size: var(--size-700);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: pretty;
}

.statement-card__lead {
  display: block;
  margin-bottom: 0.5em;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  /* Found live via render-snippet: at some widths the lead wraps at a
     hyphenated compound's own hyphen ("...is not a one-" / "time task."),
     which reads as a stumble rather than a line break. balance evens the
     two lines and usually moves the break off the hyphen — the general
     fix, not a per-string one, since any future lead sentence is short
     enough that balance is the right treatment regardless of its exact
     wording. */
  text-wrap: balance;
}

.statement-card__follow {
  display: block;
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

/* --- rule list ----------------------------------------------------------- */
/* A short list of already-complete statements, rule-separated top and
   bottom rather than bulleted. Distinct from .fact-list (compact,
   dot-bulleted — for shorter, more numerous claims that read fine as
   fragments) and .statement-list (two-column claim+support pairs): this is
   for a handful of full sentences that each carry their own weight, where
   a bullet dot reads as fine print underselling them next to body-size
   text above and a .statement-list row pattern below. First used on the
   shop-watch offer page's "What you get" section (design/
   SHOP-WATCH-OFFER-PAGE.md), which made exactly this case against the
   bulleted list this page originally shipped with. */
.rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 76ch;
}

.rule-list__item {
  position: relative;
  padding: clamp(14px, 2vw, 18px) 0 clamp(14px, 2vw, 18px) 1.4rem;
  border-top: var(--border-width-hairline) solid var(--color-border-subtle);
  font-size: var(--size-400);
  line-height: var(--line-height-body);
  text-wrap: pretty;
}

.rule-list__item:last-child {
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
}

/* Same dot, same token, same job as .fact-list__item::before — a mark, not
   a bullet-as-punctuation, so it reads as one system with the rest of the
   site's lists rather than a browser-default disc. */
.rule-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(clamp(14px, 2vw, 18px) + 0.62em);
  width: var(--list-bullet-size);
  height: var(--list-bullet-size);
  border-radius: var(--radius-pill);
  background-color: var(--list-bullet-color);
}