/* The public pages. Tokens come from templates/brand/_tokens.html, which every
 * server-rendered layout includes; this file adds no colour of its own.
 *
 * Type is § 06 of the style guide, verbatim: Archivo 400/600 and nothing else,
 * IBM Plex Mono for anything the machine produced, negative tracking on display
 * sizes, positive tracking only on uppercase mono.
 *
 * ONE RUST FILL PER SCREEN (§ 07). On these pages it is `.mk-btn`, the request-
 * access call to action. That is why the header's Sign in is `.mk-btn-outline`
 * and the hero's second action is `.mk-btn-ghost` — and why the hero artwork
 * skips the categorical ramp's rust entry.
 */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--graphite);
  background: var(--cream);
}
:focus-visible { outline: 2px solid var(--rust-500); outline-offset: 3px; }
img, svg { max-width: 100%; }

.skip {
  position: absolute; left: -9999px;
  padding: 10px 16px; background: var(--ink); color: var(--cream);
  text-decoration: none; border-radius: 0 0 8px 0; z-index: 10;
}
.skip:focus { left: 0; top: 0; }

.mk-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── header ─────────────────────────────────────────────────────────────────
   Ink, and continuous with the hero below it: the two are read as one dark
   field, which is the same signature the app has (dark chrome, light content). */
.mk-head { background: var(--ink); }
.mk-head-in {
  width: 100%; max-width: 1120px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 20px;
}
.mk-lockup {
  display: inline-flex; align-items: center; gap: 11px;   /* 32% of the mark */
  color: var(--cream); text-decoration: none;
  font-size: 21px; font-weight: 600; letter-spacing: -0.035em;
  white-space: nowrap;
}
.mk-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.mk-nav a {
  color: var(--silver); text-decoration: none; font-size: 15px;
}
.mk-nav a:hover { color: var(--cream); }
.mk-btn-outline {
  padding: 8px 16px; border-radius: 7px;
  border: 1px solid #3C424A; color: var(--cream) !important;
  font-weight: 600; font-size: 14px;
}
.mk-btn-outline:hover { border-color: var(--rust-500); background: rgba(194, 86, 48, 0.14); }

/* ── buttons ───────────────────────────────────────────────────────────────── */
.mk-btn {
  display: inline-block;
  padding: 13px 26px; border-radius: 8px;
  background: var(--rust-700); color: var(--cream);
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background 0.15s, transform 0.05s;
}
.mk-btn:hover { background: var(--rust-800); }
.mk-btn:active { transform: translateY(1px); }
.mk-btn-ghost {
  display: inline-block;
  padding: 13px 20px; color: var(--silver);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.mk-btn-ghost:hover { color: var(--cream); }

/* ── type ──────────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 600; color: var(--ink); margin: 0; }
/* Headings only. Balancing spreads the last line's words back across the ones
   above it, which is what stops a display-size heading ending on one orphaned
   word; browsers without it just wrap normally. Never on body copy — the
   algorithm is capped at a few lines and paragraphs pay for it. */
h1, h2 { text-wrap: balance; }
h1 { font-size: 44px; line-height: 1.05; letter-spacing: -0.035em; }
h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; }
h3 { font-size: 17px; line-height: 1.35; letter-spacing: -0.015em; }
p { margin: 0 0 18px; max-width: 68ch; }
code {
  font-family: var(--mono); font-size: 0.88em;
  background: var(--rust-050); border: 1px solid var(--rust-100);
  padding: 1px 5px; border-radius: 4px;
}
/* Uppercase is reserved for mono eyebrow labels, and positive tracking goes only
   on those (§ 06). */
.mk-eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--rust-300);
  margin: 0 0 18px;
}
.mk-lede { font-size: 17px; line-height: 1.6; max-width: 52ch; }
.mk-sec-lede { font-size: 17px; color: var(--slate); max-width: 60ch; margin-top: 14px; }

