/* Termn marketing — spec/12-marketing.md, color posture from spec/13-brand.md
   ("Color with conviction"): elder-navy fields as bookends, gold as the working
   accent, tint washes only where the tint is the section's own meaning.

   Tokens live in tokens.css (the brand's single source of truth); the --m-*
   names below are aliases for this surface. A hex literal in this file is a
   review flag. Component contract: spec/16-design-system.md. */

@import url("tokens.css");

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-700.woff2") format("woff2");
}

.mkt {
  /* Warmer editorial paper than the app (13-brand: marketing paper is cream). */
  --m-bg: var(--t-cream);
  --m-band: var(--t-cream-band);
  --m-surface: var(--t-cream-surface);
  --m-ink: var(--t-ink);
  --m-ink-soft: var(--t-ink-soft);
  --m-muted: var(--t-cream-muted);
  --m-line: var(--t-cream-line);
  --m-line-soft: var(--t-cream-line-soft);
  --m-hairline: var(--t-cream-hairline);

  --m-elder-deep: var(--t-elder-deep);
  --m-elder-blue: var(--t-elder);
  --m-elder-violet: var(--t-elder-violet);
  --m-elder-gold: var(--t-elder-gold);
  --m-gold-rule: var(--t-gold-rule);   /* the working accent on cream */
  --m-gold-glint: var(--t-gold-glint); /* the glint on navy */

  --m-tint-blue: var(--t-wash-blue);   /* the current-decision wash */
  --m-tint-blue-line: var(--t-wash-blue-line);
  --m-tint-gold: var(--t-wash-gold);   /* the watchful-pause wash */
  --m-tint-gold-line: var(--t-wash-gold-line);

  --m-success: var(--t-success);
  --m-success-soft: var(--t-success-soft);
  --m-success-line: var(--t-success-line);
  --m-attn: var(--t-attention);
  --m-attn-soft: var(--t-attention-soft);
  --m-attn-line: var(--t-attention-line);

  --m-on-dark: var(--t-on-dark);
  --m-on-dark-soft: var(--t-on-dark-soft);
  --m-on-dark-muted: var(--t-on-dark-muted);
  --m-on-dark-line: var(--t-on-dark-line);

  --m-serif: var(--t-serif);
  --m-sans: var(--t-sans);
  --m-mono: var(--t-mono);

  --m-shadow: var(--t-shadow-deep);

  background: var(--m-bg);
  color: var(--m-ink);
  font-family: var(--m-sans);
  font-size: 16.5px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.mkt a { color: var(--m-elder-blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mkt a:hover { text-decoration-thickness: 2px; }
/* The brand's one focus signature (tokens.css); lifted blue on navy ground. */
.mkt :focus-visible {
  outline: var(--t-focus-ring); outline-offset: 2px;
  box-shadow: var(--t-focus-halo); border-radius: 2px;
}
.mkt-hero :focus-visible, .mkt-dark :focus-visible {
  outline-color: var(--t-elder-lift); box-shadow: none;
}

.mkt h1, .mkt h2 {
  font-family: var(--m-serif);
  font-weight: 600;
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.mkt h1 { font-size: clamp(2.35rem, 4.6vw, 3.4rem); line-height: 1.07; }
.mkt h2 { font-size: clamp(1.7rem, 2.6vw, 2.15rem); line-height: 1.14; }
.mkt h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.45em; line-height: 1.3; }
.mkt p { margin: 0 0 1rem; }

.mkt-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* --- wordmark ------------------------------------------------------------- */

.mkt-wordmark {
  font-family: var(--m-serif);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.05;
  color: var(--m-ink);
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding-bottom: 5px;
  letter-spacing: 0.002em;
}
/* The underline is a drawn rule, not a border, so it can ink in once on load. */
.mkt-wordmark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--m-elder-blue);
  transform-origin: left;
  animation: mkt-rule-in 640ms cubic-bezier(0.25, 0.6, 0.3, 1) both;
}
@keyframes mkt-rule-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.mkt-wordmark b { color: var(--m-elder-blue); font-weight: 700; }
.mkt-wordmark:hover { text-decoration: none; }

/* --- header --------------------------------------------------------------- */

.mkt-header { border-bottom: 1px solid var(--m-line-soft); background: var(--m-bg); }
.mkt-header .mkt-wrap {
  display: flex; align-items: center; gap: 32px;
  min-height: 74px; padding-top: 12px; padding-bottom: 12px;
}
.mkt-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; flex-wrap: wrap; }
.mkt-nav a {
  color: var(--m-ink-soft); text-decoration: none; font-size: 0.94rem; font-weight: 500;
  padding: 8px 2px; min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-bottom-color 120ms ease;
}
.mkt-nav a:hover { color: var(--m-ink); border-bottom-color: var(--m-gold-rule); }
.mkt-nav a[aria-current="page"] { color: var(--m-ink); border-bottom-color: var(--m-gold-rule); }

@media (prefers-reduced-motion: reduce) {
  .mkt-wordmark::after { animation: none; }
  .mkt-nav a { transition: none; }
}

/* --- buttons -------------------------------------------------------------- */

.mkt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px;
  border-radius: var(--t-radius-control); border: 1px solid var(--m-line);
  background: var(--m-surface); color: var(--m-ink);
  font: inherit; font-weight: 600; font-size: 1rem; letter-spacing: 0.002em;
  text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.mkt-btn:hover { border-color: var(--m-muted); text-decoration: none; }
.mkt-btn.primary { background: var(--m-elder-deep); border-color: var(--m-elder-deep); color: var(--m-on-dark); }
.mkt-btn.primary:hover { background: var(--m-elder-blue); border-color: var(--m-elder-blue); }
.mkt-btn.compact { min-height: 40px; padding: 8px 18px; font-size: .875rem; }
.mkt-btn.on-dark { background: var(--m-bg); border-color: var(--m-bg); color: var(--m-ink); }
.mkt-btn.on-dark:hover { background: var(--t-cream-band); border-color: var(--t-cream-band); }

/* --- forms & controls ------------------------------------------------------ */
/* Same anatomy as the app (spec/16): label (optional marked) → help → control
   → error naming the recovery. The controls share the app's bones — 44px+
   height, the control radius, the shared chevron and calendar glyphs from
   tokens.css — dressed for cream. Buttons and controls sit at the same 48px
   so a field and its verb align on one line. */

/* A form does not inherit the page's font on its own: the user-agent stylesheet gives
   form and fieldset their own, and every control here is set to `font: inherit`, so a
   form left alone quietly drags its whole contents into the browser's default face.
   Stated once, at the top of the form styles, rather than per control. */
.mkt form, .mkt fieldset { font: inherit; }

.mkt-field { margin-bottom: 20px; }
.mkt-field label { display: block; font-weight: 600; margin-bottom: 5px; }
.mkt-field label .optional { font-weight: 400; color: var(--m-muted); font-size: .875rem; }
.mkt-field .help { color: var(--m-ink-soft); font-size: .875rem; margin: -1px 0 7px; }

.mkt input[type="text"], .mkt input[type="email"], .mkt input[type="number"],
.mkt input[type="date"], .mkt input[type="datetime-local"], .mkt input[type="time"],
.mkt input[type="month"], .mkt input[type="tel"], .mkt input[type="url"],
.mkt input[type="search"], .mkt input[type="password"],
.mkt select, .mkt textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; font: inherit;
  border: 1px solid var(--m-line); border-radius: var(--t-radius-control);
  background-color: var(--m-surface); color: var(--m-ink);
  color-scheme: light; /* native popups (calendar, option list) stay light */
  transition: border-color 120ms ease;
}
.mkt ::placeholder { color: var(--m-muted); opacity: 1; }
.mkt textarea { min-height: 100px; line-height: 1.5; }
.mkt input:hover, .mkt select:hover, .mkt textarea:hover { border-color: var(--m-muted); }

