

.mk-nav {
  display: flex; align-items: center; gap: var(--sp-8);
  height: 68px; padding: 0 var(--sp-8);
  background: var(--paper); border-bottom: var(--edge) solid var(--dust);
  position: relative; z-index: 20;
}
.mk-logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.mk-logo svg { display: block; }
.mk-logo .mk-word {
  font-family: var(--font-brand); font-weight: 800; font-size: var(--t-h3);
  letter-spacing: .02em; color: var(--ink);
}
.mk-logo:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.mk-links { display: flex; gap: var(--sp-6); margin-left: auto; align-items: center; }
.mk-links a {
  font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-soft); text-decoration: none; padding: var(--sp-2) 0;
  border-bottom: var(--edge-2) solid transparent;
}
.mk-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .mk-links a:hover { color: var(--ink); }
}
.mk-links a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.mk-nav > .btn { margin-left: var(--sp-6); }
.mk-logo--sm .mk-word { font-size: var(--t-body); }

.mk-menu {
  display: none; width: var(--mk-tap-sm); height: var(--mk-tap-sm); align-items: center; justify-content: center;
  border: var(--edge) solid var(--dust); border-radius: var(--r-md); background: var(--paper);
  color: var(--ink); cursor: pointer; padding: 0;
}
.mk-menu:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); height: 52px; padding: 0 var(--sp-6);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--t-body);
  line-height: 1; border-radius: var(--r-md); text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.btn-primary {
  background: var(--navy); color: var(--paper);
  border: var(--edge) solid var(--navy-edge);
}
.btn-secondary {
  background: var(--paper); color: var(--navy);
  border: var(--edge) solid var(--navy);
}

.btn-on-navy {
  background: var(--paper); color: var(--navy);
  border: var(--edge) solid var(--paper);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover   { background: var(--navy-edge); }
  .btn-secondary:hover { background: var(--board); }
  .btn-on-navy:hover   { background: var(--board); }
}
.btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.btn-on-navy:focus-visible { outline-color: var(--paper); }
.btn:active { transform: scale(.97); }
.btn-sm { height: 44px; font-size: var(--t-sm); padding: 0 var(--sp-5); }
.btn-block { width: 100%; }

.mk-main { background: var(--paper); }
.mk-section { padding: var(--sp-16) var(--sp-8); }
.mk-section--tight { padding-top: 0; }
.mk-section--board { background: var(--board); border-top: var(--edge) solid var(--dust); border-bottom: var(--edge) solid var(--dust); }
.mk-inner { max-width: var(--mk-max); margin: 0 auto; }
.mk-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute);
  margin: 0 0 var(--sp-3);
}
.mk-h1 {
  font-family: var(--font-brand); font-weight: 800; font-size: var(--t-h1);
  line-height: 1.1; letter-spacing: -.01em; margin: 0 0 var(--sp-4);
  color: var(--ink); text-wrap: balance;
}
.mk-h2 {
  font-family: var(--font-brand); font-weight: 800; font-size: var(--t-h2);
  line-height: 1.15; letter-spacing: -.01em; margin: 0 0 var(--sp-3);
  color: var(--ink); text-wrap: balance;
}
.mk-h3 {
  font-family: var(--font-brand); font-weight: 700; font-size: var(--t-h3);
  line-height: 1.2; margin: 0 0 var(--sp-2); color: var(--ink);
}
.mk-lede {
  font-size: var(--t-h3); font-weight: 400; color: var(--ink-soft);
  line-height: 1.5; max-width: 46ch; margin: 0;
}
.mk-body { font-size: var(--t-body); color: var(--ink-soft); line-height: 1.6; max-width: 65ch; }
.mk-sm   { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.55; }
.mk-cta-row { display: flex; gap: var(--sp-4); margin-top: var(--sp-8); flex-wrap: wrap; }

