/* Upglory marketing site, component base (concept D). Every marketing page
   is built from these classes and nothing else; a page that needs a new
   piece adds it here first, with a row in the styleguide. Prefix: mk.
   Lengths are rem (the root scales with the screen, tokens.css); only
   hairlines are px. Breakpoints are em, so they scale with the root too. */

/* ---- ground ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--text); font-family: var(--font-text); font-size: var(--t-body); line-height: var(--lh-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg, canvas { max-width: 100%; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 0.1875rem; }
::selection { background: var(--cobalt); color: #fff; }

.mk-wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.mk-mono { font-family: var(--font-mono); font-size: var(--t-mono); font-variant-numeric: tabular-nums; }
.mk-muted { color: var(--text-3); }
.mk-on-dark .mk-muted { color: var(--text-on-dark-3); }

/* ---- type ---- */
.mk-display-xl { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: balance; max-width: 11ch; }
.mk-display-l { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-l); line-height: 1; letter-spacing: -.03em; text-wrap: balance; max-width: 22ch; }
.mk-display-m { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-m); line-height: var(--lh-tight); letter-spacing: -.03em; text-wrap: balance; max-width: 20ch; }
.mk-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-title); line-height: 1.2; letter-spacing: var(--ls-tight); }
.mk-lead { margin: 0; font-size: var(--t-lead); line-height: var(--lh-text); max-width: var(--measure); }
.mk-body { margin: 0; font-size: var(--t-body); line-height: var(--lh-loose); max-width: var(--measure-l); color: var(--text-2); }
.mk-on-dark .mk-body { color: var(--text-on-dark-2); }
.mk-small { font-size: var(--t-small); color: var(--text-3); }
.mk-kicker { margin: 0 0 var(--s-5); font-family: var(--font-mono); font-size: var(--t-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; opacity: .7; }
.mk-em { font-style: normal; color: var(--down-text); }
.mk-on-dark .mk-em { color: var(--down); }
.mk-link { color: var(--cobalt); font-weight: 500; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.mk-on-dark .mk-link { color: var(--text-on-dark); }
.mk-stack { display: flex; flex-direction: column; gap: var(--s-5); align-items: flex-start; }
.mk-stack > * + .mk-lead { margin-top: var(--s-2); }

/* ---- fields and acts ---- */
.mk-field { position: relative; padding: var(--s-9) 0; }
.mk-field--cream { --field: var(--cream); background: var(--cream); color: var(--text); }
.mk-field--ink { --field: var(--ink); background: var(--ink); color: var(--text-on-dark); }
.mk-field--cobalt { --field: var(--cobalt); background: var(--cobalt); color: #fff; }
.mk-field--violet { --field: var(--violet); background: var(--violet); color: #fff; }
.mk-field--ink, .mk-field--cobalt, .mk-field--violet { --line: var(--line-on-dark); --text-2: var(--text-on-dark-2); --text-3: var(--text-on-dark-3); }
/* Cobalt and violet are mid-tones, so their quiet text is stronger than on ink. */
.mk-field--cobalt, .mk-field--violet { --line: rgba(255, 255, 255, .28); --text-2: rgba(255, 255, 255, .92); --text-3: rgba(255, 255, 255, .86); }
/* An act is a field that pins while the next one slides over it. Only the
   home page stacks acts; other pages use plain fields. An act taller than
   the window pins at the window's height less its own (--act-top, set by
   the script), so the page scrolls it until its bottom is in view and
   only then holds it; one that fits pins at the top (#543). */
.mk-act { --act-top: 0px; position: sticky; top: var(--act-top); min-height: 100vh; display: grid; align-content: center; overflow: hidden; }
.mk-act .mk-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s-8); align-items: center; }
.mk-act .mk-wrap > * { grid-column: 1; }
.mk-act .mk-act__aside { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
.mk-after-acts { position: relative; z-index: 2; }
/* A plain two-column section on any page. */
.mk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.mk-split--wide-right { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }

/* ---- nav ---- */
/* The nav is transparent over the top of the page and turns into a solid
   cream bar with a hairline as soon as the page scrolls, so it reads over
   every field. The Product panel is a second fixed element beside it. */
.mk-nav { position: fixed; inset: 0 0 auto; z-index: 30; padding: 1rem 0; color: var(--text); background: transparent; border-bottom: 1px solid transparent;  }
/* Scrolled, the bar is frosted glass: translucent cream, a strong blur and
   a lift in saturation so the field beneath tints it, a light top edge, a
   hairline and a soft shadow below. Without backdrop blur it stays solid. */
.mk-nav.is-solid { background: rgba(244, 241, 232, .68); border-bottom-color: rgba(16, 17, 18, .10); padding: 0.625rem 0; -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0.75rem 2rem -1.5rem rgba(16, 17, 18, .35); }
.mk-nav.is-solid.is-on-dark { background: rgba(16, 17, 18, .38); border-bottom-color: rgba(255, 255, 255, .12); color: var(--text-on-dark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0.75rem 2rem -1.5rem rgba(0, 0, 0, .5); }
.mk-nav.is-solid.is-on-dark .mk-btn--primary { background: var(--cream); color: var(--ink); }
.mk-nav { transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mk-nav.is-solid { background: rgba(244, 241, 232, .97); } .mk-nav.is-solid.is-on-dark { background: rgba(16, 17, 18, .96); } }
.mk-nav--on-dark:not(.is-solid) { color: var(--text-on-dark); }
.mk-nav__in { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: space-between; align-items: center; }
.mk-nav--static { position: static; inset: auto; padding: var(--s-5) 0; }
.mk-logo { display: inline-flex; align-items: center; gap: 0.625rem; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
.mk-logo svg { width: 1.75rem; height: 0.625rem; fill: currentColor; }
.mk-nav__links { display: flex; gap: var(--s-5); align-items: center; font-size: 0.9375rem; font-weight: 500; }
.mk-nav__links a:not(.mk-btn) { opacity: .85; }
.mk-nav__links a:not(.mk-btn):hover { opacity: 1; }
.mk-burger { display: none; width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill); border: 1px solid currentColor; align-items: center; justify-content: center; }

/* The Product menu: a trigger with a chevron, a white panel that hangs
   under the right-hand link group. The nav's difference blend would invert
   the panel, so the panel is a sibling of .mk-nav__in, not a child, and
   blends normally. Opens on click, on focus within, and on hover for a
   pointer; closes on Escape and on a click outside. On a phone it lives
   inside the burger panel instead. */
.mk-nav__menu { position: relative; }
.mk-nav__trigger { display: inline-flex; align-items: center; gap: 0.375rem; background: none; border: 0; padding: 0; font: inherit; color: inherit; opacity: .85; cursor: pointer; }
.mk-nav__trigger:hover, .mk-nav__trigger[aria-expanded="true"] { opacity: 1; }
.mk-nav__trigger .mk-icon { width: 1rem; height: 1rem; transition: transform var(--d-fast) var(--ease); }
.mk-nav__trigger[aria-expanded="true"] .mk-icon { transform: rotate(180deg); }
.mk-nav__panel { position: fixed; top: 4.5rem; right: max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter))); left: auto; width: min(38rem, calc(100vw - 2 * var(--gutter))); background: var(--white); color: var(--text); border: 0; border-radius: var(--r-card-l); box-shadow: 0 1.5rem 3rem -1rem rgba(16, 17, 18, .28), 0 0 0 1px rgba(16, 17, 18, .04); padding: 0.75rem; display: none; grid-template-columns: 1fr 1fr; gap: 0.25rem; z-index: 31; }
.mk-nav__panel.is-open { display: grid; }
.mk-nav__panel--demo { position: static; display: grid; width: min(38rem, 100%); }
.mk-nav__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.875rem; align-items: start; padding: 0.875rem 0.875rem 0.875rem 0.75rem; border-radius: var(--r-card); color: var(--text); text-decoration: none; transition: background var(--d-fast) var(--ease); }
.mk-nav__item:hover, .mk-nav__item:focus-visible { background: var(--cream); }
.mk-nav__item .mk-icon { width: 2.5rem; height: 2.5rem; padding: 0.625rem; box-sizing: border-box; border-radius: var(--r-code); background: var(--violet-ground); color: var(--violet); stroke-width: 1.75; }
.mk-nav__item b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--t-body); letter-spacing: var(--ls-tight); margin-bottom: 0.125rem; }
.mk-nav__item span { display: block; font-size: var(--t-small); color: var(--text-2); line-height: var(--lh-text); }
.mk-nav__panel-foot { grid-column: 1 / -1; display: flex; gap: var(--s-5); padding: 0.875rem 0.75rem 0.25rem; margin-top: 0.25rem; border-top: 1px solid var(--line); font-size: var(--t-small); }
.mk-nav__panel-foot a { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--text-2); }
.mk-nav__panel-foot a:hover { color: var(--text); }
.mk-nav__panel-foot .mk-icon { width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: reduce) { .mk-nav__trigger .mk-icon, .mk-nav__item { transition: none; } }

