/* Public marketing page bodies (doc 42).

   Split out of `landing.css`, which doc 41 §6 anticipated ("extend it into
   marketing.css") and which is now worth doing: landing.css owns the header,
   mega-menu and mobile drawer — chrome that also appears on the sign-in and
   password-reset pages — while this file owns the page bodies, which only
   marketing uses. A nav change and a content-page change no longer touch the
   same file.

   WHAT THIS REPLACES, and why the old version read as unfinished:

   * Section headings were styled with `.landing-section > h2`, a direct-child
     selector. Two home-page headings sit inside a wrapper div, so the rule never
     matched them and they rendered at the inherited 18.4px — smaller than the
     body copy beside them, while their siblings rendered at 30px. Everything
     here is a descendant selector or an explicit class for that reason.
   * The largest type token was 1.9rem and the largest space token 3rem, so every
     section had identical ~40px padding and no heading was ever more than 1.6x
     the body copy. The page had no hierarchy to read. The --mkt-* scale in
     tokens.css fixes the cause; this file spends it.
   * Feature grids were bare `h3 + p` with no card, border or icon, which is
     indistinguishable from unstyled HTML.
   * Body links inherited the browser default blue, inside a terracotta palette.

   PALETTE. No second brand (doc 41 §1). Colour comes from --accent-strong
   (6.03:1 on --background, so it is safe for small text and links) and the status
   pills. --primary / --accent is 3.66:1 and stays restricted to large or
   decorative use. The surfaces below are marketing-local because the product's
   --card-theme is identical to its --background, which would make a card on a
   cream section invisible. */

:root {
  /* Cards and framed UI need to lift off cream; the product never needs this. */
  --mkt-surface: #ffffff;
  /* The tinted band. --muted-theme is warmer than --secondary and reads as a
     surface rather than as a grey box. */
  --mkt-tint: var(--muted-theme);
  /* One dark band per page, matching the hero scrim's warm near-black so the
     top and bottom of the page belong to the same palette. */
  --mkt-dark: #17140f;
  --mkt-dark-ink: #f7f4ec;
  --mkt-dark-muted: rgba(247, 244, 236, .72);
  --mkt-dark-line: rgba(247, 244, 236, .18);
  --mkt-line: var(--border);
}

/* === "In active development" notice ======================================== */

/* Sits above the sticky nav, so it scrolls away once and does not permanently
   occupy a phone's viewport. Terracotta on the dark surface rather than a yellow
   warning bar: this is a status, not a problem, and a browser-default warning
   colour would be the loudest thing on a deliberately restrained page. */
