/*
 * 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                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;
}

/*
 * Poppins, Vera's own face (the "Vera mark and website section" files, 9 October 2026).
 * Used by the Vera band on the homepage and nowhere else, and served from this origin like
 * the two above. The reference takes it from Google Fonts, which would send every
 * visitor's address to a third party that the cookie and privacy policies do not name.
 *
 * Three things differ from the brand faces, each on purpose:
 *   · Poppins has no variable cut, so it is one file per weight. The band uses 400, 500
 *     and 600. The reference's fourth weight, 300, is only for the word "vera" in the
 *     lockup, which is drawn as outlines and needs no font.
 *   · Latin only. The band is fixed English copy, so there is no latin-ext file to fetch.
 *   · Not preloaded. A browser fetches a face when something on the page is set in it,
 *     so the six pages without the band never download these, and the homepage fetches
 *     them (about 8 KB each) without putting them ahead of the first paint.
 *
 * Licence: SIL Open Font Licence 1.1, Copyright 2020 The Poppins Project Authors.
 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/poppins-latin-400-d360be31.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: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/poppins-latin-500-afc692de.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: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/poppins-latin-600-765bd6dc.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;
}

/* ─────────────────────────── 1. Tokens ─────────────────────────── */
:root {
  /* THE BANNER (10 October 2026). Every dark surface on the site is the hero's gradient or
     a tone taken from it: there is no black or navy ground left, and the two navy tokens
     that used to open this list went with it.

       --mk-banner       the hero's own four stops on its own 160deg diagonal. Bands, and
                         the dark cards that sit on the light canvas.
       --mk-banner-flip  the same gradient turned over (20deg): it opens on the violet the
                         banner closes on and closes on the indigo it opens on. For a
                         surface that follows another banner surface closely, so the two
                         do not read as the same sweep starting twice.
       --mk-banner-deep  the gradient's first stop, for the ground behind everything.
       --mk-panel-deep   the booking dialog's indigo. A solid card ON a banner band.
       --mk-glass        a card on a banner band that should let the band show through.

     Muted text was mixed for a near-black ground and loses its contrast at the violet end
     (the footer measured 2.0:1 before it was re-pitched). So every banner surface re-pitches
     the two muted tokens to the footer's own, in one rule further down. */
  --mk-banner: linear-gradient(160deg, #1B1440 0%, #2E2160 34%, #4A2F86 70%, #5C3A9C 100%);
  --mk-banner-flip: linear-gradient(20deg, #1B1440 0%, #2E2160 34%, #4A2F86 70%, #5C3A9C 100%);
  --mk-banner-deep: #1B1440;
  --mk-panel-deep: linear-gradient(170deg, #241B58 0%, #17123C 100%);
  --mk-glass: rgba(255, 255, 255, .07);
  --mk-glass-line: rgba(255, 255, 255, .14);
  /* How far the footer rises over the end of the page, which is also the radius of its two
     shoulders (section 13). Whatever is last on a page pays it back in padding. */
  --mk-ft-rise: 44px;
  --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-banner-deep);
  -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);
}
/* A KICKER LONG ENOUGH TO WRAP. Every other one on the site is a word or three and never
   does, which is why the rule above gives the line no leading at all and centres the dot
   on the box. The homepage's became a full phrase (A2, 8 October 2026 brief), and on a
   phone it runs to two lines: under the rule above those two lines touch, and the dot
   floats between them. This gives the lines room, pins the dot to the first of them, and
   balances the break so that it does not strand two words on a line of their own.

   The half-leading is taken back off the top and bottom, so wherever the kicker still fits
   on one line it occupies exactly the box a short one does and nothing around it moves. */
.mk-eyebrow-wrap {
  align-items: flex-start;
  line-height: 1.5;
  margin-block: -.25em;
  text-wrap: balance;
}
.mk-eyebrow-wrap::before { flex: none; margin-top: calc(.75em - 2.5px); }
.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, every hero banner and the panel a
   page closes on — 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. So "Book a call"
   is the same white pill at the top of a page and at the foot of it. Everywhere else (the
   glass cards on a dark band, the booking dialog) the product gradient above stays. */
.mk-nav .mk-btn-primary, .mk-mobile .mk-btn-primary, .mk-hero .mk-btn-primary, .mk-cta-band .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, .mk-cta-band .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;
}

/* THE EARLY-ACCESS BAND (14 October 2026 brief, change 1): one line above the bar, on the
   homepage. It is part of the fixed bar, so the page under it does not move: at the top of
   the page the two stand together over the hero, and once the page scrolls the band folds
   up (the grid row goes from its height to none) and the bar is 72px again, as on every
   other page. White, with the words and the dot in indigo (#4B3B9A), "Early access:" bold
   and the rest medium (Anubhav, 15 October 2026; it was a dark strip with a cyan dot for a
   day). `minmax(0, …)` because a plain `0fr` row is still as tall as the line's padding:
   folded, the band is nothing at all.

   `.mk-has-band` (on <body>, from the layout) is how the hero knows there is a band: below
   960 points the hero's own top padding is no more than the bar, so it grows by the band's
   height there. Above that the hero already stands well clear of both. */
.mk-ea-band {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  background: #FFFFFF;
  transition: grid-template-rows var(--mk-t-slow) var(--mk-ease-out);
}
.mk-ea-line {
  min-height: 0;
  margin: 0;
  padding: 10px var(--mk-gutter);
  color: #4B3B9A;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  transition: opacity var(--mk-t) var(--mk-ease-out);
}
.mk-ea-line b { color: #4B3B9A; font-weight: 700; }
.mk-ea-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  vertical-align: 2px;
  background: #4B3B9A;
}
.mk-nav.is-scrolled .mk-ea-band { grid-template-rows: minmax(0, 0fr); }
.mk-nav.is-scrolled .mk-ea-line { opacity: 0; }
@media (max-width: 960px) {
  .mk-has-band .mk-hero { padding-top: calc(var(--mk-12) + 40px); }
}
@media (max-width: 640px) {
  .mk-ea-line { padding-block: 9px; font-size: 13px; line-height: 19px; }
  .mk-has-band .mk-hero { padding-top: calc(var(--mk-11) + 56px); }
}
.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(10, 7, 26, .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 ───────────────────────── */
.mk-hero {
  position: relative;
  padding: var(--mk-14) 0 var(--mk-13);
  color: var(--mk-on-dark);
  /* `clip`, where a browser has it: `hidden` makes the section something that can be
     scrolled by script, and the homepage's window runs off its right edge, so focusing the
     window's link would slide the whole hero sideways to show the rest of it. */
  overflow: hidden;
  overflow: clip;
  /* 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: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mk-9);
  align-items: center;
  /* Depth for the window's entrance, which tips up out of it (section 14, "window"). */
  perspective: 1800px;
}
/* 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 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;
}

/* ────────────────────── 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(179, 166, 219, .14), transparent 70%),
    var(--mk-banner);
  color: var(--mk-on-dark);
}
/* Muted text on the banner, for every surface that wears it. The two tokens are redefined
   here and every component inside reads them, so nothing has to be re-coloured one rule at
   a time: #D3D7F1 and #B4B9E0 are the footer's own, measured against the violet end. */
.mk-dark, .mk-cta-panel, .mk-lg-hero, .mk-vera, .mk-mc-shot, .mk-lcard-us, .mk-yn-out, .mk-ga-ask, .mk-backdrop {
  --mk-on-dark-mut: #D3D7F1;
  --mk-on-dark-faint: #B4B9E0;
}
/* 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); }

/* A HEADING WITH NOTHING BESIDE IT RUNS ON ONE LINE (12 October 2026). The head was held to
   64ch of its own body size, about 620 points, so a seven-word heading at 42 broke after its
   fifth word with half the page empty to its right: "Measure the ramp. Then close the / gap."
   The head is as wide as what it sits in now, and it is the paragraph under the heading that
   keeps a reading measure (`.mk-sub`, 58ch). A heading in one column of a row is still as
   wide as that column, and one too long for the page still wraps, balanced. */
.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;
  text-wrap: balance;
}
.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);
}

