/* ============================================================================
   Landing page — the October 2026 layout (MOL-509)
   Loaded after kit.css by index.html only. Same rules as the kit: colours come
   only from tokens.css, alpha through color-mix, prefix `mk-l-` so nothing here
   can collide with a kit class another page relies on.

   The layout follows a reference the founders chose (summation.com): a
   left-aligned headline, then the product itself filling a soft gradient panel,
   then short calm sections — a statement with three cards, a platform list that
   opens one item at a time beside its picture, a row of teams, a gradient CTA.
   Only the FORMAT is borrowed. Every sentence is ours and cites a gate in
   design/copy.md, and every picture is a recording or a still of the real
   product (MOL-239: a mocked-up interaction is a fabricated claim).
   ========================================================================== */

/* ---- Shared ------------------------------------------------------------- */
/* Two weights, matched by eye and by ink to the reference (2026-10-11): its
   "300" is STK Bureau Sans BOOK, a heavier cut than most families' 300. On
   Plex, a true 300 read thin — the reference's headlines sit between Plex 400
   and 450 and its body text at 400. So: 420 for headings and titles, 400 for
   everything read. The variable font serves any value between 100 and 700. */
.mk-l-page {
  --l-head: 420; --l-text: 400;
  /* The soft panel every card, fact and list sits on, one step off the ground.
     A banded section (below) redefines it, so a panel stays a step off
     whichever ground it is on. */
  --l-panel: color-mix(in srgb, var(--color-text) 3.5%, var(--color-canvas));
}
/* One weight for everything a reader reads (300), with tracking that tightens
   as the size grows: -4% on display, -2% on titles, -1% on body. Measured off
   the reference 2026-10-11: 58 / 50 / 42 / 30 / 24 / 20 / 18px, all at 300, all
   tracked that way. Plex's variable axis reaches 300 (tokens.css). */
.mk-l-page :where(p, li, summary, figcaption) { font-weight: var(--l-text); }
.mk-l-page :where(h1, h2, h3, h4) { font-weight: var(--l-head); }
.mk-l-page :where(strong, b) { font-weight: var(--weight-semibold); }
.mk-l-display {
  font-size: clamp(2.5rem, 1.55rem + 3.1vw, 3.625rem);   /* 40 -> 58 */
  font-weight: var(--l-head);
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.mk-l-h2 {
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3.125rem);       /* 34 -> 50 */
  font-weight: var(--l-head);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.mk-l-h2--md { font-size: clamp(1.9rem, 1.45rem + 1.5vw, 2.625rem); line-height: 1.1; }  /* 30 -> 42 */
.mk-l-h2--sm { font-size: clamp(1.6rem, 1.35rem + 0.8vw, 1.875rem); line-height: 1.2; }  /* 26 -> 30 */
.mk-l-muted { color: var(--color-text-muted); }
.mk-l-sub {
  font-size: 1.25rem;                                       /* 20 */
  color: var(--color-text-muted);
  max-width: 34rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.mk-l-body { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text-muted); }
.mk-l-section { padding: clamp(4rem, 3rem + 4vw, 7.5rem) 0; }
.mk-l-section--flush-top { padding-top: 0; }

/* Theme-paired stills. Both <img>s carry loading="lazy", and a lazy image that
   is display:none is never fetched, so only the theme-matching one costs a
   request — the same contract the paired <video>s keep with preload="none". */
.mk-l-img--dark { display: none; }
:root[data-theme="dark"] .mk-l-img--light { display: none; }
:root[data-theme="dark"] .mk-l-img--dark  { display: block; }

/* The soft panel the product sits on. Built from brand and canvas tokens so it
   follows the theme; nothing in it is a baked image. */
.mk-l-glow {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 12% 0%,  color-mix(in srgb, var(--color-brand) 26%, transparent), transparent 70%),
    radial-gradient(55% 70% at 92% 18%, color-mix(in srgb, var(--color-brand-tint) 90%, transparent), transparent 75%),
    radial-gradient(70% 60% at 50% 110%, color-mix(in srgb, var(--color-brand) 14%, transparent), transparent 70%),
    var(--color-canvas-alt, var(--color-surface));
}
.mk-l-window {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 0.5px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  background: var(--color-surface);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--color-text) 6%, transparent),
    0 24px 64px color-mix(in srgb, var(--color-text) 18%, transparent);
}
.mk-l-window .mk-demo__media--loop { aspect-ratio: 16 / 9; }

/* The kit stripes every second <main> section (canvas-alt). This page picks
   its bands by hand instead (.mk-l-alt, "Section bands" below): counting
   sections would band the hero's film and cut its panel in half. */
main.mk-l-page > section:nth-of-type(2n) { background: none; }

