/*
 * Marketing site — the public face (apex/www). Dark workshop floor lit in teal, Sora throughout.
 * Everything is scoped under .mk: this file loads into the same bundle as the staff app (app.js),
 * so an unscoped rule here would restyle the app.
 *
 * The --bs-hi-vis override on .mk retunes the shared accent for this site only, so the inherited
 * component rules below (cards, forms, plan ticks) pick up the marketing teal without forking them.
 */

/* Sora (SIL Open Font License 1.1, via @fontsource/sora 5.0.18), Latin subset — covers German.
   Self-hosted because the CSP allows fonts and styles from 'self' only. */
@font-face { font-family: 'Sora'; src: url("../fonts/sora-300-av0EBwa.woff2") format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url("../fonts/sora-400-RBrqJEe.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url("../fonts/sora-600-tNj-60H.woff2") format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url("../fonts/sora-700-QFMM1_e.woff2") format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

.mk {
    --mk-bg: #05090b;
    --mk-panel: #0a1416;
    --mk-line: rgba(120, 255, 220, 0.12);
    --mk-line-2: rgba(120, 255, 220, 0.22);
    --mk-text: #e9f3f1;
    --mk-muted: #8ea5a2;
    --mk-dim: #5d7472;
    --mk-green: #22e3a5;
    --mk-amber: #f5b83d;
    --mk-blue: #4cb6ff;
    --mk-font: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* One column for every section and the hero art; the gutter grows with the screen. */
    --mk-max: 1680px;
    --mk-gutter: clamp(20px, 6.5vw, 120px);
    --bs-hi-vis: var(--mk-green);
    --bs-hi-vis-press: #4cf0bc;

    position: relative;
    background: var(--mk-bg);
    color: var(--mk-text);
    font-family: var(--mk-font);
    font-size: 15px;
    line-height: 1.55;
    overflow-x: hidden;
}

/* :where() keeps this at element specificity, so .mk-btn--solid, .mk-link and friends can set their own colour. */
:where(.mk) a { color: inherit; text-decoration: none; }
.mk svg { display: block; }
.mk :focus-visible { outline: 2px solid var(--mk-green); outline-offset: 3px; border-radius: 6px; }
.mk__wrap { width: min(var(--mk-max), 100%); margin: 0 auto; padding: 0 var(--mk-gutter); }

/* ---- Buttons & links ---- */
.mk-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 14px var(--mk-font);
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
}
.mk-btn svg { width: 16px; height: 16px; }
.mk-btn--lg { padding: 15px 24px; }
.mk-btn--solid { background: var(--mk-green); color: #03231a; box-shadow: 0 0 28px rgba(34, 227, 165, 0.35); }
.mk-btn--solid:hover { background: #4cf0bc; box-shadow: 0 0 40px rgba(34, 227, 165, 0.55); }
.mk-btn--ghost { border-color: rgba(255, 255, 255, 0.28); color: var(--mk-text); background: rgba(255, 255, 255, 0.02); }
.mk-btn--ghost:hover { border-color: var(--mk-green); }
.mk-btn--outline { border-color: var(--mk-green); color: var(--mk-green); }
.mk-btn--outline:hover { background: rgba(34, 227, 165, 0.1); }

.mk-link { display: inline-flex; align-items: center; gap: 10px; color: var(--mk-green); font-size: 13.5px; font-weight: 600; border-bottom: 1px solid rgba(34, 227, 165, 0.5); padding-bottom: 1px; }
.mk-link svg { width: 14px; height: 14px; transition: transform 0.2s; }
.mk-link:hover svg { transform: translateX(4px); }

.mk-link-quiet { color: var(--mk-muted); font-weight: 400; font-size: 0.85rem; }
.mk-link-quiet:hover { color: var(--mk-green); }

/* ---- Nav: sits over each page's hero ---- */
.mk-nav { position: absolute; inset: 0 0 auto; z-index: 20; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.mk-nav__inner { display: flex; align-items: center; gap: 48px; height: 96px; }
.mk-nav__brand { flex: none; display: block; }
.mk-logo { display: block; height: 60px; width: auto; }
.mk-logo--foot { height: 34px; }
.mk-nav__links { display: flex; gap: 38px; font-size: 13.5px; color: #c9d6d4; }
.mk-nav__links a:hover { color: var(--mk-green); }
.mk-nav__menu-only { display: none; }
.mk-nav__cta { margin-inline-start: auto; display: flex; align-items: center; gap: 32px; font-size: 13.5px; }
.mk-nav__login:hover { color: var(--mk-green); }
.mk-nav__cta .mk-btn { padding: 10px 18px; font-size: 13px; }
.mk-nav__burger { display: none; margin-inline-start: auto; background: none; border: 0; color: var(--mk-text); padding: 6px; cursor: pointer; }
.mk-nav__burger svg { width: 26px; height: 26px; }

/* ---- Shared type ---- */
.mk-eyebrow { font-size: 11px; letter-spacing: 0.38em; color: var(--mk-muted); text-transform: uppercase; margin: 0 0 26px; }
.mk-num { font-size: 11px; color: var(--mk-muted); letter-spacing: 0.1em; margin: 0; }
.mk-h2 { font-weight: 300; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.12; text-transform: uppercase; color: var(--mk-text); margin: 12px 0 0; }
.mk-h2 strong { font-weight: 600; }
.mk-h2--light { font-size: clamp(28px, 2.6vw, 36px); max-width: 11em; }
.mk-h2--box { font-size: clamp(20px, 1.6vw, 23px); margin-top: 16px; }
.mk-h2--box strong { display: block; }
.mk-h2--closer { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.15; margin: 0; }
.mk-h2--closer strong { display: block; }
.mk-sub { color: var(--mk-muted); font-size: 14px; margin: 14px 0 0; max-width: 28em; }
.mk-sub--wide { max-width: none; }

/* ---- Home hero ---- */
.mk-home-hero { position: relative; min-height: 740px; overflow: hidden; }
/* The workshop photo, pinned to the top-right and sized by the window, not the hero's height, so the car
   keeps its place beside the copy: 84% of the width up to 1640px, running off the right edge so the man stays clear of the copy; it dissolves on the left, top and bottom. Where the photo is taller than the hero
   its floor is cut off (the floor is what fades out anyway); where it is shorter, the page colour shows
   below it and the bottom fade takes it over. It dissolves into the page on the left, top and bottom
   through the mask, so no edge shows. */
.mk-home-hero__photo {
    position: absolute; top: 0; inset-inline-end: 0; width: clamp(780px, 84vw, 1640px); aspect-ratio: 1598 / 984; pointer-events: none;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%);
    mask-composite: intersect;
}
.mk-home-hero__photo img { display: block; width: 100%; height: 100%; }
/* Keeps the copy readable over the photo, and carries the hero into the next section. Under the stage's
   cards (which have a z-index) and the copy. */
.mk-home-hero__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(0deg, var(--mk-bg) 0%, rgba(5, 9, 11, 0) 20%),
        linear-gradient(90deg, rgba(5, 9, 11, 0.9) 0%, rgba(5, 9, 11, 0.78) 34%, rgba(5, 9, 11, 0) 62%);
}
/* Positioned by left/right + auto margins, never a transform. */
.mk-home-hero__stage { position: absolute; inset: 0; max-width: var(--mk-max); margin-inline: auto; pointer-events: none; }
.mk-home-hero__body { position: relative; z-index: 2; padding-top: 150px; padding-bottom: 70px; }
.mk-home-hero__copy { max-width: 610px; }
.mk-home-hero__title { font-family: var(--mk-font); font-size: clamp(46px, 5.6vw, 78px); font-weight: 700; line-height: 1; letter-spacing: -0.035em; color: var(--mk-text); margin: 0; }
.mk-home-hero__title em { display: block; font-style: normal; color: var(--mk-green); text-shadow: 0 0 40px rgba(34, 227, 165, 0.35); }
.mk-home-hero__lead { margin: 28px 0 0; font-size: 17px; color: #c8d4d2; max-width: 30em; line-height: 1.6; }
.mk-home-hero__actions { display: flex; gap: 18px; margin-top: 38px; flex-wrap: wrap; }
.mk-benefits { display: flex; gap: 30px; margin: 52px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
/* Each benefit reads as two balanced lines, which is what lets all three share one row. */
.mk-benefits li { display: flex; align-items: center; gap: 13px; font-size: 12.5px; line-height: 1.35; color: #c8d4d2; max-width: 9.5em; text-wrap: balance; }
.mk-benefits li:last-child { max-width: 17em; }
.mk-benefits i { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(34, 227, 165, 0.55); display: grid; place-items: center; color: var(--mk-green); box-shadow: inset 0 0 14px rgba(34, 227, 165, 0.15); }
.mk-benefits i svg { width: 17px; height: 17px; }
.mk-home-hero__tag { position: absolute; z-index: 3; inset-inline-start: var(--mk-gutter); bottom: 40px; margin: 0; max-width: 24em; text-wrap: balance; font-size: 9.5px; letter-spacing: 0.36em; line-height: 1.8; color: var(--mk-muted); text-align: start; text-transform: uppercase; }

.mk-glass {
    background: linear-gradient(160deg, rgba(18, 32, 36, 0.82), rgba(8, 15, 18, 0.78));
    border: 1px solid var(--mk-line-2);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.mk-stepper { position: absolute; z-index: 3; bottom: 44px; inset-inline-end: var(--mk-gutter); width: min(440px, 40vw); padding: 22px 24px 18px; }
.mk-stepper ol { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
.mk-stepper ol::before { content: ''; position: absolute; left: 14px; right: 14px; top: 6px; height: 1px; background: linear-gradient(90deg, var(--mk-green) 0 44%, rgba(255, 255, 255, 0.18) 44%); }
.mk-stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 10.5px; color: var(--mk-muted); min-width: 28px; }
.mk-stepper li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #0b1a1d; border: 1.5px solid rgba(255, 255, 255, 0.3); position: relative; z-index: 1; }
.mk-stepper li.is-done::before { border-color: var(--mk-green); background: #0b3a2d; }
.mk-stepper li.is-now { color: var(--mk-green); }
.mk-stepper li.is-now::before { background: var(--mk-green); border-color: var(--mk-green); box-shadow: 0 0 0 5px rgba(34, 227, 165, 0.18), 0 0 18px var(--mk-green); }

/* The example vehicle: one slim strip sitting on the progress panel's top edge, over the dark foreground —
   clear of the car and of the sign in the photo. */
.mk-vehicle-card { position: absolute; z-index: 3; bottom: 134px; inset-inline-end: var(--mk-gutter); width: min(440px, 40vw); margin: 0; padding: 12px 18px; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0 14px; font-size: 10.5px; }
.mk-vehicle-card dt { color: var(--mk-dim); font-weight: 400; }
.mk-vehicle-card dd { color: var(--mk-text); font-size: 11.5px; margin: 3px 0 0; white-space: nowrap; }
.mk-vehicle-card .is-accent { color: var(--mk-green); }
.mk-vehicle-card__reg { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }

/* ---- 01 Control: the dashboard mock ---- */
.mk-control { position: relative; padding: 64px 0 90px; border-top: 1px solid rgba(255, 255, 255, 0.04); background: radial-gradient(ellipse at 85% 40%, rgba(34, 227, 165, 0.07), transparent 50%); }
.mk-control__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 60px; align-items: center; }
.mk-control__copy .mk-sub { margin-bottom: 36px; }

.mk-app { display: grid; grid-template-columns: 150px 1fr; background: linear-gradient(180deg, #0a1417, #070e10); border: 1px solid var(--mk-line-2); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); font-size: 11px; }
.mk-app__side { border-inline-end: 1px solid var(--mk-line); padding: 16px 10px; }
.mk-app__logo { display: block; height: 30px; width: auto; max-width: 100%; object-fit: contain; object-position: left; }
.mk-app__side ul { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mk-app__side li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: #aebdbb; font-size: 10.5px; }
.mk-app__side li svg { width: 13px; height: 13px; flex: none; opacity: 0.8; }
.mk-app__side li.is-on { background: rgba(34, 227, 165, 0.12); color: var(--mk-green); }
.mk-app__main { padding: 14px 16px 16px; min-width: 0; }
.mk-app__top { display: flex; align-items: center; gap: 14px; }
.mk-app__search { flex: 1; max-width: 330px; display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--mk-line); border-radius: 7px; padding: 7px 10px; color: var(--mk-dim); font-size: 10px; }
.mk-app__search svg { width: 11px; height: 11px; }
.mk-app__user { margin-inline-start: auto; display: flex; align-items: center; gap: 9px; font-size: 9.5px; line-height: 1.3; }
.mk-app__user i { width: 26px; height: 26px; border-radius: 50%; background: #16302b; color: var(--mk-green); display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 9px; border: 1px solid var(--mk-line-2); }
.mk-app__user small { color: var(--mk-dim); display: block; }
.mk-app__grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.mk-app__card { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--mk-line); border-radius: 9px; padding: 12px 13px; }
.mk-app__card + .mk-app__card { margin-top: 12px; }
.mk-app__card b { font-size: 12.5px; font-weight: 600; }
.mk-app__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mk-app__head .is-accent { color: var(--mk-green); font-size: 15px; }
.mk-pill { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; font-size: 8px; font-weight: 600; color: var(--mk-green); background: rgba(34, 227, 165, 0.12); padding: 2px 7px; border-radius: 20px; vertical-align: middle; }
.mk-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--mk-green); box-shadow: 0 0 6px var(--mk-green); }
.mk-app__clock { text-align: end; font-size: 15px; font-weight: 600; line-height: 1.1; }
.mk-app__clock small { display: block; font-size: 8.5px; color: var(--mk-dim); font-weight: 400; }
.mk-app__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.mk-app__tiles > div { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--mk-line); border-radius: 7px; padding: 10px; }
.mk-app__tiles b { display: block; font-size: 19px; line-height: 1.1; }
.mk-app__tiles span { font-size: 8.5px; color: var(--mk-muted); }
.mk-app__tiles .is-risk b { color: #ff6b6b; }
.mk-app__flow table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 9.5px; }
.mk-app__flow th { text-align: start; color: var(--mk-dim); font-weight: 400; padding: 6px 4px; border-bottom: 1px solid var(--mk-line); }
.mk-app__flow td { padding: 7px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: #cdd9d7; white-space: nowrap; }
.mk-app__flow tr:last-child td { border-bottom: 0; }
.mk-st { display: inline-flex; align-items: center; gap: 6px; }
.mk-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-green); box-shadow: 0 0 8px var(--mk-green); }
.mk-st--amber { color: var(--mk-amber); }
.mk-st--amber::before { background: var(--mk-amber); box-shadow: 0 0 8px var(--mk-amber); }
.mk-st--blue::before { background: var(--mk-blue); box-shadow: 0 0 8px var(--mk-blue); }
.mk-app__bars { display: flex; align-items: flex-end; gap: 12px; height: 96px; margin-top: 10px; padding: 0 6px; border-bottom: 1px solid var(--mk-line); }
.mk-app__bars div { flex: 1; background: linear-gradient(180deg, rgba(34, 227, 165, 0.95), rgba(16, 196, 139, 0.85)); border-radius: 2px 2px 0 0; box-shadow: 0 0 16px rgba(34, 227, 165, 0.25); }
.mk-app__bar-labels { display: flex; gap: 12px; padding: 5px 6px 0; font-size: 8.5px; color: var(--mk-dim); }
.mk-app__bar-labels span { flex: 1; text-align: center; }
.mk-app__donut-row { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.mk-app__donut { position: relative; width: 86px; height: 86px; flex: none; }
.mk-app__donut b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; }
.mk-app__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 9px; color: var(--mk-muted); }
.mk-app__legend li { display: flex; align-items: center; gap: 7px; }
.mk-app__legend li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }

/* ---- 02 Journey ---- */
.mk-journey { padding: 70px 0 0; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.04); background: linear-gradient(180deg, var(--mk-bg) 0%, #071012 100%); }
.mk-journey .mk-h2 strong { display: inline; }
.mk-journey__track { position: relative; margin-top: 44px; height: 380px; }
.mk-journey__steps { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(7, 1fr); list-style: none; margin: 0; padding: 0; }
.mk-journey__steps li { display: flex; justify-content: center; }
/* Each stage is a button: pressing it jumps the strip there, and the strip plays through them on its own. */
.mk-journey__steps button { display: flex; flex-direction: column; align-items: center; text-align: center; background: none; border: 0; padding: 0 6px 6px; margin: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 10px; }
.mk-journey__steps button:focus-visible { outline: 2px solid var(--mk-green); outline-offset: 4px; }
.mk-journey__steps button:hover i { border-color: var(--mk-green); box-shadow: 0 0 22px rgba(34, 227, 165, 0.4); }
.mk-journey__steps i { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(34, 227, 165, 0.5); display: grid; place-items: center; color: var(--mk-green); background: radial-gradient(circle, rgba(34, 227, 165, 0.16), rgba(5, 9, 11, 0.8) 70%); box-shadow: 0 0 18px rgba(34, 227, 165, 0.2); }
.mk-journey__steps i svg { width: 20px; height: 20px; }
.mk-journey__steps b { display: block; margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.mk-journey__steps span { font-size: 10.5px; color: var(--mk-muted); }
.mk-journey__steps li.is-now i { width: 52px; height: 52px; border-color: var(--mk-green); box-shadow: 0 0 0 6px rgba(34, 227, 165, 0.1), 0 0 30px rgba(34, 227, 165, 0.55); }
.mk-journey__steps li.is-done i { border-color: rgba(34, 227, 165, 0.9); background: rgba(34, 227, 165, 0.14); box-shadow: 0 0 14px rgba(34, 227, 165, 0.25); }
.mk-journey__steps i { transition: width 0.4s, height 0.4s, border-color 0.4s, box-shadow 0.4s, background 0.4s; }
.mk-journey__steps li.is-now b,
.mk-journey__steps li.is-now span { color: var(--mk-green); }
/* The rail's glow is a CSS drop-shadow, not an SVG filter: a filter on a perfectly flat line has a
   zero-height bounding box and Chrome then paints nothing at all. */
.mk-journey__rail { position: absolute; z-index: 2; left: 0; right: 0; top: 134px; height: 20px; }
.mk-journey__rail svg { width: 100%; height: 20px; overflow: visible; filter: drop-shadow(0 0 4px rgba(34, 227, 165, 0.7)); }
/* The rail fills to the stage the strip is on; the head is a bright bead that rides the end of the fill. */
.mk-journey__progress { position: absolute; z-index: 3; left: 0; top: 9px; height: 2px; width: var(--x, 0px); border-radius: 2px; background: linear-gradient(90deg, rgba(34, 227, 165, 0.15), #22e3a5 70%, #c8ffee); box-shadow: 0 0 12px rgba(34, 227, 165, 0.9); transition: width 0.9s cubic-bezier(0.45, 0, 0.2, 1); }
.mk-journey__node { position: absolute; z-index: 2; top: 5px; width: 10px; height: 10px; margin-inline-start: -5px; box-sizing: border-box; border-radius: 50%; background: #05090b; border: 1.5px solid #22e3a5; transition: background 0.4s, box-shadow 0.4s; }
.mk-journey__node.is-done { background: #22e3a5; box-shadow: 0 0 8px rgba(34, 227, 165, 0.8); }
.mk-journey__progress::after { content: ''; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #c8ffee; box-shadow: 0 0 14px 3px rgba(34, 227, 165, 0.85); }

/* The car row. Every copy except the lead car's first one is cut to the silhouette (car-side-mask.png)
   and painted normally, so each car hides the one behind it; the lead car's unmasked copy lightens
   into the floor for its reflection. The lead car is deliberately NOT a stacking context (no
   transform, no z-index), or that copy would only blend inside it and the ghosts would show through. */
.mk-journey__cars {
    position: absolute; inset: auto 0 0 0; height: 236px; z-index: 2; mix-blend-mode: lighten;
    -webkit-mask: linear-gradient(0deg, transparent 0, #000 22%);
    mask: linear-gradient(0deg, transparent 0, #000 22%);
}
.mk-journey__cars img { display: block; position: absolute; bottom: 0; height: auto; mix-blend-mode: lighten; }
.mk-ghost {
    filter: brightness(0.55) saturate(0.7);
    mix-blend-mode: normal !important;
    -webkit-mask: url("../images/marketing/car-side-mask-ZseWLoq.png") center / 100% 100% no-repeat;
    mask: url("../images/marketing/car-side-mask-ZseWLoq.png") center / 100% 100% no-repeat;
}
/* Further back = smaller, dimmer and higher, so the ghosts' wheels tuck behind the lead car. */
.mk-ghost--l2 { left: -6%; width: 24%; opacity: 0.45; bottom: 58px !important; }
.mk-ghost--l1 { left: 9%; width: 27%; opacity: 0.7; bottom: 34px !important; }
.mk-ghost--r1 { right: 9%; width: 27%; opacity: 0.7; bottom: 34px !important; }
.mk-ghost--r2 { right: -6%; width: 24%; opacity: 0.45; bottom: 58px !important; }
.mk-journey__lead-car { position: absolute; left: 50%; bottom: -4px; width: min(48%, 600px); margin-left: calc(min(48%, 600px) / -2); }
.mk-journey__lead-car img { position: static; width: 100%; }
.mk-journey__lead-car .mk-journey__solid {
    position: absolute; inset: 0; height: 100%; mix-blend-mode: normal;
    -webkit-mask: url("../images/marketing/car-side-mask-ZseWLoq.png") center / 100% 100% no-repeat;
    mask: url("../images/marketing/car-side-mask-ZseWLoq.png") center / 100% 100% no-repeat;
}
.mk-journey__twin {
    position: absolute; inset: 0; opacity: 0.6;
    background:
        repeating-linear-gradient(0deg, rgba(34, 227, 165, 0.55) 0 1px, transparent 1px 11px),
        repeating-linear-gradient(90deg, rgba(34, 227, 165, 0.55) 0 1px, transparent 1px 11px);
    -webkit-mask: url("../images/marketing/car-side-mask-ZseWLoq.png") center / 100% 100% no-repeat, linear-gradient(90deg, #000 calc(var(--reveal) - 14%), transparent var(--reveal));
    -webkit-mask-composite: source-in;
    mask: url("../images/marketing/car-side-mask-ZseWLoq.png") center / 100% 100% no-repeat, linear-gradient(90deg, #000 calc(var(--reveal) - 14%), transparent var(--reveal));
    mask-composite: intersect;
    transition: opacity 0.8s;
}
/* The scan: the grid covers the car up to --reveal, which follows the stage (0% at Booked, the whole car by Quality
   Control); a bright edge rides its front. At Ready the grid has done its job and the car glows instead. */
@property --reveal { syntax: '<percentage>'; inherits: true; initial-value: 54%; }
.mk-journey__track { --reveal: 54%; transition: --reveal 1s cubic-bezier(0.45, 0, 0.2, 1); }
.mk-journey__track[data-stage="0"] { --reveal: 0%; }
.mk-journey__track[data-stage="1"] { --reveal: 18%; }
.mk-journey__track[data-stage="2"] { --reveal: 36%; }
.mk-journey__track[data-stage="3"] { --reveal: 54%; }
.mk-journey__track[data-stage="4"] { --reveal: 76%; }
.mk-journey__track[data-stage="5"] { --reveal: 118%; }
.mk-journey__track[data-stage="6"] { --reveal: 118%; }
.mk-journey__edge { position: absolute; top: 12%; bottom: 14%; left: var(--reveal); width: 2px; margin-left: -1px; border-radius: 2px; background: linear-gradient(180deg, transparent, #c8ffee 30%, #22e3a5 70%, transparent); box-shadow: 0 0 16px 2px rgba(34, 227, 165, 0.7); opacity: 0.9; transition: opacity 0.6s; pointer-events: none; }
.mk-journey__track[data-stage="0"] .mk-journey__edge,
.mk-journey__track[data-stage="5"] .mk-journey__edge,
.mk-journey__track[data-stage="6"] .mk-journey__edge { opacity: 0; }
.mk-journey__track[data-stage="6"] .mk-journey__twin { opacity: 0; }
.mk-journey__lead-car .mk-journey__solid { transition: filter 0.9s; }
.mk-journey__track[data-stage="6"] .mk-journey__solid { filter: drop-shadow(0 0 22px rgba(34, 227, 165, 0.55)) brightness(1.12); }

/* ---- 03 Connect / 04 Automate / 05 Insights ---- */
.mk-connect { padding: 30px 0 22px; }
.mk-connect__grid { display: grid; grid-template-columns: 1fr 1.95fr 1fr; gap: 12px; }
.mk-box { background: linear-gradient(180deg, #0a1416, #081012); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 30px 26px; }
.mk-box .mk-sub { font-size: 12.5px; margin: 20px 0 24px; }
.mk-hub { padding: 12px; display: grid; place-items: center; }
.mk-hub svg { width: 100%; max-width: 560px; height: auto; overflow: visible; }
.mk-hub__centre { fill: var(--mk-text); font: 600 10.5px var(--mk-font); letter-spacing: 0.4px; text-transform: uppercase; }
.mk-hub__centre-sub { fill: var(--mk-muted); font: 400 8.5px var(--mk-font); letter-spacing: 1.4px; text-transform: uppercase; }
.mk-hub__node { font: 600 8px var(--mk-font); letter-spacing: 0.8px; text-transform: uppercase; }
.mk-hub__node text { fill: #cdd9d7; }
.mk-hub__node circle { fill: #0a1416; stroke: var(--mk-green); stroke-opacity: 0.7; }
.mk-hub__node use { color: var(--mk-green); }

.mk-insights { padding: 0 0 30px; }
.mk-insights__grid { display: grid; grid-template-columns: 1fr 2.95fr; gap: 12px; }
.mk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 14px; list-style: none; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(8, 16, 18, 0.7); }
.mk-kpi { background: linear-gradient(180deg, #0d1a1d, #0a1416); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 16px 14px 10px; }
.mk-kpi__label { display: block; font-size: 10.5px; color: var(--mk-muted); }
.mk-kpi__value { display: block; font-size: 24px; font-weight: 400; margin-top: 14px; letter-spacing: -0.01em; }
.mk-kpi__change { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 10.5px; color: var(--mk-green); }
.mk-kpi__arrow { width: 11px; height: 11px; transform: rotate(-90deg); }
.mk-kpi__arrow.is-down { transform: rotate(90deg); }
.mk-kpi__spark { width: 100%; height: 46px; margin-top: 6px; }

/* ---- Closing CTA ---- */
.mk-closer { padding: 56px 0 46px; border-top: 1px solid rgba(255, 255, 255, 0.05); background: radial-gradient(ellipse at 50% 120%, rgba(34, 227, 165, 0.05), transparent 60%); }
.mk-closer__grid { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 40px; align-items: center; }
.mk-closer .mk-sub { font-size: 13px; margin-top: 12px; max-width: none; }
.mk-closer__actions { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.mk-closer__brand img { display: block; height: 52px; width: auto; }
.mk-closer__brand small { display: block; margin-top: 6px; padding-inline-start: 4px; font-size: 8px; letter-spacing: 0.32em; color: var(--mk-muted); text-transform: uppercase; }

/* ---- Footer ---- */
.mk-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 26px 0 22px; font-size: 12px; color: var(--mk-muted); }
.mk-footer__row { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.mk-footer__links { display: flex; gap: 32px; flex-wrap: wrap; }
.mk-footer__links a:hover { color: var(--mk-green); }
/* Copyright and the legal links share the bottom line. */
.mk-footer__base { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-top: 18px; font-size: 11px; color: var(--mk-dim); }
.mk-footer__base .mk-link-quiet { font-size: 11px; }

/* ---- Inner pages (features, contact, pricing, signup, welcome) ---- */
.mk-hero { position: relative; padding: 160px 0 3rem; background: radial-gradient(900px 480px at 78% -8%, rgba(34, 227, 165, 0.12), transparent 62%); }
.mk .eyebrow { font-family: var(--mk-font); font-size: 11px; letter-spacing: 0.38em; color: var(--mk-muted); }
.mk-hero__eyebrow { color: var(--mk-muted); }
.mk-hero__title { font-family: var(--mk-font); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-size: clamp(2.4rem, 5vw, 4rem); color: var(--mk-text); margin: 0.9rem 0 1.1rem; max-width: 16ch; }
.mk-hero__title em { font-style: normal; color: var(--mk-green); }
.mk-hero__lead { color: #c8d4d2; font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 52ch; margin: 0 0 1.9rem; }
.mk-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.mk-section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.mk-section__eyebrow { color: var(--mk-muted); }
.mk-section__title { font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.4rem); text-transform: uppercase; color: var(--mk-text); margin: 0.5rem 0 0.75rem; max-width: 22ch; }
.mk-section__lead { color: var(--mk-muted); max-width: 56ch; font-size: 1rem; }

.mk-featuresec { padding: 70px 0 30px; border-top: 1px solid rgba(255, 255, 255, 0.04); }
.mk-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 2rem; }
.mk-feature { padding: 26px 24px; border-radius: 10px; background: linear-gradient(180deg, #0a1416, #081012); border: 1px solid rgba(255, 255, 255, 0.07); }
.mk-feature__tag { font-size: 11px; color: var(--mk-green); }
.mk-feature__h { font-weight: 600; font-size: 1.1rem; color: var(--mk-text); margin: 0.6rem 0 0.45rem; }
.mk-feature__p { color: var(--mk-muted); font-size: 0.9rem; margin: 0; line-height: 1.6; }

.mk-cta { text-align: center; padding-top: 4rem; padding-bottom: 4rem; }
.mk-cta__title { font-weight: 300; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--mk-text); margin: 0 0 1.4rem; }

/* Pricing plans */
.mk-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 2.25rem; align-items: start; }
.mk-plan { padding: 1.6rem 1.5rem 1.75rem; border-radius: 10px; background: linear-gradient(180deg, #0a1416, #081012); border: 1px solid rgba(255, 255, 255, 0.07); }
.mk-plan--featured { background: rgba(34, 227, 165, 0.08); border-color: rgba(34, 227, 165, 0.45); }
.mk-plan__name { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mk-green); }
.mk-plan__price { font-size: 2.4rem; font-weight: 600; color: var(--mk-text); line-height: 1; margin: 0.6rem 0 0.2rem; }
.mk-plan__per { color: var(--mk-muted); font-size: 0.85rem; }
.mk-plan__list { list-style: none; padding: 0; margin: 1.1rem 0 1.4rem; color: #c8d4d2; line-height: 1.9; }
/* The bullet is a DRAWN tick, not the character U+2713 — that glyph is in none of the fonts this
   site ships and painted zero pixels, so every plan's feature list rendered as bare indented text
   with no marker at all. On the PUBLIC pricing page, where the whole point is a scannable list of
   what you get. Two borders on a rotated box always resolve to a tick; see
   .cover-option__check in app.css and tests/Browser/glyph-coverage, which measures the ink. */
.mk-plan__list li { position: relative; padding-inline-start: 1.25rem; }
.mk-plan__list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0.15rem;
    top: 0.62em;
    width: 0.3rem;
    height: 0.58rem;
    border: solid var(--bs-hi-vis);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.mk-plan .mk-btn { display: flex; justify-content: center; }

/* Centred card: contact, signup, welcome */
.mk-narrow { width: min(600px, 100%); margin: 0 auto; padding: 150px 1.5rem 4.5rem; }
.mk-card { background: linear-gradient(160deg, rgba(18, 32, 36, 0.82), rgba(8, 15, 18, 0.9)); border: 1px solid var(--mk-line-2); border-radius: 12px; padding: 2.25rem 2rem; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.mk-card__title { font-family: var(--mk-font); font-weight: 700; letter-spacing: -0.02em; font-size: 1.7rem; color: var(--mk-text); margin: 0.4rem 0 0.3rem; }
.mk-card__lead { color: var(--mk-muted); margin: 0 0 1.5rem; }

.mk-form { display: flex; flex-direction: column; gap: 1rem; }
.mk-form .field label { color: var(--mk-muted); font-family: var(--mk-font); font-size: 12px; letter-spacing: 0.04em; text-transform: none; }
.mk-form .field input,
.mk-form .field textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    color: var(--mk-text);
    font-family: var(--mk-font);
    border-radius: 8px;
    padding: 12px 14px;
}
.mk-form .field textarea { resize: vertical; }
.mk-form .field input::placeholder,
.mk-form .field textarea::placeholder { color: var(--mk-dim); }
.mk-form .field input:focus,
.mk-form .field textarea:focus {
    border-color: var(--mk-green);
    box-shadow: 0 0 0 4px rgba(34, 227, 165, 0.18);
    background: rgba(255, 255, 255, 0.06);
}
.mk-field-suffix { display: flex; align-items: stretch; }
.mk-field-suffix input { border-start-end-radius: 0; border-end-end-radius: 0; flex: 1; }
.mk-field-suffix .mk-suffix {
    display: flex; align-items: center;
    padding: 0 0.8rem;
    font-size: 0.8rem;
    color: var(--mk-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-inline-start: none;
    border-start-end-radius: 10px;
    border-end-end-radius: 10px;
}
.mk-muted { color: var(--mk-dim); font-size: 0.88em; }
.mk-form .mk-btn--solid { margin-top: 0.5rem; justify-content: center; }

.signup-error { margin: 0 0 1.1rem; padding: 0.7rem 0.9rem; border-radius: 9px; background: rgba(220, 53, 69, 0.12); border: 1px solid rgba(220, 53, 69, 0.45); color: #ffb3b8; font-size: 0.9rem; }

.mk-url-chip { display: inline-block; font-size: 0.95rem; color: var(--mk-green); background: rgba(34, 227, 165, 0.1); border: 1px solid rgba(34, 227, 165, 0.4); border-radius: 9px; padding: 0.6rem 0.9rem; margin: 0.5rem 0 1.5rem; word-break: break-all; }

/* ---- Motion: a pulse on the current stage; nothing else moves. */
@media (prefers-reduced-motion: no-preference) {
    .mk-stepper li.is-now::before { animation: mk-pulse 2.4s ease-in-out infinite; }
}
@keyframes mk-pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(34, 227, 165, 0.18), 0 0 18px var(--mk-green); }
    50% { box-shadow: 0 0 0 9px rgba(34, 227, 165, 0.05), 0 0 26px var(--mk-green); }
}

/* ---- Responsive ---- */
@media (max-width: 1180px) {
    .mk-nav__inner { gap: 28px; }
    .mk-nav__links { gap: 24px; }
    .mk-control__grid { grid-template-columns: 1fr; }
    .mk-connect__grid { grid-template-columns: 1fr 1fr; }
    .mk-hub { grid-column: 1 / -1; order: 3; }
    .mk-insights__grid { grid-template-columns: 1fr; }
    .mk-closer__grid { grid-template-columns: 1fr; gap: 28px; }
    .mk-closer__brand { display: none; }
    .mk-features, .mk-plans { grid-template-columns: 1fr 1fr; }
}

/* Narrow: the links fold into a drop-down menu under the bar, opened by the burger. */
@media (max-width: 900px) {
    .mk__wrap { padding: 0 20px; }
    .mk-nav__inner { height: 80px; }
    .mk-logo { height: 46px; }
    .mk-nav__cta { display: none; }
    .mk-nav__burger { display: block; }
    .mk-nav__links {
        display: none;
        position: absolute; top: 80px; left: 0; right: 0;
        flex-direction: column; gap: 0;
        padding: 8px 20px 16px;
        background: rgba(5, 9, 11, 0.97);
        border-bottom: 1px solid var(--mk-line);
        font-size: 15px;
    }
    .mk-nav__links a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
    .mk-nav__menu-only { display: block; }
    .mk.is-menu-open .mk-nav__links { display: flex; }

    .mk-home-hero { min-height: 0; }
    .mk-home-hero__body { padding-top: 130px; padding-bottom: 470px; }
    /* Stacked: copy on top, the photo underneath it with the car at the foot of the screen. */
    .mk-home-hero__photo { top: auto; bottom: 90px; width: 128vw; inset-inline-end: -10vw; }
    .mk-home-hero__scrim { background: linear-gradient(180deg, var(--mk-bg) 0%, rgba(5, 9, 11, 0.9) 42%, rgba(5, 9, 11, 0.1) 68%, var(--mk-bg) 100%); }
    .mk-stepper { top: auto; bottom: 36px; left: 20px; right: 20px; width: auto; }
    .mk-vehicle-card, .mk-home-hero__tag { display: none; }

    .mk-app { grid-template-columns: 1fr; }
    .mk-app__side { display: none; }
    .mk-app__grid { grid-template-columns: 1fr; }

    .mk-journey { padding-bottom: 50px; }
    .mk-journey__track { height: auto; }
    .mk-journey__steps { grid-template-columns: repeat(2, 1fr); gap: 26px 10px; }
    .mk-journey__rail, .mk-ghost { display: none; }
    .mk-journey__cars { position: relative; height: auto; margin-top: 30px; }
    .mk-journey__lead-car { position: relative; left: auto; margin-left: 0; width: 100%; }

    .mk-kpis { grid-template-columns: 1fr 1fr; }
    .mk-hero { padding-top: 130px; }
    .mk-narrow { padding-top: 120px; }
}

@media (max-width: 620px) {
    .mk-connect__grid { grid-template-columns: 1fr; }
    .mk-app__tiles { grid-template-columns: 1fr 1fr; }
    .mk-app__flow { overflow-x: auto; }
    .mk-benefits { gap: 20px; }
    .mk-stepper li { font-size: 9px; }
    .mk-features, .mk-plans { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-journey__track, .mk-journey__progress, .mk-journey__twin, .mk-journey__edge, .mk-journey__steps i, .mk-journey__lead-car .mk-journey__solid { transition: none; }
}