/* Sourced statistics, not unsourced ones (HP6). Three of them since the 8 October 2026
   brief (H3), where there were two. */
.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 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 panel (final fixes, fix 2): 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).

   THE LAST BEAT OF THE SECTION, UNDER THE ROOM (12 October 2026). It stood beside the copy,
   over the room. It is the outcome, so it comes after the rehearsal: one strip as wide as the
   card above it, which indicator on the left, the two bars in the middle, what happened on
   the right. It stacks, in that order, when the page is too narrow for three columns. */
.mk-dpp-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) minmax(0, 1fr);
  gap: var(--mk-6) var(--mk-8);
  align-items: center;
  margin-top: var(--mk-grid-gap);
  padding: var(--mk-6) var(--mk-7);
  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));
}
/* Which indicator this is, in the eyebrow's own type: the one the rep is short on. */
.mk-dpp-k {
  margin-bottom: var(--mk-2);
  font-size: var(--mk-fs-micro);
  font-weight: 600;
  letter-spacing: var(--mk-ls-label);
  text-transform: uppercase;
  color: var(--mk-amber-ink);
}
.mk-dpp-t { font-size: var(--mk-fs-lg); font-weight: 700; color: var(--mk-ink); letter-spacing: -.01em; }
.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;
}
.mk-dpprow + .mk-dpprow { 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; }
/* What happened, said as the heading of its column and not as a footnote: it is the claim
   the whole section is there to make. */
.mk-dpp-end { padding-left: var(--mk-7); border-left: 1px solid var(--mk-hair); }
.mk-dpp-note {
  font-family: var(--mk-disp);
  font-size: var(--mk-fs-h4);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--mk-ink);
}
/* THE PRACTICE THAT CAME BETWEEN THE TWO BARS (12 October 2026), named in the words the room
   under the panel is headed with, so the eye goes from this line to the picture and finds
   the same words there. A caption, not a third row: it has the note's small type and sits
   under the rule with it. */
.mk-dpp-aim {
  display: flex;
  align-items: center;
  gap: var(--mk-3);
  margin-top: var(--mk-4);
  padding: var(--mk-3) var(--mk-4);
  border-radius: var(--mk-r-card);
  background: rgba(124, 107, 224, .07);
  font-size: var(--mk-fs-xs);
  line-height: 1.45;
  color: var(--mk-ink-2);
}
.mk-dpp-aim-ic {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mk-card);
  color: var(--mk-indigo-a);
  box-shadow: 0 0 0 1px rgba(124, 107, 224, .22);
}
.mk-dpp-aim-t b { display: block; color: var(--mk-ink); font-weight: 600; }

/* WHOSE SECTION THIS IS, over a card that carries its own heading (12 October 2026): "For the
   manager", "For the rep". An eyebrow with a rule running from it to the page's edge, so a
   label standing alone over a card reads as the start of something and not as a stray line. */
.mk-chapter {
  display: flex;
  align-items: center;
  gap: var(--mk-5);
  margin-bottom: var(--mk-5);
}
.mk-chapter::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--mk-line), transparent); }
.mk-chapter .mk-eyebrow { flex: 0 0 auto; }

/* ─────────────────── 8. Measure / Close ─────────────────── */
/* ONE UNDER THE OTHER, where they stood side by side (10 October 2026). The Measure card
   holds a whole application window now (slot S1), and a window is only worth showing at a
   size its table can be read at. So each card is the full width, with its copy in one row
   and a window under it, as wide as the card.

   FOUR CARDS ARE BUILT THIS WAY since 12 October 2026, and they are the homepage's story in
   order: Measure (the team), Close (the one indicator a new hire is short on), and under
   "For the manager" and "For the rep" the two cards labelled "Close the gap" (the coaching
   brief, and the rehearsal). `.mk-mc-shot` is the card; the second class says which.

   The card is a backdrop that also holds copy: the same padding, so its window is one of
   the widths its picture comes in (see "Product screenshots" below). Every other one turns
   the gradient over, as two backdrops in a row do, so four dark cards down a page are not
   the same card four times. */
.mk-mc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mk-grid-gap);
}
.mk-mc-card { padding: var(--mk-7) var(--mk-6); border-radius: var(--mk-r-panel); }
.mk-mc-card.mk-mc-shot {
  --mk-pad: clamp(12px, 3.4vw, 38px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mk-7);
  padding: var(--mk-pad);
  background: var(--mk-banner);
  color: var(--mk-on-dark);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--mk-e3);
  overflow: hidden;
  overflow: clip;
}
/* The copy in one row: the tag and the heading on the left, the paragraph on the right,
   their last lines level. It stacks when the card is too narrow for two measures. */
.mk-mc-copy {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  /* The label's row takes what is left over, so the label stays on the heading when the
     paragraph beside them is the taller of the two. */
  grid-template-rows: 1fr auto;
  column-gap: var(--mk-9);
  align-items: end;
}
/* Two paragraphs beside a two-line heading: level at the top, where both start, and not at
   the foot, which would leave the heading under a hole. */
.mk-mc-rep .mk-mc-copy { grid-template-rows: auto 1fr; align-items: start; }
.mk-mc-rep .mk-mc-copy .mk-mc-body { padding-top: var(--mk-1, 4px); }
.mk-mc-shot .mk-mc-copy { padding: var(--mk-4) var(--mk-3) 0; }
.mk-mc-copy .mk-mc-tag { grid-column: 1; justify-self: start; }
.mk-mc-card .mk-mc-copy :is(h2, h3) { grid-column: 1; margin-bottom: 0; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.16; }
.mk-mc-copy .mk-mc-body { grid-column: 2; grid-row: 1 / span 2; }
.mk-mc-body p + p { margin-top: var(--mk-4); }
.mk-mc-card.mk-mc-close, .mk-mc-card.mk-mc-rep { background: var(--mk-banner-flip); }
.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-shot .mk-mc-tag { color: var(--mk-cyan-bright); }
.mk-mc-shot .mk-mc-tag::before { background: var(--mk-cyan); box-shadow: 0 0 9px var(--mk-cyan); }
.mk-mc-card :is(h2, h3) { font-size: var(--mk-fs-h3); line-height: 1.25; margin: var(--mk-4) 0 var(--mk-3); letter-spacing: var(--mk-ls-head); }
.mk-mc-shot :is(h2, h3) { color: #fff; }
.mk-mc-body { font-size: var(--mk-fs-md); line-height: var(--mk-lh-body); }
.mk-mc-shot .mk-mc-body { color: var(--mk-on-dark-mut); }

.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; }

/* ── Product screenshots (10 October 2026) ──────────────────────────────────────────────
   SHOWN AT THE SIZE THEY WERE DRAWN. A screenshot is small type on a flat ground, and a
   browser asked to shrink one blurs every letter of it: the first set was a 1600 point
   screen in 880 points of page, and read as a grey texture. So nothing here is shrunk on a
   desktop. Each picture comes as the product drawn AT several widths (MarketingHelper::
   SHOTS), and a window is made exactly as wide as one of them:

     a window in a section    1024 wide on a page 1180 to 1699 wide, 1120 on a wider one
     the hero's window         one of ten widths, every 64 from 704 to 1280, by the width
                               of the page (the table is with `.mk-hero-shot`, below)

   Three things have to say those numbers and agree: this file, that helper and the `sizes`
   each caller gives. Below those page widths a window is as wide as its column and the
   browser does scale the picture, as it must on a phone.

   A WINDOW THAT HAS ARRIVED DOES NOT MOVE, for the same reason: a picture resting between
   two pixels is as soft as one that was shrunk. Its entrance, the light behind it and the
   sheen across it are the motion (section 14); a drift with the scroll moves it in whole
   pixels only.

   THE WINDOW is one object of frosted glass: a frame (`--mk-bezel` wide), a strip across
   its top with three lights and the product's address, and the picture set into it with
   corners of its own. `backdrop-filter` is what frosts it; where
   a browser has none the frame is simply a translucent white. Behind it a soft light in
   the site's two accents, which each backdrop may re-tint (`--mk-glow-a`, `--mk-glow-b`).

   The picture is a link to itself at its largest, so the cursor and a lift say it opens. */