/* ---- 1. Hero ------------------------------------------------------------ */
.mk-l-hero { padding: clamp(3rem, 2rem + 4vw, 6rem) 0 var(--space-8); }
.mk-l-hero__lead { display: grid; gap: var(--space-5); max-width: 40rem; }
.mk-l-hero__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-top: var(--space-3);
}
.mk-l-pill { border-radius: var(--radius-pill); }
.mk-l-agent {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 0.5rem 0.9rem 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.mk-l-agent:hover { border-color: var(--color-brand); }
.mk-l-agent code {
  font-size: var(--fs-xs); padding: 0.1rem 0.45rem; border-radius: var(--radius-sm);
  background: var(--color-brand-tint); color: var(--color-brand-text-aa);
}
.mk-l-stage { padding: clamp(1.25rem, 0.5rem + 4vw, 4.5rem); }
.mk-l-stage .mk-l-window { max-width: 72rem; margin: 0 auto; }

/* ---- 2. Problem --------------------------------------------------------- */
.mk-l-problem {
  display: grid; gap: var(--space-7);
  grid-template-columns: 1fr;
}
.mk-l-problem__body { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.875rem); line-height: 1.2; letter-spacing: -0.04em; }  /* 22 -> 30 */
.mk-l-problem__body p + p { margin-top: var(--space-5); color: var(--color-text); font-weight: 600; }
@media (min-width: 900px) {
  .mk-l-problem { grid-template-columns: 1fr 1.15fr; align-items: start; }
}

/* ---- 3. Statement + cards ---------------------------------------------- */
.mk-l-statement { max-width: 42ch; }
.mk-l-statement .mk-l-muted { color: var(--color-text-muted); }
.mk-l-cards {
  display: grid; gap: var(--space-4); margin-top: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .mk-l-cards { grid-template-columns: repeat(3, 1fr); } }
.mk-l-card {
  display: flex; flex-direction: column;
  border-radius: 20px;
  background: var(--l-panel);
  overflow: hidden;
}
.mk-l-card__pic {
  aspect-ratio: 6 / 5;
  margin: 22px 22px 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface-raised);
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--color-text) 10%, transparent),
              0 12px 32px color-mix(in srgb, var(--color-text) 8%, transparent);
}
.mk-l-card__pic img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.mk-l-card__text { padding: var(--space-6) 22px 26px; display: grid; gap: var(--space-3); }
.mk-l-card__title { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }   /* 24 */
.mk-l-card__body { color: var(--color-text-muted); font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; }  /* 18 */

/* ---- 4. Platform: one item open at a time, its picture beside it ------- */
.mk-l-platform__head { text-align: center; display: grid; gap: var(--space-3); justify-items: center; margin-bottom: var(--space-8); }
.mk-l-platform__head p { max-width: 52ch; }
.mk-l-acc {
  position: relative;
  border-radius: 20px;
  background: var(--l-panel);
  padding: var(--space-5);
}
.mk-l-acc__item + .mk-l-acc__item { margin-top: var(--space-3); }
.mk-l-acc__item > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 16px 24px;
  border-radius: 29px;
  background: var(--color-surface-raised);
  font-size: 1.125rem; line-height: 1.4; letter-spacing: -0.01em;
  transition: box-shadow var(--duration-fast) var(--ease);
}
.mk-l-acc__item > summary:hover { box-shadow: 0 2px 10px color-mix(in srgb, var(--color-text) 8%, transparent); }
.mk-l-acc__item > summary::-webkit-details-marker { display: none; }
.mk-l-acc__item > summary::after {
  content: "+"; display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  font-size: var(--fs-base); line-height: 1;
}
.mk-l-acc__item[open] > summary { display: none; }
.mk-l-acc__panel {
  border-radius: 20px;
  background: var(--color-surface-raised);
  padding: 30px;
  animation: mk-l-rise 220ms cubic-bezier(.4,0,.2,1);
}
.mk-l-acc__panel h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }
.mk-l-acc__panel p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; max-width: 30rem; }
.mk-l-acc__item[open] .mk-l-acc__vis { animation: mk-l-fade 260ms cubic-bezier(.4,0,.2,1); }
@keyframes mk-l-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes mk-l-fade { from { opacity: 0; } to { opacity: 1; } }
.mk-l-acc__vis { margin-top: var(--space-5); }
.mk-l-acc__vis img { border-radius: var(--radius-md); border: 0.5px solid var(--color-border); width: 100%; }
.mk-l-acc__vis .mk-l-window--crop img {
  aspect-ratio: 2.1 / 1; width: 100%; height: auto;
  object-fit: cover; object-position: left center; border: 0; border-radius: 0;
}
.mk-l-acc__vis .mk-l-window img { border: 0; border-radius: 0; }
.mk-l-acc__code {
  margin: 0; padding: var(--space-5); border-radius: var(--radius-md);
  background: var(--color-surface); border: 0.5px solid var(--color-border);
  font-size: var(--fs-sm); line-height: 1.6; overflow-x: auto; white-space: pre;
}
/* Desktop: the list is the left column, and the OPEN item's picture is lifted
   into the right column. Only an open <details> renders its content, so exactly
   one picture is ever on screen and the closed ones are never fetched. */
