/* ---------------------------------------------------------------------------
   Marketing site.

   The public pages do not load the app's Bootstrap shell, but they are the
   same product and have to look like it. So there is no marketing palette:
   every colour below is a copy of a token in main.css (named beside it), and
   webapp/tests/test_marketing_design_tokens.py fails if the two drift apart.
   Change a colour in main.css and change it here in the same commit.

   One typeface, Inter, exactly as in the app. Everything is namespaced `mk-`
   so it can never collide with app styles, and the product screens drawn on
   these pages use `mkui-` (see "Product screens" below).

   Theme follows the same `data-theme` attribute and `theme` localStorage key
   as the app, so a visitor who prefers light keeps it when they sign in.

   Composition. The navigation bar spans the window, but everything inside it
   and everything below it sits in one centred column, --mk-max wide, on a
   twelve-column grid. Nothing stretches past that column on a wide screen.
--------------------------------------------------------------------------- */

:root {
    /* Surfaces, from main.css [data-theme="dark"]. */
    --mk-bg: #0b0d0f;          /* --bg-base */
    --mk-bg-raised: #0e1114;   /* --bg-secondary */
    --mk-panel: #13171c;       /* --bg-panel */
    --mk-card: #1b2027;        /* --bg-card */
    --mk-card-2: #222a35;      /* --bg-card-elevated */
    --mk-line: #262b33;        /* --border-color */
    --mk-line-strong: #313945; /* --border-strong */

    /* Text, from main.css [data-theme="dark"]. */
    --mk-text: #e7e9ec;        /* --text-primary */
    --mk-text-2: #9aa4b2;      /* --text-secondary */
    --mk-muted: #6b7480;       /* --text-muted */

    /* Brand, identical in both themes (main.css --primary / --nav-active). */
    --mk-accent: #6695fa;       /* --primary */
    --mk-accent-hover: #85abfc; /* --nav-active-hover */
    --mk-accent-glow: rgba(102, 149, 250, 0.18); /* --accent-glow */
    --mk-on-accent: #ffffff;

    /* Financial colours, from main.css [data-theme="dark"]. */
    --mk-gain: #22c55e;        /* --positive */
    --mk-loss: #f87171;        /* --negative */
    --mk-warn: #f6c343;        /* --warning-text */

    /* The icon rail is a fixed dark slate in both themes (#main-sidebar). */
    --mk-rail: #262b33;

    /* Research Tracker stages. Dots and bars use STAGE_COLORS from
       webapp/utils/stages.py; filled badges use .user-stage-badge in main.css. */
    --mk-stage-to-research: #eab308;
    --mk-stage-researching: #6695fa;
    --mk-stage-owned: #22c55e;
    --mk-stage-pass: #ef4444;
    --mk-badge-to-research: #a16207;
    --mk-badge-researching: #4a72c9;
    --mk-badge-owned: #15803d;
    --mk-badge-pass: #b91c1c;

    --mk-nav-bg: rgba(11, 13, 15, 0.8);

    /* The light at the top of the page. The same idea as the research page's
       background (a soft radial wash over the base), in the brand blue. */
    --mk-glow: rgba(102, 149, 250, 0.065);
    --mk-glow-soft: rgba(102, 149, 250, 0.025);
    --mk-glow-navy: rgba(34, 50, 84, 0.22);
    /* A fourth, fainter light that wanders across the others when the light
       moves (marketing_motion.js). The static fallback leaves it out. */
    --mk-glow-drift: rgba(133, 171, 252, 0.03);

    --mk-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --mk-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
    --mk-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.02);

    --mk-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Composition. */
    --mk-max: 1180px;
    --mk-gutter: clamp(20px, 5vw, 48px);
    --mk-col-gap: 24px;
    --mk-section: clamp(80px, 9vw, 136px);
    --mk-radius: 14px;         /* --r-lg */
    --mk-radius-media: 22px;
}

:root[data-theme="light"] {
    /* Surfaces and text, from main.css :root. */
    --mk-bg: #ffffff;
    --mk-bg-raised: #f8f9fa;
    --mk-panel: #f8f9fa;
    --mk-card: #ffffff;
    --mk-card-2: #f1f3f5;      /* --bg-hover */
    --mk-line: #dee2e6;
    --mk-line-strong: #ced4da;
    --mk-text: #212121;
    --mk-text-2: rgba(33, 33, 33, 0.68);
    --mk-muted: rgba(33, 33, 33, 0.5);
    --mk-accent-glow: rgba(102, 149, 250, 0.14);
    --mk-gain: #16a34a;
    --mk-loss: #dc2626;
    --mk-warn: #92400e;
    --mk-nav-bg: rgba(255, 255, 255, 0.82);
    --mk-glow: rgba(102, 149, 250, 0.07);
    --mk-glow-soft: rgba(102, 149, 250, 0.03);
    --mk-glow-navy: rgba(102, 149, 250, 0.035);
    --mk-glow-drift: rgba(102, 149, 250, 0.025);
    --mk-shadow: 0 40px 90px -40px rgba(16, 24, 40, 0.28), 0 0 0 1px rgba(16, 24, 40, 0.02);
}

/* ---- Base --------------------------------------------------------------- */

body.mk-body {
    margin: 0;
    background: var(--mk-bg);
    color: var(--mk-text);
    font: 400 17px/1.5 var(--mk-sans);
    font-optical-sizing: auto;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.mk-body *, .mk-body *::before, .mk-body *::after { box-sizing: border-box; }
.mk-body a { color: var(--mk-accent); text-decoration: none; }
.mk-body a:hover { color: var(--mk-accent-hover); }
.mk-body img { max-width: 100%; }
.mk-body :focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; border-radius: 4px; }
/* Anchored sections land below the sticky header rather than under it. */
.mk-body [id] { scroll-margin-top: 72px; }
@media (max-width: 767.98px) { .mk-body [id] { scroll-margin-top: 104px; } }

.mk-shell {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--mk-bg);
}
.mk-main { flex: 1 0 auto; position: relative; z-index: 1; }

.mk-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Layout ------------------------------------------------------------- */

/* The one column. Everything on every marketing page lives inside it. */
.mk-container {
    width: 100%;
    max-width: calc(var(--mk-max) + 2 * var(--mk-gutter));
    margin: 0 auto;
    padding-left: var(--mk-gutter);
    padding-right: var(--mk-gutter);
}
/* Long-form reading (articles, the contact form). Still centred on the same
   axis, just a narrower measure. */
.mk-container--narrow { max-width: calc(760px + 2 * var(--mk-gutter)); }

/* The twelve-column grid the column is divided into. */
.mk-cols {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--mk-col-gap);
}

.mk-section { padding-top: var(--mk-section); padding-bottom: var(--mk-section); }
.mk-section--tight { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.mk-section--lg { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); }
.mk-section--xl { padding-top: var(--mk-section); padding-bottom: var(--mk-section); }
.mk-pt-0 { padding-top: 0; }
.mk-pb-0 { padding-bottom: 0; }

/* A full-width change of surface, which is how one chapter hands over to the
   next. Never a gradient and never a pattern, just one step up the app's
   elevation ladder and back. */
.mk-band { background: var(--mk-panel); }
.mk-band--raised { background: var(--mk-bg-raised); }
.mk-band--closed { border-bottom: 1px solid var(--mk-line); }
.mk-band--plain { background: transparent; }

.mk-rule { border-top: 1px solid var(--mk-line); }

.mk-stack { display: flex; flex-direction: column; gap: var(--stack-gap, 16px); }
.mk-row-wrap { display: flex; flex-wrap: wrap; gap: var(--row-gap, 12px); }
.mk-center { align-items: center; text-align: center; }
.mk-mt-auto { margin-top: auto; }

/* An auto-filling grid. Callers set --grid-min for the column floor; the
   min(..., 100%) keeps that floor from overflowing a narrow viewport. */
.mk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 260px), 100%), 1fr));
    gap: var(--grid-gap, 24px);
}
.mk-grid--middle { align-items: center; }
.mk-half { grid-column: span 6; }

/* ---- Type --------------------------------------------------------------- */

/* The app's canonical eyebrow (main.css "Eyebrow / small label"), a touch
   larger here because it has to carry a page rather than a panel. */
.mk-eyebrow {
    display: inline-block;
    margin: 0;
    font: 600 13px/1.2 var(--mk-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mk-accent);
}
.mk-eyebrow--muted { color: var(--mk-text-2); }
.mk-eyebrow--sm { font-size: 12px; }

.mk-display,
.mk-h1, .mk-h2, .mk-h3,
.mk-title, .mk-subtitle {
    margin: 0;
    font-family: var(--mk-sans);
    color: var(--mk-text);
    text-wrap: balance;
}

