/* ═══════════════════════════════════════════════════════════════
   APEXVOL MARKETING v4 — "THE RESEARCH DESK"
   Cold-daylight exhibit system for the public pages. The page reads
   like an institutional research note: every product visual is a
   numbered EXHIBIT (a dark screen glowing on a paper-bright field),
   section dividers are chart-axis rules with tick marks, and data
   is set in a tabular mono. The one flourish is the volatility-smile
   axis drawn under the hero headline.

   Loaded ONLY by v4 pages (via _marketing_v4.html). Pages opt in by
   setting {% block body_class %}mx-page{% endblock %} so the shared
   nav / footer / mobile-CTA in base_marketing.html can be re-skinned
   here without leaking into the ~90 other templates that extend it.

   Type:   Archivo (wdth 125, 600–800)  — display
           Inter Tight                  — body / UI
           IBM Plex Mono                — data, captions, eyebrows
   Color:  paper #F4F6F9 · ink #0B1524 · interactive blue #1D4ED8
           green/red appear ONLY as data semantics (up/down, live)
   Motion: hero rise + smile draw on load; IntersectionObserver
           reveals; count-up stats. No GSAP, no Three.js.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --mx-display: 'Archivo', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
    --mx-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mx-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --mx-paper: #0B1220;      /* page field — cold blue-white, no cream */
    --mx-panel: #121C2D;      /* cards / exhibit mats */
    --mx-panel-2: #0E1728;    /* exhibit caption bars, hover fills */
    --mx-ink: #F2F6FC;        /* headlines, primary buttons, dark blocks */
    --mx-ink-2: #AEBACD;      /* body text */
    --mx-mute: #7E8BA1;       /* captions, secondary mono */
    --mx-line: rgba(148,163,184,0.14);       /* hairlines */
    --mx-line-2: rgba(148,163,184,0.3);     /* stronger hairline (hover borders) */

    --mx-blue: #4C7DF7;       /* the interactive color */
    --mx-blue-soft: rgba(76,125,247,0.14);
    --mx-up: #34D399;         /* data: positive / live */
    --mx-down: #F87171;       /* data: negative */

    --mx-shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -20px rgba(0,0,0,0.55);
    --mx-shadow-exhibit: 0 1px 2px rgba(0,0,0,0.35), 0 32px 64px -32px rgba(0,0,0,0.7);
    --mx-radius: 12px;
}

/* ── PAGE BASE + SHARED-SHELL RE-SKIN (scoped to body.mx-page) ── */
/* Tailwind's base layer ships html{scroll-behavior:smooth}. On v3 pages GSAP
   resets it to auto; v4 has no GSAP and the UA smooth animation can stall
   (observed: anchor scrolls freeze a few px in). Pin v4 pages to instant. */
html:has(body.mx-page) { scroll-behavior: auto; }
body.mx-page { background: var(--mx-paper) !important; }

/* Solid near-paper bg, no backdrop-filter: the bar is fixed and on screen for
   the whole scroll, and per-frame backdrop blur starves rasterization on
   long-paint pages (observed as checkerboard tiles while scrolling). */
body.mx-page > nav.sticky {
    background: rgba(9, 15, 26, 0.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
body.mx-page > nav.sticky.mx-nav-scrolled {
    border-bottom-color: var(--mx-line);
    box-shadow: 0 8px 24px -20px rgba(11,21,36,0.35);
}
/* The wordmark ships as pure white pixels — invert it to ink on paper. */
/* wordmark ships white — native on dark, no invert needed */
body.mx-page .marketing-nav-links a { color: rgba(255,255,255,0.55); }
body.mx-page .marketing-nav-links a:hover,
body.mx-page .marketing-nav-links a.is-current { color: var(--mx-ink); }
body.mx-page .marketing-auth-login { color: var(--mx-ink-2); }
body.mx-page .marketing-auth-login:hover { color: var(--mx-ink); }
body.mx-page .marketing-auth-cta {
    background: var(--mx-panel); border: 1px solid var(--mx-line-2); color: var(--mx-ink);
}
body.mx-page .marketing-auth-cta:hover { border-color: var(--mx-ink); background: var(--mx-panel); color: var(--mx-ink); }
body.mx-page .nav-trial-cta {
    background: var(--mx-blue) !important;
    border-color: var(--mx-blue) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px -10px rgba(11,21,36,0.5);
}
body.mx-page .nav-trial-cta:hover {
    background: #6C97FF !important;
    border-color: #6C97FF !important;
    box-shadow: 0 10px 24px -10px rgba(76,125,247,0.55);
    transform: translateY(-1px);
}
body.mx-page #marketing-mobile-menu-btn { color: var(--mx-ink-2); }
body.mx-page #marketing-mobile-menu-btn:hover { color: var(--mx-ink); }
body.mx-page #marketing-mobile-menu { background: var(--mx-paper); border-top-color: var(--mx-line); }
body.mx-page #marketing-mobile-menu a { color: var(--mx-ink-2); }
body.mx-page #marketing-mobile-menu a:hover { color: var(--mx-ink); }
body.mx-page #marketing-mobile-menu a.text-white { color: var(--mx-ink); }
body.mx-page #marketing-mobile-menu .border-t { border-color: var(--mx-line); }

/* Footer stays a dark closing block — solid ink, not translucent gray over paper. */
body.mx-page > footer { background: #0A101C !important; border-top-color: #0A101C !important; }

/* Sticky mobile trial CTA (anon) — ink bar with blue action reads on paper. */
body.mx-page .sticky-mobile-cta {
    background: rgba(11, 21, 36, 0.97);
    border-top-color: rgba(29, 78, 216, 0.4);
}
body.mx-page .sticky-mobile-cta-btn {
    background: var(--mx-blue);
    box-shadow: 0 4px 12px -4px rgba(76,125,247,0.6);
}

/* ── SCOPE ── */
.mx {
    font-family: var(--mx-sans);
    background: var(--mx-paper);
    color: var(--mx-ink-2);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.006em;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
.mx *, .mx *::before, .mx *::after { box-sizing: border-box; }
.mx ::selection { background: rgba(29, 78, 216, 0.16); color: var(--mx-ink); }
.mx a { color: inherit; }
.mx :focus-visible { outline: 2px solid var(--mx-blue); outline-offset: 2px; border-radius: 2px; }

.mx-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.mx-sec { padding: 92px 0; position: relative; }
.mx-center { text-align: center; }
.mx-mt-lg { margin-top: 64px; }

/* ═══════════════ TYPE ═══════════════ */
.mx-h1 {
    font-family: var(--mx-display);
    font-stretch: 125%;
    font-weight: 800;
    font-size: clamp(2.3rem, 6.4vw, 5.2rem); /* 2.3rem floor: longest line fits a 360px phone */
    line-height: 0.98;
    letter-spacing: -0.018em;
    text-transform: uppercase;
    color: var(--mx-ink);
    margin: 0;
}
.mx-h1 em { font-style: normal; color: var(--mx-blue); }

.mx-h2 {
    font-family: var(--mx-display);
    font-stretch: 125%;
    font-weight: 700;
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--mx-ink);
    margin: 0;
}
.mx-h2 em { font-style: normal; color: var(--mx-blue); }

.mx-h3 {
    font-family: var(--mx-sans);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--mx-ink);
    margin: 0;
}

.mx-lead {
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.65;
    color: var(--mx-ink-2);
    max-width: 640px;
    margin: 18px auto 0;
}
.mx-lead strong { color: var(--mx-ink); font-weight: 600; }

.mx-eyebrow {
    font-family: var(--mx-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mx-mute);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.mx-eyebrow::before {
    content: '';
    width: 1px;
    height: 12px;
    background: var(--mx-blue);
}
.mx-eyebrow--bare::before { display: none; }

.mx-micro {
    font-family: var(--mx-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mx-mute);
    line-height: 1.8;
}
.mx-micro strong, .mx-micro b { color: var(--mx-ink); font-weight: 600; }

.mx-sec-head { max-width: 720px; margin: 0 auto 52px; }
.mx-sec-head--center { text-align: center; }
.mx-sec-head .mx-h2 { margin-top: 16px; }

/* ═══════════════ AXIS RULE (section divider as a chart axis) ═══════════════ */
.mx-axis {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
    height: 1px;
}
.mx-axis::before {
    content: '';
    position: absolute;
    left: 24px; right: 24px; top: 0;
    height: 1px;
    background: var(--mx-line);
}
.mx-axis::after {
    /* tick marks every 80px, hanging below the rule like an x-axis */
    content: '';
    position: absolute;
    left: 24px; right: 24px; top: 0;
    height: 7px;
    background: repeating-linear-gradient(
        90deg,
        var(--mx-line-2) 0, var(--mx-line-2) 1px,
        transparent 1px, transparent 80px
    );
}
.mx-axis span {
    position: absolute;
    top: -8px;
    left: 48px;
    z-index: 1; /* paint above ::after tick ruler so the label bg masks the ticks */
    background: var(--mx-paper);
    padding: 0 14px;
    font-family: var(--mx-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mx-mute);
    line-height: 16px;
}

/* ═══════════════ BUTTONS + LINKS ═══════════════ */
.mx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 9px;
    font-family: var(--mx-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}
.mx-btn--primary {
    background: var(--mx-blue);
    color: #fff;
    box-shadow: 0 1px 2px rgba(11,21,36,0.2), 0 12px 28px -14px rgba(11,21,36,0.55);
}
.mx-btn--primary:hover {
    background: #6C97FF;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(76,125,247,0.25), 0 14px 32px -14px rgba(76,125,247,0.6);
}
.mx-btn--ghost {
    background: var(--mx-panel);
    border-color: var(--mx-line-2);
    color: var(--mx-ink);
}
.mx-btn--ghost:hover { border-color: var(--mx-ink); color: var(--mx-ink); }
.mx-btn--sm { padding: 10px 18px; font-size: 13.5px; }

.mx-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mx-blue);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, gap 0.15s ease;
    padding-bottom: 1px;
}
.mx-link:hover { border-bottom-color: var(--mx-blue); gap: 10px; }

/* Google OAuth */
.mx-or {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 220px;
    margin: 18px auto 14px;
}
.mx-or::before, .mx-or::after { content: ''; flex: 1; height: 1px; background: var(--mx-line); }
.mx-or span {
    font-family: var(--mx-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mx-mute);
}
.mx-google-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 9px;
    background: var(--mx-panel);
    border: 1px solid var(--mx-line-2);
    color: var(--mx-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.mx-google-btn:hover { border-color: var(--mx-ink); box-shadow: var(--mx-shadow-card); color: var(--mx-ink); }
.mx-google-btn .g { width: 17px; height: 17px; }

/* ═══════════════ HERO ═══════════════ */
.mx-hero {
    position: relative;
    padding: 96px 24px 72px;
    max-width: 1160px;
    margin: 0 auto;
}
/* faint strike grid — vertical hairlines like chart gridlines */
.mx-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
    background-size: 96px 100%;
    mask-image: radial-gradient(ellipse 85% 70% at 50% 20%, black 25%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 20%, black 25%, transparent 75%);
}
/* Centered hero composition — on wide screens a left column reads lopsided. */
.mx-hero-inner { position: relative; max-width: 880px; margin: 0 auto; text-align: center; }
.mx-hero-inner .mx-hero-sub { margin-left: auto; margin-right: auto; }
.mx-hero-inner .mx-hero-ctas { justify-content: center; }
.mx-hero-inner .mx-smile { margin-left: auto; margin-right: auto; }
.mx-hero-inner .mx-hero-oauth .mx-or { margin-left: auto; margin-right: auto; }

.mx-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px;
    border: 1px solid var(--mx-line-2);
    border-radius: 999px;
    background: var(--mx-panel);
    font-family: var(--mx-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mx-ink-2);
    text-decoration: none;
    margin-bottom: 34px;
    transition: border-color 0.18s ease;
}
.mx-hero-pill:hover { border-color: var(--mx-ink); color: var(--mx-ink); }
.mx-hero-pill .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--mx-up);
    animation: mx-pulse 2.2s ease infinite;
}