.mkt select {
  appearance: none; -webkit-appearance: none;
  padding-right: 42px;
  background-image: var(--t-chevron);
  background-repeat: no-repeat; background-position: right 15px center;
}
.mkt select[multiple], .mkt select[size]:not([size="1"]) { background-image: none; padding-right: 14px; }

.mkt input[type="date"]::-webkit-calendar-picker-indicator,
.mkt input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.mkt input[type="month"]::-webkit-calendar-picker-indicator {
  width: 15px; height: 16px; padding: 0; margin-left: 8px;
  background: var(--t-glyph-calendar) center / contain no-repeat;
  cursor: pointer; opacity: .9;
}
.mkt input[type="date"]:hover::-webkit-calendar-picker-indicator,
.mkt input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.mkt input[type="month"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.mkt input[type="date"]::-webkit-date-and-time-value,
.mkt input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left; min-height: 1.3em;
}

.mkt input[type="checkbox"], .mkt input[type="radio"] { accent-color: var(--m-elder-blue); }

.mkt input[disabled], .mkt select[disabled], .mkt textarea[disabled] {
  background-color: var(--m-band); color: var(--m-muted); border-color: var(--m-line);
  cursor: not-allowed;
}
.mkt select[disabled] { background-image: var(--t-chevron-faint); }

.mkt .mkt-field.invalid input, .mkt .mkt-field.invalid select, .mkt .mkt-field.invalid textarea,
.mkt [aria-invalid="true"] { border-color: var(--t-failure); }
.mkt .mkt-field .errors { color: var(--t-failure); font-size: .94rem; font-weight: 500; margin-top: 6px; }

/* An input and its verb on one line: an email and Request access. */
.mkt-field-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.mkt-field-row .mkt-field { flex: 1 1 240px; margin-bottom: 0; }
.mkt-field-row > input, .mkt-field-row > select { flex: 1 1 240px; width: auto; min-width: 200px; }
.mkt-field-row .mkt-btn { flex: 0 0 auto; }

/* --- bands ---------------------------------------------------------------- */

.mkt-band { padding: 96px 0; }
.mkt-band.tight { padding: 64px 0; }
.mkt-band.soft { background: var(--m-band); border-top: 1px solid var(--m-line-soft); border-bottom: 1px solid var(--m-line-soft); }
/* Tint washes carry the section's own meaning (13-brand): blue = the current
   decision / evidence at hand; gold = the watchful pause. Never decorative. */
.mkt-band.tint-blue { background: var(--m-tint-blue); border-top: 1px solid var(--m-tint-blue-line); border-bottom: 1px solid var(--m-tint-blue-line); }
.mkt-band.tint-gold { background: var(--m-tint-gold); border-top: 1px solid var(--m-tint-gold-line); border-bottom: 1px solid var(--m-tint-gold-line); }

.mkt-band-head { max-width: 680px; margin-bottom: 44px; }
.mkt-band.tight .mkt-band-head { margin-bottom: 28px; }
.mkt-band-head h1::before,
.mkt-band-head h2::before {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 2px;
  background: var(--m-gold-rule); margin-bottom: 20px;
}
.mkt-band-head p { color: var(--m-ink-soft); font-size: 1.05rem; line-height: 1.65; margin: 0; }

.mkt-lede {
  font-family: var(--m-serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--m-ink-soft);
}
.mkt-note { font-size: .875rem; color: var(--m-muted); }

/* --- hero: the first navy field — a statement, nothing else ------------------ */

.mkt-hero {
  position: relative;
  background:
    radial-gradient(1100px 500px at 78% 12%, rgba(75, 58, 96, 0.35), transparent 60%),
    radial-gradient(900px 460px at 12% 95%, rgba(43, 74, 120, 0.5), transparent 65%),
    var(--m-elder-deep);
  color: var(--m-on-dark);
  padding: 128px 0 132px;
  text-align: center;
}
/* The Elder band recipe: violet seam above, gold glint below. */
.mkt-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--m-elder-violet) 20%, var(--m-elder-violet) 55%, transparent 90%);
}
.mkt-hero::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 15%, var(--m-gold-glint) 55%, var(--m-gold-glint) 70%, transparent 95%);
}
.mkt-hero h1 {
  color: var(--m-on-dark);
  font-size: clamp(2.6rem, 5.6vw, 4.1rem);
  margin: 0 auto 0.35em;
  max-width: 15em;
}
.mkt-hero .mkt-lede {
  color: var(--m-on-dark-soft);
  max-width: 32em; margin: 0 auto;
}
.mkt-hero a:not(.mkt-btn) { color: var(--m-on-dark-soft); }
.mkt-hero a:not(.mkt-btn):hover { color: var(--m-on-dark); }
.mkt-hero .mkt-wrap { position: relative; }

/* The transaction line: random deals tracing behind the statement, drawn by
   js/marketing-hero.js. Gold because it is the working accent on navy; the
   pulse is the deal, the line is the record it leaves, the rings are the
   stages it clears. Nothing is inked before the pulse reaches it. */
.mkt-hero-flow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
/* Settled deals linger and regrade dimmer as new ones land (inline opacity
   from the driver); one transition carries both the regrade and the fade-out. */
.mkt-hero-flow .flow-txn { transition: opacity 2.2s ease; }
.mkt-hero-flow .flow-trace { fill: none; stroke: var(--m-gold-glint); stroke-opacity: 0.32; stroke-width: 1.25; }
.mkt-hero-flow .flow-head {
  fill: none; stroke: var(--m-gold-glint); stroke-opacity: 0.9;
  stroke-width: 2; stroke-linecap: round;
}
.mkt-hero-flow .flow-node { opacity: 0; }
.mkt-hero-flow .flow-node.hit { animation: mkt-node-hit 900ms ease-out both; }
.mkt-hero-flow .flow-node .ring { fill: none; stroke: var(--m-gold-glint); stroke-width: 1.5; }
.mkt-hero-flow .flow-node.hit .ring { animation: mkt-node-bloom 700ms ease-out; }
.mkt-hero-flow .flow-node .core { fill: var(--m-gold-glint); }
.mkt-hero-flow .flow-dot { fill: var(--m-on-dark); }
.mkt-hero-flow .flow-halo { fill: var(--m-gold-glint); fill-opacity: 0.28; }
@keyframes mkt-node-hit {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0.85; }
}
@keyframes mkt-node-bloom {
  0% { r: 6px; }
  40% { r: 10px; }
  100% { r: 6px; }
}

/* Stage cards: what happened at the node the pulse just cleared — signers,
   the bank leg, filed evidence, the settlement record. Same posture as the
   app's panels: plain bordered surface, words first, gold only as the mark. */
