/* ============================================================================
   Molecular AI — marketing component kit
   Requires tokens.css. Colours come ONLY from tokens — the same rule the
   product's workbench.css holds itself to. Alpha derivations use
   color-mix(in srgb, <token> N%, transparent), never hardcoded rgba.

   Class prefix is `mk-` (marketing kit) so this can never collide with the
   product's `wb-` sheet if the two are ever loaded together.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-snug); font-weight: var(--weight-semibold); }
h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); text-wrap: balance; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.012em; text-wrap: balance; }
h3 { font-size: var(--fs-xl); letter-spacing: -0.006em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: var(--space-6); }
/* List item spacing is scoped to prose contexts ONLY. A global `li + li`
   margin-top silently misaligns every flex list — it pushed the 2nd and 3rd
   nav links 6px below the first, and double-spaced the footer columns on top
   of their own gap. Flex lists space themselves with `gap`; leave them alone. */
:where(.mk-prose, .mk-scope__val, .mk-track__list, .mk-callout__body) li + li {
  margin-top: var(--space-2);
}
img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-brand-text-aa); text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--color-brand-text-aa) 40%, transparent); }
a:hover { text-decoration-color: var(--color-brand-text-aa); }

code, kbd, samp, pre { font-family: var(--font-family-mono); font-size: 0.92em; }

/* Focus: the product's ring, 3px brand tint plus a solid edge for the 3:1 rule */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.mk-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
         overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.mk-skip {
  position: absolute; left: var(--space-4); top: -6rem; z-index: 100;
  background: var(--color-surface-raised); color: var(--color-text);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  transition: top var(--duration-base) var(--ease);
}
.mk-skip:focus-visible { top: var(--space-4); }

/* ---- Layout -------------------------------------------------------------- */
.mk-container { width: 100%; max-width: var(--container); margin-inline: auto;
                padding-inline: var(--gutter); }
.mk-container--narrow { max-width: var(--container-narrow); }
/* Wider than the standard container, used by the hero only: the two
   screenshots share a row there, so every extra pixel of container width is
   split between them. The rest of the site stays at --container. */
.mk-container--wide { max-width: 80rem; }
.mk-section { padding-block: var(--section-y); }
.mk-section--tight { padding-block: calc(var(--section-y) * .32); }
/* A rule where the preceding block is not a .mk-section — the hero is
   .mk-hero, so the `.mk-section + .mk-section` border never fires after it. */
.mk-section--rule { border-top: 1px solid var(--color-border); }
.mk-section + .mk-section { border-top: 1px solid var(--color-border); }

/* Alternating grounds down the page. Counted on `section` so the hero is #1 and
   the bands start on the section after it.

   Where the ground changes the border is removed: two devices doing the same
   separating job read as a seam. The rule stays between same-ground sections,
   which is where it is still doing work. */
main > section:nth-of-type(2n) { background: var(--color-canvas-alt); }
main > section:nth-of-type(2n),
main > section:nth-of-type(2n) + section { border-top-color: transparent; }
.mk-stack { display: flex; flex-direction: column; }
.mk-stack > * + * { margin-top: var(--flow, var(--space-5)); }
.mk-prose { max-width: var(--measure); color: var(--color-text-secondary); }

/* ---- The signature device: uppercase tracked mono label ------------------ */
/* Straight from the product — IBM Plex Mono, 600, 0.16em, uppercase, muted.
   It heads every card and section over there; it does the same job here. */
.mk-label {
  font-family: var(--font-family-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.mk-label--brand { color: var(--color-brand-text-aa); }

/* ---- Nav ----------------------------------------------------------------- */
/* NOTE: this is the marketing nav — a light bar. It is deliberately NOT the
   product's dark sidebar slab, which is app chrome for an authenticated
   workspace. The two meet at the typeface and the brand, not the layout. */
.mk-nav {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--nav-height);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--color-surface-raised) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
@supports not (backdrop-filter: blur(1px)) {
  .mk-nav { background: var(--color-surface-raised); }
}
.mk-nav__inner { display: flex; align-items: center; gap: var(--space-6); width: 100%; }
.mk-brand {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--color-text); text-decoration: none; margin-right: auto; flex: none;
}
.mk-brand__mark { width: 26px; height: 26px; flex: none; }
/* The wordmark is live text, matching the product's own .nav-logo, which is
   also text rather than the PNG. Name and tracking follow it. */
.mk-brand__name {
  font-size: var(--app-fs-md); font-weight: var(--weight-bold);
  letter-spacing: 0.22em; text-transform: uppercase; line-height: 1;
}
.mk-brand__sub {
  font-family: var(--font-family-mono); font-size: 8.5px; font-weight: var(--weight-semibold);
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1;
  color: var(--color-brand-text-aa); display: block; margin-top: 3px;
}
.mk-nav__links { display: flex; align-items: center; gap: var(--space-6);
                 list-style: none; margin: 0; padding: 0; }
.mk-nav__link { color: var(--color-text-muted); text-decoration: none;
                font-size: var(--fs-sm); transition: color var(--duration-fast) var(--ease); }
.mk-nav__link:hover, .mk-nav__link[aria-current="page"] { color: var(--color-text); }

@media (max-width: 640px) {
  .mk-nav { position: static; }
  .mk-nav__inner { flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-3); }
  .mk-brand { margin-right: 0; width: 100%; }
  .mk-nav .mk-btn { margin-left: auto; }
}