/* Hero headline. */
.mk-display {
    font-size: clamp(44px, 6.4vw, 84px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

/* Chapter headline. */
.mk-title {
    font-size: clamp(34px, 4.6vw, 60px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.032em;
}
.mk-subtitle {
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.026em;
}

/* Page headings on the secondary pages. */
.mk-h1 { font-size: clamp(38px, 5vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -0.032em; }
.mk-h1--hero { font-size: clamp(42px, 6vw, 76px); }
.mk-container--narrow .mk-h1 { font-size: clamp(34px, 4.4vw, 52px); }
.mk-h1 em, .mk-display em { font-style: normal; color: var(--mk-text-2); }
.mk-h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.1; letter-spacing: -0.026em; }
.mk-h2--lg { font-size: clamp(30px, 3.6vw, 46px); }
.mk-h3 { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.mk-h3--lg { font-size: clamp(22px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.02em; }

.mk-lead {
    margin: 0;
    font-size: clamp(19px, 1.75vw, 23px);
    font-weight: 500;
    line-height: 1.38;
    letter-spacing: -0.017em;
    color: var(--mk-text-2);
    text-wrap: pretty;
}
.mk-lead strong { font-weight: 600; color: var(--mk-text); }

.mk-p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--mk-text-2); text-wrap: pretty; }
.mk-p--sm { font-size: 15px; line-height: 1.55; }
.mk-p--xs { font-size: 14px; line-height: 1.55; }

.mk-label {
    font: 600 11px/1.2 var(--mk-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}
.mk-label--wide { font-size: 12px; }

/* Small print. It was a monospace face; the app has none, so neither do we. */
.mk-mono { font: 400 13px/1.5 var(--mk-sans); font-variant-numeric: tabular-nums; color: var(--mk-muted); }
.mk-mono--sm { font-size: 12px; }

.mk-measure { max-width: 640px; }
.mk-measure--wide { max-width: 880px; }
.mk-measure--tight { max-width: 520px; }

.mk-accent { color: var(--mk-accent); }
.mk-muted { color: var(--mk-text-2); }
.mk-text { color: var(--mk-text); }
.mk-gain { color: var(--mk-gain); }
.mk-loss { color: var(--mk-loss); }
.mk-right { text-align: right; }

/* Copy still awaiting a decision from us, deliberately visible rather than
   quietly shipped as fact. Search for `mk-todo` to find every one. */
.mk-todo { font: 400 12px/1.6 var(--mk-sans); color: var(--mk-warn); }
.mk-todo--boxed {
    font-size: 13px;
    border: 1px dashed var(--mk-warn);
    border-radius: 8px;
    padding: 10px 12px;
    display: inline-block;
}

/* ---- Navigation --------------------------------------------------------- */

/* The bar spans the window; its contents sit in the same column as the page,
   so the logo lines up with every headline beneath it. */
.mk-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--mk-nav-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--mk-line);
}
.mk-nav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 32px;
    min-height: 56px;
}
.mk-nav__links { display: flex; gap: 28px; flex: 1 1 auto; min-width: 0; }
.mk-nav__right { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.mk-body .mk-nav__link { font: 400 14px/1 var(--mk-sans); letter-spacing: -0.01em; color: var(--mk-text-2); }
.mk-body .mk-nav__link:hover,
.mk-body .mk-nav__link[aria-current="page"] { color: var(--mk-text); }

.mk-body .mk-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--mk-text); }
.mk-logo__mark { display: block; flex-shrink: 0; color: var(--mk-text); }
.mk-logo__mark .vb-mark__gem { fill: var(--mk-accent); stroke: var(--mk-accent); }

/* The wordmark: "valueBase", tightened to -1px, with Base in the brand blue,
   exactly as the rail and the public top bar draw it. */
.mk-wordmark {
    font: 700 18px/1 var(--mk-sans);
    letter-spacing: -1px;
    color: var(--mk-text);
}
.mk-wordmark span { color: var(--mk-accent); }
.mk-wordmark--sm { font-size: 17px; }

.mk-theme-toggle {
    border: 1px solid var(--mk-line);
    background: transparent;
    color: var(--mk-text-2);
    font: 400 13px/1 var(--mk-sans);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.mk-theme-toggle:hover { color: var(--mk-text); border-color: var(--mk-line-strong); }

/* ---- Buttons and links -------------------------------------------------- */

/* The app's primary button, with a brand fill, white ink and the control radius. */
.mk-body .mk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 600 16px/1 var(--mk-sans);
    letter-spacing: -0.01em;
    padding: 15px 26px;
    border-radius: 10px;
    border: 1px solid transparent;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mk-body .mk-btn--primary { color: var(--mk-on-accent); background: var(--mk-accent); }
.mk-body .mk-btn--primary:hover { color: var(--mk-on-accent); background: var(--mk-accent-hover); }
.mk-body .mk-btn--ghost { color: var(--mk-text); border-color: var(--mk-line-strong); background: transparent; }
.mk-body .mk-btn--ghost:hover { color: var(--mk-text); border-color: var(--mk-text-2); }
.mk-body .mk-btn--wide { padding-left: 30px; padding-right: 30px; }
.mk-body .mk-btn--lg { font-size: 17px; padding: 17px 32px; }
.mk-body .mk-btn--sm { font-size: 14px; padding: 9px 16px; border-radius: 8px; }
.mk-body .mk-btn--block { display: flex; width: 100%; font-size: 15px; padding: 14px; }

/* A text link with a chevron, the quiet alternative to a second button. */
.mk-body .mk-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 500 17px/1.2 var(--mk-sans);
    letter-spacing: -0.012em;
    color: var(--mk-accent);
}
.mk-body .mk-link::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.6px solid currentColor;
    border-top: 1.6px solid currentColor;
    transform: rotate(45deg);
    margin-left: 2px;
}
.mk-body .mk-link:hover { color: var(--mk-accent-hover); }

/* ---- Home, hero --------------------------------------------------------- */

.mk-hero {
    padding-top: clamp(64px, 8vw, 112px);
    padding-bottom: clamp(72px, 9vw, 128px);
    text-align: center;
}
.mk-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}
.mk-hero .mk-lead { max-width: 640px; }
.mk-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 12px;
}
.mk-hero__note { margin: 0; font-size: 14px; color: var(--mk-muted); }
/* Two classes, because .mk-film resets its own margin further down. */
.mk-hero .mk-hero__stage { margin-top: clamp(56px, 7vw, 88px); }
.mk-nowrap { white-space: nowrap; }

/* ---- Home, the product film -------------------------------------------- */

/* The frame the product film plays in. Until the film exists it shows a
   still of the product, with a label saying the film is coming. When
   MARKETING_FILM_URL is set the label becomes a play button and a click swaps
   the still for the video, so nothing about the page's layout changes. */
.mk-film {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--mk-radius-media);
    overflow: hidden;
    background: var(--mk-bg);
    border: 1px solid var(--mk-line);
    box-shadow: var(--mk-shadow);
}
.mk-film__poster { position: absolute; inset: 0; }
.mk-film__poster .mkui,
.mk-film__poster .mkui__canvas,
.mk-film__poster .mkui-win { height: 100%; }
.mk-film video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }

.mk-film__badge,
.mk-body .mk-film__play {
    position: absolute;
    left: 50%;
    bottom: clamp(16px, 3vw, 32px);
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(18, 21, 26, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    color: #f3f5f7;
    font: 500 15px/1 var(--mk-sans);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.mk-body .mk-film__play { cursor: pointer; }
.mk-body .mk-film__play:hover { color: #fff; background: rgba(18, 21, 26, 0.86); }
.mk-film__glyph {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mk-accent);
    color: #fff;
}
.mk-film__glyph svg { width: 11px; height: 11px; margin-left: 2px; }
.mk-film__badge .mk-film__glyph { background: rgba(255, 255, 255, 0.16); }

/* ---- Home, the workflow at a glance ------------------------------------ */

.mk-intro { text-align: center; }
.mk-intro .mk-title { max-width: 18ch; margin: 0 auto; }
.mk-intro .mk-lead { max-width: 700px; margin: 28px auto 0; }

/* Four stages on one line. The line is the point, because it shows one
   continuous process with the five tools placed on it rather than listed. */
.mk-flowwrap { position: relative; margin-top: clamp(64px, 8vw, 104px); }
.mk-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    text-align: left;
}
.mk-flow__step { position: relative; padding-top: 34px; padding-right: var(--mk-col-gap); }
.mk-flow__step::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--mk-line-strong);
}
.mk-flow__dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--mk-bg);
    border: 2px solid var(--mk-accent);
    transition: background-color 0.4s ease, box-shadow 0.6s ease;
}
.mk-flow__step.is-lit .mk-flow__dot { background: var(--mk-accent); box-shadow: 0 0 0 5px var(--mk-accent-glow); }

/* The accent line that follows the travelling company along the grey one. */
.mk-flow__progress {
    position: absolute;
    top: 5px;
    left: 5.5px;
    width: 0;
    height: 1px;
    background: var(--mk-accent);
    box-shadow: 0 0 12px var(--mk-accent);
    pointer-events: none;
}

/* Moody's, riding the line from Discover to Own, its stage changing on the way.
   Only drawn when the four steps sit in one row (see the responsive rules). */
.mk-traveller {
    position: absolute;
    top: 5.5px;
    left: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.mk-traveller.is-on { opacity: 1; }
.mk-traveller__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transform: translate(-50%, -50%);
    padding: 5px 6px 5px 10px;
    border-radius: 999px;
    background: var(--mk-card);
    border: 1px solid var(--mk-line-strong);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7), 0 0 0 4px var(--mk-bg);
    font: 600 12px/1 var(--mk-sans);
    color: var(--mk-accent);
    white-space: nowrap;
}
.mk-traveller__chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--mk-gain); }
.mk-traveller__stage {
    font: 600 11px/1 var(--mk-sans);
    color: #fff;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--mk-badge-to-research);
    transition: background-color 0.35s ease;
}
.mk-traveller__stage[data-stage="researching"] { background: var(--mk-badge-researching); }
.mk-traveller__stage[data-stage="owned"] { background: var(--mk-badge-owned); }
.mk-flow__step:last-child::before { right: auto; width: calc(100% - var(--mk-col-gap)); }
.mk-body .mk-flow__link { display: flex; flex-direction: column; gap: 10px; color: var(--mk-text); }
.mk-body .mk-flow__link:hover { color: var(--mk-text); }
.mk-body .mk-flow__link:hover .mk-flow__tools { color: var(--mk-accent); }
.mk-flow__stage { font: 600 13px/1.2 var(--mk-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-accent); }
.mk-flow__tools {
    font-size: clamp(21px, 2.1vw, 27px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--mk-text);
    transition: color 0.15s ease;
}
.mk-flow__line { font-size: 15px; line-height: 1.5; color: var(--mk-text-2); max-width: 24ch; }

/* ---- Home, chapters ----------------------------------------------------- */