.mkt-hero-flow .chip-bg { fill: rgba(10, 17, 33, 0.88); stroke: var(--m-on-dark-line); }
.mkt-hero-flow .flow-chip text { font-family: var(--m-sans); fill: var(--m-on-dark); }
.mkt-hero-flow .chip-name { font-size: 11px; font-weight: 500; }
.mkt-hero-flow .chip-sub {
  font-family: var(--m-mono); font-size: 8.5px; letter-spacing: 0.08em;
  fill: var(--m-on-dark-muted);
}
.mkt-hero-flow .chip-initials {
  font-family: var(--m-serif); font-size: 8px; font-weight: 600;
  fill: var(--m-gold-glint);
}
.mkt-hero-flow .chip-avatar { fill: rgba(185, 157, 107, 0.14); stroke: var(--m-gold-glint); stroke-width: 1; }
.mkt-hero-flow .chip-glyph { fill: rgba(185, 157, 107, 0.14); stroke: var(--m-gold-glint); stroke-width: 1; }
.mkt-hero-flow .chip-ring { fill: none; stroke: var(--m-gold-glint); stroke-width: 1.5; }
.mkt-hero-flow .flow-check {
  fill: none; stroke: var(--m-gold-glint); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  animation: mkt-chip-in 420ms ease-out both;
}
.mkt-hero-flow .flow-check.late { animation-delay: 700ms; }
.mkt-hero-flow .flow-chip { animation: mkt-chip-in 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.mkt-hero-flow .flow-chip.out { animation: mkt-chip-out 650ms ease-in both; }
@keyframes mkt-chip-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes mkt-chip-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
.mkt-cta-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 38px 0 0; flex-wrap: wrap; }
.mkt-cta-row a:not(.mkt-btn) { font-weight: 500; font-size: 1rem; }

/* The estate route. Quieter than the secondary anchor above it, because a reader who
   isn't a firm should skip it in one glance — and a reader who is shouldn't have to
   scroll past the whole catalog before the page admits they were the audience. */
/* Scoped to .mkt-hero so the auto margins outrank `.mkt p`, which is (0,1,1) and
   would otherwise flatten margin-left to 0 and strand the line at the left edge. */
.mkt-hero .mkt-hero-route {
  margin: 24px auto 0; max-width: 52ch; text-align: center;
  font-size: .9rem; line-height: 1.6; color: var(--m-on-dark-soft);
}
.mkt-hero-route a:not(.mkt-btn) {
  color: var(--m-on-dark); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--m-gold-glint); text-underline-offset: 3px;
}

/* --- the belief band: three beats, then the facts ---------------------------- */

.mkt-spine3 { list-style: none; margin: 0 0 44px; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 40px; }
.mkt-spine3 li { border-top: 1px solid var(--m-tint-blue-line); padding: 16px 0 4px; }
.mkt-spine3 .n { font-family: var(--m-mono); font-size: .78rem; font-weight: 700; color: var(--m-gold-rule); }
.mkt-spine3 h3 { font-family: var(--m-serif); font-size: 1.3rem; font-weight: 600; margin: 6px 0 6px; }
.mkt-spine3 p { margin: 0; color: var(--m-ink-soft); font-size: .94rem; line-height: 1.55; }

/* --- in-app clips ----------------------------------------------------------
   Recorded from the running app (marketing/promo), not mocked. The poster is
   sized identically to the video so nothing reflows when playback starts, and
   the whole figure is inert to pointers: it illustrates, it isn't a control. */
.mkt-clip {
  margin: 16px 0 0; border: 1px solid var(--m-tint-blue-line); border-radius: 6px;
  overflow: hidden; background: var(--m-surface);
  box-shadow: 0 1px 2px rgba(15, 14, 13, 0.04);
}
.mkt-clip-video {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; pointer-events: none; background: var(--m-surface);
}

.mkt-quietfacts {
  margin: 26px 0 0; text-align: center;
  font-size: .875rem; color: var(--m-muted);
}

/* On-page section nav for long reference pages: one quiet row of jump links,
   styled like the header nav — never a second header. */
.mkt-pagenav { display: flex; gap: 8px 22px; flex-wrap: wrap; margin: 30px 0 0; }
.mkt-pagenav a {
  font-size: .875rem; color: var(--m-ink-soft); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.mkt-pagenav a:hover { color: var(--m-ink); border-bottom-color: var(--m-gold-rule); }

.mkt-amount { font-family: var(--m-mono); font-size: .95em; font-variant-numeric: tabular-nums; }
/* Demo semantics: a claim is gold, a confirmed fact is evergreen — the words
   "committed"/"reconciled" always sit beside the color. */
.mkt-amount.claim { color: var(--m-attn); font-weight: 700; }
.mkt-amount.fact { color: var(--m-success); font-weight: 700; }

/* API material in running copy: an endpoint, a tool name, a header. Mono is
   reserved for things a developer types verbatim — never for emphasis. */
.mkt-tool { font-family: var(--m-mono); font-size: .95em; overflow-wrap: anywhere; }

.mkt-demo-note { margin: 0; padding: 10px 24px 14px; font-size: .78rem; color: var(--m-muted); border-top: 1px solid var(--m-hairline); }

/* --- three facts table ----------------------------------------------------- */

.mkt-facts-scroll { overflow-x: auto; }
.mkt-facts {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--m-surface); border: 1px solid var(--m-tint-blue-line); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 14, 13, 0.04);
}
.mkt-facts th, .mkt-facts td { text-align: left; padding: 18px 24px; border-top: 1px solid var(--m-hairline); vertical-align: top; }
.mkt-facts thead th {
  border-top: 0; padding-top: 14px; padding-bottom: 14px;
  font-size: .78rem; color: var(--m-muted); font-weight: 600; letter-spacing: 0.02em;
}
.mkt-facts td:first-child {
  font-family: var(--m-serif); font-style: italic; font-size: 1.05rem; color: var(--m-ink);
  white-space: nowrap; width: 1%; padding-right: 40px;
}
.mkt-facts td { font-size: .94rem; color: var(--m-ink-soft); min-width: 150px; line-height: 1.55; }
.mkt-facts td strong { color: var(--m-ink); font-weight: 600; }

/* The catalog table reuses the facts-table dress; it follows the two flow
   columns, so it carries its own breathing room. */
.mkt-catalog { margin-top: 56px; }

/* Schedule states (/trust-funding). The vocabulary is the funding audit's and the
   colors are the product's: evergreen for what an institution durably confirmed, the
   watchful gold for what went out and hasn't come back. "In force" is deliberately not
   the same green as "confirmed" — a beneficiary designation can quietly break, and this
   page must not let it read as done. "Never started" stays neutral: it is a count, not
   an accusation, and it is the row the reader came to find. */
