/*
* RampVera marketing website.
*
* The public site's ONLY stylesheet — none of the product bundles (admin / manager /
* representative / tailwind) load here, so this file is self-contained and stays small.
* Everything is namespaced `mk-` so marketing styles can never leak into the signed-in
* application, and the product's `.rv` system can never leak in here.
*
* The tokens below are the same brand values the product uses (navy, cyan, lavender,
* indigo for primary actions, Plus Jakarta Sans + Inter). This is the existing design
* language expressed for a marketing page, not a new one.
*
* ── The system ──────────────────────────────────────────────────────────────────────
* Four scales carry the whole site. Nothing below sets a raw value where a scale step
* exists, which is what keeps the pages feeling like one design rather than a stack of
* separately-tuned blocks:
*
* space --mk-1 … --mk-14, an 8px grid (with 4px and 12px for dense UI detail)
* type --mk-fs-*, one ramp from 11px micro-labels to the clamped hero
* elevation --mk-e1 … --mk-e4, low to high; nothing invents its own shadow
* hairline --mk-hair* — separation by tone, not by outline
*
* Section rhythm is deliberate rather than uniform: every band is --mk-sec-y tall, and
* the first and last section inside a light block get one step more so the page opens
* and closes with air instead of butting straight into the dark bands.
*
* Sections, in order:
* 1 Tokens 8 Measure / Close
* 2 Base + a11y 9 Detect / Practise / Prove
* 3 Utilities 10 How it works
* 4 Header + mobile 11 Comparison
* 5 Hero + ramp card 12 Credibility, cohort, CTA
* 6 Category band 13 Footer
* 7 Sections + stats 14 Motion + responsive
*/
/* ─────────────────────── 0. Typefaces ─────────────────────── */
/*
* The two brand faces, served from this origin. They used to come from Google Fonts,
* which cost the critical path a DNS lookup, a TLS handshake and a render-blocking
* stylesheet on a third-party host — before a single glyph was requested. They are also
* both VARIABLE fonts: one file per family per subset covers every weight the site uses,
* so `font-weight: 100 900` here replaces what would otherwise be four files.
*
* `unicode-range` is Google's own, kept verbatim: a browser fetches latin-ext only if a
* page actually contains a character from it, so the second file usually costs nothing.
* `font-display: swap` keeps text visible from the first paint, in the fallback, and the
* metrics are close enough that the swap does not move the layout.
*
* Licence: both are SIL Open Font Licence 1.1, which permits self-hosting.
*/
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/assets/inter-latin-1f021a24.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: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/assets/inter-latin-ext-65edaaef.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: "Plus Jakarta Sans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("/assets/plus-jakarta-sans-latin-d2ff26bc.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: "Plus Jakarta Sans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("/assets/plus-jakarta-sans-latin-ext-ff4456f1.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;
}
/* ─────────────────────────── 1. Tokens ─────────────────────────── */
:root {
--mk-navy: #1A2332;
--mk-navy-abyss: #0F151E;
--mk-cyan: #5CB8D6;
--mk-cyan-bright: #74CDE8;
--mk-lav: #9B8EC4;
--mk-lav-bright: #B3A6DB;
/* Indigo is the primary-action colour, matching the product's buttons. */
--mk-indigo-a: #4E4197;
--mk-indigo-b: #7A6BB8;
--mk-indigo-hi-a: #5B4DAB;
--mk-indigo-hi-b: #8B7BC9;
/* Indigo readable as text on the light canvas. */
--mk-indigo-ink: #574A9E;
--mk-lav-ink: #6F5FA8;
/* Status colours. Status only — never decoration. */
--mk-green: #00C896;
--mk-ok-ink: #00A578;
--mk-amber: #F0A500;
--mk-amber-ink: #B26A00;
--mk-ink: #1A2230;
--mk-ink-2: #586074;
--mk-ink-3: #8A93A6;
--mk-line: #E7EBF2;
--mk-line-soft: #EFF2F7;
--mk-canvas: #F6F8FC;
--mk-card: #FFFFFF;
--mk-on-dark: #EAF1F6;
--mk-on-dark-mut: #9DAABA;
--mk-on-dark-faint: #6C7D8F;
/* ── Space. An 8px grid; 4px and 12px exist for dense product-mock detail only. ── */
--mk-1: 4px;
--mk-2: 8px;
--mk-3: 12px;
--mk-4: 16px;
--mk-5: 24px;
--mk-6: 32px;
--mk-7: 40px;
--mk-8: 48px;
--mk-9: 64px;
--mk-10: 80px;
--mk-11: 96px;
--mk-12: 112px;
--mk-13: 136px;
--mk-14: 168px;
/* Section rhythm. One band height, one head-to-content gap, everywhere. */
--mk-sec-y: var(--mk-12);
--mk-head-gap: var(--mk-8);
--mk-grid-gap: var(--mk-5);
/* ── Type. One ramp. A component picks a step; it never invents a size. ── */
--mk-fs-micro: 11px; /* chips and tags inside the product mocks */
--mk-fs-label: 12px; /* eyebrows, kickers, column headings */
--mk-fs-xs: 13px; /* dense UI rows */
--mk-fs-sm: 14px; /* card body, footer links */
--mk-fs-base: 15px; /* buttons, navigation, captions */
--mk-fs-md: 16px; /* long-form card body */
--mk-fs-lg: 17px; /* page body */
--mk-fs-xl: 19px; /* lede, section sub-copy */
--mk-fs-h4: 18px; /* card headings */
--mk-fs-h3: clamp(20px, 1.6vw, 23px);
--mk-fs-h2: clamp(28px, 3.5vw, 42px);
--mk-fs-h1: clamp(38px, 5.4vw, 66px);
--mk-lh-display: 1.03;
--mk-lh-head: 1.14;
--mk-lh-snug: 1.35;
--mk-lh-body: 1.62;
--mk-ls-display: -.035em;
--mk-ls-head: -.028em;
--mk-ls-label: .14em;
--mk-r-card: 16px;
--mk-r-btn: 12px;
--mk-r-sm: 10px;
--mk-r-panel: 22px;
/* ── Elevation. Low to high. Softer than a UI needs — this is a page, not a dialog. ── */
--mk-e1: 0 1px 2px rgba(20,27,39,.04), 0 8px 24px -14px rgba(20,27,39,.16);
--mk-e2: 0 2px 6px rgba(20,27,39,.05), 0 20px 44px -22px rgba(20,27,39,.22);
--mk-e3: 0 24px 60px -32px rgba(9,14,22,.50);
--mk-e4:
0 0 0 1px rgba(255,255,255,.03),
0 32px 80px -40px rgba(4,9,16,.85),
0 20px 56px -40px rgba(92,184,214,.30);
/* ── Hairlines. Separation by tone, not by outline. ── */
--mk-hair: rgba(26,34,48,.07);
--mk-hair-soft: rgba(26,34,48,.05);
--mk-hair-dark: rgba(255,255,255,.07);
--mk-hair-dark-soft: rgba(255,255,255,.045);
/* ── Motion. Two easings: one for travel, one for settling. ── */
--mk-ease: cubic-bezier(.22,.61,.36,1);
--mk-ease-out: cubic-bezier(.16,1,.3,1);
--mk-t-fast: .2s;
--mk-t: .28s;
--mk-t-slow: .45s;
/* The arrival. Long on purpose: the curve spends its last third almost stationary, so
this reads as a settle rather than a slide. Everything that reveals uses this one. */
--mk-t-reveal: .95s;
/* Hover. Slow enough to read as a response, quick enough not to lag the pointer. */
--mk-t-hover: .28s;
--mk-maxw: 1180px;
--mk-measure-wide: 940px;
--mk-gutter: var(--mk-6);
--mk-disp: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
--mk-body: "Inter", system-ui, -apple-system, sans-serif;
}
/* ───────────────────────── 2. Base + a11y ───────────────────────── */
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk {
margin: 0;
font-family: var(--mk-body);
font-size: var(--mk-fs-lg);
line-height: 1.65;
color: var(--mk-ink);
background: var(--mk-navy-abyss);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/*
* The reset is wrapped in `:where()` so it carries NO specificity. Without that, `.mk p`
* (0,1,1) quietly outranks a single-class component rule like `.mk-lede` (0,1,0) — every
* margin below would be silently dropped, and `.mk a { color: inherit }` would beat
* `.mk-nl`, leaving the navigation ink-on-navy. A reset should lose every argument it
* gets into; `:where()` is how it does that.
*/
:where(.mk h1, .mk h2, .mk h3) {
font-family: var(--mk-disp);
font-weight: 700;
letter-spacing: var(--mk-ls-head);
line-height: var(--mk-lh-head);
margin: 0;
}
:where(.mk p, .mk ul, .mk ol) { margin: 0; }
:where(.mk ul, .mk ol) { padding: 0; list-style: none; }
:where(.mk a) { color: inherit; text-decoration: none; }
:where(.mk img, .mk svg) { max-width: 100%; }
.mk ::selection { background: rgba(122,107,184,.30); }
/* One icon convention: 24-unit box, stroke 2, round caps and joins, sized from the
step scale (12 / 14 / 16 / 20). Set here so no icon can drift on its own. */
.mk svg { stroke-linecap: round; stroke-linejoin: round; }
.mk-ico { flex: 0 0 auto; }
/* A visible, unambiguous focus ring on every interactive element. */
.mk :focus-visible {
outline: 2px solid var(--mk-indigo-b);
outline-offset: 3px;
border-radius: 4px;
}
.mk-dark :focus-visible, .mk-hero :focus-visible, .mk-nav :focus-visible, .mk-mobile :focus-visible {
outline-color: var(--mk-cyan-bright);
}
/* Skip link: off-screen until focused, then pinned top-left. */
.mk-skip {
position: absolute;
left: var(--mk-3);
top: -60px;
z-index: 100;
padding: 11px 18px;
border-radius: 0 0 var(--mk-r-sm) var(--mk-r-sm);
background: #fff;
color: var(--mk-indigo-a);
font-weight: 700;
font-size: var(--mk-fs-sm);
transition: top var(--mk-t-fast) var(--mk-ease-out);
}
.mk-skip:focus { top: 0; }
/* The scroll target must clear the fixed header. */
.mk [id] { scroll-margin-top: var(--mk-11); }
/* ────────────────────────── 3. Utilities ────────────────────────── */
.mk-wrap {
max-width: var(--mk-maxw);
margin: 0 auto;
padding: 0 var(--mk-gutter);
}
/* Available to a screen reader, invisible on screen. For the name of a control whose visible
form is a shape rather than a word — a switch, say. Not `display: none`, which would take
it out of the accessibility tree and defeat the point. */
.mk-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.mk-tnum { font-variant-numeric: tabular-nums; }
.mk-ok-ink { color: var(--mk-ok-ink); }
.mk-warn-ink { color: var(--mk-amber-ink); }
/* Every kicker on the site — eyebrows, card labels, column headings — is one style. */
.mk-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--mk-2);
font-weight: 600;
font-size: var(--mk-fs-label);
line-height: 1;
letter-spacing: var(--mk-ls-label);
text-transform: uppercase;
}
.mk-eyebrow::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--mk-cyan);
box-shadow: 0 0 9px var(--mk-cyan);
}
.mk-on-dark { color: var(--mk-cyan-bright); }
.mk-on-light { color: var(--mk-ink-3); }
.mk-rule {
width: 56px;
height: 2px;
margin: 0 auto var(--mk-6);
background: linear-gradient(90deg, transparent, var(--mk-cyan), transparent);
}
.mk-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mk-2);
font-family: var(--mk-body);
font-weight: 600;
font-size: var(--mk-fs-base);
line-height: 1.2;
letter-spacing: -.005em;
padding: 13px 24px;
border: 1px solid transparent;
border-radius: var(--mk-r-btn);
cursor: pointer;
white-space: nowrap;
transition:
transform var(--mk-t) var(--mk-ease-out),
box-shadow var(--mk-t) var(--mk-ease-out),
border-color var(--mk-t) var(--mk-ease-out),
background var(--mk-t) var(--mk-ease-out);
}
/* Primary sits calm at rest and lifts on hover — the shadow does the work, not the size.
Two shadows on hover: the cast one that carries the lift, and a tight indigo halo that
reads as the button glowing rather than as a second, larger shadow. */
.mk-btn-primary {
/* THE PRODUCT'S ACTION GRADIENT, verbatim from the dashboards (application.css: the
switcher's active pill and the sprint CTA — 118deg, #4F7DC9 into #4E4197 at 62%,
closing on #463A8C). The previous #4E4197→#7A6BB8 pair was the product's OTHER button,
and its lavender tail disappeared into the hero's new violet gradient; the blue anchor
is what gives this one its separation there, and it is a colour the application
already speaks. */
background: linear-gradient(118deg, #4F7DC9 0%, #4E4197 62%, #463A8C 100%);
color: #fff;
box-shadow: 0 10px 22px -9px rgba(78,65,151,.62), inset 0 1px 0 rgba(255,255,255,.16);
}
.mk-btn-primary:hover {
/* The same ramp, one step brighter, with the existing lift and halo. */
background: linear-gradient(118deg, #5E8AD6 0%, #5B4DAB 62%, #52459C 100%);
transform: translateY(-2px) scale(1.02);
box-shadow:
0 16px 32px -12px rgba(78,65,151,.65),
0 0 0 4px rgba(122,107,184,.18),
inset 0 1px 0 rgba(255,255,255,.16);
}
/* On the violet chrome — the header, the mobile menu and every hero banner — the primary
button flips to a white pill: on that gradient no indigo separates the way white does,
and the label speaks deep indigo instead. Everywhere else (the dark closing band, the
application form, the booking dialog) the product gradient above stays. */
.mk-nav .mk-btn-primary, .mk-mobile .mk-btn-primary, .mk-hero .mk-btn-primary {
background: #fff;
color: #2E2160;
box-shadow: 0 10px 22px -9px rgba(15, 10, 40, .5), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.mk-nav .mk-btn-primary:hover, .mk-mobile .mk-btn-primary:hover, .mk-hero .mk-btn-primary:hover {
/* A whisper of lavender so the hover reads as light hitting the pill, with the same
lift the gradient button has and a white halo in place of the indigo one. */
background: #F3F1FB;
color: #1B1440;
box-shadow: 0 16px 32px -12px rgba(15, 10, 40, .55), 0 0 0 4px rgba(255, 255, 255, .18);
}
/* The nav's secondary button — "Log in", or "Go to app" for a visitor already signed in —
sitting immediately left of "Book a call" as the quieter half of that pair.
.mk-btn-ghost's own fill is 2%, which is tuned for the dark closing band; on the violet
chrome it disappears, and a button nobody can see is not an entry point. Scoped to the
header and the menu exactly as the primary above is, so the ghost button everywhere else
on the site keeps the treatment it was drawn for.
Every value here is the existing white-on-violet scale — no colour is introduced. The blur
is what keeps the fill reading as glass over the hero art rather than as grey paint, and it
is why the button holds up in BOTH nav states: over the transparent bar it picks up the
hero, and over the scrolled bar it picks up the frost already behind it.
box-shadow: none drops the indigo cast .mk-btn-sm carries for the solid pill — under a
translucent button that shadow reads as a smudge, not a lift. The lift itself is
.mk-btn-ghost:hover's own translateY(-2px). */
.mk-nav .mk-btn-auth, .mk-mobile .mk-btn-auth {
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.25);
color: #fff;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: none;
}
.mk-nav .mk-btn-auth:hover, .mk-mobile .mk-btn-auth:hover {
background: rgba(255,255,255,.20);
border-color: rgba(255,255,255,.42);
box-shadow: none;
}
/* The menu's two calls to action, stacked. .mk-btn is inline-flex, so without this the two
full-width buttons would sit flush against each other. */
.mk-mobile-cta {
display: flex;
flex-direction: column;
gap: var(--mk-2);
}
/* The press. It compresses slightly BELOW its resting size and snaps back faster than it
went down, which is what makes a button feel physical rather than merely clickable. */
.mk-btn:active {
transform: translateY(0) scale(.98);
transition-duration: .09s;
}
/* The secondary button: an outline that fills rather than a fill that brightens. */
.mk-btn-ghost {
background: rgba(255,255,255,.02);
color: var(--mk-on-dark);
border-color: rgba(255,255,255,.18);
}
.mk-btn-ghost:hover {
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.42);
transform: translateY(-2px);
}
.mk-btn-lg { padding: 16px 30px; font-size: var(--mk-fs-md); }
/* The header's call to action: present, but never the loudest thing in the bar. */
.mk-btn-sm {
padding: 9px 18px;
font-size: var(--mk-fs-sm);
border-radius: var(--mk-r-sm);
box-shadow: 0 6px 16px -10px rgba(78,65,151,.5);
}
.mk-btn-sm:hover { box-shadow: 0 12px 24px -12px rgba(78,65,151,.6); }
.mk-btn-block { width: 100%; }
/* The secondary action everywhere: a link, deliberately lighter than the button. */
.mk-textlink {
display: inline-flex;
align-items: center;
gap: var(--mk-2);
font-weight: 500;
font-size: var(--mk-fs-base);
color: var(--mk-on-dark);
transition: color var(--mk-t) var(--mk-ease-out);
}
.mk-textlink .mk-arw { color: var(--mk-lav-bright); transition: transform var(--mk-t) var(--mk-ease-out); }
.mk-textlink:hover { color: #fff; }
.mk-textlink:hover .mk-arw { transform: translateX(4px); }
/* ─────────────────── 4. Header + mobile menu ─────────────────── */
/*
* Light at rest, and lighter still than the product's chrome: a thin bar, a small mark,
* padded links and a compact call to action. On scroll it settles into a blurred pane
* rather than snapping to a solid one — a slow ease on background, blur and border, so
* the change reads as the page moving underneath rather than the bar changing state.
*/
/* The header groups three things that are each positioned against the VIEWPORT: the bar,
the scrim and the slide-over. It must therefore stay an ordinary, unpositioned,
unfiltered box.
*
* This is not stylistic. `backdrop-filter` — like `filter` and `transform` — makes an
* element a containing block for its fixed-position descendants. The scrolled bar's blur
* used to live on this element, and the scrim and the drawer are inside it, so the moment
* the page scrolled past 12px both of them stopped resolving against the viewport and
* started resolving against the 72px bar. The drawer became a 72px-tall sliver in the top
* corner and the scrim covered only the header: the menu worked at the top of the page and
* was broken everywhere below it, which is exactly how it was reported. The blur belongs on
* `.mk-navbar`, which has no fixed descendants. */
.mk-nav { position: static; }
.mk-navbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 60;
border-bottom: 1px solid transparent;
transition:
background var(--mk-t-slow) var(--mk-ease-out),
border-color var(--mk-t-slow) var(--mk-ease-out),
backdrop-filter var(--mk-t-slow) var(--mk-ease-out),
box-shadow var(--mk-t-slow) var(--mk-ease-out);
}
.mk-nav.is-scrolled .mk-navbar {
/* The hero's deep indigo (#1B1440), translucent — the bar belongs to the gradient it
sits over, not to the old navy. */
background: rgba(27,20,64,.72);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom-color: rgba(255,255,255,.055);
box-shadow: 0 1px 28px rgba(10,7,30,.28);
}
.mk-navrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mk-5);
height: 72px;
}
.mk-brand { display: flex; align-items: center; gap: var(--mk-3); }
.mk-mark { flex: 0 0 auto; filter: drop-shadow(0 0 10px rgba(92,184,214,.28)); }
.mk-word {
font-family: var(--mk-disp);
font-weight: 800;
font-size: 19px;
line-height: 1;
letter-spacing: -.025em;
color: #fff;
}
.mk-word i { color: var(--mk-lav-bright); font-weight: 600; font-style: normal; }
/* Links carry their own padding rather than sitting in a wide gap: the same visual
rhythm, a far larger hit target, and an underline that tracks the label. */
.mk-navlinks { display: flex; align-items: center; gap: var(--mk-1); }
.mk-nl {
position: relative;
padding: var(--mk-2) var(--mk-4);
font-size: 14.5px;
font-weight: 500;
color: var(--mk-on-dark-mut);
transition: color var(--mk-t) var(--mk-ease-out);
}
.mk-nl:hover { color: #fff; }
/* The page you are on. Colour alone would fail contrast-independence, so it also gets a rule.
Every link carries the rule; only the current page's is drawn. Hover previews it at a
third of its weight, so the bar answers the pointer without pretending you navigated. */
.mk-nl::after {
content: "";
position: absolute;
left: var(--mk-4); right: var(--mk-4); bottom: 2px;
height: 2px;
border-radius: 2px;
background: var(--mk-lav-bright);
transform: scaleX(0);
transform-origin: left;
opacity: 0;
transition:
transform var(--mk-t) var(--mk-ease-out),
opacity var(--mk-t) var(--mk-ease-out);
}
.mk-nl:hover::after { transform: scaleX(1); opacity: .35; }
.mk-nl.is-active { color: #fff; }
.mk-nl.is-active::after { transform: scaleX(1); opacity: 1; }
/* The buttons are a GROUP, not two independent controls: the wide margin separates the
pair from the navigation links, and only the first button carries it. The second sits one
small gap from the first, which is what reads as "these two belong together" rather than
as a third and fourth nav item. With one button in the bar this is exactly the old rule. */
.mk-navlinks .mk-btn { margin-left: var(--mk-2); }
.mk-navlinks .mk-btn:first-of-type { margin-left: var(--mk-4); }
.mk-mobile-links a.is-active {
color: #fff;
font-weight: 600;
box-shadow: inset 2px 0 0 var(--mk-lav-bright);
padding-left: var(--mk-3);
}
.mk-navtoggle {
display: none;
background: none;
border: 0;
padding: var(--mk-2);
color: #fff;
cursor: pointer;
}
.mk-scrim {
position: fixed;
inset: 0;
z-index: 65;
background: rgba(6,10,15,.55);
opacity: 0;
transition: opacity var(--mk-t-slow) var(--mk-ease-out);
}
.mk-scrim.is-open { opacity: 1; }
.mk-mobile {
position: fixed;
inset: 0 0 0 auto;
z-index: 70;
width: min(84vw, 340px);
padding: var(--mk-5);
/* The navigation's surface follows the hero gradient it slides over. */
background: linear-gradient(170deg, #1B1440 0%, #2E2160 100%);
box-shadow: -30px 0 60px rgba(0,0,0,.4);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform var(--mk-t-slow) var(--mk-ease-out);
overflow-y: auto;
}
.mk-mobile.is-open { transform: translateX(0); }
.mk-mobile[hidden], .mk-scrim[hidden] { display: none; }
.mk-mobile-close {
align-self: flex-end;
background: none;
border: 0;
padding: var(--mk-1);
margin-bottom: var(--mk-2);
color: #fff;
cursor: pointer;
}
.mk-mobile-links { display: flex; flex-direction: column; }
.mk-mobile-links a {
padding: var(--mk-3) var(--mk-1);
font-size: var(--mk-fs-md);
font-weight: 500;
color: var(--mk-on-dark);
border-bottom: 1px solid var(--mk-hair-dark-soft);
transition: color var(--mk-t) var(--mk-ease-out);
}
.mk-mobile-links a:hover { color: #fff; }
.mk-mobile .mk-btn { margin-top: var(--mk-5); }
/* ──────────────────── 5. Hero + ramp card ──────────────────── */
.mk-hero {
position: relative;
padding: var(--mk-14) 0 var(--mk-13);
color: var(--mk-on-dark);
overflow: hidden;
/* The one-pager's header: deep indigo out of the top-left, violet by the lower right.
Two layers, same four colours — the top layer fades to solid #5C3A9C before the
bottom edge so the section always ends on ONE colour, whatever its height and width
do to the diagonal, giving the band below a single clean edge to step down from. */
background:
linear-gradient(180deg, rgba(92, 58, 156, 0) 62%, #5C3A9C 96%),
linear-gradient(160deg, #1B1440 0%, #2E2160 34%, #4A2F86 70%, #5C3A9C 100%);
}
/*
* The two glows, on their own layer so they can drift. 40 seconds for a journey of about
* 2% of the layer's width — far too slow to watch, but it means the page is never quite
* the same twice, which is the difference between a background and a still image. The
* layer is oversized by 20% so the drift can never expose an edge, and it animates
* `translate`/`scale` only, so it composites on the GPU and repaints nothing.
*/
.mk-hero::before {
content: "";
position: absolute;
inset: -20%;
pointer-events: none;
/* Violet family only, like the one-pager — the cyan glow that used to sit top-right
belonged to the navy hero and would read as a stray colour on this gradient. */
background:
radial-gradient(1100px 620px at 74% 22%, rgba(179,166,219,.17), transparent 60%),
radial-gradient(900px 560px at 10% 78%, rgba(46,33,96,.55), transparent 62%);
animation: mk-drift 40s var(--mk-ease) infinite alternate;
will-change: transform;
}
@keyframes mk-drift {
from { translate: -1.5% -1%; scale: 1; }
to { translate: 1.5% 1%; scale: 1.06; }
}
.mk-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 26px 26px;
mask-image: radial-gradient(1000px 700px at 60% 30%, #000, transparent 75%);
-webkit-mask-image: radial-gradient(1000px 700px at 60% 30%, #000, transparent 75%);
opacity: .55;
}
.mk-hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: var(--mk-9);
align-items: center;
}
/* The headline is the page. It gets the largest step, the tightest leading and the
most negative tracking on the site — nothing else comes close to it. */
.mk-hero h1 {
font-size: var(--mk-fs-h1);
font-weight: 800;
line-height: var(--mk-lh-display);
letter-spacing: var(--mk-ls-display);
color: #fff;
margin: var(--mk-5) 0;
max-width: 15ch;
}
.mk-lede {
font-size: var(--mk-fs-xl);
line-height: 1.68;
color: var(--mk-on-dark-mut);
max-width: 44ch;
margin-bottom: var(--mk-7);
}
.mk-hero-cta { display: flex; align-items: center; gap: var(--mk-5); flex-wrap: wrap; }
/* The signature card. Three shadows: a hairline to define the edge, a deep ambient one
for the drop, and a wide cyan bloom so it reads as lit rather than pasted on. */
.mk-pcard {
position: relative;
padding: var(--mk-5);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--mk-r-panel);
background: linear-gradient(180deg, #1F2C3C, #16212D);
box-shadow: var(--mk-e4), inset 0 1px 0 rgba(255,255,255,.06);
}
.mk-pcard::before {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
border-radius: var(--mk-r-panel);
background: linear-gradient(135deg, rgba(92,184,214,.6), rgba(155,142,196,.42) 45%, transparent 72%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.mk-pc-head { display: flex; align-items: center; gap: var(--mk-3); margin-bottom: var(--mk-5); }
/* The card describes what it is showing rather than who it belongs to (G10). */
.mk-pc-title { font-weight: 600; color: #fff; font-size: var(--mk-fs-sm); line-height: 1.3; }
.mk-pc-head .mk-illus { margin-left: auto; }
.mk-chart {
padding: var(--mk-4) var(--mk-4) var(--mk-2);
border: 1px solid rgba(255,255,255,.055);
border-radius: var(--mk-r-card);
background: rgba(255,255,255,.025);
}
.mk-chart-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--mk-1); }
.mk-t-lab {
font-size: var(--mk-fs-micro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mk-on-dark-mut);
font-weight: 600;
}
.mk-t-val { font-weight: 600; font-size: var(--mk-fs-xs); color: var(--mk-green); }
.mk-ttc { display: block; width: 100%; height: auto; font-family: var(--mk-body); }
.mk-ind { margin-top: var(--mk-5); display: grid; gap: var(--mk-3); }
.mk-ind-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px var(--mk-3);
align-items: center;
}
.mk-ind-lab { font-size: var(--mk-fs-xs); color: var(--mk-on-dark); }
.mk-ind-val {
grid-column: 2; grid-row: 1;
font-family: var(--mk-disp);
font-size: var(--mk-fs-xs);
font-weight: 700;
color: var(--mk-green);
}
.mk-ind-track {
grid-column: 1 / -1;
height: 6px;
border-radius: 99px;
background: rgba(255,255,255,.08);
overflow: hidden;
}
.mk-ind-fill {
display: block;
height: 100%;
width: var(--mk-w, 0);
border-radius: 99px;
background: linear-gradient(90deg, var(--mk-cyan), var(--mk-green));
}
.mk-pc-foot {
margin-top: var(--mk-5);
padding-top: var(--mk-4);
border-top: 1px solid var(--mk-hair-dark-soft);
display: flex;
align-items: flex-start;
gap: var(--mk-2);
font-size: var(--mk-fs-label);
line-height: 1.5;
color: var(--mk-on-dark-mut);
}
/* The caption takes the slack so the Illustrative tag is pushed to the corner, and wraps under
it rather than shortening it when the card is narrow. */
.mk-pc-note { flex: 1 1 auto; min-width: 0; }
/* THE ILLUSTRATIVE TAG. A mockup that is not labelled is a mockup a buyer has to decide about,
and the decision they reach on their own is worse than the one the label gives them. Quiet on
purpose: it is a qualifier, not a badge, so it takes the hairline and the muted ink rather
than the chip's fill — the card should read as confident and honest, not as disclaimed. */
.mk-illus {
flex: 0 0 auto;
align-self: center;
padding: 3px var(--mk-2);
/* --mk-hair-dark, not the -soft one, plus a trace of fill: at .045 on this gradient the
outline disappeared and the word read as a stray line of caption rather than as a tag. */
border: 1px solid var(--mk-hair-dark);
background: rgba(255,255,255,.04);
border-radius: 999px;
font-size: var(--mk-fs-micro);
font-weight: 600;
letter-spacing: .02em;
color: var(--mk-on-dark-mut);
white-space: nowrap;
}
/* Aligned to the first line rather than the block, so the dot stays put when the note
wraps to two lines on a narrow card. */
.mk-pc-foot .mk-dot {
width: 5px; height: 5px;
flex: 0 0 auto;
margin-top: 7px;
border-radius: 50%;
background: var(--mk-lav);
}
/* ────────────────────── 6. Category band ────────────────────── */
/*
* A band of its own, not the hero's tail. It used to open on the exact colour the hero
* settles to (#5C3A9C), which made the two sections read as one endless gradient — a
* reader could not tell where the hero stopped. So it now uses the site's band handoff
* (see "Band handoffs" below): the ground steps DOWN to the gradient's own deep indigo
* — #2E2160 is the hero's second stop, #241B58 the dialog's navy, no new colours — and
* the band answers the hero above with a faint violet spill under a hairline of light,
* exactly the way the dark blocks further down answer the light one.
*/
.mk-cat {
padding: var(--mk-11) 0;
text-align: center;
color: var(--mk-on-dark);
background:
radial-gradient(1100px 340px at 50% 0%, rgba(92, 58, 156, .32), transparent 70%),
linear-gradient(180deg, #2E2160 0%, #241B58 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.mk-cat h2 {
font-size: clamp(26px, 4.2vw, 48px);
font-weight: 600;
line-height: 1.16;
letter-spacing: -.022em;
}
.mk-cat .mk-mut { color: var(--mk-on-dark-mut); }
.mk-cat .mk-hi { color: #fff; }
/* #9B8EC4 (--mk-lav), matching the one-pager's highlight — cyan belonged to the navy. */
.mk-cat .mk-hi b { color: var(--mk-lav); font-weight: 600; }
.mk-sup { margin: var(--mk-6) auto 0; max-width: 44ch; color: var(--mk-on-dark-mut); font-size: var(--mk-fs-xl); }
/* ─────────────────── 7. Sections + stats ─────────────────── */
/*
* Band handoffs. The light block is tinted at BOTH ends — cool coming out of the dark
* above, a shade deeper going into the dark below — and the dark block answers with a
* faint cyan spill and a hairline of light along its top edge. The ground still changes,
* but it reads as a transition rather than a cut.
*/
.mk-light {
background-color: var(--mk-canvas);
background-image:
linear-gradient(180deg, #EBEFF7 0%, rgba(246,248,252,0) 320px),
linear-gradient(0deg, #E7ECF5 0%, rgba(246,248,252,0) 220px);
color: var(--mk-ink);
}
.mk-dark {
background:
radial-gradient(1200px 460px at 50% 0%, rgba(92,184,214,.09), transparent 70%),
linear-gradient(180deg, #0F151E, #141C27);
color: var(--mk-on-dark);
}
/* Only where the dark actually meets the light — consecutive dark bands must not get a
line drawn between them. */
.mk-light + .mk-dark { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.mk-sec { padding: var(--mk-sec-y) 0; }
.mk-sec-tight { padding-top: 0; }
/* Rhythm: the section that opens a light block, and the one that closes it, get one
step more air than the sections stacked between them. */
.mk-light > section:first-child { padding-top: var(--mk-13); }
.mk-light > section:last-child { padding-bottom: var(--mk-13); }
.mk-sec-head { max-width: 64ch; }
.mk-sec-head h2 {
font-size: var(--mk-fs-h2);
line-height: 1.13;
letter-spacing: var(--mk-ls-head);
color: var(--mk-ink);
margin: var(--mk-5) 0 0;
}
.mk-sub, .mk-prob-body { margin-top: var(--mk-5); color: var(--mk-ink-2); line-height: 1.65; }
.mk-sub { font-size: 18px; max-width: 58ch; }
.mk-prob-body { font-size: 18px; max-width: 58ch; }
/* One gap from a section head to whatever it introduces. */
.mk-stats, .mk-mc, .mk-steps, .mk-comp,
.mk-land, .mk-pillars, .mk-cluster, .mk-stages, .mk-timeline {
margin-top: var(--mk-head-gap);
}
/* Two sourced statistics, not three unsourced ones (HP6). */
.mk-src { margin-top: var(--mk-5); font-size: var(--mk-fs-xs); color: var(--mk-ink-3); }
.mk-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mk-grid-gap);
}
.mk-stat {
position: relative;
padding: var(--mk-6) var(--mk-6) var(--mk-5);
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-card);
background: var(--mk-card);
box-shadow: var(--mk-e1);
overflow: hidden;
transition: transform var(--mk-t) var(--mk-ease-out), box-shadow var(--mk-t) var(--mk-ease-out);
}
.mk-stat::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--mk-cyan), var(--mk-lav));
}
/* Hover lift: shared card block, section 14. */
.mk-num {
display: block;
font-family: var(--mk-disp);
font-weight: 800;
font-size: clamp(32px, 4.2vw, 46px);
color: var(--mk-ink);
letter-spacing: -.03em;
line-height: 1;
}
.mk-cap { display: block; margin-top: var(--mk-3); color: var(--mk-ink-2); font-size: var(--mk-fs-base); line-height: 1.5; }
/* The problem section is ONE two-column row (final fixes, fix 1): heading and copy on the
left, the two stat cards stacked on the right with their source line underneath. The
section used to change structure halfway down — heading in a half-width column, then
cards spanning the full width — which read as a layout accident. */
.mk-prob {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: var(--mk-grid-gap);
align-items: center;
}
/* Inside the row the cards sit beside the head, not under it, so the one-gap-below-a-head
rule does not apply. */
.mk-prob .mk-stats { margin-top: 0; grid-template-columns: 1fr; }
/* The practice section: copy on the left, one panel on the right (final fixes, fix 2).
The panel is a single indicator in two states — before and after — deliberately not a
three-step diagram. Its lower bar fills on scroll through the shared reveal machinery
(see the .mk-dpptrack selectors in the guarded animation block near the end). */
.mk-dpp {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: var(--mk-grid-gap);
align-items: center;
}
.mk-dpp-panel {
position: relative;
padding: var(--mk-6);
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-panel);
background: var(--mk-card);
box-shadow: var(--mk-e1);
overflow: hidden;
}
/* The same top accent the stat cards wear, so the page's cards speak one language. */
.mk-dpp-panel::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--mk-cyan), var(--mk-lav));
}
.mk-dpp-t { font-size: var(--mk-fs-md); font-weight: 700; color: var(--mk-ink); }
.mk-dpp-s { margin-top: 2px; font-size: var(--mk-fs-xs); color: var(--mk-ink-3); }
.mk-dpprow {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
row-gap: 8px;
margin-top: var(--mk-5);
}
.mk-dpp-lab { font-size: var(--mk-fs-xs); font-weight: 600; color: var(--mk-ink); }
.mk-dpp-state { font-family: var(--mk-disp); font-size: var(--mk-fs-label); font-weight: 700; }
.mk-dpp-behind { color: var(--mk-amber-ink); }
.mk-dpp-at { color: var(--mk-green); }
.mk-dpptrack {
grid-column: 1 / -1;
height: 8px;
border-radius: 99px;
background: var(--mk-line);
overflow: hidden;
}
.mk-dpptrack > i { display: block; height: 100%; width: var(--mk-w, 0); border-radius: 99px; }
.mk-dpptrack-still > i { background: var(--mk-amber); }
.mk-dpptrack:not(.mk-dpptrack-still) > i { background: linear-gradient(90deg, var(--mk-cyan), var(--mk-green)); }
/* The "before" bar holds still — only the improvement moves. Double-classed to outrank the
shared reveal selector regardless of where either block sits in the file. */
.mk-reveal-ready .mk-dpptrack.mk-dpptrack-still > i { width: var(--mk-w, 0); transition: none; }
.mk-dpp-note {
margin-top: var(--mk-5);
padding-top: var(--mk-4);
border-top: 1px solid var(--mk-hair);
font-size: var(--mk-fs-xs);
color: var(--mk-ink-3);
line-height: 1.5;
}
/* ─────────────────── 8. Measure / Close ─────────────────── */
.mk-mc {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: var(--mk-grid-gap);
align-items: stretch;
}
.mk-mc-card { padding: var(--mk-7) var(--mk-6); border-radius: var(--mk-r-panel); }
.mk-mc-measure {
background: linear-gradient(165deg, #1C2B3B, #131E2A);
color: var(--mk-on-dark);
box-shadow: var(--mk-e3);
}
.mk-mc-close {
background: var(--mk-card);
color: var(--mk-ink);
border: 1px solid var(--mk-hair);
box-shadow: var(--mk-e1);
}
.mk-mc-tag {
display: inline-flex;
align-items: center;
gap: var(--mk-2);
font-weight: 600;
font-size: var(--mk-fs-label);
line-height: 1;
letter-spacing: var(--mk-ls-label);
text-transform: uppercase;
}
.mk-mc-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
.mk-mc-measure .mk-mc-tag { color: var(--mk-cyan-bright); }
.mk-mc-measure .mk-mc-tag::before { background: var(--mk-cyan); box-shadow: 0 0 9px var(--mk-cyan); }
.mk-mc-close .mk-mc-tag { color: var(--mk-lav-ink); }
.mk-mc-close .mk-mc-tag::before { background: var(--mk-lav); }
.mk-mc-card h3 { font-size: var(--mk-fs-h3); line-height: 1.25; margin: var(--mk-4) 0 var(--mk-3); }
.mk-mc-measure h3 { color: #fff; }
.mk-mc-body { font-size: var(--mk-fs-md); line-height: var(--mk-lh-body); }
.mk-mc-measure .mk-mc-body { color: var(--mk-on-dark-mut); }
.mk-mc-close .mk-mc-body { color: var(--mk-ink-2); }
.mk-bmk { display: grid; gap: var(--mk-3); margin-top: var(--mk-6); }
.mk-bmk-row { display: grid; grid-template-columns: 128px 1fr auto; align-items: center; gap: var(--mk-3); }
.mk-bmk-lab { font-size: var(--mk-fs-xs); color: var(--mk-on-dark); }
.mk-bmk-track { position: relative; height: 8px; border-radius: 99px; background: rgba(255,255,255,.09); }
.mk-bmk-bench {
position: absolute;
top: -4px; bottom: -4px; right: 0;
width: 2px;
border-radius: 2px;
background: rgba(255,255,255,.5);
}
.mk-bmk-fill { display: block; height: 100%; width: var(--mk-w, 0); border-radius: 99px; }
.mk-bmk-val { font-family: var(--mk-disp); font-size: var(--mk-fs-label); font-weight: 700; }
.mk-gym {
margin-top: var(--mk-6);
padding: var(--mk-4) var(--mk-5);
border: 1px dashed var(--mk-line);
border-radius: var(--mk-r-card);
background: var(--mk-canvas);
}
.mk-scn { display: flex; align-items: center; gap: var(--mk-3); font-size: var(--mk-fs-sm); font-weight: 600; color: var(--mk-ink); }
.mk-pill {
font-size: var(--mk-fs-micro);
font-weight: 600;
color: var(--mk-lav-ink);
background: rgba(155,142,196,.14);
border: 1px solid rgba(155,142,196,.28);
padding: 3px var(--mk-2);
border-radius: 999px;
}
.mk-lock {
margin-top: var(--mk-3);
display: flex;
align-items: flex-start;
gap: var(--mk-2);
font-size: var(--mk-fs-xs);
color: var(--mk-ink-2);
line-height: 1.5;
}
.mk-lock .mk-ico { color: var(--mk-indigo-a); margin-top: 2px; }
.mk-mc-foot {
grid-column: 1 / -1;
margin: var(--mk-7) auto 0;
max-width: 60ch;
text-align: center;
color: var(--mk-ink-2);
font-size: var(--mk-fs-lg);
line-height: var(--mk-lh-body);
}
.mk-mc-foot b { color: var(--mk-ink); font-weight: 700; }
/* The Illustrative tag on a light ground. Same recipe as the hero card's, in the light
palette — it labels a mockup wherever one sits on the page canvas rather than on a dark
card, and it is the site's one way of saying "shape, not values". */
.mk-illus-light {
border-color: var(--mk-hair);
background: var(--mk-card);
color: var(--mk-ink-3);
}
.mk-illus-inline { align-self: baseline; }
/* Scoped to its track rather than a bare `.mk-bench`, which the How-it-works benchmark
section already owns — one name, one component. */
/* ──────────────────── 10. How it works ──────────────────── */
/* Three stages, not four steps (HP5). */
.mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mk-4); }
.mk-step {
display: flex;
flex-direction: column;
padding: var(--mk-5);
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-card);
background: var(--mk-card);
box-shadow: var(--mk-e1);
transition: transform var(--mk-t) var(--mk-ease-out), box-shadow var(--mk-t) var(--mk-ease-out);
}
/* Hover lift: shared card block, section 14. */
.mk-no { font-family: var(--mk-disp); font-weight: 800; font-size: var(--mk-fs-sm); letter-spacing: .04em; color: var(--mk-indigo-ink); }
.mk-step h3 { font-size: var(--mk-fs-h4); line-height: var(--mk-lh-snug); margin: var(--mk-3) 0 var(--mk-2); color: var(--mk-ink); letter-spacing: -.015em; }
.mk-step-body { font-size: var(--mk-fs-sm); color: var(--mk-ink-2); line-height: 1.6; }
/* ───────────────────── 11. Comparison ───────────────────── */
/* Deliberately narrower than the full container: after three full-width grids the page
needs a change of measure, and the contrast is easier to read short. */
.mk-comp { display: grid; gap: var(--mk-3); max-width: var(--mk-measure-wide); }
.mk-comp-row {
display: grid;
grid-template-columns: 1fr auto 1.15fr;
align-items: center;
gap: var(--mk-5);
padding: var(--mk-5) var(--mk-6);
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-card);
background: var(--mk-card);
}
.mk-who { font-weight: 600; font-size: var(--mk-fs-md); color: var(--mk-ink-2); }
.mk-comp-row .mk-arw { color: var(--mk-ink-3); }
.mk-what { font-size: var(--mk-fs-md); color: var(--mk-ink-2); }
.mk-comp-us {
position: relative;
border: 0;
background: linear-gradient(120deg, #16212E, #1B2A3B);
box-shadow: var(--mk-e3);
}
.mk-comp-us::before {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
border-radius: var(--mk-r-card);
background: linear-gradient(120deg, var(--mk-cyan), var(--mk-lav));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.mk-comp-us .mk-who { display: flex; align-items: center; gap: var(--mk-3); color: #fff; font-weight: 700; }
.mk-comp-us .mk-what { color: var(--mk-on-dark); }
.mk-comp-us .mk-arw { color: var(--mk-cyan-bright); }
.mk-comp-note { margin-top: var(--mk-7); max-width: 60ch; font-size: var(--mk-fs-xl); line-height: var(--mk-lh-body); color: var(--mk-ink-2); }
.mk-comp-note b { color: var(--mk-ink); font-weight: 700; }
.mk-dividend {
display: flex;
gap: var(--mk-5);
margin-top: var(--mk-6);
max-width: 66ch;
padding: var(--mk-5);
border: 1px solid var(--mk-hair);
border-left: 3px solid var(--mk-lav);
border-radius: var(--mk-r-card);
background: var(--mk-card);
box-shadow: var(--mk-e1);
}
.mk-dividend .mk-k {
font-size: var(--mk-fs-micro);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mk-lav-ink);
white-space: nowrap;
padding-top: 3px;
}
.mk-dividend p { font-size: var(--mk-fs-base); color: var(--mk-ink-2); line-height: var(--mk-lh-body); }
/* ───────── 12. Credibility, cohort, CTA ───────── */
.mk-cred { padding: var(--mk-11) 0 var(--mk-10); }
.mk-cred-lead {
font-family: var(--mk-disp);
font-weight: 600;
font-size: clamp(21px, 2.5vw, 27px);
line-height: 1.28;
color: #fff;
letter-spacing: -.022em;
max-width: 24ch;
}
.mk-cred-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mk-grid-gap); margin-top: var(--mk-7); }
/* Two confirmed proofs, wide (final fixes, fix 3). Two cards read as confident; three with
one padded read as padding. */
.mk-cred-pair { grid-template-columns: repeat(2, 1fr); }
.mk-cred-pair .mk-cred-item { padding: var(--mk-6); }
.mk-cred-item {
padding: var(--mk-6) var(--mk-5);
border: 1px solid var(--mk-hair-dark);
border-radius: var(--mk-r-card);
background: rgba(255,255,255,.02);
transition: border-color var(--mk-t) var(--mk-ease-out), background var(--mk-t) var(--mk-ease-out);
}
/* The lift and the border are shared (section 14); the surface lightening is this card's own. */
.mk-cred-item:hover { background: rgba(255,255,255,.035); }
.mk-big { font-family: var(--mk-disp); font-weight: 800; font-size: var(--mk-fs-h3); line-height: 1.25; color: #fff; letter-spacing: -.022em; }
.mk-u { color: var(--mk-cyan-bright); }
.mk-desc { margin-top: var(--mk-3); font-size: var(--mk-fs-sm); color: var(--mk-on-dark-mut); line-height: 1.6; }
.mk-found { padding: 0 0 var(--mk-11); }
.mk-found-panel {
position: relative;
padding: var(--mk-9) var(--mk-8);
border: 1px solid rgba(255,255,255,.09);
border-radius: var(--mk-r-panel);
overflow: hidden;
background:
radial-gradient(700px 300px at 85% 0%, rgba(122,107,184,.24), transparent 60%),
linear-gradient(120deg, #182534, #1E2E40);
box-shadow: var(--mk-e3);
}
.mk-found-panel::after {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--mk-r-panel);
background: linear-gradient(120deg, rgba(92,184,214,.45), rgba(155,142,196,.4));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.mk-found-inner { position: relative; z-index: 1; max-width: 60ch; }
.mk-found-inner h2 { font-size: clamp(25px, 3vw, 36px); line-height: 1.16; color: #fff; margin: var(--mk-5) 0 var(--mk-4); }
.mk-found-inner p { color: var(--mk-on-dark-mut); font-size: var(--mk-fs-xl); line-height: var(--mk-lh-body); margin-bottom: var(--mk-6); }
/*
* The closing call to action. The one place on the page with a glow behind it, because it
* is the one place the whole page is pointing at. Its gradient starts on the tone the
* preceding dark band ends on and finishes on the footer's opening tone, so the last
* three bands of every page read as one continuous close.
*/
.mk-cta-band {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #141C27, #0D131B);
}
/* The glow behind the closing call to action. It swells as the band arrives — the one
place on the site where the motion is meant to be noticed rather than merely felt. */
.mk-cta-band::before {
content: "";
position: absolute;
left: 50%; top: -12%;
width: min(900px, 130%);
height: 560px;
transform: translateX(-50%);
background: radial-gradient(closest-side, rgba(122,107,184,.24), transparent 72%);
pointer-events: none;
}
.mk-reveal-ready .mk-cta-band::before {
opacity: 0;
transform: translateX(-50%) scale(.82);
transition: opacity 1.2s var(--mk-ease-out) .1s, transform 1.4s var(--mk-ease-out) .1s;
}
.mk-reveal-ready .mk-cta-band:has(.is-visible)::before {
opacity: 1;
transform: translateX(-50%) scale(1);
}
/* VERTICAL PADDING ONLY. This element carries `.mk-wrap` as well, so a `padding`
shorthand here overrides the container's own horizontal gutter — same specificity,
later in the file — and the closing section on every page ran flush to both screen
edges on a phone. `padding-block` says what is meant and leaves the gutter alone. */
.mk-cta { position: relative; z-index: 1; padding-block: var(--mk-13); text-align: center; }
.mk-cta h2 {
font-size: clamp(30px, 4.2vw, 50px);
line-height: 1.1;
letter-spacing: var(--mk-ls-head);
color: #fff;
max-width: 18ch;
margin: 0 auto var(--mk-5);
}
.mk-cta p { color: var(--mk-on-dark-mut); font-size: var(--mk-fs-xl); line-height: var(--mk-lh-body); max-width: 48ch; margin: 0 auto var(--mk-7); }
/* The specific offer under the button (HP7). It must out-specify `.mk-cta p` above, which
sizes the lede. Quieter than the lede and below the button on purpose: it is the reason
to press it, not a second pitch competing with the headline. */
.mk-cta p.mk-cta-offer {
margin: var(--mk-5) auto 0;
max-width: 46ch;
font-size: var(--mk-fs-sm);
color: var(--mk-on-dark-faint);
}
/* ─────────────────────── 13. Footer ─────────────────────── */
/* A continuation of the dark closing bands, not a separate slab: it opens with the same
gradient the CTA ends on and carries the mark, so the site signs off the way it opened. */
.mk-ft {
/* The same four colours as the hero band, on the same 160deg diagonal: the page
opens and closes on one gradient. Kept in sync with `.mk-hero` by hand. */
background: linear-gradient(160deg, #1B1440 0%, #2E2160 34%, #4A2F86 70%, #5C3A9C 100%);
/* The footer's greys were mixed against a near-black ground. On the banner gradient
they lose the contrast they had — worst at the bright lower-right corner, where the
legal line measured 2.0:1. Same three-step hierarchy, re-pitched onto the violet and
measured against the actual pixel behind each element, not the average. */
color: #D3D7F1;
padding: var(--mk-11) 0 var(--mk-7);
border-top: 1px solid var(--mk-hair-dark-soft);
}
/* Five columns, at the wireframe's own proportions: the brand takes the widest, Contact
the second widest (its email is the longest string in the row), the three link columns
share the rest evenly. */
.mk-ft-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: var(--mk-7) var(--mk-6); }
.mk-ft-brand-row { display: flex; align-items: center; gap: var(--mk-3); }
/* THE TAGLINE HOLDS TWO LINES, NOT WHATEVER FITS. 28ch was narrower than the promise
("See the miss coming. Close the gap." is 35 characters), so the sentence broke mid-phrase
however the column fell. Each thought is its own block — the category cannot be split from
itself, and the promise gets a measure wide enough to stay whole at every width the brand
column is given. `pretty` is the fallback for the narrowest phones, where even this has to
wrap: it moves the break off a one-word last line instead of leaving an orphan. */
.mk-ft-brand p { margin-top: var(--mk-4); font-size: var(--mk-fs-sm); max-width: 28ch; line-height: 1.6; }
.mk-ft-tag { max-width: 38ch; }
/* The two lines are one voice. The lead is the category and the line under it is the
promise, but neither outranks the other, so they share the panel's weight and colour
rather than the lead arriving semibold and a shade brighter than everything around it. */
.mk-ft-tag-lead,
.mk-ft-tag-line { display: block; text-wrap: pretty; }
.mk-ft-col h2 {
font-family: var(--mk-body);
font-size: var(--mk-fs-micro);
letter-spacing: var(--mk-ls-label);
text-transform: uppercase;
color: #B4B9E0;
font-weight: 600;
margin: 0 0 var(--mk-4);
}
.mk-ft-col a, .mk-ft-col span {
display: block;
font-size: var(--mk-fs-sm);
color: #D3D7F1;
margin-bottom: var(--mk-3);
transition: color var(--mk-t) var(--mk-ease-out);
}
.mk-ft-col a:hover { color: #fff; }
.mk-ft-col a[aria-current="page"] { color: #fff; }
/* The one social link, under the address in the Contact column. It must out-specify
`.mk-ft-col a` above, which makes every link in the column a muted full-width block.
White rather than muted, because a glyph with no label beside it has to be legible at a
glance; the padding is hit area rather than chrome, extending right and down from a mark
that stays flush with the column's left edge so nothing looks indented. Hover runs the
column's transition backwards — white to muted — since it has nowhere brighter to go. */
.mk-ft-col a.mk-ft-social {
display: inline-flex;
align-items: center;
width: max-content;
margin: 0;
padding: 8px 14px 8px 0;
color: #fff;
}
.mk-ft-col a.mk-ft-social:hover { color: var(--mk-on-dark-mut); }
.mk-ft-social svg { display: block; }
.mk-ft-bottom {
margin-top: var(--mk-9);
padding-top: var(--mk-5);
border-top: 1px solid var(--mk-hair-dark-soft);
display: flex;
justify-content: space-between;
gap: var(--mk-4);
flex-wrap: wrap;
font-size: var(--mk-fs-label);
color: #B9BEE4;
}
/* ════════════════ How it works (/how-it-works) ════════════════
Page-specific components. Everything above — nav, hero shell, buttons, sections,
reveal, footer — is shared and reused as-is. */
/* Single-column hero variant, for pages with no companion card beside the copy. */
.mk-hero-inner { position: relative; z-index: 2; max-width: 780px; }
.mk-hero-inner h1 { max-width: 17ch; }
.mk-hero-inner .mk-lede { max-width: 52ch; }
/* The end-to-end loop stepper under the hero. */
/* The benchmark section. */
.mk-bench { display: grid; grid-template-columns: 1fr 1.02fr; gap: var(--mk-9); align-items: center; }
.mk-bench-h { font-size: var(--mk-fs-h2); line-height: 1.13; margin-top: var(--mk-5); letter-spacing: var(--mk-ls-head); }
.mk-bench-body { color: var(--mk-ink-2); font-size: 18px; line-height: 1.65; margin-top: var(--mk-5); max-width: 52ch; }
.mk-quote {
margin: var(--mk-6) 0 0;
padding: var(--mk-5);
border: 1px solid var(--mk-hair);
border-left: 3px solid var(--mk-lav);
border-radius: var(--mk-r-card);
background: var(--mk-card);
box-shadow: var(--mk-e1);
}
.mk-quote p {
font-family: var(--mk-disp);
font-weight: 500;
font-size: var(--mk-fs-lg);
line-height: 1.5;
color: var(--mk-ink);
letter-spacing: -.01em;
}
.mk-bchart {
margin: 0;
padding: var(--mk-5) var(--mk-5) var(--mk-4);
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-panel);
background: var(--mk-card);
box-shadow: var(--mk-e1);
}
.mk-bc-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mk-3); margin-bottom: var(--mk-2); }
.mk-bc-t { font-size: var(--mk-fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--mk-ink-3); font-weight: 700; }
.mk-bchart svg { display: block; width: 100%; height: auto; font-family: var(--mk-body); }
.mk-bleg { display: flex; gap: var(--mk-5); margin: var(--mk-3) 0 0; flex-wrap: wrap; }
.mk-bleg span { display: inline-flex; align-items: center; gap: var(--mk-2); font-size: var(--mk-fs-xs); color: var(--mk-ink-2); }
.mk-sw-band { width: 16px; height: 10px; border-radius: 3px; background: rgba(92,184,214,.28); border: 1px solid rgba(92,184,214,.5); }
.mk-sw-line { width: 16px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--mk-cyan), var(--mk-green)); }
/* The three stages (HIW4). They replaced five walkthrough rows that each carried a product
card, so the two-column row went with them: with no mockup to sit beside, the copy reads
better as three equal columns than as three lopsided rows of text and empty space. */
.mk-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mk-6); }
.mk-stage {
display: flex;
flex-direction: column;
padding-top: var(--mk-5);
border-top: 2px solid var(--mk-hair);
min-width: 0;
}
.mk-stage h3 {
font-size: var(--mk-fs-h4);
line-height: var(--mk-lh-snug);
color: var(--mk-ink);
margin: var(--mk-4) 0 var(--mk-3);
letter-spacing: -.015em;
}
.mk-stage p { color: var(--mk-ink-2); font-size: var(--mk-fs-sm); line-height: 1.65; }
/* What you hold at day 90 (HIW5). A single centred statement, because it is the one
conclusion the page builds to and it should not look like another feature block. */
.mk-d90 { max-width: var(--mk-measure-wide); margin-inline: auto; text-align: center; }
.mk-d90 h2 {
font-size: var(--mk-fs-h2);
line-height: var(--mk-lh-snug);
letter-spacing: var(--mk-ls-head);
color: var(--mk-ink);
margin: var(--mk-3) 0 0;
}
.mk-d90-body {
color: var(--mk-ink-2);
font-size: var(--mk-fs-xl);
line-height: var(--mk-lh-body);
max-width: 60ch;
margin: var(--mk-5) auto 0;
}
.mk-snum {
display: inline-flex;
align-items: center;
gap: var(--mk-3);
font-family: var(--mk-disp);
font-weight: 800;
font-size: var(--mk-fs-base);
color: var(--mk-indigo-ink);
letter-spacing: .04em;
}
.mk-snum::after { content: ""; width: 34px; height: 1px; background: var(--mk-line); }
/* Product UI card used by each walkthrough step. */
/* The data promise. */
.mk-data {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--mk-8);
align-items: center;
padding: var(--mk-8);
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-panel);
background: var(--mk-card);
box-shadow: var(--mk-e1);
}
.mk-data h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; color: var(--mk-ink); margin-top: var(--mk-4); }
.mk-data p { margin-top: var(--mk-4); color: var(--mk-ink-2); font-size: var(--mk-fs-md); line-height: var(--mk-lh-body); }
.mk-chips { display: flex; flex-direction: column; gap: var(--mk-3); }
.mk-dchip {
display: flex;
align-items: center;
gap: var(--mk-3);
padding: var(--mk-3) var(--mk-4);
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-card);
background: var(--mk-canvas);
font-size: var(--mk-fs-sm);
color: var(--mk-ink);
font-weight: 500;
}
.mk-dchip .mk-ico { color: var(--mk-indigo-a); }
/* One view — the same loop from each role, on the dark closing panel. */
.mk-oneview { padding: var(--mk-12) 0 var(--mk-9); }
.mk-oneview .mk-sec-head h2 { color: #fff; }
.mk-oneview .mk-sub { color: var(--mk-on-dark-mut); }
.mk-cluster { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mk-grid-gap); }
/* One role, one line (HIW7). These were three working product screens; what is left is the
audience and what that audience gets, so the card is now type on a panel and nothing else. */
.mk-rolecard {
display: flex;
flex-direction: column;
gap: var(--mk-3);
padding: var(--mk-6);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--mk-r-card);
background: linear-gradient(180deg, #1F2C3C, #16212D);
box-shadow: var(--mk-e3);
min-width: 0;
}
.mk-roleline {
color: var(--mk-on-dark);
font-size: var(--mk-fs-md);
line-height: var(--mk-lh-body);
}
.mk-dpui-role { font-size: var(--mk-fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-cyan-bright); }
/* ════════════════ Why RampVera (/why-rampvera) ════════════════
Page-specific components. Nav, hero shell, buttons, sections, category band, reveal and
footer are all shared from above. */
/* The gap card: completion against contribution, with the distance named between them. */
.mk-gapcard {
position: relative;
padding: var(--mk-5);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--mk-r-panel);
background: linear-gradient(180deg, #1F2C3C, #16212D);
box-shadow: var(--mk-e4), inset 0 1px 0 rgba(255,255,255,.06);
}
.mk-gapcard::before {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
border-radius: var(--mk-r-panel);
background: linear-gradient(135deg, rgba(92,184,214,.55), rgba(155,142,196,.42) 45%, transparent 72%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.mk-gc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-3); margin-bottom: var(--mk-5); }
.mk-gc-t { font-size: var(--mk-fs-xs); font-weight: 700; color: #fff; }
.mk-gc-s { font-size: var(--mk-fs-label); color: var(--mk-on-dark-mut); }
.mk-meter { margin-bottom: var(--mk-4); }
.mk-ml { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-3); margin-bottom: 7px; }
.mk-mk-k { font-size: var(--mk-fs-xs); color: var(--mk-on-dark); }
.mk-mk-v { font-family: var(--mk-disp); font-weight: 700; font-size: var(--mk-fs-base); }
.mk-amber-ink-solid { color: var(--mk-amber); }
.mk-mtrack { display: block; height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.mk-mtrack > i { display: block; height: 100%; width: var(--mk-w, 0); border-radius: 99px; }
.mk-msub { margin-top: 7px; font-size: var(--mk-fs-micro); color: var(--mk-on-dark-mut); display: flex; align-items: center; gap: 6px; }
/* The dashed rule with "The gap" sitting on it — the point of the whole card. */
.mk-gc-gap { position: relative; margin: var(--mk-1) 0 var(--mk-4); border-top: 1px dashed rgba(255,255,255,.16); }
.mk-gc-gap span {
position: absolute;
top: -9px; left: 50%;
transform: translateX(-50%);
padding: 0 var(--mk-3);
background: #1B2836;
font-size: 10.5px;
letter-spacing: var(--mk-ls-label);
text-transform: uppercase;
color: var(--mk-lav-bright);
font-weight: 700;
}
.mk-gc-foot {
margin-top: var(--mk-4);
padding-top: var(--mk-4);
border-top: 1px solid var(--mk-hair-dark-soft);
font-size: var(--mk-fs-label);
line-height: 1.55;
color: var(--mk-on-dark);
font-weight: 500;
}
/* The measurement gap over time. */
.mk-gap-body { color: var(--mk-ink-2); font-size: 18px; line-height: 1.68; margin-top: var(--mk-5); max-width: 62ch; }
.mk-gap-body b { color: var(--mk-ink); font-weight: 700; }
.mk-timeline {
padding: var(--mk-6) var(--mk-7) var(--mk-5);
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-panel);
background: var(--mk-card);
box-shadow: var(--mk-e1);
}
.mk-tl-track {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: var(--mk-2);
}
.mk-tl-line {
position: absolute;
top: 15px; left: 3%; right: 3%;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, var(--mk-green) 0%, var(--mk-line) 14%, var(--mk-line) 66%, var(--mk-amber) 100%);
}
/* The hatched stretch is the invisible middle — the months nobody can see into. */
.mk-tl-invisible {
position: absolute;
top: 9px; left: 16%; right: 20%;
height: 16px;
border: 1px dashed var(--mk-line);
border-radius: var(--mk-2);
background: repeating-linear-gradient(45deg, rgba(138,147,166,.10), rgba(138,147,166,.10) 6px, transparent 6px, transparent 12px);
}
.mk-tl-node {
position: relative;
z-index: 2;
width: 32%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--mk-2);
}
.mk-tl-node:first-of-type { align-items: flex-start; text-align: left; }
.mk-tl-node:last-of-type { align-items: flex-end; text-align: right; }
.mk-tl-dot {
width: 30px; height: 30px;
display: grid;
place-items: center;
border: 2px solid var(--mk-line);
border-radius: 50%;
background: var(--mk-card);
color: var(--mk-ink-3);
}
.mk-tl-ok { border-color: var(--mk-green); color: var(--mk-ok-ink); }
.mk-tl-warn { border-color: var(--mk-amber); color: var(--mk-amber-ink); }
.mk-tl-when { font-family: var(--mk-disp); font-weight: 700; font-size: var(--mk-fs-xs); color: var(--mk-ink); }
.mk-tl-what { font-size: var(--mk-fs-xs); line-height: 1.5; color: var(--mk-ink-2); max-width: 20ch; }
.mk-tl-cap { text-align: center; margin-top: var(--mk-6); padding-top: var(--mk-4); border-top: 1px solid var(--mk-hair-soft); font-size: var(--mk-fs-xs); color: var(--mk-ink-3); }
/* The landscape cards. */
.mk-land { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mk-grid-gap); }
.mk-lcard {
padding: var(--mk-6) var(--mk-5);
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-card);
background: var(--mk-card);
box-shadow: var(--mk-e1);
transition: transform var(--mk-t) var(--mk-ease-out), box-shadow var(--mk-t) var(--mk-ease-out);
}
/* Hover lift: shared card block, section 14. */
.mk-lk { font-size: var(--mk-fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-ink-3); }
.mk-lcard h3 { font-size: var(--mk-fs-h4); line-height: var(--mk-lh-snug); color: var(--mk-ink); margin: var(--mk-3) 0 var(--mk-2); letter-spacing: -.015em; }
.mk-lcard p { font-size: var(--mk-fs-sm); color: var(--mk-ink-2); line-height: 1.6; }
.mk-verdict { margin-top: var(--mk-4); padding-top: var(--mk-3); border-top: 1px solid var(--mk-hair-soft); font-size: var(--mk-fs-xs); color: var(--mk-ink-3); }
.mk-lcard-us {
position: relative;
border: 0;
background: linear-gradient(165deg, #1C2B3B, #131E2A);
box-shadow: var(--mk-e3);
}
.mk-lcard-us::before {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
border-radius: var(--mk-r-card);
background: linear-gradient(135deg, var(--mk-cyan), var(--mk-lav));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.mk-lcard-us .mk-lk { color: var(--mk-cyan-bright); display: flex; align-items: center; gap: var(--mk-2); }
.mk-lcard-us h3 { color: #fff; }
.mk-lcard-us p { color: var(--mk-on-dark-mut); }
.mk-lcard-us .mk-verdict { border-top-color: rgba(255,255,255,.1); color: var(--mk-cyan-bright); font-weight: 600; }
/* Deliver / Measure / Close. `.mk-pillar`, not `.mk-pill` — that name belongs to the
"recommended" chip on the home page, which this rule used to swallow whole. */
.mk-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mk-grid-gap); }
.mk-pillar {
padding: var(--mk-6) var(--mk-5);
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-card);
background: var(--mk-card);
box-shadow: var(--mk-e1);
transition: transform var(--mk-t) var(--mk-ease-out), box-shadow var(--mk-t) var(--mk-ease-out);
}
/* Hover lift: shared card block, section 14. */
.mk-pi { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--mk-r-btn); margin-bottom: var(--mk-4); }
.mk-pi-lav { background: rgba(155,142,196,.16); color: var(--mk-lav-ink); }
.mk-pi-cyan { background: rgba(92,184,214,.16); color: #2E7E99; }
.mk-plab { font-size: var(--mk-fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-ink-3); }
.mk-pillar h3 { font-size: var(--mk-fs-h4); color: var(--mk-ink); margin: var(--mk-2) 0; letter-spacing: -.015em; line-height: var(--mk-lh-snug); }
.mk-pillar p { font-size: var(--mk-fs-sm); color: var(--mk-ink-2); line-height: 1.6; }
/* The dividend, as its own closing note rather than a full section. */
.mk-divsec { padding: 0 0 var(--mk-sec-y); }
.mk-dividend-lg { max-width: 74ch; margin-top: 0; padding: var(--mk-6); gap: var(--mk-5); }
.mk-dividend-h { font-size: var(--mk-fs-h4); color: var(--mk-ink); letter-spacing: -.015em; margin-bottom: var(--mk-2); }
.mk-dividend-lg p { font-size: var(--mk-fs-base); line-height: var(--mk-lh-body); }
/* ═══════════════ About (/about) ═══════════════
Page-specific components. Hero shell, buttons, sections, cards, reveal and footer are
all shared from above; this adds the four things only this page has. */
/* THE BANNER SENTENCE IS ONE LINE, AND THE COLUMN AROUND IT IS WHY IT WAS TWO.
The heading was capped twice over — 17ch on itself, 780px on the column — while the page's
own content measure beside it is 1116px. So a sentence meant to land in one piece broke in
the middle of itself. Both caps come off here and the heading gets the whole measure.
Its SIZE then has to come from that measure rather than from the viewport. `--mk-fs-h1` is
a vw clamp, but past 1244px the column stops growing and the viewport does not, so a
vw-sized heading keeps outgrowing the space it has to sit in. Nineteen is the divisor this
sentence needs: at 66px it draws 1221px, which is 18.5 times its own size, and 19 keeps a
little over 2% in hand for a fallback face that sets wider than the webfont. Reword the
heading and this number has to be re-checked — that is the price of holding one specific
sentence to one line, and it is why the rule reaches no further than this one heading.
Above 1200px only. Below that the sentence wraps, which is what the tablet and phone
layouts already do, and the column keeps its 780px so nothing else in the hero moves. */
.mk-hero-about .mk-hero-inner { max-width: none; }
.mk-hero-about .mk-hero-inner h1 { max-width: 17ch; }
@media (min-width: 1200px) {
.mk-hero-about .mk-hero-inner h1 {
max-width: none;
font-size: min(var(--mk-fs-h1), calc((min(var(--mk-maxw), 100vw) - 2 * var(--mk-gutter)) / 19));
}
}
/* The lede fills the widened column too. It was still holding the 52ch of the shared
single-column hero rule (.mk-hero-inner .mk-lede), which is the right measure while that
column is 780px and the wrong one once About's column is the full page width: the
paragraph sat at a little over half the width of the heading above it, which reads as a
mistake rather than as a deliberate measure.
Scoped to this hero. How it works still uses the 780px column, where 52ch is most of the
width and removing the cap would change nothing worth changing. */
.mk-hero-about .mk-hero-inner .mk-lede { max-width: none; }
/* The credentials keep the measure the heading just gave up. The column widened for the
heading's sake alone; left to fill it, the strip pulls "Enabled 1000+ sellers" up onto the
first line and the standing reads as three claims and an afterthought instead of two and
two. */
.mk-hero-about .mk-credstrip { max-width: 780px; }
/* Credentials, on one line under the hero copy. Not a stat grid — these are standing, not
metrics, and boxing them would overclaim. The bullet is a cyan pip, matching the eyebrow. */
.mk-credstrip {
display: flex;
flex-wrap: wrap;
gap: var(--mk-3) var(--mk-6);
margin-top: var(--mk-7);
position: relative;
z-index: 2;
}
/* A CREDENTIAL IS ONE SENTENCE, SO IT HAS TO WRAP LIKE ONE.
This was `inline-flex`, which made every run of text its own flex item: the plain words
were one column, the bold claim was another, and the dot a third. With short copy and a
wide viewport nobody could tell, because each column happened to fit on one line. Give it
a phone and a longer line and the item breaks into parallel columns of wrapped text —
"Ran Sales / Enablement at" beside "Oracle, Meta and / LinkedIn" — which is not a layout
bug so much as the sentence being taken apart.
A block box fixes it at the root: the words are inline content again and wrap as prose at
any width, however long the copy gets. The dot goes back into the flow as an inline-block
marker, `vertical-align: middle` sitting it on the first line the way `align-items:
center` used to sit it on a single-line row. The negative indent against the matching
padding is what makes a wrapped second line start under the text rather than under the
dot — 13px is the marker plus its margin. */
.mk-ci {
display: block;
padding-left: 13px;
text-indent: -13px;
font-size: var(--mk-fs-sm);
color: var(--mk-on-dark-mut);
}
.mk-ci::before {
content: "";
display: inline-block;
vertical-align: middle;
width: 5px;
height: 5px;
margin-right: var(--mk-2);
border-radius: 50%;
background: var(--mk-cyan);
box-shadow: 0 0 8px var(--mk-cyan);
}
.mk-ci b { color: #fff; font-weight: 700; }
/* The team. Two wide cards rather than a portrait grid — the bios are the substance. */
.mk-team {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mk-grid-gap);
margin-top: var(--mk-head-gap);
}
.mk-member {
padding: var(--mk-6);
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-panel);
background: var(--mk-card);
box-shadow: var(--mk-e1);
}
.mk-member-head { display: flex; align-items: center; gap: var(--mk-4); margin-bottom: var(--mk-5); }
.mk-avatar {
flex: 0 0 auto;
/* 58px was sized for a monogram, which is a two-letter shape that reads at any size. A
face is not: at 58px it was a thumbnail of a person rather than a portrait of one. 76px
is the step that makes the features legible while still sitting inside the head row
rather than setting its height — the name and role stack to 60px beside it, so the row
grows by 18px and nothing reflows. */
width: 76px;
height: 76px;
display: grid;
place-items: center;
border-radius: var(--mk-r-card);
background: linear-gradient(135deg, var(--mk-cyan), var(--mk-lav));
color: #0C1420;
font-family: var(--mk-disp);
font-weight: 800;
font-size: var(--mk-fs-xl);
letter-spacing: -.02em;
}
/* A PHOTOGRAPH IN THE AVATAR SLOT. Same 58px box as the initials variant, so a card with a
portrait and a card without line up — only the shape changes, to the full circle a face
belongs in rather than the rounded square a monogram does.
Greyscale at rest is the point of the treatment: two portraits shot in different rooms,
under different light, against different walls, are a mess of competing colour next to
each other. Desaturated they read as one set, and the colour arriving on hover is then a
reward rather than the default state. The ring and the canvas underneath cover the moment
before a lazily-loaded image paints, so the row never collapses.
`overflow: hidden` on the circle is what clips the zoom: the image scales inside the
frame and the frame does not move, so nothing nudges the name beside it. */
.mk-avatar-photo {
border-radius: 50%;
overflow: hidden;
background: var(--mk-canvas);
box-shadow: 0 0 0 1px var(--mk-hair);
transition: box-shadow var(--mk-t-hover) var(--mk-ease-out);
}
.mk-avatar-photo img {
width: 100%;
height: 100%;
display: block;
/* The crop is square and the box is square, but cover is what guarantees the aspect ratio
survives if either ever stops being true. */
object-fit: cover;
object-position: center;
filter: grayscale(1);
transform: scale(1);
transition:
filter var(--mk-t-hover) var(--mk-ease-out),
transform var(--mk-t-hover) var(--mk-ease-out);
}
/* Hover anywhere on the card, or keyboard focus landing anywhere inside it — the portrait
should not need to be the thing you are pointing at, and a keyboard user tabbing to the
LinkedIn link gets the same response a mouse user gets. */
.mk-member:hover .mk-avatar-photo img,
.mk-member:focus-within .mk-avatar-photo img {
filter: grayscale(0);
transform: scale(1.06);
}
.mk-member:hover .mk-avatar-photo,
.mk-member:focus-within .mk-avatar-photo {
box-shadow: 0 0 0 1px rgba(92, 184, 214, .5), 0 6px 18px -8px rgba(20, 27, 39, .28);
}
/* The member's LinkedIn link. Pushed to the end of the head row rather than crowding the
name, sized to the 44px touch target the rest of the site uses, and it keeps the colour
the icon inherits from the link. */
.mk-member-social {
margin-left: auto;
flex: 0 0 auto;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 999px;
color: var(--mk-ink-3);
transition:
color var(--mk-t-hover) var(--mk-ease-out),
background-color var(--mk-t-hover) var(--mk-ease-out);
}
/* THE ONE COLOUR ON THIS PAGE THAT IS NOT OURS. #0A66C2 is LinkedIn's brand blue, and it is
deliberately not a palette token: this is somebody else's mark and borrowing our lavender
for it would make it look like our icon rather than their logo. It stays grey at rest, in
the same spirit as the portrait beside it — the colour is what happens when you reach for
it, not the resting state. 5.9:1 on the card, so the mark is legible and not just tinted.
Focus gets it too, or a keyboard user would be the only person who never sees it. */
.mk-member-social:hover,
.mk-member-social:focus-visible { color: #0A66C2; background: var(--mk-canvas); }
.mk-member-social svg { display: block; }
.mk-member-name { font-size: var(--mk-fs-h4); color: var(--mk-ink); letter-spacing: -.015em; }
.mk-member-role {
margin-top: var(--mk-1);
font-size: var(--mk-fs-label);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mk-ink-3);
}
.mk-member-bio { font-size: var(--mk-fs-base); color: var(--mk-ink-2); line-height: var(--mk-lh-body); }
.mk-member-chips { display: flex; flex-wrap: wrap; gap: var(--mk-2); margin-top: var(--mk-5); }
.mk-mchip {
font-size: var(--mk-fs-label);
font-weight: 600;
color: var(--mk-ink-2);
background: var(--mk-canvas);
border: 1px solid var(--mk-hair);
padding: 5px 11px;
border-radius: 999px;
}
/* The belief. Display type, centred, no card — it should read as the page speaking. */
.mk-belief { margin: 0; text-align: center; }
.mk-belief h2 {
font-family: var(--mk-disp);
font-weight: 600;
font-size: clamp(24px, 3.2vw, 36px);
line-height: 1.25;
letter-spacing: var(--mk-ls-head);
color: var(--mk-ink);
max-width: 22ch;
margin: 0 auto;
}
.mk-hl { color: #2E7E99; }
/* Where we are. Four cards that read left to right as a progression. */
/* THREE COLUMNS FOR THE THREE CARDS in marketing/about/_status. It said four, from when
there were four, so the row rendered three-quarters full with a column of empty canvas on
the right — the cards were not narrow, they were short of one. If a card is ever added or
removed here, this number moves with it. */
.mk-status {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--mk-4);
margin-top: var(--mk-head-gap);
}
.mk-status-item {
padding: var(--mk-5);
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-card);
background: var(--mk-card);
box-shadow: var(--mk-e1);
}
/* The two dot colours are applied as `mk-sdot-<%= tone %>`, so the literal class name never
appears in a template. Anything that looks for unused CSS by grepping for class names
will call these dead; they are not. */
.mk-sdot { display: block; width: 9px; height: 9px; border-radius: 50%; margin-bottom: var(--mk-4); }
.mk-sdot-cyan { background: var(--mk-cyan); box-shadow: 0 0 10px rgba(92,184,214,.5); }
.mk-sdot-lav { background: var(--mk-lav); box-shadow: 0 0 10px rgba(155,142,196,.5); }
.mk-status-item h3 { font-size: var(--mk-fs-md); color: var(--mk-ink); letter-spacing: -.015em; margin-bottom: var(--mk-2); }
.mk-status-item p { font-size: var(--mk-fs-xs); color: var(--mk-ink-2); line-height: 1.55; }
/* ═══════════════ Design partners (/design-partners) ═══════════════
Page-specific components. Hero shell, buttons, sections, cards, reveal and footer are
all shared from above; this adds the four things only this page has. */
/* The deal: two halves of one bargain, equally weighted. */
.mk-getask { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mk-grid-gap); margin-top: var(--mk-head-gap); }
.mk-ga-col { padding: var(--mk-6); border-radius: var(--mk-r-panel); }
.mk-ga-get { background: var(--mk-card); border: 1px solid var(--mk-hair); box-shadow: var(--mk-e1); }
.mk-ga-ask {
background: linear-gradient(165deg, #1D2C3C, #14202C);
color: var(--mk-on-dark);
box-shadow: var(--mk-e4);
}
.mk-ga-lead {
font-size: var(--mk-fs-label);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: var(--mk-1);
}
.mk-ga-get .mk-ga-lead { color: #2E7E99; }
.mk-ga-ask .mk-ga-lead { color: var(--mk-cyan-bright); }
.mk-ga-col h3 { font-size: var(--mk-fs-h3); letter-spacing: -.02em; margin-bottom: var(--mk-5); }
.mk-ga-get h3 { color: var(--mk-ink); }
.mk-ga-ask h3 { color: #fff; }
.mk-ga-list { display: grid; gap: var(--mk-4); }
.mk-ga-list li { display: flex; gap: var(--mk-3); font-size: var(--mk-fs-base); line-height: var(--mk-lh-body); }
.mk-ga-get .mk-ga-list li { color: var(--mk-ink-2); }
.mk-ga-ask .mk-ga-list li { color: var(--mk-on-dark-mut); }
.mk-ga-ic { flex: 0 0 auto; margin-top: 3px; display: inline-flex; }
.mk-ga-get .mk-ga-ic { color: #2E7E99; }
.mk-ga-ask .mk-ga-ic { color: var(--mk-lav-bright); }
/* The three cohort phases. The first is the live one, so it carries the indigo. */
.mk-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mk-grid-gap); margin-top: var(--mk-head-gap); }
.mk-phase {
position: relative;
padding: var(--mk-6) var(--mk-5);
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-card);
background: var(--mk-card);
box-shadow: var(--mk-e1);
}
.mk-phase-now { border-color: rgba(78,65,151,.34); box-shadow: 0 20px 44px -24px rgba(78,65,151,.40); }
.mk-pnum {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mk-3);
font-family: var(--mk-disp);
font-weight: 800;
font-size: var(--mk-fs-sm);
color: var(--mk-indigo-ink);
}
.mk-ptag {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mk-indigo-ink);
background: rgba(78,65,151,.10);
padding: 3px 9px;
border-radius: 6px;
}
.mk-phase h3 { font-size: var(--mk-fs-h4); color: var(--mk-ink); letter-spacing: -.015em; margin: var(--mk-3) 0 var(--mk-2); }
.mk-phase-body { font-size: var(--mk-fs-sm); color: var(--mk-ink-2); line-height: 1.6; }
/* Who this is for. Centred — one sentence and three facts. */
.mk-sec-head-centred { margin-left: auto; margin-right: auto; text-align: center; }
.mk-whofor { max-width: 58ch; margin: var(--mk-5) auto 0; text-align: center; }
.mk-whofor p { font-size: var(--mk-fs-xl); color: var(--mk-ink-2); line-height: var(--mk-lh-body); }
.mk-whofor p b { color: var(--mk-ink); font-weight: 700; }
.mk-whochips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mk-3); margin-top: var(--mk-6); }
.mk-whochip {
display: inline-flex;
align-items: center;
gap: var(--mk-2);
font-size: var(--mk-fs-sm);
font-weight: 600;
color: var(--mk-ink);
background: var(--mk-card);
border: 1px solid var(--mk-hair);
padding: 10px 16px;
border-radius: 999px;
box-shadow: var(--mk-e1);
}
.mk-whochip svg { color: #2E7E99; flex: 0 0 auto; }
/* The application form — the only real form on the public site. */
/* Vertical only, for the same reason as `.mk-cta` above: this is a `.mk-wrap` too. */
.mk-apply { position: relative; z-index: 1; padding-block: var(--mk-12) var(--mk-13); }
/* ── The booking modal ──
The SAME application card the Your Numbers page renders inline, opened as a dialog by
every "Book a call" on the site (see marketing/booking_controller.js). z-index 80: over
the bar (60), the mobile menu (70) and the cookie notice (70), under the skip link (100).
Hidden by the `hidden` attribute; this block only decides what open looks like. */
.mk-bkmodal {
position: fixed;
inset: 0;
z-index: 80;
display: grid;
place-items: center;
padding: var(--mk-5);
}
.mk-bkmodal[hidden] { display: none; }
.mk-bkscrim {
position: absolute;
inset: 0;
background: rgba(10, 7, 26, .62);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* The dialog wears the hero's deep-indigo family, so the form arrives as part of the same
surface the button that opened it sat on. It scrolls internally on short viewports —
the page behind it is locked while it is open. */
.mk-bkdialog {
position: relative;
width: min(600px, 100%);
max-height: min(88dvh, 100%);
overflow-y: auto;
padding: var(--mk-8) var(--mk-7) var(--mk-7);
border: 1px solid rgba(255,255,255,.09);
border-radius: var(--mk-r-panel);
background: linear-gradient(170deg, #241B58 0%, #17123C 100%);
box-shadow: var(--mk-e3);
}
.mk-bkclose {
position: absolute;
top: var(--mk-4);
right: var(--mk-4);
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.07);
color: var(--mk-on-dark);
cursor: pointer;
transition: background var(--mk-t) var(--mk-ease-out);
}
.mk-bkclose:hover { background: rgba(255,255,255,.14); color: #fff; }
@media (max-width: 640px) {
.mk-bkmodal { padding: var(--mk-3); align-items: end; }
.mk-bkdialog { padding: var(--mk-7) var(--mk-5) var(--mk-5); max-height: 92dvh; }
}
.mk-apply-card { max-width: 600px; margin: 0 auto; text-align: center; }
.mk-apply-card h2 {
font-size: clamp(28px, 3.4vw, 40px);
line-height: var(--mk-lh-head);
letter-spacing: var(--mk-ls-head);
color: #fff;
margin-bottom: var(--mk-3);
}
.mk-asub { color: var(--mk-on-dark-mut); font-size: var(--mk-fs-lg); margin-bottom: var(--mk-6); }
.mk-form { display: grid; gap: var(--mk-4); text-align: left; }
.mk-frow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mk-4); }
.mk-field label { display: block; font-size: var(--mk-fs-xs); color: var(--mk-on-dark-mut); font-weight: 500; margin-bottom: 7px; }
.mk-field input,
.mk-field textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--mk-r-sm);
background: rgba(255,255,255,.05);
color: #fff;
font-family: var(--mk-body);
font-size: var(--mk-fs-base);
transition: border-color var(--mk-t) var(--mk-ease-out), box-shadow var(--mk-t) var(--mk-ease-out);
}
.mk-field input::placeholder, .mk-field textarea::placeholder { color: var(--mk-on-dark-faint); }
.mk-field input:focus, .mk-field textarea:focus {
outline: none;
border-color: var(--mk-indigo-b);
box-shadow: 0 0 0 3px rgba(122,107,184,.25);
}
.mk-field textarea { resize: vertical; min-height: 66px; }
.mk-form .mk-submit { margin-top: var(--mk-1); }
.mk-apply-fine { margin-top: var(--mk-4); font-size: var(--mk-fs-xs); color: var(--mk-on-dark-faint); text-align: center; }
.mk-form-errors {
padding: var(--mk-4);
border: 1px solid rgba(229,72,77,.35);
border-radius: var(--mk-r-sm);
background: rgba(229,72,77,.10);
color: #FFD9DA;
font-size: var(--mk-fs-sm);
}
.mk-form-errors ul { margin-top: var(--mk-2); padding-left: var(--mk-4); list-style: disc; }
/* ───────────── Your numbers, the calculator (YN2) ─────────────
Inputs on the left, the answer on the right, on the same light ground as the rest of the
page. The form fields above are styled for the dark application panel, so these are the
same shapes in the light palette rather than a second design: one border radius, one
focus ring, the same tokens. The answer panel is the site's dark surface, which is what
every other "this is the point" moment on the site already uses. */
.mk-yn {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: var(--mk-8);
align-items: start;
margin-top: var(--mk-head-gap);
}
.mk-yn-legend {
font-size: var(--mk-fs-h4);
color: var(--mk-ink);
letter-spacing: -.015em;
margin-bottom: var(--mk-4);
}
.mk-yn-field { margin-bottom: var(--mk-4); }
.mk-yn-field label {
display: block;
font-size: var(--mk-fs-xs);
font-weight: 600;
color: var(--mk-ink);
margin-bottom: 7px;
}
.mk-yn-field input {
width: 100%;
padding: 11px 13px;
border: 1px solid var(--mk-hair);
border-radius: var(--mk-r-sm);
background: var(--mk-card);
color: var(--mk-ink);
font-family: var(--mk-body);
font-size: var(--mk-fs-base);
font-variant-numeric: tabular-nums;
transition: border-color var(--mk-t) var(--mk-ease-out), box-shadow var(--mk-t) var(--mk-ease-out);
}
.mk-yn-field input:focus {
outline: none;
border-color: var(--mk-indigo-b);
box-shadow: 0 0 0 3px rgba(122,107,184,.22);
}
.mk-yn-field small { display: block; margin-top: 5px; font-size: var(--mk-fs-micro); color: var(--mk-ink-3); }
/* The three assumptions are fenced off and labelled, because a visitor will accept a number
built from figures they typed and argue with one built from figures we chose. Making the
difference visible is what makes the total arguable rather than suspicious. */
.mk-yn-assume { margin-top: var(--mk-6); padding-top: var(--mk-5); border-top: 1px solid var(--mk-hair); }
.mk-yn-assume-k { font-size: var(--mk-fs-sm); font-weight: 700; color: var(--mk-ink); margin-bottom: var(--mk-4); }
.mk-yn-out {
padding: var(--mk-7);
border-radius: var(--mk-r-panel);
background: linear-gradient(165deg, #1D2C3C, #14202C);
color: var(--mk-on-dark);
box-shadow: var(--mk-e4);
}
.mk-yn-cap {
font-size: var(--mk-fs-micro);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mk-cyan-bright);
margin-bottom: var(--mk-2);
}
.mk-yn-cap-2 { color: var(--mk-on-dark-mut); }
.mk-yn-big {
font-family: var(--mk-disp);
font-size: clamp(30px, 5vw, 46px);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.05;
color: #fff;
}
.mk-yn-big2 { font-family: var(--mk-disp); font-size: var(--mk-fs-h3); font-weight: 800; color: #fff; letter-spacing: -.02em; }
/* The working, line by line. It is the whole argument of the page: a number a sales leader
cannot take apart is a number they do not believe. */
.mk-yn-working { margin-top: var(--mk-5); border-top: 1px solid var(--mk-hair-dark); padding-top: var(--mk-3); }
.mk-yn-line {
display: flex;
justify-content: space-between;
gap: var(--mk-4);
padding: 6px 0;
font-size: var(--mk-fs-xs);
color: var(--mk-on-dark-mut);
line-height: 1.5;
}
.mk-yn-line b { color: #fff; font-weight: 600; white-space: nowrap; }
.mk-yn-line-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--mk-hair-dark); }
/* The working is two labelled costs (lost quota, then cash out the door) so the visitor can
see which kind of loss each line belongs to. The heading is a line with no figure. */
.mk-yn-line-head {
margin-top: var(--mk-4);
padding-bottom: 2px;
font-size: var(--mk-fs-micro);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--mk-cyan-bright);
}
.mk-yn-line-head:first-child { margin-top: 0; }
.mk-yn-second {
margin-top: var(--mk-5);
padding: var(--mk-4);
border: 1px solid rgba(92,184,214,.3);
border-radius: var(--mk-r-sm);
background: rgba(92,184,214,.12);
}
.mk-yn-second-note { margin-top: 6px; font-size: var(--mk-fs-xs); color: var(--mk-on-dark-mut); line-height: 1.5; }
.mk-yn-note { margin-top: var(--mk-4); font-size: var(--mk-fs-xs); color: var(--mk-ink-3); line-height: 1.55; }
/* The inline error, under the field that caused it. Same red as the summary above, at the
size of a hint rather than a warning: it is telling you what to type, not telling you
off. The field itself carries the state too — colour alone is never the only signal. */
.mk-ferr { margin-top: 6px; font-size: var(--mk-fs-xs); color: #FFB4B6; line-height: 1.45; }
.mk-field input.is-invalid,
.mk-field textarea.is-invalid {
border-color: rgba(229,72,77,.55);
background: rgba(229,72,77,.07);
}
.mk-field input.is-invalid:focus,
.mk-field textarea.is-invalid:focus { box-shadow: 0 0 0 3px rgba(229,72,77,.20); }
/* Submitting. The label stays put and dims while the ring spins beside it, so the button
keeps its width and the section below never shifts. */
.mk-submit[disabled] { cursor: progress; opacity: .85; }
.mk-submit[disabled]:hover { transform: none; }
.mk-spinner { display: none; }
.mk-submit.is-loading .mk-submit-label { opacity: .75; }
.mk-submit.is-loading .mk-spinner {
display: inline-block;
width: 15px;
height: 15px;
border: 2px solid rgba(255,255,255,.35);
border-top-color: #fff;
border-radius: 50%;
animation: mk-spin .7s linear infinite;
}
@keyframes mk-spin {
to { rotate: 360deg; }
}
/* The confirmation that replaces the form. The form leaves first and the card follows, so
the two never overlap and the section resizes once rather than twice.
`.is-entering` is added BEFORE the card is unhidden and removed a frame later — which is
why the resting state here is the visible one. With JavaScript off the server renders
this card already showing, and it must not be sitting at opacity 0 waiting for a class
that will never arrive. */
.mk-apply-panel { transition: opacity .22s var(--mk-ease), translate .22s var(--mk-ease); }
.mk-apply-panel.is-leaving { opacity: 0; translate: 0 -8px; }
.mk-sent {
text-align: center;
transition: opacity .5s var(--mk-ease-out), translate .5s var(--mk-ease-out);
}
.mk-sent.is-entering { opacity: 0; translate: 0 14px; }
.mk-sent-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
margin-bottom: var(--mk-5);
border-radius: 50%;
color: #0B1420;
background: linear-gradient(135deg, #4FD1A5, #00C896);
box-shadow: 0 0 0 10px rgba(0,200,150,.10), 0 14px 30px -14px rgba(0,200,150,.7);
}
.mk-sent h2 {
font-size: clamp(26px, 3.2vw, 36px);
line-height: var(--mk-lh-head);
letter-spacing: var(--mk-ls-head);
color: #fff;
margin-bottom: var(--mk-4);
}
.mk-sent p { color: var(--mk-on-dark-mut); font-size: var(--mk-fs-lg); line-height: var(--mk-lh-body); max-width: 46ch; margin: 0 auto; }
.mk-sent p.mk-sent-sub { margin-top: var(--mk-3); font-size: var(--mk-fs-base); color: var(--mk-on-dark-faint); }
.mk-sent .mk-btn { margin-top: var(--mk-7); }
/* The honeypot. Out of sight and out of the tab order, but NOT display:none — some bots
skip hidden inputs, and the whole point is that they should fill this one. */
.mk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The one flash the public site can produce: a sent application. */
.mk-flash {
position: relative;
z-index: 61;
margin: 0;
padding: calc(72px + var(--mk-4)) var(--mk-gutter) var(--mk-4);
background: rgba(0,200,150,.12);
border-bottom: 1px solid rgba(0,200,150,.28);
color: #BDF3E2;
font-size: var(--mk-fs-sm);
text-align: center;
}
/* ═══════════════ Cookie notice ═══════════════
*
* The site's dark surface, its card radius and its existing button pair — the notice is
* meant to read as part of RampVera rather than as something bolted to the bottom of the
* window by a third party, which is what most of them look like.
*
* Bottom of the viewport, not the top: the navigation is already fixed up there, and a
* notice that covers it takes the site away from you until you answer. It is a bar rather
* than a full-width slab, inset from every edge on desktop, so the page is visibly still
* there behind it.
*/
.mk-cb {
position: fixed;
z-index: 70;
left: 50%;
bottom: var(--mk-5);
transform: translateX(-50%);
width: min(1100px, calc(100vw - 2 * var(--mk-5)));
padding: var(--mk-5) var(--mk-6);
border: 1px solid rgba(255,255,255,.10);
border-radius: var(--mk-r-panel);
background:
radial-gradient(900px 300px at 20% 0%, rgba(92,184,214,.10), transparent 70%),
linear-gradient(180deg, #182131, #0F151E);
box-shadow: var(--mk-e3);
color: var(--mk-on-dark);
transition: opacity var(--mk-t) var(--mk-ease-out), transform var(--mk-t) var(--mk-ease-out);
}
/* Answered. The controller removes the element once this has run. */
.mk-cb.is-dismissed {
opacity: 0;
transform: translateX(-50%) translateY(12px);
pointer-events: none;
}
.mk-cb-inner {
display: flex;
align-items: center;
gap: var(--mk-6);
}
.mk-cb-copy { flex: 1 1 auto; min-width: 0; }
.mk-cb-copy p {
margin: 0;
font-size: var(--mk-fs-sm);
line-height: 1.6;
color: var(--mk-on-dark-mut);
max-width: 76ch;
}
/* The title reads as a heading but is a — see the partial for why. Two classes so it
out-specifies `.mk-cb-copy p` above, which would otherwise take its size and colour back. */
.mk-cb-copy .mk-cb-h {
margin: 0 0 var(--mk-1);
font-size: var(--mk-fs-md);
font-weight: 700;
letter-spacing: var(--mk-ls-head);
color: #fff;
}
/* `nowrap` so the link moves to the next line whole rather than breaking across two — a
link whose name is split down the middle reads as two links. */
.mk-cb-link {
color: var(--mk-cyan-bright);
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.mk-cb-link:hover { color: #fff; }
/* The two answers, side by side and EXACTLY the same width — a grid of equal columns rather
than a flex row, because flex would size each button to its own label and leave "Reject
non-essential" and "Accept all" visibly different targets. `1fr` columns take the width of
the longer label and give it to both. `flex: none` keeps the pair off the copy's shrink. */
.mk-cb-actions {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
flex: none;
gap: var(--mk-3);
}
/* ── The preferences panel ──────────────────────────────────────────────────────────────
*
* A light surface where the notice is dark: this is a settings screen, not an interruption,
* and it should read as part of the product rather than as more of the banner. Same card
* radius, same elevation scale, same type ramp.
*
* These styles are shared with the copy of the same form rendered plainly on the cookie
* policy page — both sit on a white card, so one set of rules covers both.
*/
.mk-cp-scrim {
position: fixed;
inset: 0;
z-index: 80;
background: rgba(15,21,30,.55);
opacity: 0;
transition: opacity var(--mk-t) var(--mk-ease-out);
}
.mk-cp-scrim.is-open { opacity: 1; }
.mk-cp {
position: fixed;
z-index: 81;
top: 50%;
left: 50%;
/* 640, not 560: at the narrower width each description wrapped to five short lines, which
reads as a column of fragments rather than a sentence. */
width: min(640px, calc(100vw - 2 * var(--mk-5)));
/* Never taller than the window; the list scrolls inside instead. A settings panel that
runs off the bottom of a laptop screen hides its own Save button. */
max-height: min(88vh, 760px);
display: flex;
flex-direction: column;
padding: var(--mk-6);
border-radius: var(--mk-r-panel);
background: var(--mk-card);
box-shadow: var(--mk-e3);
color: var(--mk-ink);
opacity: 0;
transform: translate(-50%, -46%);
transition: opacity var(--mk-t) var(--mk-ease-out), transform var(--mk-t) var(--mk-ease-out);
}
.mk-cp.is-open { opacity: 1; transform: translate(-50%, -50%); }
/* The `hidden` attribute hides an element through a UA rule of almost no specificity, so
`.mk-cp { display: flex }` above silently beats it and a "hidden" panel stays laid out —
invisible at opacity 0, and swallowing every click on the page behind it. The mobile menu
hit this first; `.mk-mobile[hidden]` further up is the same line for the same reason. */
.mk-cp[hidden], .mk-cp-scrim[hidden] { display: none; }
.mk-cp-head {
display: flex;
align-items: flex-start;
gap: var(--mk-4);
margin-bottom: var(--mk-5);
}
.mk-cp-title {
margin: 0 0 var(--mk-2);
font-size: var(--mk-fs-h3);
font-weight: 700;
letter-spacing: var(--mk-ls-head);
color: var(--mk-ink);
}
.mk-cp-intro {
margin: 0;
font-size: var(--mk-fs-sm);
line-height: 1.6;
color: var(--mk-ink-2);
}
.mk-cp-x {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-sm);
background: #fff;
color: var(--mk-ink-3);
cursor: pointer;
transition: color var(--mk-t) var(--mk-ease-out), border-color var(--mk-t) var(--mk-ease-out),
background var(--mk-t) var(--mk-ease-out);
}
/* Hover fills as well as darkens: on a white card a border-colour change alone is easy to
miss on the one control that is a glyph rather than a word. Focus is the site-wide indigo
ring from `.mk :focus-visible` — the same ring every other control gets. */
.mk-cp-x:hover {
color: var(--mk-ink);
border-color: var(--mk-ink-3);
background: var(--mk-canvas);
}
/* The list is the scrolling part, not the panel, so the heading and the Save row stay put
while a long set of categories moves between them. */
.mk-cp-form {
display: flex;
flex-direction: column;
min-height: 0;
margin: 0;
}
.mk-cp-list {
margin: 0;
padding: 0;
list-style: none;
overflow-y: auto;
border-top: 1px solid var(--mk-line-soft);
/* Only when the viewport is too short for the categories. Left to the platform it is the
OS scrollbar, arrows and all, which on a 640px card reads as a browser chrome artefact
dropped into the design. Thin and in the palette instead. Firefox takes the standard
properties; the -webkit- block below is for everything else. */
/* --mk-ink-3 at 45%: --mk-line is so close to the card that the thumb disappeared into
it, and a scrollbar nobody can see is the same as no scrollbar. */
scrollbar-width: thin;
scrollbar-color: rgba(138,147,166,.45) transparent;
}
.mk-cp-list::-webkit-scrollbar { width: 10px; }
.mk-cp-list::-webkit-scrollbar-track { background: transparent; }
.mk-cp-list::-webkit-scrollbar-thumb {
border: 3px solid transparent;
border-radius: 999px;
background: rgba(138,147,166,.45);
background-clip: content-box;
}
.mk-cp-list::-webkit-scrollbar-thumb:hover {
background: rgba(138,147,166,.75);
background-clip: content-box;
}
.mk-cp-row {
padding: var(--mk-4) 0;
border-bottom: 1px solid var(--mk-line-soft);
}
/* Name and control on one line, description full width beneath — see the partial. `gap`
keeps a long category name off its status pill; `min-width: 0` lets the name wrap rather
than push the pill out of the card. */
.mk-cp-rowhead {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mk-4);
}
.mk-cp-name {
min-width: 0;
margin: 0;
font-size: var(--mk-fs-md);
font-weight: 600;
color: var(--mk-ink);
}
.mk-cp-sum {
margin: var(--mk-2) 0 0;
padding-right: var(--mk-5);
font-size: var(--mk-fs-sm);
line-height: 1.6;
color: var(--mk-ink-2);
}
/* A status, not a control — for the category that cannot be changed and the ones where
there is nothing to change. Deliberately not shaped like a switch, so nobody tries. */
.mk-cp-state {
flex: none;
padding: 5px 10px;
border: 1px solid var(--mk-line);
border-radius: 999px;
background: var(--mk-canvas);
font-size: var(--mk-fs-label);
font-weight: 600;
letter-spacing: .02em;
white-space: nowrap;
color: var(--mk-ink-3);
}
.mk-cp-on {
border-color: rgba(0,200,150,.30);
background: rgba(0,200,150,.10);
color: var(--mk-ok-ink);
}
/* The switch. A REAL checkbox underneath — moved out of sight rather than replaced, so it
is still focusable, still announced as a checkbox, and still toggled with Space. The
label is the visible control, and the focus ring is drawn on it because the input it
belongs to is the thing that actually has focus.
Nothing renders this today: both optional categories are `in_use: false`, so the panel
shows a status instead. It is what turns on the day one is really deployed. */
.mk-cp-switch { flex: none; }
.mk-cp-input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.mk-cp-track {
display: block;
position: relative;
width: 44px;
height: 26px;
border-radius: 999px;
background: var(--mk-line);
cursor: pointer;
transition: background var(--mk-t) var(--mk-ease-out);
}
.mk-cp-knob {
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(20,27,39,.28);
transition: transform var(--mk-t) var(--mk-ease-out);
}
.mk-cp-input:checked + .mk-cp-track { background: linear-gradient(135deg, var(--mk-indigo-a), var(--mk-indigo-b)); }
.mk-cp-input:checked + .mk-cp-track .mk-cp-knob { transform: translateX(18px); }
.mk-cp-input:focus-visible + .mk-cp-track { outline: 2px solid var(--mk-indigo-b); outline-offset: 3px; }
.mk-cp-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mk-5);
padding-top: var(--mk-5);
}
.mk-cp-note {
margin: 0;
font-size: var(--mk-fs-xs);
line-height: 1.55;
color: var(--mk-ink-3);
}
.mk-cp-link { color: var(--mk-indigo-ink); text-decoration: underline; text-underline-offset: 2px; }
.mk-cp-save { flex: none; }
/* ═══════════════ Legal pages (/cookie-policy, and the two to come) ═══════════════
*
* A policy is read, not scanned, so this block is the one place on the site that optimises
* for a long column of prose: a fixed measure in the mid-60s of characters, generous
* leading, and a contents rail that stays put while the text scrolls past it.
*
* Everything is built from the same tokens as the rest of the site — no new colours, no new
* type sizes — so the privacy policy and terms of use inherit the whole layout by rendering
* marketing/legal/_hero and putting their sections in `.mk-lg-body`.
*/
.mk-lg-hero {
padding: calc(72px + var(--mk-11)) 0 var(--mk-10);
color: var(--mk-on-dark);
background: linear-gradient(180deg, #0F151E 0%, #141C27 100%);
}
/* A legal page's title is a label, not a headline — it takes the h2 step rather than the
display step the marketing heroes use, because nothing here is being sold. */
.mk-lg-hero h1 {
font-size: var(--mk-fs-h2);
font-weight: 800;
line-height: var(--mk-lh-head);
letter-spacing: var(--mk-ls-head);
color: #fff;
margin: var(--mk-5) 0 0;
}
.mk-lg-dates {
display: flex;
flex-wrap: wrap;
gap: var(--mk-3);
margin: var(--mk-4) 0 0;
color: var(--mk-on-dark-mut);
font-size: var(--mk-fs-sm);
}
.mk-lg { padding: var(--mk-11) 0 var(--mk-13); }
.mk-lg-grid {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
gap: var(--mk-9);
align-items: start;
}
/* The contents rail. Clearing the fixed bar is already handled site-wide by the
`.mk [id] { scroll-margin-top }` rule in section 3 — every heading here has an id, so
they inherit it. Do not add `scroll-padding-top` to go with it: the two offsets add up,
and the target lands a bar-height too low. */
.mk-lg-toc {
position: sticky;
top: calc(72px + var(--mk-5));
}
.mk-lg-toc h2 {
margin: 0 0 var(--mk-4);
font-size: var(--mk-fs-label);
font-weight: 600;
letter-spacing: var(--mk-ls-label);
text-transform: uppercase;
color: var(--mk-ink-3);
}
.mk-lg-toc ol {
margin: 0;
padding: 0 0 0 var(--mk-4);
list-style: decimal;
color: var(--mk-ink-3);
font-size: var(--mk-fs-sm);
}
.mk-lg-toc li { margin-bottom: var(--mk-3); }
.mk-lg-toc a {
color: var(--mk-ink-2);
text-decoration: none;
line-height: 1.4;
}
.mk-lg-toc a:hover { color: var(--mk-indigo-ink); }
/* The measure is applied to the PROSE, not to the column. A paragraph wants ~68 characters
a line; a five-column cookie table wants every pixel it can get, and capping the column
itself made the table scroll sideways on a 1440px screen with 180px of empty page beside
it. So the column is full width and the reading elements below carry the measure.
`min-width: 0` is not tidying-up either: a grid item defaults to `min-width: auto` and
refuses to shrink below its own min-content, which here is the table. Without it the
column is 680px wide on a 390px phone and takes the contents rail out with it, giving the
whole page a sideways scroll. */
.mk-lg-body { min-width: 0; color: var(--mk-ink-2); }
.mk-lg-body > section > p,
.mk-lg-body > section > h2,
.mk-lg-body > section > h3,
.mk-lg-body > section > ul,
.mk-lg-body > section > .mk-lg-card { max-width: 68ch; }
.mk-lg-body section + section { margin-top: var(--mk-9); }
.mk-lg-body h2 {
display: flex;
align-items: baseline;
gap: var(--mk-3);
margin: 0 0 var(--mk-5);
font-size: var(--mk-fs-h3);
font-weight: 700;
line-height: var(--mk-lh-head);
letter-spacing: var(--mk-ls-head);
color: var(--mk-ink);
}
/* The section number, set apart from its heading so the heading still reads as a sentence. */
.mk-lg-n {
flex: none;
min-width: 1.6em;
color: var(--mk-ink-3);
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.mk-lg-body h3 {
margin: var(--mk-7) 0 var(--mk-4);
font-size: var(--mk-fs-h4);
font-weight: 700;
color: var(--mk-ink);
}
.mk-lg-body p {
margin: 0 0 var(--mk-4);
font-size: var(--mk-fs-md);
line-height: 1.72;
}
/* Bulleted lists inside a policy. The site-wide reset at the top of this file strips
list-style and padding from every ul on the marketing site, because everywhere ELSE a
list is a layout — a row of cards, a nav — and a bullet would be wrong. A legal page is
the one place a list is genuinely a list: "you can ask us to" followed by six rights
reads as prose run together without them. `:where()` in the reset carries no specificity,
so this plain descendant selector is enough to put them back without an override.
The marker sits in the padding rather than outside it so a wrapped line aligns under the
first word rather than under the bullet.
THE FONT SIZE BELONGS ON THE `ul`, not only on the `li`. The 68ch measure these lists
share with the surrounding paragraphs is resolved against the element's OWN font-size,
so a `ul` left at the inherited size measures 68 of the wrong character and the bullets
run visibly wider than the prose they sit between — which is exactly how this was
spotted. Setting it here makes both resolve to the same column; `li` inherits it. */
.mk-lg-body ul {
margin: 0 0 var(--mk-4);
padding-left: var(--mk-5);
list-style: disc;
font-size: var(--mk-fs-md);
line-height: 1.72;
}
.mk-lg-body li {
margin-bottom: var(--mk-2);
padding-left: var(--mk-1);
}
.mk-lg-body li::marker { color: var(--mk-ink-3); }
.mk-lg-body b { color: var(--mk-ink); font-weight: 600; }
.mk-lg-body a { color: var(--mk-indigo-ink); text-decoration: underline; text-underline-offset: 2px; }
.mk-lg-body a:hover { color: var(--mk-lav-ink); }
.mk-lg-body code {
padding: 1px 5px;
border: 1px solid var(--mk-line);
border-radius: 5px;
background: #fff;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .875em;
color: var(--mk-ink);
overflow-wrap: break-word;
}
/* The answer to the question the visitor actually came with, set above the detail. */
.mk-lg-lede {
font-size: var(--mk-fs-lg) !important;
color: var(--mk-ink);
font-weight: 600;
}
/* The one consequence a reader needs to notice before acting on section 5. */
.mk-lg-note {
padding: var(--mk-4) var(--mk-5);
border-left: 3px solid var(--mk-amber);
border-radius: 0 var(--mk-r-sm) var(--mk-r-sm) 0;
background: rgba(240,165,0,.07);
}
.mk-lg-card {
margin: var(--mk-6) 0;
padding: var(--mk-5);
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-card);
background: var(--mk-card);
box-shadow: var(--mk-e1);
}
.mk-lg-card h3 { margin-top: 0 !important; }
.mk-lg-ident { line-height: 1.75 !important; margin-bottom: var(--mk-3) !important; }
/* `button_to` wraps its button in a form; without this the browser's default form margin
opens a gap under the card's last line. No card holds a form today — the reset button was
the last one — but the rule is two words and the day one comes back it is already right. */
.mk-lg-card form { margin: 0; }
/* The cookie table. Scrolls inside its own box rather than pushing the page sideways —
five columns cannot fit a phone, and shrinking the type until they do is not a fix. */
.mk-lg-tw {
margin: 0 0 var(--mk-5);
overflow-x: auto;
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-card);
background: var(--mk-card);
}
.mk-lg-tw:focus-visible { outline: 2px solid var(--mk-indigo-b); outline-offset: 2px; }
.mk-lg-tbl {
width: 100%;
min-width: 800px;
border-collapse: collapse;
font-size: var(--mk-fs-sm);
text-align: left;
}
/* A cookie name must never break across lines. The reason someone is reading this table is
to match a name against what their browser is showing them, and
`_rampvera_webapp_ro` / `r_session` on three lines cannot be matched against anything.
The cell may still wrap BETWEEN two names — hence nowrap on the code, not on the cell. */
.mk-lg-tbl code { white-space: nowrap; }
.mk-lg-tbl th {
padding: var(--mk-4);
border-bottom: 1px solid var(--mk-line);
background: var(--mk-canvas);
font-size: var(--mk-fs-label);
font-weight: 600;
letter-spacing: var(--mk-ls-label);
text-transform: uppercase;
color: var(--mk-ink-3);
white-space: nowrap;
}
.mk-lg-tbl td {
padding: var(--mk-4);
border-bottom: 1px solid var(--mk-line-soft);
line-height: 1.6;
vertical-align: top;
}
.mk-lg-tbl tr:last-child td { border-bottom: 0; }
.mk-lg-tbl td:first-child { color: var(--mk-ink); }
/* "first party" under the provider — the distinction matters in a cookie table, and it
reads better as a caption than as a parenthesis inside the cell. */
.mk-lg-sub {
display: block;
margin-top: 2px;
font-size: var(--mk-fs-micro);
color: var(--mk-ink-3);
}
/* ──────────────── 14. Motion + responsive ──────────────── */
/*
* THE SHARED MOTION SYSTEM. Every marketing page — including ones not written yet —
* gets all of this from `data-reveal` alone. Nothing here is page-specific, and no page
* defines motion of its own.
*
* Reveal-on-scroll. Content is visible by DEFAULT and only hidden once the reveal
* controller has connected (it sets .mk-reveal-ready on ). Without JavaScript —
* or in the moment before it runs — the page reads normally instead of being blank.
*
* A short travel on a settling curve: it should read as the content arriving, never as
* an element sliding in. `--mk-delay` is set by the controller, which staggers siblings
* that cross into view together — so a grid deals its cards in order while a section on
* its own arrives immediately. See marketing/reveal_controller.js.
*
* Choreography, not quantity. One duration and one curve throughout; the variety comes
* from DIRECTION, chosen per element so the page never plays the same gesture twice in a
* row and the reader never consciously notices the repetition:
*
* data-reveal rise — the default: 26px up. Sections, copy, cards.
* data-reveal="in" fade — where travel would fight a neighbour mid-flight.
* data-reveal="scale" settle — 96% and 24px up. Product mock-ups: they land.
* data-reveal="left" inward — the left half of a two-column row.
* data-reveal="right" inward — its right half, arriving to meet it.
* data-reveal="clip" wipe — uncovers downward. Full-bleed statements.
* data-reveal="tilt" settle — out of 1.2° of rotation. Sparingly: it is the loudest.
*
* 0.95s on a decelerating curve. Slower than that sounds — the last third is nearly
* stationary, so what a reader registers is the arrival, not the travel.
*
* The arrival moves the element with `translate`, `scale` and `rotate` — the INDEPENDENT
* transform properties, not the `transform` shorthand. Nearly every element that reveals
* is also a card that lifts under the pointer, and the two were otherwise fighting over
* one property: `[data-reveal].is-visible { transform: none }` outranks `.mk-stat:hover`
* on specificity, so the lift silently never happened. On separate properties they
* compose — arrival, hover and pointer-parallax each own theirs, and none of them has to
* out-specify the others.
*/
.mk-reveal-ready [data-reveal] {
opacity: 0;
translate: 0 26px;
transition:
opacity var(--mk-t-reveal) var(--mk-ease-out) var(--mk-delay, 0s),
translate var(--mk-t-reveal) var(--mk-ease-out) var(--mk-delay, 0s),
scale var(--mk-t-reveal) var(--mk-ease-out) var(--mk-delay, 0s),
rotate var(--mk-t-reveal) var(--mk-ease-out) var(--mk-delay, 0s),
clip-path var(--mk-t-reveal) var(--mk-ease-out) var(--mk-delay, 0s);
}
.mk-reveal-ready [data-reveal="in"] { translate: none; }
.mk-reveal-ready [data-reveal="scale"] { translate: 0 24px; scale: .96; }
.mk-reveal-ready [data-reveal="left"] { translate: -28px 0; }
.mk-reveal-ready [data-reveal="right"] { translate: 28px 0; }
.mk-reveal-ready [data-reveal="tilt"] { rotate: 1.2deg; }
.mk-reveal-ready [data-reveal="clip"] { translate: 0 16px; clip-path: inset(0 0 100% 0); }
/* The arrived state ends with NO clip. It used to end on `inset(0 0 0 0)`, which is not
"unclipped" — it clips to the border box, permanently, on every element that ever
revealed. The display headings run line-height 1.03, tighter than the font's own
descent, so their y/g/p descenders paint ~0.1em below that box: every hero title on the
site was losing the bottom of its last line once its reveal finished. `none` cannot be
transitioned from an inset(), but nothing needs it to be — only the "clip" variant
animates clip-path, and it gets its own interpolable end state below. */
.mk-reveal-ready [data-reveal].is-visible {
opacity: 1;
translate: none;
scale: none;
rotate: none;
clip-path: none;
}
/* The sweep still lands on an inset() so the transition can run — pushed 0.3em past the
box on every side so it can never shave a descender or an italic overhang. */
.mk-reveal-ready [data-reveal="clip"].is-visible { clip-path: inset(-0.3em); }
/*
* Hover, for every card family on the site at once. A card is a surface that responds
* to the pointer, so this is stated once here rather than repeated in each component —
* which is also what stops the eight families drifting into eight different lifts.
*
* The lift is 3px and the shadow deepens by one elevation step; anything more reads as
* a toy. Cards on the dark bands take a cyan hairline instead, because a shadow does
* nothing against navy.
*/
.mk-stat,
.mk-step,
.mk-pillar,
.mk-lcard,
.mk-member,
.mk-status-item,
.mk-phase,
.mk-cred-item,
.mk-dchip,
.mk-whochip {
transition:
transform var(--mk-t-hover) var(--mk-ease-out),
box-shadow var(--mk-t-hover) var(--mk-ease-out),
border-color var(--mk-t-hover) var(--mk-ease-out);
}
.mk-stat:hover,
.mk-step:hover,
.mk-pillar:hover,
.mk-lcard:hover,
.mk-member:hover,
.mk-status-item:hover,
.mk-phase:hover,
.mk-dchip:hover,
.mk-whochip:hover {
transform: translateY(-4px) scale(1.01);
box-shadow: var(--mk-e2);
border-color: rgba(92,184,214,.42);
}
/* On navy, the same gesture reads as the border catching the light. */
.mk-cred-item:hover,
.mk-lcard-us:hover {
transform: translateY(-4px) scale(1.01);
border-color: rgba(92,184,214,.34);
box-shadow: var(--mk-e3), inset 0 1px 0 rgba(255,255,255,.08);
}
/*
* A product mock-up drifts, very slightly, once it has arrived. Six seconds and four
* pixels: felt rather than seen, and it starts only after the reveal has finished so the
* two never fight. Pointer-hover pauses it — motion under the cursor is distracting.
*/
@keyframes mk-float {
0%, 100% { translate: none; }
50% { translate: 0 -5px; }
}
.mk-reveal-ready .is-visible .mk-float,
.mk-reveal-ready .mk-float.is-visible {
animation: mk-float 6s var(--mk-ease) 1s infinite;
}
.mk-float:hover { animation-play-state: paused; }
/*
* Pointer parallax. The controller writes `transform` only — `translate` belongs to the
* float and the reveal, so all three compose on one element without a fight. 8px at the
* corners of the viewport: enough that the card feels attached to the pointer, not enough
* that anyone would describe the page as moving. Desktop pointers only; see
* marketing/parallax_controller.js.
*/
.mk-parallax { transition: transform .5s var(--mk-ease-out); will-change: transform; }
.mk-parallax.is-tracking { transition: transform .18s linear; }
/* The ramp line draws itself in once the card is revealed. */
.mk-reveal-ready .mk-ramp-path { stroke-dasharray: 620; stroke-dashoffset: 620; transition: stroke-dashoffset 1.9s var(--mk-ease) .25s; }
.mk-reveal-ready .is-visible .mk-ramp-path { stroke-dashoffset: 0; }
.mk-reveal-ready .mk-ramp-area, .mk-reveal-ready .mk-end-dot { opacity: 0; transition: opacity 1s ease 1.1s; }
.mk-reveal-ready .is-visible .mk-ramp-area, .mk-reveal-ready .is-visible .mk-end-dot { opacity: 1; }
/* The benchmark band line draws itself in, exactly like the home page's ramp. */
.mk-reveal-ready .mk-band-line { stroke-dasharray: 640; stroke-dashoffset: 640; transition: stroke-dashoffset 1.9s var(--mk-ease) .2s; }
.mk-reveal-ready .is-visible .mk-band-line { stroke-dashoffset: 0; }
.mk-reveal-ready .mk-band-area { opacity: 0; transition: opacity 1s ease .3s; }
.mk-reveal-ready .is-visible .mk-band-area { opacity: 1; }
/* Bars grow from zero when their section arrives.
Each list ends with the declaration block, and that is load-bearing in a way a selector
list does not usually look: `.mk-dtrack` used to close both of these, and when the Design
Partners page went it took the two `{ … }` blocks with it. A selector list with nothing to
apply does not fail loudly — the parser discards it AND swallows the next block, which is
how one deleted line took the bar animations and the ultra-wide breakpoint below with it.
If a selector is ever removed from the end of one of these, move the block up a line. */
.mk-reveal-ready .mk-ind-fill,
.mk-reveal-ready .mk-bmk-fill,
.mk-reveal-ready .mk-dpptrack > i,
.mk-reveal-ready .mk-tbar > i,
.mk-reveal-ready .mk-mtrack > i { width: 0; transition: width 1.2s var(--mk-ease) .35s; }
.mk-reveal-ready .is-visible .mk-ind-fill,
.mk-reveal-ready .is-visible .mk-bmk-fill,
.mk-reveal-ready .is-visible .mk-dpptrack > i,
.mk-reveal-ready .is-visible .mk-tbar > i,
.mk-reveal-ready .is-visible .mk-mtrack > i { width: var(--mk-w, 0); }
/* Ultra-wide: let the container breathe rather than stranding content in a narrow column. */
@media (min-width: 1700px) {
:root { --mk-maxw: 1320px; --mk-measure-wide: 1040px; --mk-gutter: var(--mk-7); }
.mk { font-size: 18px; }
}
/*
* The gutter deliberately holds at one value from the container cap all the way down to
* the phone: `max-width` caps the border box, so shrinking the gutter near the cap makes
* the text column jump WIDER as the window narrows. It only steps down at 640px, where
* the layout is reflowing anyway.
*/
/* Laptop / small desktop. Four across gets cramped before the tablet breakpoint does. */
@media (max-width: 1100px) {
:root { --mk-sec-y: var(--mk-11); --mk-head-gap: var(--mk-7); }
.mk-steps { grid-template-columns: repeat(2, 1fr); }
.mk-hero-grid { gap: var(--mk-8); }
.mk-bench { gap: var(--mk-8); }
.mk-stages { gap: var(--mk-5); }
.mk-mc-card { padding: var(--mk-6) var(--mk-5); }
.mk-light > section:first-child { padding-top: var(--mk-12); }
.mk-light > section:last-child { padding-bottom: var(--mk-12); }
}
/* Tablet */
@media (max-width: 960px) {
:root { --mk-sec-y: var(--mk-10); }
.mk-navlinks { display: none; }
.mk-navtoggle { display: block; }
.mk-hero { padding: var(--mk-12) 0 var(--mk-10); }
.mk-hero-grid { grid-template-columns: 1fr; gap: var(--mk-8); }
.mk-hero h1 { max-width: 20ch; }
.mk-lede { max-width: 56ch; }
.mk-cat { padding: var(--mk-10) 0; }
.mk-light > section:first-child { padding-top: var(--mk-11); }
.mk-light > section:last-child { padding-bottom: var(--mk-11); }
.mk-mc { grid-template-columns: 1fr; }
/* The problem and practice rows stack: copy first, then the cards or the panel, which is
the reading order anyway once they cannot sit side by side. */
.mk-prob, .mk-dpp { grid-template-columns: 1fr; }
/* Three stages of prose get too narrow to read side by side well before this. */
.mk-stages { grid-template-columns: repeat(2, 1fr); }
/* The contents rail stops being a rail: there is no column to pin it beside, and a
sticky block above the text would eat the top of every screen as you read. It goes
back to being an ordinary list at the head of the document. */
.mk-lg-grid { grid-template-columns: minmax(0, 1fr); gap: var(--mk-7); }
.mk-lg-toc { position: static; min-width: 0; }
/* The notice stacks before the phone breakpoint does: two buttons and a sentence stop
fitting on one row well above 640px. */
.mk-cb-inner { flex-direction: column; align-items: stretch; gap: var(--mk-4); }
.mk-cb-copy p { max-width: none; }
/* The calculator stacks: inputs first, then the answer, which is the reading order
anyway once they cannot sit side by side. */
.mk-yn { grid-template-columns: 1fr; gap: var(--mk-6); }
.mk-yn-out { padding: var(--mk-6) var(--mk-5); }
/* "Left" and "right" describe halves of a two-column row, and by this width every such
row has stacked — so there is no left or right to arrive from, and the 28px of travel
only pushes a now-full-width card past the gutter and gives the page a few pixels of
sideways scroll until it reveals. Below the fold they become the default rise. */
.mk-reveal-ready [data-reveal="left"],
.mk-reveal-ready [data-reveal="right"] { translate: 0 26px; }
/* Before and after stack, and the arrow turns to point down the page. */
.mk-cred-grid { grid-template-columns: 1fr; }
.mk-cred { padding: var(--mk-10) 0 var(--mk-9); }
.mk-found { padding-bottom: var(--mk-10); }
.mk-cta { padding-block: var(--mk-11); }
.mk-ft { padding-top: var(--mk-10); }
.mk-ft-top { grid-template-columns: 1fr 1fr; }
.mk-ft-brand { grid-column: 1 / -1; }
.mk-comp-row { grid-template-columns: 1fr; gap: var(--mk-2); }
.mk-comp-row .mk-arw { display: none; }
.mk-found-panel { padding: var(--mk-7) var(--mk-6); }
/* Three stats stay side by side here — worth keeping the comparison in one glance —
so the padding comes in rather than the columns. */
.mk-stat { padding: var(--mk-5) var(--mk-5) var(--mk-4); }
.mk-cred-item, .mk-lcard, .mk-pillar { padding: var(--mk-5); }
/* How it works — the copy leads, its product card follows underneath. */
.mk-bench { grid-template-columns: 1fr; gap: var(--mk-7); }
.mk-data { grid-template-columns: 1fr; gap: var(--mk-6); padding: var(--mk-6); }
.mk-cluster { grid-template-columns: 1fr; }
.mk-oneview { padding: var(--mk-10) 0 var(--mk-8); }
/* Why RampVera — card grids collapse to a single column. */
.mk-land { grid-template-columns: 1fr; }
.mk-pillars { grid-template-columns: 1fr; }
.mk-timeline { padding: var(--mk-6); }
/* About — bios stack. The status cards used to pair up here, which was right when there
were four of them: two-by-two is a shape. Three cards in two columns is not a shape, it
is a row and an orphan with an empty half beside it — the same dead space the four-column
desktop grid was leaving. They hold three across until the single-column breakpoint
below, which is a step they can take in one go. */
.mk-team { grid-template-columns: 1fr; }
.mk-member { padding: var(--mk-5); }
.mk-belief h2 { max-width: 26ch; }
/* Design partners — the bargain stacks (get first, then ask), the phases go single file. */
.mk-getask { grid-template-columns: 1fr; }
.mk-ga-col { padding: var(--mk-5); }
.mk-phases { grid-template-columns: 1fr; }
}
/* Mobile — a layout of its own, not a shrunken desktop. */
@media (max-width: 640px) {
:root { --mk-gutter: var(--mk-5); --mk-sec-y: var(--mk-9); --mk-head-gap: var(--mk-6); --mk-grid-gap: var(--mk-4); }
.mk { font-size: var(--mk-fs-md); }
.mk-cat { padding: var(--mk-9) 0; }
.mk-hero { padding: var(--mk-11) 0 var(--mk-9); }
.mk-hero h1 { max-width: none; }
.mk-lg-hero { padding: calc(72px + var(--mk-8)) 0 var(--mk-8); }
.mk-lg { padding: var(--mk-9) 0 var(--mk-10); }
/* On a phone the notice goes full width and sits flush to the bottom edge — the inset
card that reads as considered on a desktop just wastes the little width there is. The
buttons go full width and stack, so neither is the easier one to hit with a thumb. */
.mk-cb {
left: 0;
bottom: 0;
transform: none;
width: 100%;
padding: var(--mk-5);
border-width: 1px 0 0;
border-radius: 0;
}
.mk-cb.is-dismissed { transform: translateY(12px); }
/* Stacked, still equal. `row` rather than `column` flow — the set is a grid, not a flex
row, so `flex-direction` would do nothing here. */
.mk-cb-actions { grid-auto-flow: row; }
/* The panel becomes a sheet off the bottom edge, which is where a phone expects a
settings surface and which keeps Save under the thumb rather than at the top of a
centred box. Full width, square along the bottom, and taller before it scrolls. */
.mk-cp {
top: auto;
bottom: 0;
left: 0;
width: 100%;
max-height: 90vh;
padding: var(--mk-5);
border-radius: var(--mk-r-panel) var(--mk-r-panel) 0 0;
transform: translateY(16px);
}
.mk-cp.is-open { transform: translateY(0); }
/* The row needs no mobile treatment now that the control sits beside the name rather than
in a column stealing width from the description. Only the description's right inset
goes, since there is nothing beside it to clear. */
.mk-cp-sum { padding-right: 0; }
.mk-cp-foot { flex-direction: column; align-items: stretch; gap: var(--mk-4); }
.mk-cp-save { width: 100%; }
/* The cookie table becomes one card per cookie. Five columns cannot fit here, and the
sideways scroll they need puts Purpose — the column someone actually came to read —
off the side of the screen, above rows left three lines tall by text nobody can see.
Every cell prints its own heading from `data-label` instead. The markup is untouched:
still a
, still with a , so assistive tech and wide screens are
unaffected. */
.mk-lg-tw { overflow-x: visible; border: 0; background: none; }
.mk-lg-tbl { display: block; min-width: 0; }
.mk-lg-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mk-lg-tbl tbody, .mk-lg-tbl tr, .mk-lg-tbl td { display: block; }
.mk-lg-tbl tr {
margin-bottom: var(--mk-4);
padding: var(--mk-2) var(--mk-4);
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-card);
background: var(--mk-card);
}
.mk-lg-tbl tr:last-child { margin-bottom: 0; }
.mk-lg-tbl td { padding: var(--mk-3) 0; border-bottom: 0; }
.mk-lg-tbl td + td { border-top: 1px solid var(--mk-line-soft); }
.mk-lg-tbl td::before {
content: attr(data-label);
display: block;
margin-bottom: 3px;
font-size: var(--mk-fs-label);
font-weight: 600;
letter-spacing: var(--mk-ls-label);
text-transform: uppercase;
color: var(--mk-ink-3);
}
.mk-light > section:first-child { padding-top: var(--mk-10); }
.mk-light > section:last-child { padding-bottom: var(--mk-10); }
.mk-stats, .mk-steps, .mk-stages { grid-template-columns: 1fr; }
/* The button goes full width; the secondary link deliberately does not — its hit area
should be its label, not the width of the screen. */
.mk-hero-cta { gap: var(--mk-4); }
.mk-hero-cta .mk-btn { width: 100%; }
.mk-hero-cta .mk-textlink { align-self: flex-start; }
.mk-mc-card { padding: var(--mk-6) var(--mk-5); }
.mk-bmk-row { grid-template-columns: 1fr auto; row-gap: 6px; }
.mk-bmk-track { grid-column: 1 / -1; order: 3; }
.mk-mc-foot { margin-top: var(--mk-6); font-size: var(--mk-fs-md); }
.mk-comp-note { font-size: var(--mk-fs-md); }
.mk-pcard, .mk-gapcard { padding: var(--mk-4); }
.mk-pc-chip { font-size: 10.5px; padding: 5px var(--mk-2); }
.mk-found { padding-bottom: var(--mk-9); }
.mk-found-panel { padding: var(--mk-6) var(--mk-5); border-radius: 18px; }
.mk-cred { padding: var(--mk-9) 0 var(--mk-8); }
.mk-cta { padding-block: var(--mk-10); }
.mk-ft { padding: var(--mk-9) 0 var(--mk-6); }
.mk-ft-top { grid-template-columns: 1fr; gap: var(--mk-6); }
.mk-ft-bottom { margin-top: var(--mk-7); flex-direction: column; gap: 6px; }
.mk-dividend { flex-direction: column; gap: var(--mk-2); }
.mk [id] { scroll-margin-top: var(--mk-10); }
/* How it works on a phone. The loop scrolls sideways rather than shrinking to
illegibility; the walkthrough cards go full width; the quote tightens up. */
.mk-quote { padding: var(--mk-4); }
.mk-bchart { padding: var(--mk-4); }
.mk-data { padding: var(--mk-5); }
.mk-approw { flex-direction: column; align-items: flex-start; gap: var(--mk-3); }
.mk-oneview { padding: var(--mk-9) 0 var(--mk-7); }
/* Why RampVera on a phone. The timeline stops pretending to be a horizontal track —
the connector and hatched stretch are meaningless in one column — and becomes a
plain stacked list, each stage reading left to right. */
.mk-timeline { padding: var(--mk-5); }
.mk-tl-track { flex-direction: column; gap: var(--mk-5); align-items: flex-start; }
.mk-tl-line, .mk-tl-invisible { display: none; }
.mk-tl-node,
.mk-tl-node:first-of-type,
.mk-tl-node:last-of-type {
width: 100%;
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: var(--mk-3);
}
.mk-tl-dot { flex: 0 0 auto; }
.mk-tl-what { max-width: none; }
.mk-tl-cap { text-align: left; margin-top: var(--mk-5); }
.mk-divsec { padding-bottom: var(--mk-9); }
.mk-dividend-lg { padding: var(--mk-5); }
/* About on a phone. The credentials become a stacked list rather than a wrapped row of
fragments, the status cards go single file, and the belief drops to reading size. */
.mk-credstrip { flex-direction: column; gap: var(--mk-2); margin-top: var(--mk-6); }
.mk-status { grid-template-columns: 1fr; }
.mk-member-head { gap: var(--mk-3); }
.mk-avatar { width: 64px; height: 64px; font-size: var(--mk-fs-md); }
.mk-belief h2 { max-width: none; text-align: left; }
.mk-belief { text-align: left; }
/* Design partners on a phone. Name and email stop sharing a row — two half-width text
fields on a 390px screen are not two fields, they are two problems. */
.mk-frow { grid-template-columns: 1fr; }
.mk-apply { padding-block: var(--mk-10) var(--mk-11); }
.mk-whofor p { font-size: var(--mk-fs-lg); }
}
/*
* Reduced motion: no transforms, no draw-in, no counters, no smooth scroll. Everything
* lands in its final state immediately — the page is identical, it just doesn't move.
*/
@media (prefers-reduced-motion: reduce) {
.mk *, .mk *::before, .mk *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.mk-reveal-ready [data-reveal] {
opacity: 1 !important;
translate: none !important;
scale: none !important;
rotate: none !important;
clip-path: none !important;
}
.mk-reveal-ready .mk-ramp-path { stroke-dashoffset: 0 !important; }
.mk-reveal-ready .mk-ramp-area, .mk-reveal-ready .mk-end-dot { opacity: 1 !important; }
.mk-reveal-ready .mk-ind-fill,
.mk-reveal-ready .mk-bmk-fill,
.mk-reveal-ready .mk-dpptrack > i,
.mk-reveal-ready .mk-tbar > i,
.mk-reveal-ready .mk-mtrack > i,
.mk-reveal-ready .mk-band-line { stroke-dashoffset: 0 !important; }
.mk-reveal-ready .mk-band-area { opacity: 1 !important; }
/* No drift, and no lift under the pointer — hover still responds, in colour only.
(The reveal controller also declines to set .mk-reveal-ready at all here, so most of
the system is already inert; these cover the parts that do not depend on it.) */
.mk-float { animation: none !important; }
.mk-hero::before { animation: none !important; }
.mk-parallax { transform: none !important; }
.mk-stat:hover,
.mk-step:hover,
.mk-pillar:hover,
.mk-lcard:hover,
.mk-member:hover,
.mk-status-item:hover,
.mk-cred-item:hover,
.mk-dchip:hover,
.mk-whochip:hover,
.mk-btn:hover { transform: none !important; }
/* The portrait still turns from grey to colour — that is the interaction, and a filter is
not movement. It just stops zooming while it does it. */
.mk-member:hover .mk-avatar-photo img,
.mk-member:focus-within .mk-avatar-photo img { transform: none !important; }
}
/*
* Everything that only happens when motion is welcome: smooth in-page scrolling for the
* anchor navigation, and the page transition below.
*
* Page transitions, between real navigations.
*
* The site has no client-side router — every page is a genuine document, which is what
* keeps it fast and crawlable. Cross-document view transitions give the cohesion of a
* single-page app without becoming one: the browser holds the outgoing page's pixels,
* runs these two animations, and swaps. Nine lines of CSS and no JavaScript at all.
*
* Out in 150ms, in over 240ms, with the new page also rising 8px — the asymmetry is what
* makes it read as arriving rather than as a crossfade. It is meant to be felt and not
* seen. Browsers without support simply navigate, exactly as before.
*/
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
@view-transition { navigation: auto; }
::view-transition-old(root) {
animation: mk-page-out .15s var(--mk-ease) both;
}
::view-transition-new(root) {
animation: mk-page-in .24s var(--mk-ease-out) both;
}
}
@keyframes mk-page-out { to { opacity: 0; } }
@keyframes mk-page-in { from { opacity: 0; translate: 0 8px; } }