.mx-hero-sub {
    font-size: clamp(16px, 1.6vw, 18.5px);
    line-height: 1.65;
    color: var(--mx-ink-2);
    max-width: 600px;
    margin: 30px 0 0;
}
.mx-hero-sub strong { color: var(--mx-ink); font-weight: 600; }

.mx-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
    align-items: center;
}
.mx-hero-oauth { margin-top: 4px; }
.mx-hero-oauth .mx-or { margin-left: 0; }

/* The signature: a volatility smile drawn on an axis under the headline. */
.mx-smile {
    display: block;
    width: min(620px, 100%);
    height: auto;
    margin: 26px 0 0;
    overflow: visible;
}
.mx-smile .axis { stroke: var(--mx-line-2); stroke-width: 1; }
.mx-smile .tick { stroke: var(--mx-line-2); stroke-width: 1; }
.mx-smile .lbl {
    font-family: var(--mx-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    fill: var(--mx-mute);
}
.mx-smile .ann {
    font-family: var(--mx-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    fill: var(--mx-blue);
}
.mx-smile .curve {
    stroke: var(--mx-ink);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}
.mx-smile .marker { fill: var(--mx-blue); }
.mx-smile .marker-ring {
    fill: none;
    stroke: var(--mx-blue);
    stroke-width: 1.5;
    opacity: 0.5;
    transform-origin: center;
    transform-box: fill-box;
    animation: mx-ring 2.4s ease-out infinite;
}

/* Exhibit 01 — the terminal video, full-bleed below the hero copy */
.mx-hero-exhibit { position: relative; margin-top: 72px; }

/* ═══════════════ EXHIBIT FRAME ═══════════════ */
.mx-exhibit {
    background: var(--mx-panel);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    overflow: hidden;
    box-shadow: var(--mx-shadow-exhibit);
}
.mx-exhibit-cap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    background: var(--mx-panel-2);
    border-bottom: 1px solid var(--mx-line);
    font-family: var(--mx-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mx-mute);
}
.mx-exhibit-cap .no { color: var(--mx-blue); font-weight: 600; }
.mx-exhibit-cap b { color: var(--mx-ink); font-weight: 600; }
.mx-exhibit-cap .end { margin-left: auto; }
@media (max-width: 640px) { .mx-exhibit-cap .end { display: none; } }

/* Re-skin of the shared _terminal_video.html partial (mk-* classes) inside .mx */
.mx .mk-shot { background: var(--mx-panel); border-radius: 0; }
.mx .mk-shot-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--mx-panel-2);
    border-bottom: 1px solid var(--mx-line);
    font-family: var(--mx-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mx-mute);
}
.mx .mk-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--mx-line-2); }
.mx .mk-shot-bar > span { margin-left: 10px; }
.mx .mk-shot-img img { display: block; width: 100%; height: auto; }
.mx .mk-vid { position: relative; cursor: pointer; }
.mx .mk-vid:focus-visible { outline: 2px solid var(--mx-blue); outline-offset: 2px; }
.mx .mk-vid video { display: block; width: 100%; height: auto; background: #0B1524; }
.mx .mk-vid-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--mx-up); font-weight: 600; }
.mx .mk-vid-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--mx-up); animation: mx-pulse 2.2s ease infinite; }
.mx .mk-vid-play {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(11,18,30,0.88);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px -8px rgba(11,21,36,0.5);
    pointer-events: none;
}
.mx .mk-vid.is-paused .mk-vid-play { display: flex; }
.mx .mk-vid-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 20px;
    padding: 10px 16px;
    background: var(--mx-panel-2);
    border-top: 1px solid var(--mx-line);
    font-family: var(--mx-mono);
    font-size: 9.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mx-mute);
}
.mx .mk-vid-foot b { color: var(--mx-ink); font-weight: 600; }

/* ═══════════════ CAPABILITY TAPE ═══════════════ */
.mx-tape {
    position: relative;
    border-top: 1px solid var(--mx-line);
    border-bottom: 1px solid var(--mx-line);
    padding: 15px 0;
    overflow: hidden;
    background: var(--mx-panel);
}
.mx-tape-track {
    display: flex;
    width: max-content;
    animation: mx-tape 52s linear infinite;
}
.mx-tape:hover .mx-tape-track { animation-play-state: paused; }
.mx-tape-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.mx-tape-item b {
    display: inline-flex;
    align-items: center;
    font-family: var(--mx-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mx-ink);
    white-space: nowrap;
}
.mx-tape-item b::after {
    content: '';
    width: 5px; height: 5px;
    background: var(--mx-blue);
    margin: 0 27px;
    opacity: 0.45;
    flex-shrink: 0;
}

/* ═══════════════ CARDS ═══════════════ */
.mx-card {
    position: relative;
    background: var(--mx-panel);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    padding: 26px;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.mx-card::before {
    content: '';
    position: absolute;
    top: -1px; left: 24px;
    width: 36px; height: 2px;
    background: var(--mx-blue);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.mx-card:hover {
    transform: translateY(-2px);
    border-color: var(--mx-line-2);
    box-shadow: var(--mx-shadow-card);
}
.mx-card:hover::before { opacity: 1; }
.mx-card p { font-size: 14px; line-height: 1.62; color: var(--mx-ink-2); margin: 8px 0 0; }
.mx-card .ic {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--mx-blue-soft);
    color: var(--mx-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.mx-card h3 { font-size: 16px; font-weight: 700; color: var(--mx-ink); letter-spacing: -0.01em; margin: 0; }

/* Module map (6 capability groups) */
.mx-modmap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    position: relative;
}
.mx-modgroup .gname {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mx-ink);
    margin: 0;
}
.mx-modgroup .gname svg { color: var(--mx-blue); flex-shrink: 0; }
.mx-modgroup .gsub { font-size: 13px; color: var(--mx-mute); margin: 7px 0 14px; line-height: 1.5; }
.mx-modchips { display: flex; flex-wrap: wrap; gap: 7px; }
.mx-modchip {
    font-family: var(--mx-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 4px 9px;
    border: 1px solid var(--mx-line);
    border-radius: 6px;
    color: var(--mx-ink-2);
    background: var(--mx-panel-2);
    white-space: nowrap;
}
.mx-modchip--hot {
    background: var(--mx-ink);
    border-color: var(--mx-ink);
    color: #0B1220;
    font-weight: 600;
}

/* Deck (arrange-it-your-way, 4-up) */
.mx-deck {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* 3-col (personas, quotes) */
.mx-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.mx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mx-chip {
    font-family: var(--mx-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 6px 12px;
    border: 1px solid var(--mx-line-2);
    border-radius: 6px;
    color: var(--mx-ink);
    background: var(--mx-panel);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mx-chip:hover { border-color: var(--mx-blue); color: var(--mx-blue); background: var(--mx-blue-soft); }

/* ═══════════════ STATS (data callouts on an axis) ═══════════════ */
.mx-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--mx-ink);
    position: relative;
}
.mx-stats::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        var(--mx-ink) 0, var(--mx-ink) 1px,
        transparent 1px, transparent 25%
    );
}
.mx-stat { padding: 26px 18px 6px 0; }
.mx-stat-n {
    font-family: var(--mx-display);
    font-stretch: 125%;
    font-weight: 800;
    font-size: clamp(2.1rem, 4vw, 3.3rem);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--mx-ink);
    font-variant-numeric: tabular-nums;
}
.mx-stat-n .accent { color: var(--mx-blue); }
.mx-stat-l {
    font-family: var(--mx-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mx-mute);
    margin-top: 10px;
}