/* ---- Theme toggle — same mechanism and storage key as the product -------- */
.mk-theme {
  display: inline-flex; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-surface); flex: none;
}
.mk-theme__seg {
  width: 32px; height: 28px; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; padding: 0;
  color: var(--color-text-muted); transition: color var(--duration-fast) var(--ease);
}
.mk-theme__seg[aria-pressed="true"] {
  background: var(--color-surface-raised);
  color: var(--color-brand-text-aa);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-brand) 40%, transparent);
}
.mk-theme__seg svg { width: 13px; height: 13px; }

/* ---- Buttons ------------------------------------------------------------- */
.mk-btn {
  --btn-bg: transparent; --btn-fg: var(--color-text); --btn-bd: var(--color-border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px var(--space-6);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--radius-md);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              filter var(--duration-fast) var(--ease);
}
/* The product's signature hover on solid fills. Bordered variants cancel it. */
.mk-btn--primary {
  --btn-bg: var(--color-brand-fill-aa); --btn-fg: var(--color-brand-contrast);
  --btn-bd: var(--color-brand-fill-aa);
}
.mk-btn--primary:hover { filter: brightness(1.08); }
.mk-btn--secondary { --btn-bg: var(--color-surface-raised); --btn-fg: var(--color-text); }
.mk-btn--secondary:hover { filter: none; --btn-bg: var(--color-surface); }
.mk-btn--link { --btn-bd: transparent; --btn-bg: transparent;
                --btn-fg: var(--color-brand-text-aa); padding-inline: var(--space-2); }
.mk-btn--link:hover { text-decoration: underline; }
.mk-btn--lg { padding: 13px var(--space-7); font-size: var(--fs-base); }
.mk-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.mk-btn-group { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---- Cards --------------------------------------------------------------- */
/* 10px, the product's real card radius — not one of its own radius tokens. */
.mk-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-node);
}
.mk-card__title { font-size: var(--fs-lg); font-weight: var(--weight-semibold); }
.mk-card__body { font-size: var(--fs-sm); color: var(--color-text-secondary); }
a.mk-card { text-decoration: none; color: inherit;
  transition: border-color var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease); }
a.mk-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
a.mk-card::after { content: "→"; color: var(--color-brand-text-aa);
                   font-size: var(--fs-sm); margin-top: auto; }

/* The flagship engagement spans the grid instead of taking a louder colour —
   the ordering is the emphasis. Set by "flagship": true in engagements.json. */
.mk-card--flagship {
  border-color: color-mix(in srgb, var(--color-brand) 35%, transparent);
  background: color-mix(in srgb, var(--color-brand) 4%, var(--color-surface-raised));
}
@media (min-width: 720px) { .mk-card--flagship { grid-column: 1 / -1; } }
.mk-card__flag {
  font-family: var(--font-family-mono); font-size: var(--fs-2xs);
  font-weight: var(--weight-semibold); letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase; color: var(--color-brand-text-aa);
}

/* ---- Two-track hero ------------------------------------------------------ */
/* The structural consequence of the product/services decision: two routes,
   equal weight, each with its own availability stated plainly. */