.mk-chapter__head { align-items: end; row-gap: 20px; }
.mk-chapter__head .mk-kicker { grid-column: 1 / -1; }
.mk-chapter__head .mk-title { grid-column: 1 / span 7; }
.mk-chapter__head .mk-chapter__lead { grid-column: 8 / -1; padding-bottom: 6px; }
/* Two classes, because .mk-shot resets a figure's margins further down and
   would otherwise pull the screen up against the headline. */
.mk-shot.mk-chapter__media { margin-top: clamp(64px, 7vw, 104px); }

/* Where this chapter sits in the workflow, as four short bars with the
   current stage lit and the ones behind it half lit. */
.mk-kicker { display: flex; align-items: center; gap: 14px; margin: 0; }
.mk-steps { display: inline-flex; gap: 4px; }
.mk-steps i { display: block; width: 18px; height: 3px; border-radius: 2px; background: var(--mk-line-strong); }
.mk-steps[data-step="1"] i:nth-child(-n+1),
.mk-steps[data-step="2"] i:nth-child(-n+2),
.mk-steps[data-step="3"] i:nth-child(-n+3),
.mk-steps[data-step="4"] i:nth-child(-n+4) { background: color-mix(in srgb, var(--mk-accent) 45%, transparent); }
.mk-steps[data-step="1"] i:nth-child(1),
.mk-steps[data-step="2"] i:nth-child(2),
.mk-steps[data-step="3"] i:nth-child(3),
.mk-steps[data-step="4"] i:nth-child(4) { background: var(--mk-accent); }

/* How one chapter hands the company on to the next tool. These are the real
   joins between the five tools, stated where they happen. */
.mk-handoff {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 32px 0 0;
    max-width: 640px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--mk-text-2);
}
.mk-handoff svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--mk-accent); }
.mk-handoff strong { font-weight: 600; color: var(--mk-text); }

/* A second beat inside a chapter, with copy beside a narrower screen. */
.mk-split { align-items: center; row-gap: 40px; margin-top: clamp(96px, 11vw, 152px); }
.mk-split__media { grid-column: 1 / span 7; }
.mk-split__copy { grid-column: 9 / -1; display: flex; flex-direction: column; gap: 20px; }
.mk-split__copy .mk-p { font-size: 19px; line-height: 1.5; }

.mk-small-note { margin: 16px 0 0; font-size: 15px; color: var(--mk-muted); }

/* ---- Home, plans -------------------------------------------------------- */

.mk-plans-head { text-align: center; }
.mk-plans-head .mk-title { max-width: 18ch; margin: 0 auto; }
.mk-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 940px;
    margin: clamp(48px, 6vw, 80px) auto 0;
    border-top: 1px solid var(--mk-line);
}
.mk-plan {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 40px 48px 8px 0;
}
.mk-plan + .mk-plan { padding-left: 48px; padding-right: 0; border-left: 1px solid var(--mk-line); }
.mk-plan__name { display: flex; align-items: center; gap: 12px; min-height: 24px; margin: 0; font: 600 15px/1 var(--mk-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-text-2); }
.mk-plan--pro .mk-plan__name { color: var(--mk-accent); }
.mk-plan__price { margin: 0; font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.035em; color: var(--mk-text); font-variant-numeric: tabular-nums; }
.mk-plan__per { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--mk-text-2); }
.mk-plan__note { margin: 0; font-size: 16px; line-height: 1.5; color: var(--mk-text-2); max-width: 34ch; }
.mk-plan__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.mk-plan__list li {
    position: relative;
    padding: 11px 0 11px 26px;
    border-top: 1px solid var(--mk-line);
    font-size: 15px;
    line-height: 1.45;
    color: var(--mk-text);
}
.mk-plan__list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 17px;
    width: 10px;
    height: 5px;
    border-left: 1.8px solid var(--mk-accent);
    border-bottom: 1.8px solid var(--mk-accent);
    transform: rotate(-45deg);
}
.mk-plan__list li.is-lead { padding-left: 0; color: var(--mk-text-2); }
.mk-plan__list li.is-lead::before { display: none; }
.mk-plan .mk-btn { align-self: flex-start; margin-top: 18px; }
.mk-plans__foot { display: flex; justify-content: center; margin-top: 48px; }

.mk-promo {
    font: 600 11px/1 var(--mk-sans);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mk-accent);
    border: 1px solid color-mix(in srgb, var(--mk-accent) 55%, transparent);
    border-radius: 999px;
    padding: 5px 9px;
}

/* ---- Home, close -------------------------------------------------------- */

.mk-close { position: relative; text-align: center; }
/* The page ends under the same light it opened with, rising from below. */
.mk-close::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(700px 420px at 50% 100%, var(--mk-glow-soft), transparent 100%);
}
.mk-close > .mk-container { position: relative; }
.mk-close__quote {
    margin: 0 auto;
    max-width: 18ch;
    font-size: clamp(34px, 4.6vw, 60px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.032em;
    color: var(--mk-text);
    text-wrap: balance;
}
.mk-close__attr { margin: 24px 0 0; font-size: 15px; color: var(--mk-text-2); }
.mk-close__cta { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ---- Secondary pages, page head ---------------------------------------- */

.mk-pagehead { padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(48px, 6vw, 80px); }
.mk-pagehead__inner { display: flex; flex-direction: column; gap: 22px; max-width: 880px; }
.mk-pagehead .mk-lead { max-width: 680px; }
.mk-pagehead--center .mk-pagehead__inner { margin: 0 auto; align-items: center; text-align: center; }

/* Anchor links under a page head, for pages with named parts. */
.mk-subnav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.mk-body .mk-subnav a {
    font: 500 14px/1 var(--mk-sans);
    color: var(--mk-text);
    border: 1px solid var(--mk-line-strong);
    border-radius: 999px;
    padding: 10px 16px;
}
.mk-body .mk-subnav a:hover { border-color: var(--mk-accent); color: var(--mk-text); }

/* ---- Secondary pages, specifications ----------------------------------- */

/* The product page reads like a specification. Each tool gets a heading on
   the left and what it actually does on the right, separated by hairlines
   rather than boxed into cards. */
.mk-spec { padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--mk-line); row-gap: 32px; }
.mk-spec__head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 14px; }
.mk-spec__title { margin: 0; font-size: clamp(28px, 2.8vw, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -0.026em; color: var(--mk-text); }
.mk-spec__intro { margin: 0; font-size: 17px; line-height: 1.5; color: var(--mk-text-2); max-width: 30ch; }
.mk-spec__list {
    grid-column: 6 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--mk-col-gap);
    row-gap: 28px;
}
.mk-spec__list li { display: flex; flex-direction: column; gap: 6px; }
.mk-spec__list strong { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--mk-text); }
.mk-spec__list span { font-size: 15px; line-height: 1.5; color: var(--mk-text-2); }
.mk-pro,
.mk-spec__list .mk-pro { font: 600 10px/1 var(--mk-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-accent); vertical-align: 2px; margin-left: 6px; }

/* Three or four short statements in a row, divided by hairlines. */
.mk-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--points-min, 240px), 100%), 1fr));
    gap: 36px var(--mk-col-gap);
}
.mk-points li { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid var(--mk-line); }
.mk-points strong { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--mk-text); }
.mk-points span { font-size: 15px; line-height: 1.55; color: var(--mk-text-2); }

/* A question and its answer, hairline above, no box. */
.mk-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--mk-col-gap); }
.mk-faq__item { padding: 28px 0; border-top: 1px solid var(--mk-line); display: flex; flex-direction: column; gap: 10px; }
.mk-faq__item h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--mk-text); }
.mk-faq__item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--mk-text-2); }

/* ---- Surfaces (secondary pages) ---------------------------------------- */

.mk-card {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap, 14px);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    background: var(--mk-panel);
    padding: clamp(22px, 3vw, 30px);
    color: var(--mk-text);
}
.mk-card--accent { border-color: color-mix(in srgb, var(--mk-accent) 60%, transparent); }
.mk-card--tinted { background: var(--mk-bg-raised); }
.mk-card--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--card-grid-min, 300px), 100%), 1fr));
}
.mk-card--row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.mk-body a.mk-card { color: var(--mk-text); transition: border-color 0.15s ease; }
.mk-body a.mk-card:hover { color: var(--mk-text); border-color: var(--mk-line-strong); }

.mk-tile {
    display: flex;
    flex-direction: column;
    gap: var(--tile-gap, 12px);
    border: 1px solid var(--mk-line);
    border-radius: 10px;
    background: var(--mk-panel);
    padding: 16px;
}
.mk-tile--inset { border-radius: 9px; padding: 12px; gap: var(--tile-gap, 5px); }
.mk-tile--tinted { background: var(--mk-bg-raised); }

/* A grid whose 1px gaps read as hairline rules. */
.mk-hairgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--hair-min, 150px), 100%), 1fr));
    gap: 1px;
    background: var(--mk-line);
    overflow: hidden;
}
.mk-hairgrid--framed { border: 1px solid var(--mk-line); border-radius: 12px; }
.mk-hairgrid__cell {
    display: flex;
    flex-direction: column;
    gap: var(--cell-gap, 6px);
    padding: var(--cell-pad, 20px);
    background: var(--mk-panel);
}

.mk-stat__value { font: 600 15px/1.1 var(--mk-sans); font-variant-numeric: tabular-nums; color: var(--mk-text); }
.mk-stat__value--lg { font-weight: 700; font-size: 20px; }

.mk-pill {
    display: inline-flex;
    align-items: center;
    font: 500 13px/1 var(--mk-sans);
    color: var(--mk-text-2);
    border: 1px solid var(--mk-line-strong);
    border-radius: 999px;
    padding: 9px 14px;
}
.mk-body a.mk-pill:hover { color: var(--mk-text); border-color: var(--mk-text-2); }
.mk-body .mk-pill--filled,
.mk-body a.mk-pill--filled:hover { color: var(--mk-on-accent); background: var(--mk-accent); border-color: transparent; }