.mkt-state {
  display: inline-block; white-space: nowrap;
  padding: 3px 10px; border-radius: 100px;
  font-family: var(--m-sans); font-style: normal;
  font-size: .78rem; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.mkt-state.is-confirmed { background: var(--m-success-soft); border-color: var(--m-success-line); color: var(--m-success); }
.mkt-state.is-inforce   { background: transparent;           border-color: var(--m-success-line); color: var(--m-success); }
.mkt-state.is-inmotion  { background: var(--m-attn-soft);    border-color: var(--m-attn-line);    color: var(--m-attn); }
.mkt-state.is-never     { background: transparent;           border-color: var(--m-line);         color: var(--m-muted); }

/* --- the API reference (/developers) -----------------------------------------
   Generated from marketing/openapi.json, so the shapes here have to survive
   whatever the schema says: long paths, long summaries, groups appearing and
   disappearing. The call table is the facts table with its first column handed
   over to mono, because a path is something a developer types verbatim. */

/* This page head is left-aligned prose, so its buttons and footnote align to the
   text rather than to the viewport (elsewhere the row sits under centered copy). */
.mkt-page-head .mkt-cta-row { justify-content: flex-start; }
/* Held to the same measure as the lede above it: a footnote that runs the full
   viewport while the paragraph stops at 680px reads as a different column. */
.mkt-page-head .mkt-quietfacts { text-align: left; max-width: 680px; }
/* Straight after the lede, 26px is inside the paragraph's own line spacing and the
   footnote reads as a last sentence of it. Only needed when no CTA row separates them. */
.mkt-page-head .mkt-band-head + .mkt-quietfacts { margin-top: 38px; }

.mkt-endpoints + .mkt-endpoints { margin-top: 48px; }
.mkt-endpoints h3 {
  font-family: var(--m-serif); font-size: 1.3rem; font-weight: 600;
  margin: 0 0 6px; color: var(--m-ink);
}
.mkt-endpoints h3 .mkt-count {
  font-family: var(--m-sans); font-size: .78rem; font-weight: 500;
  color: var(--m-muted); letter-spacing: 0.02em; margin-left: 10px;
}
.mkt-endpoints > p { margin: 0 0 20px; max-width: 68ch; color: var(--m-ink-soft); font-size: .94rem; }

/* A path is one token: it wraps nowhere, at any width. The scroll container
   takes the overflow instead, which is why the table sits inside one. */
.mkt-calls td:first-child {
  font-family: var(--m-mono); font-style: normal; font-size: .875rem;
  color: var(--m-ink); white-space: nowrap;
}
.mkt-calls td.mkt-scope { white-space: nowrap; width: 1%; font-size: .875rem; color: var(--m-muted); }

/* The method, and the status code in the failure table: a quiet label, not a
   traffic light. Semantic color belongs to product state, never to syntax. */
.mkt-verb {
  display: inline-block; min-width: 3.6em; margin-right: 10px;
  font-family: var(--m-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--m-elder-blue);
}

.mkt-code {
  margin: 0; padding: 20px 24px; overflow-x: auto;
  background: var(--m-surface); border: 1px solid var(--m-tint-blue-line); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 14, 13, 0.04);
}
.mkt-code code {
  font-family: var(--m-mono); font-size: .875rem; line-height: 1.7;
  color: var(--m-ink); white-space: pre;
}

/* --- photography (13-brand: candid responsibility, warm light; hairline
   frames, no shadow — the proof surface keeps the page's one shadow) --------- */

.mkt-photo { margin: 0; }
.mkt-photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--m-line);
}

.mkt-audience { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 40px; }
.mkt-audience figcaption { padding: 16px 2px 0; }
.mkt-audience h3 { font-family: var(--m-serif); font-size: 1.15rem; font-weight: 600; margin: 0 0 5px; }
.mkt-audience figcaption p { margin: 0; color: var(--m-ink-soft); font-size: .94rem; line-height: 1.6; max-width: 44em; }

.mkt-persist-photo { margin-bottom: 18px; }
.mkt-persist-photo img { aspect-ratio: 5 / 3; border-color: var(--m-tint-gold-line); }

/* --- flagship flows -------------------------------------------------------- */

.mkt-flows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; }
.mkt-flow + .mkt-flow { border-left: 1px solid var(--m-line-soft); padding-left: 72px; margin-left: -36px; }
.mkt-flow h3 { font-family: var(--m-serif); font-size: 1.3rem; font-weight: 600; margin-bottom: 6px; }
.mkt-flow > p { color: var(--m-muted); font-size: .94rem; margin-bottom: 22px; }
.mkt-flow ol { margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.mkt-flow ol li {
  counter-increment: flow; position: relative;
  padding: 12px 0 12px 40px; border-top: 1px solid var(--m-hairline);
  font-size: 1rem; line-height: 1.55; color: var(--m-ink-soft);
}
.mkt-flow ol li::before {
  content: counter(flow);
  position: absolute; left: 2px; top: 12px;
  font-family: var(--m-mono); font-size: .78rem; color: var(--m-gold-rule); font-weight: 700;
}
.mkt-flow ol li strong { color: var(--m-ink); font-weight: 600; }

.mkt-roundline {
  margin-top: 22px; padding: 14px 18px;
  background: var(--m-surface); border: 1px solid var(--m-line-soft); border-radius: 6px;
  font-size: .875rem; color: var(--m-ink-soft);
}
.mkt-roundline .src { display: block; font-size: .78rem; color: var(--m-muted); margin-bottom: 4px; }

/* --- persistence (wears the watchful-pause wash) ---------------------------- */

.mkt-persist { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; }
.mkt-persist h3 { margin-top: 1.6em; }
.mkt-persist h3:first-child { margin-top: 0; }
.mkt-persist p { font-size: 1rem; color: var(--m-ink-soft); }

.mkt-ledger {
  background: var(--m-surface); border: 1px solid var(--m-tint-gold-line); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 14, 13, 0.04);
  font-size: .875rem;
}
.mkt-ledger-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--m-hairline); }
.mkt-ledger-title { font-weight: 600; font-size: 1rem; }
.mkt-ledger-sub { color: var(--m-muted); font-size: .875rem; margin-top: 1px; }
.mkt-ledger table { width: 100%; border-collapse: collapse; }
.mkt-ledger td { padding: 10px 20px; border-top: 1px solid var(--m-hairline); vertical-align: baseline; line-height: 1.5; }
.mkt-ledger tr:first-child td { border-top: 0; }
.mkt-ledger td.day { font-family: var(--m-mono); font-size: .78rem; color: var(--m-attn); white-space: nowrap; width: 1%; padding-right: 6px; }
.mkt-ledger td.settled { color: var(--m-success); font-weight: 600; }
.mkt-ledger .mkt-demo-note { border-top: 1px solid var(--m-hairline); padding: 10px 20px 12px; }

/* --- pricing ---------------------------------------------------------------- */

.mkt-pricing { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: stretch; }
.mkt-price {
  background: var(--m-surface); border: 1px solid var(--m-line-soft); border-radius: 8px;
  padding: 28px 28px 26px; display: flex; flex-direction: column;
}
/* The featured column is this viewport's one Elder anchor: full frame recipe. */
.mkt-price.featured { position: relative; border-color: var(--m-elder-blue); box-shadow: var(--m-shadow); }
.mkt-price.featured::before {
  content: ""; position: absolute; top: -1px; left: 10%;
  width: 32%; height: 2px; background: var(--m-elder-violet); border-radius: 2px;
}
.mkt-price.featured::after {
  content: ""; position: absolute; bottom: -1px; right: 12%;
  width: 18%; height: 2px; background: var(--m-gold-glint); border-radius: 2px;
}
.mkt-price .amount {
  font-family: var(--m-serif); font-size: 2.3rem; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1; font-variant-numeric: lining-nums;
}
.mkt-price.featured .amount { color: var(--m-elder-deep); }
.mkt-price .cadence { color: var(--m-muted); font-size: .875rem; margin: 6px 0 14px; }
.mkt-price h3 { margin-bottom: 5px; font-size: 1.05rem; }
.mkt-price .summary { color: var(--m-ink-soft); font-size: .94rem; line-height: 1.55; }
.mkt-price ul { margin: 6px 0 0; padding: 0; list-style: none; }
.mkt-price ul li {
  font-size: .94rem; color: var(--m-ink-soft); line-height: 1.5;
  padding: 8px 0; border-top: 1px solid var(--m-hairline);
}
.mkt-price ul li:first-child { margin-top: 8px; }
.mkt-price .limits { margin-top: auto; padding-top: 16px; font-size: .78rem; color: var(--m-muted); line-height: 1.55; }
.mkt-price-note { margin-top: 22px; color: var(--m-ink-soft); font-size: .94rem; max-width: 620px; }

/* --- the free band (home) ----------------------------------------------------
   The home page names no amounts beyond the pass: /pricing is the only place the
   ladder lives. This band sells the free workspace and hands off with one link. */