@media (min-width: 960px) {
  .mk-l-acc { min-height: 34rem; padding: var(--space-6); }
  .mk-l-acc__item { width: 38%; }
  .mk-l-acc__vis {
    position: absolute; top: var(--space-6); right: var(--space-6); bottom: var(--space-6);
    width: calc(62% - var(--space-9));
    margin: 0; display: grid; align-items: center;
    padding: var(--space-6);
    border-radius: var(--radius-md);
  }
  .mk-l-acc__vis.mk-l-glow { padding: var(--space-6); }
}

/* ---- Reveal (2026-10-13) -------------------------------------------------
   Scroll-in: fade and an 8px rise, 520ms, siblings 70ms apart; the hero uses
   100ms steps over 640ms. Only under html.js-reveal (set in the head when
   motion is allowed and IntersectionObserver exists), so JS-off and
   reduced-motion visitors see every element at rest. kit.css's reduced-motion
   rule also zeroes these transitions. */
html.js-reveal [data-reveal] {
  opacity: 0; transform: translateY(8px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step, 70ms));
}
html.js-reveal .mk-l-hero [data-reveal],
html.js-reveal [data-reveal][data-reveal-step="100"] { transition-duration: 640ms, 640ms; }
html.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* Platform list crossfade: when the open item changes, the outgoing picture
   is cloned as a ghost that fades out over the incoming one's fade-in. */
.mk-l-acc__ghost { pointer-events: none; z-index: 0; transition: opacity 220ms var(--ease); }
.mk-l-acc__ghost.is-out { opacity: 0; }
@media (min-width: 960px) { .mk-l-acc__item[open] .mk-l-acc__vis { z-index: 1; } }

/* ---- 5. Teams ----------------------------------------------------------- */
.mk-l-teams {
  display: grid; gap: 0; margin-top: var(--space-8);
  grid-template-columns: 1fr;
  border-top: 0.5px solid var(--color-border);
}
.mk-l-team { padding: var(--space-6) 0; border-bottom: 0.5px solid var(--color-border); }
.mk-l-team h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }
.mk-l-team p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; }
@media (min-width: 900px) {
  .mk-l-teams { grid-template-columns: repeat(4, 1fr); border-bottom: 0; }
  .mk-l-team { padding: var(--space-6) var(--space-5) var(--space-2); border-bottom: 0; }
  .mk-l-team:first-child { padding-left: 0; }
  .mk-l-team + .mk-l-team { border-left: 0.5px solid var(--color-border); }
}

/* ---- 6. Trust ----------------------------------------------------------- */
.mk-l-trust {
  display: grid; gap: var(--space-4); margin-top: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .mk-l-trust { grid-template-columns: repeat(2, 1fr); } }
.mk-l-fact {
  border-radius: 20px; padding: 30px;
  background: var(--l-panel);
}
.mk-l-fact h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }
.mk-l-fact p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; }
/* The counter-signal stays visibly different: an outline, not a fill. */
.mk-l-fact--note { background: transparent; box-shadow: inset 0 0 0 1px var(--color-border-dashed); }

/* ---- 7. Connected ------------------------------------------------------- */
.mk-l-connected .mk-compat { margin-top: var(--space-6); border-top: 0.5px solid var(--color-border); }

/* ---- 8. CTA band -------------------------------------------------------- */
.mk-l-band { text-align: center; padding: clamp(3.5rem, 2rem + 6vw, 7rem) var(--space-6); }
.mk-l-band__inner { display: grid; gap: var(--space-5); justify-items: center; max-width: 40rem; margin: 0 auto; }
.mk-l-band .mk-btn-group { justify-content: center; }

/* ---- Buttons: the reference's pill ---------------------------------------
   Ink fill (the page's text colour) rather than brand teal, a 42px pill, and an
   arrow in a 32px chip of 15% canvas. Teal stays for accents and links. The
   secondary keeps the kit's control-colour hairline: it is identified by that
   border, and WCAG 1.4.11's 3:1 still applies to it. */