/* ---- buttons ---- */
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; height: var(--control); padding: 0 1.375rem; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; line-height: 1; white-space: nowrap; transition: transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease), opacity var(--d-fast); }
.mk-btn:active { transform: scale(.97); }
.mk-btn--primary { background: var(--cobalt); color: #fff; }
.mk-btn--primary:hover { background: var(--cobalt-2); }
.mk-btn--ink { background: var(--ink); color: var(--cream); }
.mk-btn--ink:hover { background: var(--ink-2); }
.mk-btn--cream { background: var(--cream); color: var(--ink); }
.mk-btn--cream:hover { background: #fff; }
.mk-btn--ghost { background: transparent; color: currentColor; border: 1px solid currentColor; }
.mk-btn--ghost:hover { background: rgba(127, 127, 127, .08); }
.mk-btn--small { height: var(--control-s); padding: 0 1rem; font-size: 0.875rem; }

/* The arrow button: a pill with a contrasting disc at its end holding a
   Lucide arrow. The disc nudges on hover; the pill itself does not move.
   It is the primary action's shape on the home page and the hero of every
   product page; a plain pill is for the secondary action beside it. */
.mk-btn--arrow { padding-right: 0.375rem; gap: 0.875rem; }
.mk-btn--arrow .mk-btn__disc { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--control) - 0.75rem); height: calc(var(--control) - 0.75rem); border-radius: var(--r-pill); flex: none; transition: transform var(--d-base) var(--ease); }
.mk-btn--arrow .mk-btn__disc .mk-icon { width: 1.125rem; height: 1.125rem; }
.mk-btn--arrow:hover .mk-btn__disc { transform: translateX(0.1875rem); }
.mk-btn--small.mk-btn--arrow .mk-btn__disc { width: calc(var(--control-s) - 0.625rem); height: calc(var(--control-s) - 0.625rem); }
.mk-btn--big.mk-btn--arrow { padding-right: 0.375rem; gap: 1.125rem; }
.mk-btn--big.mk-btn--arrow .mk-btn__disc { width: 2.75rem; height: 2.75rem; }
.mk-btn--small.mk-btn--arrow { padding-right: 0.3125rem; gap: 0.625rem; }
.mk-btn--primary .mk-btn__disc { background: var(--white); color: var(--cobalt); }
.mk-btn--ink .mk-btn__disc { background: var(--cream); color: var(--ink); }
.mk-btn--cream .mk-btn__disc { background: var(--ink); color: var(--cream); }
.mk-btn--ghost .mk-btn__disc { background: currentColor; }
.mk-btn--ghost .mk-btn__disc .mk-icon { color: var(--field, var(--cream)); }
@media (prefers-reduced-motion: reduce) { .mk-btn--arrow .mk-btn__disc { transition: none; } .mk-btn--arrow:hover .mk-btn__disc { transform: none; } }

/* Icons: Lucide, the same set the dashboard will use. Inline SVG through
   the sprite; currentColor; stroke 2 at 1rem, 1.75 from 1.5rem up. An
   icon sits beside a word, never alone, except the burger, the arrow and
   the close cross, which carry an aria-label. */
