/* Measure — base: tokens, fonts, reset, app frame, shared components.
   Tokens from Paula's tokens.css (Paper file "Measure"); light is canonical,
   dark swaps values. Page-specific styles live in the other css/ files. */

@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --color-ground: #F7F4FD;
  --color-wash: #EEE8FA;
  --color-rule: #E0D7F2;
  --color-edge: #8A7BAD;
  --color-ink-2: #594A78;
  --color-ink: #1C1330;
  --color-human: #6B3FD8;
  --color-on-human: #FFFFFF;
  --color-agent: #A65B00;
  --color-bot: #8E80AE;
  --color-danger: #B42318;
  --color-code: #170F26;
  --color-code-text: #F3EEFC;
  --shadow-card: 0 1px 2px #1C13300F, 0 4px 12px #6B3FD814;
  --shadow-pill: 0 1px 2px #1C133014;

  --font-sans: "Instrument Sans", system-ui, sans-serif;
  --font-num: "Instrument Sans", system-ui, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --text-xs: 13px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px;
  --text-xl: 28px; --text-2xl: 40px; --text-num: 48px;
  --leading-sm: 20px; --leading-base: 24px; --leading-lg: 28px; --leading-xl: 34px; --leading-2xl: 44px;
  --tracking-tight: -0.03em; --tracking-caps: 0.08em;
  --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px;
  --spacing-6: 24px; --spacing-8: 32px; --spacing-12: 48px; --spacing-tap: 44px;
  --container-rail: 264px; --container-content: 1104px;
  --radius-sm: 4px; --radius-md: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-ground: #170F26; --color-wash: #21173A; --color-rule: #352853; --color-edge: #7F6FA8;
    --color-ink-2: #B9ADD6; --color-ink: #F3EEFC; --color-human: #A98BFF; --color-on-human: #170F26;
    --color-agent: #F2B33D; --color-bot: #8F83AB; --color-danger: #FF8A7A;
    --color-code: #0B0714; --color-code-text: #F3EEFC;
    /* No drop shadows in dark: cards and pills get borders instead. */
    --shadow-card: none; --shadow-pill: none;
  }
}
:root[data-theme="dark"] {
  --color-ground: #170F26; --color-wash: #21173A; --color-rule: #352853; --color-edge: #7F6FA8;
  --color-ink-2: #B9ADD6; --color-ink: #F3EEFC; --color-human: #A98BFF; --color-on-human: #170F26;
  --color-agent: #F2B33D; --color-bot: #8F83AB; --color-danger: #FF8A7A;
  --color-code: #0B0714; --color-code-text: #F3EEFC;
  --shadow-card: none; --shadow-pill: none;
}

/* ─── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-ground); color: var(--color-ink);
  font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: anywhere;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--color-human); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.code { font-family: var(--font-code); }
.muted { color: var(--color-ink-2); }
.balance { text-wrap: balance; }

/* ─── Wordmark ──────────────────────────────────────────────────────── */
.wordmark { font-size: 24px; font-weight: 700; letter-spacing: -0.04em; line-height: 28px; text-decoration: none; color: var(--color-ink); }

/* ─── Buttons and links ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: var(--text-sm); font-weight: 600; line-height: 20px; text-decoration: none; cursor: pointer;
  background: var(--color-human); color: var(--color-on-human);
}
.btn:hover { filter: brightness(1.06); }
.btn-lg { min-height: 52px; font-size: var(--text-base); line-height: 24px; width: 100%; }
.btn-ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn-ghost:hover { background: var(--color-wash); filter: none; }
.btn-danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--color-danger) 8%, transparent); filter: none; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: var(--text-xs); }
.link { color: var(--color-human); font-weight: 600; font-size: var(--text-sm); line-height: 20px; text-decoration: underline 1px; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.link-quiet { color: var(--color-ink-2); text-decoration: underline 1px; text-underline-offset: 2px; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; }

/* ─── Forms ─────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .label { font-size: var(--text-sm); font-weight: 600; line-height: 20px; color: var(--color-ink); }
.input {
  height: 52px; padding: 0 14px; width: 100%; border: 1px solid var(--color-edge); border-radius: var(--radius-md);
  background: var(--color-ground); color: var(--color-ink); font-size: var(--text-base); line-height: 24px;
}
.input::placeholder { color: var(--color-ink-2); opacity: 1; }
.input:focus { outline: 2px solid var(--color-human); outline-offset: 0; border-color: var(--color-human); }
.hint { font-size: var(--text-xs); line-height: 18px; color: var(--color-ink-2); }
.error { font-size: var(--text-sm); line-height: 20px; color: var(--color-danger); }
.form-error { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-danger); color: var(--color-danger); font-size: var(--text-sm); line-height: 20px; }

/* ─── Split bar (agents · humans · bots) ───────────────────────────────
   Square inner corners: only the outer ends are rounded. */
.split { display: flex; gap: 2px; height: 12px; border-radius: 3px; overflow: clip; }
.split > span { display: block; min-width: 0; }
.split .s-agent { background: var(--color-agent); }
.split .s-human { background: var(--color-human); }
.split .s-bot { background: var(--color-bot); }
.split-thin { height: 4px; gap: 1px; border-radius: 2px; }
.split-empty { background: var(--color-rule); }
.swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.swatch-agent { background: var(--color-agent); }
.swatch-human { background: var(--color-human); }
.swatch-bot { background: var(--color-bot); }

/* Progress-style meter (top agents, agent share). */
.meter { height: 6px; border-radius: 3px; background: var(--color-wash); overflow: clip; }
.meter > span { display: block; height: 6px; border-radius: 3px; background: var(--color-agent); }
.meter-human > span { background: var(--color-human); }

/* ─── Code ──────────────────────────────────────────────────────────── */
.codeblock {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--color-ink); color: var(--color-ground); font-family: var(--font-code); font-size: var(--text-xs); line-height: 20px;
}
.codeblock code, .codeblock pre { flex: 1; min-width: 0; margin: 0; white-space: pre-wrap; word-break: break-all; font: inherit; }
.codeblock .btn { flex-shrink: 0; background: color-mix(in srgb, var(--color-ground) 14%, transparent); color: var(--color-ground); min-height: 36px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .codeblock { background: var(--color-code); color: var(--color-code-text); border: 1px solid var(--color-rule); }
  :root:not([data-theme="light"]) .codeblock .btn { color: var(--color-code-text); }
}
:root[data-theme="dark"] .codeblock { background: var(--color-code); color: var(--color-code-text); border: 1px solid var(--color-rule); }
code.inline { font-family: var(--font-code); font-size: 0.92em; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--color-wash); }

/* ─── Notices ───────────────────────────────────────────────────────── */
.notice { padding: 12px 16px; border-radius: var(--radius-md); background: var(--color-wash); border: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 20px; }
.banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--color-agent); background: color-mix(in srgb, var(--color-agent) 10%, transparent); font-size: var(--text-sm); line-height: 20px; }
.pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; line-height: 20px; background: color-mix(in srgb, var(--color-agent) 16%, transparent); color: var(--color-ink); white-space: nowrap; }
.pill-warn { background: color-mix(in srgb, var(--color-danger) 14%, transparent); }
.caps { font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-caps); line-height: 16px; text-transform: uppercase; color: var(--color-ink-2); }

/* ─── App frame: rail + main ────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }
.rail {
  width: var(--container-rail); flex-shrink: 0; display: flex; flex-direction: column; gap: 20px;
  padding: 24px 16px 20px; background: var(--color-wash); border-right: 1px solid var(--color-rule);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.rail-brand { display: flex; align-items: center; height: 36px; padding: 0 8px; }
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 6px; }
.rail-sites { display: flex; flex-direction: column; gap: 4px; }
.rail-site {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; text-decoration: none;
  border: 1px solid transparent;
}
.rail-site:hover { background: color-mix(in srgb, var(--color-ground) 60%, transparent); }
.rail-site[aria-current="page"] { background: var(--color-ground); border-color: var(--color-rule); box-shadow: var(--shadow-card); }
.rail-initial {
  width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--color-rule); background: var(--color-ground);
  font-size: var(--text-sm); font-weight: 700; line-height: 16px; color: var(--color-ink-2);
}
.rail-site[aria-current="page"] .rail-initial { background: var(--color-human); border-color: var(--color-human); color: var(--color-on-human); }
.rail-site-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rail-site-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rail-site-name { font-size: var(--text-sm); font-weight: 500; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-site[aria-current="page"] .rail-site-name { font-weight: 600; }
.rail-site-count { font-size: 12px; line-height: 18px; color: var(--color-ink-2); flex-shrink: 0; }
.rail-site[aria-current="page"] .rail-site-count { color: var(--color-ink); font-weight: 600; }
.rail-add { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 10px; text-decoration: none; color: var(--color-human); font-size: var(--text-sm); font-weight: 600; border-radius: 10px; }
.rail-add[aria-current="page"] { background: var(--color-ground); }
.rail-add-icon { width: 32px; height: 32px; border: 1.5px dashed var(--color-edge); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rail-nav { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--color-rule); display: flex; flex-direction: column; gap: 2px; }
.rail-link { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 8px; text-decoration: none; font-size: var(--text-sm); font-weight: 500; line-height: 20px; }
.rail-link:hover { background: color-mix(in srgb, var(--color-ground) 60%, transparent); }
.rail-link[aria-current="page"] { background: var(--color-ground); box-shadow: var(--shadow-pill); }
.rail-link .pill { margin-left: auto; }
.rail-me { display: flex; align-items: center; gap: 10px; padding: 12px 10px 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-ink); color: var(--color-ground); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.rail-me-body { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 18px; }
.rail-me-email { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-me form { margin: 0; }
.rail-me .linkish { color: var(--color-ink-2); text-decoration: underline 1px; font-size: 13px; line-height: 18px; text-align: left; }

.main { flex: 1; min-width: 0; padding: 32px 48px 48px; display: flex; flex-direction: column; gap: 40px; }
.main-narrow { max-width: 860px; }
.page-head { display: flex; flex-direction: column; gap: 6px; }
.page-title { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: var(--leading-2xl); text-wrap: balance; }
.page-sub { font-size: var(--text-base); line-height: 24px; color: var(--color-ink-2); }
.crumbs { display: flex; gap: 8px; font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }
.crumbs a { color: var(--color-ink-2); }

/* Section with an ink rule under its heading. */
.sect-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-ink); }
.sect-title { font-size: var(--text-lg); font-weight: 600; line-height: 28px; letter-spacing: -0.01em; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 20px; }
.card { background: var(--color-ground); border: 1px solid var(--color-rule); border-radius: 12px; padding: 24px; }
.panel { background: var(--color-wash); border: 1px solid var(--color-rule); border-radius: 12px; padding: 24px; }

