/* Marketing pages — same tokens as the app. Left-aligned, ruled sections,
   the status stamp as the one memorable element. No screenshots in frames,
   no shadows, no decoration that wouldn't survive an audit. */

.mk-inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--s5); }

/* ---------- header ---------- */
.mk-header { border-bottom: var(--border); background: var(--paper-050); }
.mk-header .mk-inner { display: flex; align-items: center; gap: var(--s4); min-height: 56px; }
.mk-header .product {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--track-heading);
  font-size: var(--fs-lg);
  color: var(--ink-900);
}
.mk-header .spacer { flex: 1; }
.mk-header nav { display: flex; gap: var(--s5); align-items: center; }

/* ---------- hero: text columns 1–7, artifact columns 8–12 ---------- */
.mk-hero .mk-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s5);
  padding-top: var(--s12);
  padding-bottom: var(--s12);
  align-items: start;
}
.mk-hero-copy { grid-column: 1 / 8; }
.mk-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  margin: 0 0 var(--s5);
}
.mk-hero .sub {
  font-size: var(--fs-lg);
  color: var(--ink-700);
  max-width: 560px;
  margin: 0 0 var(--s6);
}
.mk-cta-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.mk-cta-row .btn { min-height: 48px; font-size: var(--fs-md); padding: 0 var(--s6); }

/* the artifact: rows out of the filing system, not a screenshot */
.mk-ledger {
  grid-column: 8 / 13;
  background: var(--paper-000);
  border: var(--border);
  border-radius: var(--radius);
  align-self: center;
}
.mk-ledger-head {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-bottom: var(--border);
  font-family: var(--font-data);
  font-weight: 500;
  font-size: var(--fs-data);
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  color: var(--ink-500);
}
.mk-ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: var(--border);
}
.mk-ledger-row:last-child { border-bottom: 0; }
.mk-ledger-name { display: block; font-weight: 500; font-size: var(--fs-sm); }
.mk-ledger-line {
  display: block;
  font-family: var(--font-data);
  font-weight: 500;
  font-size: var(--fs-data);
  color: var(--ink-500);
  margin-top: 2px;
}

@media (max-width: 900px) {
  .mk-hero .mk-inner { padding-top: var(--s8); padding-bottom: var(--s8); }
  .mk-hero-copy, .mk-ledger { grid-column: 1 / 13; }
}

/* ---------- ruled sections with eyebrow labels ---------- */
.mk-section { border-top: var(--border); }
.mk-section .mk-inner { padding-top: var(--s8); padding-bottom: var(--s10); }
.mk-section .eyebrow { margin-bottom: var(--s2); }
.mk-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: var(--track-heading);
  color: var(--ink-900);
  text-transform: none;
  margin: 0 0 var(--s6);
}

/* how it works */
.mk-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
@media (max-width: 800px) { .mk-3col { grid-template-columns: 1fr; } }
.mk-step { border-top: var(--border); padding-top: var(--s3); }
.mk-step .num {
  display: block;
  font-family: var(--font-data);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--track-data);
  color: var(--ink-500);
  margin-bottom: var(--s2);
}
.mk-step h3 { margin: 0 0 var(--s2); font-size: var(--fs-md); font-weight: 500; }
.mk-step p { margin: 0; color: var(--ink-500); font-size: var(--fs-sm); }

/* product view: full-bleed, between two rules, no frame */
.mk-product {
  border-top: var(--border);
  border-bottom: var(--border);
  background: var(--paper-000);
}
.mk-product img {
  display: block;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  height: auto;
}

/* what's in the box */
.mk-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s8); margin: 0; padding: 0; list-style: none; }
@media (max-width: 720px) { .mk-list { grid-template-columns: 1fr; } }
.mk-list li { border-top: var(--border); padding: var(--s3) 0; font-size: var(--fs-sm); }

/* positioning statement */
.mk-quote p {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink-700);
  max-width: 640px;
  margin: 0;
}

/* note block (rate limits, demo caveats) */
.mk-note {
  background: var(--paper-000);
  border: var(--border);
  border-left: 3px solid var(--status-expiring);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  font-size: var(--fs-sm);
  max-width: 560px;
  margin-bottom: var(--s5);
}

/* ---------- footer ---------- */
.mk-foot { border-top: var(--border); }
.mk-foot .mk-inner {
  padding-top: var(--s6);
  padding-bottom: var(--s8);
  color: var(--ink-500);
  font-size: var(--fs-xs);
  line-height: 1.8;
}