/*
 * 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: 760px; overflow: hidden; }
.mk-home-hero__scene { position: absolute; inset: 0; }
.mk-home-hero__scene svg { width: 100%; height: 100%; }
/* Beyond the column (wide screens only) the garage shows through, darkening towards the column so it
   meets the stage's own fade without a seam. Both stops sit off-screen when the window is no wider
   than the column, which makes this layer transparent. ::after, not ::before, so it paints over the
   garage scene (an earlier sibling) yet under the car and cards, which have z-indexes. */
.mk-home-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(0deg, var(--mk-bg) 0%, rgba(5, 9, 11, 0) 22%),
        linear-gradient(90deg, rgba(5, 9, 11, 0.5) 0, rgba(5, 9, 11, 0.88) calc(50% - var(--mk-max) / 2), transparent calc(50% - var(--mk-max) / 2));
}
/* Positioned by left/right + auto margins, never a transform: a transform would make it a stacking
   context, and the car's `lighten` would then blend inside it — showing its black studio backdrop. */
.mk-home-hero__stage { position: absolute; inset: 0; max-width: var(--mk-max); margin-inline: auto; pointer-events: none; }
.mk-home-hero__fade {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 9, 11, 0.88) 0%, rgba(5, 9, 11, 0.96) 12%, rgba(5, 9, 11, 0.96) 30%, rgba(5, 9, 11, 0.55) 48%, rgba(5, 9, 11, 0) 66%);
}
.mk-home-hero__body { position: relative; z-index: 2; padding-top: 180px; padding-bottom: 90px; }
.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-end: var(--mk-gutter); bottom: 48px; 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: end; text-transform: uppercase; }

/* The car: a studio shot on pure black. `lighten` drops the black into the garage while every pixel
   of the car survives — no keyed edge. The twin grid and the scan sweep are clipped to the car by its
   silhouette mask (car-hero-mask.png, same framing as the photo). */
.mk-home-hero__car {
    position: absolute; z-index: 1; inset-inline-end: -2%; bottom: 18px;
    width: min(64%, 1100px); aspect-ratio: 2000 / 927;
    mix-blend-mode: lighten; pointer-events: none;
    -webkit-mask: linear-gradient(0deg, transparent 0, #000 16%);
    mask: linear-gradient(0deg, transparent 0, #000 16%);
}
.mk-home-hero__car img { display: block; width: 100%; height: 100%; }
.mk-home-hero__car::after { content: ''; position: absolute; left: 12%; right: 10%; bottom: 8%; height: 22%; background: radial-gradient(ellipse at 50% 50%, rgba(34, 227, 165, 0.16), transparent 70%); filter: blur(6px); }
.mk-home-hero__scan {
    position: absolute; inset: 0;
    -webkit-mask: url("../images/marketing/car-hero-mask-_0CnPST.png") center / 100% 100% no-repeat;
    mask: url("../images/marketing/car-hero-mask-_0CnPST.png") center / 100% 100% no-repeat;
}
.mk-home-hero__scan::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 9%; background: linear-gradient(90deg, transparent, rgba(34, 227, 165, 0.55) 60%, rgba(200, 255, 238, 0.9) 62%, transparent 64%); opacity: 0; }

.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; top: 118px; 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); }

.mk-vehicle-card { position: absolute; z-index: 3; top: 258px; inset-inline-end: var(--mk-gutter); width: 200px; margin: 0; padding: 16px 18px; font-size: 10.5px; }
.mk-vehicle-card dt { color: var(--mk-dim); font-weight: 400; margin-top: 11px; }
.mk-vehicle-card dd { color: var(--mk-text); font-size: 11.5px; margin: 0; }
.mk-vehicle-card .is-accent { color: var(--mk-green); }
.mk-vehicle-card__id { display: flex; justify-content: space-between; align-items: flex-start; }
.mk-vehicle-card__id dt { margin-top: 0; }
.mk-vehicle-card__id dd { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.mk-vehicle-card__id svg { width: 22px; height: 22px; color: var(--mk-muted); }

/* ---- 01 Control: the dashboard mock ---- */
.mk-control { position: relative; padding: 30px 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; flex-direction: column; align-items: center; text-align: center; }
.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-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)); }
.mk-journey__more { position: absolute; z-index: 3; inset-inline-end: 0; bottom: 56px; color: var(--mk-green); }
.mk-journey__more svg { width: 42px; height: 42px; }

/* 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, transparent 50%, #000 62%);
    -webkit-mask-composite: source-in;
    mask: url("../images/marketing/car-side-mask-ZseWLoq.png") center / 100% 100% no-repeat, linear-gradient(90deg, transparent 50%, #000 62%);
    mask-composite: intersect;
}

/* ---- 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-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: one sweep across the hero car and 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; }
    .mk-home-hero__scan::before { animation: mk-sweep 6s 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); }
}
@keyframes mk-sweep {
    0% { transform: translateX(-10%); opacity: 0; }
    12% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(1100%); opacity: 0; }
}

/* ---- 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; }
    .mk-home-hero__fade { background: linear-gradient(180deg, var(--mk-bg) 0%, rgba(5, 9, 11, 0.92) 40%, rgba(5, 9, 11, 0.1) 70%, var(--mk-bg) 100%); }
    .mk-home-hero__scene { top: auto; bottom: 70px; height: 360px; overflow: hidden; }
    .mk-home-hero__scene svg { width: 860px; height: 360px; margin-left: calc(50vw - 520px); }
    .mk-home-hero__car { width: 118vw; inset-inline-end: -12vw; bottom: 110px; }
    .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-journey__more, .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; }
}