.mk-l-page .mk-l-pill {
  border-radius: 72px; font-size: 1rem; font-weight: var(--l-text);
  letter-spacing: -0.01em; height: 42px; padding: 4px 22px;
}
.mk-l-page .mk-l-pill.mk-btn--primary {
  --btn-bg: var(--color-text); --btn-fg: var(--color-canvas); --btn-bd: var(--color-text);
  padding: 4px 5px 4px 20px; gap: 12px;
}
.mk-l-page .mk-l-pill.mk-btn--primary::after {
  content: ""; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9 9 2M3.5 2H9v5.5'/%3E%3C/svg%3E") center / 11px no-repeat,
    color-mix(in srgb, var(--color-canvas) 15%, transparent);
  transition: transform var(--duration-fast) var(--ease);
}
:root[data-theme="dark"] .mk-l-page .mk-l-pill.mk-btn--primary::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9 9 2M3.5 2H9v5.5'/%3E%3C/svg%3E") center / 11px no-repeat,
    color-mix(in srgb, var(--color-canvas) 15%, transparent);
}
.mk-l-page .mk-l-pill.mk-btn--primary:hover { filter: none; }
.mk-l-page .mk-l-pill.mk-btn--primary:hover::after { transform: rotate(45deg); }
.mk-l-page .mk-btn--lg.mk-l-pill { height: 46px; font-size: 1.0625rem; }
.mk-l-agent { height: 42px; padding: 0 8px 0 18px; font-weight: var(--l-text); }

/* ---- Ground and nav ------------------------------------------------------
   The reference sets soft grey panels on a white page; the warm canvas with a
   LIGHTER alternate band inverted that. Light theme only: the landing's ground
   becomes the raised surface (white), and the panels above are mixed from the
   text colour so they read as a step down from it. Dark keeps its canvas —
   raised is lighter than canvas there, and a lifted ground looks washed out. */
:root:not([data-theme="dark"]) body:has(main.mk-l-page) { background: var(--color-surface-raised); }
/* The nav's Log in joins the page's buttons: an ink pill, light weight. */
body:has(main.mk-l-page) .mk-nav .mk-btn--primary {
  --btn-bg: var(--color-text); --btn-fg: var(--color-canvas); --btn-bd: var(--color-text);
  border-radius: 72px; height: 36px; padding: 0 18px;
  font-weight: 400; font-size: 0.9375rem; letter-spacing: -0.01em;
}
body:has(main.mk-l-page) .mk-nav .mk-btn--primary:hover { filter: none; opacity: .88; }
body:has(main.mk-l-page) .mk-nav__link { font-weight: 400; }

/* ---- Works-with strip: an icon-only mark with its name ------------------
   Google ships BigQuery as a product icon with no wordmark (Google Cloud icon
   pack), so per design/logos/README.md it takes a text label beside it and an
   empty alt. Sized to sit on the same 30px line as the lockups. */
.mk-compat__item--labelled { gap: 8px; }
.mk-compat__item--labelled .mk-mark { height: 26px; }
.mk-compat__name { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; color: var(--color-text-secondary); white-space: nowrap; }
@media (max-width: 720px) { .mk-compat__item--labelled .mk-mark { height: 22px; } .mk-compat__name { font-size: 1rem; } }

/* ---- Text-and-picture split (semantics; monitor) ------------------------ */
.mk-l-split { display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .mk-l-split { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-10); } }
.mk-l-split__vis.mk-l-glow { padding: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
.mk-l-split__vis img { width: 100%; }
.mk-l-split--card {
  border-radius: 20px; padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  background: var(--l-panel);
}
.mk-l-split--card .mk-l-split__text { display: grid; gap: var(--space-4); }
.mk-l-sources { list-style: none; padding: 0; margin: var(--space-7) 0 0; border-top: 0.5px solid var(--color-border); }
.mk-l-sources li { padding: var(--space-5) 0; border-bottom: 0.5px solid var(--color-border); display: grid; gap: var(--space-2); }
.mk-l-sources h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.mk-l-sources p { color: var(--color-text-muted); font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.01em; }
.mk-l-caption { margin-top: var(--space-4); color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.4; letter-spacing: -0.005em; }
.mk-l-eyebrow {
  font-family: var(--font-family-mono); font-size: var(--fs-2xs); letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase; color: var(--color-brand-text-aa); font-weight: 400;
}
.mk-l-h3 { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem); line-height: 1.15; letter-spacing: -0.025em; }

/* ---- Rebuild: text, then the original before/after, played on a button ---- */
.mk-l-next { margin-top: clamp(3rem, 2rem + 4vw, 6rem); display: grid; gap: var(--space-4); max-width: 40rem; }
/* The original hero's before/after, played on a CLOCK once it comes into
   view (see the script). --rp runs 0 -> 1 over the run.

   The frame changes shape with the warehouse, as the original did: the
   before state is a wide, short sprawl (frames are 3276x1132) and the after
   state is four narrow, tall columns in the middle of the same canvas. So
   the frame goes from 1280:442 to 340:442 and grows taller, and the image is
   pinned to its centre at full height — the after state fills the frame
   instead of sitting small in a wide box. The stage reserves the END height
   from the start, so nothing below moves while the run plays. */