.mk-badge {
    font: 500 12px/1 var(--mk-sans);
    color: var(--mk-text-2);
    border: 1px solid var(--mk-line-strong);
    border-radius: 999px;
    padding: 5px 9px;
}
.mk-badge--accent { color: var(--mk-accent); border-color: color-mix(in srgb, var(--mk-accent) 55%, transparent); }

/* A table of rows on a hairline grid. */
.mk-row {
    display: grid;
    grid-template-columns: var(--cols);
    column-gap: var(--colgap, 16px);
    padding: 16px 0;
    border-bottom: 1px solid var(--mk-line);
    align-items: baseline;
}
.mk-row--head { padding: 12px 0; }
.mk-row__cell { font: 400 15px/1.45 var(--mk-sans); color: var(--mk-text); }
.mk-row__head { font: 600 12px/1.2 var(--mk-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-text-2); }
.mk-table { border-top: 1px solid var(--mk-line-strong); }

/* ---- Charts (article bodies) ------------------------------------------- */

.mk-chart { width: 100%; display: block; }
.mk-legend { display: flex; flex-wrap: wrap; gap: 14px; font: 400 12px/1 var(--mk-sans); }

/* ---- Quotes ------------------------------------------------------------- */

.mk-quote { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.mk-quote blockquote {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: var(--mk-text);
    text-wrap: balance;
}
.mk-quote__attr { font: 400 15px/1 var(--mk-sans); color: var(--mk-text-2); }
.mk-quote__note { font: 400 13px/1.6 var(--mk-sans); color: var(--mk-muted); max-width: 460px; }

/* ---- Article prose ------------------------------------------------------ */

.mk-prose { display: flex; flex-direction: column; gap: 24px; }
.mk-prose > p {
    margin: 0;
    font-size: clamp(17px, 1.5vw, 19px);
    line-height: 1.65;
    color: var(--mk-text);
    text-wrap: pretty;
}
.mk-prose > h2 {
    margin: 0;
    padding-top: 12px;
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.024em;
    color: var(--mk-text);
    text-wrap: balance;
}
.mk-prose blockquote {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.024em;
    color: var(--mk-text);
}
.mk-prose blockquote cite {
    display: block;
    margin-top: 14px;
    font: 400 13px/1.4 var(--mk-sans);
    letter-spacing: 0;
    font-style: normal;
    color: var(--mk-text-2);
}
.mk-prose__points {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 2px solid var(--mk-accent);
    padding-left: 20px;
    font: 400 17px/1.65 var(--mk-sans);
    color: var(--mk-text);
}
.mk-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    border-top: 1px solid var(--mk-line);
    border-bottom: 1px solid var(--mk-line);
    padding: 14px 0;
}

/* ---- Legal pages -------------------------------------------------------- */

/* The Terms, Privacy Policy and Disclaimer are long prose read closely, so they
   add what an article never needs: numbered sections, sub-headings, ordinary
   bullet lists and small tables that fold to stacked cards on a phone. */
.mk-prose > h3 {
    margin: 0;
    font-size: clamp(18px, 1.7vw, 20px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.012em;
    color: var(--mk-text);
}
.mk-prose > ul,
.mk-prose > ol {
    margin: 0;
    padding-left: 1.25em;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--mk-text);
}
.mk-prose > ul li::marker { color: var(--mk-accent); }
.mk-legal a:not(.mk-btn):not(.mk-mono) { color: var(--mk-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Outranks the generic `.mk-prose > ol` above, which would stack it. */
.mk-prose > .mk-toc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 8px var(--mk-col-gap);
    margin: 0;
    padding: 20px 0;
    list-style: none;
    border-top: 1px solid var(--mk-line);
    border-bottom: 1px solid var(--mk-line);
    counter-reset: mk-toc;
}
.mk-toc li { counter-increment: mk-toc; font: 400 15px/1.45 var(--mk-sans); }
.mk-toc li::before { content: counter(mk-toc) ". "; color: var(--mk-text-2); }
.mk-body .mk-toc a { color: var(--mk-text-2); text-decoration: none; }
.mk-body .mk-toc a:hover { color: var(--mk-text); }
.mk-legal-table .mk-row__cell { font-size: 14px; }
.mk-legal-table .mk-row__cell:first-child { font-weight: 600; }
@media (max-width: 767.98px) {
    .mk-legal-table .mk-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
    .mk-legal-table .mk-row--head { display: none; }
    .mk-legal-table .mk-row__cell[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font: 600 11px/1.2 var(--mk-sans);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--mk-text-2);
    }
}

/* ---- Footer ------------------------------------------------------------- */

.mk-footer { background: var(--mk-bg-raised); border-top: 1px solid var(--mk-line); }
.mk-footer__inner { padding-top: 56px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 40px; }
.mk-footer__cols { row-gap: 36px; }
.mk-footer__brand { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 14px; }
.mk-footer__brand p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--mk-text-2); max-width: 30ch; }
.mk-footer__col { grid-column: span 2; display: flex; flex-direction: column; gap: 12px; }
.mk-footer__col:nth-child(2) { grid-column: 6 / span 3; }
.mk-footer__col:nth-child(3),
.mk-footer__col:nth-child(4) { grid-column: span 2; }
.mk-footer__heading { margin: 0 0 4px; font: 600 12px/1.2 var(--mk-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-text); }
.mk-body .mk-footer__col a { font: 400 14px/1.3 var(--mk-sans); color: var(--mk-text-2); }
.mk-body .mk-footer__col a:hover { color: var(--mk-text); }
.mk-footer__legal { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--mk-line); padding-top: 24px; }
.mk-footer__small { margin: 0; font: 400 12px/1.65 var(--mk-sans); color: var(--mk-muted); max-width: 860px; }
.mk-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--mk-muted); }

/* ---- Forms -------------------------------------------------------------- */

.mk-form { display: flex; flex-direction: column; gap: 16px; }
.mk-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 14px;
}
.mk-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mk-field__label { font: 600 12px/1 var(--mk-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-text-2); }
.mk-field__optional { letter-spacing: normal; text-transform: none; font-weight: 400; opacity: 0.8; }

.mk-input,
.mk-select,
.mk-textarea {
    width: 100%;
    font: 400 15px/1.5 var(--mk-sans);
    color: var(--mk-text);
    background: var(--mk-bg);
    border: 1px solid var(--mk-line-strong);
    border-radius: 10px;
    padding: 12px 14px;
    /* Safari otherwise paints its own control chrome over the panel colour. */
    -webkit-appearance: none;
    appearance: none;
}
.mk-textarea { resize: vertical; min-height: 128px; line-height: 1.6; }
.mk-input::placeholder,
.mk-textarea::placeholder { color: var(--mk-muted); }
.mk-input:hover,
.mk-select:hover,
.mk-textarea:hover { border-color: var(--mk-text-2); }
.mk-input:focus,
.mk-select:focus,
.mk-textarea:focus {
    outline: none;
    border-color: var(--mk-accent);
    box-shadow: 0 0 0 3px var(--mk-accent-glow);
}
.mk-input[aria-invalid="true"],
.mk-textarea[aria-invalid="true"] { border-color: var(--mk-loss); }

/* The native arrow disappears with appearance:none, so draw one. Encoded as a
   data URI rather than a file so it needs no static asset; currentColor is
   not available inside a URI, hence the two rules keyed on the theme. */
.mk-select {
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa4b2' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 15px;
}
:root[data-theme="light"] .mk-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23686868' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
}
.mk-select option { background: var(--mk-panel); color: var(--mk-text); }
.mk-field__error { font: 400 13px/1.5 var(--mk-sans); color: var(--mk-loss); }
.mk-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 4px;
}

/* Off-screen rather than display:none, because a bot that skips hidden fields
   is exactly the one worth catching. */
.mk-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mk-notice {
    font: 400 14px/1.6 var(--mk-sans);
    border: 1px solid var(--mk-line);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--mk-text);
}
.mk-notice--error {
    border-color: var(--mk-loss);
    color: var(--mk-loss);
    background: color-mix(in srgb, var(--mk-loss) 10%, transparent);
}

/* ===========================================================================
   Product screens.

   The screens on the home page are drawn in HTML from the app's own tokens
   and component shapes (the rail, panels, eyebrows, stage badges, the
   screener table), so they stay sharp at any size, follow the theme, and
   never go stale the way a screenshot would. The figures in them are
   illustrative, which the footer says.

   Scaling. Each screen is designed at a fixed width of --w units, where one
   unit is 16px at design size. .mkui is a size container and the canvas
   sets its font-size to 100cqi / --w, so a unit is always 1/--w of the
   available width and the whole screen scales as one picture. Everything
   inside is sized in em. --mkui-min stops the scale going below a legible
   size on a phone; past that point the screen is cropped from the right
   instead of shrunk further.
   =========================================================================== */

.mkui { container-type: inline-size; position: relative; }
.mkui__canvas {
    --w: 80;
    font-size: 14px;
    font-size: max(var(--mkui-min, 0px), 100cqi / var(--w));
    width: calc(var(--w) * 1em);
    font-family: var(--mk-sans);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--mk-text);
    text-align: left;
}

.mk-shot { position: relative; margin: 0; }
.mk-shot .mkui { border-radius: 0.9rem; }

.mkui-win {
    position: relative;
    display: grid;
    grid-template-columns: 4.5em minmax(0, 1fr);
    background: var(--mk-bg);
    border: 1px solid var(--mk-line);
    border-radius: 0.875em;
    overflow: hidden;
    box-shadow: var(--mk-shadow);
}
.mkui-win--flush { border: 0; border-radius: 0; box-shadow: none; }
.mkui-win--bare { grid-template-columns: minmax(0, 1fr); }