/* ═══════════════ BROKER vs APEXVOL (ledger rows) ═══════════════ */
.mx-vs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.mx-vs-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--mx-blue);
}
.mx-vs-head .mx-h3 { color: var(--mx-ink); }
.mx-vs-row {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px dashed var(--mx-line);
    align-items: baseline;
}
.mx-vs-row p { margin: 0; font-size: 14px; line-height: 1.55; }
.mx-vs-tag {
    font-family: var(--mx-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.mx-vs-row--them .mx-vs-tag { color: var(--mx-mute); }
.mx-vs-row--them p { color: var(--mx-mute); }
.mx-vs-row--us .mx-vs-tag { color: var(--mx-blue); }
.mx-vs-row--us p { color: var(--mx-ink); font-weight: 500; }

/* ═══════════════ SPOTLIGHTS (exhibits 02–07) ═══════════════ */
.mx-spot {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 54px 0;
}
.mx-spot--rev .mx-spot-vis { order: 2; }
.mx-spot--rev .mx-spot-copy { order: 1; }
.mx-spot-vis a { display: block; text-decoration: none; }
.mx-spot-vis .mx-exhibit { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.mx-spot-vis a:hover .mx-exhibit {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(11,21,36,0.06), 0 40px 72px -32px rgba(11,21,36,0.45);
}
.mx-spot-copy .mx-index {
    font-family: var(--mx-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mx-blue);
    display: block;
    margin-bottom: 14px;
}
.mx-spot-copy h3 {
    font-family: var(--mx-display);
    font-stretch: 118%;
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    letter-spacing: -0.015em;
    line-height: 1.12;
    color: var(--mx-ink);
    margin: 0 0 14px;
}
.mx-spot-copy p { font-size: 15px; line-height: 1.68; color: var(--mx-ink-2); margin: 0 0 20px; }
.mx-badge {
    display: inline-block;
    font-family: var(--mx-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--mx-blue);
    color: #fff;
    margin-left: 10px;
    vertical-align: 2px;
}

/* ═══════════════ STEPS (true sequence — keeps its numbers) ═══════════════ */
.mx-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    counter-reset: none;
}
.mx-step { padding: 22px 24px 24px; }
.mx-step .num {
    font-family: var(--mx-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--mx-blue);
    display: block;
    margin-bottom: 12px;
}
.mx-step h3 { font-size: 15.5px; }
.mx-step p { font-size: 13.5px; }

/* ═══════════════ QUOTES (desk notes) ═══════════════ */
.mx-quote blockquote {
    margin: 0;
    font-size: 15px;
    line-height: 1.68;
    color: var(--mx-ink);
    font-weight: 500;
    letter-spacing: -0.005em;
}
.mx-quote blockquote::before { content: '“'; color: var(--mx-blue); font-weight: 700; }
.mx-quote blockquote::after { content: '”'; color: var(--mx-blue); font-weight: 700; }
.mx-quote cite {
    display: block;
    margin-top: 18px;
    font-style: normal;
    font-family: var(--mx-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mx-ink-2);
}
.mx-quote cite span {
    display: block;
    margin-top: 4px;
    font-weight: 500;
    color: var(--mx-mute);
    text-transform: none;
    letter-spacing: 0.06em;
}

/* Credibility band partial (cred-*) re-skinned for paper */
.mx .cred-founder, .mx .cred-data {
    background: var(--mx-panel);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
}
.mx .cred-founder-text { color: var(--mx-ink-2); }
.mx .cred-founder-text strong { color: var(--mx-ink); font-weight: 500; }
.mx .cred-founder-avatar {
    background: var(--mx-ink);
    color: #fff;
}
.mx .cred-founder-name { color: var(--mx-mute); }
.mx .cred-founder-name .role { color: var(--mx-blue); }
.mx .cred-data-mark {
    background: var(--mx-blue-soft);
    border: 1px solid rgba(76,125,247,0.25);
    color: var(--mx-blue);
}
.mx .cred-data-text { color: var(--mx-ink-2); }
.mx .cred-data-text strong { color: var(--mx-ink); }
.mx .cred-data-link { color: var(--mx-blue); border-bottom-color: rgba(76,125,247,0.4); }
.mx .cred-data-link:hover { color: var(--mx-blue); border-bottom-color: var(--mx-blue); }

/* ═══════════════ FEE SCHEDULE (pricing teaser) ═══════════════ */
.mx-fees { border-top: 1px solid var(--mx-ink); }
.mx-fee {
    display: grid;
    grid-template-columns: 150px 1fr auto auto;
    gap: 20px;
    align-items: center;
    padding: 22px 10px;
    border-bottom: 1px solid var(--mx-line);
    text-decoration: none;
    transition: background 0.15s ease;
}
.mx-fee:hover { background: var(--mx-panel); }
.mx-fee-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mx-ink);
}
.mx-fee-name i { width: 8px; height: 8px; flex-shrink: 0; }
.mx-fee-tools {
    font-family: var(--mx-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mx-mute);
}
.mx-fee-amt {
    font-family: var(--mx-display);
    font-stretch: 125%;
    font-weight: 700;
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    color: var(--mx-ink);
    font-variant-numeric: tabular-nums;
}
.mx-fee-amt .per {
    font-family: var(--mx-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--mx-mute);
    margin-left: 4px;
}
.mx-fee-arrow { color: var(--mx-mute); transition: color 0.15s ease, transform 0.15s ease; }
.mx-fee:hover .mx-fee-arrow { color: var(--mx-blue); transform: translateX(3px); }

/* ═══════════════ FAQ ═══════════════ */
.mx-faq { border-bottom: 1px solid var(--mx-line); }
.mx-faq:first-of-type { border-top: 1px solid var(--mx-line); }
.mx-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--mx-sans);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mx-ink);
}
.mx-faq-q .ic { flex-shrink: 0; color: var(--mx-mute); transition: transform 0.2s ease, color 0.2s ease; }
.mx-faq.open .mx-faq-q .ic { transform: rotate(45deg); color: var(--mx-blue); }
.mx-faq-a {
    display: none;
    padding: 0 4px 22px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--mx-ink-2);
    max-width: 760px;
}
.mx-faq.open .mx-faq-a { display: block; }
.mx-faq-a strong { color: var(--mx-ink); font-weight: 600; }
.mx-faq-a a { color: var(--mx-blue); text-decoration: underline; text-underline-offset: 2px; }

/* ═══════════════ STICKY DESKTOP CTA ═══════════════ */
.mx-sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 55;
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
}
.mx-sticky-cta.is-on { transform: translateY(0); pointer-events: auto; }
.mx-sticky-inner {
    max-width: 1160px;
    margin: 0 auto 18px;
    padding: 12px 14px 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: rgba(13, 20, 34, 0.97); /* solid-ish; no backdrop-filter (see nav note) */
    border: 1px solid var(--mx-line);
    border-radius: 14px;
    box-shadow: 0 24px 56px -24px rgba(11,21,36,0.4);
}
.mx-sticky-text { font-size: 14.5px; color: var(--mx-ink-2); letter-spacing: -0.01em; }
.mx-sticky-text strong { color: var(--mx-ink); font-weight: 700; }
.mx-sticky-actions { display: flex; align-items: center; gap: 10px; }
.mx-sticky-actions .mx-google-btn { padding: 9px 14px; font-size: 13px; }
.mx-sticky-actions .mx-google-btn .mx-g-label { display: none; }
@media (min-width: 1080px) { .mx-sticky-actions .mx-google-btn .mx-g-label { display: inline; } }
@media (max-width: 767px) { .mx-sticky-cta { display: none; } } /* mobile uses base_marketing's bar */