.mk-shot { --mk-bezel: clamp(4px, .68vw, 8px); margin: 0; perspective: 1800px; }
.mk-shot-stage { position: relative; isolation: isolate; }
.mk-shot-glow {
  position: absolute;
  z-index: -1;
  inset: -4% -3% -9%;
  border-radius: 50%;
  background:
    radial-gradient(50% 60% at 20% 36%, var(--mk-glow-a, rgba(92, 184, 214, .62)), transparent 72%),
    radial-gradient(50% 60% at 80% 66%, var(--mk-glow-b, rgba(168, 128, 255, .66)), transparent 72%);
  filter: blur(58px);
  opacity: .62;
  pointer-events: none;
}
.mk-shot-frame {
  position: relative;
  padding: 0 var(--mk-bezel) var(--mk-bezel);
  border-radius: calc(var(--mk-bezel) + 12px);
  background: linear-gradient(150deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .1) 36%, rgba(255, 255, 255, .17));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .26),
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 46px 90px -36px rgba(8, 4, 30, .82),
    0 20px 44px -26px rgba(8, 4, 30, .55);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  transition:
    translate var(--mk-t-hover) var(--mk-ease-out),
    box-shadow var(--mk-t-hover) var(--mk-ease-out);
}
/* The lift is whole pixels, like everything that moves a picture. */
.mk-shot-frame:hover {
  translate: 0 -4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .34),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 56px 100px -36px rgba(8, 4, 30, .86),
    0 24px 50px -26px rgba(8, 4, 30, .6);
}
/* Three columns, so the address is in the middle of the window and the lights at its left
   do not push it over. Nothing stands at the right. */
.mk-shot-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--mk-3);
  height: clamp(24px, 3vw, 36px);
  padding: 0 clamp(2px, .5vw, 6px);
}
.mk-shot-dots { display: flex; gap: clamp(4px, .5vw, 6px); }
.mk-shot-dots i { width: clamp(7px, .85vw, 10px); height: clamp(7px, .85vw, 10px); border-radius: 50%; }
.mk-shot-dots i:nth-child(1) { background: #FF6F66; }
.mk-shot-dots i:nth-child(2) { background: #FFC84A; }
.mk-shot-dots i:nth-child(3) { background: #46D990; }
.mk-shot-url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: clamp(140px, 24vw, 280px);
  height: 22px;
  padding: 0 var(--mk-4);
  border-radius: 7px;
  background: rgba(16, 10, 48, .3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .84);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}
.mk-shot-url svg { flex: 0 0 auto; opacity: .8; }
.mk-shot-pic {
  position: relative;
  display: block;
  border-radius: clamp(6px, .8vw, 10px);
  background: #F5F6FB;
  box-shadow: 0 0 0 1px rgba(16, 10, 48, .24);
  overflow: hidden;
  cursor: zoom-in;
}
.mk-shot-pic img { display: block; width: 100%; height: auto; }
.mk-shot-pic:focus-visible { outline: 3px solid var(--mk-cyan-bright); outline-offset: 3px; }
/* The sheen: one band of light that crosses the picture once, after the window has stood
   up (section 14). It waits off the left edge and is never seen at rest. Tinted in the
   site's two accents, because most of a product screen is white and white light on white
   is not seen at all. */
.mk-shot-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(102deg,
    transparent 36%, rgba(155, 142, 196, .16) 45%, rgba(116, 205, 232, .26) 50%,
    rgba(155, 142, 196, .16) 55%, transparent 64%);
  translate: -120% 0;
}
.mk-shot-cap {
  margin-top: var(--mk-5);
  color: rgba(255, 255, 255, .78);
  font-size: var(--mk-fs-sm);
  line-height: 1.5;
  text-align: center;
}

/* ── The screenshot viewer (12 October 2026) ────────────────────────────────────────────
   What a click on a screenshot opens: the same picture, large, over the page, with a way
   to close it (shared/_lightbox, marketing/lightbox_controller.js). z-index 80, with the
   booking dialog: over the bar, the menu and the cookie notice. Hidden by the `hidden`
   attribute; this block only decides what open looks like.

   ONE COLUMN, exactly as wide as the picture: what the picture shows and the buttons in a
   line above it, the picture under them. So the close button stands at the picture's own
   corner on any screen, and not off at the corner of a wide monitor.

   THE THREE SIZES ARE THE CONTROLLER'S, because they are arithmetic on the screen and on
   which files the picture comes as: `--mk-lbx-pic` how wide the picture is drawn,
   `--mk-lbx-box` how wide the column is (the same, except zoomed, when the picture is wider
   than the screen and the frame scrolls), `--mk-lbx-room` how tall the frame may be. */
.mk-lbx {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--mk-5);
}
.mk-lbx[hidden] { display: none; }
.mk-lbx-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 7, 26, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.mk-lbx-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--mk-3);
  width: var(--mk-lbx-box, auto);
  max-width: 100%;
}
.mk-lbx-head { display: flex; align-items: center; gap: var(--mk-3); height: 40px; }
.mk-lbx-cap {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: rgba(255, 255, 255, .88);
  font-size: var(--mk-fs-sm);
  font-weight: 500;
  line-height: 1.4;
}
.mk-lbx-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  color: #fff;
  cursor: pointer;
  transition: background var(--mk-t) var(--mk-ease-out);
}
.mk-lbx-btn[hidden] { display: none; }
.mk-lbx-btn:hover { background: rgba(255, 255, 255, .24); }
.mk-lbx-btn:focus-visible { outline: 3px solid var(--mk-cyan-bright); outline-offset: 2px; }
.mk-lbx-btn[aria-pressed="true"] .mk-lbx-plus { display: none; }
.mk-lbx-frame {
  max-height: var(--mk-lbx-room, none);
  border-radius: 12px;
  background: #F5F6FB;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .18),
    0 50px 110px -40px rgba(0, 0, 0, .85),
    0 22px 48px -28px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.mk-lbx-pic {
  display: block;
  width: var(--mk-lbx-pic, 100%);
  max-width: none;
  height: auto;
  aspect-ratio: var(--mk-lbx-ratio, auto);
}
/* Zoomed, the picture is wider than the screen and the frame is what scrolls. `contain`
   so reaching its edge does not start pulling the page behind it. */
.mk-lbx.is-zoomable .mk-lbx-pic { cursor: zoom-in; }
.mk-lbx.is-zoomed .mk-lbx-pic { cursor: zoom-out; }
.mk-lbx.is-zoomed .mk-lbx-frame { overflow: auto; overscroll-behavior: contain; }
@media (max-width: 640px) {
  .mk-lbx { padding: var(--mk-3); }
}

/* THE BACKDROP. Where a window sits on the light canvas, it stands on a panel of the banner
   gradient as wide as the page, the way the hero's window stands on the hero. Two soft
   lights and a faint grid of dots are on layers of their own, behind the window, so they
   can drift (section 14) without the window moving with them. `isolation` keeps those
   layers under the window and nowhere else.

   `--mk-pad` IS ARITHMETIC, not taste. On a desktop it is what is left of the page's width
   once the picture and the two sides of its frame are taken out, halved: 1116 less 1024
   less 16 is 76, so 38 a side; and on a page 1700 and wider, 1240 less 1120 less 16 is 104,
   so 52. Change it and the window is no longer the width of a picture.

   `overflow: clip`, with `hidden` only for a browser that does not know it. Both cut the
   lights off at the rounded corners. But `hidden` also makes the box a scroll container,
   and the window's drift (the end of this file) is timed by how far the window has
   travelled through the nearest one: inside a `hidden` box that is the box itself, where
   the window never moves, so the drift never ran. */
.mk-backdrop {
  --mk-pad: clamp(12px, 3.4vw, 38px);
  position: relative;
  isolation: isolate;
  padding: var(--mk-pad);
  border-radius: clamp(16px, 2.2vw, 28px);
  background: var(--mk-banner);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--mk-e3);
  overflow: hidden;
  overflow: clip;
}
.mk-sec-head + .mk-backdrop { margin-top: var(--mk-head-gap); }
.mk-backdrop::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 78% 12%, rgba(179, 166, 219, .30), transparent 62%),
    radial-gradient(50% 50% at 8% 92%, rgba(92, 184, 214, .16), transparent 64%);
}
.mk-backdrop::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 78%);
}
/* Three backdrops follow one another down the homepage. Each is the same gradient lit
   from a different side, so they read as one family and not as one picture three times. */