/* Mobile header shown instead of the rail. */
.topbar { display: none; }
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .rail { display: none; }
  .topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
    background: var(--color-wash); border-bottom: 1px solid var(--color-rule); position: sticky; top: 0; z-index: 5;
  }
  .topbar details { position: relative; }
  .topbar summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 600; }
  .topbar summary::-webkit-details-marker { display: none; }
  .topbar .menu { position: absolute; right: 0; top: 48px; width: min(320px, calc(100vw - 32px)); padding: 12px; border-radius: 12px; background: var(--color-ground); border: 1px solid var(--color-rule); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 4px; }
  .main { padding: 24px 16px 40px; gap: 32px; }
  .page-title { font-size: var(--text-xl); line-height: var(--leading-xl); }
}
/* Measure — dashboard (core/site-dashboard, -empty, all-agents). */

.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dash-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.now { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }
.now-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-human); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-human) 25%, transparent); flex-shrink: 0; }
.dash-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.tabs { display: flex; align-items: center; padding: 3px; border-radius: var(--radius-md); background: var(--color-wash); border: 1px solid var(--color-rule); }
.tab { display: flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 6px; font-size: 13px; line-height: 20px; color: var(--color-ink-2); text-decoration: none; }
.tab[aria-current="page"] { background: var(--color-ground); color: var(--color-ink); font-weight: 600; box-shadow: var(--shadow-pill); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tab[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--color-rule); } }
:root[data-theme="dark"] .tab[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--color-rule); }

.stats { display: flex; flex-direction: column; gap: 20px; }
.stat-row { display: flex; align-items: flex-end; gap: 56px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-label { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }
.stat-num { font-size: var(--text-num); font-weight: 600; letter-spacing: -0.02em; line-height: 52px; }
.stat-sub { font-size: 13px; line-height: 18px; color: var(--color-ink-2); }
.stat-divider { align-self: stretch; width: 1px; background: var(--color-rule); }

.sect-head-plain { border-bottom: 0; padding-bottom: 0; }
.traffic { display: flex; flex-direction: column; gap: 16px; }
.chart { margin: 0; display: flex; gap: 12px; }
.chart-y { width: 36px; flex-shrink: 0; height: 288px; display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 12px; line-height: 16px; color: var(--color-ink-2); margin-top: -8px; margin-bottom: 8px; }
.chart-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.chart-plot {
  height: 288px; display: flex; align-items: flex-end; gap: 4px;
  border-bottom: 1px solid var(--color-rule);
  background: linear-gradient(var(--color-rule) 1px, transparent 1px) 0 0 / 100% 144px;
}
.col { flex: 1 1 0; min-width: 1px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
.seg { display: block; flex-shrink: 0; }
.seg-bot { background: var(--color-bot); border-radius: 2px 2px 0 0; }
.seg-human { background: var(--color-human); }
.seg-agent { background: var(--color-agent); }
.chart-x { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--color-ink-2); }

.grid-2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.grid-2 > section, .grid-3 > section { min-width: 0; }

.bar-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--color-rule); }
.bar-row-top { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-sm); line-height: 20px; }
.bar-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pages-cols { display: flex; gap: 16px; }
.col-views { width: 88px; text-align: right; flex-shrink: 0; }
.col-share { width: 136px; flex-shrink: 0; }
table.pages, .live-table { table-layout: fixed; }
table.pages td, .live-table td { overflow-wrap: normal; white-space: nowrap; }
table.pages td { height: 52px; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 20px; padding: 0; }
table.pages td + td { padding-left: 16px; }
.page-path { overflow: hidden; text-overflow: ellipsis; }
.share { display: flex; align-items: center; gap: 8px; }
.share .meter { flex: 1; }
.share .num { width: 34px; font-size: 13px; line-height: 18px; }

.more { margin-top: 4px; }
.more summary { cursor: pointer; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more-title { margin-top: 16px; padding-bottom: 4px; }

.live-title { display: flex; align-items: center; gap: 10px; }
.live-badge { padding: 2px 8px; border-radius: 10px; background: var(--color-human); color: var(--color-on-human); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; line-height: 16px; }
.live-table td { height: 44px; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 20px; padding: 0 16px 0 0; }
.live-time { width: 88px; font-size: 13px; }
.live-class { width: 110px; }
.live-class .swatch { width: 8px; height: 8px; margin-right: 8px; vertical-align: 1px; }
.live-path { overflow: hidden; text-overflow: ellipsis; }
.live-who { overflow: hidden; text-overflow: ellipsis; }
.live-who { width: 220px; }
.grow { flex: 1; }

.empty { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.empty-title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; line-height: var(--leading-xl); }
.empty-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

@media (max-width: 1200px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .stat-row { gap: 24px 32px; }
  .stat-num { font-size: 36px; line-height: 40px; }
  .stat-divider { display: none; }
  .grid-3 { grid-template-columns: 1fr; gap: 32px; }
  .chart-plot, .chart-y { height: 200px; }
  .chart-plot { background-size: 100% 100px; gap: 2px; }
  .live-who { display: none; }
  .col-share { width: 72px; }
  .tabs { width: 100%; }
  .tab { flex: 1; justify-content: center; padding: 0 8px; }
}
/* Measure — auth pages: split-panel shell (sign in, sign up, verify, claim)
   and onboarding. Built on base.css tokens and components. */

/* ─── Shell: wash brand panel + content ─────────────────────────────── */
.auth { display: flex; min-height: 100vh; min-height: 100dvh; }
.auth-brand {
  width: clamp(360px, 42vw, 600px); flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 40px clamp(32px, 4vw, 56px) 48px; background: var(--color-wash); border-right: 1px solid var(--color-rule);
  position: sticky; top: 0; height: 100vh; height: 100dvh;
}
.auth-wordmark { display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; margin: -4px 0; }
.auth-bars { display: flex; align-items: flex-end; gap: 20px; height: 360px; flex-shrink: 1; min-height: 200px; }
.auth-bar { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; height: 100%; min-width: 0; }
.auth-bar-pct { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: var(--leading-2xl); }
.auth-bar-fill { display: block; border-radius: 10px; flex-shrink: 1; min-height: 24px; }
.auth-bar-agent { background: var(--color-agent); height: 190px; }
.auth-bar-human { background: var(--color-human); height: 256px; }
.auth-bar-bot { background: var(--color-bot); height: 84px; }
.auth-bar-label { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-caps); line-height: 16px; text-transform: uppercase; color: var(--color-ink-2); }
.auth-pitch { display: flex; flex-direction: column; gap: 8px; max-width: 440px; }
.auth-pitch-title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; line-height: var(--leading-xl); }
.auth-pitch-body { color: var(--color-ink-2); }
.auth-mini { display: none; }

.auth-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(32px, 8vw, 120px); }
.auth-stack { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 28px; }

.auth-head { display: flex; flex-direction: column; gap: 10px; }
.auth-title { font-size: var(--text-2xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--leading-2xl); text-wrap: balance; }
.auth-sub { color: var(--color-ink-2); }
.auth-em { color: var(--color-ink); font-weight: 600; }
.auth-kicker { font-size: var(--text-xs); line-height: 18px; color: var(--color-ink-2); }

.auth-form { display: flex; flex-direction: column; gap: 28px; }
.auth-actions { display: flex; flex-direction: column; gap: 20px; }
.auth-fine { font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }
.auth-fine .link-quiet, .auth-sub .link-quiet { color: inherit; }
.auth-price { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-wash); font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }
.auth-price-amt { flex-shrink: 0; font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; line-height: 28px; color: var(--color-ink); }

.auth-inline, .auth-foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }
.auth-foot { padding-top: 20px; border-top: 1px solid var(--color-rule); }
.auth-resend { margin-top: -8px; }

/* One input for the 6-digit code, drawn large and spaced. */
.auth-code { height: 64px; padding: 0 16px; text-align: center; font-size: var(--text-xl); font-weight: 600; line-height: 32px; letter-spacing: 0.5em; text-indent: 0.5em; }
.auth-code::placeholder { letter-spacing: 0.5em; }