/* ═══════════════ FINAL CTA (ink block, bridges into the dark footer) ═══════════════ */
.mx-final {
    position: relative;
    background: #070D18;
    padding: 118px 24px 128px;
    text-align: center;
    overflow: hidden;
}
.mx-final .mx-h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.mx-final .mx-h2 em { color: #7C9AF0; }
.mx-final .sub {
    color: rgba(214, 224, 238, 0.75);
    font-size: 16.5px;
    line-height: 1.65;
    max-width: 560px;
    margin: 20px auto 34px;
}
.mx-final .mx-btn--primary {
    background: #fff;
    color: #0B1220;
    box-shadow: 0 18px 44px -18px rgba(0,0,0,0.6);
}
.mx-final .mx-btn--primary:hover { background: var(--mx-blue); color: #fff; }
.mx-final .mx-micro { color: rgba(214, 224, 238, 0.5); }
/* signature echo — the smile again, as a faint watermark across the block */
.mx-final .mx-final-smile {
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    width: min(1080px, 120%);
    height: auto;
    opacity: 0.1;
    pointer-events: none;
}
.mx-final .mx-final-smile .curve { stroke: #7C9AF0; stroke-width: 2; fill: none; }
.mx-final .mx-final-smile .axis, .mx-final .mx-final-smile .tick { stroke: rgba(214,224,238,0.4); }
.mx-final-inner { position: relative; }

/* Tier accent badges (features catalog) — Basic blue / Premium violet / Pro ink */
.mx-badge--basic { background: var(--mx-blue); }
.mx-badge--premium { background: #A78BFA; }
.mx-badge--pro { background: var(--mx-ink); color: #0B1220; }
.mx-badge--free { background: var(--mx-mute); }

/* In-flow axis rule (inside an .mx-wrap, between subsections) */
.mx-axis--in { max-width: none; padding: 0; margin: 64px 0 56px; }
.mx-axis--in::before, .mx-axis--in::after { left: 0; right: 0; }
.mx-axis--in span { left: 20px; }

/* Tier-nav cards (features page jump cards) */
.mx-tprice {
    font-family: var(--mx-display);
    font-stretch: 125%;
    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: -0.02em;
    color: var(--mx-ink);
    font-variant-numeric: tabular-nums;
    margin: 10px 0 8px;
}
.mx-tprice .per {
    font-family: var(--mx-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--mx-mute);
    margin-left: 4px;
}
a.mx-card { display: block; text-decoration: none; }

/* ═══════════════ PRICING PAGE ═══════════════ */
/* _pricing_plans.html is shared with the logged-in app (base.html includes it),
   so the partial itself stays dark-native; these .mx-scoped overrides re-skin
   it to the paper system only on v4 marketing pages. Selector map lives in
   static/css/components/pricing.css + the partial's inline <style> blocks. */
.mx .pricing-main-title {
    font-family: var(--mx-display);
    font-stretch: 125%;
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    letter-spacing: -0.018em;
    line-height: 1.02;
    color: var(--mx-ink);
}
.mx .pricing-main-title .accent {
    color: var(--mx-blue);
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: currentColor;
}
.mx .pricing-subtitle { color: var(--mx-ink-2); }
.mx .pricing-hero-trust span { color: var(--mx-ink-2) !important; font-weight: 500 !important; }
.mx .pricing-hero-trust svg { color: var(--mx-up); }

.mx .billing-toggle-wrapper { background: var(--mx-panel); border: 1px solid var(--mx-line-2); }
.mx .billing-toggle { color: var(--mx-ink-2); background: transparent; }
.mx .billing-toggle:hover { color: var(--mx-ink); }
.mx .billing-toggle.active { background: var(--mx-ink); color: #0B1220; }
.mx .save-badge { background: var(--mx-blue); color: #fff; }

.mx .pricing-card {
    background: var(--mx-panel);
    border: 1px solid var(--mx-line);
    box-shadow: var(--mx-shadow-card);
}
.mx .pricing-card:hover { border-color: var(--mx-line-2); }
.mx .pricing-card::before { height: 2px; background: var(--mx-line-2); opacity: 1; }
.mx .pricing-card-free::before { background: var(--mx-line-2); }
.mx .pricing-card-basic::before { background: var(--mx-blue); }
.mx .pricing-card-premium::before { background: #A78BFA; }
.mx .pricing-card-pro::before { background: var(--mx-ink); }
.mx .pricing-card-basic:hover { border-color: rgba(37,99,235,0.45); }
.mx .pricing-card-premium {
    background: var(--mx-panel);
    border-color: rgba(167,139,250,0.45);
    box-shadow: var(--mx-shadow-exhibit);
}
.mx .pricing-card-premium:hover { border-color: rgba(167,139,250,0.7); }
.mx .pricing-card-pro:hover { border-color: var(--mx-line-2); }
.mx .tier-badge-popular { background: var(--mx-ink); color: #0B1220; box-shadow: 0 8px 20px -10px rgba(11,21,36,0.5); }
.mx .card-tier-name-free { color: var(--mx-mute); }
.mx .card-tier-name-basic { color: var(--mx-blue); }
.mx .card-tier-name-premium { color: #A78BFA; }
.mx .card-tier-name-pro { color: var(--mx-ink); }
.mx .card-tier-description { color: var(--mx-ink-2); }
.mx .card-best-for { color: var(--mx-mute); }
.mx .card-price { color: var(--mx-ink); font-family: var(--mx-display); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.mx .card-price-period { color: var(--mx-mute); }
.mx .card-price-savings { color: var(--mx-up); }
.mx .card-feature-text { color: var(--mx-ink-2); }
.mx .card-feature-icon-check { color: var(--mx-up); }
.mx .card-feature-icon-limited { color: #F59E0B; }
.mx .card-feature-category { color: var(--mx-mute); }
.mx .card-cta { border-radius: 9px; }
.mx .card-cta-basic, .mx .card-cta-premium, .mx .card-cta-pro {
    background: var(--mx-blue) !important;
    color: #fff !important;
    border: none;
    box-shadow: 0 12px 28px -14px rgba(11,21,36,0.55);
}
.mx .card-cta-basic:hover, .mx .card-cta-premium:hover, .mx .card-cta-pro:hover {
    background: #6C97FF !important;
    box-shadow: 0 14px 32px -14px rgba(76,125,247,0.6);
}
.mx .card-cta-free { background: var(--mx-panel) !important; border: 1px solid var(--mx-line-2) !important; color: var(--mx-ink) !important; }
.mx .card-cta-free:hover { border-color: var(--mx-ink) !important; }
.mx .card-cta-current { background: var(--mx-panel-2) !important; border: 1px solid var(--mx-line) !important; color: var(--mx-mute) !important; box-shadow: none; }
.mx .card-cta-microcopy { color: var(--mx-mute); }
.mx .card-cta-microcopy .em { color: var(--mx-up); }
.mx .card-cta-microcopy .dot { color: var(--mx-line-2); }
.mx .card-trial-note { color: var(--mx-mute); }

.mx .demo-strip { background: var(--mx-panel); border: 1px solid var(--mx-line); }
.mx .demo-strip .text { color: var(--mx-ink-2); }
.mx .demo-strip .text strong { color: var(--mx-ink); }
.mx .demo-strip a { color: var(--mx-blue); border-bottom-color: rgba(76,125,247,0.4); }
.mx .demo-strip a:hover { color: var(--mx-blue); border-bottom-color: var(--mx-blue); }
.mx .comparison-cue .label { background: var(--mx-panel); border-color: var(--mx-line-2); color: var(--mx-ink-2); }
.mx .comparison-cue .label:hover { color: var(--mx-ink); border-color: var(--mx-ink); }
.mx .comparison-cue .label svg { color: var(--mx-blue); }
.mx .moneyback-banner { background: var(--mx-panel); border-color: rgba(52,211,153,0.35); }
.mx .moneyback-icon { background: rgba(52,211,153,0.1); }
.mx .moneyback-icon svg { color: var(--mx-up); }
.mx .moneyback-text { color: var(--mx-ink-2); }
.mx .moneyback-text strong { color: var(--mx-ink); }
.mx .all-tiers-title { color: var(--mx-ink); }
.mx .all-tiers-item { background: var(--mx-panel); border: 1px solid var(--mx-line); color: var(--mx-ink-2); }
.mx .all-tiers-item svg { color: var(--mx-up); }
.mx .pricing-trust-section { border-color: var(--mx-line); }
.mx .trust-item { color: var(--mx-mute); }
.mx .trust-item svg { color: var(--mx-blue); }

.mx .comparison-title {
    font-family: var(--mx-display);
    font-stretch: 125%;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--mx-ink);
}
.mx .comparison-table-wrapper {
    background: var(--mx-panel);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    box-shadow: var(--mx-shadow-card);
}
.mx .comparison-table thead, .mx .comparison-table th { background: var(--mx-panel-2); }
.mx .comparison-table th {
    color: var(--mx-mute);
    font-family: var(--mx-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--mx-line);
}
.mx .comparison-table td { border-color: var(--mx-line); color: var(--mx-ink-2); }
.mx .comparison-table tbody tr:hover td { background: var(--mx-panel-2); }
.mx .comparison-table .comparison-category-header td,
.mx .comparison-category-header td {
    background: var(--mx-paper) !important;
    color: var(--mx-ink);
    font-family: var(--mx-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.mx .comparison-feature-name { color: var(--mx-ink); }
.mx .comparison-feature-desc { color: var(--mx-mute); }
.mx .comparison-check { color: var(--mx-up); }
.mx .comparison-x { color: var(--mx-line-2); }
.mx .comparison-limited { background: rgba(245,158,11,0.08); color: #F59E0B; }
/* leftover inline mint accents in the shared partial → data-green */
.mx .pricing-section [style*="#34d399"] { color: var(--mx-up) !important; }

/* Terminal banner (copy + video exhibit, two-col) */
.mx-termbanner {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 56px;
    align-items: center;
}
.mx-termbanner .flag {
    display: inline-block;
    font-family: var(--mx-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    background: var(--mx-blue);
    padding: 4px 10px;
    border-radius: 5px;
    margin-bottom: 16px;
}
.mx-termbanner .lead { font-size: 15.5px; line-height: 1.7; color: var(--mx-ink-2); margin: 14px 0 24px; }
.mx-termbanner .lead strong { color: var(--mx-ink); font-weight: 600; }

/* Generic light ledger table (competitor comparison) */
.mx-table-wrap { overflow-x: auto; }
.mx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mx-table th {
    font-family: var(--mx-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mx-mute);
    text-align: center;
    vertical-align: bottom;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mx-ink);
}
.mx-table th .sub { display: block; font-weight: 500; font-size: 10px; margin-top: 4px; color: var(--mx-mute); text-transform: none; letter-spacing: 0.08em; }
.mx-table th.us { color: var(--mx-blue); }
.mx-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--mx-line);
    color: var(--mx-ink-2);
    text-align: center;
}
.mx-table th:first-child, .mx-table td:first-child { text-align: left; }
.mx-table td:first-child { color: var(--mx-ink); font-weight: 500; }
.mx-table th:nth-child(2), .mx-table td:nth-child(2) { background: rgba(76,125,247,0.045); }
.mx-table td.yes { color: var(--mx-up); font-weight: 700; }
.mx-table td.no { color: var(--mx-line-2); }
.mx-table tbody tr:last-child td { border-bottom: none; }

/* Checklist (worked-example tiers) */
.mx-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mx-checklist li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--mx-ink-2); }
.mx-checklist svg { color: var(--mx-up); flex-shrink: 0; margin-top: 3px; }

.mx-persona-quote {
    font-style: italic;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mx-ink-2);
    border-left: 2px solid var(--mx-line-2);
    padding-left: 12px;
    margin: 0 0 16px;
}
.mx-reco {
    display: block;
    margin-top: 14px;
    font-family: var(--mx-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mx-blue);
}

@media (max-width: 900px) {
    .mx-termbanner { grid-template-columns: 1fr; gap: 28px; }
}

/* ═══════════════ AUTH PAGES (register + register_plan) ═══════════════ */
/* Layout mechanics (register-*, feature-*, stats-bar, strength-bar) live in
   input.css/main.css and are loaded everywhere; v4 only re-skins. The left
   brand panel deliberately stays ink — the product side of the split. */
.mx .register-container { background: var(--mx-paper); }
.mx .register-brand-panel { position: relative; overflow: hidden; background: #070D18; }
.mx .register-brand-panel::before { display: none; }
.mx .register-brand-panel h1 { font-family: var(--mx-display); font-stretch: 118%; letter-spacing: -0.02em; }
.mx .register-brand-panel .it { font-style: normal; color: #7C9AF0; }
.mx .register-brand-panel .text-gray-400 { color: rgba(214,224,238,0.72); }
.mx .register-brand-panel .bg-gradient-to-br { background: var(--mx-blue); }
.mx .feature-item { border-color: rgba(255,255,255,0.08); }
.mx .feature-icon { background: rgba(124,154,240,0.14); border-color: transparent; }
.mx .feature-icon svg { color: #7C9AF0; }
.mx .feature-title { color: #fff; }
.mx .feature-desc { color: rgba(214,224,238,0.6); }
.mx .stats-bar { border-color: rgba(255,255,255,0.12); }
.mx .stat-value { color: #fff; font-family: var(--mx-display); font-stretch: 125%; font-weight: 700; }
.mx .stat-label { color: rgba(214,224,238,0.55); }

.mx-smilemark {
    position: absolute;
    left: 50%; bottom: -10px;
    transform: translateX(-50%);
    width: 130%;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}
.mx-smilemark .curve { stroke: #7C9AF0; stroke-width: 2; fill: none; }
.mx-smilemark .axis { stroke: rgba(214,224,238,0.4); }

.mx .register-form-panel { background: var(--mx-paper); }
.mx .register-card {
    background: var(--mx-panel);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    box-shadow: var(--mx-shadow-exhibit);
}
.mx .register-title { color: var(--mx-ink); letter-spacing: -0.02em; }
.mx .register-subtitle { color: var(--mx-mute); }
.mx .register-logo span { color: var(--mx-ink); }
.mx .register-logo svg { color: var(--mx-blue); }
.mx .register-card .text-gray-300 { color: var(--mx-ink-2); }
.mx .register-card .text-gray-400 { color: var(--mx-ink-2); }
.mx .register-card .text-gray-500 { color: var(--mx-mute); }
.mx .register-card .text-red-400 { color: var(--mx-down); }
.mx .register-card .bg-gray-700 { background: var(--mx-line); }
.mx .register-card [class*="border-gray-700"] { border-color: var(--mx-line); }
.mx .register-input { background: var(--mx-panel-2); border-color: var(--mx-line-2); color: var(--mx-ink); }
.mx .register-input::placeholder { color: var(--mx-mute); }
.mx .register-input:focus { border-color: var(--mx-blue); box-shadow: 0 0 0 3px rgba(76,125,247,0.12); }
.mx .register-checkbox { accent-color: var(--mx-blue); }
.mx .register-btn-primary {
    background: var(--mx-blue);
    color: #fff;
    box-shadow: 0 12px 28px -14px rgba(11,21,36,0.55);
}
.mx .register-btn-primary:hover { background: #6C97FF; }
.mx #google-signup-link { border: 1px solid var(--mx-line-2); }
.mx .strength-bar { background: var(--mx-line); }
.mx .text-emerald-400 { color: var(--mx-blue); }
.mx .text-emerald-400:hover { color: var(--mx-blue); text-decoration: underline; text-underline-offset: 2px; }

.mx .mk-steplabel {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mx-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mx-mute);
    margin-bottom: 22px;
}
.mx .mk-steplabel .st { display: inline-flex; align-items: center; gap: 8px; color: var(--mx-mute); }
.mx .mk-steplabel .st.active { color: var(--mx-ink); font-weight: 600; }
.mx .mk-steplabel .st.done { color: var(--mx-up); }
.mx .mk-steplabel .n {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid var(--mx-line-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}
.mx .mk-steplabel .st.active .n { background: var(--mx-blue); border-color: var(--mx-blue); color: #fff; }
.mx .mk-steplabel .st.done .n { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.4); color: var(--mx-up); }
.mx .mk-steplabel .sep { flex: 0 0 26px; height: 1px; background: var(--mx-line-2); }

.mx .mk-nocard {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 7px;
    background: rgba(52,211,153,0.07);
    border: 1px solid rgba(52,211,153,0.25);
    color: var(--mx-up);
    font-family: var(--mx-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.mx .mk-founder {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--mx-panel);
    border: 1px solid var(--mx-line);
}
.mx .mk-founder strong { color: var(--mx-ink); }
.mx .mk-founder p { color: var(--mx-ink-2); font-size: 13.5px; line-height: 1.6; margin: 2px 0 0; }
.mx .mk-founder .avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--mx-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mx-mono);
    font-weight: 600;
    font-size: 12px;
}
/* founder card variant on the ink brand panel */
.mx .register-brand-panel .mk-founder { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.mx .register-brand-panel .mk-founder strong { color: #fff; }
.mx .register-brand-panel .mk-founder p { color: rgba(214,224,238,0.65); font-size: 13px; }

.mx .mk-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    justify-content: center;
    font-family: var(--mx-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mx-mute);
}
.mx .mk-trust span { display: inline-flex; align-items: center; gap: 7px; }
.mx .mk-trust svg { color: var(--mx-up); flex-shrink: 0; }
.mx .register-card .mk-trust { justify-content: flex-start; }

/* Plan chooser (register_plan) */
.mx .mk-billing { display: flex; justify-content: center; margin: 18px 0 4px; }
.mx .mk-billing-wrap {
    display: inline-flex;
    background: var(--mx-panel);
    border: 1px solid var(--mx-line-2);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}
.mx .mk-billing-wrap button {
    border: 0;
    background: transparent;
    color: var(--mx-ink-2);
    font-family: var(--mx-sans);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
}
.mx .mk-billing-wrap button.on { background: var(--mx-ink); color: #0B1220; }
.mx .mk-billing-wrap .save { font-family: var(--mx-mono); font-size: 9.5px; margin-left: 5px; opacity: 0.8; }

.mx .mk-plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mx .mk-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--mx-panel);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    padding: 26px 22px 22px;
    box-shadow: var(--mx-shadow-card);
}
.mx .mk-plan--featured { border-color: rgba(167,139,250,0.5); box-shadow: var(--mx-shadow-exhibit); }
.mx .mk-plan-flag {
    position: absolute;
    top: -11px; left: 50%;
    transform: translateX(-50%);
    background: var(--mx-ink);
    color: #0B1220;
    font-family: var(--mx-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.mx .mk-plan-name { font-weight: 700; font-size: 17px; color: var(--mx-ink); letter-spacing: -0.01em; }
.mx .mk-plan-scope { font-family: var(--mx-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mx-mute); margin: 6px 0 14px; }
.mx .mk-plan-price {
    font-family: var(--mx-display);
    font-stretch: 125%;
    font-weight: 800;
    font-size: 2.1rem;
    letter-spacing: -0.02em;
    color: var(--mx-ink);
    font-variant-numeric: tabular-nums;
}
.mx .mk-plan-price .per { font-family: var(--mx-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; color: var(--mx-mute); margin-left: 4px; }
.mx .mk-plan-trial { font-family: var(--mx-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mx-up); margin: 6px 0 16px; }
.mx .mk-plan-feats { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.mx .mk-plan-feats li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--mx-ink-2); }
.mx .mk-plan-feats svg { color: var(--mx-up); flex-shrink: 0; margin-top: 2.5px; }
.mx .mk-plan-feats li.dim { color: var(--mx-mute); font-size: 12.5px; padding-left: 23px; }
.mx .mk-plan-btn {
    width: 100%;
    padding: 13px 16px;
    border-radius: 9px;
    font-family: var(--mx-sans);
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.mx .mk-plan-btn--paid { background: var(--mx-blue); border: 1px solid var(--mx-blue); color: #fff; }
.mx .mk-plan-btn--paid:hover { background: #6C97FF; border-color: #6C97FF; }
.mx .mk-plan-btn--ghost { background: var(--mx-panel); border: 1px solid var(--mx-line-2); color: var(--mx-ink); }
.mx .mk-plan-btn--ghost:hover { border-color: var(--mx-ink); }
.mx .mk-plan-micro { font-family: var(--mx-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mx-mute); text-align: center; margin: 10px 0 0; }
@media (max-width: 1024px) { .mx .mk-plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mx .mk-plan-grid { grid-template-columns: 1fr; } }

/* ═══════════════ .mx-doc — CONTENT-PAGE ADAPTER ═══════════════ */
/* Recolors legacy dark Tailwind-utility content pages (about, contact, faq)
   to the paper system without touching their markup: wrap the page content
   in <div class="mx mx-doc"> and add body_class mx-page. */
.mx-doc h1, .mx-doc h2 { font-family: var(--mx-display); font-stretch: 125%; letter-spacing: -0.015em; }
.mx-doc h1, .mx-doc h2, .mx-doc h3, .mx-doc h4, .mx-doc .text-white { color: var(--mx-ink); }
.mx-doc .text-gray-300, .mx-doc .text-gray-400 { color: var(--mx-ink-2); }
.mx-doc .text-gray-500 { color: var(--mx-mute); }
.mx-doc .text-emerald-400, .mx-doc .text-emerald-300, .mx-doc .text-green-400 { color: var(--mx-up); }
/* …but emerald used as a HEADING accent becomes blue (green = data only) */
.mx-doc h1 [class*="text-emerald"], .mx-doc h2[class*="text-emerald"],
.mx-doc h2 [class*="text-emerald"] { color: var(--mx-blue); }
.mx-doc a.text-emerald-400, .mx-doc nav a { color: var(--mx-blue); }
.mx-doc nav a:hover, .mx-doc a.text-emerald-400:hover { color: var(--mx-blue); text-decoration: underline; text-underline-offset: 2px; }
.mx-doc .text-blue-400, .mx-doc .text-blue-300 { color: var(--mx-blue); }
.mx-doc .text-purple-400 { color: #A78BFA; }
.mx-doc .text-amber-400, .mx-doc .text-yellow-400 { color: #F59E0B; }
.mx-doc .text-red-400 { color: var(--mx-down); }
.mx-doc .card,
.mx-doc .bg-gray-800, .mx-doc .bg-gray-800\/50, .mx-doc .bg-gray-800\/30 {
    background: var(--mx-panel);
    border: 1px solid var(--mx-line);
}
.mx-doc [class*="bg-gradient-to-r"] { background: var(--mx-panel); border: 1px solid var(--mx-line); }
.mx-doc [class*="border-gray-"] { border-color: var(--mx-line); }
.mx-doc a.bg-gray-700, .mx-doc button.bg-gray-700 { background: var(--mx-panel); border: 1px solid var(--mx-line-2); color: var(--mx-ink); }
.mx-doc a.bg-gray-700:hover, .mx-doc button.bg-gray-700:hover { background: var(--mx-panel-2); }
.mx-doc .bg-emerald-600, .mx-doc .bg-emerald-500, .mx-doc .bg-emerald-400 { background: var(--mx-blue); }
.mx-doc a.bg-emerald-600:hover, .mx-doc a.bg-emerald-500:hover { background: #6C97FF; }
.mx-doc .bg-blue-600, .mx-doc .bg-blue-500 { background: var(--mx-blue); }
.mx-doc a.bg-blue-600:hover { background: #6C97FF; }
.mx-doc .bg-purple-500 { background: #A78BFA; }
/* gradient avatars/icon chips (circles) go ink; other gradient surfaces go panel */
.mx-doc .rounded-full[class*="bg-gradient-to-br"] { background: var(--mx-blue); }
.mx-doc [class*="bg-gradient-to-br"]:not(.rounded-full) { background: var(--mx-panel); border-color: var(--mx-line); }
.mx-doc [class*="border-emerald"] { border-color: rgba(76,125,247,0.4); }
/* Elements that keep a dark/colored fill (buttons, avatar circles, icon chips)
   must keep white content — they'd otherwise inherit the ink text mapping. */
.mx-doc .text-white[class*="bg-emerald-"], .mx-doc .text-white[class*="bg-blue-"],
.mx-doc .text-white[class*="bg-purple-"], .mx-doc .text-white[class*="bg-gray-7"] { color: #fff; }
.mx-doc .rounded-full[class*="bg-gradient-to-br"] *,
.mx-doc .rounded-full[class*="bg-emerald-"] *,
.mx-doc .rounded-full[class*="bg-blue-"] *,
.mx-doc .rounded-full[class*="bg-purple-"] * { color: #fff; }

/* Strategy-guide dark hero (_base_strategy.html): the banner keeps its ink
   gradient — an exhibit on the paper page — so restore light text inside it. */
.mx-doc .relative.mb-8.rounded-xl.overflow-hidden .text-white { color: #fff; }
.mx-doc .relative.mb-8.rounded-xl.overflow-hidden .text-gray-300,
.mx-doc .relative.mb-8.rounded-xl.overflow-hidden .text-gray-400 { color: rgba(214,224,238,0.78); }
.mx-doc .relative.mb-8.rounded-xl.overflow-hidden .text-gray-500 { color: rgba(214,224,238,0.55); }
.mx-doc .relative.mb-8.rounded-xl.overflow-hidden .text-gray-700 { color: rgba(214,224,238,0.35); }
.mx-doc .relative.mb-8.rounded-xl.overflow-hidden .text-emerald-400,
.mx-doc .relative.mb-8.rounded-xl.overflow-hidden .text-emerald-300,
.mx-doc .relative.mb-8.rounded-xl.overflow-hidden .text-green-400 { color: #7C9AF0; }
.mx-doc .relative.mb-8.rounded-xl.overflow-hidden .bg-emerald-600 { background: var(--mx-blue); }
.mx-doc .relative.mb-8.rounded-xl.overflow-hidden .bg-gray-700 { background: rgba(255,255,255,0.2); border: none; }
.mx-doc .relative.mb-8.rounded-xl.overflow-hidden [class*="border-gray-"] { border-color: rgba(255,255,255,0.14); }

.mx-doc input { background: var(--mx-panel-2); border-color: var(--mx-line-2); color: var(--mx-ink); }
.mx-doc input::placeholder { color: var(--mx-mute); }
.mx-doc input:focus { border-color: var(--mx-blue); outline: none; box-shadow: 0 0 0 3px rgba(76,125,247,0.12); }

/* ═══════════════ MOTION ═══════════════ */
@keyframes mx-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@keyframes mx-ring {
    0% { transform: scale(1); opacity: 0.5; }
    70% { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}
@keyframes mx-tape {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes mx-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes mx-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes mx-fade {
    to { opacity: 1; }
}

/* Hero load sequence — gated on .mx-js (set inline in <head>) so no-JS
   visitors see everything immediately. */
.mx-js .mx-hero [data-mx-hero] { opacity: 0; animation: mx-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.mx-js .mx-hero [data-mx-hero="1"] { animation-delay: 0.05s; }
.mx-js .mx-hero [data-mx-hero="2"] { animation-delay: 0.14s; }
.mx-js .mx-hero [data-mx-hero="3"] { animation-delay: 0.23s; }
.mx-js .mx-hero [data-mx-hero="4"] { animation-delay: 0.34s; }
.mx-js .mx-hero [data-mx-hero="5"] { animation-delay: 0.44s; }
.mx-js .mx-hero [data-mx-hero="6"] { animation-delay: 0.54s; }
.mx-js .mx-hero [data-mx-hero="7"] { animation-delay: 0.64s; }
.mx-js .mx-hero [data-mx-hero="8"] { animation-delay: 0.78s; }

/* Smile draws itself after the headline lands (pathLength=1 in markup). */
.mx-js .mx-smile .curve {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: mx-draw 1.15s cubic-bezier(0.4, 0, 0.2, 1) 0.55s forwards;
}
.mx-js .mx-smile .marker,
.mx-js .mx-smile .marker-ring,
.mx-js .mx-smile .ann {
    opacity: 0;
    animation: mx-fade 0.45s ease 1.55s forwards;
}
.mx-js .mx-smile .marker-ring { animation: mx-fade 0.45s ease 1.55s forwards, mx-ring 2.4s ease-out 2s infinite; }

/* Scroll reveals */
.mx-js [data-mx-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.mx-js [data-mx-reveal].is-in { opacity: 1; transform: none; }
.mx-js [data-mx-stagger] > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.mx-js [data-mx-stagger].is-in > * { opacity: 1; transform: none; }
.mx-js [data-mx-stagger].is-in > *:nth-child(2) { transition-delay: 0.07s; }
.mx-js [data-mx-stagger].is-in > *:nth-child(3) { transition-delay: 0.14s; }
.mx-js [data-mx-stagger].is-in > *:nth-child(4) { transition-delay: 0.21s; }
.mx-js [data-mx-stagger].is-in > *:nth-child(5) { transition-delay: 0.28s; }
.mx-js [data-mx-stagger].is-in > *:nth-child(6) { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
    .mx *, .mx *::before, .mx *::after { animation: none !important; transition: none !important; }
    .mx-js .mx-hero [data-mx-hero],
    .mx-js .mx-smile .curve,
    .mx-js .mx-smile .marker,
    .mx-js .mx-smile .marker-ring,
    .mx-js .mx-smile .ann,
    .mx-js [data-mx-reveal],
    .mx-js [data-mx-stagger] > * { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
    .mx-tape-track { animation: none !important; }
    .mx-tape { overflow-x: auto; }
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 1024px) {
    .mx-modmap { grid-template-columns: repeat(2, 1fr); }
    .mx-deck { grid-template-columns: repeat(2, 1fr); }
    .mx-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .mx-sec { padding: 68px 0; }
    .mx-hero { padding: 64px 24px 56px; }
    .mx-spot { grid-template-columns: 1fr; gap: 26px; padding: 40px 0; }
    .mx-spot--rev .mx-spot-vis { order: 1; }
    .mx-spot--rev .mx-spot-copy { order: 2; }
    .mx-vs-grid { grid-template-columns: 1fr; }
    .mx-3col { grid-template-columns: 1fr; }
    .mx-stats { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
    .mx-stats::before { background: repeating-linear-gradient(90deg, var(--mx-ink) 0, var(--mx-ink) 1px, transparent 1px, transparent 50%); }
}
@media (max-width: 640px) {
    .mx-modmap { grid-template-columns: 1fr; }
    .mx-deck { grid-template-columns: 1fr; }
    .mx-steps { grid-template-columns: 1fr; }
    .mx-hero-ctas .mx-btn { width: 100%; }
    .mx-fee { grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 18px 6px; row-gap: 4px; }
    .mx-fee-tools { grid-column: 1 / -1; order: 3; }
    .mx-fee-arrow { display: none; }
    .mx-hero-exhibit { margin-top: 48px; }
    .mx-axis span { left: 32px; }
}

/* ═══════════════ DOCS (ported from marketing-v3, re-tokened to paper) ═══════════════ */

/* ═══════════════════════════════════════════════════════════════
   API DOCS — public 3-column reference (ThetaData-style, terminal-luxe)
   Scoped under .mk-docs; this file is only linked on marketing pages.
   ═══════════════════════════════════════════════════════════════ */
.mk-docs-shell {
    max-width: 1320px; margin: 0 auto; padding: 36px 24px 96px;
    display: grid; grid-template-columns: 248px minmax(0, 1fr) 196px;
    gap: 44px;
    /* stretch (not start) so the nav/toc columns span the full content height —
       gives their position:sticky inners room to stay pinned the whole scroll.
       With align-items:start the columns collapse to content height and the
       sidebars scroll away after ~700px. */
    align-items: stretch;
}
@media (max-width: 1120px) {
    .mk-docs-shell { grid-template-columns: 240px minmax(0, 1fr); gap: 36px; }
    .mk-docs-toc { display: none; }
}
@media (max-width: 820px) {
    .mk-docs-shell { grid-template-columns: 1fr; gap: 0; padding: 24px 18px 72px; }
}

/* ── Left nav ── */
.mk-docs-nav-inner { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; }
.mk-docs-nav-title {
    font-family: var(--mx-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--mx-blue);
    margin: 0 0 14px; padding-left: 12px;
}
.mk-docs-nav-group {
    font-family: var(--mx-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--mx-mute);
    margin: 22px 0 8px; padding-left: 12px;
}
.mk-docs-navlink {
    display: block; padding: 7px 12px; border-radius: 8px;
    font-size: 13px; line-height: 1.35; color: var(--mx-ink-2);
    text-decoration: none; border-left: 2px solid transparent;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.mk-docs-navlink:hover { color: var(--mx-ink); background: rgba(255,255,255,0.035); }
.mk-docs-navlink.is-current {
    color: var(--mx-blue); background: rgba(76,125,247,0.08);
    border-left-color: var(--mx-blue);
}
.mk-docs-navlink--sub { font-size: 12.5px; color: var(--mx-ink-2); }
.mk-docs-navlink--admin { color: #F59E0B; }
@media (max-width: 820px) {
    .mk-docs-nav { border-bottom: 1px solid var(--mx-line); margin-bottom: 28px; padding-bottom: 12px; }
    .mk-docs-nav-inner { position: static; max-height: none; }
}

/* ── Right "on this page" rail ── */
.mk-docs-toc-inner { position: sticky; top: 88px; }
.mk-docs-toc-title {
    font-family: var(--mx-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--mx-mute);
    margin: 0 0 12px;
}
.mk-docs-toc-links { display: flex; flex-direction: column; gap: 2px; }
.mk-docs-toc-mod {
    display: block; padding: 5px 10px; border-left: 2px solid var(--mx-line);
    font-size: 12px; line-height: 1.4; color: var(--mx-ink-2);
    text-decoration: none; transition: color 0.18s, border-color 0.18s;
}
.mk-docs-toc-mod:hover { color: var(--mx-ink-2); border-left-color: var(--mx-line-2); }
.mk-docs-toc-mod.is-active { color: var(--mx-blue); border-left-color: var(--mx-blue); }

/* ── Main content ── */
.mk-docs-main { min-width: 0; }
.mk-docs-head { margin-bottom: 40px; }
.mk-docs-head .mk-eyebrow { margin-bottom: 14px; }
.mk-docs-h1 {
    font-family: var(--mx-sans); font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.05; letter-spacing: -0.04em;
    color: var(--mx-ink); margin: 0 0 18px;
}
.mk-docs-h2 {
    font-family: var(--mx-sans); font-weight: 700;
    font-size: 1.35rem; letter-spacing: -0.025em; color: var(--mx-ink);
    margin: 0 0 14px; scroll-margin-top: 90px;
}
.mk-docs-lead { font-size: 0.96rem; line-height: 1.75; color: var(--mx-ink-2); max-width: 70ch; margin: 0 0 14px; }
.mk-docs-lead code, .mk-docs-note code, .mk-docs-list code, .mk-docs-steps code,
.mk-docs-table code, .mk-op-meta code {
    font-family: var(--mx-mono); font-size: 0.86em; color: var(--mx-blue);
    background: rgba(76,125,247,0.07); padding: 1px 6px; border-radius: 5px;
}
.mk-docs-note { font-size: 0.88rem; line-height: 1.7; color: var(--mx-ink-2); margin: 0 0 18px; }
.mk-docs-block { margin: 0 0 48px; }
.mk-docs-module { margin: 0 0 44px; }
.mk-docs-list, .mk-docs-steps { margin: 0 0 18px; padding-left: 22px; }
.mk-docs-list li, .mk-docs-steps li { font-size: 0.9rem; line-height: 1.7; color: var(--mx-ink-2); margin-bottom: 9px; }
.mk-docs-steps { counter-reset: step; }

/* Tables */
.mk-docs-tablewrap { overflow-x: auto; border: 1px solid var(--mx-line); border-radius: 12px; margin: 0 0 18px; }
.mk-docs-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.mk-docs-table th {
    text-align: left; padding: 11px 14px; background: rgba(255,255,255,0.03);
    color: var(--mx-ink-2); font-weight: 600; font-size: 0.74rem;
    letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--mx-line);
}
.mk-docs-table td { padding: 11px 14px; color: var(--mx-ink-2); line-height: 1.55; border-bottom: 1px solid var(--mx-line); vertical-align: top; }
.mk-docs-table tr:last-child td { border-bottom: 0; }

/* Section cards on the hub */
.mk-docs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mk-docs-card { padding: 20px 22px; }
.mk-docs-card-title { font-size: 1rem; font-weight: 700; color: var(--mx-ink); margin: 0 0 8px; }
.mk-docs-card-desc { font-size: 0.82rem; line-height: 1.6; color: var(--mx-ink-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.mk-docs-foot { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--mx-line); }

/* ── Operation block ── */
.mk-op {
    background: linear-gradient(180deg, var(--mx-panel), var(--mx-panel));
    border: 1px solid var(--mx-line); border-radius: 12px;
    padding: 20px 22px; margin: 0 0 18px; scroll-margin-top: 90px;
}
.mk-op-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mk-method {
    font-family: var(--mx-mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; padding: 4px 9px; border-radius: 6px;
    border: 1px solid transparent; text-transform: uppercase;
}
.mk-method--get { color: var(--mx-up); background: rgba(52,211,153,0.07); border-color: rgba(52,211,153,0.3); }
.mk-method--post { color: var(--mx-blue); background: rgba(76,125,247,0.07); border-color: rgba(76,125,247,0.3); }
.mk-method--put, .mk-method--patch { color: #F59E0B; background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.3); }
.mk-method--delete { color: var(--mx-down); background: rgba(248,113,113,0.07); border-color: rgba(248,113,113,0.3); }
.mk-op-path { font-family: var(--mx-mono); font-size: 0.92rem; color: var(--mx-ink); word-break: break-all; }
.mk-op-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mk-badge {
    font-family: var(--mx-mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--mx-ink-2);
    padding: 3px 9px; border-radius: 6px; border: 1px solid var(--mx-line-2);
    background: rgba(255,255,255,0.03);
}
.mk-op-meta { font-family: var(--mx-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--mx-mute); }
.mk-op-desc { font-size: 0.88rem; line-height: 1.65; color: var(--mx-ink-2); margin: 0 0 12px; }
.mk-op-params { margin: 0 0 14px; padding: 10px 14px; border-left: 2px solid var(--mx-line-2); background: var(--mx-panel-2); border-radius: 0 8px 8px 0; }
.mk-op-label { display: block; font-family: var(--mx-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mx-ink-2); margin-bottom: 5px; }
.mk-op-params p { font-size: 0.82rem; line-height: 1.6; color: var(--mx-ink-2); margin: 0; }

/* ── Code block with language tabs ── */
.mk-code { border: 1px solid var(--mx-line); border-radius: 10px; overflow: hidden; background: #070D18; }
.mk-code-tabs { display: flex; gap: 2px; padding: 6px 6px 0; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--mx-line); }
.mk-codetab {
    font-family: var(--mx-mono); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.03em; color: var(--mx-ink-2); background: transparent;
    border: 0; border-bottom: 2px solid transparent; padding: 7px 13px; cursor: pointer;
    transition: color 0.18s, border-color 0.18s;
}
.mk-codetab:hover { color: var(--mx-ink-2); }
.mk-codetab.is-active { color: var(--mx-blue); border-bottom-color: var(--mx-blue); }
.mk-codepane { display: none; margin: 0; padding: 16px 18px; overflow-x: auto; }
.mk-codepane.is-active { display: block; }
.mk-codepane code {
    font-family: var(--mx-mono) !important; font-size: 12.5px; line-height: 1.6;
    color: var(--mx-ink-2); white-space: pre; background: none; padding: 0;
}
.mk-code--solo .mk-code-tabs .mk-codetab { cursor: default; color: var(--mx-blue); border-bottom-color: var(--mx-blue); }
/* The Response tab is output, not a request example — push it to the right. */
.mk-codetab--response { margin-left: auto; }
.mk-codetab--response.is-active { color: var(--mx-blue); border-bottom-color: var(--mx-blue); }
.mk-code { position: relative; }
.mk-copy {
    position: absolute; top: 6px; right: 7px; z-index: 2;
    font-family: var(--mx-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
    color: var(--mx-ink-2); background: rgba(148,163,184,0.08);
    border: 1px solid var(--mx-line); border-radius: 6px; padding: 4px 9px; cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mk-copy:hover { color: var(--mx-ink-2); border-color: var(--mx-line-2); background: rgba(148,163,184,0.14); }
.mk-copy.is-copied { color: var(--mx-blue); border-color: var(--mx-blue); }

/* Cross-reference / beta callout inside docs prose. */
.mk-docs-callout {
    border: 1px solid var(--mx-line-2); border-left: 3px solid var(--mx-blue);
    border-radius: 8px; background: rgba(76,125,247,0.08);
    padding: 12px 14px; margin-top: 14px;
}

/* ── Code stays monospace site-wide ──
   The whole site now renders in Inter (--mk-sans/--mk-mono). Genuine code —
   <code>/<pre>, including endpoint-path tokens which are <code> elements —
   must remain monospace, so force --mk-code on them. */
.mk code, .mk pre, .mk-codepane code { font-family: var(--mx-mono); }
/* Tighten heading tracking for Inter on the docs. */
.mk-docs .mk-docs-h1, .mk-docs .mk-docs-h2 { letter-spacing: -0.02em; }


/* ═══════════════════════════════════════════════════════════════
   TERMINAL-FIRST REDESIGN — real screen-capture video showcase,
   module map, and Pro/Terminal positioning (home, features, pricing)
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero video: the product is the hero ── */
.mk-vidwrap { position: relative; z-index: 2; width: min(1180px, 100%); margin: 56px auto 0; }
.mk-vidwrap--sub { margin-top: 44px; }
.mk-vid { cursor: pointer; }
.mk-vid video { display: block; width: 100%; height: auto; background: var(--mx-ink); }
.mk-vid:hover { border-color: rgba(52, 211, 153, 0.35); }

/* LIVE badge sits at the right edge of the window-chrome bar */
.mk-vid-live {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mx-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    color: var(--mx-blue);
}
.mk-vid-live i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--mx-blue);
    animation: mk-live-pulse 1.6s ease-in-out infinite;
}
@keyframes mk-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .mk-vid-live i { animation: none; } }

/* Caption strip under the capture — states what the viewer is looking at */
.mk-vid-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 16px; border-top: 1px solid var(--mx-line);
    font-family: var(--mx-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--mx-mute);
    background: rgba(15, 23, 42, 0.55);
}
.mk-vid-foot b { color: var(--mx-ink-2); font-weight: 600; }
@media (max-width: 640px) { .mk-vid-foot { flex-direction: column; align-items: flex-start; gap: 4px; } }

/* Center play affordance — appears when the video is paused
   (reduced-motion visitors, or after a tap). */
.mk-vid-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.82); border: 1px solid rgba(52, 211, 153, 0.5);
    color: var(--mx-blue); box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.7);
    opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.mk-vid.is-paused .mk-vid-play { opacity: 1; }
.mk-vid-play svg { margin-left: 4px; }

/* ── Module map — the terminal's own vocabulary as a design element ── */
.mk-modmap { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .mk-modmap { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mk-modmap { grid-template-columns: 1fr 1fr 1fr; } }
.mk-modgroup { padding: 22px 22px 20px; }
.mk-modgroup .gname {
    display: flex; align-items: center; gap: 10px;
    font-size: 14.5px; font-weight: 700; color: var(--mx-ink); margin: 0 0 4px;
}
.mk-modgroup .gname svg { color: var(--mx-blue); flex-shrink: 0; }
.mk-modgroup .gsub { font-size: 12.5px; color: var(--mx-mute); margin: 0 0 14px; line-height: 1.5; }
.mk-modchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-modchip {
    font-family: var(--mx-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--mx-ink-2); background: rgba(148, 163, 184, 0.07);
    border: 1px solid var(--mx-line); border-radius: 6px; padding: 4px 8px; white-space: nowrap;
}
.mk-modchip--hot { color: var(--mx-blue); border-color: rgba(52, 211, 153, 0.35); background: rgba(76,125,247,0.08); }

/* Workspace capability row (multi-pane / workspaces / watchlist / themes) */
.mk-deck { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 900px) { .mk-deck { grid-template-columns: repeat(4, 1fr); } }
.mk-deck .mk-card { padding: 20px; }
.mk-deck h3 { font-size: 13.5px; font-weight: 700; color: var(--mx-ink); margin: 12px 0 7px; }
.mk-deck p { font-size: 12.5px; color: var(--mx-ink-2); line-height: 1.6; margin: 0; }
.mk-deck .ic {
    width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    background: rgba(76,125,247,0.08); border: 1px solid rgba(52, 211, 153, 0.25); color: var(--mx-blue);
}

/* ── "Includes the Terminal" banner (pricing) ── */
.mk-termbanner {
    display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center;
    border: 1px solid rgba(167, 139, 250, 0.30); border-radius: 16px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08) 0%, var(--mx-panel) 55%);
    padding: 30px;
}
@media (min-width: 960px) { .mk-termbanner { grid-template-columns: 1.05fr 1fr; padding: 38px; } }
.mk-termbanner .mk-vidwrap { margin: 0; }
.mk-termbanner h2 { margin: 12px 0 12px; }
.mk-termbanner .flag {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--mx-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
    color: var(--mk-violet); background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.3); border-radius: 999px; padding: 5px 12px;
}
.mk-termbanner p.lead { font-size: 15px; color: var(--mx-ink-2); line-height: 1.7; margin: 0 0 20px; }
.mk-termbanner p.lead strong { color: var(--mx-ink-2); }

/* ── Assessment fixes (2026-07-07) ── */
/* Persona chips are now links to feature guides */
a.mk-chip { text-decoration: none; transition: color 0.15s, border-color 0.15s; }
a.mk-chip:hover { color: var(--mx-blue); border-color: rgba(52, 211, 153, 0.4); }
/* FAQ toggles converted from divs to real <button>s — neutralize UA styles */
button.mk-faq-q { width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; }
/* Keyboard focus for the interactive FAQ + video */
.mk-faq-q:focus-visible, .mk-vid:focus-visible { outline: 2px solid var(--mx-blue); outline-offset: 2px; border-radius: 8px; }
/* The LIVE-capture badge wraps awkwardly inside the window bar on phones */
@media (max-width: 640px) { .mk-vid-live { display: none; } }

/* v4 aliases for legacy mk- classes still used by docs templates */
.mx .mk-eyebrow {
    font-family: var(--mx-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--mx-mute);
    display: inline-flex; align-items: center; gap: 10px;
}
.mx .mk-eyebrow::before { content: ''; width: 1px; height: 12px; background: var(--mx-blue); }
.mx .mk-textlink {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 600; color: var(--mx-blue);
    text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.mx .mk-textlink:hover { border-bottom-color: var(--mx-blue); }
.mx .mk-card {
    background: var(--mx-panel); border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.mx .mk-card:hover { transform: translateY(-2px); border-color: var(--mx-line-2); box-shadow: var(--mx-shadow-card); }
.mx .mk-codepane code { color: #D6E0EE; }
.mx .mk-code .mk-code-tabs { background: rgba(255,255,255,0.04); border-bottom-color: rgba(255,255,255,0.1); }
.mx .mk-codetab { color: rgba(214,224,238,0.55); }
.mx .mk-codetab:hover { color: rgba(214,224,238,0.85); }
.mx .mk-codetab.is-active { color: #7C9AF0; border-bottom-color: #7C9AF0; }
.mx .mk-code--solo .mk-code-tabs .mk-codetab { color: #7C9AF0; border-bottom-color: #7C9AF0; }