.mk-icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.mk-icon--s { width: 1rem; height: 1rem; }
.mk-icon--m { width: 1.25rem; height: 1.25rem; }
.mk-icon--l { width: 1.5rem; height: 1.5rem; stroke-width: 1.75; }
.mk-icon--xl { width: 2rem; height: 2rem; stroke-width: 1.5; }
.mk-with-icon { display: inline-flex; align-items: center; gap: 0.5rem; }
.mk-link .mk-icon { margin-left: 0.125rem; }
.mk-btn--big { height: 3.5rem; padding: 0 1.75rem; font-size: 1.0625rem; }
.mk-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.mk-cta { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.mk-cta .mk-mono { opacity: .7; font-size: var(--t-mono-s); }

/* ---- chips ---- */
.mk-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, currentColor 40%, transparent); font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: .04em; }
.mk-chip--up { background: var(--up-ground); color: var(--up); }
.mk-chip--degraded { background: var(--degraded-ground); color: var(--degraded); }
.mk-chip--down { background: var(--down-ground); color: var(--down-text); }
.mk-chip--paused { background: var(--paused-ground); color: var(--paused); }
.mk-chip--pending { background: var(--pending-ground); color: var(--pending); }
.mk-chip--plan { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.mk-glyph { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--up); }
.mk-glyph--down { background: var(--down); border-radius: 0; transform: rotate(45deg); width: 0.4375rem; height: 0.4375rem; }
.mk-glyph--degraded { background: none; width: 0; height: 0; border-left: 0.3125rem solid transparent; border-right: 0.3125rem solid transparent; border-bottom: 0.5625rem solid var(--degraded); border-radius: 0; }
.mk-glyph--paused { background: none; border: 2px solid var(--paused); width: 0.375rem; height: 0.375rem; }
.mk-glyph--pending { background: var(--pending); }

/* ---- plates (cards) ---- */
/* A plate is a light surface even on a dark field, so it puts back the
   light text and line tokens the field overrode. */
.mk-plate { --text-2: #4A4843; --text-3: #6E6B64; --line: rgba(16, 17, 18, .12); --line-strong: rgba(16, 17, 18, .32); background: var(--cream); color: var(--text); border-radius: var(--r-card); padding: 1.625rem 1.75rem; }
.mk-plate--white { background: var(--white); }
.mk-plate--ink { --text-2: var(--text-on-dark-2); --text-3: var(--text-on-dark-3); --line: var(--line-on-dark); background: var(--ink); color: var(--text-on-dark); }
.mk-plate--lift { box-shadow: var(--shadow-lift); }
.mk-plate--violet { background: var(--violet-ground); color: var(--text); }
.mk-plate__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--t-mono-s); color: var(--text-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); margin-bottom: var(--s-3); }

/* The product's three cards, in the site's clothes. */
.mk-alert { font-family: var(--font-mono); font-size: var(--t-mono); line-height: 1.55; }
.mk-alert b { color: var(--down-text); font-weight: 500; }
.mk-alert__actions { margin-top: var(--s-3); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.mk-alert__actions span { border: 1px solid var(--line-strong); border-radius: var(--r-chip); padding: 2px 0.5rem; font-size: var(--t-mono-s); color: var(--text-3); }
.mk-explain { background: var(--violet-ground); color: var(--text); border-radius: var(--r-code); padding: var(--s-4) 1.125rem; font-family: var(--font-text); font-size: 1rem; line-height: 1.5; }
.mk-explain__label { display: flex; align-items: center; gap: 0.375rem; font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: .06em; color: var(--violet); margin-bottom: 0.375rem; font-weight: 500; }
.mk-explain__meta { margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--t-mono-s); color: var(--text-2); }
.mk-status { font-size: 0.9375rem; line-height: 1.5; }
.mk-status__band { display: inline-flex; align-items: center; gap: 0.375rem; margin-bottom: var(--s-2); }

/* ---- code ---- */
.mk-code { margin: 0; padding: 1.125rem 1.25rem; border-radius: var(--r-code); background: var(--ink); color: var(--cream); font-family: var(--font-mono); font-size: var(--t-mono); line-height: 1.7; white-space: pre; overflow: auto; }
.mk-code .c { color: var(--text-on-dark-3); }
.mk-field--ink .mk-code { background: var(--ink-2); }

/* ---- lists that are not bullets ---- */
/* Rows on rules: a fact per row, the name on the left in the text face, the
   value on the right in mono, wrapping and right-aligned when it is long.
   Never bullets, never same-size cards. */
.mk-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.mk-rows > li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-5); align-items: baseline; padding: 1.125rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); }
.mk-rows > li > :first-child { font-weight: 500; }
.mk-rows .mk-mono { color: var(--text-2); font-size: var(--t-mono); text-align: left; overflow-wrap: anywhere; }
.mk-rows--right .mk-mono { text-align: right; }
.mk-rows--narrow > li { grid-template-columns: 8rem minmax(0, 1fr); }
.mk-rows--on-dark { border-top-color: var(--line-on-dark); }
.mk-rows--on-dark > li { border-bottom-color: var(--line-on-dark); }
.mk-rows--on-dark .mk-mono { color: var(--text-2); }

/* Steps: a timeline. Three columns on one rule, a stamp on the rule at
   each step, a mono time under it, the title, one sentence. Full width;
   never inside a half column. */