.mk-hero { padding-block: clamp(1.25rem, 0.75rem + 2vw, 2rem) var(--space-6); }
.mk-hero__lead { max-width: 48rem; display: flex; flex-direction: column; gap: var(--space-5); }
.mk-hero__sub { font-size: var(--fs-lg); color: var(--color-text-secondary); max-width: 54ch; }
.mk-tracks { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
@media (min-width: 860px) { .mk-tracks { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.mk-track {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-7);
  box-shadow: var(--shadow-node);
}
.mk-track--primary { border-color: color-mix(in srgb, var(--color-brand) 35%, transparent); }
.mk-track__avail {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-family-mono); font-size: var(--fs-2xs);
  font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase;
}
.mk-track__avail--now { color: var(--color-ok-text); }
.mk-track__avail--gated { color: var(--color-text-muted); }
.mk-track__title { font-size: var(--fs-xl); font-weight: var(--weight-semibold); }
.mk-track__body { font-size: var(--fs-sm); color: var(--color-text-secondary); flex: 1; }
.mk-track__list { font-size: var(--fs-sm); color: var(--color-text-secondary);
                  padding-left: var(--space-5); }

/* ---- Audience split ------------------------------------------------------
   Two readers of the same capability, side by side. Deliberately text with a
   rule rather than cards: .mk-track further down the page is already a pair of
   cards, and repeating that container would read as the same section twice. */
.mk-audience { display: grid; gap: var(--space-6); }
@media (min-width: 860px) {
  .mk-audience { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.mk-audience__col {
  display: flex; flex-direction: column; gap: var(--space-3);
  border-left: 2px solid var(--color-border-strong); padding-left: var(--space-5);
}
.mk-audience__title { font-size: var(--fs-base); font-weight: var(--weight-semibold); }
.mk-audience__body { font-size: var(--fs-sm); color: var(--color-text-secondary); }
/* Same unit, 2×2. Used for the differentiators so the page does not acquire a
   third container style for what is the same kind of content. */
@media (min-width: 860px) {
  .mk-audience--2x2 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-7) var(--space-8); }
}

/* ---- Runs on — engine support, stated per vendor -------------------------
   LOGO SLOT. .mk-runs__logo is a fixed-height box; swapping the wordmark for
   an official vendor SVG does not move the layout. Drop the asset in as an
   <img src="logos/<vendor>.svg" alt=""> or an inline <svg>, and delete the
   sibling .mk-runs__wordmark span. See logos/README.md before you do — every
   one of these marks is a registered trademark with usage terms attached. */
.mk-runs { display: grid; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px)  { .mk-runs { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .mk-runs { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.mk-runs__item {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); background: var(--color-surface-raised);
}
.mk-runs__item--soon { border-style: dashed; background: transparent; box-shadow: none; }
.mk-runs__logo { display: flex; align-items: center; min-height: 32px; }
.mk-runs__logo img, .mk-runs__logo svg { max-height: 32px; max-width: 100%; width: auto; }
.mk-runs__wordmark { font-size: var(--fs-lg); font-weight: var(--weight-semibold);
                     letter-spacing: -0.01em; }
.mk-runs__item--soon .mk-runs__wordmark { color: var(--color-text-muted); }
.mk-runs__note { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.mk-runs__status {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto;
  font-family: var(--font-family-mono); font-size: var(--fs-2xs);
  font-weight: var(--weight-semibold); letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}
.mk-runs__status--live { color: var(--color-ok-text); }
.mk-runs__status--soon { color: var(--color-text-muted); }

/* ---- Inline demo loop ----------------------------------------------------
   A short screen recording inside the same frame as the product screenshots,
   so the page keeps one visual language for "this is the app". Distinct from
   the hero scrub above: that one carries the whole rearchitecture, this is a
   few seconds of a single interaction.

   TO FILL IT — two routes, both keep the frame, bar, caption and aspect ratio:

   1. GIF or animated WebP. Drop light and dark files into screenshots/ and
      uncomment the .mk-demo__media--metric rules under the screenshot section.
      background-image animates and picks up the theme through the same
      three-state pattern as .mk-shot__img. Delete the --empty modifier and the
      child div.
   2. MP4/WebM — far smaller than a GIF for a screen recording, and the reason
      to prefer it: an autoplaying GIF cannot be stopped, so it ignores
      prefers-reduced-motion. With <video>, gate autoplay on that query and
      show a poster frame instead. Replace the media div with
      <video muted loop playsinline poster="...">, keep the class.

   Either way the recording must be of the real product. A mocked-up
   interaction here is a fabricated claim under MOL-239, not a design asset. */
.mk-demo { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.mk-demo__media {
  aspect-ratio: 1460 / 688;
  background-size: cover; background-position: center top; background-repeat: no-repeat;
}
.mk-demo__media video, .mk-demo__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}
.mk-demo__media--empty {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface);
}
/* Inset dashed rule. Without it the empty slot reads as a broken image rather
   than a slot that is waiting for an asset. Goes away with the --empty class. */
.mk-demo__media--empty::before {
  content: ""; position: absolute; inset: var(--space-5);
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md);
}
.mk-demo__empty {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  text-align: center; padding: var(--space-6);
}
.mk-demo__empty p { font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 48ch; }
/* Half-width slots want a taller crop — a 2.12:1 frame at 600px is 283px high,
   which is not enough rows to show a dense table view. */
.mk-demo__media--tall { aspect-ratio: 4 / 3; }



/* ---- Steps / features ---------------------------------------------------- */
.mk-steps { display: grid; gap: var(--space-6); counter-reset: step; }
@media (min-width: 720px) { .mk-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Five across, with every band aligned via subgrid rather than by hoping the
   copy happens to wrap to the same number of lines.

   `margin-top: auto` on .mk-step__you flushes the BOTTOMS, which is not the
   same thing: each "your side" block is a different height, so its top — and
   therefore its hairline rule — lands somewhere different in every column, and
   five ragged rules across one row read as a bug. Subgrid pins the number,
   title, body and your-side bands to shared rows, so the rules line up and the
   1fr body row absorbs the difference. */
@media (min-width: 1000px) {
  .mk-steps--5 {
    grid-template-columns: repeat(5, minmax(0,1fr));
    grid-template-rows: auto auto 1fr auto;
    column-gap: var(--space-5);
    row-gap: var(--space-3);
  }
  .mk-steps--5 .mk-step {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;          /* ::before, title, body, your-side */
    gap: 0;                    /* rows come from the parent now */
  }
  /* Top of its own row, not bottom: the whole point is that the rule above it
     sits at one height across all five. */
  .mk-steps--5 .mk-step__you { margin-top: 0; align-self: start; }
}
.mk-step { counter-increment: step; display: flex; flex-direction: column; gap: var(--space-3); }
.mk-step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-family-mono); font-size: var(--fs-2xs);
  font-weight: var(--weight-semibold); letter-spacing: var(--letter-spacing-label);
  color: var(--color-brand-text-aa);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border);
}
.mk-step__title { font-size: var(--fs-base); font-weight: var(--weight-semibold); }
.mk-step__body { font-size: var(--fs-sm); color: var(--color-text-secondary); }
/* What the customer does at this stage, as opposed to what we do. A services
   buyer's real second question is "how much of my team does this cost me", and
   answering it per stage is more honest than one blanket sentence. Pushed to
   the bottom of the step so the stages line up across a five-column row even
   when the bodies above them are uneven. */
.mk-step__you {
  margin-top: auto; padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--fs-xs); color: var(--color-text-subtle);
}
.mk-step__you b {
  font-family: var(--font-family-mono); font-size: var(--fs-2xs);
  font-weight: var(--weight-semibold); letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase; color: var(--color-text-muted);
  display: block; margin-bottom: 2px;
}