/* Sized from WIDTH, not height: the window's width runs from the full stage
   (before) to --wend (after), and its height follows from the aspect ratio,
   which runs from the frames' own 3276:1132 to 340:442. Sizing from height
   let max-width clamp the width while the height stayed put, which cropped
   the wide before state's edges. The stage reserves the end height up front,
   so nothing below moves while the clip plays. */
.mk-l-rebuild { --wend: clamp(300px, 36vw, 520px); margin-top: var(--space-6); }
.mk-l-rebuild__fig { padding: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
.mk-l-rebuild__stage {
  min-height: calc(var(--wend) * 442 / 340 + 44px);   /* + the window's bar */
  display: grid; place-items: center;
}
.mk-l-rebuild__window { width: calc(100% + (var(--wend) - 100%) * var(--rp, 0)); }
.mk-l-rebuild__frames {
  width: 100%;
  aspect-ratio: calc((1279.2 - 939.2 * var(--rp, 0)) / 442);
  position: relative; overflow: hidden; background: var(--color-surface-raised);
}
/* object-fit: cover crops the canvas to the frame's centre exactly; no
   translate, so no half-pixel offsets to soften the picture. */
.mk-l-rebuild__frames > img, .mk-l-rebuild__frames > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0; display: block;
}
.mk-l-rebuild__frames > video { visibility: hidden; }
.mk-l-rebuild.is-video-fwd #rebuildFwd, .mk-l-rebuild.is-video-rev #rebuildRev { visibility: visible; }
.mk-l-rebuild.is-video-fwd #rebuildStill, .mk-l-rebuild.is-video-rev #rebuildStill { visibility: hidden; }
/* The bar's second clause arrives with the overlay it names, as in the original. */
.mk-l-rebuild__more { opacity: clamp(0, calc((var(--rp, 0) - 0.55) * 4), 1); }
/* The control sits ON the picture, bottom centre: the one thing to do here.
   An ink pill like the page's primary buttons, over a soft shadow so it reads
   on both the sprawl and the empty canvas of the end state. */
.mk-l-rebuild__play {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 20px 0 8px; border: 0; border-radius: 72px; cursor: pointer;
  background: var(--color-text); color: var(--color-canvas);
  font: inherit; font-size: 1rem; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 22%, transparent);
  transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.mk-l-rebuild__play:hover { transform: translateX(-50%) translateY(-1px); }
.mk-l-rebuild__play-icon {
  width: 30px; height: 30px; border-radius: 50%; flex: none; position: relative;
  background: color-mix(in srgb, var(--color-canvas) 18%, transparent);
}
.mk-l-rebuild__play-icon::after {          /* a play triangle; a rewind arrow once at the end */
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  transform: translateX(1px);
}
.mk-l-rebuild.is-after .mk-l-rebuild__play-icon::after { transform: translateX(-1px) rotate(180deg); }
/* While it plays the control steps back, so the picture has the stage. */
.mk-l-rebuild.is-playing .mk-l-rebuild__play { opacity: 0; pointer-events: none; }
/* Reduced motion and narrow screens: the finished state, statically. */
.mk-l-rebuild.is-still { --rp: 1; }
.mk-l-rebuild.is-still .mk-l-rebuild__stage { min-height: 0; }
.mk-l-rebuild.is-still .mk-l-rebuild__play { display: none; }
@media (max-width: 899px) {
  .mk-l-rebuild__window { width: min(100%, 26rem); }
  .mk-l-rebuild__frames { aspect-ratio: 340 / 442; }
}

/* ---- Vertical rhythm -----------------------------------------------------
   One set of distances for the whole page, measured 2026-10-11 and evened out:
     section to section ............ the section padding (106px at 1440), once;
                                     the footer sits the same distance below
     heading -> its subtitle/lede .. 16px  (--space-5)
     header -> its main content .... 48px  (--space-9): cards, list, panel,
                                     team row, facts
     h3 heading -> its picture ..... 32px  (--space-8)
     sub-section -> sub-section .... 64px  (--space-10)
   Two sections back to back must not BOTH pad: the second is --flush-top. */
.mk-l-hero__row { margin-top: var(--space-8); }
.mk-l-lede { margin-top: var(--space-5); }
.mk-l-platform__head { gap: var(--space-5); margin-bottom: var(--space-9); }
.mk-l-cards, .mk-l-sources, .mk-l-teams, .mk-l-trust, .mk-l-content { margin-top: var(--space-9); }
.mk-l-next { margin-top: var(--space-10); }
.mk-l-rebuild { margin-top: var(--space-8); }
.mk-l-connected .mk-compat { margin-top: var(--space-8); }
main.mk-l-page > section:last-child { padding-bottom: 0; }
body:has(main.mk-l-page) .mk-footer { margin-top: clamp(4rem, 3rem + 4vw, 7.5rem); }
.mk-l-connected .mk-compat { padding-bottom: 0; }   /* nothing below the strip to clear; keeps the next gap one section */