/* ─── Claim ─────────────────────────────────────────────────────────── */
.claim-card { background: var(--color-ground); border: 1px solid var(--color-rule); border-radius: 10px; }
.claim-card:not(.claim-move) { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.claim-plan { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.claim-plan-body { display: flex; flex-direction: column; gap: 4px; }
.claim-plan-name { font-size: var(--text-lg); font-weight: 600; line-height: 28px; }
.claim-plan-sub { font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }
.claim-price { display: flex; align-items: baseline; gap: 2px; flex-shrink: 0; }
.claim-price-amt { font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 34px; }
.claim-price-per { font-size: var(--text-xs); line-height: 18px; color: var(--color-ink-2); }
.claim-checks { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 20px; }
.claim-checks li { display: flex; align-items: flex-start; gap: 10px; }
.claim-checks svg { flex-shrink: 0; margin-top: 2px; color: var(--color-human); }

.claim-move { overflow: clip; }
.claim-acct { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.claim-acct-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.claim-acct-name { font-size: var(--text-sm); font-weight: 600; line-height: 20px; }
.claim-acct-meta { font-size: var(--text-xs); line-height: 18px; color: var(--color-ink-2); }
.claim-badge { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: var(--text-xs); font-weight: 700; line-height: 16px; }
.claim-badge-agent { background: color-mix(in srgb, var(--color-agent) 16%, transparent); color: var(--color-ink); }
.claim-badge-you { background: var(--color-human); color: var(--color-on-human); }
.claim-arrow { display: flex; align-items: center; gap: 10px; padding: 8px 20px; background: var(--color-wash); border-block: 1px solid var(--color-rule); font-size: var(--text-xs); line-height: 18px; color: var(--color-ink-2); }
.claim-arrow svg { flex-shrink: 0; color: var(--color-human); }
.claim-attach-actions { gap: 16px; }
.claim-ignore { padding-top: 16px; border-top: 1px solid var(--color-rule); }

.claim-progress { display: flex; flex-direction: column; gap: 10px; }
.claim-progress-bars { display: flex; gap: 3px; height: 6px; }
.claim-progress-bars span { flex: 1; border-radius: 3px; background: var(--color-rule); }
.claim-progress-bars .on { background: var(--color-human); }
.claim-progress-bars .half { background: linear-gradient(90deg, var(--color-human) 55%, var(--color-rule) 55%); }
.claim-steps { border-top: 1px solid var(--color-rule); }
.claim-steps li { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }
.claim-steps li.done, .claim-steps li.now { color: var(--color-ink); }
.claim-steps li.now .claim-step-name { font-weight: 600; }
.claim-steps svg { flex-shrink: 0; color: var(--color-human); }
.claim-step-name { flex: 1; min-width: 0; }
.claim-step-state { font-size: var(--text-xs); color: var(--color-ink-2); }
.claim-dot { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.claim-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--color-edge); }
.now .claim-dot::before { border: 0; background: var(--color-human); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-human) 22%, transparent); }

/* ─── Shell, phone: brand panel becomes a compact header ────────────── */
@media (max-width: 760px) {
  .auth { flex-direction: column; }
  .auth-brand {
    width: auto; height: auto; position: static; gap: 20px; justify-content: flex-start;
    padding: 24px 16px 20px; border-right: 0; border-bottom: 1px solid var(--color-rule);
  }
  .auth-wordmark { font-size: 22px; line-height: 26px; }
  .auth-bars { display: none; }
  .auth-pitch { gap: 10px; max-width: none; }
  .auth-pitch-title { font-size: var(--text-base); line-height: 22px; letter-spacing: 0; }
  .auth-pitch-body { display: none; }
  .auth-mini { display: flex; flex-direction: column; gap: 10px; }
  .auth-mini-split { height: 10px; }
  .auth-mini-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; line-height: 16px; color: var(--color-ink-2); }
  .auth-main { justify-content: flex-start; padding: 32px 16px 40px; }
  .auth-stack { max-width: none; gap: 24px; }
  .auth-head { gap: 8px; }
  .auth-title { font-size: var(--text-xl); line-height: var(--leading-xl); }
  .auth-form { gap: 24px; }
  .auth-foot { padding-top: 16px; }
  .claim-card:not(.claim-move) { padding: 16px; }
  .claim-acct { padding: 14px 16px; }
  .claim-arrow { padding: 8px 16px; }
}

/* ─── Onboarding ────────────────────────────────────────────────────── */
.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; padding: 0 56px; border-bottom: 1px solid var(--color-rule); }
.ob-wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.ob-help { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }
.ob-help-short { display: none; }

.ob { display: flex; align-items: flex-start; gap: clamp(48px, 6.5vw, 96px); padding: 64px 56px 56px clamp(56px, 8.3vw, 120px); }
.ob-info { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; }
.ob-info-head { display: flex; flex-direction: column; gap: 10px; }
.ob-info-title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; line-height: var(--leading-xl); }
.ob-info-sub { color: var(--color-ink-2); }

.ob-step { display: flex; gap: 14px; }
.ob-step:not(:last-child) { padding-bottom: 20px; position: relative; }
.ob-step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 38px; bottom: 6px; width: 2px; background: var(--color-rule); }
.ob-step.is-done:not(:last-child)::after { background: var(--color-human); }
.ob-step-mark {
  width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1.5px solid var(--color-edge); background: var(--color-ground); color: var(--color-ink-2); font-size: 14px; font-weight: 600; line-height: 16px;
}
.is-done .ob-step-mark, .is-now .ob-step-mark { border-color: var(--color-human); background: var(--color-human); color: var(--color-on-human); font-weight: 700; }
.ob-step-body { display: flex; flex-direction: column; gap: 2px; padding-top: 5px; }
.ob-step-name { font-weight: 500; line-height: 22px; color: var(--color-ink-2); }
.is-done .ob-step-name { color: var(--color-ink); }
.is-now .ob-step-name { color: var(--color-ink); font-weight: 600; }
.ob-step-sub { font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }

.ob-points { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 20px; }
.ob-points li { display: flex; gap: 10px; }
.ob-points li::before { content: "·"; color: var(--color-human); font-weight: 700; }

.ob-panel { flex: 0 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.ob-progress { display: none; }
.ob-head { display: flex; flex-direction: column; gap: 8px; }
.ob-kicker { font-size: var(--text-xs); line-height: 18px; color: var(--color-ink-2); }
.ob-title { font-size: var(--text-2xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--leading-2xl); text-wrap: balance; }
.ob-sub { color: var(--color-ink-2); }
.ob-form { display: flex; flex-direction: column; gap: 28px; }
.ob-fields { display: flex; flex-direction: column; gap: 20px; }
.ob-mono { font-variant-numeric: tabular-nums; }
.ob-hint { font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }
.ob-inline { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); margin-top: -8px; }

/* Script block: wash panel with a header bar and Copy. */
.ob-code { background: var(--color-wash); border: 1px solid var(--color-rule); border-radius: 10px; overflow: clip; }
.ob-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 2px 8px 2px 16px; border-bottom: 1px solid var(--color-rule); }
.ob-code-lang { font-family: var(--font-code); font-size: var(--text-xs); line-height: 18px; color: var(--color-ink-2); }
.ob-copy { position: relative; min-height: 44px; padding: 0 12px 0 34px; background: var(--color-ground); border-color: var(--color-edge); }
.ob-copy::before, .ob-copy::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1.5px solid currentColor; }
.ob-copy::before { left: 16px; top: calc(50% - 3px); border-radius: 2px; }
.ob-copy::after { left: 12px; top: calc(50% - 7px); border-right: 0; border-bottom: 0; border-top-left-radius: 2px; }
.ob-code-body { margin: 0; padding: 18px 16px; font-family: var(--font-code); font-size: var(--text-sm); line-height: 22px; white-space: pre-wrap; word-break: break-all; }
.ob-code-body code { font: inherit; }

/* Where to add it: radio segmented control, tip per platform. */
.ob-where { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ob-where legend { padding: 0; margin-bottom: 12px; }
.ob-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--radius-md); border: 1px solid var(--color-rule); background: var(--color-wash); }
.ob-seg label { flex: 1 1 0; min-width: max-content; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border-radius: 6px; font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); cursor: pointer; }
.ob-seg input:checked + label { background: var(--color-ground); color: var(--color-ink); font-weight: 600; box-shadow: var(--shadow-pill); }
.ob-seg input:focus-visible + label { outline: 2px solid var(--color-human); outline-offset: 2px; }
.ob-tip { display: none; color: var(--color-ink-2); }
.ob-where:has(#pf-wp:checked) .ob-tip-wp,
.ob-where:has(#pf-shopify:checked) .ob-tip-shopify,
.ob-where:has(#pf-next:checked) .ob-tip-next,
.ob-where:has(#pf-html:checked) .ob-tip-html { display: block; }

/* Waiting: pulsing listener. */
.ob-listen { display: flex; align-items: center; gap: 20px; padding: 24px; border-radius: 10px; border: 1px solid var(--color-rule); background: var(--color-wash); }
.ob-pulse { width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--color-human) 12%, transparent); }
.ob-pulse > span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--color-human) 22%, transparent); }
.ob-pulse > span > span { width: 16px; height: 16px; border-radius: 50%; background: var(--color-human); }
@media (prefers-reduced-motion: no-preference) {
  .ob-pulse { animation: ob-pulse 2s ease-in-out infinite; }
}
@keyframes ob-pulse { 50% { transform: scale(0.88); } }
.ob-listen-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ob-listen-title { font-weight: 600; }
.ob-listen-meta { font-size: var(--text-xs); line-height: 18px; color: var(--color-ink-2); }

/* Verified: first pageview card. */
.ob-first { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 10px; border: 1px solid var(--color-rule); background: var(--color-ground); }
.ob-first-head { display: flex; align-items: center; gap: 14px; }
.ob-first-check { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-human); color: var(--color-on-human); }
.ob-first-title { font-size: var(--text-base); font-weight: 600; line-height: 24px; }
.ob-first-meta { font-size: var(--text-xs); line-height: 18px; color: var(--color-ink-2); }
.ob-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-top: 16px; border-top: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 20px; }
.ob-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-facts dt { color: var(--color-ink-2); }
.ob-facts dd { margin: 0; display: flex; align-items: center; gap: 6px; }
.ob-facts .swatch { width: 8px; height: 8px; }