.mk-hero {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-12);
  align-items: center; max-width: var(--mk-max); margin: 0 auto;
  padding: var(--sp-10) var(--sp-8) var(--sp-12);
}
.mk-hero h1 {
  font-family: var(--font-brand); font-weight: 800; font-size: 52px;
  line-height: 1.05; letter-spacing: -.02em; margin: 0 0 var(--sp-5);
  color: var(--ink); text-wrap: balance;
}
.mk-hero .mk-sub {
  font-size: var(--t-h3); color: var(--ink-soft); line-height: 1.5;
  max-width: 44ch; margin: 0;
}

.mk-head {
  display: grid; grid-template-columns: 1fr 200px; gap: var(--sp-12);
  align-items: center; max-width: var(--mk-max); margin: 0 auto;
  padding: var(--sp-10) var(--sp-8) var(--sp-10);
}
.mk-head .mk-cta-row { margin-top: var(--sp-6); }
.mk-head--article { align-items: start; }

.mk-device { margin: 0; display: flex; flex-direction: column; align-items: center; }
.mk-screen {
  width: var(--mk-device-w); aspect-ratio: 9 / 16; overflow: hidden;
  border: 2px solid var(--chalk); border-radius: var(--r-lg);
  background: var(--paper);
}
.mk-screen img, .mk-screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mk-device--head .mk-screen { width: var(--mk-device-head); }
.mk-device--step .mk-screen { width: var(--mk-device-step); }
.mk-device--rail .mk-screen { width: 100%; }
.mk-wide {
  margin: 0; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border: 2px solid var(--chalk); border-radius: var(--r-lg); background: var(--board);
}
.mk-wide img, .mk-wide video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-cap {
  font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-top: var(--sp-3); display: block; text-align: center;
}

.mk-ticket-grid {
  display: grid; grid-template-columns: 5fr 6fr; gap: var(--sp-12);
  align-items: center; margin-top: var(--sp-8);
}
.mk-ticket {
  background: var(--paper); border: var(--edge) solid var(--dust); border-radius: var(--r-md);
  padding: var(--sp-8);
}
.mk-ticket .spec {
  font-family: var(--font-brand); font-weight: 700; font-size: var(--t-h3);
  color: var(--ink); margin: 0 0 var(--sp-1);
}
.mk-ticket .spec-sub { font-size: var(--t-sm); color: var(--ink-mute); margin: 0 0 var(--sp-6); }
.mk-ticket .figure {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: 34px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink);
  margin: 0; overflow-wrap: anywhere;
}
.mk-ticket .terms {
  display: flex; flex-direction: column; gap: var(--sp-1);
  margin: var(--sp-5) 0 0; padding-top: var(--sp-5); border-top: var(--edge) solid var(--dust);
  font-size: var(--t-sm); color: var(--ink-soft);
}
.mk-facts { list-style: none; margin: 0; padding: 0; border-top: var(--edge) solid var(--dust); }
.mk-facts li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-4); align-items: start;
  padding: var(--sp-4) 0; border-bottom: var(--edge) solid var(--dust);
}
.mk-facts .mk-icon { color: var(--navy); margin-top: 2px; }
.mk-facts p { margin: 0; }

.mk-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); margin-top: var(--sp-8); }
.mk-rail-step { display: flex; flex-direction: column; gap: var(--sp-4); }
.mk-rail-step .mk-screen { width: 100%; }
.mk-rail-step strong { font-family: var(--font-brand); font-weight: 700; font-size: var(--t-body); color: var(--ink); }
.mk-rail-step p { margin: 0; }