/* ==========================================================================
   /services in the same makeover (MOL-511). The page keeps the kit's
   components — the ladder, engagement cards, Q&A, two columns — and they are
   restyled here to the landing's system rather than rewritten: one light
   weight, borderless soft panels, hairlines, the same rhythm.
   ========================================================================== */
.mk-l-services .mk-l-hero { padding-bottom: clamp(4rem, 3rem + 4vw, 7.5rem); }
.mk-l-services .mk-l-hero__lead > .mk-prose { color: var(--color-text-muted) !important; font-size: 1rem !important; line-height: 1.4; max-width: 40rem; }
.mk-l-services .mk-l-hero__lead .mk-btn-group { margin-top: var(--space-5); }
.mk-l-services .mk-label { color: var(--color-brand-text-aa); font-weight: 400; }
.mk-l-services .mk-prose { color: var(--color-text-muted) !important; font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.01em; max-width: 44rem; }

/* The menu (2026-10-13, replaces the ladder): four equal cards, two by two,
   numbered in the order a buyer meets them, and the primary engagement as a
   full-width band underneath. On desktop the band lays its name beside its
   body so it reads as a band, not as a tall card stretched wide. */
.mk-l-menu { gap: var(--space-5); align-items: stretch; }
.mk-l-menu__step { color: var(--color-brand-text-aa); margin-right: var(--space-2); }
.mk-l-menu__note { font-size: 1rem; line-height: 1.4; color: var(--color-text-muted); max-width: 44rem; }
@media (min-width: 960px) {
  .mk-l-menu .mk-card--flagship {
    display: grid; column-gap: var(--space-8); row-gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    grid-template-areas: "flag body" "title body" "arrow body";
    align-items: start;
  }
  .mk-l-menu .mk-card--flagship .mk-card__flag { grid-area: flag; }
  .mk-l-menu .mk-card--flagship .mk-card__title { grid-area: title; font-size: 1.75rem; }
  .mk-l-menu .mk-card--flagship .mk-card__body { grid-area: body; }
  .mk-l-menu a.mk-card--flagship::after { grid-area: arrow; margin-top: var(--space-2); }
}

/* Engagement cards: the landing's soft panels. */
.mk-l-services .mk-card {
  border: 0; box-shadow: none; border-radius: 20px; padding: 26px 26px 28px; gap: var(--space-4);
  background: var(--l-panel);
  transition: background var(--duration-fast) var(--ease);
}
.mk-l-services a.mk-card:hover { background: color-mix(in srgb, var(--color-text) 3%, var(--l-panel)); }
.mk-l-services .mk-card .mk-label { color: var(--color-text-muted); }
.mk-l-services .mk-card__title { font-size: 1.5rem; font-weight: var(--l-head); line-height: 1.15; letter-spacing: -0.02em; }
.mk-l-services .mk-card__body { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--color-text-muted); }
.mk-l-services .mk-card__body .mk-marker--label { font-weight: 500; color: var(--color-text); }
/* The primary engagement keeps a visible difference: a brand hairline and tint. */
.mk-l-services .mk-card--flagship {
  background: color-mix(in srgb, var(--color-brand) 7%, var(--l-panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand) 30%, transparent);
}
.mk-l-services a.mk-card--flagship:hover { background: color-mix(in srgb, var(--color-brand) 10%, var(--l-panel)); }
.mk-l-services .mk-card__flag { font-weight: 400; }

/* Who does the work: the two columns become the trust section's soft panels. */
.mk-l-services .mk-audience { gap: var(--space-4); }
.mk-l-services .mk-audience__col {
  border-left: 0; padding: 30px; border-radius: 20px; gap: var(--space-3);
  background: var(--l-panel);
}
.mk-l-services .mk-audience__title { font-size: 1.5rem; font-weight: var(--l-head); line-height: 1.15; letter-spacing: -0.02em; }
.mk-l-services .mk-audience__body { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text-muted); }

/* Questions: hairlines, light questions, muted answers. */
.mk-l-services .mk-faq { border-top: 0.5px solid var(--color-border); }
.mk-l-services .mk-faq__item { border-bottom: 0.5px solid var(--color-border); }
.mk-l-services .mk-faq__q { font-size: 1.25rem; font-weight: var(--l-head); letter-spacing: -0.015em; padding: var(--space-6) 0; }
.mk-l-services .mk-faq__q::after {
  content: "+"; font-family: inherit; display: inline-grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: 1rem;
  background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text);
  transition: transform var(--duration-fast) var(--ease);
}
.mk-l-services .mk-faq__item[open] .mk-faq__q::after { transform: rotate(45deg); }
.mk-l-services .mk-faq__a { font-size: 1.125rem; line-height: 1.4; letter-spacing: -0.01em; color: var(--color-text-muted); max-width: 46rem; }