.dev-notice {
  margin: 0;
  padding: var(--space-3) max(var(--space-5), calc((100% - var(--mkt-measure)) / 2));
  background: var(--mkt-dark);
  color: var(--mkt-dark-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}
.dev-notice__tag {
  flex: none;
  padding: .1rem .55rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  color: var(--primary);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dev-notice__text { flex: 1 1 18rem; }
.dev-notice a { color: var(--mkt-dark-ink); text-decoration: underline; }
.dev-notice a:focus-visible { outline: 2px solid var(--mkt-dark-ink); outline-offset: 3px; }

/* === Container and rhythm ================================================== */

/* `.wrap` is the application's 30rem form column and left a marketing page as a
   ribbon in the middle of a desktop screen; `_page_base.html` overrides the
   block to `.site-main` for that reason. */
.site-main { width: 100%; }

/* Every section resolves the same column expression as the header and footer, so
   the whole site reads off one left edge. See the matching rule in landing.css. */
.mkt-section,
.mkt-pagehead,
.mkt-stats {
  padding-inline: max(var(--space-5), calc((100% - var(--mkt-measure)) / 2));
}

.mkt-section { padding-block: var(--mkt-section-y); }

/* Surfaces alternate to segment the page without rules. A tint with tight
   padding reads as a box rather than a passage, so tinted bands get more. */
.mkt-section--tint {
  background: var(--mkt-tint);
  padding-block: calc(var(--mkt-section-y) * 1.15);
}
.mkt-section--dark {
  background: var(--mkt-dark);
  color: var(--mkt-dark-ink);
  padding-block: calc(var(--mkt-section-y) * 1.15);
}
/* Consecutive same-surface sections would otherwise double their padding and
   open a gap that looks like a missing block. */
.mkt-section + .mkt-section:not([class*="--"]) { padding-block-start: 0; }

/* === Type ================================================================== */

/* Display type is the serif; everything else stays in Inter. The split is the
   whole typographic idea (doc 42 §2), so it is set once here rather than
   repeated per component. */
.mkt-hero h1,
.mkt-pagehead h1,
.mkt-section h2,
.mkt-quote p,
.mkt-figure__value {
  font-family: var(--font-serif);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.mkt-section h2 {
  font-size: var(--mkt-h2);
  line-height: 1.14;
  margin: 0 0 var(--space-4);
  max-width: 24ch;
}
/* A heading that introduces a wide grid may run wider than a narrow prose one. */
.mkt-section h2.is-wide { max-width: 34ch; }

.mkt-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 var(--space-3);
}
.mkt-section--dark .mkt-eyebrow { color: var(--primary); }

.mkt-lede {
  font-size: var(--mkt-lede);
  line-height: 1.55;
  color: var(--muted);
  max-width: var(--mkt-prose);
  margin: 0;
}
.mkt-lede + .mkt-lede { margin-top: var(--space-4); }
.mkt-section--dark .mkt-lede { color: var(--mkt-dark-muted); }

.mkt-note {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--mkt-prose);
  margin: var(--space-5) 0 0;
}
.mkt-section--dark .mkt-note { color: var(--mkt-dark-muted); }

/* The head block: eyebrow, heading, lede. Capped so a heading never runs the
   full width of a desktop screen, which is the most common reason a content
   page feels amateur (doc 41 §1). */
.mkt-head { max-width: 46rem; margin-bottom: var(--space-8); }
.mkt-head > :last-child { margin-bottom: 0; }

/* Prose links. The default browser blue inside a terracotta palette was the most
   obviously wrong colour on the site. */
.mkt-link,
.mkt-section p a,
.mkt-section li a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  font-weight: 500;
}
.mkt-section p a:hover,
.mkt-section li a:hover,
.mkt-link:hover { text-decoration-thickness: 2px; }
.mkt-section--dark p a,
.mkt-section--dark li a { color: var(--mkt-dark-ink); }

/* A standalone forward link, used to close a section that continues elsewhere. */
.mkt-more {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-top: var(--space-6);
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: none;
}
.mkt-more::after { content: "→"; transition: transform .2s; }
.mkt-more:hover { text-decoration: underline; }
.mkt-more:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .mkt-more::after { transition: none; }
  .mkt-more:hover::after { transform: none; }
}

/* === Buttons =============================================================== */

/* One button system. The site previously mixed a pill in the header with a
   rounded rectangle in the hero and a third shape in the drawer. Height is
   pinned at 2.75rem so a primary and a secondary button always align, and so
   every target clears the 44px touch minimum. */
.mkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 2.75rem;
  padding: 0 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.mkt-btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .mkt-btn, .mkt-btn:hover { transition: none; transform: none; }
}

