/* ===========================================================================
   ExtensibilityCo marketing site - the marketing layer.

   TWO-LAYER RULE, and it is the whole architecture of this stylesheet:

     db-vendor.css   the product's palette and shared components, copied
                     verbatim out of the DataBridge application by
                     tools/extract-db-ui.py. Never edited here, never edited
                     by hand at all.

     site.css        everything a landing page needs that an application does
                     not: a display type scale, a reading measure, section
                     rhythm, screenshot framing, marketing-only components.

   Every class this file defines is prefixed `mk-`. Every class it consumes
   from the product is prefixed `db-`. Nothing in this file redefines a `db-`
   rule, so the two layers cannot fight over specificity and the app's
   components look here exactly as they look in the product.

   The only `db-` tokens this file adds are marketing extensions, grouped and
   named below so they are obviously not part of the product's system.
   =========================================================================== */

:root {
    /* --- EXTENSION 1: display scale -------------------------------------
       The application's largest type is the 19px .db-page-title. A landing
       page needs a headline, so the product's scale continues upward at the
       same weight and the same tight tracking. */
    --mk-display: clamp(2rem, 1.15rem + 3.4vw, 3.25rem);
    --mk-h2: clamp(1.2rem, 1.02rem + 0.75vw, 1.55rem);

    /* --- EXTENSION 2: reading measure ------------------------------------
       The application sets no prose. A landing page is mostly prose. */
    --mk-measure: 64ch;

    /* --- EXTENSION 3: accessible secondary text --------------------------
       Measured, not guessed (tools/pick-quiet.py). The product's own secondary
       tokens do not clear WCAG AA 4.5:1 for small text:

           light  --db-muted #6b7482  worst case 3.80:1   FAILS
           light  --db-faint #98a1ad  worst case 2.10:1   FAILS
           dark   --db-muted #8b95a3  worst case 4.72:1   passes
           dark   --db-faint #626c7a  worst case 2.69:1   FAILS

       That is fine inside a desk tool an operator chooses to run; it is not fine
       on a public marketing site, where small grey text is most of the page. So
       every caption, eyebrow, column header and meta line on this site uses
       --mk-quiet instead: the same blue-grey hue ramp, moved just far enough to
       clear 4.5:1 against the worst background it ever sits on.

       This is also a real finding about the application itself - the same two
       tokens are used for small text throughout the product. Fixing it there is
       a change to DataBridge, which this work deliberately does not touch. */
    --mk-quiet: #62676e;  /* light: worst case 4.59:1 */

    /* --- EXTENSION 4: page frame ----------------------------------------- */
    --mk-page: 1180px;
    --mk-gutter: 16px;
    --mk-gap: 24px;
    --mk-gap-lg: 40px;
}