/* ==========================================================================
   The engagement pages (generated by design/build-engagements.py) in the
   same makeover (MOL-511). A narrow, reading-length page: the hero, a strip
   of facts, the scope table, the verified callout, the CTA band.
   ========================================================================== */
.mk-l-engagement .mk-l-hero { padding-bottom: clamp(4rem, 3rem + 4vw, 7.5rem); }
.mk-l-engagement .mk-l-hero__lead, .mk-l-engagement .mk-hero__lead { max-width: none; gap: var(--space-5); }
.mk-l-engagement .mk-hero__lead .mk-btn-group { margin-top: var(--space-5); }
.mk-l-engagement .mk-label { color: var(--color-brand-text-aa); font-weight: 400; }
.mk-l-engagement .mk-l-body { color: var(--color-text-muted); max-width: 40rem; }
/* Facts strip: hairlines, mono keys, readable values. */
.mk-l-engagement .mk-meta { margin-top: var(--space-9); border-block: 0.5px solid var(--color-border); padding: var(--space-6) 0; gap: var(--space-8); }
.mk-l-engagement .mk-meta dt { font-weight: 400; }
.mk-l-engagement .mk-meta dd { font-size: 1.0625rem; letter-spacing: -0.01em; font-weight: var(--l-text); }
/* Scope table: one soft panel, hairline rows. */
.mk-l-engagement .mk-scope {
  border: 0; border-radius: 20px;
  background: var(--l-panel);
}
.mk-l-engagement .mk-scope__row { padding: var(--space-6) 30px; gap: var(--space-3); border-bottom: 0.5px solid var(--color-border); }
.mk-l-engagement .mk-scope__key { font-weight: 400; }
.mk-l-engagement .mk-scope__val { font-size: 1.0625rem; line-height: 1.45; letter-spacing: -0.01em; color: var(--color-text-muted); }
.mk-l-engagement .mk-scope__val .mk-marker--label { font-weight: 500; color: var(--color-text); }
/* Not included (2026-10-13, Aaron: the red tint read as alarming). The row is
   a plain row of the table: no tint, a muted key, slightly quieter text. The
   in-scope key keeps its colour; the contrast is calm rather than red. */
.mk-l-engagement .mk-scope__row--out { background: transparent; }
.mk-l-engagement .mk-scope__row--out .mk-scope__key,
.mk-l-engagement .mk-scope__key .mk-marker--out { color: var(--color-text-muted); }
.mk-l-engagement .mk-scope__row--out .mk-scope__val { color: var(--color-text-subtle); }
/* Callouts: soft panels that keep their meaning colour as a tint and an inset hairline. */
.mk-l-engagement .mk-callout {
  border: 0; border-radius: 20px; padding: 30px; gap: var(--space-3);
  background: color-mix(in srgb, var(--color-brand) 6%, var(--color-canvas));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand) 22%, transparent);
}
.mk-l-engagement .mk-callout--roadmap {
  background: color-mix(in srgb, var(--color-warn) 7%, var(--color-canvas));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warn) 30%, transparent);
}
.mk-l-engagement .mk-callout__title { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.015em; font-weight: var(--l-head); }
.mk-l-engagement .mk-callout__body { font-size: 1.125rem; line-height: 1.4; letter-spacing: -0.01em; color: var(--color-text-secondary); }
.mk-l-engagement .mk-stack > .mk-callout, .mk-l-engagement .mk-stack > h2 + .mk-callout { margin-top: var(--space-9); }
.mk-l-engagement .mk-stack > .mk-callout + .mk-callout { margin-top: var(--space-4); }
.mk-l-engagement__more { margin-top: var(--space-6); font-size: 1rem; color: var(--color-text-muted); text-align: center; }

/* ==========================================================================
   Section bands (2026-10-13). Aaron's review: the sections ran together on
   one flat ground. Every second content section now sits on a band one step
   off the page — the warm canvas on the white light-theme ground, a lifted
   grey on dark — and runs edge to edge, as the reference does.

   A band needs room INSIDE both its edges, so the flush-top rhythm (only one
   of two neighbours pads) gives way at a band: the band pads both sides, and
   the section after it pads its top again. The distance between two
   sections' content is then one section padding either side of the band's
   edge, the same on every boundary.

   Inside a band the soft panels flip to the raised surface (white on light),
   or they would vanish into it.
   ========================================================================== */
/* Softened 2026-10-13 on review: the full canvas step read too strong. Light
   is about half-way from the white ground to the canvas; dark a 3% lift. */
