/* ============================================================
mn-kit.css — Mentionova component kit (v2, measured)
------------------------------------------------------------
Every value below was READ from the live homepage
(/home-standalone) with getComputedStyle — not hand-authored.
That is deliberate: the v1 kit drifted from the reference
because values were written from memory.
Usage:
…
Kit + snippets: /brand/kit.html Blank page: /brand/starter.html
============================================================ */
@font-face {
font-family: 'Instrument Sans';
font-style: italic;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url("/hs-assets/7a5fa400-6409-4911-8325-847716d5f5d7.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Instrument Sans';
font-style: italic;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url("/hs-assets/3ed9881e-0c9f-450b-b64a-24c52d1c1a36.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url("/hs-assets/e0f2dc7f-ec01-4309-9c2f-893faa89fd3b.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url("/hs-assets/75954124-c23c-45d0-8919-e0fffe53a967.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/hs-assets/3ef66c1d-93f3-4182-9100-6344b5c09f58.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/hs-assets/cae8fae3-d62d-4201-996b-9a8682b43d6c.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/hs-assets/3ef66c1d-93f3-4182-9100-6344b5c09f58.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/hs-assets/cae8fae3-d62d-4201-996b-9a8682b43d6c.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/hs-assets/3ef66c1d-93f3-4182-9100-6344b5c09f58.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/hs-assets/cae8fae3-d62d-4201-996b-9a8682b43d6c.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/hs-assets/3ef66c1d-93f3-4182-9100-6344b5c09f58.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/hs-assets/cae8fae3-d62d-4201-996b-9a8682b43d6c.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/hs-assets/db4efdfd-8aef-41d6-8d40-e9caa8654019.woff2") format('woff2');
unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/hs-assets/4d971255-396c-481a-a631-faec9fce539a.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/hs-assets/34e234fb-407e-42e4-b97a-29047b87b889.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/hs-assets/db4efdfd-8aef-41d6-8d40-e9caa8654019.woff2") format('woff2');
unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/hs-assets/4d971255-396c-481a-a631-faec9fce539a.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/hs-assets/34e234fb-407e-42e4-b97a-29047b87b889.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/hs-assets/db4efdfd-8aef-41d6-8d40-e9caa8654019.woff2") format('woff2');
unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/hs-assets/4d971255-396c-481a-a631-faec9fce539a.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/hs-assets/34e234fb-407e-42e4-b97a-29047b87b889.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/hs-assets/3ef66c1d-93f3-4182-9100-6344b5c09f58.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/hs-assets/cae8fae3-d62d-4201-996b-9a8682b43d6c.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/hs-assets/3ef66c1d-93f3-4182-9100-6344b5c09f58.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/hs-assets/cae8fae3-d62d-4201-996b-9a8682b43d6c.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/hs-assets/3ef66c1d-93f3-4182-9100-6344b5c09f58.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/hs-assets/cae8fae3-d62d-4201-996b-9a8682b43d6c.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/hs-assets/3ef66c1d-93f3-4182-9100-6344b5c09f58.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/hs-assets/cae8fae3-d62d-4201-996b-9a8682b43d6c.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/hs-assets/db4efdfd-8aef-41d6-8d40-e9caa8654019.woff2") format('woff2');
unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/hs-assets/4d971255-396c-481a-a631-faec9fce539a.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/hs-assets/34e234fb-407e-42e4-b97a-29047b87b889.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/hs-assets/db4efdfd-8aef-41d6-8d40-e9caa8654019.woff2") format('woff2');
unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/hs-assets/4d971255-396c-481a-a631-faec9fce539a.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/hs-assets/34e234fb-407e-42e4-b97a-29047b87b889.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/hs-assets/db4efdfd-8aef-41d6-8d40-e9caa8654019.woff2") format('woff2');
unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/hs-assets/4d971255-396c-481a-a631-faec9fce539a.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/hs-assets/34e234fb-407e-42e4-b97a-29047b87b889.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- tokens (measured) ---------- */
:root{
/* type */
--mn-sans:"Instrument Sans", Geist, sans-serif;
--mn-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* ink — the homepage runs a near-black body ink and a blue-black for cards */
--mn-ink:#171717; /* body copy / h1 */
--mn-ink-card:#141a2b; /* card + panel titles */
--mn-muted:#4d4d4d; /* section sub */
--mn-muted-card:#565f72; /* card body */
--mn-subtle:#5a6478; /* pill labels */
--mn-faint:#a7b0c0;
/* accent — kit components use #146EF5; the underlying site token
(--signal) is #0070f3 and drives nav/links. Both are correct. */
--mn-blue:#146EF5;
--mn-blue-bright:#1D84F7;
--mn-blue-deep:#0B62D6;
--mn-blue-tint:#CFE3FF;
--mn-blue-hover:#0f5ad4;
--mn-signal:#0070F3; /* homepage --signal: the mark and every eyebrow */
--mn-blue-logo:#0070F3; /* alias, kept so existing rules keep working */
--mn-warn:#E8710A; /* .mn-callout--warn rail */
/* dark product panel */
--mn-panel:#0e1116;
--mn-panel-line:#20242c;
--mn-panel-rule:#1c2129;
--mn-panel-chip:#171b22;
--mn-panel-ink:#e7e9ee;
--mn-panel-muted:#c7cdd6;
--mn-panel-faint:#8a93a3;
--mn-bar-track:#242a33;
--mn-bar:#3b82f6;
/* semantic */
--mn-live:#3ddc84;
--mn-live-ink:#12a150;
/* lines / surfaces */
--mn-line:#e5e9f0;
--mn-line-soft:#f0f3f8;
--mn-sunken:#f6f8fc;
--mn-before:#f4f6fa;
/* gradients (exact stops) */
--mn-g-backdrop:linear-gradient(135deg,#eef4ff 0%,#bcd2fb 55%,#7ea0ef 100%);
/* tile palette — six measured variants. --mn-g-tile is the default (blue). */
--mn-g-tile:linear-gradient(160deg,#CFE3FF 0%,#1D84F7 45%,#0B62D6 100%); /* blue */
--mn-g-tile-indigo:linear-gradient(168deg,#C9D6F7 0%,#7F9EF0 40%,#8F8AF2 100%);/* indigo */
--mn-g-tile-navy:linear-gradient(150deg,#1A2F7A 0%,#0E1A44 100%); /* navy */
--mn-g-tile-warm:linear-gradient(150deg,#BFEEE0 0%,#E8F5D8 30%,#F4A94F 62%,#F7D9B0 100%); /* warm */
--mn-g-tile-mint:linear-gradient(160deg,#C9ECE0 0%,#8FD3B6 100%); /* mint */
--mn-g-tile-violet:linear-gradient(165deg,#EDE6FF 0%,#B9A6F5 55%,#7C63E8 100%);/* violet */
--mn-g-head:linear-gradient(100deg,#0A3C93 0%,#0F52C4 52%,#1A6FE0 100%);
--mn-g-band:linear-gradient(175deg,#F4F7FF 0%,#DFE9FF 34%,#B7CDF9 62%,#6D96E8 100%);
/* elevation */
--mn-e-frost:0 10px 34px -18px rgba(20,40,90,.35);
--mn-e-tile:0 26px 58px -30px rgba(15,25,55,.5);
--mn-e-mock:0 8px 22px -12px rgba(20,40,90,.4);
--mn-e-btn:0 12px 30px -12px rgba(20,80,220,.6);
/* frosted recipe */
--mn-frost-bg:rgba(255,255,255,.42);
--mn-frost-border:rgba(255,255,255,.55);
--mn-frost-blur:blur(10px);
/* layout */
--mn-container:1140px;
--mn-band-max:1180px;
--mn-gutter:24px;
--mn-bdh:907px; /* backdrop height: set per page */
}
/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:hidden on html/body makes them a scroll container, which
silently disables position:sticky for every descendant — it is why the
article ToC scrolled away instead of floating. clip stops horizontal
scroll without creating that container. */
html,body{max-width:100%;overflow-x:clip}
body.mn{margin:0;font-family:var(--mn-sans);font-size:16px;line-height:1.5;color:var(--mn-ink);
background:#fff;-webkit-font-smoothing:antialiased}
.mn-w{max-width:var(--mn-container);margin:0 auto;padding:0 var(--mn-gutter)}
.mn-sec{padding:70px 0}
.mn-sec--tight{padding:34px 0}
/* backdrop: two layers — the fade must sit ABOVE the gradient or the
bottom edge lands as a hard seam */
.mn-backdrop{
background-color:#fff;
background-image:linear-gradient(rgba(255,255,255,0) calc(100% - 130px),#fff 100%),var(--mn-g-backdrop);
background-size:100% var(--mn-bdh),100% var(--mn-bdh);
background-repeat:no-repeat,no-repeat;
background-position:50% 0%,50% 0%;
}
/* ---------- type ---------- */
.mn-h1{font-family:var(--mn-sans);font-size:clamp(30px,4.2vw,46px);font-weight:700;
letter-spacing:-.035em;line-height:1.16;color:var(--mn-ink);margin:0}
.mn-h1 .sig,.mn-h1 em{
font-style:normal;
background-image:var(--mn-g-head);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
padding-bottom:.1em; /* clipped text crops descenders */
}
.mn-h2{font-family:var(--mn-sans);font-size:clamp(27px,3.3vw,40px);font-weight:700;
letter-spacing:-.035em;line-height:1.1;color:var(--mn-ink);margin:12px 0 0}
.mn-h2 .sig,.mn-h2 em{font-style:normal;background-image:var(--mn-g-head);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent}
.mn-sub{font-size:16px;line-height:1.55;color:var(--mn-muted);margin:12px 0 0;max-width:62ch}
.mn-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mn-mono);font-size:12px;
font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mn-signal)}
.mn-eyebrow i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.mn-label{display:block;font-family:var(--mn-mono);font-size:10px;font-weight:600;letter-spacing:.12em;
line-height:1;text-transform:uppercase;color:var(--mn-blue);margin:0 0 9px}
.mn-note{font-family:var(--mn-mono);font-size:12.5px;color:var(--mn-subtle)}
/* ---------- buttons ---------- */
.mn-btn{display:inline-flex;align-items:center;gap:9px;background:var(--mn-blue);color:#fff;border:0;
border-radius:11px;padding:14px 26px;font-family:var(--mn-sans);font-size:15px;font-weight:600;
text-decoration:none;cursor:pointer;box-shadow:var(--mn-e-btn);
transition:background .18s ease,transform .18s ease}
.mn-btn:hover{background:var(--mn-blue-hover);color:#fff;transform:translateY(-1px)}
.mn-btn:focus-visible{outline:2px solid #0b3ea8;outline-offset:3px}
.mn-btn--ghost{background:#fff;color:var(--mn-subtle);border:1px solid #dfe5ef;box-shadow:none}
.mn-btn--form{border-radius:8px;padding:14px 22px;font-weight:500;box-shadow:none}
.mn-btn--sm{padding:8px 13px;font-size:13px;font-weight:500;border-radius:8px;box-shadow:none}
.mn-btn--nav{background:#f0f0f1;color:#111;box-shadow:none}
@media(max-width:620px){.mn-btn--block{width:100%;justify-content:center}}
/* ---------- loop chips ---------- */
.mn-chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mn-chips .sep{color:var(--mn-muted)}
.mn-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mn-mono);font-size:11px;
letter-spacing:.07em;text-transform:uppercase;padding:7px 14px;border-radius:999px;
border:1px solid rgba(20,110,245,.45);color:var(--mn-blue);background:rgba(255,255,255,.55);
cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease}
.mn-chip i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
.mn-chip:hover{border-color:var(--mn-blue);background:#fff;color:var(--mn-blue-hover)}
.mn-chip:hover i{opacity:1}
.mn-chip:focus-visible{outline:2px solid #0b3ea8;outline-offset:2px}
.mn-chip[aria-current="true"]{background:var(--mn-blue);border-color:var(--mn-blue);color:#fff}
.mn-chip[aria-current="true"] i{background:#fff;opacity:1}
/* ---------- frosted card ---------- */
.mn-band{background:var(--mn-g-band);border-radius:22px;padding:26px 30px 18px;
max-width:var(--mn-band-max);margin:0 auto}
.mn-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mn-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:860px){.mn-grid-3,.mn-grid-2{grid-template-columns:1fr}}
.mn-card{display:flex;align-items:flex-start;gap:14px;padding:24px 22px;border-radius:14px;
background:var(--mn-frost-bg);border:1px solid var(--mn-frost-border);
-webkit-backdrop-filter:var(--mn-frost-blur);backdrop-filter:var(--mn-frost-blur);
box-shadow:var(--mn-e-frost)}
.mn-card__body{flex:1;min-width:0}
.mn-card__title{display:block;margin:0;font-size:17px;font-weight:700;line-height:1.2;
color:var(--mn-ink-card);white-space:normal}
/* single-line titles are the intent, but only where they actually fit.
Below ~360px of card the long ones ("Connect Data Sources") ran under
the mock, so the title wraps instead of clipping. */
.mn-card{container-type:inline-size}
@container (min-width:344px){.mn-card__title{white-space:nowrap}}
.mn-card p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--mn-muted-card);
display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mn-card__mock{width:106px;min-height:101px;flex:none;background:#fff;border-radius:10px;padding:10px;
box-shadow:var(--mn-e-mock);display:flex;flex-direction:column;justify-content:center}
@media(max-width:620px){.mn-band{padding:26px 16px;border-radius:16px}
.mn-card{padding:18px 16px}.mn-card__mock{width:92px;min-height:88px}.mn-card__title{font-size:16px}}
/* mock internals */
.mn-mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mn-mock-grid span{height:26px;border-radius:7px;background:#f4f7fd;display:flex;align-items:center;
justify-content:center;font-family:var(--mn-mono);font-size:7.5px;color:var(--mn-muted-card)}
.mn-mock-grid svg{width:13px;height:13px}
.mn-node{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:6px;background:#f4f7fd;
font-family:var(--mn-mono);font-size:8px;color:#414b60}
.mn-node i{width:5px;height:5px;border-radius:99px;background:var(--mn-blue);flex:none}
.mn-node--done i{background:var(--mn-live-ink)}
.mn-node-link{width:1.5px;height:7px;margin-left:12px;background:linear-gradient(#c3d3f2,#146ef5)}
/* ---------- product tile + dark panel ---------- */
.mn-tile{display:flex;border-radius:18px;padding:30px 22px;background:var(--mn-g-tile);
box-shadow:var(--mn-e-tile)}
/* Tile variants. Cycle them across a grid so adjacent tiles differ; the
dark panel inside is identical in every case, so contrast is unaffected. */
.mn-tile--blue{background:var(--mn-g-tile)}
.mn-tile--indigo{background:var(--mn-g-tile-indigo)}
.mn-tile--navy{background:var(--mn-g-tile-navy)}
.mn-tile--warm{background:var(--mn-g-tile-warm)}
.mn-tile--mint{background:var(--mn-g-tile-mint)}
.mn-tile--violet{background:var(--mn-g-tile-violet)}
/* auto-cycle inside a grid when no variant class is set */
.mn-tiles > *:nth-child(6n+2) .mn-tile:not([class*="mn-tile--"]){background:var(--mn-g-tile-indigo)}
.mn-tiles > *:nth-child(6n+3) .mn-tile:not([class*="mn-tile--"]){background:var(--mn-g-tile-navy)}
.mn-tiles > *:nth-child(6n+4) .mn-tile:not([class*="mn-tile--"]){background:var(--mn-g-tile-warm)}
.mn-tiles > *:nth-child(6n+5) .mn-tile:not([class*="mn-tile--"]){background:var(--mn-g-tile-mint)}
.mn-tiles > *:nth-child(6n+6) .mn-tile:not([class*="mn-tile--"]){background:var(--mn-g-tile-violet)}
.mn-panel{flex:1;width:100%;display:flex;flex-direction:column;background:var(--mn-panel);
border:1px solid var(--mn-panel-line);border-radius:12px;padding:16px 17px;color:var(--mn-panel-ink)}
.mn-panel__hd{display:flex;justify-content:space-between;align-items:center;font-size:13px;
font-weight:700;color:#fff;margin-bottom:12px}
.mn-live{display:inline-flex;align-items:center;gap:5px;font-family:var(--mn-mono);font-size:9px;
font-weight:400;color:var(--mn-live)}
.mn-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mn-live)}
.mn-stats{display:flex;gap:26px;margin-bottom:12px}
.mn-stats .k{font-family:var(--mn-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
color:var(--mn-panel-faint)}
.mn-stats .v{font-size:23px;font-weight:700;color:#fff;margin-top:3px}
.mn-tool{display:flex;align-items:center;gap:8px;padding:6px 0;font-family:var(--mn-mono);
font-size:10.5px;color:var(--mn-panel-muted)}
.mn-tool .ck{color:var(--mn-live)}
.mn-tool .ms{margin-left:auto;color:var(--mn-panel-faint)}
.mn-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:11px}
.mn-row .l{flex:1;min-width:0;font-family:var(--mn-mono);font-size:10.5px;color:var(--mn-panel-muted);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-row .n{width:36px;text-align:right;font-family:var(--mn-mono);font-size:10.5px;color:var(--mn-panel-ink)}
.mn-row .bar{width:66px;height:6px;flex:none;border-radius:99px;background:var(--mn-bar-track);overflow:hidden}
.mn-row .bar i{display:block;height:100%;border-radius:99px;background:var(--mn-bar)}
.mn-panel__sub{margin:12px 0 4px;padding-top:11px;border-top:1px solid var(--mn-panel-rule);
font-family:var(--mn-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
color:var(--mn-panel-faint)}
.mn-panel__big{font-size:27px;font-weight:700;color:#fff}
.mn-panel__big span{margin-left:7px;font-size:11px;font-weight:400;color:var(--mn-panel-faint)}
.mn-quote{font-style:italic;font-size:13px;line-height:1.5;color:#dfe3ea}
.mn-panel__total{display:flex;justify-content:space-between;margin-top:auto;padding-top:11px;
border-top:1px solid var(--mn-panel-rule);font-size:12px;font-weight:600;color:#fff}
.mn-chip-cta{display:inline-flex;align-items:center;margin-top:12px;padding:6px 11px;border-radius:7px;
background:var(--mn-blue);color:#fff;font-family:var(--mn-mono);font-size:9.5px;
letter-spacing:.06em;text-transform:uppercase}
.mn-src{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 9px;border-radius:9px;
background:var(--mn-panel-chip);border:1px solid #232833;color:var(--mn-panel-ink);
font-size:11px;font-weight:600}
.mn-src .tm{margin-left:auto;font-family:var(--mn-mono);font-size:8px;color:var(--mn-live)}
.mn-src svg{width:15px;height:15px;flex:none}
.mn-caption{margin-top:14px;text-align:center;font-size:13.5px;color:var(--mn-muted)}
/* ---------- stat pill ---------- */
.mn-pillwrap{text-align:center;margin:30px auto 34px}
.mn-pill{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;
padding:13px 12px;border-radius:999px;background:var(--mn-frost-bg);
border:1px solid rgba(255,255,255,.6);box-shadow:var(--mn-e-frost);
-webkit-backdrop-filter:var(--mn-frost-blur);backdrop-filter:var(--mn-frost-blur)}
.mn-pill span{display:inline-flex;align-items:baseline;gap:7px;padding:0 22px;
font-family:var(--mn-mono);font-size:12.5px;color:var(--mn-subtle);
border-left:1px solid rgba(20,40,90,.14)}
.mn-pill span:first-child{border-left:0}
.mn-pill b{font-family:var(--mn-sans);font-size:19px;font-weight:700;color:var(--mn-ink-card)}
@media(max-width:720px){.mn-pill{border-radius:18px;padding:14px 18px}
.mn-pill span{border-left:0;padding:0 14px}}
/* ---------- form ---------- */
.mn-form{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.mn-input{height:48px;min-width:220px;flex:1;padding:11px 14px;border:1px solid var(--mn-line);
border-radius:8px;background:#fff;font-family:var(--mn-mono);font-size:14px;color:var(--mn-ink)}
.mn-input::placeholder{color:#98a2b3}
.mn-input:focus-visible{outline:2px solid var(--mn-blue);outline-offset:1px;border-color:var(--mn-blue)}
/* ---------- ledger ---------- */
.mn-ledger{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;margin-top:38px}
@media(max-width:900px){.mn-ledger{grid-template-columns:1fr}
.mn-ledger__arrow{transform:rotate(90deg);margin:0 auto}}
.mn-lcard{border-radius:16px;padding:22px 22px 18px}
.mn-lcard--before{background:var(--mn-before);border:1px solid var(--mn-line)}
.mn-lcard--after{background:var(--mn-panel);border:1px solid var(--mn-panel-line);color:var(--mn-panel-ink)}
.mn-lcard__hd{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;
padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--mn-line);color:var(--mn-ink-card)}
.mn-lcard--after .mn-lcard__hd{border-bottom-color:var(--mn-panel-rule);color:#fff}
.mn-ltag{font-family:var(--mn-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--mn-subtle)}
/* live indicator in the after-card header (homepage parity) */
.mn-llive{font-family:var(--mn-mono);font-size:9px;font-weight:400;color:var(--mn-live);
display:inline-flex;align-items:center;gap:5px}
.mn-llive::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mn-live)}
/* fixed-width saving column so the green figures line up */
.mn-lcard--after .mn-lrow .h{width:62px;text-align:right;font-size:10.5px}
.mn-lrow{display:flex;align-items:center;gap:10px;padding:11px 0;font-size:13px;color:var(--mn-muted-card);
border-bottom:1px solid rgba(20,40,90,.07)}
.mn-lcard--after .mn-lrow{color:var(--mn-panel-ink);font-weight:600;border-bottom-color:#1a1f27}
.mn-lrow:last-of-type{border-bottom:0}
.mn-lrow .h{margin-left:auto;flex:none;font-family:var(--mn-mono);font-size:12px;color:var(--mn-subtle)}
.mn-lcard--after .mn-lrow .h{color:var(--mn-live)}
.mn-ldot{width:6px;height:6px;border-radius:50%;background:var(--mn-bar);flex:none}
.mn-lbar{width:56px;height:5px;flex:none;border-radius:99px;background:var(--mn-bar-track);overflow:hidden}
.mn-lbar i{display:block;height:100%;border-radius:99px;background:var(--mn-bar)}
.mn-ltot{display:flex;justify-content:space-between;align-items:baseline;padding-top:15px;margin-top:5px;
font-family:var(--mn-mono);font-size:12.5px;color:var(--mn-subtle)}
.mn-ltot b{font-family:var(--mn-sans);font-size:17px;color:var(--mn-ink-card)}
.mn-lcard--after .mn-ltot b{color:#fff}
.mn-ledger__arrow{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
border-radius:50%;background:#e7effe;color:var(--mn-blue)}
.mn-ledger__arrow svg{width:18px;height:18px}
.mn-ledger__foot{margin:26px 0 0;text-align:center;font-size:14px;color:var(--mn-subtle)}
.mn-ledger__foot b{color:var(--mn-ink-card);font-weight:700}
/* ---------- split feature row ---------- */
.mn-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center}
/* grid items default to min-width:auto, so a panel of nowrap rows sets a floor wider
than the column and spills out (or gets clipped by the tile) at narrow widths */
.mn-split>*{min-width:0}
@media(max-width:860px){.mn-split{grid-template-columns:1fr;gap:26px}}
.mn-checks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.mn-checks li{display:flex;align-items:center;gap:9px;font-family:var(--mn-mono);font-size:13.5px;color:var(--mn-muted)}
.mn-checks .ck{color:var(--mn-live-ink);font-weight:700}
/* ---------- FAQ ----------
Real / so answers stay crawlable; the native
disclosure marker is replaced with a +/− on the right. */
.mn-faq{border-top:1px solid var(--mn-line)}
.mn-faq details{border-bottom:1px solid var(--mn-line)}
.mn-faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
padding:22px 4px;font-size:19px;line-height:1.35;color:var(--mn-ink);cursor:pointer;
list-style:none;font-weight:500}
.mn-faq summary::-webkit-details-marker{display:none}
.mn-faq summary::marker{content:""}
.mn-faq summary::after{content:"+";flex:none;font-family:var(--mn-mono);font-size:18px;
line-height:1.2;color:var(--mn-subtle);transition:transform .18s ease}
.mn-faq details[open] summary::after{content:"\2212"}
.mn-faq details[open] summary{color:var(--mn-blue)}
.mn-faq .ans{padding:0 4px 22px;font-size:15px;line-height:1.62;color:var(--mn-muted);max-width:78ch}
.mn-faq--tight summary{font-size:16px;padding:16px 4px}
.mn-faq--tight .ans{font-size:14px;padding-bottom:16px}
/* ---------- logo marquee ---------- */
/* edge fade so logos dissolve rather than clip — same mask the homepage uses */
.mn-marq{overflow:hidden;padding:26px 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mn-marq__lab{display:block;text-align:center;font-family:var(--mn-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mn-blue);margin-bottom:20px}
.mn-marq__track{display:flex;align-items:center;gap:64px;width:max-content;animation:mn-marq 55s linear infinite}
.mn-marq__track img{max-height:27px;max-width:132px;width:auto;object-fit:contain;filter:brightness(0);opacity:.6;user-select:none;-webkit-user-drag:none}
@keyframes mn-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mn-marq__track{animation:none}}
/* ---------- animated beam ---------- */
@property --mn-bb{syntax:'';initial-value:0deg;inherits:false}
.mn-beam{position:relative;isolation:isolate}
.mn-beam::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
background:conic-gradient(from var(--mn-bb),transparent 0deg,rgba(20,110,245,.85) 40deg,transparent 120deg);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
animation:mn-bb 5s linear infinite}
@keyframes mn-bb{to{--mn-bb:360deg}}
@media(prefers-reduced-motion:reduce){.mn-beam::before{animation:none}}
/* ---------- utilities ---------- */
.mn-center{text-align:center}
/* max-width children (.mn-sub, .mn-h1, .mn-h2) keep their own left margin,
so centring the text is not enough — centre the box too */
.mn-center>.mn-sub,.mn-center>.mn-h1,.mn-center>.mn-h2,.mn-center>p{margin-inline:auto}
.mn-mt-8{margin-top:8px}.mn-mt-16{margin-top:16px}.mn-mt-24{margin-top:24px}.mn-mt-40{margin-top:40px}
/* ============================================================
BLOG / ARTICLE
Styles both new .mn-* classes and the existing post markup
(.art-hero, .dek, .art-meta, .dtable, details/.ans, .pcard)
so an existing article body can be re-skinned unchanged.
============================================================ */
/* reading progress */
.mn-readbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
background:linear-gradient(90deg,var(--mn-blue-deep),var(--mn-blue-bright));transition:width .1s linear}
/* article shell */
.mn-art{max-width:760px;margin:0 auto;padding:0 var(--mn-gutter)}
.mn-art-wide{max-width:var(--mn-container);margin:0 auto;padding:0 var(--mn-gutter)}
.art-back,.mn-art-back{display:inline-flex;align-items:center;gap:7px;font-family:var(--mn-mono);font-size:12px;
color:var(--mn-blue);text-decoration:none;margin-bottom:26px}
.art-back:hover,.mn-art-back:hover{text-decoration:underline}
/* article hero */
.art-hero,.mn-art-hero{padding:14px 0 8px}
.art-hero .cat,.mn-art-hero .cat{display:inline-block;font-family:var(--mn-mono);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--mn-blue);font-weight:600;background:#e7effe;border-radius:999px;padding:6px 12px}
.art-hero h1,.mn-art-hero h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.035em;font-weight:700;
margin:18px 0 0;color:var(--mn-ink);text-wrap:balance}
.art-hero h1 em,.mn-art-hero h1 em{font-style:normal;background:var(--mn-g-head);-webkit-background-clip:text;
background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.dek,.mn-dek{font-size:18px;line-height:1.6;color:var(--mn-muted);margin:16px 0 0;max-width:68ch}
.art-meta,.mn-art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 0;
font-family:var(--mn-mono);font-size:12px;color:var(--mn-subtle)}
.art-meta b{color:var(--mn-ink);font-weight:600}
.art-meta .dot,.mn-art-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--mn-faint)}
.art-meta a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* on-this-page nav */
/* top must clear the sticky .mn-nav (~52px) or the "On this page" heading
and first link sit behind it */
.mn-toc{position:sticky;top:84px;align-self:start;font-size:13.5px;line-height:1.5;
max-height:calc(100vh - 108px);overflow-y:auto;scrollbar-width:thin}
.mn-toc-h{font-family:var(--mn-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
color:var(--mn-subtle);margin-bottom:12px}
.mn-toc a{display:block;padding:6px 0 6px 12px;border-left:2px solid var(--mn-line);
color:var(--mn-muted);text-decoration:none}
.mn-toc a:hover{color:var(--mn-ink);border-left-color:var(--mn-blue)}
.mn-toc a[aria-current="true"]{color:var(--mn-blue);border-left-color:var(--mn-blue);font-weight:600}
.mn-art-grid{display:grid;grid-template-columns:220px minmax(0,760px);gap:56px;justify-content:center;
max-width:var(--mn-container);margin:0 auto;padding:0 var(--mn-gutter)}
@media(max-width:1000px){.mn-art-grid{grid-template-columns:minmax(0,1fr)}.mn-art-grid .mn-toc{display:none}}
/* prose */
.mn-prose{font-size:17px;line-height:1.75;color:#33405c}
.mn-prose h2{font-size:clamp(24px,2.6vw,30px);line-height:1.2;letter-spacing:-.025em;font-weight:700;
color:var(--mn-ink);margin:52px 0 0;scroll-margin-top:80px}
.mn-prose h2 em{font-style:normal;background:var(--mn-g-head);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent}
.mn-prose h3{font-size:20px;line-height:1.3;font-weight:700;color:var(--mn-ink);margin:34px 0 0;scroll-margin-top:80px}
.mn-prose p{margin:16px 0 0}
.mn-prose ul,.mn-prose ol{margin:16px 0 0;padding-left:22px}
.mn-prose li{margin:8px 0}
.mn-prose li::marker{color:var(--mn-blue)}
.mn-prose a{color:var(--mn-blue-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.mn-prose a:hover{color:var(--mn-blue)}
.mn-prose strong{color:var(--mn-ink);font-weight:600}
.mn-prose hr{border:0;border-top:1px solid var(--mn-line);margin:44px 0}
.mn-prose figure{margin:28px 0 0}
.mn-prose figcaption{font-family:var(--mn-mono);font-size:11.5px;color:var(--mn-subtle);margin-top:9px;text-align:center}
.mn-prose img{max-width:100%;height:auto;border-radius:12px}
/* key takeaways / callout */
.mn-takeaways{background:var(--mn-g-band);border-radius:16px;padding:26px 28px;margin:32px 0 0}
.mn-takeaways h2{margin:0 0 4px;font-size:20px}
.mn-takeaways ul{margin:12px 0 0;padding-left:20px}
.mn-takeaways li{color:#2b3550}
.mn-callout{border-left:3px solid var(--mn-blue);background:rgba(20,110,245,.06);padding:16px 18px;
border-radius:0 12px 12px 0;margin:26px 0 0;font-size:15.5px;color:var(--mn-muted)}
.mn-callout b{color:var(--mn-ink)}
.mn-callout--warn{border-left-color:var(--mn-warn);background:rgba(232,113,10,.08)}
/* pull quote */
.mn-pull{margin:34px 0 0;padding:22px 26px;border-radius:16px;background:var(--mn-panel);color:var(--mn-panel-ink)}
.mn-pull p{margin:0;font-size:18px;line-height:1.55;font-style:italic;color:#dfe3ea}
.mn-pull cite{display:block;margin-top:12px;font-family:var(--mn-mono);font-size:11px;font-style:normal;color:var(--mn-panel-faint)}
/* data table */
.dtable-wrap,.mn-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:28px 0 0;
border:1px solid var(--mn-line);border-radius:14px;background:#fff}
.dtable,.mn-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.dtable th,.mn-table th{text-align:left;font-family:var(--mn-mono);font-size:10px;letter-spacing:.09em;
text-transform:uppercase;color:var(--mn-subtle);font-weight:600;padding:14px 16px;
background:var(--mn-sunken);border-bottom:1px solid var(--mn-line);white-space:nowrap}
.dtable td,.mn-table td{padding:14px 16px;border-bottom:1px solid var(--mn-line-soft);color:var(--mn-muted);vertical-align:top}
.dtable tr:last-child td,.mn-table tr:last-child td{border-bottom:0}
.dtable td:first-child,.mn-table td:first-child{color:var(--mn-ink);font-weight:600}
.dtable tbody tr:hover,.mn-table tbody tr:hover{background:#fafbfe}
.mn-table td.num,.dtable td.num{font-variant-numeric:tabular-nums;text-align:right}
/* article FAQ — same markup as the site's existing posts */
.mn-prose details,.mn-faq details{border-bottom:1px solid var(--mn-line)}
.mn-prose summary{font-size:17px;font-weight:600;color:var(--mn-ink);padding:18px 4px;cursor:pointer;
list-style:none;display:flex;justify-content:space-between;gap:16px}
.mn-prose summary::-webkit-details-marker{display:none}
.mn-prose summary .pm{color:var(--mn-subtle);font-weight:400}
.mn-prose details[open] summary .pm{transform:rotate(45deg)}
.mn-prose .ans{font-size:15.5px;line-height:1.7;color:var(--mn-muted);padding:0 4px 20px;max-width:76ch}
/* author box */
.mn-author{display:flex;gap:16px;align-items:center;margin:44px 0 0;padding:22px;border:1px solid var(--mn-line);
border-radius:16px;background:#fff}
.mn-author img{width:56px;height:56px;border-radius:50%;flex:none;object-fit:cover}
.mn-author b{display:block;font-size:15px;color:var(--mn-ink)}
.mn-author span{display:block;font-size:13.5px;color:var(--mn-muted);margin-top:3px}
.mn-author a{color:var(--mn-blue);text-decoration:none;font-family:var(--mn-mono);font-size:12px}
/* testimonial card (existing .pcard markup) */
.pcard,.mn-pcard{background:#fff;border:1px solid var(--mn-line);border-radius:16px;padding:22px;margin:0;
box-shadow:var(--mn-e-frost)}
.pcard blockquote,.mn-pcard blockquote{margin:0;font-size:15px;line-height:1.6;color:#33405c}
.pcard figcaption,.mn-pcard figcaption{display:flex;align-items:center;gap:11px;margin-top:16px}
.pcard figcaption img,.mn-pcard figcaption img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.who,.mn-who{font-size:13px;line-height:1.4}
.who b,.mn-who b{display:block;color:var(--mn-ink)}
.who span,.mn-who span{color:var(--mn-subtle);font-size:12px}
/* related posts */
.mn-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
@media(max-width:860px){.mn-related{grid-template-columns:1fr}}
.mn-rcard{display:block;padding:20px;border:1px solid var(--mn-line);border-radius:14px;background:#fff;
text-decoration:none;transition:border-color .16s ease,transform .16s ease}
.mn-rcard:hover{border-color:var(--mn-blue);transform:translateY(-2px)}
.mn-rcard .k{font-family:var(--mn-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mn-blue)}
.mn-rcard b{display:block;margin-top:9px;font-size:15.5px;line-height:1.35;color:var(--mn-ink)}
.mn-rcard span{display:block;margin-top:8px;font-size:13px;color:var(--mn-muted)}
/* end-of-article CTA */
.mn-artcta{margin:52px 0 0;padding:34px 30px;border-radius:20px;background:var(--mn-g-band);text-align:center}
.mn-artcta h2{margin:0;font-size:26px;letter-spacing:-.03em;font-weight:700;color:var(--mn-ink)}
.mn-artcta p{margin:10px auto 0;max-width:56ch;color:var(--mn-muted);font-size:15.5px}
.mn-artcta .mn-btn{margin-top:22px}
/* ============================================================
DOCS (works with the existing docs markup + docs.js)
============================================================ */
.mn-doc-layout{display:grid;grid-template-columns:262px minmax(0,1fr);gap:48px;
max-width:var(--mn-container);margin:0 auto;padding:0 var(--mn-gutter)}
@media(max-width:960px){.mn-doc-layout{grid-template-columns:1fr}.doc-sidebar{display:none}}
.doc-sidebar{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow-y:auto;
padding:22px 0 40px;font-size:14px}
.sb-section{margin-bottom:4px}
.sb-toggle{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;cursor:pointer;
padding:9px 10px;border-radius:8px;font-family:var(--mn-sans);font-size:13.5px;font-weight:600;
color:var(--mn-ink);text-align:left}
.sb-toggle:hover{background:var(--mn-sunken)}
.sb-chevron{width:14px;height:14px;flex:none;color:var(--mn-subtle);transition:transform .18s ease}
.sb-toggle[aria-expanded="true"] .sb-chevron{transform:rotate(90deg);color:var(--mn-blue)}
.sb-pages{list-style:none;margin:2px 0 10px;padding:0 0 0 12px;border-left:1px solid var(--mn-line)}
.sb-pages li{margin:0}
.sb-pages a{display:block;padding:7px 10px;border-radius:7px;color:var(--mn-muted);text-decoration:none;font-size:13.5px;line-height:1.4}
.sb-pages a:hover{color:var(--mn-ink);background:var(--mn-sunken)}
.sb-pages a[aria-current="page"],.sb-pages a.is-active{color:var(--mn-blue);background:#e7effe;font-weight:600}
.doc-crumbs{display:flex;align-items:center;gap:8px;font-family:var(--mn-mono);font-size:11.5px;
color:var(--mn-subtle);padding:26px 0 0;flex-wrap:wrap}
.doc-crumbs a{color:var(--mn-subtle);text-decoration:none}
.doc-crumbs a:hover{color:var(--mn-blue)}
.doc-crumbs .sep svg{width:12px;height:12px;display:block;opacity:.6}
.mn-doc h1{font-size:clamp(28px,3.4vw,38px);line-height:1.15;letter-spacing:-.03em;font-weight:700;
margin:16px 0 0;color:var(--mn-ink)}
.mn-doc .doc-lede,.mn-doc .lede{font-size:17px;line-height:1.6;color:var(--mn-muted);margin:14px 0 0;max-width:68ch}
.doc-pager{display:flex;gap:16px;justify-content:space-between;margin:56px 0 0;padding-top:26px;
border-top:1px solid var(--mn-line)}
.pager-spacer{flex:1}
.doc-pager a{display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--mn-line);
border-radius:14px;text-decoration:none;background:#fff;transition:border-color .16s ease,transform .16s ease}
.doc-pager a:hover{border-color:var(--mn-blue);transform:translateY(-2px)}
.pager-dir{font-family:var(--mn-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mn-blue)}
.pager-label{font-size:14.5px;font-weight:600;color:var(--mn-ink);margin-top:4px}
.doc-pager svg{width:16px;height:16px;color:var(--mn-subtle);flex:none}
/* ============================================================
LEGAL / long-form prose pages
============================================================ */
.mn-legal{max-width:760px;margin:0 auto;padding:0 var(--mn-gutter)}
.mn-legal h1{font-size:clamp(28px,3.4vw,38px);line-height:1.15;letter-spacing:-.03em;font-weight:700;color:var(--mn-ink);margin:0}
.mn-legal .updated{font-family:var(--mn-mono);font-size:12px;color:var(--mn-subtle);margin:12px 0 0}
/* docs sidebar brand link — the source markup leaves it inline, which
inherits a stray line box from docs.css and pushes the nav down */
.doc-sidebar{line-height:1.5}
.doc-sidebar .sb-brand{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:0 10px;
font-size:14px;font-weight:700;color:var(--mn-ink);text-decoration:none;line-height:1.3}
.doc-sidebar .sb-brand:hover{color:var(--mn-blue)}
.doc-sidebar > nav{display:block}
/* ============================================================
ROSTER CARD THUMBNAIL (.mn-thumb)
measured: 120×96, #fff, r8, pad 9, gap 5,
shadow 0 8px 20px -10px rgba(20,40,90,.4)
Bars are primitives you combine — see the presets below.
============================================================ */
.mn-thumb{width:120px;height:96px;flex:none;display:flex;flex-direction:column;gap:5px;
padding:9px;border-radius:8px;background:#fff;box-shadow:0 8px 20px -10px rgba(20,40,90,.4)}
.mn-thumb i{display:block;height:7px;width:100%;border-radius:3px;background:#E7ECF5}
.mn-thumb i.h{height:16px;width:70px;background:#111} /* headline block */
.mn-thumb i.b{height:7px;width:55px;background:var(--mn-blue)} /* accent bar */
.mn-thumb i.g{height:34px;width:100%;background:linear-gradient(120deg,#8FB4FF,#C7B7F7)} /* media */
.mn-thumb i.s{width:70%}
.mn-thumb i.xs{width:45%}
.mn-thumb i.dark{background:#111}
.mn-thumb i.mint{background:linear-gradient(120deg,#C9ECE0,#8FD3B6)}
.mn-thumb i.warm{background:linear-gradient(120deg,#F7D9B0,#F4A94F)}
.mn-thumb i.violet{background:linear-gradient(120deg,#EDE6FF,#B9A6F5)}
.mn-thumb--center{justify-content:center}
.mn-thumb--sm{width:96px;height:78px}
.mn-thumb--lg{width:140px;height:110px}
/* roster card = frosted card, centred, with a thumbnail */
.mn-rostercard{display:flex;align-items:center;gap:16px;padding:28px 26px;border-radius:14px;
background:var(--mn-frost-bg);border:1px solid var(--mn-frost-border);
-webkit-backdrop-filter:var(--mn-frost-blur);backdrop-filter:var(--mn-frost-blur);
box-shadow:var(--mn-e-frost)}
.mn-rostercard .tx{flex:1;min-width:0}
.mn-rostercard h3,.mn-rostercard .mn-card__title{margin:0;font-size:18px;font-weight:700;
line-height:1.2;color:var(--mn-ink-card)}
.mn-rostercard p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--mn-muted-card)}
@media(max-width:620px){.mn-rostercard{padding:20px 18px;gap:12px}.mn-thumb{width:96px;height:78px}}
/* ============================================================
FIGURE TILE (.mn-fig) — gradient tile + dark panel + caption
measured: r14, pad 30px 22px, overflow hidden, caption 14.5px
============================================================ */
.mn-figgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.mn-figgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.mn-figgrid,.mn-figgrid--2{grid-template-columns:1fr}}
/* stretch so the tile absorbs the row height and captions line up even when
they wrap to different line counts */
.mn-fig{margin:0;display:flex;flex-direction:column}
.mn-fig>.mn-fig__tile{flex:1}
.mn-fig__tile{display:flex;border-radius:14px;padding:30px 22px;overflow:hidden;
background:var(--mn-g-tile)}
.mn-fig figcaption,.mn-fig__cap{margin-top:14px;text-align:center;font-family:var(--mn-sans);
font-size:14.5px;color:#5a6270}
/* diagonal split — the navy variant cuts at 38% */
.mn-fig__tile--navy{background:linear-gradient(105deg,#0E1E5E 0 38%,#E9ECF4 38% 100%)}
.mn-fig__tile--indigo{background:var(--mn-g-tile-indigo)}
.mn-fig__tile--mint{background:var(--mn-g-tile-mint)}
.mn-fig__tile--violet{background:var(--mn-g-tile-violet)}
.mn-fig__tile--warm{background:var(--mn-g-tile-warm)}
.mn-fig__tile--dusk{background:linear-gradient(165deg,#F0E6FF 0%,#B79EF2 40%,#4F2FB8 100%)}
.mn-fig__tile--sky{background:linear-gradient(150deg,#DBE9FF 0%,#5EA0F2 55%,#1D5FD6 100%)}
/* ============================================================
DASHBOARD TILE (.mn-dash) — wide gradient tile, app-style panel
============================================================ */
.mn-dash{display:flex;border-radius:20px;padding:34px 30px;background:var(--mn-g-tile);
box-shadow:var(--mn-e-tile)}
.mn-dash--sky{background:linear-gradient(150deg,#DBE9FF 0%,#5EA0F2 55%,#1D5FD6 100%)}
.mn-dash--split{background:linear-gradient(105deg,#0E1E5E 0 38%,#E9ECF4 38% 100%)}
.mn-dash__app{flex:1;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;
padding:16px;border-radius:14px;background:#0e1116;border:1px solid var(--mn-panel-line)}
@media(max-width:900px){.mn-dash__app{grid-template-columns:1fr}.mn-dash{padding:20px 16px}}
.mn-pane{background:#17181c;border:1px solid var(--mn-panel-line);border-radius:10px;padding:14px}
.mn-pane h4{margin:0 0 4px;font-size:14px;font-weight:700;color:#fff}
.mn-pane p{margin:0 0 12px;font-size:11.5px;line-height:1.5;color:var(--mn-panel-faint)}
/* panel content patterns ------------------------------------ */
.mn-accept{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:11.5px;color:var(--mn-panel-muted)}
.mn-accept .sw{width:18px;height:18px;border-radius:5px;flex:none;background:var(--mn-blue)}
.mn-accept .sw.orange{background:#F4A94F}
.mn-accept .sw.mint{background:#5CD6AE}
.mn-accept .sw.violet{background:#B9A6F5}
.mn-accept .btn{margin-left:auto;flex:none;padding:4px 9px;border-radius:6px;border:1px solid #2a2f39;
background:#20242c;color:#dfe3ea;font-family:var(--mn-mono);font-size:9.5px}
.mn-tabs{display:flex;gap:16px;margin-bottom:12px;border-bottom:1px solid var(--mn-panel-rule)}
.mn-tabs button{background:none;border:0;padding:0 0 8px;font-family:var(--mn-sans);font-size:12px;
color:var(--mn-panel-faint);cursor:pointer}
.mn-tabs button[aria-selected="true"]{color:#fff;box-shadow:inset 0 -2px 0 var(--mn-blue)}
.mn-matrix{display:grid;gap:8px;font-size:11px}
.mn-matrix .r{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:8px;align-items:center}
.mn-matrix .lab{color:var(--mn-panel-muted)}
.mn-matrix .cell{padding:6px 8px;border-radius:6px;text-align:center;font-family:var(--mn-mono);
font-size:10.5px;color:#cfe0ff;background:#16243f}
.mn-matrix .cell.hi{background:var(--mn-blue);color:#fff}
.mn-matrix .cell.mid{background:#1b3358}
.mn-code{margin:0;padding:12px;border-radius:8px;background:#0b0d11;border:1px solid var(--mn-panel-line);
font-family:var(--mn-mono);font-size:10.5px;line-height:1.65;color:#c7cdd6;overflow-x:auto}
.mn-code .k{color:#8FB4FF}
.mn-code .s{color:#7FD6A9}
.mn-list{display:flex;flex-direction:column}
.mn-list a,.mn-list div{padding:9px 0;border-bottom:1px solid var(--mn-panel-rule);font-size:12px;
color:var(--mn-panel-muted);text-decoration:none}
.mn-list .muted{color:#5f6b7a}
.mn-spark{width:100%;height:70px;display:block}
/* ============================================================
COMPONENTS FROM THE FULL PAGE (home-standalone-v2)
Sections that were trimmed from the live homepage but whose
components are still worth having. Values measured.
============================================================ */
/* --- sequence rule: thin track + filled portion above a heading ---
used for Track / Analyze / Optimize style progressions */
.mn-seq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
@media(max-width:860px){.mn-seq{grid-template-columns:1fr;gap:28px}}
.mn-seq__rule{height:3px;border-radius:99px;background:#E7EBF2;overflow:hidden;margin-bottom:26px}
.mn-seq__rule i{display:block;height:100%;border-radius:99px;background:var(--mn-blue);width:60%}
.mn-seq h3{margin:0;font-size:34px;font-weight:700;letter-spacing:-.035em;color:#111}
.mn-seq p{margin:18px 0 0;font-size:17.5px;line-height:1.55;color:#3A4150}
/* animate the three rules in sequence */
.mn-seq--auto .mn-seq__rule i{width:0;animation:mn-fill 6s linear infinite}
.mn-seq--auto > *:nth-child(2) .mn-seq__rule i{animation-delay:2s}
.mn-seq--auto > *:nth-child(3) .mn-seq__rule i{animation-delay:4s}
@keyframes mn-fill{0%{width:0}33%{width:100%}100%{width:100%}}
@media(prefers-reduced-motion:reduce){.mn-seq--auto .mn-seq__rule i{animation:none;width:60%}}
/* --- directory grid: label + large link list (mega-menu style) --- */
.mn-dir{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
@media(max-width:960px){.mn-dir{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mn-dir{grid-template-columns:1fr}}
.mn-dir__lab{font-size:15px;color:#8b93a5;margin:0 0 18px}
.mn-dir a{display:block;font-size:30px;font-weight:500;letter-spacing:-.02em;color:#111;
text-decoration:none;padding:9px 0;transition:color .16s ease}
.mn-dir a:hover{color:var(--mn-blue)}
.mn-dir a .tag{margin-left:8px;font-family:var(--mn-mono);font-size:10px;letter-spacing:.06em;
text-transform:uppercase;color:var(--mn-blue);vertical-align:middle}
.mn-dir--sm a{font-size:22px}
/* --- flat cards on a light ground (bento / answer / feature) --- */
.mn-fcard{background:#FAFAFA;border:1px solid #EBEBEB;border-radius:12px;padding:26px}
.mn-fcard h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em;color:#111}
.mn-fcard p{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:#4d4d4d}
.mn-fcard--lg{padding:34px;border-radius:16px}
.mn-fcard--tint{background:#F6F8FC;border-color:var(--mn-line)}
.mn-fcard--dark{background:var(--mn-panel);border-color:var(--mn-panel-line);color:var(--mn-panel-ink)}
.mn-fcard--dark h3{color:#fff}
.mn-fcard--dark p{color:var(--mn-panel-muted)}
/* answer card — a quoted engine answer */
.mn-anscard{background:#FAFAFA;border:1px solid #EBEBEB;border-radius:16px;padding:18px 18px 16px}
.mn-anscard__hd{display:flex;align-items:center;gap:8px;font-family:var(--mn-mono);font-size:10px;
letter-spacing:.08em;text-transform:uppercase;color:var(--mn-subtle);margin-bottom:10px}
.mn-anscard__hd .dot{width:7px;height:7px;border-radius:50%;background:var(--mn-blue)}
.mn-anscard p{margin:0;font-size:14.5px;line-height:1.6;color:#2b3550}
.mn-anscard mark{background:#DCEEE4;color:#14532d;border-radius:3px;padding:1px 3px}
.mn-anscard__ft{display:flex;justify-content:space-between;align-items:center;margin-top:14px;
padding-top:12px;border-top:1px solid #EBEBEB;font-family:var(--mn-mono);font-size:11px;color:var(--mn-subtle)}
.mn-anscard__ft .up{color:var(--mn-live-ink);font-weight:600}
/* --- bento grid: mixed spans on one row --- */
.mn-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
@media(max-width:900px){.mn-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mn-bento{grid-template-columns:1fr}}
.mn-bento .s2{grid-column:span 2}
.mn-bento .s3{grid-column:span 3}
.mn-bento .s4{grid-column:span 4}
.mn-bento .s6{grid-column:span 6}
@media(max-width:900px){.mn-bento .s2,.mn-bento .s3,.mn-bento .s4,.mn-bento .s6{grid-column:span 1}}
/* --- numbered steps --- */
.mn-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media(max-width:900px){.mn-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.mn-steps{grid-template-columns:1fr}}
.mn-step__n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
border-radius:50%;background:#E7EFFE;color:var(--mn-blue);font-family:var(--mn-mono);font-size:12px;font-weight:600}
.mn-steps h3{margin:14px 0 0;font-size:18px;font-weight:700;color:var(--mn-ink-card)}
.mn-steps p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--mn-muted)}
/* --- engine chip row (light) --- */
.mn-engines{display:flex;flex-wrap:wrap;gap:8px}
.mn-engine{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
border:1px solid var(--mn-line);background:#fff;font-size:12.5px;color:var(--mn-ink-card)}
.mn-engine svg,.mn-engine img{width:15px;height:15px;flex:none}
.mn-engine .caret{color:var(--mn-subtle);font-size:9px}
/* --- KPI / impact card --- */
.mn-kpi{border-radius:16px;padding:24px;background:var(--mn-g-tile);color:#fff}
.mn-kpi .k{font-family:var(--mn-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.mn-kpi .v{font-size:38px;font-weight:700;letter-spacing:-.03em;margin-top:6px}
.mn-kpi p{margin:8px 0 0;font-size:13.5px;line-height:1.5;opacity:.9}
.mn-kpi--mint{background:var(--mn-g-tile-mint);color:#0e2a22}
.mn-kpi--violet{background:var(--mn-g-tile-violet);color:#1e1240}
.mn-kpi--navy{background:var(--mn-g-tile-navy)}
.mn-kpi--warm{background:var(--mn-g-tile-warm);color:#4a2c07}
.mn-kpi--flat{background:#FAFAFA;border:1px solid #EBEBEB;color:var(--mn-ink-card)}
/* ============================================================
SECTION COMPONENTS (from the full page)
============================================================ */
/* --- asymmetric bento: one tall card + stacked cards --------- */
.mn-bentofeat{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.mn-bentofeat > .col{display:grid;gap:20px;align-content:start}
@media(max-width:900px){.mn-bentofeat{grid-template-columns:1fr}}
.mn-bcard{background:#FAFAFA;border:1px solid #EBEBEB;border-radius:18px;padding:26px;display:flex;
flex-direction:column;position:relative;overflow:hidden}
.mn-bcard h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;color:#111}
.mn-bcard p{margin:9px 0 0;font-size:14.5px;line-height:1.6;color:#4d4d4d}
.mn-bcard .foot{margin-top:auto;padding-top:22px}
.mn-bcard--tall{min-height:470px}
.mn-bcard--glow{background:linear-gradient(180deg,#fff 0%,#F7FAFF 100%)}
/* engine icon row */
.mn-iconrow{display:flex;gap:10px;flex-wrap:wrap}
.mn-iconrow span{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
background:#fff;border:1px solid var(--mn-line);box-shadow:0 2px 8px -4px rgba(20,40,90,.25)}
.mn-iconrow span.on{border-color:#BBD4FF;box-shadow:0 0 0 3px rgba(20,110,245,.10)}
.mn-iconrow svg,.mn-iconrow img{width:18px;height:18px}
.mn-iconnote{margin-top:14px;font-family:var(--mn-mono);font-size:12px;color:var(--mn-subtle)}
.mn-iconnote b{color:var(--mn-blue)}
/* gradient bar chart */
.mn-bars{display:flex;align-items:flex-end;gap:14px;height:120px}
.mn-bars i{flex:1;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#3E8BF7 0%,#DCE9FF 100%)}
/* dot list */
.mn-dotlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.mn-dotlist li{display:flex;align-items:center;gap:10px;font-family:var(--mn-mono);font-size:13px;color:#3a4150}
.mn-dotlist li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mn-live-ink);flex:none}
/* --- area chart with endpoint marker ------------------------- */
.mn-areacard{background:#FAFAFA;border:1px solid #EBEBEB;border-radius:18px;padding:28px}
.mn-areacard h3{margin:0;font-size:20px;font-weight:700;color:#111}
.mn-areacard p{margin:9px 0 22px;font-size:14.5px;line-height:1.6;color:#4d4d4d;max-width:52ch}
.mn-area{position:relative}
.mn-area svg{width:100%;height:230px;display:block;overflow:visible}
.mn-area .axis{display:flex;justify-content:space-between;margin-top:10px;font-family:var(--mn-mono);
font-size:11px;color:var(--mn-faint)}
.mn-area .tag{position:absolute;right:0;top:4%;font-family:var(--mn-mono);font-size:13px;font-weight:600;color:var(--mn-blue)}
/* --- answer card rail (marquee of engine answers) ------------ */
.mn-ansrail{display:flex;gap:16px;overflow:hidden;padding:2px}
.mn-ansrail > *{flex:0 0 320px}
.mn-ansrail--scroll{overflow-x:auto;scroll-snap-type:x proximity}
.mn-ansrail--scroll > *{scroll-snap-align:start}
/* cards are a fixed 320px in a clipped rail, so on mobile the 2nd one just vanishes.
stack instead of adding scroll-snap — snap on a rail is what caused the NO_LCP
regression on the article pages. */
@media(max-width:720px){.mn-ansrail{flex-wrap:wrap}.mn-ansrail>*{flex:1 1 100%}}
.mn-anscard em{font-style:italic;color:var(--mn-blue)}
/* --- link rows with arrow ------------------------------------ */
.mn-linkrows{border-top:1px solid var(--mn-line)}
.mn-linkrows a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0;
border-bottom:1px solid var(--mn-line);text-decoration:none;color:#111;font-size:17px;
transition:color .16s ease,padding-left .16s ease}
.mn-linkrows a:hover{color:var(--mn-blue);padding-left:6px}
.mn-linkrows a .arw{flex:none;color:var(--mn-subtle)}
.mn-linkrows a:hover .arw{color:var(--mn-blue)}
.mn-sectionsplit{display:grid;grid-template-columns:200px 1fr;gap:40px}
@media(max-width:820px){.mn-sectionsplit{grid-template-columns:1fr;gap:18px}}
.mn-sectionsplit .lab{font-size:16px;color:var(--mn-subtle)}
/* --- big nav tiles ------------------------------------------- */
.mn-navtiles{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.mn-navtiles{grid-template-columns:1fr}}
.mn-navtile{display:block;position:relative;overflow:hidden;border-radius:14px;padding:30px 32px;
min-height:150px;text-decoration:none;color:#fff;background:linear-gradient(120deg,#2C6BE8 0%,#123FA8 100%)}
.mn-navtile h3{margin:0;font-size:30px;font-weight:700;letter-spacing:-.025em}
.mn-navtile p{margin:8px 0 0;font-size:14.5px;opacity:.85}
.mn-navtile--dark{background:radial-gradient(120% 120% at 80% 20%,#1E4FBF 0%,#05070C 62%)}
.mn-navtile--mint{background:linear-gradient(120deg,#2EA583 0%,#0E3B30 100%)}
.mn-navtile:hover h3{transform:translateX(2px);transition:transform .18s ease}
/* --- showcase carousel band ---------------------------------- */
.mn-showcase{position:relative;border-radius:22px;padding:44px;color:#fff;
background:linear-gradient(120deg,#2C6BE8 0%,#6C63E8 100%)}
.mn-showcase__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center}
@media(max-width:900px){.mn-showcase{padding:26px}.mn-showcase__grid{grid-template-columns:1fr;gap:24px}}
.mn-showcase h3{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em}
.mn-showcase p{margin:14px 0 0;font-size:15.5px;line-height:1.6;opacity:.92}
.mn-showcase .link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:#fff;
font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px}
.mn-showcase__stage{background:#111;border-radius:14px;min-height:300px;display:flex;align-items:center;
justify-content:center;gap:16px;padding:24px}
.mn-minicard{width:170px;background:#fff;border-radius:10px;padding:12px;box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.mn-minicard .tag{display:inline-block;font-family:var(--mn-mono);font-size:9.5px;background:#F1F4F9;
border-radius:5px;padding:3px 7px;color:#414b60;margin-bottom:10px}
.mn-minicard i{display:block;height:7px;border-radius:3px;background:#E7ECF5;margin:5px 0}
.mn-minicard i.h{height:11px;width:75%;background:#111}
.mn-minicard i.b{background:var(--mn-blue);width:55%}
.mn-minicard--dark{background:#17181c}
.mn-minicard--dark i{background:#2a2f39}
.mn-minicard--dark .tag{background:#20242c;color:#c7cdd6}
.mn-carctrl{position:absolute;bottom:22px;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center}
.mn-carctrl--prev{left:22px}
.mn-carctrl--next{right:22px;background:#fff;color:#111}
.mn-dots{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.mn-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45)}
.mn-dots i.on{background:#fff}
/* --- numbered step rows -------------------------------------- */
.mn-steprows{border-top:1px solid var(--mn-line)}
.mn-steprows > div{padding:26px 0;border-bottom:1px solid var(--mn-line)}
.mn-steprows h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;color:#111;
display:flex;align-items:baseline;gap:12px}
.mn-steprows h3 .n{color:var(--mn-blue);font-size:22px;font-weight:700}
.mn-steprows p{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:#4d4d4d;max-width:62ch}
.mn-steprows .link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:#111;
font-weight:600;font-size:14.5px;text-decoration:none;border-bottom:1px solid #111;padding-bottom:2px}
/* --- prompt cards (dark gradient + floating input) ----------- */
.mn-promptcard{position:relative;border-radius:14px;min-height:330px;padding:18px;display:flex;
flex-direction:column;justify-content:space-between;overflow:hidden;
background:linear-gradient(180deg,#0B1B36 0%,#2D6BE0 100%)}
.mn-promptcard--dark{background:radial-gradient(120% 100% at 70% 20%,#243B6B 0%,#05070C 70%)}
.mn-promptcard--light{background:linear-gradient(180deg,#12305E 0%,#7FB0FF 100%)}
.mn-promptcard__badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
padding:5px 10px;border-radius:7px;background:rgba(255,255,255,.14);color:#dfe9ff;
font-family:var(--mn-mono);font-size:10px}
.mn-promptcard__stats{display:flex;gap:26px;color:#fff}
.mn-promptcard__stats .k{font-size:11.5px;opacity:.8}
.mn-promptcard__stats .v{font-size:26px;font-weight:700;margin-top:2px}
.mn-promptbox{background:#fff;border-radius:12px;padding:14px;box-shadow:0 14px 34px -18px rgba(0,0,0,.6)}
.mn-promptbox p{margin:0;font-size:14.5px;line-height:1.45;color:#111;font-weight:500}
.mn-promptbox .row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;
font-family:var(--mn-mono);font-size:11px;color:var(--mn-subtle)}
.mn-promptbox .go{width:30px;height:30px;border-radius:50%;background:var(--mn-blue);color:#fff;
display:flex;align-items:center;justify-content:center;flex:none}
/* --- feature card with floating UI stack --------------------- */
.mn-featstack{position:relative;background:#fff;border:1px solid var(--mn-line);border-radius:18px;
padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;overflow:hidden}
@media(max-width:900px){.mn-featstack{grid-template-columns:1fr}}
.mn-featstack .badge{display:inline-block;padding:5px 10px;border-radius:6px;background:var(--mn-blue);
color:#fff;font-family:var(--mn-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.mn-featstack .badge--reddit{background:#FF4500}
.mn-featstack h3{margin:16px 0 0;font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:#111}
.mn-featstack .handle{margin:12px 0 0;font-size:16px;color:#111;font-weight:600}
.mn-featstack p{margin:14px 0 0;font-size:15px;line-height:1.6;color:#4d4d4d}
.mn-uipanel{background:#17181c;border-radius:12px;padding:16px;color:#e7e9ee;
box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
.mn-uipanel h4{margin:0 0 10px;font-size:15px;font-weight:700;color:#fff;line-height:1.3}
.mn-uipanel .bar{height:8px;border-radius:4px;background:#2a2f39;margin:7px 0}
.mn-uipanel--float{position:relative;margin-top:-40px;margin-left:24px;z-index:2}
.mn-uibtnrow{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.mn-uibtn{padding:6px 12px;border-radius:7px;font-size:12px;border:1px solid #2a2f39;background:#20242c;color:#dfe3ea}
.mn-uibtn--primary{background:var(--mn-blue);border-color:var(--mn-blue);color:#fff}
/* --- expandable insight cards -------------------------------- */
.mn-insight{position:relative;border-radius:18px;padding:24px;min-height:420px;display:flex;
flex-direction:column;justify-content:flex-end;overflow:hidden;background:#F2F2F0}
.mn-insight--dark{background:radial-gradient(120% 90% at 30% 20%,#3A2318 0%,#0B0A09 70%);color:#fff}
.mn-insight--amber{background:radial-gradient(120% 90% at 70% 25%,#C9861F 0%,#0B0A09 72%);color:#fff}
.mn-insight h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.mn-insight p{margin:10px 0 0;font-size:14px;line-height:1.55;opacity:.85;max-width:44ch}
.mn-insight__toggle{position:absolute;right:20px;bottom:20px;width:34px;height:34px;border-radius:50%;
border:0;cursor:pointer;background:var(--mn-blue);color:#fff;font-size:18px;line-height:1;
display:flex;align-items:center;justify-content:center}
.mn-insight--dark .mn-insight__toggle,.mn-insight--amber .mn-insight__toggle{background:rgba(255,255,255,.16)}
.mn-insight__badge{position:absolute;top:20px;left:20px;padding:5px 10px;border-radius:6px;
background:var(--mn-blue);color:#fff;font-family:var(--mn-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
/* --- dark action band (diagonal split) ----------------------- */
.mn-actionband{position:relative;overflow:hidden;border-radius:20px;padding:48px 44px;color:#fff;
background:linear-gradient(105deg,#1B3572 0%,#1B3572 34%,#12151C 34%,#12151C 100%)}
@media(max-width:820px){.mn-actionband{padding:28px 22px;background:linear-gradient(160deg,#1B3572 0%,#12151C 60%)}}
.mn-actionband h2{margin:0;font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;color:#fff}
.mn-actionband p{margin:14px 0 24px;font-size:16px;line-height:1.6;color:#c8cfdd;max-width:62ch}
.mn-kpirow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:820px){.mn-kpirow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mn-kpitile{background:#17181c;border:1px solid var(--mn-panel-line);border-radius:10px;padding:14px}
.mn-kpitile .k{font-family:var(--mn-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mn-panel-faint)}
.mn-kpitile .v{font-size:24px;font-weight:700;color:#fff;margin-top:6px}
.mn-kpitile .up{font-size:11px;color:var(--mn-live);margin-left:6px;font-weight:600}
/* --- ring gauge, toggles, score bar, tracked list ------------ */
.mn-ring{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.mn-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.mn-ring .num{font-size:40px;font-weight:700;color:#fff;line-height:1}
.mn-ring .cap{font-family:var(--mn-mono);font-size:9px;color:var(--mn-panel-faint);margin-top:4px}
.mn-toggles{background:#fff;border-radius:12px;padding:16px;box-shadow:0 18px 44px -22px rgba(15,25,55,.5)}
.mn-toggles h4{margin:0 0 12px;font-size:15px;font-weight:700;color:#111}
.mn-togglerow{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:13.5px;color:#3a4150}
.mn-switch{width:34px;height:19px;border-radius:99px;background:var(--mn-blue);position:relative;flex:none}
.mn-switch::after{content:"";position:absolute;top:2px;left:17px;width:15px;height:15px;border-radius:50%;background:#fff}
.mn-switch--off{background:#D8DEE9}
.mn-switch--off::after{left:2px}
.mn-togglerow .st{font-family:var(--mn-mono);font-size:11px;color:var(--mn-subtle);width:22px;flex:none}
.mn-scorebar{background:#17181c;border:1px solid var(--mn-panel-line);border-radius:10px;padding:16px}
.mn-scorebar .k{font-family:var(--mn-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mn-panel-faint)}
.mn-scorebar .v{font-size:34px;font-weight:700;color:#fff;margin:6px 0 12px}
.mn-scorebar .v small{font-size:14px;color:var(--mn-panel-faint);font-weight:400}
.mn-scorebar .track{height:7px;border-radius:99px;background:#2a2f39;overflow:hidden}
.mn-scorebar .track i{display:block;height:100%;background:var(--mn-blue);border-radius:99px}
.mn-tracked{background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 18px 44px -22px rgba(15,25,55,.5)}
.mn-tracked h4{margin:0 0 10px;font-size:14px;font-weight:700;color:#111}
.mn-tracked .row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F0F3F8;font-size:13px;color:#3a4150}
.mn-tracked .row:last-child{border-bottom:0}
.mn-tracked .st{margin-left:auto;font-family:var(--mn-mono);font-size:10.5px;color:var(--mn-blue)}
/* --- accordion rows ------------------------------------------ */
.mn-accordion > div{border-bottom:1px solid var(--mn-line);padding:20px 0}
.mn-accordion .open{border:1px solid var(--mn-blue);border-radius:12px;padding:20px 22px;
box-shadow:inset 0 3px 0 var(--mn-blue)}
.mn-accordion h3{margin:0;font-size:18px;font-weight:700;color:#111}
.mn-accordion .closed h3{color:var(--mn-subtle);font-weight:600}
.mn-accordion p{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:#4d4d4d}
/* --- waveform ------------------------------------------------ */
.mn-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:44px;padding:0 18px;
border:1px solid var(--mn-line);border-radius:999px;background:#fff}
.mn-wave i{width:2px;border-radius:2px;background:#9DB4E8}
.mn-wave i:nth-child(3n){background:var(--mn-blue)}
/* --- column board (kanban-ish) ------------------------------- */
.mn-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-radius:18px;
padding:24px;background:linear-gradient(160deg,#2F74EE 0%,#5B93F5 100%)}
@media(max-width:820px){.mn-board{grid-template-columns:1fr}}
.mn-board__col h4{margin:0 0 12px;font-size:16px;font-weight:600;color:#fff}
.mn-boardcard{background:#fff;border-radius:10px;padding:12px;margin-bottom:12px;
box-shadow:0 10px 26px -14px rgba(10,30,80,.5)}
.mn-boardcard .tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mn-mono);font-size:10px;
background:#EAF1FF;color:var(--mn-blue);border-radius:6px;padding:3px 8px}
.mn-boardcard .meta{float:right;font-family:var(--mn-mono);font-size:10px;color:var(--mn-subtle)}
.mn-boardcard h5{margin:10px 0 0;font-size:13.5px;font-weight:700;color:#111}
.mn-boardcard p{margin:5px 0 0;font-size:12.5px;color:var(--mn-subtle)}
.mn-boardcard--ghost{background:rgba(255,255,255,.22);box-shadow:none}
.mn-boardcard--ghost i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.5);margin:6px 0}
.mn-boardcard--outline{background:rgba(255,255,255,.12);border:1px dashed rgba(255,255,255,.6);color:#fff}
/* ============================================================
FULL-WIDTH BACKDROP BANDS (.mn-bgband)
The four variants from the page's backdrop switcher, plus the
vertical stripe overlay that sits on top of them.
============================================================ */
.mn-bgband{position:relative;overflow:hidden;padding:110px 32px 90px;
background:linear-gradient(175deg,#F4F7FF 0%,#DFE9FF 34%,#B7CDF9 62%,#6D96E8 100%)}
/* stripe overlay — 110px columns alternating dark/light wash */
.mn-bgband::after{content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(90deg,
rgba(0,10,60,.07) 0px, rgba(0,10,60,.07) 110px,
rgba(255,255,255,.06) 110px, rgba(255,255,255,.06) 220px)}
.mn-bgband > *{position:relative;z-index:1}
.mn-bgband--flat::after{display:none}
/* variant a · sky fade (default) */
.mn-bgband--sky{background:linear-gradient(175deg,#F4F7FF 0%,#DFE9FF 34%,#B7CDF9 62%,#6D96E8 100%)}
/* variant b · striped lavender */
.mn-bgband--lavender{background:linear-gradient(168deg,#C9D6F7 0%,#7F9EF0 30%,#3F6CE8 62%,#8F8AF2 100%)}
/* variant c · aurora pastel — three radial blooms, no stripes */
.mn-bgband--aurora{background:
radial-gradient(900px 480px at 22% 18%,#DBE7FF 0%,transparent 60%),
radial-gradient(1000px 520px at 82% 30%,#E9DEFC 0%,transparent 62%),
radial-gradient(1100px 640px at 50% 108%,#5E87E6 0%,#9DB9F2 46%,transparent 78%),
#F7F9FF}
.mn-bgband--aurora::after{display:none}
/* variant d · dusk indigo */
.mn-bgband--dusk{background:linear-gradient(175deg,#DFE7FB 0%,#94AEF0 30%,#2F56D8 66%,#131C8F 100%)}
/* text sits light on the darker two */
.mn-bgband--lavender,.mn-bgband--dusk{color:#fff}
.mn-bgband--lavender .mn-h2,.mn-bgband--dusk .mn-h2{color:#fff}
.mn-bgband--lavender .mn-sub,.mn-bgband--dusk .mn-sub{color:rgba(255,255,255,.86)}
@media(max-width:820px){.mn-bgband{padding:64px 18px 56px}}
/* dark striped panel backdrop (product tiles on a navy ground) */
.mn-bgband--navy{background:#0B1430;color:#fff}
.mn-bgband--navy::after{background:repeating-linear-gradient(90deg,
rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 110px,
rgba(0,0,0,.12) 110px, rgba(0,0,0,.12) 220px)}
/* ============================================================
SPACING SCALE
Measured from production. Everything on the page resolves to
one of these steps — if a value isn't here, it's a mistake.
============================================================ */
:root{
--mn-s1:4px; --mn-s2:8px; --mn-s3:12px; --mn-s4:14px;
--mn-s5:16px; --mn-s6:20px; --mn-s7:22px; --mn-s8:24px;
--mn-s9:26px; --mn-s10:30px; --mn-s11:34px; --mn-s12:40px;
--mn-s13:46px; --mn-s14:56px; --mn-s15:70px; --mn-s16:90px; --mn-s17:110px;
/* named roles */
--mn-gap-card:20px; /* frosted card rows */
--mn-gap-tile:24px; /* product tile grids */
--mn-gap-fig:22px; /* figure / chart galleries */
--mn-gap-inner:14px; /* inside a card */
--mn-sec-y:70px; /* section top/bottom */
--mn-sec-y-lg:110px; /* full-bleed band */
--mn-grid-top:40px; /* heading block → grid */
}
/* spacing utilities — margin-top only, so vertical rhythm stays one-directional */
.mn-mt-4{margin-top:var(--mn-s1)} .mn-mt-8{margin-top:var(--mn-s2)}
.mn-mt-12{margin-top:var(--mn-s3)} .mn-mt-14{margin-top:var(--mn-s4)}
.mn-mt-16{margin-top:var(--mn-s5)} .mn-mt-20{margin-top:var(--mn-s6)}
.mn-mt-22{margin-top:var(--mn-s7)} .mn-mt-24{margin-top:var(--mn-s8)}
.mn-mt-26{margin-top:var(--mn-s9)} .mn-mt-30{margin-top:var(--mn-s10)}
.mn-mt-34{margin-top:var(--mn-s11)} .mn-mt-40{margin-top:var(--mn-s12)}
.mn-mt-46{margin-top:var(--mn-s13)} .mn-mt-56{margin-top:var(--mn-s14)}
.mn-mt-70{margin-top:var(--mn-s15)}
.mn-stack > * + *{margin-top:var(--mn-s5)}
.mn-stack-sm > * + *{margin-top:var(--mn-s2)}
.mn-stack-lg > * + *{margin-top:var(--mn-s8)}
.mn-sec--lg{padding:var(--mn-sec-y-lg) 0}
.mn-gridtop{margin-top:var(--mn-grid-top)}
/* focus ring — one definition for every interactive element */
.mn-focusable:focus-visible,
.mn-btn:focus-visible,.mn-chip:focus-visible,.mn-input:focus-visible,
.mn-linkrows a:focus-visible,.mn-dir a:focus-visible,.mn-navtile:focus-visible{
outline:2px solid #0b3ea8;outline-offset:3px;border-radius:4px}
/* ============================================================
LOGO
Nova mark: 8 rays on a -50 -50 100 100 viewBox, four long
(45) and four short (26) at 45°. Wordmark is Instrument Sans.
============================================================ */
.mn-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--mn-ink);
font-size:16px;font-weight:600;letter-spacing:-.01em}
.mn-logo svg{width:24px;height:24px;flex:none}
.mn-logo svg g{fill:var(--mn-blue-logo)}
.mn-logo--lg{font-size:22px;gap:12px}
.mn-logo--lg svg{width:32px;height:32px}
.mn-logo--sm{font-size:14px;gap:8px}
.mn-logo--sm svg{width:20px;height:20px}
.mn-logo--mark svg{width:32px;height:32px}
.mn-logo--onDark{color:#fff}
.mn-logo--onDark svg g{fill:#fff}
.mn-logo--mono svg g{fill:currentColor}
/* clearspace = the mark's own height on every side */
.mn-logo-clear{padding:24px;display:inline-block;outline:1px dashed rgba(20,110,245,.35)}
/* ============================================================
DATA VISUALISATION
============================================================ */
:root{
--mn-viz-1:#2F74EE; /* primary series */
--mn-viz-2:#8B7BF0; /* second series */
--mn-viz-3:#5CD6C4; /* third series */
--mn-viz-4:#F4794F; /* fourth series */
--mn-viz-5:#F9BD2B; /* fifth series */
--mn-viz-6:#5CD6AE; /* sixth series */
--mn-viz-grid:#EBEBEB;
--mn-viz-grid-dark:#242a33;
--mn-viz-axis:#a7b0c0;
}
.mn-viz{position:relative}
.mn-viz svg{width:100%;display:block;overflow:visible}
.mn-viz .grid line{stroke:var(--mn-viz-grid);stroke-width:1}
.mn-viz .axis{display:flex;justify-content:space-between;margin-top:10px;
font-family:var(--mn-mono);font-size:11px;color:var(--mn-viz-axis)}
.mn-viz .s1{stroke:var(--mn-viz-1)} .mn-viz .s2{stroke:var(--mn-viz-2)}
.mn-viz .s3{stroke:var(--mn-viz-3)} .mn-viz .s4{stroke:var(--mn-viz-4)}
.mn-viz polyline,.mn-viz path.line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mn-viz .dot{fill:var(--mn-viz-1);stroke:#fff;stroke-width:3}
.mn-viz--dark .grid line{stroke:var(--mn-viz-grid-dark)}
.mn-viz--dark .axis{color:var(--mn-panel-faint)}
.mn-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:12.5px;color:var(--mn-muted)}
.mn-legend span{display:inline-flex;align-items:center;gap:7px}
.mn-legend i{width:10px;height:3px;border-radius:2px;background:var(--mn-viz-1)}
.mn-legend i.c2{background:var(--mn-viz-2)} .mn-legend i.c3{background:var(--mn-viz-3)}
.mn-legend i.c4{background:var(--mn-viz-4)}
.mn-num{font-variant-numeric:tabular-nums}
.mn-delta{font-family:var(--mn-mono);font-size:11px;font-weight:600}
.mn-delta--up{color:var(--mn-live-ink)} .mn-delta--down{color:#d4380d}
.mn-viz--dark .mn-delta--up{color:var(--mn-live)}
/* ============================================================
STATES — disabled / loading / error / empty / skeleton
============================================================ */
.mn-btn[disabled],.mn-btn.is-disabled,.mn-chip[disabled]{
opacity:.45;pointer-events:none;box-shadow:none;cursor:not-allowed}
.mn-btn.is-loading{position:relative;color:transparent;pointer-events:none}
.mn-btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;
border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:mn-spin .7s linear infinite}
@keyframes mn-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mn-btn.is-loading::after{animation-duration:2s}}
.mn-input.is-error{border-color:#d4380d;outline-color:#d4380d}
.mn-help{margin:7px 0 0;font-family:var(--mn-mono);font-size:11.5px;color:var(--mn-subtle)}
.mn-help--error{color:#d4380d}
.mn-help--ok{color:var(--mn-live-ink)}
.mn-empty{text-align:center;padding:44px 24px;border:1px dashed var(--mn-line);border-radius:14px;
background:var(--mn-sunken)}
.mn-empty h4{margin:0;font-size:16px;font-weight:700;color:var(--mn-ink-card)}
.mn-empty p{margin:8px auto 0;max-width:44ch;font-size:14px;color:var(--mn-muted)}
.mn-empty .mn-btn{margin-top:18px}
.mn-skel{background:linear-gradient(90deg,#EDF1F7 25%,#F6F8FC 37%,#EDF1F7 63%);
background-size:400% 100%;animation:mn-shimmer 1.4s ease infinite;border-radius:6px}
@keyframes mn-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.mn-skel{animation:none}}
.mn-skel--text{height:11px;margin:8px 0}
.mn-skel--title{height:18px;width:60%;margin-bottom:12px}
.mn-skel--block{height:96px}
.mn-viz--dark .mn-skel,.mn-panel .mn-skel{background:linear-gradient(90deg,#1a1f27 25%,#242a33 37%,#1a1f27 63%);background-size:400% 100%}
.mn-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
font-family:var(--mn-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.mn-badge--live{background:#E4F7EC;color:#0f7a3d}
.mn-badge--draft{background:#FFF4E5;color:#9a5b00}
.mn-badge--error{background:#FDE7E2;color:#a3260f}
.mn-badge--new{background:#E7EFFE;color:var(--mn-blue)}
.mn-badge--muted{background:#F1F4F9;color:var(--mn-subtle)}
/* ============================================================
FORMS
============================================================ */
.mn-field{display:block;margin-bottom:18px}
.mn-field > label{display:block;font-size:13.5px;font-weight:600;color:var(--mn-ink-card);margin-bottom:7px}
.mn-select,.mn-textarea{width:100%;border:1px solid var(--mn-line);border-radius:8px;padding:11px 14px;
font-family:var(--mn-sans);font-size:14px;background:#fff;color:var(--mn-ink)}
.mn-select{height:48px;appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--mn-subtle) 50%),linear-gradient(135deg,var(--mn-subtle) 50%,transparent 50%);
background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.mn-textarea{min-height:110px;resize:vertical;line-height:1.55}
.mn-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--mn-muted);margin:9px 0}
.mn-check input{width:18px;height:18px;accent-color:var(--mn-blue);flex:none;margin-top:1px}
/* ============================================================
DARK MODE
------------------------------------------------------------
IMPORTANT — the host site's [data-theme="dark"] only re-tints
the ACCENT; its surfaces stay white. Treating it as "dark
surfaces" caused pale buttons, an unreadable heading gradient
and invisible (inverted) client logos.
So the kit defines its own opt-in surface theme: .mn-dark.
Use .mn-dark for a genuinely dark section or page. Do NOT
rely on [data-theme="dark"] to darken anything.
============================================================ */
.mn-dark{
--mn-ink:#F2F5FA;
--mn-ink-card:#FFFFFF;
--mn-muted:#AEB8C9;
--mn-muted-card:#9BA6B8;
--mn-subtle:#8b93a5;
--mn-faint:#6b7488;
--mn-line:#232A38;
--mn-line-soft:#1B212C;
--mn-sunken:#0E131B;
--mn-before:#141A24;
--mn-frost-bg:rgba(255,255,255,.05);
--mn-frost-border:rgba(255,255,255,.12);
--mn-viz-grid:#242a33;
--mn-viz-axis:#6b7488;
--mn-g-head:linear-gradient(100deg,#5a9bff 0%,#8FC0FF 100%);
--mn-g-band:linear-gradient(175deg,#141B2B 0%,#16233F 45%,#1B2E57 100%);
--mn-g-backdrop:linear-gradient(135deg,#0C1220 0%,#132443 55%,#1B3566 100%);
background:#0B0F17;color:var(--mn-ink)}
.mn-dark .mn-card{background:var(--mn-frost-bg);border-color:var(--mn-frost-border)}
.mn-dark .mn-card__mock{background:#141A24;box-shadow:none}
.mn-dark .mn-mock-grid span{background:#1B222E;color:var(--mn-muted)}
.mn-dark .mn-node{background:#1B222E;color:#c7cdd6}
.mn-dark .mn-fcard{background:#121722;border-color:#222A38}
.mn-dark .mn-fcard h3{color:#fff}
.mn-dark .mn-fcard p{color:var(--mn-muted)}
.mn-dark .mn-anscard{background:#121722;border-color:#222A38}
.mn-dark .mn-anscard p{color:#D6DEEA}
.mn-dark .mn-anscard mark{background:#123A2A;color:#7FE0AE}
.mn-dark .mn-input,.mn-dark .mn-select,.mn-dark .mn-textarea{background:#121722;border-color:#222A38;color:#F2F5FA}
.mn-dark .mn-empty{background:#121722;border-color:#222A38}
.mn-dark .mn-btn--ghost{background:transparent;color:var(--mn-muted);border-color:#2A3342}
.mn-dark .mn-chip{background:rgba(255,255,255,.06);border-color:rgba(90,155,255,.45);color:#7FB4FF}
.mn-dark .mn-chip[aria-current="true"]{background:#2F74EE;border-color:#2F74EE;color:#fff}
.mn-dark .mn-linkrows a,.mn-dark .mn-dir a{color:#F2F5FA}
.mn-dark .mn-steprows h3,.mn-dark .mn-accordion h3{color:#fff}
.mn-dark .mn-faq summary{color:#F2F5FA}
/* client logos are never inverted — they invert to WHITE only here,
where the surface genuinely is dark */
.mn-dark .mn-marq__track img{filter:brightness(0) invert(1);opacity:.7}
/* ============================================================
PRICING — plan cards, lane/cadence switch, comparison table
============================================================ */
.mn-lanes{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;align-items:center}
.mn-seg{display:inline-flex;background:#fff;border:1px solid var(--mn-line);border-radius:999px;padding:4px;gap:2px}
.mn-seg button{border:0;background:none;cursor:pointer;font-family:var(--mn-sans);font-size:13.5px;
font-weight:600;color:var(--mn-subtle);padding:8px 18px;border-radius:999px;letter-spacing:-.01em;
transition:background .18s ease,color .18s ease}
.mn-seg button:hover{color:var(--mn-ink)}
.mn-seg button[aria-selected="true"]{background:var(--mn-blue);color:#fff}
.mn-seg button:focus-visible{outline:2px solid #0b3ea8;outline-offset:2px}
.mn-save{font-family:var(--mn-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
color:#1B7F4C;background:#EAF8F0;border:1px solid #BBE7CE;border-radius:999px;padding:5px 10px}
.mn-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
/* display:grid outranks the [hidden] UA rule — without this, both lanes render */
.mn-plans[hidden]{display:none}
.mn-plan{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mn-line);
border-radius:18px;padding:26px 24px 24px;position:relative}
.mn-plan__name{font-family:var(--mn-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
color:var(--mn-subtle);margin:0}
.mn-plan__for{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--mn-muted-card);min-height:44px}
.mn-plan__price{display:flex;align-items:baseline;gap:5px;margin:18px 0 0}
.mn-plan__price b{font-size:42px;font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--mn-ink-card);
font-variant-numeric:tabular-nums}
.mn-plan__price span{font-size:14px;font-weight:600;color:var(--mn-subtle)}
.mn-plan__note{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--mn-subtle);min-height:36px}
.mn-plan .mn-btn{margin-top:18px;width:100%;justify-content:center;text-align:center}
.mn-plan__specs{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--mn-line-soft)}
.mn-plan__specs li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
padding:7px 0;font-size:13.5px;color:var(--mn-muted-card)}
.mn-plan__specs li b{font-weight:700;color:var(--mn-ink-card);font-variant-numeric:tabular-nums;text-align:right}
.mn-plan__eng{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--mn-subtle)}
/* featured tier — the conic beam already in the kit, plus a ribbon */
.mn-plan--feat{border-color:transparent;isolation:isolate;
box-shadow:0 24px 60px -30px rgba(15,25,55,.42)}
/* animated beam, same conic sweep as .mn-beam — the featured card had a
static ring, so it read as dead next to the homepage cards */
.mn-plan--feat::after{content:"";position:absolute;inset:0;border-radius:18px;padding:1.5px;
background:conic-gradient(from var(--mn-bb),transparent 0deg,rgba(20,110,245,.85) 40deg,transparent 120deg);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
animation:mn-bb 5s linear infinite}
@media(prefers-reduced-motion:reduce){.mn-plan--feat::after{animation:none;
background:var(--mn-g-tile)}}
/* z-index needed: the ::after border ring is a later-painted sibling and
otherwise draws straight through the badge text */
.mn-plan__flag{position:absolute;z-index:1;top:-11px;left:24px;font-family:var(--mn-mono);font-size:10.5px;
letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--mn-blue);
border-radius:999px;padding:5px 12px}
@media(max-width:940px){.mn-plans{grid-template-columns:1fr;gap:14px}
.mn-plan__for,.mn-plan__note{min-height:0}}
/* --- testimonial wall (masonry columns; cards must not break across) --- */
.mn-wall{column-count:3;column-gap:18px}
.mn-tm{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
display:inline-block;width:100%;margin:0 0 18px;background:#fff;border:1px solid var(--mn-line);
border-radius:16px;padding:22px 22px 20px}
.mn-tm blockquote{margin:0;font-size:14.5px;line-height:1.65;color:var(--mn-ink-card);letter-spacing:-.005em}
.mn-tm figcaption{display:flex;align-items:center;gap:11px;margin-top:16px;padding-top:15px;
border-top:1px solid var(--mn-line-soft)}
.mn-tm figcaption img{width:42px;height:42px;border-radius:999px;object-fit:cover;flex:none}
.mn-tm figcaption span{display:flex;flex-direction:column;gap:2px;min-width:0}
.mn-tm figcaption b{font-size:13.5px;font-weight:700;color:var(--mn-ink-card);letter-spacing:-.01em}
.mn-tm figcaption i{font-style:normal;font-family:var(--mn-mono);font-size:11px;color:var(--mn-subtle);
line-height:1.45}
@media(max-width:940px){.mn-wall{column-count:2}}
@media(max-width:620px){.mn-wall{column-count:1}}
.mn-dark .mn-tm{background:#121722;border-color:#222A38}
.mn-dark .mn-tm blockquote{color:#E6EBF3}
/* --- site footer: columns, mirroring the homepage .mfoot --- */
/* homepage .mfoot is padding 56/36 with a 1px top rule and no margin —
the kit used margin-top:70px and no border, an 89px height difference */
.mn-foot{border-top:1px solid var(--mn-line);margin-top:0;padding:56px 0 36px;background:#fff}
.mn-foot__in{max-width:1180px;margin:0 auto;padding:0 28px}
.mn-foot__cols{display:grid;grid-template-columns:1.7fr auto;gap:40px;align-items:start;padding:44px 0 0}
.mn-foot__brand{display:flex;flex-direction:column;align-items:flex-start}
.mn-foot__brand>a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
color:var(--mn-ink);margin:0 0 14px}
.mn-foot__brand svg{width:22px;height:22px;flex:none;fill:var(--mn-signal)}
.mn-foot__brand>a span{font-weight:500;font-size:20px;letter-spacing:-.02em}
.mn-foot__brand p{font-size:13.5px;color:var(--mn-muted);line-height:1.6;max-width:34ch;margin:14px 0 0}
.mn-foot__nav{display:flex;gap:80px}
.mn-foot__nav>div{display:flex;flex-direction:column;gap:2px}
.mn-foot__nav .mn-foot__h{font-family:var(--mn-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
color:var(--mn-faint);margin:0 0 10px;font-weight:400}
.mn-foot__nav a{font-size:14px;color:var(--mn-muted);text-decoration:none;padding:5px 0}
.mn-foot__nav a:hover{color:var(--mn-ink)}
.mn-foot__base{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
margin-top:38px;padding:20px 0 30px;border-top:1px solid var(--mn-line);
font-family:var(--mn-mono);font-size:11.5px;color:var(--mn-faint)}
.mn-foot__base a{color:var(--mn-muted);text-decoration:none}
.mn-foot__base a:hover{color:var(--mn-signal)}
.mn-foot__built a{display:inline-flex;align-items:center;gap:6px;color:var(--mn-faint);text-decoration:none}
.mn-foot__built a:hover{color:var(--mn-ink)}
.mn-gtm{display:inline-block;width:74px;height:13px;background-color:currentColor;
-webkit-mask:url("/hs-assets/r-0e61d94d52b037ee.svg") left center/contain no-repeat;
mask:url("/hs-assets/r-0e61d94d52b037ee.svg") left center/contain no-repeat}
@media(max-width:900px){.mn-foot__cols{grid-template-columns:1fr;gap:26px}
.mn-foot__nav{gap:34px;flex-wrap:wrap}}
/* --- site nav, kit-native.
.mnav/.mfoot live in site.css, which the ~331 kit pages do not load.
This mirrors the homepage nav so both page systems read identically. --- */
/* ------------------------------------------------------------------
Site nav — a pixel port of the homepage .mnav. Values are copied, not
approximated: wrap 1180/28, row height 66, mark 24, wordmark 21/500,
links 14/500 with 8px 13px padding, CTA gap 10.
Verified by scripts/kit-parity.js (geometry mode).
------------------------------------------------------------------ */
.mn-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.72);
-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
border-bottom:1px solid transparent}
.mn-nav__in{max-width:1180px;margin:0 auto;padding:0 28px;
display:flex;align-items:center;gap:24px;height:66px}
.mn-nav__brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.mn-nav__brand svg{width:24px;height:24px;flex:none;fill:var(--mn-signal)}
.mn-nav__brand span{font-family:var(--mn-sans);font-weight:500;letter-spacing:-.02em;
font-size:22px;color:var(--mn-ink)}
.mn-nav__links{display:flex;align-items:center;gap:4px;margin-left:14px}
.mn-nav__links a{font-size:14px;font-weight:500;color:var(--mn-muted);padding:8px 13px;
border-radius:8px;text-decoration:none;transition:color .15s ease,background .15s ease}
.mn-nav__links a:hover{color:var(--mn-ink);background:var(--mn-sunken)}
.mn-nav__links a[aria-current="page"]{color:var(--mn-ink)}
/* margin-left:auto still right-aligns the CTA now that the link
list is gone from the nav entirely */
.mn-nav__cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.mn-nav__ghost{display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:var(--mn-sans);font-weight:500;font-size:13px;line-height:1;padding:8px 13px;
border-radius:8px;border:0;background:#f0f0f1;color:#111;
text-decoration:none;white-space:nowrap}
/* the arrow is monospace on the homepage — a sans arrow is ~6px wider,
which shifted the nav CTA on every non-homepage page */
.mn-btn .arr,.mn-nav__ghost .arr{font-family:var(--mn-mono);flex:none;
transition:transform .2s ease}
.mn-btn:hover .arr{transform:translateX(3px)}
.mn-nav .mn-btn--sm{font-size:13px;font-weight:500;line-height:1;padding:8px 13px;
border-radius:8px;border:0}
@media(max-width:720px){.mn-nav__in{gap:12px;padding:0 16px;height:60px}
.mn-nav__links{margin-left:4px;gap:2px}
.mn-nav__links a{font-size:13.5px;padding:6px 8px}
.mn-nav__ghost{display:none}
.mn-nav__brand span{font-size:18px}.mn-nav__brand svg{width:22px;height:22px}}
@media(max-width:400px){.mn-nav__brand span{display:none}
.mn-nav__links a{font-size:13px}}
/* feature-list variant of .mn-checks for pricing cards: sans, tighter, and the
tick sits on the first line when an item wraps (base .mn-checks is mono and
centre-aligned, which reads as code in a marketing card) */
.mn-checks--feat li{font-family:var(--mn-sans);font-size:13.5px;line-height:1.5;
align-items:flex-start;gap:10px;color:var(--mn-muted-card)}
.mn-checks--feat .ck{margin-top:1px;flex:none}
.mn-checks--feat b{color:var(--mn-ink-card);font-weight:600}
.mn-checks--feat li>span:last-child{flex:1;min-width:0}
/* ============================================================
HOW IT WORKS — alternating copy + product mock
Ported from the .hiw-* block in site.css (rendered only on the
internal /home-standalone-v2). Two deliberate changes:
· site.css tokens are the old olive/serif theme (--signal #4F6B41,
--font-display Newsreader); this renders in kit tokens instead so
the section matches the rest of the page.
· the source mocks are filled by JS (empty divs in the HTML). These
are static markup — answer engines have to be able to read them.
Copy list reuses .mn-checks--feat rather than a new list component.
============================================================ */
.mn-hiw{display:flex;flex-direction:column;gap:96px}
.mn-hiw__row{display:grid;grid-template-columns:.92fr 1.08fr;gap:58px;align-items:center}
.mn-hiw__row>*{min-width:0} /* grid min-width:auto floor — see .mn-split */
.mn-hiw__row:nth-child(even) .mn-hiw__viz{order:-1}
@media(max-width:940px){
.mn-hiw{gap:60px}
.mn-hiw__row{grid-template-columns:1fr;gap:30px}
.mn-hiw__row:nth-child(even) .mn-hiw__viz{order:0}
}
.mn-hiw__copy{max-width:44ch}
.mn-hiw__step{font-family:var(--mn-mono);font-size:12px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--mn-blue-deep);display:inline-flex;align-items:center;gap:13px}
.mn-hiw__step::before{content:'';width:34px;height:1px;flex:none;
background:linear-gradient(90deg,var(--mn-signal),transparent)}
.mn-hiw__copy h3{font-size:clamp(26px,3.2vw,36px);font-weight:700;line-height:1.1;
letter-spacing:-.028em;color:var(--mn-ink);margin:18px 0 0}
.mn-hiw__copy>p{font-size:16.5px;line-height:1.62;color:var(--mn-muted);margin:17px 0 0}
.mn-hiw__viz>*{width:100%;max-width:540px;margin-inline:auto}
@media(max-width:940px){.mn-hiw__viz>*{margin-inline:0}}
/* ---- shared mock chrome ---- */
.mn-mock{background:#fff;border:1px solid var(--mn-line);border-radius:20px;
box-shadow:var(--mn-e-mock);overflow:hidden}
.mn-mock .ldot{display:inline-block;width:8px;height:8px;border-radius:50%;
background:var(--mn-live);flex:none}
.mn-mock mark{background:#DCEEE4;color:#14532d;padding:.04em .3em;border-radius:4px;font-weight:500;
-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mn-edot{width:12px;height:12px;border-radius:50%;flex:none;display:inline-block}
.mn-edot--chatgpt{background:#10A37F}.mn-edot--perplexity{background:#20808D}
.mn-edot--claude{background:#D97757}.mn-edot--gemini{background:#8E75F0}
.mn-edot--google{background:#4285F4}.mn-edot--reddit{background:#FF4500}
.mn-edot--off{opacity:.22}
/* ---- mock 1 · prompt console ---- */
.mn-cons__bar{display:flex;align-items:center;gap:11px;padding:15px 18px;
border-bottom:1px solid var(--mn-line)}
.mn-cons__bar .k{font-family:var(--mn-mono);font-size:11px;color:var(--mn-faint);
border:1px solid var(--mn-line);border-radius:6px;padding:3px 7px;flex:none}
.mn-cons__bar .q{font-family:var(--mn-mono);font-size:14px;color:var(--mn-ink);flex:1;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-cons__bar .run{font-family:var(--mn-mono);font-size:11px;color:var(--mn-blue-deep);flex:none}
.mn-cons__pills{display:flex;gap:7px;flex-wrap:wrap;padding:13px 18px;
border-bottom:1px solid var(--mn-line);background:var(--mn-sunken)}
.mn-cons__pills span{font-family:var(--mn-mono);font-size:11.5px;padding:6px 12px;border-radius:999px;
border:1px solid var(--mn-line);background:#fff;color:var(--mn-subtle)}
.mn-cons__pills span[aria-current="true"]{color:var(--mn-ink);border-color:var(--mn-signal)}
.mn-cons__res{padding:20px 20px 18px}
.mn-cons__rh{display:flex;align-items:center;gap:9px;font-family:var(--mn-mono);font-size:10px;
letter-spacing:.07em;text-transform:uppercase;color:var(--mn-faint);margin-bottom:13px}
.mn-cons__ans{font-size:20px;font-style:italic;line-height:1.5;color:var(--mn-ink);margin:0}
.mn-cons__src{display:flex;gap:6px;flex-wrap:wrap;margin-top:15px}
.mn-cons__src span{font-family:var(--mn-mono);font-size:10.5px;padding:4px 9px;border-radius:999px;
background:var(--mn-sunken);color:var(--mn-subtle)}
.mn-cons__ft{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;
padding-top:16px;border-top:1px solid var(--mn-line);flex-wrap:wrap}
.mn-cons__dots{display:flex;align-items:center;gap:8px}
.mn-cons__dots .lab{font-family:var(--mn-mono);font-size:10.5px;color:var(--mn-subtle);margin-left:3px}
.mn-cons__acts{display:flex;gap:7px;flex-wrap:wrap}
.mn-cons__acts span{font-family:var(--mn-mono);font-size:11px;font-weight:600;padding:6px 12px;
border-radius:10px}
.mn-cons__acts .primary{background:var(--mn-signal);color:#fff}
.mn-cons__acts .ghost{background:var(--mn-sunken);color:var(--mn-muted);border:1px solid var(--mn-line)}
/* ---- mock 2 · daily brief ---- */
.mn-brief{display:flex;flex-direction:column}
.mn-brief__hd{padding:16px 20px;border-bottom:1px solid var(--mn-line);background:var(--mn-sunken)}
.mn-brief__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;
font-family:var(--mn-mono);font-size:10.5px;color:var(--mn-faint)}
.mn-brief__hd .bt{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:8px 0 0;color:var(--mn-ink)}
.mn-brief__hd .bt em{font-style:italic;font-weight:500;color:var(--mn-signal)}
.mn-brief__bd{padding:6px 20px 14px;flex:1}
.mn-brief__item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--mn-line)}
.mn-brief__item:last-child{border-bottom:none}
.mn-brief__item .ic{width:25px;height:25px;border-radius:7px;flex:none;display:flex;align-items:center;
justify-content:center;font-family:var(--mn-mono);font-weight:700;font-size:12px;margin-top:1px}
.mn-brief__item .ic--up{color:var(--mn-live-ink);background:#DCEEE4}
.mn-brief__item .ic--warn{color:#A03A2E;background:#FBE6E1}
.mn-brief__item .ic--edit{color:#fff;background:var(--mn-signal)}
.mn-brief__item .ti{font-size:13px;color:var(--mn-ink);line-height:1.45}
.mn-brief__item .ti b{font-weight:600}
.mn-brief__item .sb{font-size:12px;color:var(--mn-muted);line-height:1.45;margin-top:3px}
.mn-brief__draft{margin-top:8px;background:var(--mn-sunken);border:1px solid var(--mn-line);
border-radius:10px;padding:11px;font-size:12px;color:var(--mn-muted);line-height:1.5}
.mn-brief__ft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 20px;
border-top:1px solid var(--mn-line);background:var(--mn-sunken);flex-wrap:wrap}
.mn-brief__ft .stat{font-family:var(--mn-mono);font-size:11px;color:var(--mn-subtle)}
.mn-brief__ft .stat b{color:var(--mn-blue-deep)}
.mn-brief__ft .go{font-family:var(--mn-mono);font-size:11px;font-weight:600;padding:6px 12px;
border-radius:10px;background:var(--mn-signal);color:#fff}
/* ---- mock 3 · drift + recent gains ---- */
.mn-drift{display:flex;flex-direction:column;gap:14px}
.mn-drift__hd{display:flex;align-items:center;gap:8px;padding:12px 17px;
border-bottom:1px solid var(--mn-line);font-family:var(--mn-mono);font-size:10.5px;
color:var(--mn-subtle);flex-wrap:wrap;row-gap:4px}
.mn-drift__hd .chg{margin-left:auto;color:var(--mn-blue-deep);display:inline-flex;align-items:center;gap:6px}
.mn-drift__bd{padding:18px}
.mn-drift__body{font-size:16px;line-height:1.7;color:var(--mn-muted)}
.mn-drift__body del{text-decoration:line-through;text-decoration-thickness:1px;color:#A03A2E;
background:#FBE6E1}
.mn-drift__body ins{text-decoration:none;color:var(--mn-live-ink);background:#DCEEE4;padding:0 3px;
border-radius:3px}
.mn-drift__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px;
padding-top:13px;border-top:1px solid var(--mn-line);font-family:var(--mn-mono);font-size:11px;
flex-wrap:wrap}
.mn-drift__meta .acc{color:var(--mn-live-ink);font-weight:600}
.mn-drift__meta .pr{color:var(--mn-subtle)}
.mn-drift__alerts{background:var(--mn-sunken);border:1px solid var(--mn-line);border-radius:14px;
padding:6px 15px 11px}
.mn-drift__ah{font-family:var(--mn-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--mn-faint);padding:11px 0 5px;display:flex;align-items:center;gap:8px}
.mn-drift__alert{display:flex;gap:11px;align-items:flex-start;padding:8px 0;
border-top:1px solid var(--mn-line)}
.mn-drift__alert .ico{width:21px;height:21px;border-radius:6px;flex:none;display:flex;
align-items:center;justify-content:center;font-family:var(--mn-mono);font-weight:700;font-size:11px;
color:var(--mn-live-ink);background:#DCEEE4}
.mn-drift__alert .t{font-size:12px;color:var(--mn-ink);line-height:1.4;min-width:0}
.mn-drift__alert .t span{color:var(--mn-faint)}
.mn-drift__alert .ts{font-family:var(--mn-mono);font-size:10px;color:var(--mn-faint);margin-left:auto;
flex:none;padding-top:2px}
/* ---- outcome · stats + static growth chart ---- */
.mn-out__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.mn-out__stats .v{display:block;font-size:32px;font-weight:700;letter-spacing:-.03em;color:var(--mn-ink)}
.mn-out__stats .l{display:block;font-family:var(--mn-mono);font-size:10.5px;letter-spacing:.07em;
text-transform:uppercase;color:var(--mn-subtle);margin-top:5px}
.mn-chart{background:#fff;border:1px solid var(--mn-line);border-radius:14px;padding:26px}
.mn-chart__hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
margin-bottom:8px;flex-wrap:wrap}
.mn-chart__badge{font-family:var(--mn-mono);font-size:11px;font-weight:600;color:var(--mn-live-ink);
background:#DCEEE4;border-radius:999px;padding:3px 10px;display:inline-flex;align-items:center;gap:6px}
.mn-chart svg{display:block;width:100%;height:auto}
@media(max-width:560px){
.mn-cons__ans{font-size:18px}
.mn-out__stats{grid-template-columns:1fr;gap:18px}
}