/* --mk-quiet is the one marketing token that must change with the theme. It is
   declared in all three states for the same reason the product declares its own
   palette three times: an explicit toggle has to beat the system preference. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --mk-quiet: #8a929c; }  /* dark: worst case 4.54:1 */
}
:root[data-theme="dark"] { --mk-quiet: #8a929c; }

/* ---------------------------------------------------------------------------
   ACCESSIBILITY OVERRIDES on vendored rules.

   These are the only places this file touches a `db-` selector, and each one is
   here because the product's rule fails WCAG AA on a public page. Each override
   changes colour only - never size, spacing or structure - so the components
   still look and behave exactly like the application's.
   --------------------------------------------------------------------------- */

/* The app hard-codes white on the brand mark. White on the light theme's accent
   is 6.44:1, but on the dark theme's lighter accent it is 2.36:1. --db-on-accent
   is the token that already solves this (7.98:1 dark, 6.44:1 light); the app
   simply does not use it here. */
.db-brand-mark { color: var(--db-on-accent); }

/* 11px uppercase labels on --db-faint: 3.22:1 dark, 2.10:1 light. */
.db-cmdgroup-label,
.db-fact .db-k { color: var(--mk-quiet); }

/* 11px uppercase column headers on --db-muted: 4.10:1 light. */
.db-table thead th { color: var(--mk-quiet); }

/* ---------------------------------------------------------------------------
   RESPONSIVE OVERRIDES on vendored rules.

   Below 767px the application hides its brand name and its command-group
   labels. That is the right call inside a tool: the operator already knows what
   they launched, and horizontal space is better spent on the work. On a public
   marketing site it is the wrong call twice over - the brand name is the single
   most important thing on the page, and the group labels are what make the
   navigation legible rather than a loose row of words.

   Higher specificity than the app's rules, so this holds at every width without
   needing to restate the breakpoint.
   --------------------------------------------------------------------------- */
.mk-topbar .db-brand-name,
.mk-foot-links .db-brand-name { display: block; white-space: nowrap; }
.mk-cmdbar .db-cmdgroup-label { display: block; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--db-app);
    color: var(--db-ink);
    font-family: var(--db-font-ui);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
button { font: inherit; color: inherit; }

a { color: var(--db-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--db-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* App.razor's <FocusOnNavigate Selector="h1" /> gives the heading tabindex="-1"
   and focuses it on every route change, so Chromium matched :focus-visible and
   drew a 2px box around the headline on first paint - which read as an empty
   input field, not a heading. Focus still moves (screen readers announce the new
   page, which is the point); only the ring on a non-interactive heading is
   suppressed. Real interactive controls keep theirs. */
h1[tabindex]:focus,
h1[tabindex]:focus-visible { outline: none; }

.mk-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 8px 14px;
    background: var(--db-accent);
    color: var(--db-on-accent);
    font-weight: 600;
}
.mk-skip:focus { left: 8px; top: 8px; text-decoration: none; }

/* The top bar and command bar are both sticky, so an in-page anchor would land
   its target underneath 86px of chrome. */
[id] { scroll-margin-top: calc(var(--db-topbar-h) + 42px + 14px); }

.mk-sep { color: var(--db-line-strong); margin: 0 6px; }
.mk-nowrap { white-space: nowrap; }

/* Visible to screen readers only - used for table column headers whose meaning
   is obvious sighted (an action column) but which must still be announced.

   Deliberately NOT `position: absolute`, which is what the usual .sr-only recipe
   uses. These spans live inside a 640px table held in a 366px scroll container;
   an absolutely positioned element is laid out against the initial containing
   block at its static position, so it escaped the scroll container entirely and
   stretched the root element to 549px at phone width - scrolling the whole page
   sideways because of a header nobody can see. An inline-block clipped to 1px
   stays in normal flow, so it cannot escape anything. */
.mk-sr {
    display: inline-block;
    width: 1px; height: 1px;
    padding: 0; margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ===========================================================================
   CHROME - the application's top bar, command bar and status bar, carrying
   the site's navigation instead of the product's.
   =========================================================================== */

.page { display: flex; flex-direction: column; min-height: 100vh; }

.mk-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    flex: none;
}

.mk-topbar .db-brand { text-decoration: none; }
.mk-topbar .db-brand:hover { text-decoration: none; }
.mk-brand-accent { color: var(--db-accent); }

.mk-topbar-spacer { margin-left: auto; }

/* The command bar is the site nav. It is the app's own component, so the
   group labels (PRODUCT / PLANS / COMPANY) read exactly like the product's
   RECORD / DATA / VIEW groups. */
.mk-cmdbar {
    position: sticky;
    top: var(--db-topbar-h);
    z-index: 29;
    flex: none;
}

.mk-cmdbar .db-cmd.mk-on {
    background: var(--db-accent-soft);
    border-color: var(--db-accent-line);
    color: var(--db-accent-deep);
    font-weight: 600;
}

.mk-cmdbar-spacer { margin-left: auto; }

.mk-stamp {
    font-family: var(--db-font-mono);
    font-size: 11px;
    color: var(--mk-quiet);
    white-space: nowrap;
    padding-left: 12px;
}

/* ===========================================================================
   PAGE FRAME
   =========================================================================== */

main {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--mk-page);
    margin: 0 auto;
    padding-inline: var(--mk-gutter);
    padding-block: 30px 48px;
    display: grid;
    /* minmax(0, 1fr), not the implicit `auto`. An auto track takes its minimum
       from its items' min-content width, so one wide table inside a panel would
       widen the track past the viewport and scroll the whole page sideways -
       which is exactly what the phone-width check caught on /pricing and
       /marketplace. Pinning the minimum to 0 keeps overflow inside the panel,
       where .mk-tablewrap scrolls it. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mk-gap);
    align-content: start;
}

.db-panel-head .db-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--mk-quiet);
    white-space: nowrap;
}

/* ===========================================================================
   PAGE HEAD - the product's title block, at display scale.
   =========================================================================== */

.mk-head {
    display: grid;
    gap: 14px;
    padding-block: 12px 6px;
}

.mk-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mk-quiet);
}