.mk-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); counter-reset: step; }
.mk-steps > li { position: relative; padding-top: var(--s-6); border-top: 1px solid var(--line-strong); counter-increment: step; }
.mk-steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; top: -0.875rem; left: 0; padding: 0 0.5rem 0 0; background: var(--cream); font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: .06em; color: var(--text-3); line-height: 1.75rem; }
.mk-steps > li::after { content: ""; position: absolute; top: -0.375rem; right: 0; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--ink); }
.mk-steps > li.is-down::after { background: var(--down); }
.mk-steps > li.is-up::after { background: var(--up); }
.mk-steps .mk-mono { display: block; color: var(--text-3); font-size: var(--t-mono); margin-bottom: var(--s-3); }
.mk-steps h3 { margin: 0 0 var(--s-2); font-family: var(--font-display); font-size: var(--t-title); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; }
.mk-steps p { margin: 0; font-size: var(--t-body); color: var(--text-2); max-width: 32ch; }
.mk-field--ink .mk-steps > li, .mk-field--cobalt .mk-steps > li, .mk-field--violet .mk-steps > li { border-top-color: var(--line-on-dark); }
.mk-field--ink .mk-steps > li::before, .mk-field--cobalt .mk-steps > li::before, .mk-field--violet .mk-steps > li::before { background: inherit; color: var(--text-on-dark-3); }
.mk-field--ink .mk-steps > li::after, .mk-field--cobalt .mk-steps > li::after, .mk-field--violet .mk-steps > li::after { background: var(--cream); }
.mk-field--ink .mk-steps p, .mk-field--cobalt .mk-steps p, .mk-field--violet .mk-steps p { color: var(--text-on-dark-2); }

/* ---- plans ---- */
.mk-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.mk-plan { border: 2px solid var(--ink); border-radius: var(--r-card-l); padding: 1.75rem; display: flex; flex-direction: column; gap: var(--s-4); min-height: 20rem; background: var(--cream); color: var(--text); }
.mk-plan h3 { margin: 0; font-family: var(--font-display); font-size: var(--t-title); }
.mk-plan__price { font-family: var(--font-mono); font-size: 2.75rem; letter-spacing: -.02em; line-height: 1; }
.mk-plan__price small { font-size: 0.875rem; letter-spacing: 0; color: var(--text-3); margin-left: 0.375rem; }
.mk-plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); flex: 1; color: var(--text-2); font-size: 0.9375rem; }
/* The plan title row: the name on the left, the Popular tag on the right,
   so the tag takes no height and the three cards stay aligned. */
.mk-plan__title { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.mk-plan__tag { font-size: var(--t-mono-s); background: var(--cream); color: var(--cobalt); border-color: var(--cream); font-weight: 400; }
/* A full-width arrow button: the label on the left, the disc on the right. */
.mk-btn--block { width: 100%; justify-content: space-between; padding-left: 1.5rem; }
.mk-plan__note { margin: calc(var(--s-2) * -1) 0 0; font-family: var(--font-mono); font-size: var(--t-mono-s); color: var(--text-2); }
.mk-plan--cobalt .mk-plan__note { color: rgba(255, 255, 255, .86); }
.mk-plan--cobalt { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.mk-plan--cobalt ul { color: rgba(255, 255, 255, .8); }
.mk-plan--cobalt .mk-plan__price small { color: rgba(255, 255, 255, .86); }
/* Plans table: every limit of every plan, grouped, after the three cards.
   Built to be read, not scanned: a band per group, a rule between every
   column, room in every cell, a glyph beside yes and no, and the committed
   plan on its own ground. The first column is sticky on a phone and the
   plans scroll sideways inside .mk-plantable__scroll; nothing is hidden. */
.mk-plantable__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--gutter-phone) * -1); padding: 0 var(--gutter-phone); }
.mk-plantable { width: 100%; min-width: 48rem; border-collapse: separate; border-spacing: 0; table-layout: fixed; border: 1px solid var(--line-strong); border-radius: var(--r-card); overflow: hidden; background: var(--white); }
.mk-plantable col:first-child { width: 30%; }
.mk-plantable th, .mk-plantable td { text-align: left; vertical-align: middle; padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--line); }
.mk-plantable th + th, .mk-plantable td + td { border-left: 1px solid var(--line); }
.mk-plantable thead th { position: sticky; top: 0; z-index: 2; background: var(--white); vertical-align: bottom; padding-top: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-strong); }
.mk-plantable__plan { display: grid; gap: 0.375rem; }
.mk-plantable__plan b { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; letter-spacing: var(--ls-tight); font-weight: 500; }
.mk-plantable__plan span { font-family: var(--font-text); font-size: var(--t-body-s); color: var(--text-2); font-variant-numeric: tabular-nums; }
.mk-plantable__plan .mk-chip { justify-self: start; margin-bottom: 0.25rem; background: var(--cobalt); color: var(--white); }
.mk-plantable__plan .mk-btn { justify-self: start; margin-top: 0.75rem; }
.mk-plantable th:first-child, .mk-plantable td:first-child { position: sticky; left: 0; z-index: 1; background: var(--white); }
.mk-plantable td:first-child { font-family: var(--font-text); font-size: var(--t-body); font-weight: 500; color: var(--text); }
.mk-plantable td:first-child small { display: block; font-weight: 400; font-size: var(--t-small); line-height: var(--lh-text); color: var(--text-3); margin-top: 0.25rem; max-width: 26ch; }
.mk-plantable td { font-family: var(--font-mono); font-size: var(--t-body); font-variant-numeric: tabular-nums; color: var(--text); }
.mk-plantable td .yes, .mk-plantable td .no { display: inline-flex; align-items: center; gap: 0.625rem; }
.mk-plantable td .yes::before, .mk-plantable td .no::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; flex: none; }
.mk-plantable td .yes::before { background: var(--cobalt); }
.mk-plantable td .no { color: var(--text-2); }
.mk-plantable td .no::before { border: 2px solid var(--line-strong); box-sizing: border-box; }
.mk-plantable tr.same td:not(:first-child) { font-family: var(--font-text); font-size: var(--t-body-s); color: var(--text-2); }
.mk-plantable tr.same td:first-child::after { content: "every plan"; display: inline-block; white-space: nowrap; margin-left: 0.625rem; padding: 0.125rem 0.5rem; border-radius: var(--r-pill); background: var(--cream-2); font-family: var(--font-mono); font-size: var(--t-mono-s); font-weight: 500; color: var(--text-3); vertical-align: 2px; }
.mk-plantable tbody th, .mk-plantable tbody th:first-child { position: static; padding: 0.75rem 1.25rem; background: var(--cream); color: var(--text-3); font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid var(--line-strong); }
.mk-plantable tbody th span { color: var(--text-2); margin-left: 0.75rem; letter-spacing: 0; text-transform: none; font-family: var(--font-text); font-size: var(--t-small); }
.mk-plantable col.is-committed { background: var(--violet-ground); }
.mk-plantable td.is-committed { background: var(--violet-ground); }
.mk-plantable thead th.is-committed { background: var(--violet-ground); }
.mk-plantable tr.same td.is-committed { background: var(--white); }
.mk-plantable__note { margin: var(--s-4) 0 0; font-size: var(--t-small); color: var(--text-3); max-width: var(--measure-l); }
@media (max-width: 56.25em) {
  .mk-plantable { min-width: 44rem; }
  .mk-plantable col:first-child { width: 11rem; }
  .mk-plantable th, .mk-plantable td { padding: 0.875rem 1rem; }
  .mk-plantable th:first-child, .mk-plantable td:first-child { box-shadow: 1px 0 0 var(--line); }
  .mk-plantable td:first-child { font-size: var(--t-body-s); }
  .mk-plantable td:first-child small { display: none; }
  .mk-plantable tr.same td:first-child::after { display: none; }
  .mk-plantable__plan b { font-size: 1.375rem; }
  .mk-plantable__plan .mk-btn { display: none; }
}