@media (max-width: 900px) {
  .ob-top { height: 56px; padding: 0 8px 0 16px; }
  .ob-wordmark { font-size: 20px; line-height: 24px; }
  .ob-help { padding: 0 8px; }
  .ob-help-q, .ob-help-long { display: none; }
  .ob-help-short { display: inline; }
  .ob { display: block; padding: 20px 16px 32px; }
  .ob-info { display: none; }
  .ob-panel { gap: 24px; }
  .ob-progress { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
  .ob-progress-top { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-xs); line-height: 18px; color: var(--color-ink-2); }
  .ob-progress-name { color: var(--color-ink); font-weight: 600; }
  .ob-progress-bars { display: flex; gap: 4px; }
  .ob-progress-bars span { flex: 1; height: 4px; border-radius: 2px; background: var(--color-rule); }
  .ob-progress-bars .on { background: var(--color-human); }
  .ob-kicker { display: none; }
  .ob-title { font-size: var(--text-xl); line-height: var(--leading-xl); }
  .ob-listen { padding: 18px; gap: 16px; }
  .ob-first { padding: 18px; }
}
/* Measure — account pages: AI agents table, add/edit site, API keys, billing, settings. */

/* ─── Page widths and rhythm ────────────────────────────────────────── */
.main-720 { max-width: 720px; }
.main-880 { max-width: 880px; }
.main-add { gap: 32px; }
.main-agents { gap: 28px; }
.page-head-crumbs { gap: 16px; }

.acct-sect { display: flex; flex-direction: column; gap: 20px; }
.acct-sect-tight { gap: 14px; }
.acct-lead { font-size: var(--text-base); line-height: 24px; color: var(--color-ink-2); }
.sect-head-center { align-items: center; flex-wrap: wrap; }

/* ─── Forms ─────────────────────────────────────────────────────────── */
.acct-form { display: flex; flex-direction: column; gap: 20px; }
.acct-form .field { gap: 6px; }
.acct-form .input { height: 44px; padding: 0 12px; }
.add-form { border-radius: 16px; padding: 28px; }
.add-form .input { height: 48px; padding: 0 14px; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.add-form .form-actions { padding-top: 4px; }
.input-readonly { background: var(--color-wash); border-color: var(--color-rule); color: var(--color-ink); cursor: default; }
.input-readonly:focus { border-color: var(--color-human); }

.btn-tall { min-height: 48px; padding: 0 22px; font-size: var(--text-base); line-height: 24px; }
.btn-full { width: 100%; }
.btn-quiet { background: transparent; color: var(--color-ink-2); font-weight: 500; padding: 0 12px; }
.btn-quiet:hover { color: var(--color-ink); background: var(--color-wash); filter: none; }
.btn-danger-solid { background: var(--color-danger); color: var(--color-ground); border-color: var(--color-danger); }

/* ─── Status line (receiving data, signed in) ───────────────────────── */
.acct-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--color-ink-2); }
.acct-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-edge); flex-shrink: 0; }
.acct-status-ok .acct-dot, .acct-signed-in .acct-dot { background: var(--color-human); }
.acct-signed-in { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-radius: 10px; background: var(--color-wash); font-size: var(--text-sm); line-height: 20px; }
.acct-signed-in strong { font-weight: 600; }

/* ─── Code ──────────────────────────────────────────────────────────── */
.codeblock-lg { padding: 8px 8px 8px 20px; border-radius: 12px; font-size: var(--text-sm); line-height: 22px; }
.codeblock-lg .btn { min-height: 44px; padding: 0 18px; background: var(--color-human); color: var(--color-on-human); }
.codeblock-ref { padding: 20px 24px; border-radius: 12px; font-size: var(--text-sm); line-height: 24px; }
.codeblock-ref pre { white-space: pre-wrap; word-break: break-word; }
.ref-c { opacity: 0.7; }

/* Install guides */
.install-guides-title { margin-top: 10px; }
.install-guides { margin: 0; }
.install-guide { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 20px; }
.install-guide dt { font-weight: 600; }
.install-guide dd { margin: 0; color: var(--color-ink-2); }

/* ─── Danger zone ───────────────────────────────────────────────────── */
.danger-zone {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; padding: 24px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent);
}
.dz-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; font-size: var(--text-sm); line-height: 20px; }
.dz-title { font-size: var(--text-lg); font-weight: 600; line-height: 28px; color: var(--color-danger); }
.dz-confirm { flex-shrink: 0; }
.dz-confirm > summary { list-style: none; }
.dz-confirm > summary::-webkit-details-marker { display: none; }
.dz-confirm[open] { flex-basis: 100%; display: flex; flex-direction: column; gap: 16px; }
.dz-confirm[open] > summary { align-self: flex-start; background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
.dz-form { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent); font-size: var(--text-sm); line-height: 20px; }
.dz-form .field { width: 100%; max-width: 420px; gap: 6px; }
.dz-form .input { height: 44px; padding: 0 12px; }

/* ─── Add site: steps ───────────────────────────────────────────────── */
.add-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.add-step { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 18px; color: var(--color-ink-2); }
.add-step-num { font-weight: 600; }
.add-step[aria-current="step"] .add-step-num { color: var(--color-human); }
.add-step-title { font-size: var(--text-sm); font-weight: 600; line-height: 20px; color: var(--color-ink); }

/* ─── AI agents ─────────────────────────────────────────────────────── */
.acct-crumbs { align-items: center; gap: 6px; }
.acct-crumbs a { text-decoration: underline 1px; text-underline-offset: 3px; }
.crumbs-back { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; }
.crumbs-arrow { display: none; }

.agents { display: flex; flex-direction: column; }
.agent-filters { display: flex; gap: 24px; height: 44px; border-bottom: 1px solid var(--color-rule); overflow-x: auto; scrollbar-width: none; }
.agent-filter { display: flex; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; font-size: var(--text-sm); font-weight: 500; line-height: 20px; color: var(--color-ink-2); }
.agent-filter:hover { color: var(--color-ink); }
.agent-filter[aria-current="page"] { color: var(--color-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-human); }
.agent-filter-count { color: var(--color-ink-2); }

.agents-table { margin-top: 0; table-layout: fixed; }
.agents-table th, .agents-table td { padding: 0 16px 0 0; text-align: left; font-size: var(--text-sm); line-height: 20px; font-weight: 400; }
.agents-table th:last-child, .agents-table td:last-child { padding-right: 0; }
.agents-table thead th { height: 36px; border-bottom: 1px solid var(--color-ink); font-size: 13px; line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-2); }
.agents-table tbody tr > * { height: 56px; border-bottom: 1px solid var(--color-rule); }
.agents-table tbody th { font-weight: 600; }
.at-agent { width: 216px; }
.at-op { width: 136px; }
.at-purpose { width: 166px; }
.agents-table .at-req { width: 106px; text-align: right; }
.at-page { overflow: hidden; }
.at-page-path { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-spark { width: 96px; }
.agents-table .at-empty td { height: 56px; }
.agents-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding-top: 6px; font-size: var(--text-sm); line-height: 20px; }

/* ─── API keys ──────────────────────────────────────────────────────── */
.key-reveal { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 12px; background: var(--color-wash); border: 1px solid var(--color-rule); box-shadow: inset 0 3px 0 var(--color-human); }
.key-reveal-title { display: flex; align-items: center; gap: 10px; font-size: var(--text-lg); font-weight: 600; line-height: 28px; }
.key-reveal-row { display: flex; gap: 8px; }
.key-reveal-code { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 48px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-edge); background: var(--color-ground); font-family: var(--font-code); font-size: var(--text-sm); line-height: 20px; word-break: break-all; }
.key-reveal-note { font-size: var(--text-sm); line-height: 20px; }

.keys-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.keys-list { min-width: 0; }
.keys-table th, .keys-table td { padding: 0 16px 0 0; text-align: left; font-size: var(--text-sm); line-height: 20px; font-weight: 400; }
.keys-table th:last-child, .keys-table td:last-child { padding-right: 0; }
.keys-table thead th { height: 40px; border-bottom: 1px solid var(--color-rule); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-2); }
.keys-table tbody tr > * { height: 60px; border-bottom: 1px solid var(--color-rule); }
.keys-table tbody th { font-weight: 600; }
.kt-preview { width: 150px; font-size: 13px; }
.kt-used, .kt-created { width: 116px; }
.kt-created { font-size: 13px; }
.kt-used-label { display: none; }
.kt-act { width: 96px; text-align: right; }
.keys-table .kt-act { text-align: right; }
.btn-revoke { color: var(--color-danger); padding: 0 14px; font-size: var(--text-sm); }
.key-new { display: flex; flex-direction: column; gap: 16px; }
.key-new .field { gap: 6px; }
.key-new .input { height: 44px; padding: 0 12px; }

/* ─── Billing ───────────────────────────────────────────────────────── */
.plan-card { display: flex; gap: 48px; padding: 32px; border-radius: 16px; background: var(--color-wash); border: 1px solid var(--color-rule); }
.plan-center { align-items: center; }
.plan-warn { border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); }
.plan-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.plan-body-tight { gap: 16px; }
.plan-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--text-sm); line-height: 20px; }
.plan-pill { padding: 3px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; line-height: 16px; text-transform: uppercase; background: color-mix(in srgb, var(--color-agent) 18%, transparent); color: var(--color-ink); }
.plan-pill-pro { background: var(--color-human); color: var(--color-on-human); }
.plan-pill-warn { background: color-mix(in srgb, var(--color-danger) 14%, transparent); }
.trial-left { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; font-weight: 600; }
.trial-num { font-size: 72px; letter-spacing: -0.05em; line-height: 72px; }
.trial-label { font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 34px; text-wrap: balance; }
.trial-progress { display: flex; flex-direction: column; gap: 8px; }
.trial-bar { height: 8px; border-radius: 4px; background: var(--color-rule); overflow: clip; }
.trial-bar > span { display: block; height: 100%; background: var(--color-human); }
.trial-dates { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 18px; color: var(--color-ink-2); }
.plan-text { max-width: 520px; font-size: var(--text-base); line-height: 24px; color: var(--color-ink-2); text-wrap: pretty; }
.plan-headline { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 34px; text-wrap: balance; }
.plan-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.plan-facts > div { display: flex; flex-direction: column; gap: 2px; }
.plan-facts dt { font-size: 13px; line-height: 18px; color: var(--color-ink-2); }
.plan-facts dd { margin: 0; font-size: var(--text-base); font-weight: 600; line-height: 24px; }
.plan-side { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-side .hint, .price-action .hint { text-align: center; }
.plan-side form, .price-action form { margin: 0; }
.plan-side .btn-ghost, .price-action .btn-ghost { background: var(--color-ground); border-color: var(--color-edge); }

.price-card { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 24px; border-radius: 12px; background: var(--color-ground); border: 1px solid var(--color-rule); box-shadow: var(--shadow-card); }
.price-head { display: flex; flex-direction: column; gap: 4px; }
.price-name { font-size: var(--text-sm); line-height: 20px; }
.price-line { display: flex; align-items: baseline; gap: 6px; font-size: var(--text-sm); line-height: 20px; }
.price-num { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 44px; }
.price-action { display: flex; flex-direction: column; gap: 10px; }

.plan-included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.plan-included li { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--color-rule); font-size: var(--text-base); line-height: 24px; }
.plan-included svg { flex-shrink: 0; }