.mk-backdrop-b { background: var(--mk-banner-flip); --mk-glow-a: rgba(168, 128, 255, .6); --mk-glow-b: rgba(92, 184, 214, .5); }
.mk-backdrop-b::before {
  background:
    radial-gradient(55% 55% at 14% 10%, rgba(92, 184, 214, .22), transparent 62%),
    radial-gradient(55% 50% at 92% 88%, rgba(179, 166, 219, .30), transparent 64%);
}
.mk-backdrop-c { --mk-glow-a: rgba(116, 205, 232, .5); --mk-glow-b: rgba(224, 132, 255, .5); }
.mk-backdrop-c::before {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(179, 166, 219, .34), transparent 62%),
    radial-gradient(45% 45% at 96% 96%, rgba(92, 184, 214, .18), transparent 64%);
}

/* THE HERO'S WINDOW RUNS OFF THE SCREEN (11 October 2026). It had been brought in whole
   beside the headline, which made it small; it was then asked to be wider and allowed to
   cross the edge. So it is a fifth larger at every page width and sixteen by nine, and it
   is hung FROM THE RIGHT: the screen's edge always cuts the picture at the same place,
   1104 of its 1280 points across, which is after the titles of the right-hand cards and
   before their figures. A cut that wandered with the width of the page would land in the
   middle of a word on most screens.

     page width      1260  1392  1504  1616  1700  1750  1860  1972  2084  2192
     picture, wide    704   768   832   896   960  1024  1088  1152  1216  1280
     of it on screen  607   662   718   773   828   883   938   994  1049  1104

   Each is 64 more than the last and has a file drawn at exactly that size (MarketingHelper::
   HERO_SHOT_POINTS), so the picture is still never resized. The window is the picture plus
   the two sides of its frame, the 16 below. A width is used from the page on which it
   leaves the headline its gap; from there to the next the gap grows instead, which is what
   `margin-left` works out: half the page, less the headline's column, less what shows.
   `--mk-hero-k` is the part of that sum that is the page's own measure and gutter, and it
   changes where they do, at 1700. On a very wide screen the gap stops growing at 200 and
   the window comes in whole.

   A page narrower than 1260 has no room for the two side by side at any size worth looking
   at, so the hero stacks there and the window is as wide as the page, whole.

   TWO NOTES STAND IN FRONT OF IT, chips of dark glass that float and lean toward the
   pointer because the window itself may not: its caption, hanging off the lower left
   corner, and the AI Practice Room, live, across the top edge where the screen's edge is. */
.mk-hero-grid-window { grid-template-columns: 540px minmax(0, 1fr); gap: var(--mk-7); }
/* How it works has the same window beside a headline half as long again as the homepage's.
   At the homepage's size it stood five lines deep in this column and outweighed the picture;
   a step down, it is three: "Know who is ramping." has a line to itself. */
.mk-hero-hiw h1 { font-size: clamp(34px, 4.1vw, 50px); }
.mk-hero-shot {
  --mk-hero-p: 704px;
  --mk-hero-v: 607px;
  --mk-hero-k: -30px;
  position: relative;
  width: calc(var(--mk-hero-p) + 16px);
  margin-left: clamp(-16px, calc(50vw + var(--mk-hero-k) - var(--mk-hero-v)), 200px);
}
.mk-hero-note,
.mk-hero-live {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--mk-3);
  /* Dark glass, not the window's light one: half of it lies over the white of the picture,
     and white type on frosted white cannot be read. */
  background: linear-gradient(150deg, rgba(58, 42, 118, .9), rgba(30, 22, 72, .92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .2),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 26px 54px -22px rgba(8, 4, 30, .85);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  color: #fff;
}
/* The caption ends where the product's own sidebar does (272 of the picture's 1280 points
   across, and a little), so it covers the foot of the sidebar and none of the screen
   beside it, and hangs out past the window's corner by whatever is left of its length. */
.mk-hero-note {
  right: calc(var(--mk-hero-p) * .7875 - 4px);
  bottom: -30px;
  width: max-content;   /* or it is squeezed into the little of the window that is left of it */
  max-width: min(360px, 78vw);
  padding: var(--mk-3) var(--mk-5) var(--mk-3) var(--mk-3);
  border-radius: 16px;
}
.mk-hero-note-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--mk-cyan), #7C6BE0);
  box-shadow: 0 8px 18px -8px rgba(92, 184, 214, .9);
}
.mk-hero-note-t { display: grid; gap: 1px; min-width: 0; }
.mk-hero-note-t b { font-family: var(--mk-disp); font-size: var(--mk-fs-base); font-weight: 700; line-height: 1.3; }
.mk-hero-note-t span { font-size: var(--mk-fs-xs); line-height: 1.4; color: rgba(255, 255, 255, .82); }
/* The second note. Its right end is 28 points inside the edge of the screen, wherever that
   falls on the window: what is hidden of the picture, the frame's side, and the 28.

   IT STANDS ACROSS THE STRIP, so in this one window the address is beside the three lights
   and not in the middle, where a browser with a short address bar has it. The middle of a
   window that runs off the screen is not the middle of what can be seen of it. */
.mk-hero-shot .mk-shot-bar { grid-template-columns: auto auto minmax(0, 1fr); gap: var(--mk-4); }
.mk-hero-shot .mk-shot-url { min-width: clamp(140px, 13vw, 240px); }
.mk-hero-live {
  top: -24px;
  right: calc(var(--mk-hero-p) - var(--mk-hero-v) + 36px);
  padding: 7px var(--mk-5) 7px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.mk-hero-live-face {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--mk-cyan-bright), #9B7CF0);
}
.mk-hero-live-face img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* She is in the room now: the green light every calling screen has. */
.mk-hero-live-face::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #46D990;
  box-shadow: 0 0 0 2.5px #2A1F60;
}
/* Her voice, as five bars. Still, they are a small level meter; they move in section 14. */
.mk-hero-live-wave { display: flex; align-items: center; gap: 3px; height: 22px; margin-left: var(--mk-2); }
.mk-hero-live-wave i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--mk-cyan-bright), #9B8EF0);
  scale: 1 var(--mk-wave, .4);
}
.mk-hero-live-wave i:nth-child(2) { --mk-wave: .8; }
.mk-hero-live-wave i:nth-child(3) { --mk-wave: 1; }
.mk-hero-live-wave i:nth-child(4) { --mk-wave: .6; }
.mk-hero-live-wave i:nth-child(5) { --mk-wave: .3; }
/* MORE LIGHT, because this window is the first thing on the site. The glow behind it is
   wider and stronger than a section's, and reaches furthest toward the headline, the one
   side the screen does not cut. And one bright point travels round the edge of the glass:
   a ring of gradient the width of a hairline, turned by `--mk-edge` (section 14). Where a
   browser cannot animate a custom angle it is simply a highlight on one corner. */