.mk-steps { max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-8) var(--sp-8); }
.mk-step {
  display: grid; grid-template-columns: 56px 1fr 260px; gap: var(--sp-8);
  position: relative; padding-bottom: var(--sp-12); align-items: start;
}
.mk-step:last-child { padding-bottom: 0; }
.mk-step::before {
  content: ""; position: absolute; left: var(--mk-step-line-x); top: var(--mk-step-node); bottom: 0;
  width: 2px; background: var(--dust);
}
.mk-step:last-child::before { display: none; }
.mk-step-node {
  width: 56px; height: 56px; border: 2px solid var(--navy); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy); background: var(--paper); position: relative; z-index: 1;
}
.mk-step-node .mk-icon { width: var(--mk-icon-md); height: var(--mk-icon-md); }
.mk-step-body h2 { margin-top: var(--sp-3); }
.mk-step-body p { margin: 0; }
.mk-step-body .mk-cta-row { margin-top: var(--sp-5); }
.mk-step-extra {
  margin-top: var(--sp-4); display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute);
  border: var(--edge) solid var(--dust); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3); background: var(--board);
}

.mk-strip {
  border: var(--edge) solid var(--dust); border-radius: var(--r-sm);
  background: var(--board); padding: var(--sp-8);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-8); flex-wrap: wrap;
}
.mk-strip .mk-h2 { margin-bottom: var(--sp-2); }
.mk-strip p { margin: 0; }

.mk-band {
  background: var(--navy); border-top: var(--edge) solid var(--navy-edge);
  padding: var(--sp-16) var(--sp-8); text-align: center;
}
.mk-band h2 {
  font-family: var(--font-brand); font-weight: 800; font-size: var(--t-h1);
  line-height: 1.1; letter-spacing: -.01em; color: var(--paper);
  margin: 0 0 var(--sp-6); text-wrap: balance;
}

.mk-article { max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-8) var(--sp-16); }
.mk-article > * { max-width: 65ch; }
.mk-article > .sk-img { max-width: var(--mk-article); }
.mk-article h2 {
  font-family: var(--font-brand); font-weight: 700; font-size: var(--t-h3);
  color: var(--ink); margin: var(--sp-10) 0 var(--sp-3);
}
.mk-article h2:first-child { margin-top: 0; }
.mk-article p { font-size: var(--t-body); color: var(--ink-soft); line-height: 1.65; margin: 0 0 var(--sp-4); text-wrap: pretty; }
.mk-article p strong { color: var(--ink); font-weight: 600; }
.mk-article ul { margin: 0 0 var(--sp-4); padding-left: 1.2em; color: var(--ink-soft); line-height: 1.65; }
.mk-article li { margin-bottom: var(--sp-2); }
.mk-article a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mk-article a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.mk-meta {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 var(--sp-3);
}

.mk-sticky { display: none; }

.mk-footer {
  background: var(--board); border-top: var(--edge) solid var(--dust);
  padding: var(--sp-10) var(--sp-8);
}
.mk-footer .mk-inner {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-10); flex-wrap: wrap;
}
.mk-footer nav { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.mk-footer nav a {
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .mk-footer nav a:hover { color: var(--ink); text-decoration: underline; }
}
.mk-footer nav a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.mk-footer-legal { margin-top: var(--sp-6); align-items: center; }
.mk-legal {
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); margin: 0;
}
.mk-legal-links { display: flex; gap: var(--sp-5); }
.mk-legal-links a { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }

.mk-icon {
  width: var(--mk-icon-sm); height: var(--mk-icon-sm); stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}

.sk { height: 10px; background: var(--dust); border-radius: var(--r-sm); margin-bottom: var(--sp-2); }
.sk-title { height: 18px; background: var(--chalk); border-radius: var(--r-sm); margin-bottom: var(--sp-3); }
.sk-img { background: var(--board); border-bottom: var(--edge) solid var(--dust); }