.mk-l-page { --l-band: color-mix(in srgb, var(--color-canvas) 55%, var(--color-surface-raised)); --l-band-panel: var(--color-surface-raised); }
:root[data-theme="dark"] .mk-l-page {
  --l-band: color-mix(in srgb, var(--color-text) 3%, var(--color-canvas));
  --l-band-panel: color-mix(in srgb, var(--color-text) 7%, var(--color-canvas));
}
main.mk-l-page > section.mk-l-alt {
  --l-panel: var(--l-band-panel);
  background: var(--l-band);
  padding-block: clamp(4rem, 3rem + 4vw, 7.5rem);
}
/* Light theme: the muted grey (#66707c) that reads fine on white reads faint
   on the band, so inside one the muted and subtle tokens step most of the way
   to the secondary text colour. Dark does not need it (review 2026-10-13). */
:root:not([data-theme="dark"]) main.mk-l-page > section.mk-l-alt {
  --color-text-muted: color-mix(in srgb, var(--color-text-secondary) 65%, #66707c);
  --color-text-subtle: color-mix(in srgb, var(--color-text-secondary) 65%, #66707c);
}
main.mk-l-page > section.mk-l-alt + section { padding-top: clamp(4rem, 3rem + 4vw, 7.5rem); }
/* The glow panel's own base is canvas-alt; on a band it takes the band's panel
   colour so the gradient reads as lifted, not as a hole. */
main.mk-l-page > section.mk-l-alt .mk-l-glow { background-color: var(--l-panel); }

/* ==========================================================================
   Contact and waitlist in the page system (2026-10-13). Same type, pills,
   panels and nav as the landing. Contact is a short hero; the waitlist puts
   the pitch on the left and the form in a soft panel on the right. The kit's
   auth layout (body.mk-page--auth) still centres the content vertically.
   ========================================================================== */
.mk-page--auth > main.mk-l-utility { place-items: center stretch; }
.mk-l-util {
  width: 100%; max-width: 76rem; margin: 0 auto;
  display: grid; gap: var(--space-9); align-items: start;
}
.mk-l-util__lead { display: grid; gap: var(--space-5); max-width: 36rem; align-content: start; }
.mk-l-util__lead .mk-btn-group { margin-top: var(--space-4); }
.mk-l-util__foot { color: var(--color-text-muted); font-size: 1rem; letter-spacing: -0.01em; }
.mk-l-util__foot a { font-weight: 500; }
@media (min-width: 960px) {
  .mk-l-util--split { grid-template-columns: 1fr minmax(0, 30rem); gap: var(--space-10); }
  .mk-l-util--split .mk-l-util__lead { position: sticky; top: var(--space-10); }
}
.mk-l-util__panel {
  border-radius: 20px; background: var(--l-panel);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  display: grid; gap: var(--space-6);
}
.mk-l-util__panel .mk-auth__head { gap: var(--space-4); }
.mk-l-util__title { font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.025em; }
/* Fields: borderless white wells on the grey panel, a hairline ring, the
   brand ring on focus. Labels in the page's text face, not the kit's mono. */
.mk-l-utility .mk-field__label {
  font-family: inherit; text-transform: none; letter-spacing: -0.005em;
  font-size: 0.9375rem; font-weight: 500; color: var(--color-text);
}
.mk-l-utility .mk-field__optional { font-weight: 400; color: var(--color-text-muted); }
.mk-l-utility .mk-field__hint { font-size: 0.875rem; line-height: 1.4; }
.mk-l-utility .mk-input {
  background: var(--color-surface-raised); border: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--color-border-control);
  padding: 12px 14px; font-size: 1rem; height: 46px;
  transition: box-shadow var(--duration-fast) var(--ease);
}
.mk-l-utility .mk-input:hover { box-shadow: inset 0 0 0 1px var(--color-text-muted); }
.mk-l-utility .mk-input:focus { box-shadow: inset 0 0 0 2px var(--color-brand); }
/* The 2px brand ring IS the focus indicator here; the kit's outline on top of
   it drew a double ring. */
.mk-l-utility .mk-input:focus-visible { outline: none; }
.mk-l-utility .mk-alert { border-radius: 12px; }
.mk-l-utility .mk-l-pill.mk-btn--block { width: 100%; justify-content: space-between; }
.mk-l-utility .mk-l-pill.mk-btn--secondary.mk-btn--block { justify-content: center; }
body:has(main.mk-l-utility) .mk-footer--slim { border-top: 0.5px solid var(--color-border); }
.mk-l-utility .mk-select .mk-input { padding-right: var(--space-9); }

/* A short page (the 404) fills the viewport, so its footer sits at the
   bottom instead of floating mid-screen with blank page below it. */
body.mk-l-fill { min-height: 100vh; display: flex; flex-direction: column; }
body.mk-l-fill > main { flex: 1 0 auto; }