.mk-title {
    font-size: var(--mk-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.07;
    color: var(--db-ink);
    max-width: 20ch;
    text-wrap: balance;
}
.mk-title .mk-quiet { color: var(--db-muted); }

.mk-lede {
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--db-ink-2);
    max-width: var(--mk-measure);
}

.mk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 4px;
}
.mk-actions .mk-note { font-size: 12px; color: var(--mk-quiet); }

.db-btn.mk-lg { height: 34px; padding: 0 16px; font-size: 13.5px; }

/* ===========================================================================
   FACT STRIP - the product's record header, used as the at-a-glance row.
   =========================================================================== */

.mk-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--db-surface);
    border: 1px solid var(--db-line);
    border-radius: var(--db-radius-lg);
    box-shadow: var(--db-shadow-1);
}
.mk-facts .db-fact { border-right: 1px solid var(--db-line-soft); }
.mk-facts .db-fact:last-child { border-right: 0; }

/* ===========================================================================
   SECTION CONTENT
   =========================================================================== */

.mk-h2 {
    font-size: var(--mk-h2);
    font-weight: 700;
    letter-spacing: -0.008em;
    line-height: 1.2;
    color: var(--db-ink);
    text-wrap: balance;
}

.mk-body {
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--db-ink-2);
    max-width: var(--mk-measure);
}

.mk-body + .mk-body { margin-top: 12px; }
.mk-h2 + .mk-body { margin-top: 8px; }

.mk-panel-intro { display: grid; gap: 8px; margin-bottom: 20px; }
.mk-panel-intro:last-child { margin-bottom: 0; }

/* Bulleted proof list - a ruled list, not a dotted one. Matches the way the
   product lists facts in an inspector. */
.mk-list { display: grid; gap: 0; }

.mk-list li {
    position: relative;
    padding: 7px 0 7px 18px;
    border-top: 1px solid var(--db-line-soft);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--db-ink-2);
    max-width: var(--mk-measure);
}
.mk-list li:first-child { border-top: 0; }
.mk-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 15px;
    width: 6px;
    height: 1px;
    background: var(--db-line-strong);
}
.mk-list li strong { color: var(--db-ink); font-weight: 600; }

/* Included / excluded, used by pricing. Replaces the check and cross
   characters that were sitting in the markup as corrupt bytes. */
.mk-list li.mk-yes::before,
.mk-list li.mk-no::before {
    top: 13px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid;
    background: transparent;
}
.mk-list li.mk-yes::before { border-color: var(--db-ok-line); background: var(--db-ok-bg); }
.mk-list li.mk-no::before { border-color: var(--db-line); background: transparent; }
.mk-list li.mk-no { color: var(--mk-quiet); }

/* ===========================================================================
   SCREENSHOT PANELS

   A screenshot is framed as a panel, and the panel's own parts do the framing:
   the panel head is the window's title bar, the image is the window's content,
   and the caption strip below is its status bar. The chrome around the picture
   of the product is the same chrome as the page around it.
   =========================================================================== */

.mk-shot { display: block; }

.mk-shot img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--db-surface-3);
}

.mk-shot figcaption {
    padding: 9px 13px;
    background: var(--db-surface-2);
    border-top: 1px solid var(--db-line);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--mk-quiet);
}

.mk-shot figcaption strong { color: var(--db-ink-2); font-weight: 600; }