/* ---- FAQ -----------------------------------------------------------------
   <details>/<summary> rather than a JS accordion: the answers stay in the DOM
   for anything crawling the page (MOL-129 counts indexable words, and MOL-102
   wants question-verbatim text), keyboard and screen-reader behaviour comes
   free, and the page carries no script it would otherwise need. */
.mk-faq { display: flex; flex-direction: column;
          border-top: 1px solid var(--color-border); }
.mk-faq__item { border-bottom: 1px solid var(--color-border); }
.mk-faq__q {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-5) 0; cursor: pointer;
  font-size: var(--fs-base); font-weight: var(--weight-semibold);
  list-style: none;
}
.mk-faq__q::-webkit-details-marker { display: none; }
.mk-faq__q::after {
  content: "+"; margin-left: auto; flex: none;
  font-family: var(--font-family-mono); color: var(--color-brand-text-aa);
}
.mk-faq__item[open] .mk-faq__q::after { content: "\2212"; }
/* No :focus-visible rule here on purpose — the global one at the top of this
   file already lists `summary`, and it is written with :where() so it carries
   zero specificity. Any class-level override would silently win over it. */
.mk-faq__q:hover { color: var(--color-brand-text-aa); }
.mk-faq__a { padding: 0 0 var(--space-6); max-width: var(--measure);
             font-size: var(--fs-sm); color: var(--color-text-secondary); }