/* ─── Narrow layouts ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .keys-grid { grid-template-columns: 1fr; }
  .plan-card { flex-direction: column; align-items: stretch; gap: 28px; }
  .price-card, .plan-side { width: 100%; }
}

@media (max-width: 760px) {
  .main-add, .main-agents { gap: 24px; }
  .field-pair, .add-steps, .plan-included { grid-template-columns: 1fr; }
  .add-steps { gap: 16px; }
  .add-form { padding: 20px 16px; }
  .danger-zone { padding: 20px 16px; }
  .dz-confirm, .dz-confirm > summary { width: 100%; }
  .install-guide { grid-template-columns: 1fr; gap: 2px; }
  .codeblock-lg { flex-direction: column; align-items: stretch; padding: 16px; }
  .codeblock-ref { padding: 16px; font-size: 13px; line-height: 20px; }
  .plan-card { padding: 20px 16px; }
  .trial-num { font-size: 56px; line-height: 56px; }
  .trial-label { font-size: var(--text-lg); line-height: 28px; }
  .plan-headline { font-size: var(--text-lg); line-height: 28px; }
  .key-reveal { padding: 16px; gap: 12px; }
  .key-reveal-title { font-size: var(--text-base); line-height: 24px; }
  .key-reveal-row { flex-direction: column; }

  /* Agents: breadcrumb becomes a back link; rows stack. */
  .crumbs-arrow { display: block; }
  .crumbs-sep { display: none; }
  .crumbs-back { min-height: 44px; }
  .agent-filters { gap: 20px; margin: 0 -16px; padding: 0 16px; }
  .agents-table, .agents-table tbody { display: block; }
  .agents-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .agents-table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name name req" "op purpose purpose"; column-gap: 12px; row-gap: 2px; align-content: center; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--color-rule); }
  .agents-table tbody tr > * { height: auto; border: 0; padding: 0; width: auto; }
  .agents-table tbody .at-agent { grid-area: name; font-size: var(--text-base); line-height: 24px; }
  .agents-table tbody .at-req { grid-area: req; font-size: var(--text-base); line-height: 24px; }
  .agents-table tbody .at-op { grid-area: op; font-size: 13px; line-height: 18px; }
  .agents-table tbody .at-purpose { grid-area: purpose; font-size: 13px; line-height: 18px; color: var(--color-ink-2); }
  .agents-table tbody .at-purpose::before { content: "· "; margin-left: -8px; }
  .agents-table tbody .at-page, .agents-table tbody .at-spark { display: none; }
  .agents-table tbody .at-empty { display: block; }
  .agents-table tbody .at-empty td { display: block; }
  .agents-foot { flex-direction: column; align-items: stretch; text-align: center; }

  /* API keys: rows stack to name / preview · used, with Revoke at the side. */
  .keys-table, .keys-table tbody { display: block; }
  .keys-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .keys-table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name name act" "prev used act"; column-gap: 6px; row-gap: 2px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-rule); }
  .keys-table tbody tr > * { height: auto; border: 0; padding: 0; width: auto; }
  .keys-table .kt-name { grid-area: name; }
  .keys-table .kt-preview { grid-area: prev; font-size: 13px; line-height: 18px; color: var(--color-ink-2); }
  .keys-table .kt-used { grid-area: used; font-size: 13px; line-height: 18px; font-family: var(--font-code); }
  .kt-used-label { display: inline; }
  .kt-used-label::before { content: "· "; }
  .keys-table .kt-created { display: none; }
  .keys-table .kt-act { grid-area: act; padding-left: 6px; }
  .btn-revoke { padding: 0 12px; }
}
/* Measure — marketing pages (home, for agents, pricing, legal) and the error page.
   Frames: Paper "marketing/home", "marketing/for-agents", "account/pricing", "account/legal-privacy".
   1440 is canonical; ≤1100 stacks the two-column sections; ≤640 follows the 375 frames.
   Every class is prefixed mk- because all stylesheets ship as one app.css. */

/* ─── Marketing-only tokens (light; dark below) ──────────────────────── */
.mk {
  --mk-pad: 64px;
  --mk-band-y: 120px;
  --mk-band: #170F26;          /* always-dark band (Paper ground-dark) */
  --mk-card: #21173A;          /* card inside the dark band (Paper wash-dark) */
  --mk-bubble: #6B3FD8;
  --mk-bubble-ink: #FFFFFF;
  --mk-on-agent: #FFFFFF;
  --mk-on-bot: var(--color-ink);
  --mk-mock-us: var(--color-ground);
  --mk-mock-pill: var(--color-wash);
  --mk-shadow-hi: 0 12px 32px #6B3FD81F;
  --mk-shadow-plan: 0 20px 48px #6B3FD81F;
  --mk-shadow-banner: 0 -8px 24px #1C13301A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk {
    --mk-band: var(--color-wash); --mk-card: var(--color-ground);
    --mk-bubble: var(--color-human); --mk-bubble-ink: var(--color-on-human);
    --mk-on-agent: var(--color-on-human); --mk-on-bot: var(--color-on-human);
    --mk-mock-us: var(--color-wash); --mk-mock-pill: var(--color-ground);
    --mk-shadow-hi: none; --mk-shadow-plan: none; --mk-shadow-banner: none;
  }
}
:root[data-theme="dark"] .mk {
  --mk-band: var(--color-wash); --mk-card: var(--color-ground);
  --mk-bubble: var(--color-human); --mk-bubble-ink: var(--color-on-human);
  --mk-on-agent: var(--color-on-human); --mk-on-bot: var(--color-on-human);
  --mk-mock-us: var(--color-wash); --mk-mock-pill: var(--color-ground);
  --mk-shadow-hi: none; --mk-shadow-plan: none; --mk-shadow-banner: none;
}

/* ─── Frame ──────────────────────────────────────────────────────────── */
.mk { overflow-x: clip; }
.mk-wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--mk-pad); }
.mk-main { display: block; }
.mk-skip { position: absolute; left: 16px; top: -100px; z-index: 20; padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-ink); color: var(--color-ground); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.mk-skip:focus { top: 16px; }
.mk-display { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.04em; text-wrap: balance; }
.mk-wordmark { font-size: 26px; line-height: 28px; }

/* ─── Header ─────────────────────────────────────────────────────────── */
.mk-header-ruled { border-bottom: 1px solid var(--color-rule); }
.mk-header-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 80px; }
.mk-nav { display: flex; align-items: center; gap: 8px; }
.mk-nav-link {
  display: inline-flex; align-items: center; height: 44px; padding: 0 14px; text-decoration: none;
  font-size: 15px; font-weight: 500; line-height: 20px; color: var(--color-ink);
}
.mk-nav-link:hover { text-decoration: underline 1px; text-underline-offset: 4px; }
.mk-nav-link[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-ink); }
.mk-nav-quiet { color: var(--color-ink-2); }
.mk-nav-cta { background: var(--color-ink); color: var(--color-ground); font-size: 15px; padding: 0 18px; margin-left: 8px; }
.mk-mnav { display: none; align-items: center; gap: 4px; }
.mk-menu { position: relative; }
.mk-menu summary {
  list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); color: var(--color-ink);
}
.mk-menu summary::-webkit-details-marker { display: none; }
.mk-menu[open] summary { background: var(--color-wash); }
.mk-menu-panel {
  position: absolute; right: 0; top: 52px; z-index: 10; width: min(280px, calc(100vw - 32px)); padding: 8px;
  display: flex; flex-direction: column; gap: 2px; border-radius: 12px;
  background: var(--color-ground); border: 1px solid var(--color-rule); box-shadow: var(--shadow-card);
}
.mk-menu-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius-md); text-decoration: none; font-size: var(--text-base); font-weight: 500; }
.mk-menu-panel a:hover { background: var(--color-wash); }
.mk-menu-panel a[aria-current="page"] { background: var(--color-wash); font-weight: 600; }

/* ─── Footer ─────────────────────────────────────────────────────────── */
.mk-footer { border-top: 1px solid var(--color-rule); }
.mk-footer-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-top: 48px; padding-bottom: 56px; }
.mk-footer-brand { display: flex; flex-direction: column; gap: 10px; }
.mk-footer-note { font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }
.mk-footer-note a { color: inherit; text-underline-offset: 2px; }
.mk-footer-nav { display: flex; flex-wrap: wrap; column-gap: 28px; }
.mk-footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); text-decoration: none; }
.mk-footer-nav a:hover, .mk-footer-nav a[aria-current="page"] { color: var(--color-ink); text-decoration: underline 1px; text-underline-offset: 3px; }