/* ===========================================================================
   FEATURE ROWS - text panel beside screenshot panel, alternating.
   =========================================================================== */

.mk-row {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: var(--mk-gap);
    align-items: start;
}

/* The modifier is named in the breakpoint below as well. A previous version of
   this site set the reversed columns with one extra class of specificity, so
   the mobile breakpoint could not unset them and reversed rows stayed two-up
   on phones. Both rules name .mk-reverse; neither can outrank the other. */
.mk-row.mk-reverse > :first-child { order: 2; }

/* ===========================================================================
   GRIDS
   =========================================================================== */

.mk-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-gap); align-items: start; }
.mk-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mk-gap); align-items: start; }

.db-modstrip.mk-modstrip { grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); }

.mk-modtile-top { display: flex; align-items: baseline; gap: 8px; }
.mk-modtile-price {
    margin-left: auto;
    font-family: var(--db-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--db-ink);
    font-variant-numeric: tabular-nums;
}
.mk-modtile-desc { font-size: 12.5px; line-height: 1.5; color: var(--mk-quiet); }

/* ===========================================================================
   CARDS - every card is a panel, so cards and sections share one language.
   =========================================================================== */

.mk-card { display: flex; flex-direction: column; height: 100%; }
.mk-card .db-panel-body { display: grid; gap: 10px; align-content: start; flex: 1; }
.mk-card .mk-body { max-width: none; }
.mk-card .mk-list li { max-width: none; }

/* Featured card - the accent belongs on the head, never on the body, so body
   text never sits on the accent fill. */
.mk-card.mk-featured { border-color: var(--db-accent-line); box-shadow: var(--db-shadow-2); }
.mk-card.mk-featured > .db-panel-head {
    background: var(--db-accent);
    border-bottom-color: var(--db-accent);
}
.mk-card.mk-featured > .db-panel-head h2 { color: var(--db-on-accent); }
.mk-card.mk-featured > .db-panel-head .db-right { color: var(--db-on-accent); opacity: 0.85; }

.mk-price {
    font-family: var(--db-font-mono);
    font-size: 27px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--db-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.mk-price small {
    font-family: var(--db-font-ui);
    font-size: 12px;
    font-weight: 500;
    color: var(--mk-quiet);
    letter-spacing: 0;
}
.mk-price-desc { font-size: 13px; color: var(--mk-quiet); }

.mk-card-foot { margin-top: auto; padding-top: 4px; }
.mk-btn-block { display: flex; width: 100%; justify-content: center; }

/* ===========================================================================
   TABLES - the marketplace catalogue and any dense list.
   =========================================================================== */

.mk-tablewrap { overflow-x: auto; }
.mk-tablewrap .db-table { min-width: 640px; }

.db-table tfoot td {
    padding: 8px 12px;
    border-top: 1px solid var(--db-line);
    background: var(--db-surface-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--db-ink-2);
}

.mk-tags { display: flex; flex-wrap: wrap; gap: 4px; }

.mk-tag {
    font-family: var(--db-font-mono);
    font-size: 11px;
    padding: 1px 5px;
    border: 1px solid var(--db-line-soft);
    border-radius: 2px;
    background: var(--db-surface-2);
    color: var(--mk-quiet);
    white-space: nowrap;
}

.mk-filters { display: flex; flex-wrap: wrap; gap: 6px; }

button.db-chip { cursor: pointer; }
button.db-chip:hover { border-color: var(--db-line-strong); color: var(--db-ink); }
button.db-chip.mk-on {
    background: var(--db-accent);
    border-color: var(--db-accent);
    color: var(--db-on-accent);
}

/* ===========================================================================
   FORMS - the application's fields are MudBlazor components, which this site
   does not load, so the controls are rebuilt natively from the same tokens to
   match the product's outlined-field treatment.
   =========================================================================== */

.mk-field-full { grid-column: span 12; }

.mk-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mk-quiet);
    margin-bottom: 5px;
}
.mk-label .mk-req { color: var(--db-crit); margin-left: 2px; }