.mk-hero-shot .mk-shot-glow {
  --mk-glow-a: rgba(92, 196, 232, .78);
  --mk-glow-b: rgba(184, 124, 255, .74);
  inset: -11% -4% -17% -13%;
  filter: blur(72px);
  opacity: .9;
}
.mk-hero-shot .mk-shot-frame {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 1px 0 rgba(255, 255, 255, .46),
    0 60px 120px -40px rgba(8, 4, 30, .9),
    0 26px 56px -28px rgba(8, 4, 30, .6),
    0 0 90px -30px rgba(124, 107, 224, .55);
}
@property --mk-edge { syntax: "<angle>"; inherits: false; initial-value: 215deg; }
.mk-hero-shot .mk-shot-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--mk-edge),
    transparent 0deg, rgba(116, 205, 232, .9) 28deg, #fff 40deg, rgba(190, 160, 255, .9) 52deg, transparent 84deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* The same point again, wider and out of focus: the bloom a bright light has. */
.mk-hero-shot .mk-shot-frame::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 1;
  padding: 5px;
  border-radius: inherit;
  background: conic-gradient(from var(--mk-edge),
    transparent 6deg, rgba(116, 205, 232, .75) 30deg, rgba(255, 255, 255, .9) 40deg, rgba(190, 160, 255, .75) 50deg, transparent 76deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: blur(7px);
  opacity: .85;
  pointer-events: none;
}
@media (min-width: 1392px) { .mk-hero-shot { --mk-hero-p: 768px; --mk-hero-v: 662px; } }
@media (min-width: 1504px) { .mk-hero-shot { --mk-hero-p: 832px; --mk-hero-v: 718px; } }
@media (min-width: 1616px) { .mk-hero-shot { --mk-hero-p: 896px; --mk-hero-v: 773px; } }
@media (min-width: 1700px) {
  .mk-hero-grid-window { gap: 56px; }
  .mk-hero-shot { --mk-hero-p: 960px; --mk-hero-v: 828px; --mk-hero-k: 16px; }
  .mk-backdrop, .mk-mc-card.mk-mc-shot { --mk-pad: 52px; }
}
@media (min-width: 1750px) { .mk-hero-shot { --mk-hero-p: 1024px; --mk-hero-v: 883px; } }
@media (min-width: 1860px) { .mk-hero-shot { --mk-hero-p: 1088px; --mk-hero-v: 938px; } }
@media (min-width: 1972px) { .mk-hero-shot { --mk-hero-p: 1152px; --mk-hero-v: 994px; } }
@media (min-width: 2084px) { .mk-hero-shot { --mk-hero-p: 1216px; --mk-hero-v: 1049px; } }
@media (min-width: 2192px) { .mk-hero-shot { --mk-hero-p: 1280px; --mk-hero-v: 1104px; } }
/* Stacked: the headline, then the window across the page under it, all of it. The second
   note has no edge of the screen to stand at there, and the room has its own picture
   further down. */
@media (max-width: 1259px) {
  .mk-hero-grid-window { grid-template-columns: minmax(0, 1fr); gap: var(--mk-8); }
  .mk-hero-grid-window h1 { max-width: 20ch; }
  .mk-hero-grid-window .mk-lede { max-width: 56ch; }
  .mk-hero-shot { width: 100%; margin-left: 0; }
  .mk-hero-shot .mk-shot-bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--mk-3); }
  .mk-hero-shot .mk-shot-url { min-width: clamp(140px, 24vw, 280px); }
  .mk-hero-note { right: auto; left: clamp(12px, 2.2vw, 30px); }
  .mk-hero-live { display: none; }
}
/* The smallest window that stands beside the headline has no room in its strip for the
   address and the second note both. */
@media (min-width: 1260px) and (max-width: 1391px) {
  .mk-hero-live { display: none; }
}
/* A hero with a window in it is as tall as the window, which is taller than any card was.
   So it gives back some of the hero's own padding, and the window still ends on the first
   screen of a laptop. */
@media (min-width: 961px) {
  .mk-hero:has(.mk-hero-shot) { padding: calc(72px + var(--mk-9)) 0 var(--mk-11); }
}
/* On a short screen the smaller windows are not as tall as the headline's column, and
   centred beside it they would end below the fold. They stand at its top instead. */
@media (min-width: 1260px) and (max-height: 700px) {
  .mk-hero-shot { align-self: start; }
}

/* ── Vera (8 October 2026 brief, built from the reference supplied with the mark) ──
   A band of its own between the two light halves of the homepage. The measurements, the
   typeface and every colour are the reference's: Poppins (section 0, served from here),
   its navy ground, its card and border, its message bubble and its lavender for the small
   text. The one thing that is the site's is the page width and gutter, so the band lines
   up with the sections above and below it.

   Copy on the left, and on the right one card: the mark beside the name, a sample message
   and the caption that says it is one. Below 900px the card drops under the copy, which is
   where the reference breaks too.

   `line-height: 1.5` is what the reference gets from Poppins wherever it sets none (the
   label, the highlight line, the name and role, the caption). The site's own 1.65 would
   open every one of them up. */