.mk-compare { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.mk-compare th, .mk-compare td { text-align: left; padding: 0.875rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.mk-compare th { font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.mk-compare td:first-child { font-weight: 500; }
.mk-compare .mk-mono { color: var(--text-2); }

/* ---- questions (details, no script) ---- */
.mk-faq { border-top: 1px solid var(--line-strong); }
.mk-faq details { border-bottom: 1px solid var(--line); }
.mk-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: 1.125rem 0; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: var(--ls-tight); }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: ""; width: 0.75rem; height: 0.75rem; flex: none; background: linear-gradient(currentColor, currentColor) center / 0.75rem 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 0.75rem no-repeat; transition: transform var(--d-fast) var(--ease); }
.mk-faq details[open] summary::after { transform: rotate(45deg); }
.mk-faq p { margin: 0 0 1.125rem; color: var(--text-2); max-width: var(--measure-l); }

/* ---- forms ---- */
.mk-form { display: flex; flex-direction: column; gap: var(--s-4); max-width: 30rem; }
.mk-field-row { display: flex; flex-direction: column; gap: 0.375rem; }
.mk-label { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; }
.mk-input, .mk-textarea { width: 100%; font: inherit; font-size: 1rem; padding: 0.75rem 0.875rem; border-radius: var(--r-code); border: 1px solid var(--line-strong); background: var(--white); color: var(--text); }
.mk-input:focus, .mk-textarea:focus { outline: 2px solid var(--cobalt); outline-offset: 0; border-color: var(--cobalt); }
.mk-textarea { min-height: 8.75rem; resize: vertical; }
.mk-hint { font-size: var(--t-small); color: var(--text-3); }
.mk-error { font-size: var(--t-small); color: var(--down-text); }
.mk-input--error { border-color: var(--down-text); }

/* ---- rules and footer ---- */
.mk-rule { display: flex; align-items: center; gap: 0.875rem; font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.mk-rule::before, .mk-rule::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.mk-rule::before { flex: 0 0 2rem; }
.mk-footer { padding: var(--s-8) 0 var(--s-7); border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--text-3); }
.mk-footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.mk-footer__col { display: flex; flex-direction: column; gap: var(--s-2); }
.mk-footer__col b { color: var(--text); font-family: var(--font-display); }
.mk-footer__col a { color: var(--text-2); }
.mk-footer__legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--t-mono-s); }
.mk-live { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); }

/* ---- 3D objects ---- */
/* The page hero for every page that is not home: copy on the left, the
   page's blueprint object on the right, under the fixed nav. */
.mk-hero { padding: 8rem 0 var(--s-8); }
.mk-hero .mk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.mk-hero__copy { container-type: inline-size; display: grid; gap: var(--s-5); justify-items: start; }
.mk-hero__copy .mk-display-xl { font-size: min(clamp(2.6rem, 4.4vw, 4.4rem), 11.8cqi); max-width: 16ch; }
.mk-hero__copy .mk-lead { max-width: 44ch; }
.mk-hero--solo .mk-wrap { grid-template-columns: minmax(0, 1fr); }
.mk-hero--solo .mk-hero__copy { justify-items: center; text-align: center; }
.mk-hero--solo .mk-display-xl { max-width: 16ch; }
.mk-hero--solo .mk-lead { max-width: 46ch; }
.mk-page-kicker { margin: 0; font-family: var(--font-mono); font-size: var(--t-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--text-3); display: inline-flex; align-items: center; gap: 0.5rem; }
.mk-page-kicker .mk-icon { width: 1rem; height: 1rem; color: var(--cobalt); }

/* The phone menu: a full-screen cream sheet over everything. The four
   products in the same tiles as the desktop menu, then the other pages,
   then Sign in and Start free pinned to the bottom within thumb reach. */