/* ─── Shared type and buttons ────────────────────────────────────────── */
.mk-h-hero { font-size: 92px; line-height: 88px; color: var(--color-ink); }
.mk-h-hero-wide { max-width: 980px; }
.mk-h2 { font-size: 56px; line-height: 60px; color: var(--color-ink); }
.mk-h2-narrow { max-width: 720px; }
.mk-h2-640 { max-width: 640px; }
.mk-h2-big { font-size: 64px; line-height: 64px; max-width: 760px; }
.mk-lede { font-size: 22px; line-height: 32px; color: var(--color-ink-2); max-width: 640px; text-wrap: balance; }
.mk-lede-680 { max-width: 680px; }
.mk-lede-540 { max-width: 540px; font-size: var(--text-lg); line-height: 30px; }
.mk-sect-sub { font-size: 18px; line-height: 28px; color: var(--color-ink-2); text-wrap: balance; }
.mk-sub-440 { max-width: 440px; }
.mk-sub-460 { max-width: 460px; }
.mk-sub-520 { max-width: 520px; }
.mk-sub-560 { max-width: 560px; }
.mk-fine { font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); text-align: center; }
.mk-fine-left { font-size: var(--text-sm); line-height: 22px; color: var(--color-ink-2); }
.mk-btn-xl { min-height: 56px; font-size: 17px; font-weight: 600; padding: 0 24px; white-space: nowrap; flex-shrink: 0; }
.mk-btn-edge { border-color: var(--color-edge); }

/* Sections */
.mk-band { padding-block: var(--mk-band-y); }
.mk-wash { background: var(--color-wash); padding-block: 112px; }
.mk-sect-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; margin-bottom: 56px; }
.mk-sect-head .mk-sect-sub { max-width: 460px; }

/* Always-dark band: dark palette inside, in both modes. Light: code-dark surface; dark: wash. */
.mk-dark {
  --color-ground: #170F26; --color-wash: #21173A; --color-rule: #352853; --color-edge: #7F6FA8;
  --color-ink-2: #B9ADD6; --color-ink: #F3EEFC; --color-human: #A98BFF; --color-on-human: #170F26;
  --color-agent: #F2B33D; --color-bot: #8F83AB;
  background: var(--mk-band); color: var(--color-ink);
}
.mk-dark .link { color: var(--color-human); }

/* Terminal-style code panel (Paper ground-dark in light, code-dark + rule in dark). */
.mk-term {
  border-radius: 12px; background: var(--color-code); color: var(--color-code-text);
  border: 1px solid #352853; overflow: hidden; min-width: 0;
}
.mk-term-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 0 22px;
  font-family: var(--font-code); font-size: 12px; line-height: 16px; color: #B9ADD6; min-width: 0;
}
.mk-term-head > span { min-width: 0; overflow-wrap: anywhere; }
.mk-term-copy { flex-shrink: 0; min-height: 36px; background: #F3EEFC24; color: #F3EEFC; }
.mk-term-code { margin: 0; padding: 10px 22px 20px; font-family: var(--font-code); font-size: var(--text-sm); line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mk-term-code code { font: inherit; }
.mk-term-lg .mk-term-head { padding: 12px 16px 0 28px; font-size: var(--text-sm); line-height: 20px; }
.mk-term-lg .mk-term-code { padding: 16px 28px 32px; font-size: 15px; line-height: 26px; white-space: pre; overflow-x: auto; }

/* ─── Home: hero ─────────────────────────────────────────────────────── */
.mk-hero { padding-top: 88px; padding-bottom: 96px; }
.mk-hero-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; margin-bottom: 56px; }
.mk-hero-copy { display: flex; flex-direction: column; gap: 28px; max-width: 860px; }
.mk-hero-actions { display: flex; flex-direction: column; gap: 12px; width: 280px; flex-shrink: 0; }

/* The big split: square where segments meet, rounded only at the outer ends. */
.mk-split-hero { display: flex; flex-direction: column; gap: 16px; }
.mk-split-big { display: flex; gap: 4px; height: 160px; }
.mk-seg { display: flex; flex-direction: column; justify-content: space-between; padding: 20px 24px; min-width: 0; }
.mk-seg-label { font-size: var(--text-lg); font-weight: 700; line-height: 26px; }
.mk-seg-num { font-size: 64px; font-weight: 600; letter-spacing: -0.03em; line-height: 64px; }
.mk-seg-agent { flex: 31 1 0; background: var(--color-agent); color: var(--mk-on-agent); border-radius: 12px 0 0 12px; }
.mk-seg-human { flex: 58 1 0; background: var(--color-human); color: var(--color-on-human); }
.mk-seg-bot { flex: 11 1 0; background: var(--color-bot); color: var(--mk-on-bot); border-radius: 0 12px 12px 0; padding-inline: 18px; }
.mk-seg-bot .mk-seg-num { font-size: 40px; line-height: 44px; }
.mk-split-cap { display: flex; justify-content: space-between; gap: 24px; font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }

/* ─── Home: three kinds of traffic ───────────────────────────────────── */
.mk-kinds { display: flex; border-top: 2px solid var(--color-ink); }
.mk-kind { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; padding: 28px 32px 0; }
.mk-kind:first-child { padding-left: 0; }
.mk-kind:last-child { padding-right: 0; }
.mk-kind + .mk-kind { border-left: 1px solid var(--color-rule); }
.mk-kind-title { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 30px; }
.mk-kind p { font-size: 17px; line-height: 27px; color: var(--color-ink-2); text-wrap: balance; }
.mk-sq { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }

/* ─── Home: MCP band ─────────────────────────────────────────────────── */
.mk-mcp { display: flex; align-items: center; gap: 72px; }
.mk-mcp-copy { width: 480px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.mk-chips li { padding: 6px 10px; border: 1px solid var(--color-rule); border-radius: 6px; font-size: 13px; line-height: 18px; color: var(--color-ink); }
.mk-chat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 16px; background: var(--mk-card); border: 1px solid var(--color-rule); }
.mk-bubble { font-size: 17px; line-height: 27px; }
.mk-bubble-me { align-self: flex-end; max-width: 420px; padding: 14px 18px; border-radius: 14px 14px 4px 14px; background: var(--mk-bubble); color: var(--mk-bubble-ink); line-height: 26px; }
.mk-bubble-them { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 14px 14px 14px 4px; background: var(--color-rule); color: var(--color-ink); }
.mk-call { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--color-ink-2); min-width: 0; }
.mk-call-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-agent); flex-shrink: 0; }
.mk-chat-split { height: 8px; border-radius: 2px; }
.mk-w31 { flex: 31 1 0; } .mk-w58 { flex: 58 1 0; } .mk-w11 { flex: 11 1 0; }

/* ─── Home: install ──────────────────────────────────────────────────── */
.mk-install { display: flex; gap: 72px; }
.mk-install-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.mk-install .mk-term { max-width: 760px; }
.mk-facts { width: 440px; flex-shrink: 0; align-self: flex-start; border-top: 2px solid var(--color-ink); }
.mk-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--color-rule); font-size: 17px; line-height: 24px; }
.mk-facts dt { font-weight: 600; }
.mk-facts dd { color: var(--color-ink-2); text-align: right; }

/* ─── Home: cookies comparison ───────────────────────────────────────── */
.mk-compare { display: flex; gap: 24px; }
.mk-cmp { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 28px; padding: 28px; border-radius: 16px; background: var(--color-ground); border: 1px solid var(--color-rule); }
.mk-cmp-us { border: 2px solid var(--color-human); box-shadow: var(--mk-shadow-hi); }
.mk-cmp-title { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; line-height: 20px; text-transform: uppercase; color: var(--color-ink-2); }
.mk-cmp-us .mk-cmp-title { color: var(--color-human); font-weight: 700; }
.mk-mock { height: 280px; flex-shrink: 0; display: flex; flex-direction: column; overflow: clip; border-radius: 10px; border: 1px solid var(--color-rule); background: var(--color-wash); }
.mk-mock-us { background: var(--mk-mock-us); }
.mk-mock-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--color-rule); }
.mk-mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-rule); }
.mk-mock-lines { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 0; }
.mk-mock-them .mk-mock-lines { opacity: 0.5; }
.mk-mock-lines b { display: block; height: 10px; border-radius: 3px; background: var(--color-rule); }
.mk-mock-lines b:first-child { height: 18px; border-radius: 4px; }
.mk-mock-lines .mk-mock-ink { background: var(--color-ink); opacity: 0.85; }
.mk-l40 { width: 40%; } .mk-l60 { width: 60%; } .mk-l78 { width: 78%; } .mk-l82 { width: 82%; } .mk-l85 { width: 85%; }
.mk-mock-banner { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; background: var(--color-ground); border-top: 1px solid var(--color-edge); box-shadow: var(--mk-shadow-banner); font-size: var(--text-sm); line-height: 20px; }
.mk-mock-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-mock-btns span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--color-edge); font-size: 13px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.mk-mock-btns .mk-mock-accept { background: var(--color-ink-2); border-color: var(--color-ink-2); color: var(--color-ground); }
.mk-mock-foot { margin-top: auto; display: flex; justify-content: flex-end; padding: 16px; }
.mk-mock-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 17px; background: var(--mk-mock-pill); border: 1px solid var(--color-rule); font-size: 13px; font-weight: 600; line-height: 18px; }
.mk-mock-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-human); }
.mk-checks li { display: flex; gap: 14px; padding-block: 16px; border-top: 1px solid var(--color-rule); font-size: 17px; line-height: 25px; }
.mk-checks svg { flex-shrink: 0; margin-top: 2px; }
.mk-checks-no li { color: var(--color-ink-2); }
.mk-checks-no svg { color: var(--color-edge); }
.mk-checks-yes li { font-weight: 500; }
.mk-checks-yes svg { color: var(--color-human); }