.mk-vera {
  padding: var(--mk-9) 0;
  background: var(--mk-banner);
  color: #fff;
  font-family: "Poppins", var(--mk-body);
  line-height: 1.5;
}
.mk-vera-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: var(--mk-9);
  align-items: center;
}
.mk-vera-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.mk-vera-label {
  padding: 6px 14px;
  border: 1px solid #5E5590;
  border-radius: 999px;
  color: #B9B0DA;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* 44px at the reference's 1200px, easing down as the copy column narrows beside the card,
   and its 32px once the card has dropped below. */
.mk-vera h2 {
  font-family: "Poppins", var(--mk-disp);
  font-size: clamp(32px, 3.67vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}
.mk-vera-body { max-width: 540px; font-size: 18px; line-height: 1.6; color: #C9D2E3; }
.mk-vera-point { padding-left: 14px; border-left: 3px solid #869EE8; font-size: 16px; font-weight: 500; }
.mk-vera-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border: 1px solid #33405A;
  border-radius: 28px;
  background: var(--mk-glass);
}
.mk-vera-who { display: flex; align-items: center; gap: 14px; }
.mk-vera-mark { flex: 0 0 auto; }
.mk-vera-name { font-size: 18px; font-weight: 500; }
.mk-vera-role { font-size: 13px; color: #B9B0DA; }
.mk-vera-msg {
  padding: 20px 22px;
  border-radius: 6px 20px 20px 20px;
  background: rgba(13, 8, 40, .5);
  color: #E6EAF3;
  font-size: 16px;
  line-height: 1.6;
}
.mk-vera-note { font-size: 12px; color: #B9B0DA; }
@media (max-width: 900px) {
  .mk-vera { padding: var(--mk-8) 0; }
  .mk-vera-grid { grid-template-columns: 1fr; gap: var(--mk-6); }
  .mk-vera h2 { font-size: 32px; }
}

/* The Illustrative tag on a light ground. The same recipe as the tag above, 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, #241B58, #2E2160);
  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-grid-gap);
  padding: var(--mk-5) var(--mk-6);
  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(179, 166, 219, .22), transparent 60%),
    var(--mk-glass);
  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 IS A PANEL ON THE LIGHT CANVAS (10 October 2026).
 *
 * It was a band of the banner gradient across the whole page, and the footer under it was
 * the same gradient again: two surfaces with a hairline between them that nobody could tell
 * apart, and on the homepage the last of four dark bands in a row. Every dark surface is
 * the banner by design, so the two could not be told apart by colour. They are told apart
 * by SHAPE instead. The ask is one object, a rounded panel of the banner standing on the
 * light canvas the way a screenshot's backdrop does, and the footer is the sheet that
 * rises under it (section 13). Between them there is always light.
 *
 * THE BAND is the light ground the panel stands on, shaded top and bottom like any light
 * half of a page. After a light half it is the same canvas carrying on, so neither shades
 * the seam and the band adds no room of its own above the panel: the section before it
 * already ends on a full measure of space. Its bottom padding includes what the footer
 * rises over it.
 */
.mk-cta-band {
  padding: var(--mk-11) 0 calc(var(--mk-11) + var(--mk-ft-rise));
  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);
}
.mk-light + .mk-cta-band {
  padding-top: 0;
  background-image: linear-gradient(0deg, #E7ECF5 0%, rgba(246,248,252,0) 220px);
}
.mk-light:has(+ .mk-cta-band) { background-image: linear-gradient(180deg, #EBEFF7 0%, rgba(246,248,252,0) 320px); }
/*
 * THE PANEL. The banner, with three lights in it on a layer of their own so they can drift
 * (a lavender one over the words, the site's cyan low on the left, a violet high on the
 * right), a fine dotted ground that fades toward the edges, and a hairline of light along
 * its top edge. It casts a violet shadow, because it stands on white. The lights come up
 * as the panel arrives: the one place the motion is meant to be noticed.
 */
.mk-cta-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-inline: clamp(20px, 5vw, 72px);
  border-radius: clamp(20px, 2.4vw, 32px);
  background: var(--mk-banner);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 50px 100px -44px rgba(46, 33, 96, .70),
    0 20px 44px -24px rgba(27, 20, 64, .45);
}
.mk-cta-panel::before,
.mk-cta-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.mk-cta-panel::before {
  inset: -12%;
  background:
    radial-gradient(40% 56% at 50% 12%, rgba(179, 166, 219, .46), transparent 66%),
    radial-gradient(34% 58% at 12% 88%, rgba(92, 184, 214, .28), transparent 66%),
    radial-gradient(36% 60% at 88% 18%, rgba(214, 130, 255, .30), transparent 66%);
}
.mk-cta-panel::after {
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(60% 80% at 50% 44%, #000, transparent 76%);
  mask-image: radial-gradient(60% 80% at 50% 44%, #000, transparent 76%);
}
.mk-reveal-ready .mk-cta-panel::before { opacity: 0; transition: opacity 1.4s var(--mk-ease-out) .15s; }
.mk-reveal-ready .mk-cta-panel.is-visible::before { opacity: 1; }
/* The rings behind the words: three circles on one centre, each fainter than the one
   inside it, cut off by the panel's own edge. As wide as a desktop panel and never less
   than twice a phone's, so the innermost still clears the words. They open outward, one
   after the other, as the panel arrives. */
.mk-cta-rings {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: -1;
  width: clamp(760px, 220vw, 1200px);
  aspect-ratio: 1;
  translate: -50% -50%;
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  pointer-events: none;
}
.mk-cta-rings circle { transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; }
.mk-cta-rings circle:nth-child(1) { stroke-opacity: .10; }
.mk-cta-rings circle:nth-child(2) { stroke-opacity: .07; }
.mk-cta-rings circle:nth-child(3) { stroke-opacity: .045; }
.mk-reveal-ready .mk-cta-rings circle {
  opacity: 0;
  scale: .88;
  transition: opacity 1.2s var(--mk-ease-out), scale 1.6s var(--mk-ease-out);
}
.mk-reveal-ready .mk-cta-rings circle:nth-child(1) { transition-delay: .2s; }
.mk-reveal-ready .mk-cta-rings circle:nth-child(2) { transition-delay: .34s; }
.mk-reveal-ready .mk-cta-rings circle:nth-child(3) { transition-delay: .48s; }
.mk-reveal-ready .is-visible .mk-cta-rings circle { opacity: 1; scale: 1; }
/* What stands in the panel on every page but one: a rule, the ask, a sentence, the button. */
.mk-cta { padding-block: var(--mk-12) var(--mk-11); 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 SHEET THAT RISES OVER THE END OF THE PAGE (10 October 2026). It was a slab the width of
   the page with a hairline along its top, straight under a band of the same gradient. Every
   page ends on the light canvas now, and the footer comes up over the last of it with two
   round shoulders, `--mk-ft-rise` high, so the page reads as a sheet of content and the
   footer as the ground it rests on. It carries the mark and the hero's own gradient, so the
   site still signs off the way it opened; a little of the lavender light the hero has
   falls on its top edge.

   WHAT IS LAST ON A PAGE PAYS FOR THE RISE. The footer covers `--mk-ft-rise` of whatever
   is above it, so that has to be canvas with nothing in it: the closing band adds it to
   its own padding, and the light half a policy page ends on is given it below. */
.mk-ft {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--mk-ft-rise));
  border-radius: var(--mk-ft-rise) var(--mk-ft-rise) 0 0;
  /* 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:
    radial-gradient(50% 60% at 50% 0%, rgba(179, 166, 219, .16), transparent 70%),
    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);
}
main > .mk-light:last-child { padding-bottom: var(--mk-ft-rise); }
/* 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
   ("Measure new hire ramp. Shorten it." is 34 characters, and the line it replaced on
   8 October 2026 was 35), 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-backdrop { margin-top: var(--mk-8); }
.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: var(--mk-panel-deep);
  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: var(--mk-panel-deep);
  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: rgba(255, 255, 255, .09);
  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: var(--mk-banner);
  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: var(--mk-banner);
  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-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. On its own page it stands
   in the panel every other page closes on (`.mk-cta-panel`, section 12). */
.mk-apply { padding-block: var(--mk-11); }

/* ── 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: var(--mk-panel-deep);
  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); }
/* What a founding partner gets (14 October 2026 brief, change 2): one line between the
   subheading and the fields, on a quiet tint of the site's cyan so it reads as the offer
   and not as one more instruction. The band's dot, so the two are seen to belong together. */
.mk-asub + .mk-apply-perk { margin-top: calc(var(--mk-4) - var(--mk-6)); }
.mk-apply-perk {
  margin: 0 0 var(--mk-6);
  padding: 11px 16px;
  border: 1px solid rgba(116, 205, 232, .24);
  border-radius: var(--mk-r-sm);
  background: rgba(116, 205, 232, .08);
  color: #fff;
  font-size: var(--mk-fs-sm);
  line-height: 1.5;
  text-wrap: balance;
}
.mk-apply-perk::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: 2px;
  background: var(--mk-cyan-bright);
  box-shadow: 0 0 0 3px rgba(116, 205, 232, .18);
}
.mk-form { display: grid; gap: var(--mk-4); text-align: left; }
.mk-frow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mk-4); }
/* White, where they were the muted grey of secondary text (10 October 2026). A label is the
   question the field asks, and on the dark card it was the hardest thing on the form to read.
   The "optional" beside two of them keeps the grey: it is the aside, the label is not. */
.mk-field label { display: block; font-size: var(--mk-fs-xs); color: #fff; font-weight: 500; margin-bottom: 7px; }
.mk-opt { margin-left: 4px; color: var(--mk-on-dark-mut); font-weight: 400; }
.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; }
/* A6: the second way to the same call, under the button it is an alternative to. A text
   link, so the form's own button stays the one loud thing on the card. */
.mk-apply-alt { text-align: center; font-size: var(--mk-fs-base); }
.mk-apply-alt a {
  color: var(--mk-on-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.35);
  text-underline-offset: 4px;
  transition: color var(--mk-t) var(--mk-ease-out), text-decoration-color var(--mk-t) var(--mk-ease-out);
}
.mk-apply-alt a:hover { color: #fff; text-decoration-color: #fff; }
/* A6: the calendar that link opens, in the card, in place of the form (see
   marketing/calendar_controller.js). The frame is the box Calendly's script draws its own
   frame into. It is white because their page is, so the wait for it is not a dark hole that
   turns white. No `min-width: 320px`, which their snippet has: on a narrow phone that is
   wider than the dialog and would push it sideways.

   ROOM FOR THEIR LAYOUT. Calendly lays out side by side, details beside the calendar, once
   its frame is 1000px wide, and stacks the two below that (seen at 958px). The form's 600px
   column would leave it 518px, so while the calendar is showing the card and the dialog
   widen to give the frame a little over 1000px wherever the screen has it.

   HEIGHT. 700px is what their snippet gives it, and what the card on Your Numbers gives
   it. In the dialog that would mean two things scrolling, the dialog and the calendar
   inside it, so there the frame takes what the dialog has left and the calendar alone
   scrolls.

   The panel takes the site's scroll margin so that bringing it into view leaves it clear of
   the bar, the same as every element with an id. */
.mk-apply-card:has(.mk-cal:not([hidden])) { max-width: 1040px; }
.mk-bkdialog:has(.mk-cal:not([hidden])) { width: min(1122px, 100%); max-height: min(94dvh, 100%); }
.mk-cal { scroll-margin-top: var(--mk-11); }
.mk-cal h2 { font-size: var(--mk-fs-h3); margin-bottom: var(--mk-5); }
.mk-cal h2:focus { outline: none; }
.mk-cal-back {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--mk-2);
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--mk-on-dark-mut);
  font-family: var(--mk-body);
  font-size: var(--mk-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--mk-t) var(--mk-ease-out);
}
.mk-cal-back:hover { color: #fff; }
.mk-cal-frame {
  position: relative;
  height: 700px;
  overflow: hidden;
  border-radius: var(--mk-r-sm);
  background: #fff;
}
.mk-bkdialog .mk-cal-frame { height: clamp(420px, calc(94dvh - 250px), 700px); }
.mk-cal-frame iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; }
.mk-cal-wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--mk-5);
  color: var(--mk-ink-2);
  font-size: var(--mk-fs-base);
}
.mk-cal-wait[hidden] { display: none; }
.mk-cal .mk-apply-fine a { color: var(--mk-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.mk-cal .mk-apply-fine a:hover { color: #fff; }
.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: var(--mk-banner);
  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; }

/* ── Email me my results (8 October 2026 brief) ──
   One button under the two results, inside the answer panel, and the dialog it opens.

   The button is not on the worked example the page loads with: it carries `hidden` until
   the visitor changes a figure (marketing/results_controller.js), and arrives with a short
   rise when it does, so it reads as a response to what they just did and not as something
   that was missed the first time. Reduced motion gets it in place, like everything else:
   the reduced-motion block at the foot of this file cuts every animation here to nothing,
   so this one needs no media query of its own.

   The dialog borrows the booking modal's shell above (.mk-bkmodal, .mk-bkscrim,
   .mk-bkdialog, .mk-bkclose) and only narrows it: one field does not need the width five
   do. The field, its error, the honeypot and the submit button are the application form's
   own classes, so there is one set of form styles on the dark surface and not two. */
.mk-yn-mail { margin-top: var(--mk-5); }
.mk-yn-mail:not([hidden]) { animation: mk-rs-in .4s var(--mk-ease-out) both; }
@keyframes mk-rs-in { from { opacity: 0; translate: 0 8px; } }

.mk-rs { width: min(460px, 100%); text-align: center; }
.mk-rs h2,
.mk-rs-sent-h {
  font-family: var(--mk-disp);
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 800;
  line-height: var(--mk-lh-head);
  letter-spacing: var(--mk-ls-head);
  color: #fff;
}
/* Clear of the close button, which sits over the top right corner of the panel. */
.mk-rs h2 { margin-bottom: var(--mk-5); padding-inline: var(--mk-7); }
.mk-rs-form { display: grid; gap: var(--mk-4); text-align: left; }
.mk-rs-form .mk-submit { margin-top: var(--mk-1); }
.mk-rs-fine { font-size: var(--mk-fs-xs); color: var(--mk-on-dark-faint); line-height: 1.55; text-align: center; }
.mk-rs-fine a { color: var(--mk-on-dark-mut); text-decoration: underline; text-underline-offset: 3px; }
.mk-rs-fine a:hover { color: #fff; }
.mk-rs-sent { padding-top: var(--mk-3); }
.mk-rs-sent .mk-btn { margin-top: var(--mk-6); }

/* 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(179, 166, 219, .14), transparent 70%),
    var(--mk-panel-deep);
  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 <p> — 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(10, 7, 26, .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.

   Marketing is the one category that renders it. Analytics is still `in_use: false`, so
   the panel shows a status for it instead. */
.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: var(--mk-banner);
}
/* 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. The reset button in section 3 of the cookie policy
   is the one card that holds a form: it went when the site set nothing optional and came
   back with marketing cookies, which have to be withdrawable. */
.mk-lg-card form { margin: 0; }
.mk-lg-btn { margin-top: var(--mk-2); }

/* 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 <html>). 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.
 *   data-reveal="window"   stand   — a product screenshot's window tips up from lying back
 *                                    (9° about its foot) as it rises. Its parent gives it
 *                                    depth with `perspective`; without that it only shrinks.
 *   data-reveal="dock"     dock    — the hero's window, which runs off the right of the
 *                                    screen, comes in from there: 84px, and a little
 *                                    longer about it than the rest. Its two notes follow.
 *
 * AND THE HEADINGS SPEAK. A page's main heading and each section's arrive a word at a time,
 * every word rising out of its own line, as the block they are in arrives. This is not a
 * `data-reveal` value and is not in any page's markup: the rule just below marks WHICH
 * headings (`--mk-words`), and the controller splits those into words when it connects. So
 * a heading reads whole with no script, and to a screen reader with one, and a page that
 * does not exist yet gets it by using the same heading classes.
 *
 * 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); }
.mk-reveal-ready [data-reveal="window"] { translate: 0 46px; scale: .965; rotate: x 9deg; transform-origin: 50% 100%; }
.mk-reveal-ready [data-reveal="dock"] { --mk-t-reveal: 1.25s; translate: 84px 0; scale: .985; transform-origin: 0 50%; }
/* The notes in front of the hero's window arrive after it, one and then the other, with a
   little spring. `scale` and `opacity` only: `translate` is their float's and `transform`
   their lean toward the pointer. */
.mk-reveal-ready .mk-hero-shot .mk-hero-note,
.mk-reveal-ready .mk-hero-shot .mk-hero-live {
  opacity: 0;
  scale: .9;
  transition: opacity .5s var(--mk-ease-out) .8s, scale .7s cubic-bezier(.34, 1.56, .64, 1) .8s;
}
.mk-reveal-ready .mk-hero-shot .mk-hero-live { transition-delay: 1.05s; }
.mk-reveal-ready .mk-hero-shot.is-visible .mk-hero-note,
.mk-reveal-ready .mk-hero-shot.is-visible .mk-hero-live { opacity: 1; scale: 1; }
/* WHICH HEADINGS SPEAK: the hero's, each section's, and the three statements that stand as a
   band of their own. Not the legal pages' (they are documents, read and not watched), not a
   dialog's, and not the small headings inside cards and footer columns. The controller reads
   this property; it is the whole of the list. */
.mk-hero h1, .mk-sec-head h2, .mk-cat h2, .mk-cta h2, .mk-vera h2, .mk-d90 h2 { --mk-words: 1; }

/* Each word is a clip (.mk-w) around the part that moves (.mk-wi), 45ms after the one
   before, so a line of six words takes a quarter of a second to say and the eye follows it
   left to right. `--mk-i` is the word's place in the heading, set by the controller as it
   splits it, and `--mk-delay` is the block's own place in its row, inherited from it.

   The words wait for whatever is arriving: the heading itself where it is its own beat
   (a hero's), or the block it sits in (a section head). A heading that is its own beat
   stays put and opaque while they do; its words are the arrival.

   THE CLIP IS A `clip-path` AND CUTS ONLY THE BOTTOM. A word rises from under its own line,
   so the line's foot is the one edge that has to hide it. `overflow: hidden` would cut all
   four: the display headings are set tighter than the font is tall and tracked closer than
   its letters are wide, so it shaved the top of a capital, the tail of a "y" and the right
   edge of a word's last letter. The inset is negative on three sides to leave those alone,
   and reaches .14em under the box so a descender is not cut once the word has arrived.
   A clip-path also leaves the word on its own baseline, where an `overflow` box is not. */
.mk-w { display: inline-block; clip-path: inset(-.5em -.5em -.14em -.5em); }
.mk-wi { display: inline-block; }
.mk-reveal-ready [data-reveal].mk-words { opacity: 1; translate: none; }
.mk-reveal-ready .mk-words .mk-wi {
  translate: 0 105%;
  opacity: 0;
  transition:
    translate .8s var(--mk-ease-out) calc(var(--mk-delay, 0s) + var(--mk-i, 0) * 45ms),
    opacity .5s var(--mk-ease-out) calc(var(--mk-delay, 0s) + var(--mk-i, 0) * 45ms);
}
.mk-reveal-ready .is-visible .mk-words .mk-wi,
.mk-reveal-ready .mk-words.is-visible .mk-wi { translate: none; opacity: 1; }
/* 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 benchmark band line draws itself in once its panel is revealed. */
.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-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-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-copy { grid-template-columns: minmax(0, 1fr); row-gap: var(--mk-3); }
  .mk-mc-copy .mk-mc-body { grid-column: 1; grid-row: auto; }
  /* 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 { grid-template-columns: 1fr; }
  .mk-dpp-panel { grid-template-columns: minmax(0, 1fr); padding: var(--mk-6); }
  .mk-dpp-end { padding-left: 0; border-left: 0; padding-top: var(--mk-5); border-top: 1px solid var(--mk-hair); }
  /* 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-band { padding: var(--mk-10) 0 calc(var(--mk-10) + var(--mk-ft-rise)); }
  .mk-cta { padding-block: var(--mk-11) var(--mk-10); }
  .mk-apply { padding-block: var(--mk-10); }
  .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 <table>, still with a <thead>, 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-mc-foot { margin-top: var(--mk-6); font-size: var(--mk-fs-md); }
  .mk-comp-note { font-size: var(--mk-fs-md); }

  .mk-gapcard { padding: var(--mk-4); }
  .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); }
  :root { --mk-ft-rise: 28px; }
  .mk-cta-band { padding: var(--mk-9) 0 calc(var(--mk-9) + var(--mk-ft-rise)); }
  .mk-cta { padding-block: var(--mk-10) var(--mk-9); }
  .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; }
  /* A window the width of a phone: its address would crowd the label out of the strip, and
     the note under the hero's stops hanging off a corner it no longer has room beside. */
  .mk-shot-url { display: none; }
  .mk-shot-bar { grid-template-columns: minmax(0, 1fr); }
  .mk-hero-note { position: static; margin: var(--mk-5) auto 0; width: fit-content; max-width: 100%; }
  .mk-mc-shot .mk-mc-copy { padding: var(--mk-3) var(--mk-2) 0; }
  .mk-apply { padding-block: var(--mk-9); }
  .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-words .mk-wi { translate: none !important; opacity: 1 !important; }
  .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-shot-frame:hover { translate: 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; } }

/*
 * MORE LIFE AROUND THE SCREENSHOTS (10 October 2026), all of it only where motion is welcome,
 * and none of it allowed to rest a picture between two pixels (see "Product screenshots").
 *
 * The lights drift: the pair behind a backdrop on the hero's own keyframes, about 2% of the
 * layer's width over forty seconds, and the glow behind each window a little faster. Too
 * slow to watch, and enough that a panel is never quite the picture it was a minute ago.
 *
 * The sheen crosses a picture once, half a second after its window has stood up.
 *
 * The window drifts with the SCROLL, where the browser can tie an animation to how far an
 * element has travelled through the screen (`animation-timeline: view()`): 12px down as it
 * enters and 12px up as it leaves, so it moves a little slower than the page and reads as
 * standing in front of its backdrop. IN 24 STEPS, which is one whole pixel each: a window
 * that stopped anywhere on a smooth line would stop between two pixels and go soft. It
 * animates the FIGURE and not the window inside it, because the window's own `translate` is
 * the entrance's (section 14) and the two would fight over it. Only where a backdrop has
 * the room for it, which a phone's does not; and where the browser cannot do this the
 * window simply does not drift.
 *
 * It only runs because nothing between the figure and the page is a scroll container: see
 * the note on `overflow: clip` at `.mk-backdrop`.
 *
 * `translate` and `scale` only, like every keyframe on the site: nothing here lays out.
 */
@media (prefers-reduced-motion: no-preference) {
  .mk-backdrop::before { animation: mk-drift 40s var(--mk-ease) infinite alternate; will-change: transform; }
  .mk-cta-panel::before { animation: mk-drift 26s var(--mk-ease) infinite alternate; will-change: transform; }
  .mk-shot-glow { animation: mk-drift 18s var(--mk-ease) infinite alternate; will-change: transform; }
  .mk-reveal-ready .is-visible .mk-shot-pic::after { animation: mk-sheen 1.6s cubic-bezier(.45, .05, .55, .95) .5s both; }
  /* The viewer a screenshot opens: the page dims and the picture comes forward. Both end on
     no transform at all, so the picture rests on whole pixels. */
  .mk-lbx:not([hidden]) .mk-lbx-scrim { animation: mk-lbx-dim .2s var(--mk-ease) both; }
  .mk-lbx:not([hidden]) .mk-lbx-box { animation: mk-lbx-in .32s var(--mk-ease-out) both; }
  /* The hero's window: the point of light goes round its edge once every eleven seconds,
     and the second note's five bars rise and fall like a voice, each in its own time. */
  .mk-hero-shot .mk-shot-frame::before,
  .mk-hero-shot .mk-shot-frame::after { animation: mk-edge 11s linear infinite; }
  .mk-hero-live-wave i { animation: mk-wave 1.1s ease-in-out infinite alternate; }
  .mk-hero-live-wave i:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
  .mk-hero-live-wave i:nth-child(3) { animation-duration: 1.3s; animation-delay: -.7s; }
  .mk-hero-live-wave i:nth-child(4) { animation-duration: .9s; animation-delay: -.2s; }
  .mk-hero-live-wave i:nth-child(5) { animation-duration: 1.2s; animation-delay: -.9s; }

  @supports (animation-timeline: view()) {
    @media (min-width: 961px) {
      .mk-backdrop .mk-shot {
        animation: mk-shot-drift steps(24) both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
      }
    }
  }
}
@keyframes mk-shot-drift {
  from { translate: 0 12px; }
  to   { translate: 0 -12px; }
}
@keyframes mk-sheen {
  from { translate: -120% 0; }
  to   { translate: 120% 0; }
}
@keyframes mk-lbx-dim { from { opacity: 0; } }
@keyframes mk-lbx-in { from { opacity: 0; scale: .97; translate: 0 10px; } }
@keyframes mk-edge { to { --mk-edge: 575deg; } }
@keyframes mk-wave {
  from { scale: 1 .25; }
  to   { scale: 1 1; }
}