.mkt-free { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.mkt-free-list { margin: 0; padding: 0; list-style: none; }
.mkt-free-list li {
  font-size: .97rem; color: var(--m-ink-soft); line-height: 1.55;
  padding: 12px 0; border-top: 1px solid var(--m-hairline);
}
.mkt-free-list li strong { color: var(--m-ink); font-weight: 600; }
.mkt-free-cta {
  background: var(--m-surface); border: 1px solid var(--m-line-soft); border-radius: 8px;
  padding: 24px;
}
.mkt-free-cta .mkt-note { margin: 14px 0 0; }

/* --- pricing page (marketing/): the ladder + Managed Close ------------------- */

.mkt-page-head { padding: 72px 0 8px; }
.mkt-page-head .mkt-band-head { margin-bottom: 0; }

.mkt-pricing2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.mkt-pricing3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.mkt-price .kicker {
  font-size: .78rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--m-muted); margin-bottom: 10px;
}
.mkt-pricing2 .mkt-price .mkt-note,
.mkt-pricing3 .mkt-price .mkt-note { margin: auto 0 0; padding-top: 18px; }
.mkt-pricing2 .mkt-price .mkt-btn,
.mkt-pricing3 .mkt-price .mkt-btn { margin-top: 16px; align-self: flex-start; }
.mkt-pricing2 .mkt-price .mkt-note.mkt-cta-note,
.mkt-pricing3 .mkt-price .mkt-note.mkt-cta-note { margin: 10px 0 0; padding-top: 0; font-size: .875rem; }

.mkt-compare { margin-top: 40px; }
.mkt-compare td:first-child { white-space: normal; padding-right: 24px; min-width: 170px; }

.mkt-persist .mkt-price { height: auto; }

/* --- boundaries ------------------------------------------------------------- */

.mkt-bounds { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; margin: 0; }
.mkt-bounds > div { padding: 18px 0; border-top: 1px solid var(--m-line-soft); }
.mkt-bounds dt { font-family: var(--m-serif); font-size: 1.15rem; font-weight: 600; margin-bottom: 4px; }
.mkt-bounds dd { margin: 0; color: var(--m-ink-soft); font-size: .94rem; line-height: 1.6; }

/* --- sourced claims (/security) ----------------------------------------------
   One column, because these are read in order rather than compared, and the claim
   is the thing: the file that proves it sits under it in mono, quiet enough not to
   compete but present on every single line. That pairing is the page's whole
   argument, so it is a layout rule and not a decoration. */

.mkt-sourced { margin: 0; }
.mkt-sourced > div { padding: 16px 0; border-top: 1px solid var(--m-line-soft); }
.mkt-sourced dt {
  color: var(--m-ink); font-size: 1rem; line-height: 1.6; margin-bottom: 6px;
  max-width: 780px;
}
.mkt-sourced dd { margin: 0; }
.mkt-sourced dd .mkt-tool { font-size: .8rem; color: var(--m-muted); }

/* --- recipient strip (blue tint: their next step is at hand) ----------------- */

.mkt-recipient { background: var(--m-tint-blue); border-top: 1px solid var(--m-tint-blue-line); padding: 56px 0; }
.mkt-recipient .mkt-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.mkt-recipient h2 { font-size: 1.5rem; margin-bottom: 6px; }
.mkt-recipient p { margin: 0; max-width: 560px; color: var(--m-ink-soft); font-size: 1rem; }
.mkt-recipient .mkt-btn { background: var(--m-surface); }

/* --- closing / footer (the second navy field) --------------------------------- */

.mkt-dark {
  position: relative;
  background:
    radial-gradient(900px 420px at 22% 0%, rgba(75, 58, 96, 0.3), transparent 60%),
    radial-gradient(1000px 500px at 85% 100%, rgba(43, 74, 120, 0.45), transparent 65%),
    var(--m-elder-deep);
  color: var(--m-on-dark-soft);
}
.mkt-dark::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 10%, var(--m-elder-violet) 45%, transparent 85%);
}
.mkt-close { text-align: center; padding: 100px 0 96px; }
.mkt-close h2 { color: var(--m-on-dark); margin-bottom: 10px; }
.mkt-close h2::before {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 2px;
  background: var(--m-gold-glint); margin: 0 auto 22px;
}
.mkt-close p { color: var(--m-on-dark-muted); max-width: 32em; margin: 0 auto 32px; font-size: 1.05rem; }
.mkt-close p.mkt-close-sales { margin: 24px auto 0; font-size: .94rem; }
.mkt-close-sales a { color: var(--m-on-dark-soft); }
.mkt-close-sales a:hover { color: var(--m-on-dark); }

.mkt-footer { border-top: 1px solid var(--m-on-dark-line); padding: 40px 0 48px; font-size: .875rem; color: var(--m-on-dark-muted); position: relative; }
.mkt-footer .mkt-wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: baseline; justify-content: space-between; }
.mkt-footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
.mkt-footer a { color: var(--m-on-dark-soft); }
.mkt-footer a:hover { color: var(--m-on-dark); }
.mkt-footer .legal-line { flex-basis: 100%; color: var(--m-on-dark-muted); font-size: .875rem; margin-top: 8px; max-width: 64em; line-height: 1.6; }

/* --- field guides ------------------------------------------------------------- */
/* A guide is a document, so it is rendered as one: a paper surface with the file's
   own number in mono, the title in the display serif, and the address field sitting
   inside the card rather than behind a second click. */

.mkt-guides { display: grid; gap: 28px; }

.mkt-guide {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: var(--t-radius);
  padding: 30px 34px 24px;
}
.mkt-guide .summary { max-width: 62em; }

/* The entry closes on one line: what the file is, and the way to it. */
.mkt-guide-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 40px; flex-wrap: wrap;
  border-top: 1px solid var(--m-line-soft); padding-top: 18px; margin-top: 22px;
}
/* Scoped past `.mkt-guide .for` below, which sets the rule this one has to take back.
   At equal specificity that rule wins on source order and the card closes on two
   stacked hairlines. The foot owns the rule; the paragraph inside it does not. */
.mkt-guide .mkt-guide-foot .for { flex: 1 1 420px; border-top: 0; padding-top: 0; margin: 0; }
.mkt-guide-foot .mkt-btn { flex: 0 0 auto; }
.mkt-guide .n {
  font-family: var(--m-mono); font-size: .78rem; font-weight: 700;
  color: var(--m-gold-rule); letter-spacing: 0.08em;
}
.mkt-guide h3 {
  font-family: var(--m-serif); font-size: 1.5rem; font-weight: 600;
  margin: 8px 0 6px; line-height: 1.2;
}
.mkt-guide .sub {
  font-family: var(--m-serif); font-size: 1.05rem; color: var(--m-ink-soft);
  margin: 0 0 14px;
}
.mkt-guide .summary { margin: 0 0 16px; color: var(--m-ink-soft); font-size: .94rem; }
.mkt-guide .for {
  font-size: .875rem; color: var(--m-muted);
  border-top: 1px solid var(--m-line-soft); padding-top: 12px; margin: 0;
}

/* What the file actually contains, so the address buys something known. */
.mkt-guide-toc { margin: 0 0 16px; padding: 0; list-style: none; }
.mkt-guide-toc li {
  font-size: .94rem; padding: 5px 0 5px 20px; position: relative;
  border-bottom: 1px solid var(--m-line-soft); color: var(--m-ink-soft);
}
.mkt-guide-toc li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 9px; height: 9px; border: 1px solid var(--m-muted); border-radius: 2px;
}