.mk-sheet { position: fixed; inset: 0; z-index: 40; background: var(--cream); color: var(--text); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.mk-sheet[hidden] { display: none; }
.mk-sheet__top { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--gutter-phone); border-bottom: 1px solid var(--line); }
.mk-sheet__close { display: inline-flex; color: var(--text); }
.mk-sheet__body { overflow-y: auto; padding: var(--s-4) var(--gutter-phone) var(--s-6); display: grid; gap: 0.25rem; align-content: start; }
.mk-sheet__label { margin: var(--s-4) 0 var(--s-2); font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mk-sheet__label:first-child { margin-top: 0; }
.mk-sheet .mk-nav__item { padding: 0.5rem; align-items: center; }
.mk-sheet .mk-nav__item span { display: none; }
.mk-sheet .mk-nav__item b { margin: 0; font-size: 1.125rem; }
.mk-sheet__links { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mk-sheet__links a { display: flex; align-items: center; min-height: var(--tap); padding: 0 0.5rem; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-family: var(--font-display); font-size: var(--t-body); font-weight: 500; }
.mk-sheet__links a[aria-current="page"] { color: var(--cobalt); }
.mk-sheet__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) var(--gutter-phone) calc(var(--s-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--cream); }
body.has-sheet { overflow: hidden; }
@media (min-width: 56.26em) { .mk-sheet { display: none; } }

/* A field in error: the hint becomes the error, in the down colour, with
   the same words a screen reader hears. */
.mk-field-row.is-invalid .mk-hint { color: var(--down-text); }
.mk-field-row.is-invalid .mk-input { border-color: var(--down-text); }

/* A select is an input with the chevron drawn in, so it matches the
   fields around it in every browser. */
select.mk-input { -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6B64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.875rem center / 1rem; }
select.mk-input:invalid, select.mk-input option[disabled] { color: var(--text-3); }
.mk-field-row[hidden], .mk-banner[hidden] { display: none; }

/* The banner inside a plate: the same note, down-coloured when a thing
   failed, left-aligned over the form it is about. */
.mk-banner.mk-banner--down { background: var(--down-ground); border-bottom-color: rgba(199, 49, 28, .25); }
.mk-banner.mk-banner--down .mk-icon { color: var(--down-text); }
.mk-banner.mk-banner--down a { color: var(--down-text); text-decoration: underline; text-underline-offset: .18em; }
.mk-plate .mk-banner { justify-content: flex-start; align-items: flex-start; text-align: left; padding: 0.875rem 1rem; border: 1px solid rgba(199, 49, 28, .25); border-radius: var(--r-code); line-height: var(--lh-text); }
.mk-plate .mk-banner .mk-icon { margin-top: 0.1875rem; }

/* The sent state replaces the form inside the same plate. */
.mk-form.is-sent > :not(.mk-sent):not(.mk-plate__head) { display: none; }
.mk-sent { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-5) 0 var(--s-3); }
.mk-sent[hidden] { display: none; }
.mk-sent__tile { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: var(--r-code); background: var(--up-ground); color: var(--up); }
.mk-sent__tile .mk-icon { width: 1.5rem; height: 1.5rem; }
.mk-sent h3 { margin: 0; font-family: var(--font-display); font-size: var(--t-title); font-weight: 500; }
.mk-sent p { margin: 0; color: var(--text-2); max-width: 36ch; }
.mk-sent .mk-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* The toast: one short line at the bottom, ink on cream, gone after a few
   seconds; announced to screen readers through a polite live region. */
.mk-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 50; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1.125rem 0.75rem 0.875rem; border-radius: var(--r-pill); background: var(--ink); color: var(--cream); font-size: var(--t-body-s); box-shadow: var(--shadow-lift); transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease); max-width: calc(100vw - 2rem); }
.mk-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.mk-toast .mk-icon { width: 1.125rem; height: 1.125rem; color: #6FD39B; flex: none; }

/* The banner: one line across the top of a page for a site-wide note, a
   planned maintenance or a notice, closable. */
.mk-banner { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: 0.625rem var(--gutter); background: var(--violet-ground); color: var(--text); font-size: var(--t-small); text-align: center; border-bottom: 1px solid rgba(91, 75, 224, .25); }
.mk-banner .mk-icon { width: 1rem; height: 1rem; color: var(--violet); flex: none; }
.mk-banner a { color: var(--violet-2); font-weight: 500; }
.mk-banner--degraded { background: var(--degraded-ground); border-bottom-color: rgba(143, 83, 0, .25); }
.mk-banner--degraded .mk-icon { color: var(--degraded); }
@media (prefers-reduced-motion: reduce) { .mk-toast { transition: none; } }

/* Visually hidden, read by screen readers: section headings that keep the
   outline in order where the design shows no heading. */
.mk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Tap targets. Standalone links keep their look but get the full tap
   height; links inside running text are exempt. */
.mk-logo { min-height: 2.75rem; }
.mk-with-icon.mk-link, .mk-planstrip__foot a, .mk-crumb a, .mk-read__meta a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 56.25em) { .mk-read__toc a { min-height: 2.75rem; display: flex; align-items: center; } }

/* The page crumb (replaces the mono kicker): the Product menu's violet
   icon tile, the parent section as a quiet link, a slash, and the page name
   in the display face. */
.mk-crumb { display: inline-flex; align-items: center; gap: 0.625rem; font-family: var(--font-display); font-size: var(--t-body-s); font-weight: 500; }
.mk-crumb__tile { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-code); background: var(--violet-ground); color: var(--violet); margin-right: 0.125rem; }
.mk-crumb__tile .mk-icon { width: 1.125rem; height: 1.125rem; stroke-width: 1.75; }
.mk-crumb a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.mk-crumb a:hover { color: var(--text); border-bottom-color: currentColor; }
.mk-crumb__sep { color: var(--text-3); font-weight: 400; }
.mk-crumb [aria-current="page"] { color: var(--text); }
.mk-hero--solo .mk-crumb { justify-self: center; }

/* A section head: a chapter rule, a headline, one lead. */
.mk-head { display: grid; gap: var(--s-4); margin: var(--s-6) 0 var(--s-7); max-width: none; }
.mk-head .mk-lead, .section-head .mk-lead { max-width: 46ch; text-wrap: pretty; }

/* Two columns of facts and an object or plate, used on a dark field. */
.mk-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }

/* The billing switch: two pills in a capsule, the pressed one filled. */
.mk-toggle { display: inline-flex; padding: 0.25rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--white); gap: 0.25rem; }
.mk-toggle button { font: inherit; font-family: var(--font-display); font-weight: 500; font-size: var(--t-body-s); border: 0; background: none; color: var(--text-2); height: var(--control-s); padding: 0 1.125rem; border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; }
.mk-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.mk-toggle small { font-family: var(--font-mono); font-size: var(--t-mono-s); color: inherit; opacity: .8; }

/* The plan strip on a feature page: the three plans in one line each for
   the limits that page is about, and a link to the full table. */