/* ── hero ──────────────────────────────────────────────────────────────────── */
.mk-hero { background: var(--ink); color: #C9CED4; }
.mk-hero-in {
  width: 100%; max-width: 1120px; margin: 0 auto; padding: 64px 24px 76px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
}
.mk-hero h1 { color: var(--cream); }
.mk-hero .mk-lede { margin-top: 22px; color: #B6BCC3; }
.mk-cta-row { display: flex; align-items: center; gap: 10px; margin-top: 30px; flex-wrap: wrap; }

.mk-hero-art { justify-self: center; width: 100%; max-width: 470px; }
.mk-plane { fill: rgba(250, 246, 239, 0.05); }
.mk-plane-lit { fill: rgba(250, 246, 239, 0.10); }
.mk-plane-edge { fill: none; stroke: rgba(250, 246, 239, 0.42); stroke-width: 1.25; }
.mk-grid { fill: none; stroke: rgba(250, 246, 239, 0.20); stroke-width: 1; }
.mk-chip { fill: rgba(250, 246, 239, 0.34); }
.mk-feature { fill: none; stroke: #B4780C; stroke-width: 2.5; stroke-linecap: round; }
.mk-vertex { fill: var(--cream); }
/* The flow that carries data → agent → map. */
.mk-flow { fill: none; stroke: rgba(250, 246, 239, 0.34); stroke-width: 1.5; stroke-linecap: round; }
.mk-flow-head { fill: rgba(250, 246, 239, 0.6); }
.mk-orbit { fill: none; stroke: rgba(250, 246, 239, 0.16); stroke-width: 1; }
.mk-sat { fill: rgba(250, 246, 239, 0.5); }
.mk-node { fill: rgba(250, 246, 239, 0.06); stroke: rgba(250, 246, 239, 0.5); stroke-width: 1.5; }
.mk-spark { fill: var(--cream); }
.mk-map-frame { fill: none; stroke: rgba(250, 246, 239, 0.5); stroke-width: 1.5; }
/* Sans, not mono. It reads like a caption a machine emitted when it is set in
   mono, and § 06 keeps that face for things the machine actually produced. */
.mk-art-caption {
  font-size: 13.5px; color: var(--slate);
  text-align: center; margin: 16px 0 0;
}

/* ── sections ──────────────────────────────────────────────────────────────── */
/* Grounds are set per section, not by :nth-of-type — the sequence here is
   ink → white → ink → cream → sheet → white, which no nth rule expresses, and a
   section inserted in the middle would silently invert every one below it. */
.mk-sec { padding: 76px 0; }
.mk-sec-white { background: var(--white); }
.mk-sec-dark { background: var(--ink); color: #B6BCC3; }
.mk-sec-dark h2 { color: var(--cream); }
.mk-sec-dark code { background: #23272D; border-color: #32373E; color: var(--rust-300); }

.mk-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 36px;
}
.mk-card p { font-size: 15px; line-height: 1.6; color: var(--slate); margin: 8px 0 0; }
.mk-ico {
  width: 26px; height: 26px; display: block; margin-bottom: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── the AI section ────────────────────────────────────────────────────────── */
.mk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mk-split p { font-size: 16px; color: #B6BCC3; }
/* Questions, set in Archivo like the rest of the prose. Deliberately NOT mono:
   § 06 reserves that for what a machine produced, and a sentence somebody typed
   set in mono reads as output — which is exactly the wrong claim for a list of
   things people ask. */
.mk-asks {
  border: 1px solid #2E3339; border-radius: 10px; background: #1B1E22;
  padding: 22px 24px 24px;
}
.mk-asks-head {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--slate); margin: 0 0 16px;
}
.mk-asks ul { list-style: none; margin: 0; padding: 0; }
.mk-asks li {
  position: relative; padding: 11px 0 11px 22px;
  font-size: 15.5px; line-height: 1.5; color: #D5DAE0;
}
.mk-asks li + li { border-top: 1px solid #24282D; }
.mk-asks li::before {
  content: "→"; position: absolute; left: 0; color: var(--rust-300);
}

/* The assistants strip, inside the same Ink section and deliberately outside
   .mk-wrap: it runs edge to edge, so the tiles arrive from off-screen rather
   than from a margin, which is what reads as a strip rather than a row.
   CSS only — no JS is available on these pages (script-src 'self', plus the
   template sweep in tests/test_security_headers.py). The track holds the same
   group TWICE and travels exactly -50%, so the second copy lands where the
   first started and the seam never shows: add or remove tiles freely, but drop
   the duplicate group and the loop jumps. */
.mk-marquee {
  margin-top: 46px;
  overflow: hidden;
  /* Fades the tiles into the Ink at both ends instead of cutting one mid-word.
     Unsupported → a hard edge, which is merely plainer. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mk-marquee-track {
  display: flex; width: max-content;
  animation: mk-marquee-scroll 46s linear infinite;
}
/* Pausing on hover is what makes a name readable; focus-within covers the
   keyboard, for when a tile grows a focusable child. */
.mk-marquee:hover .mk-marquee-track,
.mk-marquee:focus-within .mk-marquee-track { animation-play-state: paused; }
@keyframes mk-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.mk-marquee-group {
  display: flex; align-items: stretch; gap: 14px;
  list-style: none; margin: 0; padding: 0 7px;
}
.mk-agent {
  display: flex; align-items: center; gap: 12px;
  flex: 0 0 auto;
  padding: 15px 22px;
  background: #1B1E22; border: 1px solid #2E3339; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--silver);
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.mk-agent:hover { color: var(--cream); border-color: #454C55; }
/* One colour, off currentColor — never the vendor's own brand colours. Seven
   palettes across one band would fight each other and § 07's one-rust-fill
   rule, and monochrome is the version that stays right as vendors restyle. */
.mk-agent-mark { width: 24px; height: 24px; flex: none; fill: currentColor; }
.mk-marquee-note {
  margin: 26px 0 0; max-width: 62ch;
  font-size: 13.5px; line-height: 1.6; color: var(--slate);
}

/* ── build-models pipeline ───────────────────────────────────────────────────
   The chaining story drawn as a flow: two datasets and a reference layer feed a
   model, that model feeds the next, the last becomes a map. Node accents are the
   CATEGORICAL ramp (rendered data, never chrome) minus the rust — the same rule
   the hero art follows, so the diagram and the CTA don't read as one system.
   It is wide by nature, so it scrolls inside itself on a phone rather than
   shrinking illegibly — the .mk-*-scroll pattern, not a page-body scroll. */
.mk-pipe { margin: 42px 0 6px; overflow-x: auto; }
.mk-pipe svg { display: block; width: 100%; min-width: 640px; height: auto; }
.mk-pipe-node { fill: var(--white); stroke: var(--mist); stroke-width: 1.25; }
.mk-pipe-flow { fill: none; stroke: var(--silver); stroke-width: 1.75; }
.mk-pipe-head { fill: var(--silver); }
.mk-pipe-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
}
.mk-pipe-name { font-family: var(--sans); font-size: 14px; font-weight: 600; fill: var(--ink); }

/* ── governance list ───────────────────────────────────────────────────────── */
.mk-list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 2px; }
.mk-list li {
  display: grid; grid-template-columns: 190px 1fr; gap: 24px;
  padding: 18px 0; border-top: 1px solid var(--mist);
  font-size: 15px; color: var(--slate);
}
.mk-list li:last-child { border-bottom: 1px solid var(--mist); }
.mk-k { font-weight: 600; color: var(--ink); font-size: 15px; }

/* ── closing block ─────────────────────────────────────────────────────────── */
.mk-sec-close { background: var(--white); }
.mk-close { text-align: center; }
.mk-close .mk-sec-lede { margin: 14px auto 28px; }

/* ── contact page ──────────────────────────────────────────────────────────── */
/* Its own light ground, distinct from the cream body, so the white form card
   lifts off it. The two columns collapse to one below (media query). */
.mk-contact { background: var(--sheet); padding: 72px 0 88px; }
.mk-contact-in {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: start;
}
.mk-contact-intro .mk-eyebrow { color: var(--rust-500); }
.mk-contact-intro h1 { font-size: 38px; line-height: 1.12; letter-spacing: -0.01em; }
.mk-contact-lede { font-size: 17px; line-height: 1.6; color: var(--graphite); margin-top: 16px; max-width: 46ch; }
.mk-points { list-style: none; margin: 30px 0 0; padding: 0; }
.mk-point { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--mist); }
.mk-point:last-child { border-bottom: 1px solid var(--mist); }
.mk-point .mk-ico { flex: none; margin: 2px 0 0; }
.mk-point b { display: block; font-size: 15px; color: var(--ink); }
.mk-point span { display: block; font-size: 14px; line-height: 1.5; color: var(--slate); margin-top: 2px; }

/* The one raised surface on these pages. Kept subtle: a hairline plus a soft
   drop, not a heavy shadow — the page is editorial, not an app chrome. */
.mk-contact-card {
  background: var(--white); border: 1px solid var(--mist); border-radius: 14px;
  padding: 30px 30px 32px;
  box-shadow: 0 1px 2px rgba(21, 23, 26, 0.04), 0 16px 36px -18px rgba(21, 23, 26, 0.22);
}
.mk-card-title { font-size: 20px; margin-bottom: 4px; }
.mk-card-title + p { color: var(--slate); font-size: 15px; margin: 8px 0 18px; }

/* ── the form ──────────────────────────────────────────────────────────────── */
.mk-form { margin-top: 20px; }
.mk-field { display: block; margin-bottom: 16px; }
.mk-field > span {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px;
}
.mk-form input[type="text"],
.mk-form input[type="email"],
.mk-form textarea {
  width: 100%; padding: 11px 13px;
  font-family: inherit; font-size: 15px; color: var(--graphite);
  background: var(--white); border: 1px solid var(--mist); border-radius: 8px;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.mk-form input::placeholder, .mk-form textarea::placeholder { color: var(--silver); }
.mk-form textarea { min-height: 116px; resize: vertical; }
.mk-form input:focus, .mk-form textarea:focus {
  border-color: var(--rust-500); box-shadow: 0 0 0 3px rgba(194, 86, 48, 0.18);
}
.mk-form button {
  width: 100%; padding: 13px 26px; border: none; border-radius: 8px; margin-top: 4px;
  background: var(--rust-700); color: var(--cream);
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.mk-form button:hover { background: var(--rust-800); }
.mk-form button:active { transform: translateY(1px); }
.mk-hint { font-size: 13px; color: var(--slate); margin: 12px 0 0; text-align: center; }
/* The honeypot. Off-screen rather than display:none — a bot that reads computed
   styles skips a hidden field, and one that fills everything gets caught. Never
   labelled in a way that tells it apart. */
.mk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Colour never carries the failure alone (§ 05): the icon-free version of that
   rule here is that the message always says what to do. */
.mk-error {
  padding: 11px 14px; margin-bottom: 18px; border-radius: 8px;
  background: var(--danger-tint); color: var(--danger);
  font-size: 14px; font-weight: 600;
}
/* The success state: the card becomes an acknowledgement rather than holding an
   empty form. Success green carries the tick; the words carry the meaning. */
.mk-sent { text-align: center; padding: 14px 6px 8px; }
.mk-sent-mark {
  width: 48px; height: 48px; margin: 0 auto 16px; padding: 12px;
  border-radius: 999px; background: var(--success-tint);
  fill: none; stroke: var(--success); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.mk-sent h2 { font-size: 21px; }
.mk-sent p { color: var(--slate); font-size: 15px; line-height: 1.6; margin-top: 10px; }

/* ── prose pages (about, terms, privacy) ───────────────────────────────────── */
.mk-prose { padding: 64px 0 84px; }
.mk-prose h1 { font-size: 38px; margin-bottom: 10px; }
.mk-prose h2 { font-size: 20px; margin: 40px 0 12px; }
.mk-prose p, .mk-prose li { max-width: 68ch; font-size: 16px; color: var(--graphite); }
.mk-prose ul { margin: 0 0 18px; padding-left: 22px; }
.mk-prose li { margin-bottom: 8px; }
.mk-prose a { color: var(--rust-800); font-weight: 600; }
.mk-updated { font-family: var(--mono); font-size: 12px; color: var(--slate); }
.mk-note {
  border-left: 3px solid var(--warning); background: var(--warning-tint);
  padding: 14px 18px; margin: 0 0 26px; max-width: 68ch;
}
.mk-note p { margin: 0; font-size: 15px; color: var(--graphite); }

/* ── docs (/docs) ──────────────────────────────────────────────────────────
   Sheet ground, not cream: the docs are a reference surface rather than part of
   the landing page's editorial sequence, and the nav card needs a white it can
   sit on. No rust FILL appears anywhere under this layout (§ 07) — the section's
   one accent is the current-page marker on the nav, which is a rule, not a fill. */
.mk-docs { background: var(--sheet); padding: 48px 0 84px; }
.mk-docs-in { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; }

.mk-docs-nav { position: sticky; top: 28px; }
.mk-docs-nav .mk-eyebrow { color: var(--slate); margin: 0 0 14px; }
.mk-docs-nav ul { list-style: none; margin: 0 0 4px; padding: 0; }
.mk-docs-nav li { margin: 0; }
.mk-docs-nav a, .mk-docs-home {
  display: block; padding: 5px 0 5px 11px; margin-left: -12px;
  border-left: 2px solid transparent;
  font-size: 14.5px; line-height: 1.45; color: var(--graphite); text-decoration: none;
}
.mk-docs-nav a:hover { color: var(--ink); border-left-color: var(--mist); }
.mk-docs-nav a[aria-current="page"] {
  color: var(--rust-800); font-weight: 600; border-left-color: var(--rust-500);
}
.mk-docs-home { margin-bottom: 10px; }
.mk-docs-navhead {
  margin: 16px 0 4px; max-width: none;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink);
}

.mk-docs-body {
  background: var(--white); border: 1px solid var(--mist); border-radius: 10px;
  padding: 44px 48px 52px; min-width: 0;
}
.mk-docs-body h1 { font-size: 36px; margin-bottom: 12px; }
.mk-docs-body h2 {
  font-size: 22px; margin: 44px 0 14px;
  padding-top: 22px; border-top: 1px solid var(--mist);
}
.mk-docs-body h2:first-of-type { border-top: 0; padding-top: 0; }
.mk-docs-body h3 { font-size: 16.5px; margin: 28px 0 10px; }
.mk-docs-body p, .mk-docs-body li, .mk-docs-body dd { font-size: 16px; color: var(--graphite); }
.mk-docs-body ul { margin: 0 0 18px; padding-left: 22px; }
.mk-docs-body li { margin-bottom: 8px; max-width: 68ch; }
.mk-docs-body a { color: var(--rust-800); font-weight: 600; }
.mk-docs-body .mk-sec-lede { margin: 0 0 24px; }

/* Numbered because the order is the instruction — the marker is set in mono so a
   step number never reads as body copy. */
.mk-steps { list-style: none; counter-reset: step; margin: 0 0 20px; padding: 0; }
.mk-steps > li { counter-increment: step; position: relative; padding-left: 34px; margin-bottom: 12px; }
.mk-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sheet); border: 1px solid var(--mist);
  font-family: var(--mono); font-size: 11.5px; line-height: 20px; text-align: center;
  color: var(--slate);
}
.mk-steps ul { margin: 8px 0 0; }

.mk-crumb { font-size: 13px; color: var(--slate); margin: 0 0 18px; }
.mk-crumb a { color: var(--slate); font-weight: 400; }

.mk-grant { list-style: none; padding: 0; margin: 0 0 18px; }
.mk-grant li {
  padding: 9px 0 9px 26px; margin: 0; border-bottom: 1px solid var(--mist);
  position: relative; font-size: 15px;
}
.mk-grant li:first-child { border-top: 1px solid var(--mist); }
.mk-grant li::before {
  content: "✓"; position: absolute; left: 2px; color: var(--success); font-size: 13px;
}

/* Both wide blocks scroll inside themselves. The page body must never scroll
   sideways — on a phone a long command line is exactly what would make it. */
.mk-table-scroll, .mk-pre-scroll { overflow-x: auto; margin: 0 0 20px; }
.mk-docs-body table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 15px; }
.mk-docs-body th, .mk-docs-body td {
  text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--mist);
  vertical-align: top;
}
.mk-docs-body th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
                   font-family: var(--mono); font-weight: 500; color: var(--slate); }
.mk-docs-body pre {
  margin: 0; padding: 16px 18px; background: var(--ink); border-radius: 8px;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.6; color: var(--chalk);
  /* These blocks are commands people retype. A ligature that joins `--` into one
     long dash is the exact character a reader would then get wrong. */
  font-variant-ligatures: none;
}
.mk-docs-body pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }

.mk-faq { margin: 0; }
.mk-faq dt { font-weight: 600; color: var(--ink); margin: 20px 0 6px; font-size: 15.5px; }
.mk-faq dd { margin: 0; max-width: 68ch; }

.mk-docs-sec { margin-top: 8px; }
.mk-docs-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mk-docs-cards li {
  margin: 0; max-width: 68ch;
  border: 1px solid var(--mist); border-radius: 8px; padding: 14px 18px;
}
.mk-docs-cards li:hover { border-color: var(--silver); }
.mk-docs-cards a { display: block; font-size: 16px; }
.mk-docs-cards span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--slate); }