.mk-input,
.mk-select,
.mk-textarea {
    width: 100%;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--db-ink);
    background: var(--db-app);
    border: 1px solid var(--db-line);
    border-radius: var(--db-radius);
    padding: 0 10px;
    height: 32px;
}
.mk-textarea { height: auto; padding: 8px 10px; line-height: 1.55; resize: vertical; }
.mk-select { appearance: none; padding-right: 28px; cursor: pointer; }

.mk-input:hover,
.mk-select:hover,
.mk-textarea:hover { border-color: var(--db-line-strong); }

.mk-input:focus,
.mk-select:focus,
.mk-textarea:focus {
    outline: none;
    border-color: var(--db-accent);
    box-shadow: 0 0 0 1px var(--db-accent);
}

.mk-input::placeholder, .mk-textarea::placeholder { color: var(--mk-quiet); }

.mk-selectwrap { position: relative; }
.mk-selectwrap::after {
    content: "";
    position: absolute;
    right: 11px;
    top: 13px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--db-muted);
    border-bottom: 1.5px solid var(--db-muted);
    transform: rotate(45deg);
    pointer-events: none;
}

.mk-checkrow { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--db-ink-2); }
.mk-checkrow input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--db-accent); margin: 0; }

.mk-formmsg {
    grid-column: span 12;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--db-radius);
    font-size: 13px;
    font-weight: 600;
}
.mk-formmsg.mk-ok { color: var(--db-ok); background: var(--db-ok-bg); border: 1px solid var(--db-ok-line); }
.mk-formmsg.mk-bad { color: var(--db-crit); background: var(--db-crit-bg); border: 1px solid var(--db-crit-line); }

/* ===========================================================================
   MISC MARKETING COMPONENTS
   =========================================================================== */

/* FAQ - a definition list rendered as ruled rows. */
.mk-faq { display: grid; }
.mk-faq > div {
    padding: 15px 0;
    border-top: 1px solid var(--db-line-soft);
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--mk-gap);
    align-items: start;
}
.mk-faq > div:first-child { border-top: 0; padding-top: 2px; }
.mk-faq dt { font-size: 14px; font-weight: 700; color: var(--db-ink); line-height: 1.4; }
.mk-faq dd { font-size: 13.5px; line-height: 1.62; color: var(--db-ink-2); margin: 0; }

/* Numbered steps, using the product's step-row component. */
.mk-steps { display: grid; }
.mk-steps .db-stepitem { grid-template-columns: 22px minmax(0, 1fr); align-items: start; padding: 12px 0; }
.mk-steps .db-stepitem:last-child { border-bottom: 0; }

.db-stepno {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--db-accent-line);
    background: var(--db-accent-soft);
    color: var(--db-accent-deep);
    border-radius: var(--db-radius);
    font-family: var(--db-font-mono);
    font-size: 11px;
    font-weight: 600;
    flex: none;
}

.mk-step-body h3 { font-size: 14px; font-weight: 700; color: var(--db-ink); }
.mk-step-body p { font-size: 13.5px; line-height: 1.58; color: var(--db-ink-2); margin-top: 3px; max-width: var(--mk-measure); }

/* Pull quote */
.mk-quote {
    border-left: 3px solid var(--db-accent);
    padding: 4px 0 4px 16px;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--db-ink);
    max-width: var(--mk-measure);
}

/* Architecture stack diagram */
.mk-stack { display: grid; gap: 3px; }
.mk-stack div {
    padding: 9px 13px;
    border: 1px solid var(--db-line);
    border-radius: var(--db-radius);
    background: var(--db-surface-2);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--db-ink-2);
    text-align: center;
}
.mk-stack div:first-child { background: var(--db-accent-soft); border-color: var(--db-accent-line); color: var(--db-accent-deep); }
.mk-stack div:last-child { background: var(--db-surface-3); }