@media (max-width: 720px) {
  .mk-nav { height: 60px; padding: 0 var(--sp-4); gap: var(--sp-3); }
  .mk-links { display: none; }
  .mk-menu { display: inline-flex; margin-left: auto; }
  .mk-nav > .btn { margin-left: 0; }
  .mk-nav .mk-word { font-size: var(--t-body); }
  .mk-section { padding: var(--sp-12) var(--sp-4); }
  .mk-hero {
    grid-template-columns: 1fr; gap: var(--sp-8); padding: var(--sp-8) var(--sp-4) var(--sp-10);
  }
  .mk-hero h1 { font-size: var(--mk-hero-h1-sm); }
  .mk-hero .mk-sub, .mk-lede { font-size: var(--t-body); }
  .mk-h1 { font-size: var(--t-h1-sm); }
  .mk-h2 { font-size: var(--t-h2-sm); }
  .mk-cta-row { margin-top: var(--sp-6); }
  .mk-cta-row .btn { width: 100%; }
  .mk-screen { width: var(--mk-device-w-sm); }
  .mk-head { grid-template-columns: 1fr 120px; gap: var(--sp-5); padding: var(--sp-8) var(--sp-4) var(--sp-8); align-items: start; }
  .mk-head .mk-cta-row { grid-column: 1 / -1; }
  .mk-device--head .mk-screen { width: 120px; border-width: 1px; border-radius: var(--r-md); }
  .mk-device--head .mk-cap { display: none; }
  .mk-ticket-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .mk-ticket .figure { font-size: var(--mk-figure-sm); }
  .mk-rail { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .mk-steps { padding: 0 var(--sp-4) var(--sp-8); }
  .mk-step { grid-template-columns: 44px 1fr; gap: var(--sp-4); padding-bottom: var(--sp-10); }
  .mk-step::before { left: var(--mk-step-line-x-sm); top: var(--mk-tap-sm); }
  .mk-step-node { width: var(--mk-tap-sm); height: var(--mk-tap-sm); }
  .mk-step-node .mk-icon { width: var(--mk-icon-sm); height: var(--mk-icon-sm); }
  .mk-step .mk-device { grid-column: 2; }
  .mk-device--step .mk-screen { width: var(--mk-device-step-sm); }
  .mk-band { padding: var(--sp-12) var(--sp-4); }
  .mk-band h2 { font-size: var(--mk-band-h2-sm); }
  .mk-article { padding: 0 var(--sp-4) var(--sp-12); }
  .mk-meta { letter-spacing: .04em; font-size: var(--t-micro); }
  .mk-footer { padding: var(--sp-8) var(--sp-4) var(--sp-10); }
  .mk-footer .mk-inner { gap: var(--sp-6); }
  .mk-footer nav { gap: var(--sp-4) var(--sp-5); }
  .mk-strip { padding: var(--sp-6); }
  .mk-strip .btn { width: 100%; }

  .mk-sticky {
    display: block; position: sticky; bottom: 0; z-index: 10;
    background: var(--paper); border-top: var(--edge) solid var(--dust);
    padding: var(--sp-3) var(--sp-4);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); opacity: 0;
    transition: transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease);
  }
  .mk-sticky.is-visible { transform: translateY(0); opacity: 1; }
  .mk-sticky .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ============================================================================
   Article + news index: real-text rules.
   Carbon ruling 2026-09-27 (PRJ-BUILDR-A026, cards r3). Appended to marketing.css;
   replaces every page-local <style> block on site/news/**. Tokens only, no !important.
   Scope: .mk-head--article, .mk-article, .mk-posts (the index rows).
   ============================================================================ */

/* --- Article head: back link, date row, byline --------------------------- */
.mk-head--article .mk-back {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft);
  text-decoration: none; margin-bottom: var(--sp-5);
}
@media (hover: hover) and (pointer: fine) {
  .mk-head--article .mk-back:hover { color: var(--ink); }
}
.mk-head--article .mk-back:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* The date row is its own block above the h1 (clone of terms.html). Never on the back-link row. */
.mk-head--article .mk-meta { display: block; margin: 0 0 var(--sp-3); }