.mkt-get {
  background: var(--m-tint-blue);
  border: 1px solid var(--m-tint-blue-line);
  border-radius: var(--t-radius-s);
  padding: 20px 20px 18px;
}
.mkt-get h4 {
  font-family: var(--m-serif); font-size: 1.05rem; font-weight: 600; margin: 0 0 10px;
}
.mkt-get .mkt-btn { width: 100%; justify-content: center; margin-top: 12px; }
.mkt-get .consent {
  font-size: .875rem; color: var(--m-ink-soft); line-height: 1.55; margin: 12px 0 0;
}

/* No label, no tab stop, off the page: only automation ever fills this in. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* --- a guide's own page ---------------------------------------------------------- */

.mkt-crumbs { font-size: .875rem; color: var(--m-muted); margin-bottom: 22px; }
.mkt-crumbs a { color: var(--m-ink-soft); }
.mkt-crumbs span { color: var(--m-muted); }

.mkt-guide-head,
.mkt-guide-close { display: grid; grid-template-columns: 1fr 340px; gap: 0 56px; align-items: start; }
.mkt-guide-head > div:first-child { max-width: 640px; }
.mkt-guide-head h1 { font-size: clamp(2.1rem, 3.8vw, 2.9rem); }
.mkt-guide-meta {
  font-size: .875rem; color: var(--m-muted);
  border-top: 1px solid var(--m-line-soft); padding-top: 14px; margin-top: 20px;
}
.mkt-guide-close h2 { font-size: 1.6rem; }
.mkt-guide-close p { color: var(--m-ink-soft); font-size: .94rem; max-width: 40em; }

/* The contents list, two columns when there is room. */
.mkt-guide-toc.columns { columns: 2; column-gap: 56px; }
.mkt-guide-toc.columns li { break-inside: avoid; }

/* The excerpt: guide prose, on the page, at reading measure. */
.mkt-excerpt { max-width: 760px; }
.mkt-excerpt > p { color: var(--m-ink-soft); }
.mkt-excerpt h3 { font-family: var(--m-serif); font-size: 1.15rem; margin: 28px 0 8px; }
.mkt-excerpt .mkt-facts { margin-top: 8px; }
.mkt-excerpt .mkt-bounds { grid-template-columns: 1fr; }

.mkt-list { margin: 0 0 1rem; padding-left: 20px; color: var(--m-ink-soft); }
.mkt-list li { margin-bottom: 8px; }
.mkt-list li::marker { color: var(--m-gold-rule); }

.mkt-callout {
  background: var(--m-surface); border-left: 3px solid var(--m-line);
  border-radius: 0 var(--t-radius-s) var(--t-radius-s) 0;
  padding: 16px 20px; margin: 20px 0;
}
.mkt-callout.gold { background: var(--m-tint-gold); border-left-color: var(--m-gold-rule); }
.mkt-callout.blue { background: var(--m-tint-blue); border-left-color: var(--m-elder-blue); }
.mkt-callout strong { font-family: var(--m-serif); font-size: 1.05rem; display: block; margin-bottom: 4px; }
.mkt-callout p { margin: 0; font-size: .94rem; color: var(--m-ink-soft); }

/* Demonstrated record lines: real data, so mono (13-brand). */
.mkt-record {
  font-family: var(--m-mono); font-size: .875rem; line-height: 1.9;
  background: var(--m-surface); border: 1px solid var(--m-tint-blue-line);
  border-radius: var(--t-radius-s); padding: 12px 16px; margin: 20px 0;
  overflow-x: auto;
}
.mkt-record div + div { border-top: 1px solid var(--m-tint-blue-line); }

/* --- contact ------------------------------------------------------------------- */

.mkt-contact { display: grid; grid-template-columns: 1fr 360px; gap: 0 72px; align-items: start; }
.mkt-contact-form { max-width: 620px; }
.mkt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.mkt-contact-aside {
  background: var(--m-band); border: 1px solid var(--m-line-soft);
  border-radius: var(--t-radius); padding: 26px 28px;
}
.mkt-contact-aside h3 {
  font-family: var(--m-serif); font-size: 1.15rem; font-weight: 600; margin: 0 0 8px;
}
.mkt-contact-aside p { font-size: .94rem; color: var(--m-ink-soft); margin: 0 0 14px; }
.mkt-contact-aside p:last-child { margin-bottom: 0; }

/* --- legal prose pages -------------------------------------------------------- */

.mkt-prose { max-width: 740px; margin: 0 auto; padding: 64px 24px 96px; width: 100%; }
.mkt-prose h1 { font-size: 2.3rem; }
.mkt-prose h1::before {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 2px;
  background: var(--m-gold-rule); margin-bottom: 20px;
}
.mkt-prose h2 { font-size: 1.3rem; margin-top: 1.8em; }
.mkt-prose p { color: var(--m-ink-soft); }

/* --- the learning center ------------------------------------------------------- */
/* An article is a document, so it is set like one: a single measure of about 68
   characters, serif heads, and the same block shapes the field guides use. The index
   is a contents page rather than a card grid (13-brand: equal-card grids are a
   marketing smell). */

.mkt-learn-nav { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 28px; }
.mkt-learn-nav a {
  border: 1px solid var(--m-line); border-radius: var(--t-radius-control);
  padding: 7px 14px; font-size: .875rem; font-weight: 500; color: var(--m-ink-soft);
  background: var(--m-surface);
}
.mkt-learn-nav a,
.mkt-learn-nav a:hover { text-decoration: none; }
.mkt-learn-nav a:hover { border-color: var(--m-muted); color: var(--m-ink); }

.mkt-learn-group + .mkt-learn-group { margin-top: 56px; }
.mkt-learn-group h2 { font-size: 1.5rem; margin-bottom: 6px; }
.mkt-learn-group h2::before {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 2px;
  background: var(--m-gold-rule); margin-bottom: 16px;
}
.mkt-learn-group .blurb {
  color: var(--m-ink-soft); font-size: .97rem; max-width: 58em; margin: 0 0 22px;
}

.mkt-learn-list { list-style: none; margin: 0; padding: 0; }
.mkt-learn-list li {
  border-top: 1px solid var(--m-line-soft); padding: 20px 0 22px; max-width: 72em;
}
.mkt-learn-list > li > a {
  font-family: var(--m-serif); font-size: 1.25rem; font-weight: 600; color: var(--m-ink);
}
.mkt-learn-list .deck { margin: 5px 0 0; color: var(--m-ink-soft); font-size: 1rem; }
.mkt-learn-list .summary { margin: 9px 0 0; color: var(--m-ink-soft); font-size: .94rem; max-width: 62em; }
.mkt-learn-list .meta { margin: 10px 0 0; font-size: .875rem; color: var(--m-muted); }
.mkt-learn-list.compact > li > a { font-size: 1.1rem; }
.mkt-learn-list.compact p { margin: 4px 0 0; color: var(--m-ink-soft); font-size: .94rem; }
.mkt-learn-list.compact .meta { color: var(--m-muted); font-size: .82rem; }
.mkt-learn-list.compact li.guide > a { color: var(--m-elder-blue); }

/* --- an article --------------------------------------------------------------- */