/* --accent-strong, not --primary: white on --primary is 3.66:1 and fails AA. */
.mkt-btn--primary {
  background: var(--accent-strong);
  color: var(--primary-foreground);
}
.mkt-btn--primary:hover { background: #87381f; }

.mkt-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.mkt-btn--ghost:hover { background: var(--ink); color: var(--background); }

/* On the dark band and over the hero photograph. */
.mkt-section--dark .mkt-btn--ghost,
.mkt-hero .mkt-btn--ghost {
  color: var(--mkt-dark-ink);
  border-color: rgba(247, 244, 236, .55);
}
.mkt-section--dark .mkt-btn--ghost:hover,
.mkt-hero .mkt-btn--ghost:hover {
  background: var(--mkt-dark-ink);
  color: var(--mkt-dark);
  border-color: var(--mkt-dark-ink);
}

.mkt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* === Hero ================================================================== */

/* Full-bleed photograph, text in a column over a gradient scrim. B&W feathers
   sit mid-tone, so the scrim is measured rather than eyeballed (doc 41 §1) —
   it reaches 0.92 alpha at the left where the headline sits. */
.mkt-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(42rem, 82vh);
  overflow: hidden;
}
.mkt-hero__media { position: absolute; inset: 0; z-index: -2; }
.mkt-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.mkt-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(10, 9, 8, .94) 0%, rgba(10, 9, 8, .86) 38%,
                            rgba(10, 9, 8, .48) 68%, rgba(10, 9, 8, .22) 100%);
}
.mkt-hero__body {
  width: 100%;
  color: var(--mkt-dark-ink);
  padding-block: var(--space-10);
  padding-inline: max(var(--space-5), calc((100% - var(--mkt-measure)) / 2));
}
.mkt-hero__inner { max-width: 34rem; }
.mkt-hero .mkt-eyebrow { color: rgba(247, 244, 236, .8); }
.mkt-hero h1 {
  font-size: var(--mkt-display);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-5);
  color: var(--mkt-dark-ink);
}
/* The one piece of emphasis on the page's largest type. */
.mkt-hero h1 em { font-style: italic; font-weight: 600; }
.mkt-hero .mkt-lede {
  color: rgba(247, 244, 236, .92);
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  max-width: 32rem;
}
/* The decision-support disclaimer. Set apart by a rule so it reads as a
   standing statement rather than as more marketing copy. */
.mkt-hero__note {
  margin: var(--space-7) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--mkt-dark-line);
  max-width: 26rem;
  font-size: var(--text-sm);
  color: rgba(247, 244, 236, .7);
}

/* === Interior page head ==================================================== */

.mkt-pagehead {
  padding-block: var(--space-10) var(--space-8);
  border-bottom: 1px solid var(--mkt-line);
}
.mkt-pagehead__inner { max-width: 46rem; }
.mkt-pagehead h1 {
  font-size: var(--mkt-h1);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
}
.mkt-pagehead .mkt-lede { max-width: 40rem; }

/* === Figure band =========================================================== */

/* Directly under the hero, where a visitor decides whether to keep reading.
   Specificity is the trust signal, so the figure is large and the qualifier
   small — the opposite of a marketing stat, which hides its qualifier.

   Columns are separated by rules rather than left to float at whatever width
   their content happens to be; the previous version had three items of wildly
   different widths with no alignment between them. */
.mkt-stats {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--mkt-line);
  background: var(--background);
}
.mkt-stat { padding-left: var(--space-5); border-left: 2px solid var(--primary); }
.mkt-stat__value {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  font-variant-numeric: tabular-nums;
}
.mkt-stat__label {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  max-width: 22rem;
}

/* === Cards ================================================================= */

.mkt-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
/* Explicit column counts for grids whose item count is fixed and meaningful —
   auto-fit would reflow 4 cards to 3+1, which looks accidental. */
.mkt-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.mkt-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }

.mkt-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--mkt-surface);
  border: 1px solid var(--mkt-line);
  border-radius: var(--theme-radius);
  padding: var(--space-6);
}
.mkt-section--tint .mkt-card { border-color: rgba(0, 0, 0, .08); }
.mkt-section--dark .mkt-card {
  background: rgba(247, 244, 236, .05);
  border-color: var(--mkt-dark-line);
}

.mkt-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--mkt-tint);
  color: var(--accent-strong);
  margin-bottom: var(--space-2);
}
.mkt-section--tint .mkt-card__icon { background: var(--background); }
.mkt-section--dark .mkt-card__icon {
  background: rgba(247, 244, 236, .1);
  color: var(--primary);
}