/* Inline pipeline strip */
.mk-pipe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    background: var(--db-surface-2);
    border: 1px solid var(--db-line);
    border-radius: var(--db-radius);
    font-size: 12.5px;
    color: var(--mk-quiet);
}
.mk-pipe b {
    font-weight: 600;
    color: var(--db-ink);
    padding: 2px 8px;
    background: var(--db-surface);
    border: 1px solid var(--db-line);
    border-radius: var(--db-radius);
}
.mk-pipe span { font-family: var(--db-font-mono); font-size: 11.5px; }

/* Callout - the only place a coloured band appears. */
.mk-note-panel { border-color: var(--db-warn-line); }
.mk-note-panel > .db-panel-head { background: var(--db-warn-bg); border-bottom-color: var(--db-warn-line); }
.mk-note-panel > .db-panel-head h2 { color: var(--db-warn); }

/* 404 */
.mk-404 { padding-block: 60px; display: grid; gap: 14px; justify-items: start; }

/* ===========================================================================
   FOOTER
   =========================================================================== */

.mk-foot { flex: none; margin-top: var(--mk-gap-lg); }

.mk-foot-links {
    max-width: var(--mk-page);
    margin: 0 auto;
    padding: 22px var(--mk-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: var(--mk-gap);
    border-top: 1px solid var(--db-line);
}
.mk-foot-links h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mk-quiet);
    margin-bottom: 8px;
}
.mk-foot-links li { padding: 3px 0; }
.mk-foot-links a { color: var(--db-ink-2); font-size: 13px; }
.mk-foot-links a:hover { color: var(--db-accent); }
.mk-foot-tagline { font-size: 13px; color: var(--mk-quiet); margin-top: 6px; max-width: 34ch; }

.mk-statusbar { justify-content: flex-start; }
.mk-statusbar .mk-right { margin-left: auto; color: var(--mk-quiet); }

/* ===========================================================================
   RESPONSIVE
   Every rule below names any modifier it has to unset, so no modifier can
   outrank its own breakpoint.
   =========================================================================== */

@media (max-width: 1000px) {
    .mk-faq > div { grid-template-columns: 1fr; gap: 6px; }
    .mk-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .mk-row,
    .mk-row.mk-reverse { grid-template-columns: 1fr; }
    .mk-row.mk-reverse > :first-child { order: 0; }
    .mk-grid-2 { grid-template-columns: 1fr; }
    .mk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-facts .db-fact:nth-child(2) { border-right: 0; }
    .mk-facts .db-fact:nth-child(1), .mk-facts .db-fact:nth-child(2) { border-bottom: 1px solid var(--db-line-soft); }
    .mk-foot-links { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    main { padding-block: 22px 36px; gap: 18px; }
    .mk-grid-3 { grid-template-columns: 1fr; }
    .mk-facts { grid-template-columns: 1fr; }
    .mk-facts .db-fact { border-right: 0; border-bottom: 1px solid var(--db-line-soft); }
    .mk-facts .db-fact:last-child { border-bottom: 0; }
    .mk-title { max-width: none; }
    .db-field, .mk-field-full { grid-column: span 12; }
    .mk-foot-links { grid-template-columns: 1fr; gap: 18px; }

    /* The command bar scrolls sideways in the product, where a mouse is
       assumed. On a phone a link that has scrolled out of view is a link
       nobody finds, so it wraps instead. */
    .mk-cmdbar {
        height: auto;
        flex-wrap: wrap;
        overflow-x: visible;
        padding-block: 6px;
        row-gap: 2px;
    }
    .mk-cmdbar .db-cmdsep { display: none; }
    .mk-cmdbar-spacer, .mk-stamp { display: none; }
    .mk-cmdgroup-tight { padding-inline: 0 8px; }
}

@media (max-width: 540px) {
    /* Both top-bar actions point at the same place, so on a phone the secondary
       one only competes with the brand for width - and it won, collapsing
       "ExtensibilityCo" to zero. Drop it and keep the primary. */
    .mk-topbar .mk-signin { display: none; }
}

@media (max-width: 420px) {
    .mk-topbar .db-env-chip { display: none; }
    .mk-actions .db-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
    .mk-topbar, .mk-cmdbar, .mk-foot { display: none; }
    .db-panel { break-inside: avoid; box-shadow: none; }
}