.mkt-article { max-width: 760px; }
.mkt-article-head { max-width: 760px; }
.mkt-article-head h1 { font-size: clamp(2rem, 3.6vw, 2.7rem); }
.mkt-article > section + section { margin-top: 44px; }
.mkt-article > section > h2 {
  font-size: 1.45rem; margin: 0 0 12px; padding-top: 22px;
  border-top: 1px solid var(--m-line-soft);
}
.mkt-article p { color: var(--m-ink-soft); }
.mkt-article h3 { font-family: var(--m-serif); font-size: 1.12rem; margin: 26px 0 8px; }
.mkt-article .mkt-facts { margin-top: 10px; }
.mkt-article .mkt-bounds { grid-template-columns: 1fr; }
.mkt-article .mkt-callout { margin: 22px 0; }
.mkt-article .mkt-record { margin: 20px 0; }
.mkt-article .mkt-guide-toc { margin: 4px 0 18px; }

/* Steps in a single measure stack; the three-across strip is for full-width bands. */
.mkt-article .mkt-spine3 { grid-template-columns: 1fr; margin: 6px 0 20px; }
.mkt-article .mkt-spine3 li { padding: 14px 0 12px; }

.mkt-article-toc {
  background: var(--m-band); border: 1px solid var(--m-line-soft);
  border-radius: var(--t-radius); padding: 20px 24px 22px; margin-bottom: 44px;
}
.mkt-article-toc h2 {
  font-family: var(--m-sans); font-size: .78rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--m-muted); margin: 0 0 10px; border: 0; padding: 0;
}
.mkt-article-toc ol { margin: 0; padding: 0 0 0 20px; }
.mkt-article-toc li { margin-bottom: 6px; font-size: .94rem; }
.mkt-article-toc li::marker { font-family: var(--m-mono); font-size: .82rem; color: var(--m-gold-rule); }

.mkt-article-sources { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--m-line-soft); }
.mkt-article-sources h2 { font-size: 1.15rem; margin: 0 0 10px; border: 0; padding: 0; }
.mkt-article-sources ul { margin: 0; padding-left: 20px; }
.mkt-article-sources li { margin-bottom: 7px; font-size: .9rem; color: var(--m-ink-soft); line-height: 1.55; }
.mkt-article-sources li::marker { color: var(--m-gold-rule); }

.mkt-article-boundary {
  margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--m-hairline);
  font-size: .82rem; color: var(--m-muted); line-height: 1.6;
}

/* --- responsive ---------------------------------------------------------------- */

@media (max-width: 1120px) {
  .mkt-flows { gap: 0 48px; }
  .mkt-flow + .mkt-flow { padding-left: 48px; margin-left: -24px; }
  .mkt-persist { gap: 48px; }
}

@media (max-width: 820px) {
  .mkt-band { padding: 64px 0; }
  .mkt-band.tight { padding: 48px 0; }
  .mkt-hero { padding: 76px 0 84px; }
  /* Below the breakpoint the flow switches to edge mode (marketing-hero.js):
     deals run the thin strips above and below the text, no cards. */
  .mkt-flows, .mkt-persist, .mkt-pricing, .mkt-pricing2, .mkt-pricing3, .mkt-free, .mkt-bounds, .mkt-audience, .mkt-spine3 { grid-template-columns: 1fr; }
  .mkt-spine3 { margin-bottom: 36px; }
  .mkt-spine3 li { padding: 14px 0 10px; }
  .mkt-flow + .mkt-flow { border-left: 0; padding-left: 0; margin-left: 0; margin-top: 40px; }
  .mkt-header .mkt-wrap { flex-wrap: wrap; gap: 6px 22px; min-height: 0; }
  .mkt-nav { margin-left: 0; gap: 2px 20px; }
  .mkt-header .mkt-btn { display: none; }
  .mkt-facts td:first-child { white-space: normal; padding-right: 24px; }
  /* Except a path, which is still one unbreakable token on a phone. */
  .mkt-calls td:first-child { white-space: nowrap; }
  .mkt-contact,
  .mkt-guide-head, .mkt-guide-close { grid-template-columns: 1fr; gap: 24px; }
  .mkt-guide-toc.columns { columns: 1; }
  .mkt-guide { padding: 24px 22px 20px; }
  .mkt-pair { grid-template-columns: 1fr; }
  .mkt-close { padding: 72px 0; }

  /* The pricing comparison stops being a table here. Four columns of prose only
     survive on a phone as horizontal scroll, and scroll hides the plan the
     reader came to read. Each question becomes a card; each answer names its
     own plan, so nothing depends on a header row that has scrolled away. */
  .mkt-compare .mkt-facts,
  .mkt-compare tbody,
  .mkt-compare tr,
  .mkt-compare td { display: block; width: auto; }
  .mkt-compare thead { display: none; }
  .mkt-compare tr { padding: 2px 22px 20px; border-top: 1px solid var(--m-hairline); }
  .mkt-compare tbody tr:first-child { border-top: 0; }
  .mkt-compare td,
  .mkt-compare td:first-child { border-top: 0; padding: 16px 0 0; min-width: 0; width: auto; }
  .mkt-compare td:first-child { font-size: 1.1rem; padding-bottom: 2px; }
  .mkt-compare td[data-plan]::before {
    content: attr(data-plan);
    display: block; margin-bottom: 3px;
    font-family: var(--m-sans); font-style: normal;
    font-size: .78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--m-muted);
  }

  /* Wide evidence tables stop being tables here, for the same reason the pricing
     comparison does. The column that decides whether the reader believes any of this —
     "what's proved", "what the file holds" — is the last one, and on a phone the last
     column is the one hidden behind the scroll. Each row becomes a block and each cell
     names its own column, so nothing depends on a header row that scrolled away. */
  .mkt-stack,
  .mkt-stack tbody, .mkt-stack tfoot,
  .mkt-stack tr,
  .mkt-stack td { display: block; width: auto; }
  .mkt-stack thead { display: none; }
  .mkt-stack tr { padding: 2px 22px 20px; border-top: 1px solid var(--m-hairline); }
  .mkt-stack tbody tr:first-child { border-top: 0; }
  .mkt-stack td,
  .mkt-stack td:first-child { border-top: 0; padding: 14px 0 0; min-width: 0; width: auto; }
  .mkt-stack td:first-child { font-size: 1.1rem; padding-bottom: 2px; }
  .mkt-stack td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: 3px;
    font-family: var(--m-sans); font-style: normal;
    font-size: .78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--m-muted);
  }
}

/* --- the tools (spec/23-tools.md) --------------------------------------------------
   Two working instruments, and the page treats them as instruments: inputs on the left
   in ordinary form clothes, the answer on the right in the elder-soft evidence tint,
   because the answer is the demonstrated fact and the fields are just how you get to
   it. One headline figure per tool is the viewport's anchor, set in serif at display
   size like a pricing amount, because it is the number the reader came for. */

.mkt-tool { margin: 0; }

.mkt-tool-grid { display: grid; gap: 34px; align-items: start; }
@media (min-width: 900px) {
  .mkt-tool-grid { grid-template-columns: 1fr 1.15fr; gap: 44px; }
  .mkt-tool-grid:not(.stacked) .mkt-tool-result { position: sticky; top: 24px; }
  /* The checklist stacks instead of splitting. Its answer is four columns of prose,
     and four columns of prose in half a page is a column of single words. */
  .mkt-tool-grid.stacked { grid-template-columns: 1fr; }
  .mkt-tool-grid.stacked .mkt-checks { columns: 2; column-gap: 40px; }
}
@media (min-width: 1080px) {
  .mkt-tool-grid.stacked .mkt-checks { columns: 3; }
}