.mk-planstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: var(--r-card-l); background: var(--white); overflow: hidden; }
.mk-planstrip > div { padding: 1.5rem 1.5rem 1.625rem; display: grid; gap: 0.625rem; align-content: start; }
.mk-planstrip > div + div { border-left: 1px solid var(--line); }
.mk-planstrip > .is-committed { background: var(--violet-ground); }
.mk-planstrip h3 { margin: 0; font-family: var(--font-display); font-size: var(--t-title); font-weight: 500; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.mk-planstrip h3 span { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 400; color: var(--text-2); }
.mk-planstrip ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.375rem; font-size: var(--t-body-s); color: var(--text-2); }
.mk-planstrip__foot { margin-top: var(--s-4); display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; color: var(--text-2); font-size: var(--t-body-s); }

@media (max-width: 56.25em) {
  .mk-hero { padding-top: 6.5rem; }
  .mk-hero .mk-wrap, .mk-duo { grid-template-columns: 1fr; gap: var(--s-6); }
  .mk-planstrip { grid-template-columns: 1fr; }
  .mk-planstrip > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* The ledger: numbered statements on hairlines, the name on the left and
   the sentence on the right with a mono line to check it by. The trust
   page's shape; never same-size cards. */
.mk-ledger { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); counter-reset: ledger; }
.mk-ledger > li { display: grid; grid-template-columns: 3rem minmax(0, 18rem) minmax(0, 1fr); gap: var(--s-6); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); counter-increment: ledger; }
.mk-ledger > li::before { content: counter(ledger, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--t-mono-s); color: var(--cobalt); padding-top: 0.375rem; }
.mk-ledger h3 { margin: 0; font-family: var(--font-display); font-size: var(--t-title); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 500; }
.mk-ledger p { margin: 0 0 var(--s-3); color: var(--text-2); max-width: var(--measure-l); }
.mk-ledger .mk-mono { font-size: var(--t-mono-s); color: var(--text-3); }

/* Reading layout for legal pages and guides: a sticky contents rail on
   the left, the text at a readable measure beside it. */
.mk-read { display: grid; grid-template-columns: 15rem minmax(0, 42rem); gap: var(--s-8); align-items: start; }
.mk-read__toc { position: sticky; top: 6rem; display: grid; gap: 0.125rem; font-size: var(--t-small); border-left: 1px solid var(--line-strong); }
.mk-read__toc b { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 500; padding: 0 0 var(--s-2) var(--s-4); }
.mk-read__toc a { color: var(--text-2); text-decoration: none; padding: 0.3125rem 0 0.3125rem var(--s-4); margin-left: -1px; border-left: 2px solid transparent; }
.mk-read__toc a:hover { color: var(--text); }
.mk-read__toc a[aria-current="true"] { color: var(--cobalt); border-left-color: var(--cobalt); }
.mk-read__body { font-size: var(--t-body); line-height: var(--lh-loose); }
.mk-read__body h2 { margin: var(--s-8) 0 var(--s-3); font-family: var(--font-display); font-size: 1.625rem; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); scroll-margin-top: 6rem; }
.mk-read__body h2:first-child { margin-top: 0; }
.mk-read__body h3 { margin: var(--s-6) 0 var(--s-2); font-family: var(--font-display); font-size: var(--t-title); font-weight: 500; }
.mk-read__body p { margin: 0 0 var(--s-4); max-width: 35rem; }
.mk-read__body li { max-width: 34rem; }
.mk-read__body ul, .mk-read__body ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; display: grid; gap: var(--s-2); }
.mk-read__body code { font-family: var(--font-mono); font-size: .9em; background: var(--cream-2); padding: 0.0625rem 0.375rem; border-radius: var(--r-chip); }
.mk-read > * { min-width: 0; }
.mk-read__body .mk-code { margin: 0 0 var(--s-5); overflow-x: auto; white-space: pre; }
.mk-read__meta { font-family: var(--font-mono); font-size: var(--t-mono-s); color: var(--text-3); display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* The entity block: who the company is, in full. Lives on the contact
   page and at the top of the legal pages, never in the footer (D-191). */
.mk-entity { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--white); }
.mk-entity > div { padding: 0.875rem 1.125rem; display: grid; gap: 0.1875rem; border-right: 1px solid var(--line); }
.mk-entity > div:last-child { border-right: 0; }
.mk-entity span { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mk-entity b { font-weight: 500; font-size: var(--t-body-s); }

/* Contact routes: one row per address, the address a mono link, the
   promise beside it. */
.mk-routes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.mk-routes > li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.mk-routes .mk-icon { width: 2.5rem; height: 2.5rem; padding: 0.625rem; box-sizing: border-box; border-radius: var(--r-code); background: var(--violet-ground); color: var(--violet); stroke-width: 1.75; }
/* Every address card is one shape: the title, the address on its own line
   under it, then the description (#543). */
.mk-routes h3 { margin: 0 0 0.375rem; font-family: var(--font-display); font-size: var(--t-body); font-weight: 500; display: grid; justify-items: start; }
.mk-routes h3 a { display: inline-flex; align-items: center; min-height: 2.75rem; margin: -0.625rem 0; font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 400; color: var(--cobalt); }
.mk-routes p { margin: 0; color: var(--text-2); font-size: var(--t-body-s); }

/* Docs: a search field and the guides as rows by group. */
.mk-search { display: flex; align-items: center; gap: var(--s-3); height: 3.5rem; padding: 0 1.25rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--white); max-width: 36rem; width: 100%; }
.mk-search input { flex: 1; border: 0; background: none; font: inherit; font-size: var(--t-body); color: var(--text); outline: none; min-width: 0; }
.mk-search kbd { font-family: var(--font-mono); font-size: var(--t-mono-s); color: var(--text-3); border: 1px solid var(--line-strong); border-radius: var(--r-chip); padding: 0.0625rem 0.375rem; }
.mk-search:focus-within { outline: 3px solid rgba(31, 63, 229, .35); outline-offset: 2px; }
.mk-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-8); }
.mk-guides h3 { margin: 0 0 var(--s-3); font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 500; display: flex; align-items: center; gap: 0.5rem; }
.mk-guides h3 .mk-icon { width: 1rem; height: 1rem; color: var(--cobalt); }
.mk-guides ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.mk-guides li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: baseline; padding: 0.875rem 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.mk-guides li a:hover b { color: var(--cobalt); }
.mk-guides li b { font-weight: 500; }
.mk-guides li span { font-family: var(--font-mono); font-size: var(--t-mono-s); color: var(--text-3); }