.mk-faq__a > * + * { margin-top: var(--space-4); }
.mk-features { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .mk-features { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .mk-features--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ---- The engagement ladder ----------------------------------------------
   Six engagements used to render as a flat grid of six equal cards, which
   makes the visitor do the sorting. The offer is not flat: the audit gates
   everything else ("The audit first — it is what makes the rebuild possible to
   scope"), three engagements are siblings that differ by trigger rather than
   by delivery, and one is all of it bought together. Three rungs say that in
   the layout, so the page answers "where do I start" without being asked —
   which is also what the closing CTA already says.

   Each rung is just a labelled group; the cards inside are ordinary .mk-card.
   A rung holding one card lets it run full width as a block, so there is no
   half-empty grid cell and .mk-card--flagship's grid-column never applies. */
.mk-ladder { display: flex; flex-direction: column; gap: var(--space-9); }
.mk-ladder__rung { display: flex; flex-direction: column; gap: var(--space-5); }
.mk-ladder__head {
  display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.mk-ladder__step {
  font-family: var(--font-family-mono); font-size: var(--fs-2xs);
  font-weight: var(--weight-semibold); letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase; color: var(--color-brand-text-aa);
  white-space: nowrap;
}
.mk-ladder__title { font-size: var(--fs-base); font-weight: var(--weight-semibold); }
.mk-ladder__note {
  font-size: var(--fs-sm); color: var(--color-text-subtle);
  margin-left: auto; max-width: 46ch;
}

/* ---- Scope list (S2's workhorse) ----------------------------------------- */
.mk-scope { display: grid; border: 1px solid var(--color-border);
            border-radius: var(--radius-card); overflow: hidden;
            background: var(--color-surface-raised); }
.mk-scope__row { display: grid; grid-template-columns: 1fr; gap: var(--space-2);
                 padding: var(--space-5) var(--space-6);
                 border-bottom: 1px solid var(--color-border-subtle); }
.mk-scope__row:last-child { border-bottom: 0; }
@media (min-width: 640px) {
  .mk-scope__row { grid-template-columns: 12rem 1fr; gap: var(--space-5); align-items: start; }
}
.mk-scope__key { font-family: var(--font-family-mono); font-size: var(--fs-2xs);
                 font-weight: var(--weight-semibold); text-transform: uppercase;
                 letter-spacing: var(--letter-spacing-label);
                 color: var(--color-text-muted); padding-top: .35em; }
.mk-scope__val { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.mk-scope__row--out { background: var(--color-danger-tint); }
.mk-scope__row--out .mk-scope__key { color: var(--color-danger-text); }

/* Status is never colour alone — every marker carries its word. */
.mk-marker { display: inline-block; font-family: var(--font-family-mono);
             font-size: var(--fs-2xs); font-weight: var(--weight-semibold);
             padding: 2px 7px; border-radius: var(--radius-sm);
             border: 1px solid currentColor; white-space: nowrap; }
.mk-marker--in  { color: var(--color-ok-text); }
.mk-marker--out { color: var(--color-danger-text); }
.mk-marker--roadmap { color: var(--color-warn-strong-aa); }

/* The scope label — "In Scope:" / "Out of Scope:" — reads as a definition, not
   a tag, so it drops the pill and sits on its own line above the sentence it
   governs. Three reasons it is not just .mk-marker with longer text:

     1. At that length the border stops reading as a status chip and starts
        reading as a button. A bordered box containing a colon is a mixed
        metaphor — the colon already promises that something follows.
     2. `white-space: nowrap` on a ~11ch pill eats most of the first line in a
        two-column card, so every card's opening sentence broke after two or
        three words. On its own line the sentence gets its full measure back.
     3. It is the same shape as .mk-scope__key on the engagement pages, so the
        card and the page it links to now use one vocabulary for one idea.

   The colour still carries no meaning on its own — accessibility.md's rule
   holds, because the word is the label. */
.mk-marker--label {
  display: block; border: 0; padding: 0;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
}

/* ---- Stats — designed around the empty state, which is the shipped one --- */
.mk-proof { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .mk-proof { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.mk-stat {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); background: var(--color-surface-raised);
  min-height: 8.5rem; justify-content: center;
}
/* Numerals in mono, matching how the product sets every figure. */
.mk-stat__value { font-family: var(--font-family-mono); font-size: var(--app-fs-stat);
                  font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
                  line-height: 1.2; }
.mk-stat__label { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.mk-stat__source { font-family: var(--font-family-mono); font-size: var(--fs-2xs);
                   color: var(--color-text-subtle); }
.mk-stat--empty { background: transparent; border-style: dashed;
                  border-color: var(--color-border-dashed); box-shadow: none; }
.mk-stat--empty .mk-stat__value { font-family: var(--font-family); font-size: var(--fs-lg);
                                  font-weight: var(--weight-medium); color: var(--color-text-muted); }

/* ---- Callout ------------------------------------------------------------- */
/* The product's banner recipe: 5–6% wash, 30–35% border, -text ink. */
.mk-callout {
  display: flex; flex-direction: column; gap: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-brand) 30%, transparent);
  background: color-mix(in srgb, var(--color-brand) 5%, transparent);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.mk-callout__title { font-size: var(--fs-base); font-weight: var(--weight-semibold);
                     color: var(--color-brand-text-aa); }
.mk-callout__body { font-size: var(--fs-sm); color: var(--color-text-secondary);
                    max-width: var(--measure); }
.mk-callout--roadmap { border-color: color-mix(in srgb, var(--color-warn) 35%, transparent);
                       background: color-mix(in srgb, var(--color-warn) 6%, transparent); }
.mk-callout--roadmap .mk-callout__title { color: var(--color-warn-strong-aa); }

/* ---- Screenshot frame ---------------------------------------------------- */
/* Product screenshots are the real UI; the frame says "this is the app", and
   the caption carries the source, because a screenshot with numbers in it is
   a quantitative claim (MOL-239). */
.mk-shot { display: flex; flex-direction: column; gap: var(--space-3); }
.mk-shot__frame {
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  overflow: hidden; background: var(--color-surface-raised);
  box-shadow: var(--shadow-overlay);
}
.mk-shot__bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  font-family: var(--font-family-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.04em; color: var(--color-text-subtle);
}
.mk-shot__dot { width: 8px; height: 8px; border-radius: var(--radius-pill);
                background: var(--color-brand); flex: none; }
/* The frame dot carries state, not brand: red for the warehouse as found,
   green for the rebuilt one. Paired with the words 'Before'/'After' beside
   it, so the meaning does not rest on colour alone. */
.mk-shot__dot--bad  { background: var(--color-danger); }
.mk-shot__dot--good { background: var(--color-ok); }
.mk-shot__caption { font-size: var(--fs-xs); color: var(--color-text-subtle);
                    max-width: var(--measure); }
.mk-shot img { width: 100%; }

/* Screenshots follow the site's theme. They are background-images on a
   role="img" element rather than <img> tags for one reason: the theme is set
   by a data-theme attribute, which <picture>/media cannot read, and shipping
   both <img> tags would download two files to show one. A background only
   fetches the rule that actually applies.

   Same three-state pattern as the tokens: bare :root is light, an explicit
   data-theme wins in both directions, and prefers-color-scheme only decides
   when the visitor has expressed no preference. */
.mk-shot__img {
  aspect-ratio: 1460 / 688;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* The before/after pair on S1.
   ⚠️ These point at the two RESTING FRAMES of the rearchitect capture
   (f000 and f099, the 2x stills from commit 08f53f7) and NOT at
   structure-before-flawed-wh / structure-after-cleaned-wh, which is what they
   used to reference. That swap is a correctness fix, not a visual preference:
   flawed_wh and cleaned_wh are two DIFFERENT reference warehouses, so
   captioning them "before" and "after" the same warehouse states something
   untrue. index.html's hero comment already recorded this — "one warehouse and
   its own proposed rebuild, which is both a stronger claim and a truer one" —
   and the same reasoning applies to a pair of stills.
   3276x1132 native, so 2.894 rather than the 1460/688 above. */
.mk-shot__img--pair { aspect-ratio: 3276 / 1132; }
/* The before/after pair on S1, STACKED rather than side by side.
   Side by side was the first instinct and it was wrong: the captures are
   3276x1132, so two-up inside the wide container gives each one about 518
   CSS pixels — a 6x downscale, at which the layer headings and table names
   that make the picture worth showing are illegible smudges. Full width each,
   read in sequence, is the only way the detail survives. The sequence also
   happens to be the argument: sprawl at the fold, the restructure below it. */
.mk-shots { display: grid; gap: var(--space-6); }

.mk-shot__img--before { background-image: url('screenshots/rearchitect/light/f000.webp'); }
.mk-shot__img--after  { background-image: url('screenshots/rearchitect/light/f099.webp'); }

:root[data-theme="dark"] .mk-shot__img--before { background-image: url('screenshots/rearchitect/dark/f000.webp'); }
:root[data-theme="dark"] .mk-shot__img--after  { background-image: url('screenshots/rearchitect/dark/f099.webp'); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mk-shot__img--before { background-image: url('screenshots/rearchitect/dark/f000.webp'); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mk-shot__img--after  { background-image: url('screenshots/rearchitect/dark/f099.webp'); }
}

/* The plain-English demo loop — filled 2026-08-12, both themes together.
   Went with route 2 (MP4) rather than the GIF the commented-out rules above
   anticipated, so the recording can be gated on prefers-reduced-motion. That
   means the theme swap toggles element visibility rather than a background
   image, but it is the same three-state logic: bare :root is light, an
   explicit data-theme wins in both directions, and prefers-color-scheme only
   decides when the visitor has expressed no preference.

   16/9, not the 1460/688 the other media uses: the payoff of this loop is the
   "not from a governed metric" panel beneath the chart, and a 2.12:1 crop of a
   1920x1080 recording cuts it off. */
.mk-demo__media--loop { aspect-ratio: 16 / 9; background: var(--color-surface); }
/* Every one of these is scoped through .mk-demo__media on purpose. The generic
   `.mk-demo__media video` rule further up is (0,1,1); a bare `.mk-demo__loop--dark`
   is (0,1,0) and loses to it, so the dark clip stayed visible in light mode and
   the two stacked. Matching the parent buys the extra specificity. */
.mk-demo__media .mk-demo__loop {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}
.mk-demo__media .mk-demo__loop--dark { display: none; }

:root[data-theme="dark"] .mk-demo__media .mk-demo__loop--light { display: none; }
:root[data-theme="dark"] .mk-demo__media .mk-demo__loop--dark  { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mk-demo__media .mk-demo__loop--light { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mk-demo__media .mk-demo__loop--dark  { display: block; }
}

/* prefers-reduced-motion for this loop is enforced in JS, not here: a <video>
   playing is not an animation, so no CSS rule can stop it. The markup omits
   the autoplay attribute and a script at the end of the page starts playback
   only when reduced motion is NOT requested. Everyone else keeps the poster
   frame, which is the finished heatmap — so opting out of the motion costs
   the result, not the answer. */

.mk-demo__caption { font-size: var(--fs-xs); color: var(--color-text-subtle);
                    max-width: var(--measure); }

}

/* A line break that only applies once the halves are side by side. On a phone
   the column is narrow enough to break on its own, and a forced break there
   would leave a short orphan line. */
.mk-br-lg { display: none; }
@media (min-width: 900px) { .mk-br-lg { display: inline; } }

/* ---- Layer chips (medallion) --------------------------------------------- */
.mk-layers { display: flex; flex-wrap: wrap; gap: var(--space-3);
             list-style: none; padding: 0; margin: 0; }
.mk-layer { display: inline-flex; align-items: center; gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            border: 1px solid var(--color-border); border-radius: var(--radius-pill);
            background: var(--color-surface-raised); font-size: var(--fs-sm);
            color: var(--color-text-secondary); }
.mk-layer::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill);
                    background: currentColor; flex: none; }
.mk-layer--bronze { color: var(--layer-bronze-text); }
.mk-layer--silver { color: var(--layer-silver-text); }
.mk-layer--gold   { color: var(--layer-gold-text); }

/* ---- Engines ------------------------------------------------------------- */
.mk-engines { display: flex; flex-wrap: wrap; gap: var(--space-3);
              list-style: none; padding: 0; margin: 0; }
.mk-engine { display: inline-flex; align-items: center; gap: var(--space-2);
             padding: var(--space-3) var(--space-5);
             border: 1px solid var(--color-border); border-radius: var(--radius-pill);
             background: var(--color-surface-raised); font-size: var(--fs-sm);
             color: var(--color-text); }
.mk-engine--supported { border-color: color-mix(in srgb, var(--color-ok) 35%, transparent); }
.mk-engine__tick { color: var(--color-ok-text); font-family: var(--font-family-mono); }
.mk-engine--roadmap { border-style: dashed; color: var(--color-text-muted); }

/* ---- CTA band ------------------------------------------------------------ */
.mk-cta {
  display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start;
  background: color-mix(in srgb, var(--color-brand) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-brand) 25%, transparent);
  border-radius: var(--radius-card); padding: var(--space-9) var(--space-7);
}
@media (min-width: 800px) {
  .mk-cta { flex-direction: row; align-items: center; justify-content: space-between;
            gap: var(--space-7); }
  .mk-cta__copy { max-width: 48ch; }
}
.mk-cta__sub { font-size: var(--fs-sm); color: var(--color-text-secondary);
               margin-top: var(--space-3); }

/* ---- Footer -------------------------------------------------------------- */
.mk-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-9);
             margin-top: var(--section-y); background: var(--color-surface); }
.mk-footer__inner { display: grid; gap: var(--space-7); }
@media (min-width: 720px) { .mk-footer__inner { grid-template-columns: 1.5fr repeat(3, minmax(0,1fr)); } }
.mk-footer__col-title { font-family: var(--font-family-mono); font-size: var(--fs-2xs);
                        font-weight: var(--weight-semibold); text-transform: uppercase;
                        letter-spacing: var(--letter-spacing-label);
                        color: var(--color-text-muted); margin-bottom: var(--space-4); }
.mk-footer__list { list-style: none; margin: 0; padding: 0;
                   display: flex; flex-direction: column; gap: var(--space-3); }
.mk-footer__list a { color: var(--color-text-secondary); text-decoration: none;
                     font-size: var(--fs-sm); }
.mk-footer__list a:hover { color: var(--color-text); }
/* A constant that has not landed yet: keep the label, lose the link. Set by
   data-url-empty="mute" in constants.js. */
.mk-footer__list a[aria-disabled="true"] { color: var(--color-text-subtle); cursor: default; }
.mk-footer__list a[aria-disabled="true"]:hover { color: var(--color-text-subtle); }
.mk-footer__list a[aria-disabled="true"]::after {
  content: " · soon"; font-family: var(--font-family-mono); font-size: var(--fs-2xs);
  letter-spacing: var(--letter-spacing-label);
}
.mk-footer__legal { margin-top: var(--space-7); padding-top: var(--space-6);
                    border-top: 1px solid var(--color-border);
                    font-size: var(--fs-xs); color: var(--color-text-subtle);
                    display: flex; flex-wrap: wrap; gap: var(--space-5); }

/* ---- Meta row (S2) ------------------------------------------------------- */
.mk-meta { display: flex; flex-wrap: wrap; gap: var(--space-7);
           padding: var(--space-5) 0;
           border-block: 1px solid var(--color-border); }
.mk-meta div { display: flex; flex-direction: column; gap: 2px; }
.mk-meta dt { font-family: var(--font-family-mono); font-size: var(--fs-2xs);
              font-weight: var(--weight-semibold); text-transform: uppercase;
              letter-spacing: var(--letter-spacing-label); color: var(--color-text-muted); }
.mk-meta dd { margin: 0; font-size: var(--fs-sm); color: var(--color-text); }

/* ---- Split hero: the headline and the evidence in one grid ---------------
   The h1's two halves sit above the two screenshots they describe, so the
   sentence and the images read as one statement rather than a claim followed
   by proof.

   Mechanics: one grid, and the h1 spans it using `subgrid` so its two spans
   land on exactly the same column tracks as the figures below. Falls back to
   an identical two-column definition where subgrid is unsupported — the gap
   must match the parent's or the halves drift off their images.

   Source order is h1 (both halves) then the two figures. On mobile that is
   interleaved so each half of the sentence sits above the image it describes
   — see the max-width block below. */
/* ---- Hero: the rearchitecture, played once --------------------------------
   One variable, --p (0 -> 1), written by JS from ELAPSED TIME once the visitor
   scrolls. It drives the frame index AND the layout, so the picture narrowing
   and the sentence completing are one gesture rather than two animations that
   have to be kept in step.

   This used to be scrubbed by scroll through a 320vh track. Scroll position is
   a terrible clock: it stalls when the visitor stops, runs at whatever speed
   they spin the wheel, and reverses. Working around that took a commit/settle
   machine that had to ignore scroll input mid-settle, which read as the
   animation hanging and then changing pace. A fixed clock has none of those
   states -- it plays the same way every time, for everyone.

   Why the frame changes shape: the sprawl is genuinely wide and short — ten
   columns — and the medallion it collapses into is narrow and tall, sitting at
   26% zoom in about a quarter of the captured canvas. So the window GROWS in
   height while it NARROWS in width, cropping dead canvas away instead of
   scaling the picture down. The graph ends up ~670px tall against the 280px
   the two old stills managed, and the width it gives up is exactly where the
   copy goes.

   Frames are a real capture of the product's Current -> Planned transition,
   recorded at 6s via the __ARCH_TWEEN_MS seam. Nothing here is illustrated. */
:root { --p: 0; }

/* One screen, in normal flow. The track is gone with the scrub that needed it:
   320vh of scroll only ever existed to give the wheel something to drive, and
   left behind it would be 320vh of nothing happening.

   The nav is sticky and therefore still IN FLOW, so the hero already starts
   below it — min-height only has to claim the space the nav leaves for the
   stage to fill the first screen with equal air above and below its contents.
   min-height rather than height: at --p: 1 the figure is at its tallest, and a
   short viewport should grow rather than crop it. */
.mk-hero--scrub { position: relative; padding: 0; }
.mk-hero__stage {
  min-height: calc(100vh - var(--nav-height));
  display: flex; align-items: center;
  padding-block: var(--space-8);
  overflow: hidden;
}
/* display:contents drops the h1 box so its two spans become grid children and
   can be placed at opposite ends of the transition. The heading stays ONE
   element — no duplicate, nothing hidden from screen readers. */
.mk-hero__head { display: contents; }
.mk-hero__inner {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: calc(var(--p) * var(--space-8));
  row-gap: var(--space-4);
  grid-template-areas: "eyebrow eyebrow" "lede lede" "tail fig" "body fig";
}
/* Text collapses by MAX-HEIGHT, not just opacity. A transparent element still
   lays out: with the media at full width the copy column is ~56px, and a
   heading left in it wraps into a 56px ribbon 274px tall, which both looks
   broken and blows out the row heights. Collapsing to zero lets
   minmax(0, 1fr) give the whole width to the figure — and lets it come back. */
.mk-hero__eyebrow {
  grid-area: eyebrow;
  opacity: clamp(0, calc(1 - var(--p) * 4), 1);
  max-height: calc((1 - var(--p)) * 3rem); overflow: hidden;
}
.mk-hero__head span:nth-of-type(1) {
  grid-area: lede; font-size: var(--fs-3xl); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display); text-wrap: balance;
  opacity: clamp(0, calc(1 - var(--p) * 3.2), 1);
  max-height: calc((1 - var(--p)) * 20rem); overflow: hidden;
}
/* The arriving copy is laid out at its FINAL width from the start, and its
   height is settled well before it becomes visible. Both matter:

   A width tied to the grid track would rewrap on every scroll frame as the
   column grows, so the text would visibly reflow word by word rather than
   arrive. Fixing the width means the line breaks are decided once.

   The max-height reaches full by p=0.33 while the fade only starts at p=0.45,
   so the block is never seen mid-wipe — it fades in already whole. It still
   collapses to zero at rest, which is what lets minmax(0, 1fr) hand the full
   width to the figure at the top of the scroll. */
.mk-hero__head span:nth-of-type(2) {
  grid-area: tail; font-size: var(--fs-3xl); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display); text-wrap: balance;
  color: var(--color-brand-text-aa);
  width: min(40rem, 46vw);
  opacity: clamp(0, calc((var(--p) - 0.45) * 3.2), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--p) - 0.45) * 3.2), 1)) * 14px));
  max-height: calc(clamp(0, calc(var(--p) * 3), 1) * 20rem); overflow: hidden;
}
.mk-hero__body {
  grid-area: body; color: var(--color-text-secondary);
  width: min(40rem, 46vw);
  opacity: clamp(0, calc((var(--p) - 0.55) * 3.2), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--p) - 0.55) * 3.2), 1)) * 14px));
  max-height: calc(clamp(0, calc(var(--p) * 3), 1) * 20rem); overflow: hidden;
}
.mk-hero__fig { grid-area: fig; margin: 0; min-width: 0; }
/* Height and aspect are driven; width is derived. The <img> is height-locked
   and centred, so narrowing the aspect crops empty canvas rather than shrinking
   the graph. */