.mkt-card h3 {
  font-size: var(--mkt-h3);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.01em;
}
.mkt-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.mkt-section--dark .mkt-card p { color: var(--mkt-dark-muted); }
.mkt-card > :last-child { margin-bottom: 0; }

/* A card numbered rather than iconed, for ordered material. */
.mkt-card__step {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* === Framed product UI ===================================================== */

/* The site's central claim is "this is what you actually see", so these blocks
   are built to look like the application rather than like marketing cards — the
   product's own border, radius and type, inside a frame that reads as a window.
   Showing the interface is the strongest trust move available (doc 41 §3), and
   it is the thing the old page had none of: below the hero it was six
   consecutive heading-and-paragraph sections and nothing else.

   These are ILLUSTRATIONS of real behaviour, built in HTML — not screenshots,
   so they stay legible at phone width, work in a screen reader, and cannot go
   stale as a PNG would. Facility names are generic by design: a real one would
   imply a customer relationship the project does not have. */
.mkt-ui {
  background: var(--mkt-surface);
  border: 1px solid var(--mkt-line);
  border-radius: var(--theme-radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.mkt-ui__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--mkt-tint);
  border-bottom: 1px solid var(--mkt-line);
  font-size: var(--text-sm);
  font-weight: 600;
}
.mkt-ui__bar span { color: var(--muted); font-weight: 400; }
.mkt-ui__body { padding: var(--space-4); }
/* A caption naming the block as an illustration. Required: without it a
   mockup can be mistaken for a screenshot of live data. */
.mkt-ui__caption {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* --- Capability rows ------------------------------------------------------- */
/* The three-state model, which is the product's actual differentiator. The
   states must be distinguishable WITHOUT colour: the left rule differs in
   weight and style, and the pill text differs in wording, so the distinction
   survives greyscale and a screen reader. */
.mkt-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--mkt-line);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
}
.mkt-cap + .mkt-cap { margin-top: var(--space-3); }
.mkt-cap--confirmed { border-left-color: var(--ok-text); }
.mkt-cap--ruled-out { border-left-color: var(--err); }
.mkt-cap--unknown  { border-left-style: dashed; border-left-color: var(--muted); }

.mkt-cap__name {
  flex: 1 1 14rem;
  font-weight: 600;
  margin: 0;
}
.mkt-cap__meta {
  flex: 1 1 100%;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}
/* Dates and counts are tabular so they align down a column of rows. */
.mkt-cap__meta time,
.mkt-cap__meta .num { font-variant-numeric: tabular-nums; }