/* ── footer ────────────────────────────────────────────────────────────────── */
.mk-foot { background: var(--ink); color: var(--slate); padding: 40px 0 48px; }
.mk-foot-in {
  width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.mk-lockup-sm { font-size: 17px; gap: 9px; }
.mk-foot-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.mk-foot-nav a { color: var(--slate); text-decoration: none; font-size: 14px; }
.mk-foot-nav a:hover { color: var(--cream); }
.mk-foot-note {
  max-width: 1120px; margin: 26px auto 0; padding: 0 24px;
  font-size: 12.5px; line-height: 1.6; color: #5C626A;
}
.mk-foot-copy {
  max-width: 1120px; margin: 24px auto 0; padding: 22px 24px 0;
  border-top: 1px solid #23272D;
  font-size: 12.5px; color: #5C626A;
}

/* ── responsive ────────────────────────────────────────────────────────────
   The product is desktop-shaped; the landing page is not. Most first visits are
   phones, so every grid collapses and the hero art goes below the copy. */
@media (max-width: 960px) {
  .mk-hero-in { grid-template-columns: 1fr; gap: 40px; padding: 52px 24px 60px; }
  .mk-hero-art { max-width: 420px; }
  .mk-grid-3 { grid-template-columns: 1fr; gap: 30px; max-width: 62ch; }
  .mk-split { grid-template-columns: 1fr; gap: 34px; }
  /* The form leads on a phone — a hand there is one thumb from Send, and the
     supporting points can follow it rather than push it below the fold. */
  .mk-contact-in { grid-template-columns: 1fr; gap: 32px; }
  .mk-contact-card { order: -1; }
  /* The nav stacks above the article rather than becoming a drawer: a drawer
     needs JavaScript, and these pages carry none. */
  .mk-docs-in { grid-template-columns: 1fr; gap: 28px; }
  .mk-docs-nav { position: static; }
}
@media (max-width: 620px) {
  h1 { font-size: 33px; letter-spacing: -0.03em; }
  h2 { font-size: 22px; }
  .mk-prose h1 { font-size: 30px; }
  .mk-contact { padding: 48px 0 60px; }
  .mk-contact-intro h1 { font-size: 30px; }
  .mk-contact-card { padding: 24px 22px 26px; }
  .mk-sec { padding: 54px 0; }
  .mk-asks { padding: 18px 18px 20px; }
  .mk-marquee { margin-top: 34px; }
  .mk-agent { padding: 12px 17px; font-size: 14px; gap: 10px; }
  .mk-agent-mark { width: 21px; height: 21px; }
  .mk-list li { grid-template-columns: 1fr; gap: 4px; }
  .mk-head-in { gap: 12px; }
  .mk-nav { gap: 14px; }
  .mk-docs { padding: 30px 0 60px; }
  .mk-docs-body { padding: 28px 22px 34px; border-radius: 8px; }
  .mk-docs-body h1 { font-size: 29px; }
  .mk-docs-body h2 { font-size: 20px; margin-top: 34px; }
  .mk-foot-in { flex-direction: column; align-items: flex-start; gap: 18px; }
  .mk-foot-nav { margin-left: 0; }
}
@media (max-width: 380px) {
  .mk-lockup { font-size: 18px; }
  .mk-nav a { font-size: 14px; }
}

/* An endlessly moving strip is the textbook trigger. Stopping the animation
   alone would leave the seven names half off-screen, so the strip becomes a
   plain wrapped row and the duplicate group — which exists only to hide the
   loop's seam — is dropped. */
@media (prefers-reduced-motion: reduce) {
  .mk-marquee {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* The strip is full-bleed by design, so the static version has to put back
     the gutters .mk-wrap would have given it. */
  .mk-marquee-track {
    animation: none;
    width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px;
  }
  .mk-marquee-group { flex-wrap: wrap; padding: 0; }
  .mk-marquee-group[aria-hidden="true"] { display: none; }
}