.mk-hero__frames {
  /* Viewport-relative with bounds, not fixed pixels. At a fixed 400->660px the
     end state left 12px of air on an 800px viewport and would have overflowed
     anything shorter, because the stage is a fraction of the window but the
     figure was not. Clamped so it still has presence on a tall display and
     still fits a short one. */
  height: calc(clamp(300px, 44vh, 460px) + clamp(180px, 28vh, 300px) * var(--p));
  aspect-ratio: calc((1280 - 940 * var(--p)) / 442);
  width: auto; max-width: 100%;
  position: relative; overflow: hidden; background: var(--color-surface);
}
.mk-hero__frames img {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  height: 100%; width: auto; max-width: none; display: block;
}

/* A phone gets the resolved state with the whole sentence intact above it. The
   stacked layout is already taller than a screen, so claiming a screen minimum
   would only add dead air. */
@media (max-width: 899px) {
  .mk-hero__stage { min-height: 0; padding-block: var(--section-y); }
  .mk-hero__inner { grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "lede" "tail" "body" "fig"; row-gap: var(--space-5); }
  .mk-hero__eyebrow, .mk-hero__head span, .mk-hero__body {
    opacity: 1 !important; transform: none !important;
    max-height: none !important; width: auto !important; }
  .mk-hero__frames { width: 100%; height: auto; aspect-ratio: 340 / 442; }
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing plays. The resolved state and the complete sentence, both at once —
     the information survives, the motion does not. */
  .mk-hero__stage { min-height: 0; padding-block: var(--section-y); }
  .mk-hero__eyebrow, .mk-hero__head span, .mk-hero__body {
    opacity: 1 !important; transform: none !important; max-height: none !important; }
}