/* --- Pills ---------------------------------------------------------------- */
.mkt-pill {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .15rem .6rem;
  border-radius: var(--radius-pill);
  border: 1px solid;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.mkt-pill--ok   { color: var(--ok-text); background: var(--ok-soft-bg); border-color: var(--ok); }
.mkt-pill--warn { color: var(--warn); background: var(--warn-soft-bg); border-color: var(--warn-soft-border); }
.mkt-pill--err  { color: var(--err); background: var(--err-soft-bg); border-color: var(--err); }
.mkt-pill--mute { color: var(--muted); background: transparent; border-color: var(--mkt-line); }

/* --- Result groups -------------------------------------------------------- */
/* Matching returns three groups rather than one ranked list. The group header
   carries the count, because "and here is what the filter removed, and why" is
   the behaviour being advertised. */
.mkt-group + .mkt-group { margin-top: var(--space-5); }
.mkt-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--mkt-line);
}
.mkt-group__title { margin: 0; font-size: var(--text-base); font-weight: 600; }
.mkt-group__count {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* === Split layout ========================================================== */

/* One section per page breaks the full-width rhythm; a page where every section
   is the same shape reads as a list. Used on the problem statement and on
   sections that pair prose with a framed UI block. */
.mkt-split {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 64rem) {
  .mkt-split { grid-template-columns: 5fr 7fr; gap: var(--space-9); }
  .mkt-split--even { grid-template-columns: 1fr 1fr; }
  .mkt-split__lead { position: sticky; top: var(--space-9); }
  .mkt-split__lead h2 { margin-top: 0; }
}
.mkt-split .mkt-head { margin-bottom: var(--space-5); }

/* === Pull quote ============================================================ */

/* The one piece of large non-heading type on a page. It states the argument in a
   sentence someone could repeat to a colleague, which is the test of whether a
   positioning claim is actually sharp. */
.mkt-quote {
  margin: var(--space-8) 0 0;
  padding-left: var(--space-6);
  border-left: 3px solid var(--primary);
  max-width: 44rem;
}
.mkt-quote p {
  font-size: clamp(1.3125rem, 2.3vw, 1.75rem);
  line-height: 1.3;
  margin: 0 0 var(--space-4);
}
.mkt-quote cite {
  display: block;
  font-style: normal;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: 38rem;
}
.mkt-section--dark .mkt-quote cite { color: var(--mkt-dark-muted); }

/* === Figures =============================================================== */

/* The economic case. Numbers a hospital already tracks, set large, each with the
   qualifier that keeps it honest. */
.mkt-figures {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin-top: var(--space-8);
}
.mkt-figure { padding-top: var(--space-4); border-top: 2px solid var(--mkt-dark-line); }
.mkt-figure__value {
  display: block;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1;
  margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.mkt-figure__label { margin: 0; line-height: 1.55; color: var(--mkt-dark-muted); }

/* === Comparison ============================================================ */

/* "We already have a referral platform" is the first objection on every call, so
   the answer gets a structure rather than a paragraph. A definition list, not a
   table: there are no columns of data here, only pairs. */
.mkt-compare {
  display: grid;
  gap: 0;
  margin: var(--space-7) 0 0;
  max-width: 52rem;
}
.mkt-compare__row {
  display: grid;
  gap: var(--space-2) var(--space-6);
  grid-template-columns: 1fr;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--mkt-line);
}
.mkt-compare__row:last-child { border-bottom: 1px solid var(--mkt-line); }
@media (min-width: 48rem) {
  .mkt-compare__row { grid-template-columns: 15rem 1fr; }
}
.mkt-compare__term { margin: 0; font-weight: 600; }
.mkt-compare__desc { margin: 0; color: var(--muted); line-height: 1.6; }

/* === Lists ================================================================= */

.mkt-list {
  max-width: var(--mkt-prose);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.mkt-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  color: var(--muted);
  line-height: 1.6;
}
/* A terracotta check drawn in CSS rather than an icon font or an inline SVG per
   item: it cannot fail to load and costs no request. */
.mkt-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: .5rem;
  height: .85rem;
  border-right: 2px solid var(--accent-strong);
  border-bottom: 2px solid var(--accent-strong);
  transform: rotate(45deg);
}
.mkt-list li strong { color: var(--ink); font-weight: 600; }

/* Numbered process steps, used for "what happens next". */
.mkt-steps {
  counter-reset: step;
  max-width: 46rem;
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.mkt-steps li {
  counter-increment: step;
  position: relative;
  padding-left: var(--space-9);
  padding-bottom: var(--space-6);
  color: var(--muted);
  line-height: 1.6;
}
.mkt-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-strong);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* The connecting rule between steps, so the list reads as a sequence. */
.mkt-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1rem - 1px);
  top: 2.25rem;
  bottom: var(--space-3);
  width: 2px;
  background: var(--mkt-line);
}
.mkt-steps li:last-child { padding-bottom: 0; }
.mkt-steps strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .2em; }

/* === Data currency strip =================================================== */

/* Simultaneously a trust signal and an honest admission of staleness, which is
   what makes the site behave like the product (doc 41 §3). */
.mkt-currency {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-7) 0 0;
  padding: var(--space-4) var(--space-5);
  background: var(--background);
  border: 1px solid var(--mkt-line);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  max-width: 52rem;
}
.mkt-section--tint .mkt-currency { background: var(--mkt-surface); }
.mkt-currency div { display: flex; gap: .5em; }
.mkt-currency dt { font-weight: 600; color: var(--ink); margin: 0; }
.mkt-currency dd { margin: 0; }