.mk-byline { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.mk-byline-mark { display: block; flex-shrink: 0; }           /* the nav mark, sized by its own width/height attributes (40) */
.mk-byline-name { margin: 0; font-family: var(--font-ui); font-size: var(--t-body); font-weight: 600; color: var(--ink); line-height: 1.3; }
.mk-byline-role { margin: 0; font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 400; color: var(--ink-soft); line-height: 1.3; }

/* --- Article body: one display pull quote, the end-of-post row ------------ */
.mk-article .mk-quote {
  max-width: var(--mk-article);
  border-left: 3px solid var(--navy);
  margin: var(--sp-8) 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
}
.mk-article .mk-quote p {
  font-family: var(--font-brand); font-weight: 700; font-size: var(--t-h2);
  line-height: 1.2; letter-spacing: -.01em; color: var(--ink);
  margin: 0; text-wrap: pretty;
}
.mk-article .mk-quote cite {
  display: block; margin-top: var(--sp-3);
  font-family: var(--font-ui); font-style: normal; font-weight: 600;
  font-size: var(--t-sm); color: var(--ink-soft);
}
.mk-article .mk-post-end {
  border-top: var(--edge) solid var(--dust); padding-top: var(--sp-8);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
}
.mk-article .mk-post-end p { margin: 0; }

/* --- News index: rows ----------------------------------------------------- */
.mk-posts { max-width: var(--mk-max); margin: 0 auto; padding: 0 var(--sp-8) var(--sp-16); }
.mk-post {
  border: var(--edge) solid var(--dust); border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column;
}
.mk-post-media {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--board); border-bottom: var(--edge) solid var(--dust);
}
.mk-post-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mk-post-body { padding: var(--sp-5); }
.mk-post-body .mk-meta { margin-bottom: var(--sp-2); }
.mk-post-title {
  font-family: var(--font-brand); font-weight: 700; font-size: var(--t-body);
  line-height: 1.25; color: var(--ink); margin: 0 0 var(--sp-2);
}
.mk-post-title a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .mk-post-title a:hover { text-decoration: underline; text-underline-offset: 2px; } /* ds-allow-hardcode: same offset literal as the existing .mk-article a rule */
}
.mk-post-title a:focus-visible {
  outline: 3px solid var(--navy); outline-offset: 2px;
  text-decoration: underline; text-underline-offset: 2px; /* ds-allow-hardcode: same offset literal as the existing .mk-article a rule */
}
.mk-post-excerpt { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.55; }
.mk-post-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }

/* Featured row: the same card at the larger scale */
.mk-post--featured { display: grid; grid-template-columns: 6fr 5fr; gap: var(--sp-8); margin-bottom: var(--sp-8); }
.mk-post--featured .mk-post-media {
  aspect-ratio: auto; align-self: stretch; position: relative;
  border-bottom: 0; border-right: var(--edge) solid var(--dust);
}
.mk-post--featured .mk-post-media img { position: absolute; inset: 0; }
.mk-post--featured .mk-post-body { padding: var(--sp-8) var(--sp-8) var(--sp-8) 0; align-self: center; }
.mk-post--featured .mk-post-title {
  font-size: var(--t-h2); font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
  margin: 0 0 var(--sp-3); text-wrap: balance;
}
.mk-post--featured .mk-post-excerpt { font-size: var(--t-body); line-height: 1.6; }
.mk-post--featured .btn { margin-top: var(--sp-4); }

/* Pager: rendered only when a next page exists (DS2 2.4). Never a disabled stand-in on a live page. */
.mk-pager { display: flex; justify-content: center; margin-top: var(--sp-10); }

@media (max-width: 720px) {
  .mk-article .mk-quote { padding-left: var(--sp-4); }
  .mk-article .mk-quote p { font-size: var(--t-h2-sm); }
  .mk-article .mk-post-end .btn { width: 100%; }
  .mk-posts { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .mk-post--featured { grid-template-columns: 1fr; gap: 0; }
  .mk-post--featured .mk-post-media {
    aspect-ratio: 16 / 9; position: static;
    border-right: 0; border-bottom: var(--edge) solid var(--dust);
  }
  .mk-post--featured .mk-post-media img { position: static; }
  .mk-post--featured .mk-post-body { padding: var(--sp-5); }
  .mk-post--featured .mk-post-title { font-size: var(--t-h2-sm); }
  .mk-post-grid { grid-template-columns: 1fr 1fr; }
}