/* ─── Price block (home and pricing) ─────────────────────────────────── */
.mk-price { display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.mk-price-fig { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.mk-price-cur { font-size: 40px; font-weight: 600; line-height: 56px; color: var(--color-ink-2); }
.mk-price-num { white-space: nowrap; overflow-wrap: normal; font-size: 200px; line-height: 176px; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.mk-price-per { display: flex; flex-direction: column; gap: 6px; padding-top: 24px; }
.mk-price-month { font-size: 24px; font-weight: 600; line-height: 30px; color: var(--color-ink); }
.mk-price-note { font-size: 17px; line-height: 24px; color: var(--color-ink-2); font-weight: 400; }
.mk-price-side { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }

/* ─── For agents ─────────────────────────────────────────────────────── */
.mk-hero-agents { padding-top: 96px; padding-bottom: 88px; }
.mk-hero-agents .mk-wrap { display: flex; flex-direction: column; gap: 28px; }
.mk-endpoint-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 8px; }
.mk-endpoint {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 20px; border-radius: var(--radius-md);
  background: var(--color-code); border: 1px solid #352853; color: #F3EEFC; font-family: var(--font-code); font-size: var(--text-base); line-height: 22px; min-width: 0;
}
.mk-endpoint code { font: inherit; overflow-wrap: anywhere; }
.mk-endpoint-k { font-size: var(--text-sm); line-height: 20px; color: #B9ADD6; }
.mk-endpoint-btns { display: flex; gap: 16px; }

.mk-two { display: flex; gap: 72px; }
.mk-two-center { align-items: center; }
.mk-two-side { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.mk-two-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.mk-two > .mk-term, .mk-two > .mk-endpoints { flex: 1 1 0; min-width: 0; }
.mk-two > .mk-term-lg { border-radius: 14px; align-self: flex-start; }

.mk-steps { border-top: 2px solid var(--color-ink); }
.mk-steps li { display: flex; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--color-rule); font-size: 17px; line-height: 26px; }
.mk-step-n { width: 20px; flex-shrink: 0; color: var(--color-human); font-weight: 600; }

.mk-tools { border-top: 2px solid var(--color-ink); }
.mk-tools > div { display: flex; align-items: center; gap: 32px; min-height: 72px; padding-block: 12px; border-bottom: 1px solid var(--color-rule); }
.mk-tools dt { width: 280px; flex-shrink: 0; font-size: var(--text-base); font-weight: 500; line-height: 24px; }
.mk-tools dd { flex: 1 1 0; font-size: 17px; line-height: 26px; color: var(--color-ink-2); }

.mk-kv { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.mk-kv-k { font-size: var(--text-sm); font-weight: 600; line-height: 20px; color: var(--color-ink-2); }
.mk-kv-v { font-size: var(--text-base); line-height: 24px; }
.mk-kv-list a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 22px; color: var(--color-ink); text-underline-offset: 3px; }

.mk-endpoints { border-top: 2px solid var(--color-ink); align-self: flex-start; }
.mk-endpoints > div { display: flex; align-items: center; gap: 20px; min-height: 60px; padding-block: 10px; border-bottom: 1px solid var(--color-rule); }
.mk-endpoints dt { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 20px; }
.mk-endpoints code { font-family: var(--font-code); font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.mk-endpoints dd { font-size: var(--text-base); line-height: 24px; color: var(--color-ink-2); text-align: right; }
.mk-verb { width: 56px; flex-shrink: 0; font-family: var(--font-code); font-size: var(--text-sm); font-weight: 600; line-height: 20px; color: var(--color-human); }
/* Agent orange at 14px misses 4.5:1 on wash; deepen it toward ink. */
.mk-verb-post { color: color-mix(in srgb, var(--color-agent) 72%, var(--color-ink)); }

.mk-claim { width: 520px; flex-shrink: 0; border-top: 2px solid var(--color-ink); }
.mk-claim li { display: flex; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--color-rule); }
.mk-claim h3 { font-size: 17px; font-weight: 600; line-height: 24px; }
.mk-claim p { font-size: var(--text-base); line-height: 24px; color: var(--color-ink-2); }
.mk-claim li > div { display: flex; flex-direction: column; gap: 4px; }
/* Numbers on series fills: 20px bold so they count as large text (AAA ≥ 4.5:1). */
.mk-claim-n { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: var(--text-lg); font-weight: 700; line-height: 20px; }
.mk-claim-agent { background: var(--color-agent); color: var(--mk-on-agent); }
.mk-claim-human { background: var(--color-human); color: var(--color-on-human); }

.mk-cta { padding-block: 96px; }
.mk-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.mk-cta-copy { display: flex; flex-direction: column; gap: 12px; }
.mk-h-cta { font-size: 48px; line-height: 52px; color: var(--color-ink); }
.mk-cta-btns { display: flex; gap: 12px; flex-shrink: 0; }

/* ─── Pricing ────────────────────────────────────────────────────────── */
.mk-pricing { padding-top: 96px; padding-bottom: 64px; }
.mk-pricing-in { display: flex; align-items: flex-start; gap: 80px; }
.mk-pricing-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.mk-pricing-h { display: flex; flex-direction: column; gap: 16px; }
.mk-pricing-sub { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 48px; letter-spacing: -0.04em; color: var(--color-ink); max-width: 560px; text-wrap: balance; }
.mk-examples { display: flex; flex-direction: column; gap: 12px; max-width: 400px; padding-top: 12px; }
.mk-examples-title { font-size: var(--text-lg); font-weight: 600; line-height: 28px; padding-bottom: 10px; border-bottom: 1px solid var(--color-ink); }
.mk-table th, .mk-table td { padding: 12px 0; border-bottom: 1px solid var(--color-rule); text-align: left; font-size: var(--text-base); line-height: 24px; }
.mk-table thead th { font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-caps); line-height: 16px; text-transform: uppercase; color: var(--color-ink-2); padding-top: 0; }
.mk-table tbody th { font-weight: 600; }
.mk-table td, .mk-table thead th:last-child { text-align: right; }
.mk-plan { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: 20px; background: var(--color-wash); border: 1px solid var(--color-rule); box-shadow: var(--mk-shadow-plan); }
.mk-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mk-plan-title { font-size: var(--text-lg); font-weight: 700; line-height: 28px; }
.mk-plan-head .pill { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.mk-plan-list li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 10px; border-bottom: 1px solid var(--color-rule); font-size: var(--text-base); line-height: 24px; }
.mk-plan-list li:last-child { border-bottom: 0; }
.mk-plan-list svg { flex-shrink: 0; color: var(--color-human); }
.mk-plan-foot { display: flex; flex-direction: column; gap: 10px; }
.mk-plan-foot .btn { border-radius: 10px; font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }
.mk-plan-foot .mk-fine { font-size: 13px; line-height: 18px; }
.mk-questions { padding-top: 64px; text-align: center; font-size: var(--text-base); line-height: 24px; color: var(--color-ink-2); }
.mk-questions a { display: inline-flex; align-items: center; min-height: 44px; }

/* ─── Legal ──────────────────────────────────────────────────────────── */
.mk-legal { display: flex; gap: 96px; padding-top: 72px; padding-bottom: 96px; }
.mk-toc { width: 240px; flex-shrink: 0; align-self: flex-start; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.mk-toc-k { padding: 0 12px 10px; }
.mk-toc-list { display: flex; flex-direction: column; gap: 2px; }
.mk-toc-list a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 6px; text-decoration: none; font-size: var(--text-sm); line-height: 20px; color: var(--color-ink-2); }
.mk-toc-list a:hover { background: var(--color-wash); color: var(--color-ink); }
.mk-toc-mob { display: none; }
.mk-toc-docs { display: flex; gap: 16px; margin-top: 16px; padding: 12px 12px 0; border-top: 1px solid var(--color-rule); }
.mk-toc-docs a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); line-height: 20px; color: var(--color-human); text-decoration: underline 1px; text-underline-offset: 3px; }
.mk-toc-docs a[aria-current="page"] { color: var(--color-ink); font-weight: 600; text-decoration: none; }
.mk-doc { width: 680px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.mk-doc-head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 28px; border-bottom: 1px solid var(--color-rule); }
.mk-doc-title { font-size: 48px; font-weight: 700; letter-spacing: -0.035em; line-height: 52px; text-wrap: balance; }
.mk-doc-date { font-size: 13px; line-height: 18px; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.mk-doc-sect { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; scroll-margin-top: 24px; }
.mk-doc-sect h2 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; line-height: var(--leading-xl); text-wrap: balance; }
.mk-doc-sect p { font-size: 18px; line-height: 30px; text-wrap: pretty; }

/* ─── Error page ─────────────────────────────────────────────────────── */
.error-page {
  min-height: 100vh; max-width: 480px; margin: 0 auto; padding: 64px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center;
}
.error-page .wordmark { margin-bottom: 24px; }
.error-page .page-sub { text-wrap: balance; }

/* ─── ≤1100: stack the two-column sections ───────────────────────────── */
@media (max-width: 1100px) {
  .mk { --mk-pad: 40px; --mk-band-y: 96px; }
  .mk-wash { padding-block: 96px; }
  .mk-h-hero { font-size: 72px; line-height: 72px; }
  .mk-hero-top, .mk-sect-head, .mk-mcp, .mk-install, .mk-two, .mk-price, .mk-cta-in, .mk-pricing-in { flex-direction: column; align-items: stretch; gap: 32px; }
  .mk-hero-actions { width: 100%; max-width: 420px; }
  .mk-mcp-copy, .mk-two-side, .mk-facts, .mk-claim, .mk-price-side, .mk-plan { width: 100%; max-width: 680px; }
  .mk-two > .mk-term-lg, .mk-endpoints { align-self: stretch; }
  .mk-two > .mk-term, .mk-two > .mk-endpoints, .mk-two-main, .mk-install-copy, .mk-pricing-copy, .mk-chat { flex: none; }
  .mk-sect-head { margin-bottom: 40px; }
  .mk-sect-head .mk-sect-sub { max-width: 640px; }
  .mk-legal { gap: 48px; }
  .mk-toc { width: 200px; }
}