/* An error page: one field, one code, one line, one button. */
.mk-errpage { min-height: 100vh; display: grid; align-content: center; padding: 7rem 0 var(--s-8); }
.mk-errpage .mk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.mk-error__code { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .08em; color: var(--text-3); margin: 0 0 var(--s-4); }

@media (max-width: 56.25em) {
  .mk-ledger > li { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s-3) var(--s-4); }
  .mk-ledger > li > div { grid-column: 2; }
  .mk-read { grid-template-columns: 1fr; gap: var(--s-6); }
  .mk-read__toc { position: static; }
  .mk-guides, .mk-errpage .mk-wrap { grid-template-columns: 1fr; }
  .mk-entity > div { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* The section rail: a fixed column of numbered ticks on the right edge of
   a long page. The current section is cobalt with a longer tick; hovering
   or focusing the rail opens every name to the left. It lives in a cream
   capsule so it reads over every field, appears once the hero has scrolled
   away, and only on screens wide enough to keep it clear of the content. */
.mk-rail { position: fixed; right: 0.75rem; top: 50%; z-index: 25; transform: translate(0.5rem, -50%); opacity: 0; pointer-events: none; transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease); display: none; }
.mk-rail.is-shown { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.mk-rail ol { margin: 0; padding: 0.625rem 0.25rem; list-style: none; display: grid; gap: 0.125rem; background: rgba(244, 241, 232, .92); border: 1px solid var(--line-strong); border-radius: var(--r-pill); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mk-rail a { position: relative; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.75rem; padding: 0; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3); text-decoration: none; font-variant-numeric: tabular-nums; }
.mk-rail a::after { content: ""; width: 1rem; height: 2px; border-radius: 1px; background: currentColor; transform: scaleX(.5); transform-origin: right center; transition: transform var(--d-fast) var(--ease); }
.mk-rail a:hover, .mk-rail a:focus-visible { color: var(--text); }
.mk-rail a[aria-current="true"] { color: var(--cobalt); }
.mk-rail a[aria-current="true"]::after { transform: scaleX(1); height: 3px; }
.mk-rail__name b { font-family: var(--font-mono); font-weight: 400; font-size: 0.75rem; opacity: .7; margin-right: 0.5rem; }
.mk-rail__name { position: absolute; right: calc(100% + 0.625rem); top: 50%; transform: translate(0.25rem, -50%); white-space: nowrap; padding: 0.25rem 0.625rem; border-radius: var(--r-pill); background: var(--ink); color: var(--cream); font-family: var(--font-text); font-size: var(--t-small); opacity: 0; pointer-events: none; transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.mk-rail:hover .mk-rail__name, .mk-rail:focus-within .mk-rail__name { opacity: 1; transform: translate(0, -50%); }
.mk-rail a[aria-current="true"] .mk-rail__name { background: var(--cobalt); color: #fff; }
@media (min-width: 87.5em) { .mk-rail { display: block; } }
@media (prefers-reduced-motion: reduce) { .mk-rail, .mk-rail a::after, .mk-rail__name { transition: none; } }

/* A blueprint object (D-190): a small drawing with a figure caption,
   rendered by assets/blueprint.js from data-bp. Transparent; it takes the
   field's colour for its faces and cream or cobalt for its lines. */
.mk-bp { margin: 0; display: grid; gap: var(--s-2); }
.mk-bp__stage { position: relative; height: 14rem; }
.mk-bp__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mk-bp--l .mk-bp__stage { height: 22rem; }
.mk-bp figcaption { font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: .04em; color: var(--text-3); border-top: 1px solid var(--line); padding-top: var(--s-2); }
.mk-field--violet .mk-bp figcaption, .mk-field--cobalt .mk-bp figcaption { color: rgba(255, 255, 255, .85); }
.mk-act__aside { display: grid; gap: var(--s-5); }
@media (max-width: 56.25em) { .mk-bp__stage { height: 11rem; } .mk-bp--l .mk-bp__stage { height: 16rem; } }

.mk-scene { position: relative; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 16 / 10; }
.mk-scene canvas, .mk-scene img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mk-scene img { object-fit: cover; }
.mk-scene canvas { opacity: 0; transition: opacity var(--d-slow) var(--ease); }
.mk-scene--live canvas { opacity: 1; }
.mk-scene--live img { opacity: 0; transition: opacity var(--d-slow) var(--ease); }
.mk-scene--wide { aspect-ratio: auto; height: min(54vh, 30rem); border-radius: 0; width: 100vw; left: 50%; transform: translateX(-50%); }

/* ---- motion ---- */
.mk-rv { opacity: 0; transform: translateY(0.875rem); transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease); }
.mk-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mk-act { position: relative; top: 0; min-height: 0; }
  .mk-rv { opacity: 1; transform: none; transition: none; }
  .mk-scene canvas { display: none; }
  .mk-scene--live img { opacity: 1; }
}

/* ---- phone ---- */
@media (max-width: 56.25em) {
  .mk-wrap { padding: 0 var(--gutter-phone); }
  .mk-act { position: relative; top: 0; min-height: 0; padding: var(--s-9) 0 var(--s-8); }
  .mk-act .mk-wrap, .mk-split, .mk-split--wide-right { grid-template-columns: 1fr; gap: var(--s-6); }
  .mk-act .mk-act__aside { grid-column: 1; grid-row: auto; }
  .mk-field { padding: var(--s-8) 0; }
  .mk-nav__links a:not(.mk-btn), .mk-nav__menu { display: none; }
  .mk-burger { display: inline-flex; }
  .mk-steps, .mk-plans { grid-template-columns: 1fr; gap: var(--s-5); }
  .mk-rows > li { grid-template-columns: 1fr; gap: 0.25rem; }
  .mk-footer__grid { grid-template-columns: 1fr 1fr; }
  .mk-btn { height: var(--tap); }
  .mk-display-xl { font-size: clamp(2.4rem, 11vw, 3.4rem); }
}