/*
 * QAFind marketing pages — home (/), pricing (/pricing/) and sign-in (/login).
 *
 * Implements the "QAFind — Redesign" artboards (Main, Pricing, Login).
 * Layout and page-specific ornaments only; colours, type and spacing come from
 * the shared tokens. A few artboard values have no token (diff tints, the
 * blue-wash receipt note, verdict chips on charcoal); they live below as
 * --mk-* custom properties so nothing is hardcoded twice.
 *
 * Hooks kept for JS: .al root, .hero-actions .button-primary, .mk-tabs[data-tab]
 * with [data-tab-target]/[data-panel], [data-mode-btn], [data-copy-target],
 * login ids and [data-mode], pricing form.pr-waitlist[data-waitlist-source].
 */

@import url("/ui/tokens.css");
@import url("/ui/base.css");
@import url("/ui/components.css");

:root {
  --mk-blue-wash: #f4f7ff;
  --mk-blue-wash-line: #c9d7ff;
  --mk-sand-line: #e3dccd;
  --mk-del-bg: #fdf0ef;
  --mk-del-ink: #7a1a14;
  --mk-add-bg: #edf7f1;
  --mk-add-ink: #12512f;
  --mk-verified-ink: #9fe0bd;
  --mk-verified-bg: rgba(27, 122, 75, 0.28);
  --mk-allow-ink: #bcd0ff;
  --mk-allow-bg: rgba(47, 107, 255, 0.22);
  --mk-block-ink: #ffb4ad;
  --mk-block-bg: rgba(179, 38, 30, 0.3);
  --mk-sanitize-ink: #e9dcc2;
  --mk-sanitize-bg: rgba(216, 203, 179, 0.18);
  --mk-sand-outline: rgba(216, 203, 179, 0.4);
  --mk-blue-outline: rgba(143, 176, 255, 0.4);
  --mk-gate-bg: rgba(47, 107, 255, 0.12);
  --mk-shadow-hero: 0 24px 64px -28px rgba(0, 0, 0, 0.7);
  --mk-shadow-seg: 0 1px 2px rgba(30, 30, 28, 0.12);
}

/* =====================================================================
   Page frame
   ===================================================================== */

.mk-page {
  background: var(--paper-0);
  color: var(--text-0);
  font-size: var(--fz-lg);
}

.mk-wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

.mk-flex {
  flex: 1 1 0;
}

.mk-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.mk-muted {
  color: var(--text-2);
}

.mk-text1 {
  color: var(--text-1);
}

.mk-w500 {
  font-weight: var(--fw-medium);
}

.mk-small {
  font-size: var(--fz-sm);
}

.mk-meta12 {
  font-size: var(--fz-xs);
  color: var(--text-2);
}

.mk-bad {
  color: var(--bad);
}

.mk-ok {
  color: var(--ok);
}

.mk-signal-bright {
  color: var(--signal-bright);
}

.mk-bone1 {
  color: var(--bone-1);
}

.mk-bone2 {
  color: var(--bone-2);
}

.mk-minw0 {
  min-width: 0;
}

.mk-mt-6 {
  margin-top: 6px;
}

.mk-mt-10 {
  margin-top: 10px;
}

.mk-mono-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
  color: var(--text-2);
}

.mk-tick,
.mk-ico,
.pr-tick,
.auth-tick {
  display: inline-block;
  flex: none;
}

/* ------------------------------------------------------------- buttons */

.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font-family: var(--font-ui);
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  padding: 10px 15px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

.mk-btn:hover {
  text-decoration: none;
}

.mk-btn--sm {
  padding: 9px 15px;
  font-size: var(--fz-md);
}

.mk-btn--lg {
  padding: 12px 19px;
  font-size: 15px;
}

.mk-btn--block {
  display: flex;
  width: 100%;
  padding: 12px;
  font-size: var(--fz-lg);
}

.mk-btn--primary {
  background: var(--signal-ink);
  border-color: var(--signal-ink);
  color: #ffffff;
}

.mk-btn--primary:hover {
  background: var(--signal-hover);
  border-color: var(--signal-hover);
  color: #ffffff;
}

.mk-btn--ghost-ink {
  border-color: var(--line-ink-strong);
  color: var(--bone-0);
}

.mk-btn--ghost-ink:hover {
  background: rgba(245, 242, 234, 0.08);
  border-color: var(--bone-2);
  color: var(--bone-0);
}

.mk-btn--outline {
  border-color: var(--line-2);
  color: var(--text-0);
  background: var(--paper-1);
}

.mk-btn--outline:hover {
  background: var(--paper-2);
  border-color: var(--text-1);
  color: var(--text-0);
}

.mk-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.mk-header .mk-btn:focus-visible,
.mk-hero .mk-btn:focus-visible,
.mk-cta .mk-btn:focus-visible {
  outline-color: var(--focus-ink);
}

/* Non-interactive button look-alikes inside the PR mock-ups. */
.mk-fakebtn {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: #ffffff;
  color: var(--text-0);
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

.mk-fakebtn--primary {
  background: var(--signal-ink);
  border-color: var(--signal-ink);
  color: #ffffff;
}

.mk-fakebtn--sm {
  padding: 6px 11px;
  font-size: var(--fz-xs);
}

.mk-fakebtn--disabled {
  padding: 8px 14px;
  border-color: var(--line-0);
  background: var(--line-0);
  color: var(--text-3);
  font-size: var(--fz-sm);
}

/* =====================================================================
   Header (charcoal)
   ===================================================================== */

.mk-header {
  background: var(--ink-0);
  color: var(--bone-0);
}

.mk-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-ink);
}

.mk-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--bone-0);
  text-decoration: none;
}

.mk-brand:hover {
  color: var(--bone-0);
  text-decoration: none;
}

.mk-brand__mark {
  width: 44px;
  height: 26px;
  object-fit: contain;
}

.mk-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.mk-brand__word {
  font-size: var(--fz-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mk-brand__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--bone-2);
  letter-spacing: 0.04em;
}

.mk-nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-left: var(--sp-4);
}

.mk-nav a {
  padding: var(--sp-2) var(--sp-3);
  color: var(--bone-1);
  font-size: var(--fz-md);
  text-decoration: none;
  white-space: nowrap;
}

.mk-nav a:hover {
  color: var(--bone-0);
  text-decoration: none;
}

.mk-nav a[aria-current="page"] {
  color: var(--bone-0);
  box-shadow: inset 0 -2px 0 var(--signal);
}

.mk-nav a:focus-visible,
.mk-brand:focus-visible {
  outline-color: var(--focus-ink);
}

.mk-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

/* GitHub star badge (public/github.js fills [data-github-stars]). */
.mk-star {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  color: var(--bone-1);
  font-size: var(--fz-sm);
  text-decoration: none;
}

.mk-star:hover {
  color: var(--bone-0);
  text-decoration: none;
}

.mk-star:focus-visible {
  outline-color: var(--focus-ink);
}

.mk-star__count {
  padding: 0 5px;
  border: 1px solid var(--line-ink-strong);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
}

/* =====================================================================
   Home: hero (charcoal)
   ===================================================================== */

.mk-hero {
  background: var(--ink-0);
  color: var(--bone-0);
}

.mk-hero__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  padding-top: 72px;
  padding-bottom: var(--sp-10);
}

.mk-hero__copy {
  flex: 1 1 520px;
  min-width: 0;
}

.mk-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
  color: var(--bone-2);
}

.mk-hero__meta-lead {
  color: var(--signal-bright);
}

.mk-hero__title {
  max-width: 640px;
  color: var(--bone-0);
  font-size: 60px;
  font-weight: var(--fw-semibold);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.mk-hero__sub {
  max-width: 580px;
  margin-top: var(--sp-6);
  color: var(--bone-1);
  font-size: var(--fz-xl);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.mk-hero__proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--sp-6);
  max-width: 560px;
  margin-top: var(--sp-8);
  list-style: none;
}

.mk-hero__proof li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bone-1);
  font-size: var(--fz-sm);
}

.mk-hero__band {
  padding-top: var(--sp-2);
  padding-bottom: 72px;
}

.mk-art {
  display: block;
  width: 100%;
  height: auto;
}

/* hero product panel: the bot on a pull request */
.mk-heropr {
  flex: 1 1 480px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-4);
  background: #ffffff;
  color: var(--text-0);
  box-shadow: var(--mk-shadow-hero);
}

.mk-heropr__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--line-0);
  background: var(--paper-2);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
}

.mk-heropr__repo {
  color: var(--text-0);
  font-weight: var(--fw-medium);
}

.mk-heropr__body {
  padding: 18px var(--sp-5) var(--sp-5);
}

.mk-heropr__who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mk-heropr__byline {
  font-size: var(--fz-sm);
}

.mk-heropr__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.mk-heropr__tags .mk-sev {
  padding: 2px 7px;
  font-size: var(--fz-2xs);
}

.mk-heropr__title {
  margin-top: 10px;
  font-size: 17px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

.mk-heropr__text {
  margin-top: 6px;
  color: var(--text-1);
  font-size: 13.5px;
  line-height: 1.55;
}

.mk-heropr__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 14px;
}

.mk-receipt-note,
.mk-learning {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px var(--sp-3);
  border: 1px solid var(--mk-blue-wash-line);
  border-radius: var(--r-2);
  background: var(--mk-blue-wash);
  font-size: 12.5px;
}

.mk-learning {
  margin-top: 10px;
}

/* ------------------------------------------------- shared mock pieces */

.mk-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--ink-0);
  font-size: 10px;
  font-weight: var(--fw-semibold);
}

.mk-avatar img {
  width: 16px;
  height: 10px;
  object-fit: contain;
}

.mk-avatar--md {
  width: 26px;
  height: 26px;
}

.mk-avatar--md img {
  width: 17px;
}

.mk-avatar--lg {
  width: 30px;
  height: 30px;
}

.mk-avatar--lg img {
  width: 20px;
  height: 12px;
}

.mk-avatar--sand {
  background: var(--sand);
  color: var(--text-0);
}

.mk-avatar--blue {
  background: var(--signal-soft);
  color: var(--signal-hover);
}

.mk-botpill {
  padding: 0 4px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-1);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10px;
}

/* severity / result pills */
.mk-sev {
  align-self: start;
  padding: 2px 6px;
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-align: center;
  white-space: nowrap;
}

.mk-sev--inline {
  padding: 1px 6px;
  font-size: var(--fz-2xs);
}

.mk-sev--bad {
  background: var(--bad-soft);
  color: var(--bad);
}

.mk-sev--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.mk-sev--ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.mk-sev--skip,
.mk-sev--plain {
  background: var(--paper-2);
  color: var(--text-1);
}

.mk-sev--skip {
  color: var(--text-2);
}

/* status chips */
.mk-chip {
  display: inline-block;
  padding: 3px var(--sp-2);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
  line-height: 1.4;
  white-space: nowrap;
}

.mk-card__status .mk-chip {
  padding: 2px 7px;
}

.mk-chip--xs {
  padding: 1px 5px;
  font-size: 10px;
}

.mk-chip--bad {
  background: var(--bad-soft);
  color: var(--bad);
}

.mk-chip--ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.mk-chip--info {
  background: var(--signal-soft);
  color: var(--signal-hover);
}

.mk-chip--sand {
  background: var(--sand-soft);
  color: var(--sand-ink);
}

.mk-tag-sand {
  align-self: center;
  padding: 2px 6px;
  border-radius: var(--r-1);
  background: var(--sand-soft);
  color: var(--sand-ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  white-space: nowrap;
}

.mk-verified {
  padding: 2px 7px;
  border-radius: var(--r-1);
  background: var(--mk-verified-bg);
  color: var(--mk-verified-ink);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
  white-space: nowrap;
}

.mk-verified--sm {
  align-self: flex-start;
  font-size: 10.5px;
}

/* diff blocks */
.mk-diff {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.mk-diff--flush {
  margin-top: 0;
  border: 0;
  border-bottom: 1px solid var(--line-0);
  border-radius: 0;
}

.mk-diff__head {
  padding: 6px var(--sp-3);
  border-bottom: 1px solid var(--line-0);
  background: var(--paper-2);
  color: var(--text-2);
  font-size: var(--fz-2xs);
}

.mk-diff__head--sm {
  padding: 5px 10px;
}

.mk-diff__row {
  overflow: hidden;
  padding: 3px var(--sp-3);
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: pre;
}

.mk-diff__row--del {
  background: var(--mk-del-bg);
  color: var(--mk-del-ink);
}

.mk-diff__row--add {
  background: var(--mk-add-bg);
  color: var(--mk-add-ink);
}

.mk-diff__n {
  display: inline-block;
  width: 26px;
  color: var(--line-2);
}

.mk-diff--wide .mk-diff__n {
  width: 30px;
}

.mk-diff__s {
  display: inline-block;
  width: 14px;
}

/* =====================================================================
   Home: proof strip
   ===================================================================== */

.mk-strip {
  border-bottom: 1px solid var(--line-0);
  background: var(--paper-2);
}

.mk-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-8);
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}

.mk-strip__label {
  color: var(--text-2);
  font-size: var(--fz-sm);
}

.mk-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) 28px;
  list-style: none;
  color: var(--text-0);
  font-family: var(--font-mono);
  font-size: var(--fz-sm);
}

/* =====================================================================
   Home: sections
   ===================================================================== */

.mk-section {
  padding: var(--sp-20) 0;
}

#review {
  padding-bottom: 72px;
}

.mk-section--short {
  padding-bottom: var(--sp-16);
}

.mk-section--sand {
  padding: 96px 0;
  border-top: 1px solid var(--line-0);
  border-bottom: 1px solid var(--line-0);
  background: var(--paper-2);
}

.mk-section--sandsoft {
  padding: 96px 0;
  border-top: 1px solid var(--mk-sand-line);
  background: var(--sand-soft);
}

.mk-section--ink {
  padding: 96px 0;
  background: var(--ink-0);
  color: var(--bone-0);
}

.mk-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.mk-kicker::before {
  content: "";
  flex: none;
  width: 20px;
  height: 2px;
  background: var(--signal);
}

.mk-kicker--ink {
  color: var(--bone-2);
}

.mk-kicker--ink::before {
  background: var(--signal-bright);
}

.mk-kicker--sand {
  color: var(--sand-ink);
}

.mk-h2 {
  max-width: 780px;
  margin-top: var(--sp-4);
  font-size: 40px;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.mk-h2--wide {
  max-width: 820px;
}

.mk-h2--36 {
  font-size: var(--fz-4xl);
}

.mk-lead {
  max-width: 700px;
  margin-top: var(--sp-5);
  color: var(--text-1);
  font-size: 17px;
  line-height: 1.6;
}

.mk-section--ink .mk-h2 {
  color: var(--bone-0);
}

.mk-section--ink .mk-lead {
  color: var(--bone-1);
}

.mk-footnote {
  max-width: 860px;
  margin-top: var(--sp-6);
  color: var(--text-2);
  font-size: var(--fz-xs);
}

.mk-footnote--13 {
  max-width: 760px;
  font-size: var(--fz-sm);
}

/* ------------------------------------------------ 01 review tabs */

.mk-review {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}

.mk-review__tabs {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  min-width: 0;
  border-top: 2px solid var(--text-0);
}

.mk-review__tab {
  display: block;
  width: 100%;
  padding: 18px var(--sp-4);
  border: 0;
  border-bottom: 1px solid var(--line-0);
  background: transparent;
  text-align: left;
}

.mk-review__tab:hover {
  background: var(--paper-2);
}

.mk-review__tab[aria-selected="true"] {
  background: var(--mk-blue-wash);
  box-shadow: inset 3px 0 0 var(--signal);
}

.mk-review__tab:focus-visible {
  outline-offset: -2px;
}

.mk-review__n {
  color: var(--signal-ink);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.mk-review__title {
  display: block;
  margin-top: var(--sp-1);
  color: var(--text-0);
  font-size: var(--fz-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

.mk-review__desc {
  display: block;
  margin-top: var(--sp-1);
  color: var(--text-1);
  font-size: 13.5px;
  line-height: 1.5;
}

.mk-review__panel {
  display: flex;
  flex: 2 1 580px;
  align-items: center;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line-0);
  border-radius: var(--r-4);
  background: var(--paper-2);
}

.mk-card {
  width: 100%;
  border: 1px solid var(--line-0);
  border-radius: 6px;
  background: #ffffff;
}

.mk-card__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-0);
}

.mk-card__bar--split {
  justify-content: space-between;
}

.mk-card__pad {
  padding: 18px var(--sp-5);
}

.mk-card__pad--tight {
  padding: var(--sp-4) var(--sp-5);
}

.mk-card__h {
  font-size: 17px;
  font-weight: var(--fw-semibold);
}

.mk-card__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 6px;
  font-size: var(--fz-sm);
}

.mk-card__text {
  margin-top: var(--sp-3);
  color: var(--text-1);
  font-size: 13.5px;
  line-height: 1.55;
}

.mk-findings {
  margin-top: 14px;
  list-style: none;
}

.mk-findings li {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line-0);
  font-size: var(--fz-sm);
}

.mk-run {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 18px var(--sp-5);
}

.mk-shot {
  flex: 0 0 200px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
}

.mk-run__list {
  flex: 1 1 240px;
  min-width: 0;
  list-style: none;
  font-size: var(--fz-sm);
}

.mk-run__list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-0);
}

.mk-run__list .mk-run__door {
  display: block;
  border-bottom: 0;
  color: var(--text-1);
  font-size: var(--fz-xs);
}

.mk-receipt {
  width: 100%;
  padding: var(--sp-5);
  border-radius: 6px;
  background: var(--ink-0);
  color: var(--bone-0);
}

.mk-receipt__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mk-receipt__chain {
  margin-top: var(--sp-4);
}

.mk-receipt__dl {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: var(--sp-2);
  margin-top: 14px;
  font-size: 12.5px;
}

.mk-receipt__dl dt {
  color: var(--bone-2);
}

.mk-receipt__dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.mk-receipt__note {
  margin-top: var(--sp-3);
  color: var(--bone-2);
  font-size: var(--fz-xs);
}

.mk-gate {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.mk-gate__h {
  font-size: var(--fz-md);
  font-weight: var(--fw-semibold);
}

.mk-checks {
  list-style: none;
}

.mk-checks li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  font-size: var(--fz-sm);
}

.mk-checks--ruled {
  margin-top: 10px;
}

.mk-checks--ruled li {
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--line-0);
}

.mk-checks--compact li {
  padding: 6px 0;
  font-size: 12.5px;
}

.mk-statusrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-0);
  font-size: var(--fz-sm);
}

.mk-gate__blocked {
  padding: var(--sp-3) var(--sp-4);
  color: var(--bad);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
}

.mk-gate__blocked--inline {
  padding: 0;
}

/* ------------------------------------------------ 02 sample review */

.mk-sample {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}

.mk-pr {
  flex: 3 1 640px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--r-4);
  background: #ffffff;
}

.mk-pr__head {
  padding: var(--sp-5) var(--sp-6) 0;
  border-bottom: 1px solid var(--line-0);
}

.mk-pr__title {
  font-size: var(--fz-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}

.mk-pr__num {
  color: var(--text-2);
  font-weight: var(--fw-regular);
}

.mk-pr__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  color: var(--text-1);
  font-size: var(--fz-sm);
}

.mk-pr__open {
  padding: 3px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--ok);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
}

.mk-branch {
  padding: 1px 5px;
  border-radius: var(--r-1);
  background: var(--signal-soft);
  color: var(--signal-hover);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.mk-pr__tabs {
  display: flex;
  gap: 22px;
  margin-top: var(--sp-4);
  overflow-x: auto;
  font-size: var(--fz-sm);
}

.mk-pr__tab {
  padding: 10px 0;
  color: var(--text-2);
  white-space: nowrap;
}

.mk-pr__tab--on {
  color: var(--text-0);
  font-weight: var(--fw-semibold);
  box-shadow: inset 0 -2px 0 var(--signal);
}

.mk-pr__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
}

.mk-thread {
  overflow: hidden;
  border: 1px solid var(--line-0);
  border-radius: 6px;
}

.mk-thread__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-0);
  background: var(--paper-2);
  font-size: var(--fz-sm);
}

.mk-thread__file {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) 14px;
  border-bottom: 1px solid var(--line-0);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

.mk-thread__pad {
  padding: var(--sp-4) 18px;
}

.mk-thread__stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.mk-thread__foot {
  padding: 10px 14px;
  border-top: 1px solid var(--line-0);
  color: var(--text-1);
  font-size: var(--fz-xs);
}

.mk-thread .mk-statusrow {
  padding: 11px 14px;
}

.mk-pr__summary {
  margin-top: 6px;
  color: var(--text-1);
  font-size: var(--fz-sm);
}

.mk-pr__label {
  margin: var(--sp-4) 0 6px;
  font-size: var(--fz-sm);
  font-weight: var(--fw-semibold);
}

.mk-walk {
  overflow: hidden;
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
}

.mk-walk__row {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line-0);
  font-size: 12.5px;
}

.mk-walk__row:first-child {
  border-top: 0;
}

.mk-walk__row .mk-mono {
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

.mk-pr__stats {
  margin-top: 14px;
  line-height: 1.6;
}

.mk-comment {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
}

.mk-comment__h {
  margin-top: 6px;
  font-size: var(--fz-md);
  font-weight: var(--fw-semibold);
}

.mk-comment__text {
  margin-top: var(--sp-1);
  color: var(--text-1);
  font-size: var(--fz-sm);
  line-height: 1.55;
}

.mk-comment__body {
  margin-top: var(--sp-1);
  font-size: var(--fz-sm);
}

.mk-comment__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 10px;
}

.mk-tablewrap {
  overflow-x: auto;
}

.mk-runtable {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.mk-runtable th {
  padding: 9px 10px;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  text-align: left;
}

.mk-runtable td {
  padding: 9px 10px;
}

.mk-runtable th:first-child,
.mk-runtable td:first-child {
  padding-left: 14px;
}

.mk-runtable th:last-child,
.mk-runtable td:last-child {
  padding-right: 14px;
}

.mk-runtable td:last-child {
  color: var(--text-1);
}

.mk-runtable tbody tr {
  border-top: 1px solid var(--line-0);
}

.mk-mergebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--sp-3) 14px;
}

.mk-sample__aside {
  display: flex;
  flex: 2 1 340px;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
}

.mk-bullets {
  border-top: 2px solid var(--text-0);
  list-style: none;
}

.mk-bullets li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--mk-sand-line);
}

.mk-bullets__n {
  padding-top: 3px;
  color: var(--signal-ink);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.mk-bullets__t {
  font-size: var(--fz-lg);
  font-weight: var(--fw-semibold);
}

.mk-bullets__d {
  margin-top: var(--sp-1);
  color: var(--text-1);
  font-size: 13.5px;
  line-height: 1.55;
}

.mk-talk {
  padding: var(--sp-5);
  border-radius: 6px;
  background: var(--ink-0);
  color: var(--bone-0);
}

.mk-talk__label {
  color: var(--bone-2);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
}

.mk-talk__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  list-style: none;
  font-size: var(--fz-sm);
}

.mk-talk__tag {
  padding: 0 4px;
  border: 1px solid var(--mk-sand-outline);
  border-radius: var(--r-1);
  color: var(--sand);
  font-family: var(--font-mono);
  font-size: 10px;
}

.mk-yml {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: 6px;
  background: #ffffff;
}

.mk-yml__file {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-0);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.mk-yml__code {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  color: var(--text-0);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
  line-height: 1.7;
}

/* ------------------------------------------------ 03 spirit animal */

.mk-spirit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12);
  margin-top: var(--sp-12);
}

.mk-spirit__art {
  flex: 1 1 560px;
  min-width: 0;
  padding: var(--sp-6);
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
  background: var(--paper-2);
}

.mk-traits {
  display: flex;
  flex: 1 1 420px;
  flex-direction: column;
  min-width: 0;
  list-style: none;
}

.mk-traits li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line-0);
}

.mk-traits li:last-child {
  border-bottom: 1px solid var(--line-0);
}

.mk-traits__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--signal-ink);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: var(--fz-sm);
}

.mk-traits__t {
  font-size: 17px;
  font-weight: var(--fw-semibold);
}

.mk-traits__d {
  margin-top: 6px;
  color: var(--text-1);
  font-size: var(--fz-md);
  line-height: 1.6;
}

/* ------------------------------------------------ 04 moat */

.mk-moat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-10);
}

.mk-moat__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
  background: #ffffff;
}

.mk-moat__art {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--line-0);
  background: #ffffff;
}

.mk-moat__body {
  padding: var(--sp-6) 28px 28px;
}

.mk-moat__n {
  color: var(--signal-ink);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.mk-moat__t {
  margin-top: var(--sp-2);
  font-size: var(--fz-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.mk-moat__d {
  margin-top: 10px;
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.6;
}

.mk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-4);
}

.mk-tag {
  padding: 3px var(--sp-2);
  border: 1px solid var(--line-0);
  border-radius: var(--r-1);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
}

/* ------------------------------------------------ how it works */

.mk-how__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
}

.mk-explain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.mk-explain__label {
  color: var(--text-2);
  font-size: var(--fz-sm);
}

.mk-seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
  background: var(--paper-2);
}

.mk-seg__btn {
  padding: 7px var(--sp-3);
  border-radius: 3px;
  color: var(--text-2);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
}

.mk-seg__btn:hover {
  color: var(--text-0);
}

.mk-seg__btn[aria-pressed="true"] {
  background: #ffffff;
  color: var(--text-0);
  box-shadow: var(--mk-shadow-seg);
}

.mk-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-10);
  list-style: none;
}

.mk-step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--sp-4);
  border-top: 2px solid var(--text-0);
}

.mk-step__n {
  color: var(--signal-ink);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.mk-step__t {
  margin-top: 6px;
  font-size: var(--fz-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

.mk-step__d {
  margin: 6px 0 var(--sp-4);
  color: var(--text-1);
  font-size: var(--fz-md);
  line-height: 1.55;
}

.mk-step__d code {
  padding: 0 4px;
  border-radius: var(--r-1);
  background: var(--paper-2);
  color: var(--text-0);
  font-size: var(--fz-xs);
}

.mk-step__code {
  margin-top: auto;
  padding: var(--sp-3) 14px;
  border-radius: var(--r-2);
  background: var(--ink-0);
}

.mk-step__code pre {
  margin: 0;
  overflow-x: auto;
  color: var(--bone-1);
  font-size: var(--fz-xs);
  line-height: 1.6;
}

.mk-step__file {
  display: block;
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-ink);
  color: var(--bone-2);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
}

.mk-cmd {
  margin-top: var(--sp-10);
}

.mk-cmd__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.mk-cmd__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.mk-cmd__tab {
  padding: var(--sp-2) 14px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.mk-cmd__tab:hover {
  border-color: var(--line-1);
}

.mk-cmd__tab[aria-selected="true"] {
  border-color: var(--ink-0);
  background: var(--ink-0);
  color: var(--bone-0);
}

.mk-cmd__note {
  color: var(--text-2);
  font-size: var(--fz-sm);
}

.mk-code {
  margin-top: var(--sp-3);
  overflow: hidden;
  border-radius: 6px;
  background: var(--ink-0);
}

.mk-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 14px;
  border-bottom: 1px solid var(--line-ink);
  background: var(--ink-1);
  color: var(--bone-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.mk-code__copy {
  padding: var(--sp-1) 10px;
  border: 1px solid var(--line-ink-strong);
  border-radius: var(--r-2);
  color: var(--bone-0);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.mk-code__copy:hover {
  background: var(--ink-2);
}

.mk-code__copy:focus-visible {
  outline-color: var(--focus-ink);
}

.mk-code__copy[data-copied] {
  color: var(--signal-bright);
}

.mk-code__pre {
  margin: 0;
  padding: var(--sp-4);
  overflow-x: auto;
  color: var(--bone-0);
  font-size: 12.5px;
  line-height: 1.7;
}

.mk-code__pre code {
  font-size: inherit;
}

/* ------------------------------------------------ 05 console bento */

.mk-console__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-12);
}

.mk-console__head > div {
  flex: 1 1 560px;
  min-width: 0;
}

.mk-console__head .mk-h2 {
  max-width: 720px;
}

.mk-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-10);
}

.mk-bento__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-0);
  border-radius: 6px;
  color: var(--text-0);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out);
}

.mk-bento__card:hover {
  border-color: var(--line-2);
  color: var(--text-0);
  text-decoration: none;
}

.mk-bento__card:hover .mk-bento__t {
  color: var(--signal-ink);
}

.mk-bento__card--wide {
  grid-column: span 2;
}

.mk-bento__pre {
  flex: 1;
  padding: var(--sp-5);
  background: var(--paper-2);
}

.mk-bento__pre--row {
  display: flex;
  gap: var(--sp-3);
}

.mk-bento__pre--stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.mk-bento__pre--ink {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  background: var(--ink-0);
}

.mk-bento__side {
  display: flex;
  flex: 0 0 96px;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: var(--r-2);
  background: var(--ink-0);
}

.mk-bento__side img {
  width: 26px;
  height: 15px;
  object-fit: contain;
}

.mk-bento__nav {
  height: 6px;
  border-radius: 1px;
  background: var(--ink-3);
}

.mk-bento__nav--on {
  background: var(--signal);
}

.mk-bento__nav--short {
  width: 70%;
}

.mk-bento__screen {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
  background: #ffffff;
}

.mk-bento__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}

.mk-bento__kl {
  color: var(--text-2);
  font-size: 10px;
}

.mk-bento__kv {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fz-xl);
}

.mk-bento__bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  height: 80px;
  border-bottom: 1px solid var(--text-0);
}

.mk-bar {
  background: var(--signal);
}

.mk-bar--52 { height: 52%; }
.mk-bar--54 { height: 54%; }
.mk-bar--60 { height: 60%; }
.mk-bar--68 { height: 68%; }
.mk-bar--74 { height: 74%; }
.mk-bar--78 { height: 78%; }
.mk-bar--96 { height: 96%; background: var(--signal-ink); }

.mk-bento__list {
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
  background: #ffffff;
}

.mk-bento__list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 9px var(--sp-3);
  border-bottom: 1px solid var(--line-0);
  font-size: var(--fz-xs);
}

.mk-bento__list > div:last-child {
  border-bottom: 0;
}

.mk-bento__list--rules > div {
  justify-content: flex-start;
  padding: var(--sp-2) 10px;
  font-size: 11.5px;
}

.mk-heal__old,
.mk-heal__new {
  padding: var(--sp-2) 10px;
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.mk-heal__old {
  border: 1px dashed var(--line-2);
  background: #ffffff;
  color: var(--text-2);
  text-decoration: line-through;
}

.mk-heal__new {
  border: 1px solid var(--signal-ink);
  background: var(--mk-blue-wash);
}

.mk-heal__meter {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.mk-heal__track {
  flex: 1;
  height: 4px;
  background: var(--mk-sand-line);
}

.mk-heal__fill {
  display: block;
  width: 94%;
  height: 4px;
  background: var(--signal);
}

.mk-heal__pct {
  font-size: var(--fz-2xs);
}

.mk-heal__accept {
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--signal-ink);
  color: #ffffff;
  font-size: var(--fz-2xs);
}

.mk-chainrow {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.mk-chainrow span {
  flex: 1;
  padding: 7px 0;
  border: 1px solid rgba(143, 176, 255, 0.5);
  color: var(--bone-1);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: center;
}

.mk-bento__text {
  padding: 18px var(--sp-5);
}

.mk-bento__t {
  font-size: 17px;
  font-weight: var(--fw-semibold);
}

.mk-bento__d {
  margin-top: var(--sp-1);
  color: var(--text-1);
  font-size: 13.5px;
  line-height: 1.55;
}

.mk-also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) 10px;
  margin-top: var(--sp-5);
  font-size: var(--fz-sm);
}

.mk-also__label {
  margin-right: 6px;
  color: var(--text-2);
}

.mk-also a {
  padding: 6px 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  color: var(--text-0);
  text-decoration: none;
}

.mk-also a:hover {
  border-color: var(--line-2);
  background: var(--paper-2);
  color: var(--text-0);
  text-decoration: none;
}

.mk-also__pv {
  color: var(--sand-ink);
  font-size: 10px;
}

/* ------------------------------------------------ 06 guardrail (ink) */

.mk-door {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}

.mk-door__lanes {
  display: grid;
  flex: 1 1 420px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: var(--sp-3);
  min-width: 0;
}

.mk-door__lane {
  padding: var(--sp-4);
  border: 1px solid var(--line-ink-strong);
  border-radius: var(--r-2);
}

.mk-door__lane--gate {
  border-color: var(--signal-bright);
  background: var(--mk-gate-bg);
}

.mk-door__k {
  color: var(--bone-2);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
}

.mk-door__lane--gate .mk-door__k {
  color: var(--signal-bright);
}

.mk-door__v {
  margin-top: 6px;
  font-size: var(--fz-md);
}

.mk-door__note {
  grid-column: 1 / -1;
  margin-top: var(--sp-2);
  color: var(--bone-2);
  font-size: var(--fz-xs);
}

.mk-trace {
  flex: 1 1 520px;
  min-width: 0;
  border-top: 1px solid var(--line-ink);
  list-style: none;
}

.mk-trace li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-ink);
}

.mk-trace__m {
  padding-top: 2px;
  color: var(--bone-2);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.mk-trace__p {
  font-family: var(--font-mono);
  font-size: var(--fz-md);
  overflow-wrap: anywhere;
}

.mk-trace__w {
  margin-top: var(--sp-1);
  color: var(--bone-2);
  font-size: var(--fz-sm);
}

.mk-verdict {
  padding: 3px var(--sp-2);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
  white-space: nowrap;
}

.mk-verdict--allow {
  background: var(--mk-allow-bg);
  color: var(--mk-allow-ink);
}

.mk-verdict--block {
  background: var(--mk-block-bg);
  color: var(--mk-block-ink);
}

.mk-verdict--sanitize {
  background: var(--mk-sanitize-bg);
  color: var(--mk-sanitize-ink);
}

.mk-scope {
  margin-top: var(--sp-12);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-ink);
}

.mk-scope__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  list-style: none;
  cursor: pointer;
}

.mk-scope__sum::-webkit-details-marker {
  display: none;
}

.mk-scope__sum:focus-visible {
  outline-color: var(--focus-ink);
}

.mk-scope__t {
  display: block;
  font-size: 20px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}

.mk-scope__d {
  display: block;
  margin-top: var(--sp-1);
  color: var(--bone-1);
  font-size: var(--fz-md);
}

.mk-scope__btn {
  padding: 6px 10px;
  border: 1px solid var(--mk-blue-outline);
  border-radius: var(--r-2);
  color: var(--signal-bright);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
  white-space: nowrap;
}

.mk-scope__sum:hover .mk-scope__btn {
  border-color: var(--signal-bright);
}

.mk-scope__wrap {
  margin-top: var(--sp-5);
  overflow-x: auto;
  border: 1px solid var(--line-ink);
  border-radius: var(--r-2);
}

.mk-scope__table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: var(--fz-sm);
}

.mk-scope__table thead tr {
  background: var(--ink-1);
}

.mk-scope__table thead th {
  padding: var(--sp-3) var(--sp-4);
  color: var(--bone-2);
  font-size: var(--fz-xs);
  font-weight: var(--fw-medium);
  text-align: left;
}

.mk-scope__cap {
  width: 22%;
}

.mk-scope__table tbody tr {
  border-top: 1px solid var(--line-ink);
  vertical-align: top;
}

.mk-scope__table tbody th {
  padding: 14px var(--sp-4);
  color: var(--bone-0);
  font-weight: var(--fw-semibold);
  text-align: left;
}

.mk-scope__table td {
  padding: 14px var(--sp-4);
  color: var(--bone-1);
  line-height: 1.55;
}

.mk-scope__table td:last-child {
  color: var(--bone-2);
}

.mk-pv {
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--mk-sand-outline);
  border-radius: var(--r-1);
  color: var(--sand);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-regular);
}

/* ------------------------------------------------ 07 where it runs */

.mk-where {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-12);
}

.mk-where__card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
}

.mk-where__art {
  display: block;
  width: 100%;
  height: auto;
  background: var(--sand-soft);
}

.mk-where__body {
  padding: var(--sp-6);
}

.mk-where__t {
  font-size: 20px;
  font-weight: var(--fw-semibold);
}

.mk-where__d {
  margin-top: var(--sp-2);
  color: var(--text-1);
  font-size: var(--fz-md);
  line-height: 1.6;
}

.mk-where__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
}

.mk-where__foot .mk-mono {
  color: var(--text-1);
  font-size: var(--fz-xs);
}

.mk-where__foot a {
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
}

/* ------------------------------------------------ 08 pricing teaser */

.mk-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-12);
}

.mk-plan {
  padding: var(--sp-8);
  border: 1px solid var(--mk-sand-line);
  border-radius: var(--r-2);
  background: #ffffff;
}

.mk-plan--main {
  border-color: var(--text-0);
}

.mk-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.mk-plan__name {
  font-size: 20px;
  font-weight: var(--fw-semibold);
}

.mk-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.mk-plan__amt {
  font-size: 48px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.mk-plan__per {
  color: var(--text-2);
  font-size: var(--fz-md);
}

.mk-plan__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: var(--sp-6) 0 28px;
  list-style: none;
  color: var(--text-1);
  font-size: var(--fz-md);
}

.mk-prostrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-2);
}

.mk-prostrip p {
  color: var(--text-1);
  font-size: var(--fz-md);
}

.mk-prostrip__k {
  color: var(--sand-ink);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.mk-prostrip a {
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
}

/* ------------------------------------------------ 09 FAQ */

.mk-faq {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
}

.mk-faq__head {
  flex: 1 1 300px;
  min-width: 0;
}

.mk-faq__list {
  flex: 2 1 560px;
  min-width: 0;
  border-top: 1px solid var(--line-0);
}

.mk-faq__item {
  border-bottom: 1px solid var(--line-0);
}

.mk-faq__item summary {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-size: 15.5px;
  font-weight: var(--fw-semibold);
  list-style: none;
  cursor: pointer;
}

.mk-faq__item summary::-webkit-details-marker {
  display: none;
}

.mk-faq__item summary:hover {
  color: var(--signal-ink);
}

.mk-faq__plus {
  flex: none;
  color: var(--signal-ink);
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
}

.mk-faq__item[open] .mk-faq__plus {
  transform: rotate(45deg);
}

.mk-faq__item p {
  max-width: 680px;
  margin: 0 0 var(--sp-4);
  color: var(--text-1);
  font-size: var(--fz-md);
  line-height: 1.65;
}

/* ------------------------------------------------ final CTA */

.mk-cta {
  background: var(--ink-0);
  color: var(--bone-0);
}

.mk-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12);
  padding-top: var(--sp-20);
  padding-bottom: var(--sp-20);
}

.mk-cta__copy {
  flex: 1 1 460px;
  min-width: 0;
}

.mk-cta__title {
  color: var(--bone-0);
  font-size: 44px;
  font-weight: var(--fw-semibold);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.mk-cta__sub {
  max-width: 520px;
  margin-top: var(--sp-4);
  color: var(--bone-1);
  font-size: 17px;
  line-height: 1.6;
}

.mk-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: 28px;
}

.mk-cta__art {
  display: block;
  flex: 1 1 380px;
  min-width: 0;
  height: auto;
}

/* ------------------------------------------------ footer */

.mk-footer {
  border-top: 1px solid var(--line-ink);
  background: var(--ink-0);
  color: var(--bone-0);
}

.mk-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-8);
}

.mk-footer__about {
  flex: 2 1 280px;
  min-width: 0;
}

.mk-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--bone-0);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.mk-footer__brand:hover {
  color: var(--bone-0);
  text-decoration: none;
}

.mk-footer__brand img {
  width: 40px;
  height: 24px;
  object-fit: contain;
}

.mk-footer__tagline {
  max-width: 320px;
  margin-top: var(--sp-3);
  color: var(--bone-2);
  font-size: var(--fz-md);
}

.mk-footer__col {
  flex: 1 1 140px;
  min-width: 0;
}

.mk-footer__title {
  color: var(--bone-2);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
}

.mk-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  list-style: none;
  font-size: var(--fz-md);
}

.mk-footer__col a {
  color: var(--bone-1);
  text-decoration: none;
}

.mk-footer__col a:hover {
  color: var(--bone-0);
  text-decoration: underline;
}

.mk-footer a:focus-visible,
.mk-cta a:focus-visible,
.mk-section--ink a:focus-visible,
.mk-section--ink summary:focus-visible,
.pr-footer a:focus-visible,
.pr-addon :focus-visible {
  outline-color: var(--focus-ink);
}

.mk-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-8);
  color: var(--bone-2);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
}

/* =====================================================================
   Pricing (/pricing/)
   ===================================================================== */

.pr-hero {
  background: var(--ink-0);
  color: var(--bone-0);
}

.pr-hero__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12);
  padding-top: 72px;
  padding-bottom: var(--sp-20);
}

.pr-hero__copy {
  flex: 3 1 520px;
  min-width: 0;
}

.pr-hero__meta {
  margin-bottom: var(--sp-5);
  color: var(--bone-2);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.pr-hero__meta-lead {
  color: var(--signal-bright);
}

.pr-hero__title {
  max-width: 720px;
  color: var(--bone-0);
  font-size: var(--fz-5xl);
  font-weight: var(--fw-semibold);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.pr-hero__sub {
  max-width: 620px;
  margin-top: 22px;
  color: var(--bone-1);
  font-size: 17px;
  line-height: 1.6;
}

.pr-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  list-style: none;
}

.pr-hero__facts li {
  padding: 6px 10px;
  border: 1px solid var(--line-ink-strong);
  border-radius: var(--r-1);
  color: var(--bone-1);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.pr-hero__art {
  display: block;
  flex: 2 1 280px;
  min-width: 0;
  max-width: 360px;
  height: auto;
}

.pr-position {
  padding: var(--sp-20) 0 var(--sp-10);
}

.pr-position__title {
  margin-top: 14px;
  font-size: var(--fz-4xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.03em;
}

.pr-position__lead {
  max-width: 680px;
  margin-top: 14px;
  color: var(--text-1);
  font-size: var(--fz-lg);
  line-height: 1.6;
}

.pr-axes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin-top: var(--sp-8);
  border-top: 2px solid var(--text-0);
}

.pr-axes__item {
  min-width: 0;
  padding: var(--sp-6);
  border-right: 1px solid var(--line-0);
}

.pr-axes__item:first-child {
  padding-left: 0;
}

.pr-axes__item:last-child {
  border-right: 0;
}

.pr-axes__n {
  color: var(--signal-ink);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.pr-axes__t {
  margin-top: 6px;
  font-size: 20px;
  font-weight: var(--fw-semibold);
}

.pr-axes__d {
  margin-top: var(--sp-2);
  color: var(--text-1);
  font-size: var(--fz-md);
  line-height: 1.6;
}

.pr-limits {
  max-width: 860px;
  margin-top: var(--sp-5);
  padding: 14px var(--sp-4);
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
  background: var(--paper-2);
  color: var(--text-2);
  font-size: var(--fz-sm);
  line-height: 1.6;
}

.pr-limits strong {
  color: var(--text-0);
}

.pr-plans {
  padding: var(--sp-10) 0 var(--sp-20);
}

.pr-plans__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: stretch;
  gap: var(--sp-5);
}

.pr-plan {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
}

.pr-plan--free {
  border: 2px solid var(--text-0);
}

.pr-plan--pro {
  background: var(--paper-2);
}

.pr-plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
}

.pr-plan__name {
  font-size: var(--fz-2xl);
  font-weight: var(--fw-semibold);
}

.pr-plan__meta {
  margin-top: var(--sp-1);
  color: var(--text-2);
  font-size: var(--fz-sm);
}

.pr-plan__price {
  margin-top: var(--sp-5);
}

.pr-plan__amt {
  font-size: 44px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.pr-plan__per {
  color: var(--text-2);
  font-size: var(--fz-md);
}

.pr-plan__lead {
  margin-top: var(--sp-3);
  color: var(--text-1);
  font-size: var(--fz-md);
  line-height: 1.55;
}

.pr-plan__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-0);
  list-style: none;
  color: var(--text-0);
  font-size: var(--fz-md);
}

.pr-plan--pro .pr-plan__list {
  border-top-color: var(--mk-sand-line);
}

.pr-plan__list li {
  display: flex;
  gap: 10px;
}

.pr-tick {
  margin-top: 3px;
}

.pr-plan__cta {
  margin-top: var(--sp-6);
}

.pr-plan__foot {
  margin-top: 10px;
  color: var(--text-2);
  font-size: var(--fz-xs);
  text-align: center;
}

.pr-plans__note {
  max-width: 900px;
  margin-top: var(--sp-5);
  color: var(--text-2);
  font-size: var(--fz-sm);
}

.pr-waitlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--sp-6);
}

.pr-waitlist__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
}

.pr-waitlist__optional {
  color: var(--text-2);
  font-weight: var(--fw-regular);
}

.pr-waitlist__input {
  width: 100%;
  padding: 11px var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: #ffffff;
  color: var(--text-0);
  font-size: var(--fz-md);
  font-weight: var(--fw-regular);
}

.pr-waitlist__input::placeholder {
  color: var(--text-3);
}

.pr-waitlist__submit {
  padding: 13px;
  border-radius: var(--r-2);
  background: var(--signal-ink);
  color: #ffffff;
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-1) var(--ease-out);
}

.pr-waitlist__submit:hover {
  background: var(--signal-hover);
}

.pr-waitlist__submit--ink {
  background: var(--ink-0);
  color: var(--bone-0);
}

.pr-waitlist__submit--ink:hover {
  background: var(--ink-2);
}

.pr-waitlist__submit:disabled {
  opacity: 0.6;
}

.pr-waitlist__status {
  color: var(--text-1);
  font-size: var(--fz-sm);
}

.pr-waitlist__status:empty {
  display: none;
}

.pr-waitlist--ink .pr-waitlist__field {
  color: var(--bone-0);
}

.pr-waitlist--ink .pr-waitlist__optional {
  color: var(--bone-2);
}

.pr-waitlist--ink .pr-waitlist__input {
  border-color: var(--line-ink-strong);
  background: var(--ink-0);
  color: var(--bone-0);
}

.pr-waitlist--ink .pr-waitlist__input::placeholder {
  color: var(--bone-2);
}

.pr-waitlist--ink .pr-waitlist__input:focus-visible {
  outline-color: var(--focus-ink);
}

.pr-waitlist--ink .pr-waitlist__status {
  color: var(--bone-1);
}

.pr-addon {
  background: var(--ink-0);
  color: var(--bone-0);
}

.pr-addon__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  padding-top: 72px;
  padding-bottom: 72px;
}

.pr-addon__copy {
  flex: 3 1 480px;
  min-width: 0;
}

.pr-addon__eyebrow {
  color: var(--signal-bright);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.pr-addon__title {
  margin-top: var(--sp-3);
  color: var(--bone-0);
  font-size: 34px;
  font-weight: var(--fw-semibold);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.pr-addon__lead {
  max-width: 600px;
  margin-top: var(--sp-4);
  color: var(--bone-1);
  font-size: var(--fz-lg);
  line-height: 1.6;
}

.pr-addon__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--sp-6);
  margin-top: var(--sp-6);
  list-style: none;
  color: var(--bone-1);
  font-size: var(--fz-md);
}

.pr-addon__box {
  flex: 2 1 340px;
  min-width: 0;
  padding: var(--sp-6);
  border: 1px solid rgba(245, 242, 234, 0.2);
  border-radius: var(--r-2);
  background: var(--ink-1);
}

.pr-addon__amt {
  font-size: 40px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.03em;
}

.pr-addon__per {
  color: var(--bone-2);
  font-size: var(--fz-md);
}

.pr-addon__box .pr-waitlist {
  margin-top: var(--sp-5);
}

.pr-addon__note {
  margin-top: var(--sp-3);
  color: var(--bone-2);
  font-size: var(--fz-xs);
  line-height: 1.5;
}

.pr-notes {
  padding: var(--sp-20) 0;
}

.pr-notes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-5);
}

.pr-note {
  min-width: 0;
  padding: var(--sp-6);
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
}

.pr-note__title {
  font-size: var(--fz-xl);
  font-weight: var(--fw-semibold);
}

.pr-note__text {
  margin-top: 10px;
  color: var(--text-1);
  font-size: var(--fz-md);
  line-height: 1.6;
}

.pr-note__list {
  margin-top: 10px;
  padding-left: 18px;
  list-style: disc;
  color: var(--text-1);
  font-size: var(--fz-md);
  line-height: 1.6;
}

.pr-note__meta {
  margin-top: 10px;
  color: var(--text-2);
  font-size: var(--fz-xs);
}

.pr-note__link {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
}

.pr-footer {
  background: var(--ink-0);
  color: var(--bone-2);
}

.pr-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}

.pr-footer .mk-footer__brand img {
  width: 36px;
  height: 22px;
}

.pr-footer__meta {
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
}

/* =====================================================================
   Sign in (/login)
   ===================================================================== */

.auth-page {
  background: var(--paper-2);
  color: var(--text-0);
}

.auth-split {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}

.auth-story {
  display: flex;
  flex: 1 1 520px;
  flex-direction: column;
  gap: var(--sp-8);
  min-width: 0;
  padding: var(--sp-8) var(--sp-12) var(--sp-10);
  background: var(--ink-0);
  color: var(--bone-0);
}

.auth-story__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--bone-0);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.auth-brand:hover {
  color: var(--bone-0);
  text-decoration: none;
}

.auth-brand img {
  width: 44px;
  height: 26px;
  object-fit: contain;
}

.auth-back {
  color: var(--bone-1);
  font-size: var(--fz-md);
  text-decoration: none;
}

.auth-back:hover {
  color: var(--bone-0);
}

.auth-story a:focus-visible {
  outline-color: var(--focus-ink);
}

.auth-story__copy {
  margin-top: var(--sp-6);
}

.auth-story__meta {
  color: var(--bone-2);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

.auth-story__meta-lead {
  color: var(--signal-bright);
}

.auth-story__title {
  max-width: 520px;
  margin-top: var(--sp-4);
  color: var(--bone-0);
  font-size: 44px;
  font-weight: var(--fw-semibold);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.auth-story__sub {
  max-width: 480px;
  margin-top: var(--sp-4);
  color: var(--bone-1);
  font-size: var(--fz-lg);
  line-height: 1.6;
}

.auth-art {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

.auth-story__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: auto;
  list-style: none;
  color: var(--bone-1);
  font-size: var(--fz-md);
}

.auth-story__list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-main {
  display: flex;
  flex: 1 1 460px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--sp-12) var(--sp-6);
  background: var(--paper-2);
}

.auth-panel {
  width: 100%;
  max-width: 420px;
}

.auth-card {
  padding: var(--sp-8);
  border: 1px solid var(--line-0);
  border-radius: var(--r-4);
  background: #ffffff;
}

.auth-card__meta {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
}

.auth-title {
  margin-top: 10px;
  font-size: 24px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}

.auth-title:focus {
  outline: none;
}

.auth-title:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.auth-sub {
  margin-top: 6px;
  color: var(--text-1);
  font-size: var(--fz-md);
  line-height: 1.5;
}

.auth-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--sp-6);
  padding: 3px;
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
  background: var(--paper-2);
}

.auth-modes__btn {
  padding: 9px;
  border-radius: 3px;
  color: var(--text-2);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
}

.auth-modes__btn:hover {
  color: var(--text-0);
}

.auth-modes__btn[aria-pressed="true"] {
  background: #ffffff;
  color: var(--text-0);
  box-shadow: var(--mk-shadow-seg);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field__label {
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
}

.auth-optional {
  color: var(--text-2);
  font-weight: var(--fw-regular);
}

.auth-input {
  width: 100%;
  padding: 11px var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: #ffffff;
  color: var(--text-0);
  font-size: var(--fz-md);
}

.auth-input::placeholder {
  color: var(--text-3);
}

.auth-input[aria-invalid="true"] {
  border-color: var(--bad);
}

.auth-field__hint {
  color: var(--text-2);
  font-size: var(--fz-xs);
}

.auth-error {
  padding: 10px var(--sp-3);
  border-left: 3px solid var(--bad);
  border-radius: var(--r-2);
  background: var(--bad-soft);
  color: var(--bad);
  font-size: var(--fz-sm);
}

.auth-submit {
  display: block;
  width: 100%;
  padding: 13px;
  border-radius: var(--r-2);
  background: var(--signal-ink);
  color: #ffffff;
  font-size: 15px;
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-1) var(--ease-out);
}

.auth-submit:hover {
  background: var(--signal-hover);
}

.auth-submit:disabled {
  opacity: 0.65;
}

.auth-note {
  margin-top: var(--sp-4);
  padding: 10px var(--sp-3);
  border-radius: var(--r-2);
  background: var(--paper-2);
  color: var(--text-2);
  font-size: var(--fz-xs);
  line-height: 1.55;
}

.auth-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-4);
  color: var(--text-2);
  font-size: var(--fz-sm);
}

.auth-switch__btn {
  padding: 0;
  color: var(--signal-ink);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
}

.auth-switch__btn:hover {
  color: var(--signal-hover);
  text-decoration: underline;
}

.auth-demo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-4);
  color: var(--text-0);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out);
}

.auth-demo:hover {
  border-color: var(--signal-ink);
  color: var(--text-0);
  text-decoration: none;
}

.auth-demo img {
  flex: none;
  width: 34px;
  height: 20px;
  object-fit: contain;
}

.auth-demo__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.auth-demo__title {
  color: var(--signal-ink);
  font-size: var(--fz-md);
  font-weight: var(--fw-semibold);
}

.auth-demo__text {
  color: var(--text-2);
  font-size: var(--fz-xs);
}

.auth-foot {
  margin-top: var(--sp-6);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
  text-align: center;
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 1080px) {
  .mk-hero__title {
    font-size: 52px;
  }
}

@media (max-width: 860px) {
  .mk-bento__card--wide {
    grid-column: auto;
  }

  .mk-hero__title {
    font-size: 44px;
  }

  .mk-h2 {
    font-size: 34px;
  }

  .mk-cta__title,
  .pr-hero__title {
    font-size: 40px;
  }

  .pr-axes__item {
    padding: var(--sp-5) 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-0);
  }

  .pr-axes__item:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 720px) {
  .mk-wrap {
    padding: 0 var(--sp-4);
  }

  .mk-header__inner {
    gap: var(--sp-3);
    padding-top: 14px;
    padding-bottom: 10px;
  }

  .mk-nav {
    order: 3;
    flex-wrap: nowrap;
    width: calc(100% + 24px);
    margin: 0 -12px;
    overflow-x: auto;
  }

  .mk-section {
    padding: var(--sp-16) 0;
  }

  #review,
  .mk-section--short {
    padding-bottom: 56px;
  }

  .mk-section--sand,
  .mk-section--sandsoft,
  .mk-section--ink {
    padding: 72px 0;
  }

  .mk-hero__grid {
    gap: var(--sp-10);
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-8);
  }

  .mk-hero__title {
    font-size: 38px;
  }

  .mk-hero__sub {
    font-size: var(--fz-lg);
  }

  .mk-hero__proof {
    grid-template-columns: minmax(0, 1fr);
  }

  .mk-hero__band {
    padding-bottom: var(--sp-12);
  }

  .mk-h2 {
    font-size: 28px;
  }

  .mk-h2--36 {
    font-size: 28px;
  }

  .mk-lead {
    font-size: var(--fz-lg);
  }

  .mk-review,
  .mk-sample,
  .mk-spirit,
  .mk-door {
    margin-top: var(--sp-8);
  }

  .mk-review__panel {
    padding: var(--sp-3);
  }

  .mk-pr__head {
    padding: var(--sp-4) var(--sp-4) 0;
  }

  .mk-pr__body {
    padding: var(--sp-3);
  }

  .mk-thread__pad {
    padding: 14px var(--sp-3);
  }

  .mk-walk__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .mk-spirit__art {
    padding: var(--sp-3);
  }

  .mk-moat__body {
    padding: var(--sp-5);
  }

  .mk-bento__pre--row {
    flex-direction: column;
  }

  .mk-bento__side {
    display: none;
  }

  .mk-door__lanes {
    grid-template-columns: minmax(0, 1fr);
  }

  .mk-trace li {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-3);
  }

  .mk-trace .mk-verdict {
    grid-column: 2;
    justify-self: start;
  }

  .mk-plan {
    padding: var(--sp-6);
  }

  .mk-cta__inner {
    gap: var(--sp-8);
    padding-top: var(--sp-16);
    padding-bottom: var(--sp-16);
  }

  .mk-cta__title {
    font-size: 34px;
  }

  .pr-hero__grid {
    gap: var(--sp-8);
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-12);
  }

  .pr-hero__title {
    font-size: 36px;
  }

  .pr-hero__art {
    max-width: 240px;
  }

  .pr-position {
    padding-top: var(--sp-16);
  }

  .pr-position__title,
  .pr-addon__title {
    font-size: 28px;
  }

  .pr-plan {
    padding: var(--sp-5);
  }

  .pr-addon__inner {
    gap: var(--sp-8);
    padding-top: var(--sp-16);
    padding-bottom: var(--sp-16);
  }

  .pr-addon__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .pr-notes {
    padding: var(--sp-16) 0;
  }

  .auth-story {
    padding: var(--sp-6) var(--sp-4) var(--sp-8);
    gap: var(--sp-6);
  }

  .auth-story__copy {
    margin-top: 0;
  }

  .auth-story__title {
    font-size: 34px;
  }

  .auth-main {
    padding: var(--sp-8) var(--sp-4);
  }

  .auth-card {
    padding: var(--sp-6) var(--sp-5);
  }
}

@media (max-width: 480px) {
  .mk-brand__meta {
    display: none;
  }

  .mk-hero__title {
    font-size: 34px;
  }

  .mk-heropr__body {
    padding: var(--sp-4);
  }

  .mk-receipt__dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .mk-receipt__dl dd {
    margin-bottom: var(--sp-2);
  }

  .mk-bento__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-btn,
  .mk-bento__card,
  .auth-submit,
  .auth-demo,
  .pr-waitlist__submit {
    transition: none;
  }
}

.auth-divider { text-align: center; color: #6b665c; font-size: 13px; margin: 16px 0 10px; }
.auth-github { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; background: #1e1e1c; color: #fff; }
.auth-github:hover { background: #2b2b28; }