/* ─── ≤760: mobile header ────────────────────────────────────────────── */
@media (max-width: 760px) {
  .mk-header-in { height: 64px; padding-left: 20px; padding-right: 8px; }
  .mk-wordmark { font-size: 22px; line-height: 26px; }
  .mk-nav { display: none; }
  .mk-mnav { display: flex; }
  .mk-mnav .mk-nav-cta { margin-left: 0; font-size: var(--text-sm); padding: 0 14px; }

  .mk-legal { flex-direction: column; gap: 18px; padding-top: 32px; padding-bottom: 48px; }
  .mk-toc { position: static; width: 100%; }
  .mk-toc-desk, .mk-toc-docs { display: none; }
  .mk-toc-mob { display: block; border-radius: 8px; background: var(--color-wash); border: 1px solid var(--color-rule); }
  .mk-toc-mob summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; font-size: var(--text-sm); font-weight: 600; line-height: 20px; }
  .mk-toc-mob summary::-webkit-details-marker { display: none; }
  .mk-toc-count { font-size: 13px; font-weight: 400; color: var(--color-ink-2); }
  .mk-toc-mob .mk-toc-list { padding: 0 4px 8px; }
  .mk-doc { width: 100%; gap: 18px; }
  .mk-doc-head { order: -1; }
}

/* ─── ≤640: the 375 frames ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .mk { --mk-pad: 20px; --mk-band-y: 64px; }
  .mk-h-hero { font-size: 48px; line-height: 48px; }
  .mk-h2 { font-size: 36px; line-height: 40px; }
  .mk-h2-big { font-size: 40px; line-height: 42px; }
  .mk-lede { font-size: 17px; line-height: 26px; }
  .mk-sect-sub, .mk-lede-540 { font-size: var(--text-base); line-height: 25px; }
  .mk-btn-xl { min-height: 52px; font-size: var(--text-base); }
  .mk-wash { padding-block: 64px; }

  /* Hero */
  .mk-hero { padding-top: 40px; padding-bottom: 56px; }
  .mk-hero-top { gap: 20px; margin-bottom: 32px; }
  .mk-hero-copy { gap: 20px; }
  .mk-hero-actions { max-width: none; gap: 10px; padding-top: 8px; }
  .mk-split-big { flex-direction: column; height: auto; }
  .mk-seg { flex: none; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 18px; }
  .mk-seg-num { font-size: 40px; line-height: 44px; letter-spacing: -0.02em; }
  .mk-seg-agent { height: 72px; border-radius: 12px 12px 0 0; }
  .mk-seg-human { height: 104px; }
  .mk-seg-bot { height: 52px; border-radius: 0 0 12px 12px; }
  .mk-seg-bot .mk-seg-num { font-size: 28px; line-height: 32px; }
  .mk-split-cap { display: block; padding-top: 10px; text-wrap: balance; }
  .mk-split-cap > span + span::before { content: " "; }
  .mk-split-hero { gap: 0; }

  /* Sections */
  .mk-sect-head { gap: 20px; margin-bottom: 28px; }
  .mk-kinds { flex-direction: column; }
  .mk-kind, .mk-cmp { flex: none; }
  .mk-kind, .mk-kind:first-child, .mk-kind:last-child { padding: 20px 0; gap: 10px; }
  .mk-kind + .mk-kind { border-left: 0; }
  .mk-kind:not(:last-child) { border-bottom: 1px solid var(--color-rule); }
  .mk-kind-title { font-size: var(--text-lg); line-height: 26px; letter-spacing: 0; }
  .mk-kind p { font-size: var(--text-base); line-height: 25px; }
  .mk-sq { width: 12px; height: 12px; }

  .mk-mcp { gap: 28px; }
  .mk-mcp-copy { gap: 16px; }
  .mk-chips { padding-top: 0; }
  .mk-chips li { font-size: var(--text-sm); }
  .mk-chat { padding: 18px; gap: 16px; border-radius: 14px; }
  .mk-bubble { font-size: var(--text-base); line-height: 25px; }
  .mk-bubble-me { padding: 12px 14px; border-radius: 12px 12px 4px 12px; line-height: 24px; }
  .mk-bubble-them { padding: 14px 16px; gap: 12px; border-radius: 12px 12px 12px 4px; }
  .mk-call { font-size: var(--text-sm); line-height: 20px; }
  .mk-call-args { display: none; }

  .mk-install { gap: 20px; }
  .mk-install-copy { gap: 20px; }
  .mk-term-head { padding-left: 16px; font-size: var(--text-sm); line-height: 18px; }
  .mk-term-code { padding: 8px 16px 16px; }
  .mk-facts > div { padding-block: 14px; font-size: var(--text-base); }

  .mk-compare { flex-direction: column; gap: 24px; }
  .mk-cmp { padding: 20px; gap: 20px; }
  .mk-cmp-us { order: -1; }
  .mk-cmp-title { font-size: var(--text-sm); }
  .mk-mock { height: 220px; }
  .mk-mock-us { height: 200px; }
  .mk-mock-bar { padding: 10px 12px; }
  .mk-mock-bar i { width: 8px; height: 8px; }
  .mk-mock-lines { gap: 8px; padding: 18px 18px 0; }
  .mk-mock-lines b { height: 8px; }
  .mk-mock-lines b:first-child { height: 14px; }
  .mk-mock-lines b:nth-child(n+4) { display: none; }
  .mk-mock-us .mk-mock-lines b:nth-child(5) { display: block; }
  .mk-mock-them .mk-mock-lines b:nth-child(3) { display: none; }
  .mk-mock-banner { padding: 14px; gap: 10px; font-size: 13px; line-height: 18px; }
  .mk-mock-btns { gap: 6px; }
  .mk-mock-btns span { height: 32px; padding: 0 10px; }
  .mk-mock-foot { padding: 12px; }
  .mk-mock-pill { height: 32px; border-radius: 16px; }
  .mk-checks li { gap: 12px; padding-block: 14px; font-size: var(--text-base); line-height: 22px; }
  .mk-checks svg { display: none; }

  .mk-price { gap: 20px; }
  .mk-price-fig { gap: 6px; }
  .mk-price-cur { font-size: 28px; line-height: 40px; }
  .mk-price-num { font-size: 120px; line-height: 108px; }
  .mk-price-per { padding-top: 14px; gap: 4px; }
  .mk-price-month { font-size: var(--text-lg); line-height: 26px; }
  .mk-price-note { font-size: 15px; line-height: 22px; }
  .mk-price-side { gap: 20px; }

  /* For agents */
  .mk-hero-agents { padding-top: 40px; padding-bottom: 48px; }
  .mk-hero-agents .mk-wrap { gap: 20px; }
  .mk-endpoint-row { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 0; }
  .mk-endpoint { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; font-size: 15px; }
  .mk-endpoint-k { line-height: 18px; }
  .mk-endpoint-btns { gap: 10px; }
  .mk-endpoint-btns .btn { flex: 1 1 0; padding: 0 12px; }
  .mk-wash .mk-two, .mk-two { gap: 20px; }
  .mk-two-side { gap: 20px; }
  /* Connect: config panel sits between the intro and the steps, as in the 375 frame. */
  .mk-two:has(> .mk-term-lg) > .mk-two-side { display: contents; }
  .mk-two:has(> .mk-term-lg) .mk-steps { order: 2; }
  .mk-term-lg .mk-term-head { padding-left: 16px; }
  .mk-term-lg .mk-term-code { padding: 12px 16px 18px; font-size: var(--text-sm); line-height: 22px; }
  .mk-steps li { gap: 12px; padding-block: 14px; font-size: var(--text-base); line-height: 24px; }
  .mk-step-n { width: 18px; }
  .mk-tools > div { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; padding-block: 14px; }
  .mk-tools dt { width: auto; font-size: 15px; line-height: 22px; }
  .mk-tools dd { font-size: 15px; line-height: 23px; }
  .mk-endpoints > div { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; padding-block: 12px; }
  .mk-endpoints dt { gap: 10px; }
  .mk-endpoints code { font-size: var(--text-sm); }
  .mk-verb { width: auto; }
  .mk-endpoints dd { font-size: 15px; line-height: 22px; text-align: left; }
  .mk-claim li { gap: 14px; padding-block: 16px; }
  .mk-claim h3 { font-size: var(--text-base); }
  .mk-claim p { font-size: 15px; line-height: 22px; }
  .mk-cta { padding-block: 56px; }
  .mk-cta-in { gap: 16px; }
  .mk-h-cta { font-size: 32px; line-height: 36px; }
  .mk-cta-btns { flex-direction: column; gap: 12px; }

  /* Pricing */
  .mk-pricing { padding-top: 40px; padding-bottom: 32px; }
  .mk-pricing-in { gap: 28px; }
  .mk-pricing-copy { gap: 18px; }
  .mk-pricing-h { gap: 10px; }
  .mk-pricing .mk-price-cur { font-size: 36px; line-height: 52px; }
  .mk-pricing .mk-price-num { font-size: 120px; line-height: 110px; }
  .mk-pricing-sub { font-size: 32px; line-height: 36px; }
  .mk-plan { padding: 20px; gap: 20px; border-radius: 16px; }
  .mk-plan-foot .btn { font-size: var(--text-base); line-height: 24px; }
  .mk-questions { padding-top: 32px; }

  /* Legal */
  .mk-doc-title { font-size: 34px; line-height: 38px; }
  .mk-doc-date { line-height: 20px; }
  .mk-doc-sect { gap: 18px; padding-top: 12px; }
  .mk-doc-sect h2 { font-size: 22px; line-height: 28px; }
  .mk-doc-sect p { font-size: 17px; line-height: 28px; }

  /* Footer */
  .mk-footer-in { flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 32px; padding-bottom: 40px; }
  .mk-footer-brand { display: contents; }
  .mk-footer-note { order: 2; }
  .mk-footer-nav { column-gap: 20px; }
  .mk-footer-nav a { font-size: 15px; line-height: 22px; }
}

@media (max-width: 380px) {
  .mk-h-hero { font-size: 44px; line-height: 46px; }
  .mk-price-num { font-size: 104px; line-height: 96px; }
}