/* The rail, the app's fixed dark slate strip with its icons. */
.mkui-rail {
    background: var(--mk-rail);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35em;
    padding: 0.95em 0;
}
.mkui-rail__logo { color: #eef1f5; margin-bottom: 0.9em; line-height: 0; }
.mkui-rail__logo svg { width: 1.75em; height: 1.75em; }
.mkui-rail__logo .vb-mark__gem { fill: var(--mk-accent); stroke: var(--mk-accent); }
.mkui-rail__i {
    position: relative;
    display: grid;
    place-items: center;
    width: 4.5em;
    height: 2.6em;
    color: #ffffff;
}
.mkui-rail__i svg { width: 1.15em; height: 1.15em; }
.mkui-rail__i.is-on { color: var(--mk-accent); }
.mkui-rail__i.is-on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    bottom: 0.3em;
    width: 0.2em;
    border-radius: 0 0.2em 0.2em 0;
    background: var(--mk-accent);
}
.mkui-rail__spacer { flex: 1; }

.mkui-main { min-width: 0; display: flex; flex-direction: column; }
.mkui-pad { padding: 1.5em 1.75em; }

.mkui-panel {
    background: var(--mk-panel);
    border: 1px solid var(--mk-line);
    border-radius: 0.625em;
    padding: 1.15em 1.25em;
    min-width: 0;
}
.mkui-card { background: var(--mk-card); border-radius: 0.5em; padding: 0.8em 0.9em; min-width: 0; }

.mkui-eyebrow {
    font-size: 0.6875em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}