.mkt-tool-inputs fieldset {
  border: 0; border-top: 1px solid var(--m-line-soft);
  margin: 0 0 26px; padding: 20px 0 0;
}
.mkt-tool-inputs fieldset:first-child { border-top: 0; padding-top: 0; }
.mkt-tool-inputs legend {
  font-family: var(--m-serif); font-size: 1.15rem; font-weight: 600;
  color: var(--m-ink); padding: 0; margin-bottom: 4px;
}
.mkt-tool-inputs fieldset > .help {
  color: var(--m-ink-soft); font-size: .875rem; margin: 0 0 16px; max-width: 46em;
}
.mkt-field.narrow { flex: 0 1 116px; }

/* One SAFE per line. Below the fold of a phone it stacks, which is correct: four
   numbers side by side on a 375px screen is four numbers nobody can read. */
.mkt-safe-rows { display: grid; gap: 18px; margin-bottom: 16px; }
.mkt-safe-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  background: var(--m-surface); border: 1px solid var(--m-line-soft);
  border-radius: var(--t-radius-s); padding: 16px 16px 18px;
}
.mkt-safe-row .mkt-field { flex: 1 1 120px; margin-bottom: 0; }
.mkt-safe-row .mkt-field label { font-size: .875rem; }
.mkt-row-drop {
  flex: 0 0 auto; background: none; border: 0; padding: 10px 2px; cursor: pointer;
  font: inherit; font-size: .875rem; color: var(--m-muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.mkt-row-drop:hover { color: var(--t-failure); }
.mkt-btn.quiet {
  background: none; color: var(--m-ink-soft); border: 1px solid var(--m-line);
}
.mkt-btn.quiet:hover { border-color: var(--m-ink-soft); color: var(--m-ink); }

/* The answer. Tinted because it is evidence, not chrome. */
.mkt-tool-result {
  background: var(--m-tint-blue); border: 1px solid var(--m-tint-blue-line);
  border-radius: var(--t-radius); padding: 26px 26px 30px;
}
.mkt-tool-result .mkt-facts { background: var(--m-surface); }
.mkt-tool-result .mkt-facts-scroll { margin-bottom: 22px; }
.mkt-tool-idle { color: var(--m-muted); font-size: .94rem; margin: 0; }

.mkt-tool-headline { margin: 0 0 24px; }
.mkt-tool-headline .label {
  display: block; font-family: var(--m-mono); font-size: .74rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-elder-blue);
  margin-bottom: 8px;
}
.mkt-tool-headline .figure {
  font-family: var(--m-serif); font-size: clamp(1.6rem, 4.2vw, 2.25rem);
  line-height: 1.15; margin: 0; color: var(--m-ink);
}
.mkt-tool-headline .figure .was { color: var(--m-muted); }
.mkt-tool-headline .figure .arrow { color: var(--m-muted); font-size: .62em; }
.mkt-tool-headline .figure strong { font-weight: 600; }
.mkt-tool-headline .note {
  font-size: .875rem; color: var(--m-ink-soft); margin: 10px 0 0; line-height: 1.55;
}

.mkt-tool-h {
  font-family: var(--m-serif); font-size: 1.05rem; font-weight: 600;
  margin: 0 0 10px; color: var(--m-ink);
}
.mkt-tool-note {
  font-size: .875rem; color: var(--m-ink-soft); line-height: 1.6; margin: 0 0 14px;
}
.mkt-tool-note:last-child { margin-bottom: 0; }

/* Amounts, shares and percentages right-align, like a fee schedule. */
.mkt-facts th.num, .mkt-facts td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mkt-facts tr.is-total td { border-top: 2px solid var(--m-line); font-weight: 600; }
.mkt-facts tr.is-total td, .mkt-facts tr.is-total td strong { color: var(--m-ink); }

/* The tick list. Label and prompt in one target, so the whole row is clickable. */
.mkt-check-group {
  font-family: var(--m-mono); font-size: .74rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-muted);
  margin: 20px 0 6px;
}
.mkt-check-group:first-of-type { margin-top: 0; }
.mkt-checks { list-style: none; margin: 0; padding: 0; }
.mkt-checks li {
  display: flex; gap: 11px; align-items: flex-start;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  padding: 9px 0; border-bottom: 1px solid var(--m-line-soft);
}
.mkt-checks input { margin: 3px 0 0; flex: 0 0 auto; width: 17px; height: 17px; }
.mkt-checks label { display: block; font-weight: 400; cursor: pointer; margin: 0; }
.mkt-checks label strong { font-weight: 600; display: block; font-size: .96rem; }
.mkt-checks label span {
  display: block; font-size: .84rem; color: var(--m-muted); margin-top: 1px;
}

/* The schedule. The watch line is the gold pause: the thing on this row that has
   caught somebody out before. */
.mkt-schedule td { font-size: .9rem; }
.mkt-schedule td:first-child { min-width: 190px; }

/* The notes for a row, spanning it. Gold is the watchful pause: the thing on this
   line that has caught somebody out before. Elder blue is the answer to a fork,
   which is a decision that has been made. */
.mkt-schedule-notes td { border-top: 0; padding-top: 0; }
.mkt-schedule-notes[hidden] { display: none; }
.mkt-schedule-watch, .mkt-schedule-fork {
  display: block; max-width: 78em; padding-left: 12px; margin-top: 8px;
  border-left: 2px solid var(--m-tint-gold-line);
  font-size: .84rem; color: var(--m-ink-soft); line-height: 1.55;
}
.mkt-schedule-fork { border-left-color: var(--m-elder-blue); }
.mkt-schedule-fork[hidden] { display: none; }
.mkt-tool-count:empty { display: none; }

/* The preparation copies: rendered documents, so they wear the serif. */
.mkt-tool-letters {
  border-top: 1px solid var(--m-line); margin-top: 34px; padding-top: 28px;
}
.mkt-tool-letters h2 {
  font-family: var(--m-serif); font-size: 1.35rem; font-weight: 600; margin: 0 0 8px;
}
.mkt-letter-names { display: grid; gap: 16px 40px; margin: 16px 0 8px; }
@media (min-width: 760px) { .mkt-letter-names { grid-template-columns: 1fr 1fr 1fr; } }
.mkt-letter-same { align-self: end; }
.mkt-letter-same input { margin-right: 8px; }
.mkt-letter {
  border: 1px solid var(--m-line); background: var(--m-surface);
  padding: 24px; margin-top: 16px;
}
.mkt-letter h3 {
  font-family: var(--m-serif); font-size: 1.1rem; font-weight: 600; margin: 0 0 8px;
}
.mkt-letter pre {
  font-family: var(--m-serif); font-size: .94rem; line-height: 1.55;
  white-space: pre-wrap; margin: 0; overflow-x: auto;
}
.mkt-letter-bridge { color: var(--m-ink-soft); max-width: 40em; }

/* Keep a copy: the ask, after the answer and never before it. */
.mkt-tool-keep {
  display: grid; gap: 22px 40px; align-items: start;
  border-top: 1px solid var(--m-line); margin-top: 34px; padding-top: 28px;
}
@media (min-width: 760px) { .mkt-tool-keep { grid-template-columns: 1fr 1fr; } }
.mkt-tool-keep h3 {
  font-family: var(--m-serif); font-size: 1.35rem; font-weight: 600; margin: 0 0 8px;
}
.mkt-tool-keep > div > p { color: var(--m-ink-soft); margin: 0; max-width: 40em; }
.mkt-get.bare { background: none; border: 0; padding: 0; }

.mkt-tool-privacy {
  font-size: .875rem; color: var(--m-muted); margin: 22px 0 0;
  padding-top: 16px; border-top: 1px solid var(--m-line-soft);
}
.mkt-bounds.tight { margin-bottom: 20px; }