/* === Closing CTA =========================================================== */

/* The most important conversion point on a page, and previously the weakest
   thing on it: centred text on cream with a small button and no visual weight.
   It now gets the dark band. */
.mkt-cta { text-align: center; }
.mkt-cta__inner { max-width: 40rem; margin-inline: auto; }
.mkt-cta h2 { max-width: none; margin-inline: auto; }
.mkt-cta .mkt-lede { margin-inline: auto; }
.mkt-cta .mkt-actions { justify-content: center; }

/* === Footer ================================================================ */

/* The site map for people who scrolled instead of navigating.

   It does NOT mirror the primary nav any more. `resolved_nav()` correctly filters
   to pages that exist, and with most of the IA unbuilt that produced three
   columns containing one link in total plus a stray rule — a footer that looked
   broken while being scrupulously honest. A brand block plus the real links
   reads as deliberate at this size and grows into columns later (doc 42 §6). */
.site-footer {
  background: var(--mkt-dark);
  color: var(--mkt-dark-ink);
  border-top: 1px solid var(--mkt-dark-line);
}
.site-footer__inner {
  padding-block: var(--space-9) var(--space-7);
  padding-inline: max(var(--space-5), calc((100% - var(--mkt-measure)) / 2));
}
.site-footer__top {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--mkt-dark-line);
}
@media (min-width: 64rem) {
  .site-footer__top { grid-template-columns: minmax(16rem, 1fr) auto; align-items: start; }
}
.site-footer__brand { max-width: 22rem; }
.site-footer__wordmark {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  color: var(--mkt-dark-ink);
}
.site-footer__tagline {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--mkt-dark-muted);
}
.site-footer__columns {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}
.site-footer__heading {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(247, 244, 236, .5);
  margin: 0 0 var(--space-4);
}
.site-footer__column ul { list-style: none; margin: 0; padding: 0; }
.site-footer__column li + li { margin-top: var(--space-3); }
.site-footer__column a {
  color: var(--mkt-dark-ink);
  text-decoration: none;
  font-size: var(--text-sm);
}
.site-footer__column a:hover { text-decoration: underline; }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: baseline;
  padding-top: var(--space-6);
}
.site-footer__copy { margin: 0; font-size: var(--text-sm); color: var(--mkt-dark-muted); }
.site-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; padding: 0; }
.site-footer__legal a { color: var(--mkt-dark-muted); font-size: var(--text-sm); text-decoration: none; }
.site-footer__legal a:hover { color: var(--mkt-dark-ink); text-decoration: underline; }
/* The NYSDOH Data Use Policy requires the Department be named wherever its data
   is used, and this site describes that data. */
.site-footer__sources {
  flex-basis: 100%;
  margin: 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(247, 244, 236, .55);
  max-width: 54rem;
}

/* === Small viewports ======================================================= */

@media (max-width: 47.99rem) {
  /* At phone width the diagonal scrim has no room to fall off, so it goes flat
     and vertical — the headline must not land on mid-tone feathers. */
  .mkt-hero::after {
    background: linear-gradient(180deg, rgba(10, 9, 8, .84), rgba(10, 9, 8, .94));
  }
  .mkt-hero { min-height: 32rem; }
  .mkt-hero__body { padding-block: var(--space-9); }
  .mkt-pagehead { padding-block: var(--space-8) var(--space-7); }
  .mkt-card { padding: var(--space-5); }
  .mkt-quote { padding-left: var(--space-5); }
  .mkt-head { margin-bottom: var(--space-7); }
}

/* Focus visibility is a design-system guarantee, so it is restated for the
   components this file introduces rather than left to a browser default that
   the dark band would swallow. */
.mkt-btn:focus-visible,
.mkt-more:focus-visible,
.site-footer a:focus-visible,
.mkt-section a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.mkt-section--dark a:focus-visible,
.site-footer a:focus-visible,
.mkt-hero a:focus-visible { outline-color: var(--mkt-dark-ink); }