.mkui-eyebrow--accent { color: var(--mk-accent); }
.mkui-h { font-size: 1.4em; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.mkui-sub { font-size: 0.8125em; color: var(--mk-text-2); }
.mkui-tiny { font-size: 0.6875em; color: var(--mk-muted); }
.mkui-val { font-size: 1.6em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.mkui-val--lg { font-size: 2.1em; }
.mkui-val small { font-size: 0.55em; font-weight: 500; color: var(--mk-text-2); letter-spacing: 0; }
.mkui-gain { color: var(--mk-gain); }
.mkui-loss { color: var(--mk-loss); }
.mkui-accent { color: var(--mk-accent); }
.mkui-muted { color: var(--mk-text-2); }
.mkui-row { display: flex; align-items: center; gap: 0.6em; min-width: 0; }
.mkui-between { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; min-width: 0; }
.mkui-grow { flex: 1; min-width: 0; }

/* Stage badges and dots, in the stage colours. */
.mkui-stage {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.72em;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.15em 0.6em;
    border-radius: 999em;
    white-space: nowrap;
    color: #ffffff;
    background: var(--mk-card-2);
}
.mkui-stage svg { width: 0.75em; height: 0.75em; }
.mkui-stage[data-stage="to_research"] { background: var(--mk-badge-to-research); }
.mkui-stage[data-stage="researching"] { background: var(--mk-badge-researching); }
.mkui-stage[data-stage="owned"] { background: var(--mk-badge-owned); }
.mkui-stage[data-stage="pass"] { background: var(--mk-badge-pass); }
.mkui-stage.is-empty { background: transparent; border: 1px dashed var(--mk-line-strong); color: var(--mk-muted); font-weight: 400; }
.mkui-dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; flex: 0 0 auto; }
.mkui-dot[data-stage="to_research"] { background: var(--mk-stage-to-research); }
.mkui-dot[data-stage="researching"] { background: var(--mk-stage-researching); }
.mkui-dot[data-stage="owned"] { background: var(--mk-stage-owned); }
.mkui-dot[data-stage="pass"] { background: var(--mk-stage-pass); }

/* User tags, drawn as a 16% wash of the tag colour as the app derives them. */
.mkui-tag {
    --tag: #14b8a6;
    display: inline-flex;
    align-items: center;
    font-size: 0.72em;
    font-weight: 500;
    line-height: 1.4;
    padding: 0.15em 0.6em;
    border-radius: 999em;
    white-space: nowrap;
    color: color-mix(in srgb, var(--tag) 70%, #ffffff);
    background: color-mix(in srgb, var(--tag) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag) 40%, transparent);
}
:root[data-theme="light"] .mkui-tag { color: color-mix(in srgb, var(--tag) 75%, #000000); }

/* Screener filter chips. */
.mkui-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: 0.75em;
    font-weight: 500;
    padding: 0.35em 0.65em;
    border-radius: 0.45em;
    color: var(--mk-text);
    background: var(--mk-card);
    border: 1px solid var(--mk-line-strong);
    white-space: nowrap;
}
.mkui-chip b { font-weight: 600; color: var(--mk-accent); }
.mkui-chip svg { width: 0.7em; height: 0.7em; color: var(--mk-muted); }

.mkui-tabs { display: inline-flex; gap: 0.2em; padding: 0.2em; border-radius: 0.5em; background: var(--mk-panel); border: 1px solid var(--mk-line); }
.mkui-tab { font-size: 0.75em; font-weight: 500; padding: 0.4em 0.85em; border-radius: 0.4em; color: var(--mk-text-2); white-space: nowrap; }
.mkui-tab.is-on { background: var(--mk-accent); color: #fff; }
.mkui-tabline { display: flex; gap: 1.6em; border-bottom: 1px solid var(--mk-line); }
.mkui-tabline span { font-size: 0.8125em; font-weight: 500; padding: 0 0 0.75em; color: var(--mk-text-2); white-space: nowrap; }
.mkui-tabline span.is-on { color: var(--mk-text); box-shadow: inset 0 -2px 0 var(--mk-accent); }

.mkui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-size: 0.75em;
    font-weight: 600;
    padding: 0.55em 0.9em;
    border-radius: 0.5em;
    color: #fff;
    background: var(--mk-accent);
    white-space: nowrap;
}
.mkui-btn--ghost { color: var(--mk-text); background: transparent; border: 1px solid var(--mk-line-strong); }
.mkui-btn svg { width: 0.9em; height: 0.9em; }

.mkui-ticker {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.72em;
    font-weight: 600;
    padding: 0.2em 0.55em;
    border-radius: 0.35em;
    border: 1px solid color-mix(in srgb, var(--mk-accent) 55%, transparent);
    color: var(--mk-accent);
    background: var(--mk-accent-glow);
}
.mkui-ticker i { width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--mk-gain); }

.mkui-stars { display: inline-flex; gap: 0.12em; color: #f0b429; }
.mkui-stars svg { width: 1em; height: 1em; }
.mkui-stars .is-off { color: var(--mk-line-strong); }

/* Tables. */
.mkui-table { width: 100%; border-collapse: collapse; }
.mkui-table th {
    font-size: 0.6875em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    color: var(--mk-text-2);
    padding: 0.85em 0.9em;
    border-bottom: 1px solid var(--mk-line);
    white-space: nowrap;
}
.mkui-table--screener th { color: var(--mk-accent); background: var(--mk-panel); }
.mkui-table td {
    font-size: 0.8125em;
    padding: 0.72em 0.8em;
    border-bottom: 1px solid var(--mk-line);
    white-space: nowrap;
    color: var(--mk-text);
}
.mkui-table .num { text-align: right; }
.mkui-table .tick { color: var(--mk-accent); font-weight: 600; }
.mkui-table .name { color: var(--mk-accent); }
.mkui-table .dim { color: var(--mk-text-2); }
.mkui-table tr.is-hl td { background: color-mix(in srgb, var(--mk-accent) 10%, transparent); }
.mkui-table tr.is-hl td:first-child { box-shadow: inset 0.2em 0 0 var(--mk-accent); }
.mkui-table td .mkui-stage { font-size: 0.85em; }
.mkui-table td.mkui-gain { color: var(--mk-gain); }
.mkui-table td.mkui-loss { color: var(--mk-loss); }

/* A menu open over the screen, as the verdict picker opens in the app. */
.mkui-menu {
    position: absolute;
    z-index: 3;
    min-width: 12.5em;
    padding: 0.35em;
    border-radius: 0.6em;
    background: var(--mk-card);
    border: 1px solid var(--mk-line-strong);
    box-shadow: 0 1.25em 2.5em -0.75em rgba(0, 0, 0, 0.6);
}
.mkui-menu__label { font-size: 0.65em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-muted); padding: 0.6em 0.8em 0.4em; }
.mkui-menu__item { display: flex; align-items: center; gap: 0.6em; font-size: 0.8125em; padding: 0.5em 0.7em; border-radius: 0.4em; color: var(--mk-text); }
.mkui-menu__item.is-on { background: var(--mk-card-2); }
.mkui-menu__item svg { width: 0.9em; height: 0.9em; margin-left: auto; color: var(--mk-accent); }
.mkui-menu__sep { height: 1px; background: var(--mk-line); margin: 0.3em 0.4em; }

/* A notice sliding in, as window.vbToast draws them. */
.mkui-toast {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    width: 21em;
    padding: 0.9em 1em;
    border-radius: 0.6em;
    background: var(--mk-card);
    border: 1px solid var(--mk-line-strong);
    border-left: 3px solid var(--mk-gain);
    box-shadow: 0 1.25em 2.5em -0.75em rgba(0, 0, 0, 0.6);
}
.mkui-toast svg { width: 1.1em; height: 1.1em; color: var(--mk-gain); flex: 0 0 auto; margin-top: 0.1em; }
.mkui-toast b { display: block; font-size: 0.8125em; font-weight: 600; }
.mkui-toast span { display: block; font-size: 0.75em; color: var(--mk-text-2); margin-top: 0.15em; }

/* A panel floating in front of the screen, for the second half of a story. */
.mkui-float {
    position: absolute;
    z-index: 2;
    background: var(--mk-panel);
    border: 1px solid var(--mk-line-strong);
    border-radius: 0.75em;
    box-shadow: 0 2em 4em -1.5em rgba(0, 0, 0, 0.75);
}

/* Research reports keep their serif body text in the app, so they do here. */
.mkui-serif { font-family: Georgia, 'Times New Roman', serif; letter-spacing: 0; }
.mkui-cite { color: var(--mk-accent); font-family: var(--mk-sans); font-size: 0.62em; font-weight: 600; vertical-align: super; line-height: 0; }
.mkui-cite.is-on { background: var(--mk-accent); color: #fff; border-radius: 0.25em; padding: 0.05em 0.25em; }

.mkui-chart { display: block; width: 100%; height: auto; }
.mkui-legend { display: flex; gap: 1.2em; font-size: 0.6875em; color: var(--mk-text-2); }
.mkui-legend i { display: inline-block; width: 1.1em; height: 0.18em; border-radius: 0.1em; vertical-align: middle; margin-right: 0.45em; }

.mkui-bar { display: flex; height: 0.4em; border-radius: 999em; overflow: hidden; background: var(--mk-card); gap: 2px; }
.mkui-bar span { display: block; height: 100%; }

.mkui-avatars { display: flex; }
.mkui-avatars span {
    display: grid;
    place-items: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    margin-right: -0.5em;
    font-size: 0.6em;
    font-weight: 600;
    color: var(--mk-text);
    background: var(--mk-card-2);
    border: 2px solid var(--mk-panel);
}

.mkui-nav { display: flex; flex-direction: column; gap: 0.1em; }
.mkui-nav span {
    display: flex;
    align-items: center;
    gap: 0.7em;
    font-size: 0.78em;
    padding: 0.42em 0.7em;
    border-radius: 0.4em;
    color: var(--mk-text-2);
    white-space: nowrap;
}
.mkui-nav span.is-on { color: var(--mk-text); background: var(--mk-card); }
.mkui-nav svg { width: 0.95em; height: 0.95em; opacity: 0.8; }
.mkui-nav em { margin-left: auto; font-style: normal; font-size: 0.85em; font-weight: 600; color: #fff; background: var(--mk-accent); border-radius: 999em; padding: 0.05em 0.5em; }

.mkui-kv { display: flex; flex-direction: column; }
.mkui-kv div { display: flex; justify-content: space-between; gap: 1em; padding: 0.55em 0; border-bottom: 1px solid var(--mk-line); font-size: 0.8125em; }
.mkui-kv div:last-child { border-bottom: 0; }
.mkui-kv dt, .mkui-kv span:first-child { color: var(--mk-text-2); }
.mkui-kv b { font-weight: 600; }


/* ===========================================================================
   Principles page.

   The investors the product is built on, honoured through their own words
   and our medallions rather than photographs (see website/principles.html).
   The medallions and the large marks draw their ring in when they appear;
   everything is still and complete without motion.
   =========================================================================== */

/* The logo drawn large. The ring is 2 x pi x 26 long, hence 164. */
.mk-bigmark { display: block; overflow: visible; }
.mk-bigmark__ring {
    stroke: var(--mk-text);
    stroke-dasharray: 164;
    stroke-dashoffset: 0;
    transform: rotate(-90deg);
    transform-box: fill-box;
    transform-origin: center;
}
.mk-bigmark__gem { fill: var(--mk-accent); stroke: var(--mk-accent); transform-box: fill-box; transform-origin: center; }

.mk-principles-hero {
    padding-top: clamp(72px, 9vw, 128px);
    padding-bottom: clamp(88px, 10vw, 144px);
    text-align: center;
}
.mk-principles-hero .mk-container { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.mk-principles-hero .mk-bigmark { width: clamp(112px, 12vw, 176px); height: auto; margin-bottom: 32px; }
.mk-principles-hero .mk-display { max-width: 12ch; }
.mk-principles-hero .mk-lead { max-width: 700px; }

/* The mark, explained. */
.mk-markstory { align-items: center; row-gap: 56px; }
.mk-markstory__figure { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.mk-markstory__copy { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 22px; }
.mk-markstory__title { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -0.032em; }
.mk-markdiagram { position: relative; width: min(460px, 100%); aspect-ratio: 46 / 44; }
.mk-bigmark--diagram { position: absolute; left: 17.4%; top: 15.9%; width: 65.2%; height: auto; }
.mk-markdiagram__step {
    position: absolute;
    font: 600 12px/1 var(--mk-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}
.mk-markdiagram__step--top { top: 4%; left: 0; right: 0; text-align: center; }
.mk-markdiagram__step--bottom { bottom: 4%; left: 0; right: 0; text-align: center; }
.mk-markdiagram__step--right { right: 0; top: 50%; transform: translateY(-50%); }
.mk-markdiagram__step--left { left: 2.6%; top: 50%; transform: translateY(-50%); }
.mk-markkey { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; width: min(460px, 100%); margin: 0; }
.mk-markkey dt { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--mk-text); }
.mk-markkey dt svg { width: 18px; height: 18px; flex: none; }
.mk-markkey div:first-child dt svg { color: var(--mk-accent); }
.mk-markkey dd { margin: 6px 0 0 28px; font-size: 14px; line-height: 1.5; color: var(--mk-text-2); }
.mk-markstory__quote {
    margin: 12px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--mk-line-strong);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mk-markstory__quote p { margin: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; color: var(--mk-text); }
.mk-markstory__quote footer { font-size: 14px; color: var(--mk-text-2); }

.mk-principles-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    padding-bottom: clamp(56px, 7vw, 96px);
}
.mk-principles-intro .mk-title { max-width: 21ch; }
.mk-principles-intro .mk-lead { max-width: 660px; }

/* One investor, one principle. The surname behind it is drawn as an outline
   in a tone between the page and its hairlines, so it reads as texture. */
.mk-plate {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--mk-col-gap);
    align-items: center;
    padding: clamp(72px, 8vw, 112px) 0;
    border-top: 1px solid var(--mk-line);
}
.mk-plate__surname {
    position: absolute;
    right: -0.04em;
    bottom: -0.26em;
    font-size: clamp(120px, 17vw, 240px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--mk-line) 75%, var(--mk-bg));
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}
.mk-plate__who { grid-column: 1 / span 4; position: relative; display: flex; flex-direction: column; gap: 22px; }
.mk-plate__medal { width: 148px; }
.mk-plate__identity { display: flex; flex-direction: column; gap: 8px; }
.mk-plate__number { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--mk-accent); }
.mk-plate__name { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.025em; color: var(--mk-text); }
.mk-plate__work { font-size: 15px; line-height: 1.4; color: var(--mk-text-2); }
.mk-plate__idea { grid-column: 6 / span 7; position: relative; display: flex; flex-direction: column; gap: 26px; }
.mk-plate__title { margin: 0; font-size: clamp(34px, 3.6vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -0.032em; color: var(--mk-text); text-wrap: balance; }
.mk-plate__quote { margin: 0; }
.mk-plate__quote p { margin: 0; font-size: clamp(21px, 1.9vw, 27px); font-weight: 500; line-height: 1.38; letter-spacing: -0.02em; color: var(--mk-text); text-wrap: pretty; }
.mk-plate__product {
    margin: 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-top: 22px;
    border-top: 1px solid var(--mk-line);
    font-size: 17px;
    line-height: 1.5;
    color: var(--mk-text-2);
}
.mk-plate__product strong { font-weight: 600; color: var(--mk-text); }
.mk-plate__mark { flex: none; margin-top: 3px; color: var(--mk-text); }
.mk-plate__mark .vb-mark__gem { fill: var(--mk-accent); stroke: var(--mk-accent); }

/* The medallion: our ring with the investor's initials and their work. */
.mk-medal { display: block; width: 100%; height: auto; overflow: visible; }
.mk-medal__edge { stroke: var(--mk-line); }
.mk-medal__ring {
    stroke: var(--mk-text);
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transform: rotate(-90deg);
    transform-box: fill-box;
    transform-origin: center;
}
.mk-medal__gem { fill: var(--mk-accent); transform-box: fill-box; transform-origin: center; }
.mk-medal__legend { fill: var(--mk-text-2); font-family: var(--mk-sans); transform-box: view-box; transform-origin: 100px 100px; }
.mk-medal__initials { fill: var(--mk-text); font-family: var(--mk-sans); }

/* The shelf. Books keep their dark cloth in both themes. */
.mk-shelfsec { align-items: end; row-gap: 56px; }
.mk-shelfsec__copy { grid-column: 1 / span 4; align-self: center; display: flex; flex-direction: column; gap: 22px; }
.mk-shelf { grid-column: 6 / span 7; --spine-scale: 1; }
.mk-shelf__row {
    list-style: none;
    margin: 0;
    padding: 0 0 20px;
    min-height: calc(520px * var(--spine-scale));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: calc(14px * var(--spine-scale));
    border-bottom: 2px solid var(--mk-line-strong);
}
.mk-spine {
    flex: none;
    width: calc(var(--w) * var(--spine-scale));
    height: calc(var(--h) * var(--spine-scale));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: calc(22px * var(--spine-scale)) 0;
    border-radius: 4px 4px 2px 2px;
    background: var(--spine, #1d2638);
    box-shadow: inset -6px 0 12px rgba(0, 0, 0, 0.35);
}
.mk-spine:nth-child(4) { rotate: -4deg; transform-origin: 50% 100%; }
.mk-spine--navy { --spine: #1d2638; }
.mk-spine--oxblood { --spine: #2a1d20; }
.mk-spine--forest { --spine: #1a2621; }
.mk-spine--charcoal { --spine: #22252b; }
.mk-spine--ochre { --spine: #2b2619; }
.mk-spine--slate { --spine: #1b2230; }
.mk-spine__band { width: 44%; height: 2px; background: var(--mk-accent); }
.mk-spine__title,
.mk-spine__meta {
    writing-mode: vertical-rl;
    /* Sideways rather than mixed, so punctuation such as the apostrophe in
       Poor Charlie's turns with the letters instead of standing upright. */
    text-orientation: sideways;
    transform: rotate(180deg);
}
.mk-spine__meta { white-space: nowrap; }
.mk-spine__title {
    /* In vertical text the height is the line length, so a title too long
       for its spine wraps onto a second line beside the first. */
    max-height: calc(var(--h) * var(--spine-scale) - 150px * var(--spine-scale));
    line-height: 1.12;
    text-align: center;
    font-size: min(21px, calc(var(--w) * var(--spine-scale) * 0.2));
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #eef1f5;
}
.mk-spine__meta {
    font-size: max(9px, calc(11px * var(--spine-scale)));
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9aa4b2;
}

.mk-principles-promise__head { display: flex; flex-direction: column; gap: 22px; max-width: 760px; margin-bottom: 56px; }

/* Motion. The plates and marks stay in place while their parts arrive. */
/* Doubled attribute, because the general reveal rule further down has the
   same specificity and would otherwise fade and lift the whole plate. */
.mk-motion [data-reveal="plate"][data-reveal],
.mk-motion [data-reveal="mark"][data-reveal] { opacity: 1; transform: none; filter: none; }
.mk-motion .mk-bigmark__ring { transition: stroke-dashoffset 1.8s var(--mk-ease-io) var(--d, 0.1s); }
.mk-motion .mk-bigmark__gem { transition: transform 0.9s var(--mk-ease) calc(var(--d, 0.1s) + 1.3s), opacity 0.6s ease calc(var(--d, 0.1s) + 1.3s); }
.mk-motion .mk-bigmark:not(.is-in) .mk-bigmark__ring { stroke-dashoffset: 164; }
.mk-motion .mk-bigmark:not(.is-in) .mk-bigmark__gem { transform: scale(0.2) rotate(-45deg); opacity: 0; }
.mk-motion .mk-plate .mk-medal__ring { transition: stroke-dashoffset 1.6s var(--mk-ease-io) 0.35s; }
.mk-motion .mk-plate .mk-medal__gem { transition: transform 0.7s var(--mk-ease) 1.7s; }
.mk-motion .mk-plate .mk-medal__legend { transition: transform 2.2s var(--mk-ease) 0.3s, opacity 1.2s ease 0.5s; }
.mk-motion .mk-plate:not(.is-in) .mk-medal__ring { stroke-dashoffset: 1; }
.mk-motion .mk-plate:not(.is-in) .mk-medal__gem { transform: scale(0); }
.mk-motion .mk-plate:not(.is-in) .mk-medal__legend { transform: rotate(-40deg); opacity: 0; }
.mk-motion .mk-plate__surname { transition: transform 1.8s var(--mk-ease), opacity 1.4s ease; }
.mk-motion .mk-plate:not(.is-in) .mk-plate__surname { transform: translate3d(8%, 0, 0); opacity: 0; }

@media (max-width: 1199.98px) {
    .mk-markstory__figure,
    .mk-markstory__copy { grid-column: 1 / -1; }
    .mk-markstory__copy { max-width: 640px; }
    .mk-plate__who { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 28px; }
    .mk-plate__medal { width: 120px; flex: none; }
    .mk-plate__idea { grid-column: 1 / -1; margin-top: 36px; }
    .mk-shelfsec__copy,
    .mk-shelf { grid-column: 1 / -1; }
    .mk-shelf { --spine-scale: 0.85; }
}

@media (max-width: 767.98px) {
    .mk-plate__who { gap: 20px; }
    .mk-plate__medal { width: 96px; }
    .mk-plate__idea { margin-top: 28px; gap: 22px; }
    .mk-plate__surname { font-size: 116px; }
    .mk-markdiagram__step { font-size: 11px; }
    .mk-markkey { gap: 20px; }
    .mk-shelf { --spine-scale: 0.62; margin-right: calc(var(--mk-gutter) * -1); }
    .mk-shelf__row { justify-content: flex-start; overflow-x: auto; padding-right: var(--mk-gutter); scroll-snap-type: x proximity; scrollbar-width: none; }
    .mk-shelf__row::-webkit-scrollbar { display: none; }
    .mk-spine { scroll-snap-align: start; }
}

/* ===========================================================================
   Light and motion.
   =========================================================================== */

/* The light behind the top of every page. Stronger on the home page, where
   it falls behind the headline and the product frame, softer on the rest. */
.mk-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1500px;
    pointer-events: none;
    z-index: 0;
    /* The still version, and what anyone without motion sees. When motion is
       on, marketing_motion.js draws the same lights, drifting, on the canvas
       inside and switches this background off (.is-live).

       Never move this with CSS. At this size a composited layer costs tens of
       megabytes of GPU memory on a retina screen, and beside the hero's 3D
       tilt that was enough to stop some GPUs painting the page at all. The
       canvas is drawn at half the page's resolution and stretched by the
       browser, which smooths it and keeps the moving surface small. Any lower
       and the stretch shows: at this little light each canvas pixel becomes a
       visible square. */
    background:
        radial-gradient(850px 620px at 50% -60px, var(--mk-glow), var(--mk-glow-soft) 55%, transparent 100%),
        radial-gradient(900px 560px at 18% 12%, var(--mk-glow-navy), transparent 100%),
        radial-gradient(760px 520px at 86% 6%, var(--mk-glow-soft), transparent 100%);
}
.mk-glow--soft { height: 900px; opacity: 0.6; }
.mk-glow.is-live { background: none; }
.mk-glow__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* A second light where the product sits, as if the screen itself glowed. */
.mk-hero__stage { position: relative; perspective: 2000px; }
.mk-hero__stage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -12%;
    width: 110%;
    height: 70%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(102, 149, 250, 0.065), rgba(102, 149, 250, 0.02) 60%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}

/* A rim of light along the top of the frame, and a faint sheen down it. */
.mk-film::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.mk-film__badge,
.mk-body .mk-film__play { z-index: 2; }

/* The hero headline carries a faint sheen, white at the top to the app's
   secondary text colour at the foot of each line. Dark theme only. */
:root:not([data-theme="light"]) .mk-display:not([data-split]),
:root:not([data-theme="light"]) .mk-display .mk-word__i {
    background: linear-gradient(180deg, #f7f9fc 30%, #b4bfcd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- Motion ------------------------------------------------------------ */

/* Everything below applies only under .mk-motion, which the head script sets
   when motion is welcome and removes again if this page's script never runs. */

.mk-motion [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity 0.9s var(--mk-ease) var(--d, 0s),
        transform 1.1s var(--mk-ease) var(--d, 0s),
        filter 0.9s var(--mk-ease) var(--d, 0s);
}
.mk-motion [data-reveal="soft"] { transform: translate3d(0, 16px, 0); filter: blur(10px); }
.mk-motion [data-reveal="screen"] {
    transform: translate3d(0, 72px, 0) scale(0.965);
    transition-duration: 1.1s, 1.5s, 0.9s;
}
.mk-motion [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Headlines rise a word at a time from behind a mask. */
.mk-motion [data-reveal="words"] { opacity: 0; transform: none; }
.mk-motion [data-reveal="words"][data-split] { opacity: 1; }
.mk-word {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    padding: 0.08em 0.04em 0.16em;
    margin: -0.08em -0.04em -0.16em;
}
.mk-word__i { display: inline-block; }
.mk-motion .mk-word__i {
    transform: translate3d(0, 112%, 0);
    transition: transform 1.15s var(--mk-ease);
    transition-delay: calc(var(--d, 0s) + var(--i, 0) * 55ms);
}
.mk-motion .is-in .mk-word__i { transform: none; }

/* A statement that lights up word by word as it scrolls past. */
.mk-motion .mk-lit { color: var(--mk-muted); transition: color 0.35s ease; }
.mk-motion .mk-lit.is-lit { color: var(--mk-text); }
.mk-motion .mk-close__quote .mk-lit { color: color-mix(in srgb, var(--mk-text) 22%, transparent); }
.mk-motion .mk-close__quote .mk-lit.is-lit { color: var(--mk-text); }

/* The hero frame lies back like a screen on a desk and straightens as the
   page scrolls. --tilt runs from 1 to 0 and is set by marketing_motion.js. */
.mk-motion .mk-hero__stage .mk-film {
    transform: rotateX(calc(var(--tilt, 0) * 18deg)) scale(calc(1 - var(--tilt, 0) * 0.06));
    transform-origin: 50% 0;
    will-change: transform;
}

/* The navigation is clear over the light and frosts once the page moves. */
.mk-nav { transition: background-color 0.3s ease, border-color 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease; }
.mk-motion .mk-nav:not(.is-scrolled) {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* The chapter's place in the workflow fills in, bar by bar. */
.mk-steps i { transition: background-color 0.45s ease; }
.mk-steps i:nth-child(2) { transition-delay: 0.12s; }
.mk-steps i:nth-child(3) { transition-delay: 0.24s; }
.mk-steps i:nth-child(4) { transition-delay: 0.36s; }
.mk-motion .mk-kicker:not(.is-in) .mk-steps i { background: var(--mk-line-strong); }

/* The workflow's steps wait in shadow until the company reaches them. */
.mk-motion .mk-flow__step { opacity: 0.32; transition: opacity 0.6s ease; }
.mk-motion .mk-flow__step.is-lit { opacity: 1; }

/* Steps inside a product screen, timed from the moment the screen appears.
   --seq0 is when the first step starts and --s counts the steps after it. */
.mk-motion [data-seq] {
    opacity: 0;
    transform: translate3d(0, 0.6em, 0);
    transition:
        opacity 0.55s var(--mk-ease),
        transform 0.75s var(--mk-ease),
        clip-path 1.6s var(--mk-ease-io);
    transition-delay: calc(var(--seq0, 0.45s) + var(--s, 0) * 60ms);
}
.mk-motion [data-seq="pop"] { transform: scale(0.88); }
.mk-motion [data-seq="left"] { transform: translate3d(-1.2em, 0, 0); }
.mk-motion [data-seq="right"] { transform: translate3d(1.6em, 0, 0); }
.mk-motion [data-seq="up"] { transform: translate3d(0, 1.4em, 0); }
.mk-motion [data-seq="fade"] { transform: none; }
.mk-motion [data-seq="menu"] { transform: translate3d(0, -0.5em, 0) scale(0.95); transform-origin: 100% 0; }
.mk-motion [data-seq="grow"] { opacity: 1; transform: scaleX(0); transform-origin: 0 50%; transition-duration: 0s, 1.1s, 0s; }
.mk-motion [data-seq="wipe"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
.mk-motion .is-in [data-seq] { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* The highlighted row lights after the table has loaded. */
.mk-motion .mkui-table tr.is-hl td {
    transition: background-color 0.6s ease var(--hl, 1.5s), box-shadow 0.6s ease var(--hl, 1.5s);
}
.mk-motion .mk-shot:not(.is-in) .mkui-table tr.is-hl td,
.mk-motion .mk-hero__stage:not(.is-in) .mkui-table tr.is-hl td { background-color: transparent; box-shadow: none; }

/* A citation the report is pointing at pulses twice. */
.mk-motion .is-in .mkui-cite.is-on { animation: mk-pulse 1.4s var(--mk-ease) var(--pulse, 1.6s) 2; }
.mk-motion .is-in .mkui-float .mkui-cite.is-on { animation: none; }
@keyframes mk-pulse {
    0% { box-shadow: 0 0 0 0 rgba(102, 149, 250, 0.75); }
    100% { box-shadow: 0 0 0 0.8em rgba(102, 149, 250, 0); }
}

/* One badge giving way to the next, as a stage changes. Statically only the
   second is shown. */
.mkui-swap { display: inline-grid; justify-items: end; align-items: center; }
.mkui-swap > * { grid-area: 1 / 1; }
.mkui-swap__from { visibility: hidden; }
.mk-motion .mkui-swap__from { visibility: visible; }
.mk-motion .mkui-swap__to { opacity: 0; }
.mk-motion .is-in .mkui-swap__from { animation: mk-swap-out 0.35s ease var(--swap, 2.4s) forwards; }
.mk-motion .is-in .mkui-swap__to { animation: mk-swap-in 0.5s var(--mk-ease) var(--swap, 2.4s) forwards; }
@keyframes mk-swap-out { to { opacity: 0; transform: translate3d(0, -0.5em, 0); } }
@keyframes mk-swap-in { from { opacity: 0; transform: translate3d(0, 0.5em, 0); } to { opacity: 1; transform: none; } }

/* Small responses to the pointer. */
.mk-body .mk-btn--primary { box-shadow: 0 0 0 0 transparent; }
.mk-body .mk-btn--primary:hover { box-shadow: 0 10px 30px -10px var(--mk-accent); transform: translateY(-1px); }
.mk-body .mk-btn { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.25s ease, transform 0.25s var(--mk-ease); }
.mk-body .mk-link::after { transition: transform 0.25s var(--mk-ease); }
.mk-body .mk-link:hover::after { transform: translateX(3px) rotate(45deg); }


/* ---- Responsive --------------------------------------------------------- */

/* Tablet. The grid keeps twelve columns but the side-by-side arrangements
   stack, because a seven-and-five split is too narrow to read at this size. */
@media (max-width: 1199.98px) {
    .mk-chapter__head .mk-title,
    .mk-chapter__head .mk-chapter__lead { grid-column: 1 / -1; }
    .mk-chapter__head .mk-chapter__lead { max-width: 640px; padding-bottom: 0; }
    .mk-split__media,
    .mk-split__copy { grid-column: 1 / -1; }
    .mk-split__copy { order: -1; max-width: 640px; }
    .mk-spec__head { grid-column: 1 / -1; }
    .mk-spec__intro { max-width: 52ch; }
    .mk-spec__list { grid-column: 1 / -1; }
    .mk-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
    .mk-traveller,
    .mk-flow__progress { display: none; }
    .mk-flow__step:nth-child(2)::before { right: auto; width: calc(100% - var(--mk-col-gap)); }
    .mk-footer__brand { grid-column: 1 / -1; }
    .mk-footer__col:nth-child(2) { grid-column: 1 / span 4; }
    .mk-footer__col:nth-child(3),
    .mk-footer__col:nth-child(4) { grid-column: span 4; }
}

/* Phone. The header changes shape (logo and the call to action on one row,
   the links on a second), and every screen stops shrinking at a legible size
   and crops from the right, fading out rather than ending on a hard edge. */
@media (max-width: 767.98px) {
    :root { --mk-col-gap: 16px; }
    body.mk-body { font-size: 16px; }

    .mk-nav__inner { padding-top: 10px; padding-bottom: 10px; row-gap: 12px; }
    .mk-nav__links { order: 3; flex: 1 0 100%; gap: 22px; overflow-x: auto; scrollbar-width: none; }
    .mk-nav__links::-webkit-scrollbar { display: none; }
    .mk-body .mk-nav__link { white-space: nowrap; padding: 4px 0; }
    .mk-nav__right { gap: 14px; }
    .mk-nav__right .mk-nav__link--signin { display: none; }
    .mk-nav__links .mk-nav__link--signin { display: inline; }

    .mk-film { border-radius: 14px; }
    .mk-film__badge,
    .mk-body .mk-film__play { bottom: 12px; font-size: 12px; padding: 7px 12px 7px 8px; gap: 7px; }
    .mk-film__glyph { width: 20px; height: 20px; }
    .mk-film__glyph svg { width: 9px; height: 9px; }

    .mk-flow { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .mk-flow__step { padding: 0 0 40px 34px; }
    .mk-flow__step::before,
    .mk-flow__step:nth-child(2)::before,
    .mk-flow__step:last-child::before { top: 14px; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
    .mk-flow__step:last-child { padding-bottom: 0; }
    .mk-flow__step:last-child::before { display: none; }
    .mk-flow__dot { top: 2px; }
    .mk-flow__line { max-width: none; }

    .mk-shot .mkui { --mkui-min: 7.5px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent); }

    .mk-plans { grid-template-columns: minmax(0, 1fr); }
    .mk-plan,
    .mk-plan + .mk-plan { padding: 32px 0 8px; border-left: 0; }
    .mk-plan + .mk-plan { border-top: 1px solid var(--mk-line); margin-top: 24px; }

    .mk-spec__list,
    .mk-faq { grid-template-columns: minmax(0, 1fr); }
    .mk-half { grid-column: 1 / -1; }
    .mk-footer__col:nth-child(2),
    .mk-footer__col:nth-child(3),
    .mk-footer__col:nth-child(4) { grid-column: span 6; }
    .mk-footer__col:nth-child(2) { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
    .mk-nav__links .mk-nav__link--signin { display: none; }
}

/* ===========================================================================
   The pre-launch holding page (website/coming_soon.html): the mark, what its
   two parts stand for, and one line. The ring draws itself in and the gem
   settles after it, without JavaScript; reduced motion shows it complete.
   =========================================================================== */
/* The research report's light, the same blue and reach, hung top centre. */
.mk-soon-page {
    background:
        radial-gradient(circle at 50% 0, rgba(37, 99, 235, 0.08), transparent 34rem),
        var(--mk-bg);
}
.mk-soon {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    text-align: center;
    padding-top: clamp(48px, 10vh, 120px);
    padding-bottom: clamp(48px, 10vh, 120px);
}
.mk-soon__mark { width: clamp(120px, 13vw, 184px); height: auto; }
.mk-soon__mark .mk-bigmark__ring { animation: mk-soon-ring 1.8s var(--mk-ease-io) 0.2s both; }
.mk-soon__mark .mk-bigmark__gem { animation: mk-soon-gem 0.9s var(--mk-ease) 1.5s both; }
@keyframes mk-soon-ring { from { stroke-dashoffset: 164; } to { stroke-dashoffset: 0; } }
@keyframes mk-soon-gem { from { transform: scale(0.2) rotate(-45deg); opacity: 0; } to { transform: none; opacity: 1; } }
.mk-soon__key {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--mk-text-2);
}
.mk-soon__key span { display: inline-flex; align-items: center; gap: 8px; }
.mk-soon__key svg { width: 14px; height: 14px; flex: none; }
.mk-soon__key span:first-child svg { color: var(--mk-accent); }
.mk-soon__lead { max-width: 560px; text-wrap: balance; }

/* The wordmark being drawn: guides rule across and down, the outlines trace
   with their points, a light fill comes up, then everything resolves into
   the solid wordmark. The resting state is the finished word, so reduced
   motion shows it at once. Lengths are font units (the viewBox). */
.mk-build { width: clamp(240px, 30vw, 400px); height: auto; overflow: visible; margin: -4px 0 12px; }
.mk-build__guides line {
    stroke: var(--mk-line-strong);
    stroke-width: 14;
    stroke-dasharray: 1;
    opacity: 0;
    animation: mk-build-guide 3.6s var(--mk-ease-io) calc(0.15s + var(--i) * 0.04s) both;
}
.mk-build__glyph path {
    fill: var(--mk-text);
    stroke: var(--mk-text);
    stroke-width: 20;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-opacity: 0;
    animation: mk-build-glyph 3.2s var(--mk-ease-io) calc(0.5s + var(--i) * 0.07s) both;
}
.mk-build__glyph--accent path { fill: var(--mk-accent); }
.mk-build__dots {
    fill: var(--mk-text);
    fill-opacity: 0;
    animation: mk-build-dots 3.2s ease calc(0.5s + var(--i) * 0.07s) both;
}
@keyframes mk-build-guide {
    0% { stroke-dashoffset: 1; opacity: 1; }
    30% { stroke-dashoffset: 0; }
    75% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes mk-build-glyph {
    0% { stroke-dashoffset: 1; stroke-opacity: 1; fill-opacity: 0; }
    45% { stroke-dashoffset: 0; fill-opacity: 0; }
    60%, 80% { stroke-opacity: 1; fill-opacity: 0.1; }
    100% { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1; }
}
@keyframes mk-build-dots {
    0%, 30% { fill-opacity: 0; }
    45%, 80% { fill-opacity: 1; }
    100% { fill-opacity: 0; }
}
.mk-soon__footer { padding-bottom: 32px; text-align: center; }
.mk-soon__footer .mk-p { font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
    .mk-body *, .mk-body *::before, .mk-body *::after { transition: none !important; animation: none !important; }
}