.mk-split { display: grid; gap: var(--space-6); align-items: start; }
.mk-split__head { margin: 0; }
.mk-split__head span { display: block; }
/* Second half is the turn in the sentence; it gets the accent to mark it. */
.mk-split__head span + span { color: var(--color-brand-text-aa); }

/* Mobile: half, image, half, image — the same pairing the desktop layout makes
   with columns, made with source order instead.

   `display: contents` on the h1 drops its box so the two spans become grid
   items of .mk-split directly, which is what allows a figure to sit between
   them. The heading stays ONE element: no duplicate h1, no split heading, no
   aria-hidden copy. Modern engines keep a display:contents element in the
   accessibility tree (the old Chrome/WebKit bug that dropped it is fixed), so
   the h1 is still announced as a level-1 heading.

   nth-of-type is DOM-based, not layout-based, so it keeps working on the
   figures even though their parent's child list has effectively changed. */
@media (max-width: 899px) {
  .mk-split__head { display: contents; }
  .mk-split__head span:nth-of-type(1)  { order: 1; }
  .mk-split__fig:nth-of-type(1)        { order: 2; }
  .mk-split__head span:nth-of-type(2)  { order: 3; }
  .mk-split__fig:nth-of-type(2)        { order: 4; }
}

/* Desktop: both halves of the sentence across the top, both screenshots
   beneath them, each half sitting directly above the image it describes.

   This arrangement is what lets the screenshots be large. Side by side they
   cost ONE image height of vertical budget instead of two, so the whole hero
   through its closing paragraph still clears the fold on a 14-inch MacBook
   while the images are meaningfully bigger than a stacked layout allows.

   Columns are equal — the two screenshots are the same size and share a row.

   The h1 spans both columns and adopts their tracks via `grid-template-columns:
   subgrid`, so each half lands on exactly the column its image occupies. That
   keeps the heading a single element rather than splitting it or hiding a
   duplicate for screen readers.

   Source order is h1 (both halves) then the two figures, so the mobile
   collapse reads as the complete sentence followed by both images — the right
   order on a phone rather than a compromise. */
@supports (grid-template-columns: subgrid) {
  @media (min-width: 900px) {
    .mk-split {
      grid-template-columns: 1fr 1fr;
      column-gap: var(--space-7);
      row-gap: var(--space-5);
    }
    /* One step down from full display size: at --fs-4xl each half wraps to
       three lines in half a container and pushes the images off the fold. */
    .mk-split__head {
      font-size: var(--fs-3xl);
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
      column-gap: var(--space-7);
      align-items: end;
    }
    .mk-split__head span { display: block; text-wrap: balance; }
    .mk-split__fig:nth-of-type(1) { grid-column: 1; }
    .mk-split__fig:nth-of-type(2) { grid-column: 2; }
  }
}

.mk-split__fig { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }