/* The public marketing shell (G4-T18a), in website concept B's tokens
   (T-SITE-B1a). Tokens only; logical properties only. B's world is paperwork
   in daylight: square paper, hairline rules, no shadows, no glass. Every value
   here reads the .mk-body site block in tokens.css or a shared size token. */

.mk-body {
  min-block-size: 100dvh;
  margin: var(--space-0);
  background: var(--site-page);
  color: var(--site-ink);
  font-family: var(--site-font-text);
  font-size: var(--site-text-base);
  line-height: var(--site-leading-body);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--site-green);
}

.mk-body ::selection {
  background: var(--site-lime);
  color: var(--site-lime-ink);
}

/* Nav: wordmark, the served site links, then Sign in and the one call to
   action. Below the desktop width the links fold into a native <details>, so
   the phone menu opens with no script at all. */
.mk-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr) auto minmax(var(--space-0), 1fr);
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--site-nav-block);
  padding-inline: max(var(--site-pad), calc((100% - var(--site-wrap)) / 2 + var(--site-pad)));
  color: var(--site-ink);
}

.mk-brand {
  justify-self: start;
  gap: var(--space-2);
  color: var(--site-ink);
  font-size: var(--site-text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mk-brand:hover {
  color: var(--site-ink);
}

.mk-mark {
  inline-size: var(--site-mark);
  block-size: var(--site-mark);
}

.mk-nav-links {
  display: flex;
  gap: var(--site-nav-gap);
}

.mk-nav-links a,
.mk-signin {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-control);
  color: var(--site-ink-soft);
  font-size: var(--site-text-nav);
  text-decoration: none;
}

.mk-nav-links a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--size-hairline);
  text-underline-offset: var(--space-1);
}

.mk-nav-links a:hover {
  color: var(--site-ink);
  text-decoration-color: var(--site-ink);
}

.mk-signin:hover {
  color: var(--site-ink);
  text-decoration: underline;
}

.mk-nav-end {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: var(--space-4);
}

.mk-nav-cta,
.mk-menu summary {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--site-control);
  padding-inline: var(--space-4);
  border: var(--size-hairline) solid var(--site-ink);
  border-radius: var(--site-radius);
  color: var(--site-ink);
  font-size: var(--site-text-nav);
  text-decoration: none;
  white-space: nowrap;
}

.mk-nav-cta:hover,
.mk-menu summary:hover {
  background: color-mix(in srgb, var(--site-ink) 7%, transparent);
}

.mk-nav-cta:active,
.mk-menu summary:active {
  background: color-mix(in srgb, var(--site-ink) 14%, transparent);
}

.mk-menu[open] summary {
  background: var(--site-ink);
  color: var(--site-on-ink);
}

.mk-menu {
  display: none;
}

.mk-menu summary {
  justify-content: center;
  min-block-size: var(--size-control);
  min-inline-size: var(--size-control);
  cursor: pointer;
  list-style: none;
}

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

.mk-menu-panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: var(--site-pad);
  z-index: 30;
  display: grid;
  padding: var(--space-2);
  border: var(--size-hairline) solid var(--site-rule-strong);
  background: var(--site-paper);
}

/* A closed <details> still lays out its absolute panel off the inline end. */
.mk-menu:not([open]) .mk-menu-panel {
  display: none;
}

.mk-menu-panel a {
  padding: var(--space-3) var(--space-4);
  color: var(--site-ink);
  font-size: var(--site-text-md);
  text-decoration: none;
}

.mk-menu-panel a + a {
  border-block-start: var(--size-hairline) solid var(--site-rule);
}

.mk-menu-panel a:hover {
  background: color-mix(in srgb, var(--site-ink) 7%, transparent);
}

.mk-main {
  inline-size: min(100%, var(--site-wrap));
  margin-inline: auto;
  padding-block: var(--space-16) var(--space-20);
  padding-inline: var(--site-pad);
}

/* The G4-T18a hero, carried in the site tokens until T-SITE-B1b ports B's. */
.mk-hero {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1.15fr) minmax(var(--space-0), 0.85fr);
  align-items: center;
  gap: var(--space-16);
}

.mk-hero-copy h1 {
  max-inline-size: 16ch;
  margin: var(--space-0);
  color: var(--site-ink);
  font-family: var(--site-font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.mk-subhead {
  max-inline-size: var(--size-copy-compact);
  margin-block: var(--space-6) var(--space-8);
  color: var(--site-ink-soft);
  font-size: var(--site-text-lg);
  text-wrap: pretty;
}

.mk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-0);
}

/* The receipt: a slip with a head bar, three evidence rows and a stamp. */
.mk-receipt {
  position: relative;
  display: grid;
  gap: var(--space-4);
  inline-size: min(100%, var(--size-detail-panel));
  margin-inline: auto;
  border: var(--size-hairline) solid var(--site-rule-strong);
  border-radius: var(--site-radius);
  background: var(--site-paper);
  padding: var(--space-8);
}

.mk-receipt-head {
  display: block;
  inline-size: 40%;
  block-size: var(--space-3);
  background: var(--site-ink);
}

.mk-receipt-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: var(--size-hairline) dashed var(--site-rule-strong);
}

.mk-receipt-row i {
  flex: none;
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
  border: var(--size-hairline) solid var(--site-rule-strong);
  background: var(--site-page);
}

.mk-receipt-row b {
  display: block;
  inline-size: 100%;
  block-size: var(--space-2);
  background: var(--site-page-2);
}

.mk-receipt-row:nth-of-type(3) b {
  inline-size: 72%;
}

.mk-receipt-row:nth-of-type(4) b {
  inline-size: 54%;
}

.mk-receipt-stamp {
  display: grid;
  place-items: center;
  justify-self: end;
  inline-size: calc(var(--size-icon) * 2.4);
  block-size: calc(var(--size-icon) * 2.4);
  border: calc(var(--size-hairline) * 2) solid var(--site-green);
  border-radius: var(--site-radius-pill);
  background: color-mix(in srgb, var(--site-green) 10%, var(--site-paper));
  color: var(--site-green);
  rotate: -8deg;
}

.mk-receipt-stamp svg {
  inline-size: var(--size-icon);
  block-size: var(--size-icon);
}

/* Proof: numbered by CSS so the numerals are never text nodes. */
.mk-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(var(--space-0), 1fr));
  gap: var(--space-6);
  margin-block: var(--space-20) var(--space-0);
  padding: var(--space-0);
  list-style: none;
  counter-reset: mk-proof;
}

.mk-proof li {
  counter-increment: mk-proof;
  padding-block-start: var(--space-4);
  border-block-start: var(--size-hairline) solid var(--site-rule-strong);
  color: var(--site-ink-soft);
  font-size: var(--site-text-sm);
  text-wrap: pretty;
}

.mk-proof li::before {
  content: counter(mk-proof, decimal-leading-zero);
  content: counter(mk-proof, decimal-leading-zero) / "";
  display: block;
  margin-block-end: var(--space-2);
  color: var(--site-green);
  font-family: var(--site-font-data);
  font-size: var(--site-text-xs);
  letter-spacing: 0.08em;
}

/* Google data: the owner-approved declaration Google's data-access review reads,
   set as one of B's plain-terms rows: the serif heading against the copy. */
.mk-google {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr) minmax(var(--space-0), 1.15fr);
  gap: var(--space-6) var(--space-16);
  align-items: start;
  margin-block: var(--space-24) var(--space-0);
  padding-block-start: var(--space-6);
  border-block-start: var(--size-hairline) solid var(--site-rule-strong);
}

.mk-google h2 {
  margin: var(--space-0);
  color: var(--site-ink);
  font-family: var(--site-font-display);
  font-size: var(--site-text-xl);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: var(--site-leading-heading);
  text-wrap: balance;
}

.mk-google-copy {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}

.mk-google-copy p {
  max-inline-size: var(--size-copy-compact);
  margin: var(--space-0);
  color: var(--site-ink-soft);
  font-size: var(--site-text-lg);
  text-wrap: pretty;
}

.mk-google-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-control);
  color: var(--site-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--site-rule-strong);
  text-underline-offset: 0.22em;
}

.mk-google-link:hover {
  text-decoration-color: currentcolor;
}

.mk-locales {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.mk-locales a {
  color: var(--site-ink-soft);
  font-size: var(--site-text-nav);
  text-decoration: none;
}

.mk-locales a[aria-current="true"] {
  color: var(--site-ink);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

/* Footer: B's two thin rows, wordmark and destinations over tagline and legal. */
.mk-footer {
  border-block-start: var(--size-hairline) solid var(--site-rule-strong);
  color: var(--site-ink-soft);
  font-size: var(--site-text-sm);
}

.mk-footer-wrap {
  inline-size: min(100%, var(--site-wrap));
  margin-inline: auto;
  padding-block: var(--space-5) var(--space-6);
  padding-inline: var(--site-pad);
}

.mk-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--site-nav-gap);
}

.mk-foot-row + .mk-foot-row {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: var(--size-hairline) solid var(--site-rule);
  color: var(--site-ink-faint);
}

.mk-footer .mk-brand {
  font-size: var(--site-text-base);
}

.mk-footer .mk-mark {
  inline-size: var(--site-mark-small);
  block-size: var(--site-mark-small);
}

.mk-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
}

.mk-footer nav a {
  padding-block: var(--space-3);
  color: inherit;
  text-decoration: none;
}

.mk-footer nav a:hover {
  text-decoration: underline;
}

.mk-tagline {
  margin: var(--space-0);
  font-family: var(--site-font-display);
  font-size: var(--site-text-md);
}

.mk-body .skip-link {
  border-radius: var(--site-radius);
  background: var(--site-ink);
  color: var(--site-on-ink);
}

.mk-body a:focus-visible,
.mk-body pre:focus-visible,
.mk-body summary:focus-visible {
  outline: calc(var(--size-hairline) * 2) solid var(--site-ink);
  outline-offset: var(--space-1);
}

/* The agent guide (G4-T18h): a reference sheet. The three command slips lead,
   ruled paper with the command set in mono; scopes and the tool roster follow
   as hairline-ruled reference. The metered tag is the one accent. */
.mk-guide {
  display: grid;
  gap: var(--space-20);
}

.mk-guide-head h1 {
  max-inline-size: 18ch;
  margin: var(--space-0);
  color: var(--site-ink);
  font-family: var(--site-font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.mk-guide-section {
  display: grid;
  gap: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: var(--size-hairline) solid var(--site-rule-strong);
}

.mk-guide-section h2 {
  margin: var(--space-0);
  color: var(--site-ink);
  font-family: var(--site-font-display);
  font-size: var(--site-text-xl);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: var(--site-leading-heading);
}

.mk-guide-note {
  max-inline-size: var(--size-copy);
  margin: var(--space-0);
  color: var(--site-ink-soft);
  text-wrap: pretty;
}

/* Each slip is a row: what it is on the left, the command to paste on the
   right, wide enough that the command reads in full. */
.mk-slips {
  display: grid;
  gap: var(--space-4);
}

.mk-slip {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr) minmax(var(--space-0), 2.2fr);
  gap: var(--space-4) var(--space-8);
  align-items: start;
  padding: var(--space-6);
  border: var(--size-hairline) solid var(--site-rule-strong);
  background: var(--site-paper);
}

.mk-slip-copy,
.mk-slip-run {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  min-inline-size: var(--space-0);
}

.mk-slip-run {
  justify-items: stretch;
}

.mk-slip-link {
  justify-self: start;
}

.mk-slip h3,
.mk-domain h3 {
  margin: var(--space-0);
  color: var(--site-ink);
  font-size: var(--site-text-md);
  font-weight: 600;
}

.mk-slip p {
  margin: var(--space-0);
  color: var(--site-ink-soft);
  font-size: var(--site-text-sm);
  text-wrap: pretty;
}

/* A command wraps inside its block so it reads in full on a phone; anything
   unbreakable still scrolls inside the block, never the page. */
.mk-command {
  margin: var(--space-0);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  overflow-wrap: anywhere;
  border: var(--size-hairline) solid var(--site-rule);
  background: var(--site-page);
  color: var(--site-ink);
  font-family: var(--site-font-data);
  font-size: var(--site-text-xs);
  line-height: var(--site-leading-body);
  white-space: pre-wrap;
}

.mk-command code {
  font: inherit;
}

.mk-slip-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-control);
  color: var(--site-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--site-rule-strong);
  text-underline-offset: 0.22em;
}

.mk-slip-link:hover {
  text-decoration-color: currentcolor;
}

.mk-demo-tools,
.mk-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.mk-demo-tools code,
.mk-tools code {
  font-family: var(--site-font-data);
  font-size: var(--site-text-xs);
}

.mk-scopes li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

.mk-count {
  color: var(--site-ink-soft);
  font-family: var(--site-font-data);
  font-size: var(--site-text-sm);
  font-variant-numeric: tabular-nums;
}

.mk-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: var(--size-hairline) solid var(--site-rule-strong);
  color: var(--site-ink);
  font-family: var(--site-font-data);
  font-size: var(--site-text-xs);
}

.mk-effect-metered {
  border-color: var(--site-lime);
  background: var(--site-lime);
  color: var(--site-lime-ink);
}

.mk-effect-destructive {
  color: var(--site-red);
}

.mk-domain {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.mk-tools {
  inline-size: 100%;
  border-collapse: collapse;
}

.mk-tools th,
.mk-tools td {
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-0);
  border-block-end: var(--size-hairline) solid var(--site-rule);
  text-align: start;
  vertical-align: baseline;
}

.mk-tools thead th {
  color: var(--site-ink-faint);
  font-size: var(--site-text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mk-tools tbody th {
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* A modifier's scope depends on the operation it quotes: one line per operation. */
.mk-ops {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.mk-ops li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.mk-tool-note {
  color: var(--site-ink-soft);
  font-size: var(--site-text-sm);
}

@media (max-width: 75rem) {
  .mk-header {
    grid-template-columns: minmax(var(--space-0), 1fr) auto;
  }

  .mk-nav-links {
    display: none;
  }

  .mk-menu {
    display: block;
  }

  .mk-nav-end {
    flex-wrap: wrap;
    justify-content: end;
  }
}

@media (max-width: 64rem) {
  .mk-proof {
    grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  }
}

@media (max-width: 48rem) {
  .mk-main {
    padding-block: var(--space-10) var(--space-16);
  }

  .mk-hero {
    grid-template-columns: minmax(var(--space-0), 1fr);
    gap: var(--space-10);
  }

  .mk-hero-copy h1 {
    font-size: var(--text-3xl);
  }

  .mk-proof {
    grid-template-columns: minmax(var(--space-0), 1fr);
    margin-block-start: var(--space-12);
  }

  .mk-google {
    grid-template-columns: minmax(var(--space-0), 1fr);
    margin-block-start: var(--space-16);
  }

  .mk-actions {
    flex-direction: column;
  }

  .mk-actions .button {
    justify-content: center;
  }
}

@media (max-width: 64rem) {
  .mk-slip {
    grid-template-columns: minmax(var(--space-0), 1fr);
  }
}

@media (max-width: 48rem) {
  .mk-guide {
    gap: var(--space-16);
  }

  .mk-guide-head h1 {
    font-size: var(--text-3xl);
  }

  /* A tool row stacks: the name leads, then labelled tags beneath it. */
  .mk-tools thead {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .mk-tools tr {
    display: grid;
    grid-template-columns: repeat(2, auto) minmax(var(--space-0), 1fr);
    justify-content: start;
    gap: var(--space-1) var(--space-4);
    padding-block: var(--space-3);
    border-block-end: var(--size-hairline) solid var(--site-rule);
  }

  .mk-tools th,
  .mk-tools td {
    display: block;
    padding: var(--space-0);
    border-block-end: 0;
  }

  .mk-tools tbody th {
    grid-column: 1 / -1;
  }

  .mk-tools td::before {
    content: attr(data-label) " ";
    color: var(--site-ink-faint);
    font-size: var(--site-text-xs);
  }

  .mk-tool-note:empty {
    display: none;
  }

  .mk-tool-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 35rem) {
  .mk-signin,
  .mk-nav-cta {
    display: none;
  }
}

/* /coming-soon (G4-T18c2): the company pages' ruled rows, each heading over an
   unfilled form stamp, and the lines as an open-box list.  The changelog's
   filled square means shipped; the open square here means planned, never
   done.  A document: no motion. */
.mk-soon-head {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}

.mk-soon-stamp {
  margin: var(--space-0);
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border: var(--size-hairline) dashed var(--site-rule-strong);
  color: var(--site-ink-faint);
  font-family: var(--site-font-data);
  font-size: var(--site-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mk-soon-list {
  display: grid;
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.mk-soon-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-inline-size: var(--size-copy-compact);
  padding-block: var(--space-3);
  border-block-start: var(--size-hairline) dashed var(--site-rule);
  color: var(--site-ink-soft);
  font-size: var(--site-text-md);
  text-wrap: pretty;
}

.mk-soon-list li:first-child {
  padding-block-start: var(--space-0);
  border-block-start: none;
}

.mk-soon-list li::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  margin-block-start: calc((var(--site-leading-body) * 1em - var(--space-2)) / 2);
  border: var(--size-hairline) solid var(--site-green);
}

@media (prefers-reduced-motion: no-preference) {
  .mk-receipt-stamp {
    animation: mk-stamp var(--duration-slow) var(--ease-out) both;
    animation-delay: var(--duration-base);
  }

  @keyframes mk-stamp {
    from {
      opacity: 0;
      scale: 1.6;
    }

    to {
      opacity: 1;
      scale: 1;
    }
  }
}

/* G4-T18c: ruled evidence lines and a readable rules sheet, no animated data. */
.mk-reference-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.mk-reference-links a { display: inline-flex; align-items: center; min-block-size: var(--site-control); }
.mk-capabilities { list-style: none; padding: var(--space-0); margin: var(--space-0); }
.mk-capabilities li { padding-block: var(--space-5); border-block-end: var(--size-hairline) solid var(--site-rule); }
.mk-capabilities p { margin: var(--space-0); max-inline-size: var(--size-copy); overflow-wrap: anywhere; }
.mk-reference-source { color: var(--site-ink-faint); font-size: var(--site-text-sm); padding-block-start: var(--space-2); }
.mk-reference-source [data-kind] { font-family: var(--site-font-data); }
.mk-method-rules { margin: var(--space-0); max-inline-size: var(--size-copy); }
.mk-method-rules div { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-block-end: var(--size-hairline) solid var(--site-rule); }
.mk-method-rules dt { min-inline-size: var(--space-0); overflow-wrap: anywhere; }
.mk-method-rules dd { margin: var(--space-0); color: var(--site-ink); font-variant-numeric: tabular-nums; flex-shrink: 0; }