/* ==========================================================================
   VOSTAY — public marketing page
   Built on the SAME tokens.css the product uses, so marketing and app can
   never drift apart. Nothing here redefines a brand colour; it only adds the
   marketing-only surfaces (grain, glass, the vivid accent) that the product
   has no use for.
   ========================================================================== */

:root {
  /* The brand brief's vivid coral (#FF6B4E). It is reserved for LARGE fills,
     glows and decorative wash — never for a surface carrying small text. White
     on it measures ~2.6:1. Anything with a label on it uses --accent, which is
     tuned to 4.68:1. */
  --accent-bright: 10 100% 65%;

  /* One display face, not two. Sora at 800 with tight tracking reads as a
     product rather than a brochure, and dropping the serif removes a whole
     font family from the critical path. Warmth comes from Coral and the
     copy, not the letterforms. */
  --mk-font-display: "Sora", var(--font-sans);
  --mk-font-ui: "Sora", var(--font-sans);

  --mk-section-y: clamp(72px, 9vw, 132px);
  --mk-max: 1180px;
  --mk-glass-shadow: 0 24px 60px -22px hsl(193 70% 11% / 0.45);
}

/* ---------- Two-line stacks ----------
   The recurring "bold label above muted meta" pattern. Both are <span>s inside
   an inline wrapper, so without this they render on one line and the two
   strings run together. Declared once here rather than per component. */
.mk-act__t, .mk-act__m, .mk-demo__label, .mk-demo__meta,
.mk-job__t, .mk-job__m, .mk-tick__time, .mk-tick__title { display: block; }
.mk-act > span:not([class]), .mk-demo__row > span:not([class]) { display: flex; flex-direction: column; min-width: 0; }

/* ---------- Page frame ---------- */
.mk { background: hsl(var(--bg)); overflow-x: hidden; }
.mk-nav, .mk main, .mk-footer { position: relative; z-index: 2; }
.mk-wrap { width: 100%; max-width: var(--mk-max); margin-inline: auto;
  padding-left: max(var(--space-5), env(safe-area-inset-left));
  padding-right: max(var(--space-5), env(safe-area-inset-right)); }
.mk-section {
  padding-block: var(--mk-section-y); position: relative;
  /* Clicking a nav link must not land the section heading underneath the
     sticky nav. 62px is the shrunk nav height plus breathing room. */
  scroll-margin-top: 84px;
}
/* Smooth anchor scrolling, but never for someone who asked for less motion —
   a hijacked long scroll is exactly what reduced-motion is protecting against. */
@media (prefers-reduced-motion: no-preference) {
  .mk { scroll-behavior: smooth; }
}

/* Petrol sections. `isolation` gives the grain overlay its own stacking
   context so it can never sit above interactive content. */
.mk-dark { background: hsl(var(--petrol-950)); color: hsl(0 0% 100% / 0.82); isolation: isolate; }
.mk-dark h1, .mk-dark h2, .mk-dark h3, .mk-dark h4 { color: white; }
.mk-dark .mk-eyebrow { color: hsl(var(--accent-bright)); }
.mk-dark .mk-lede { color: hsl(0 0% 100% / 0.74); }

/* ---------- Film grain ----------
   A fixed, pointer-events-none overlay, never on a scrolling container —
   repainting noise every frame destroys mobile framerate. */
.mk-grain {
  /* z-index 0, not 1: the grain must sit behind page content, not multiply
     over the headline. opacity is DPI-aware — the same texture reads roughly
     twice as strong on a 2x screen. */
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
@media (min-resolution: 2dppx) { .mk-grain { opacity: 0.18; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk-grain { mix-blend-mode: soft-light; opacity: 0.55; } }
:root[data-theme="dark"] .mk-grain { mix-blend-mode: soft-light; opacity: 0.55; }

/* ---------- Type ---------- */
/* One display face. Weight and tracking carry the hierarchy instead of a
   second family: Sora 800 tight for headlines, Inter for everything a reader
   actually has to read at length. */
.mk-display {
  font-family: var(--mk-font-display);
  font-weight: 800; font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.04; letter-spacing: -0.042em; text-wrap: balance;
  color: hsl(var(--fg));
}
.mk-h2 {
  font-family: var(--mk-font-display); font-weight: 800;
  font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1;
  letter-spacing: -0.035em; text-wrap: balance; color: hsl(var(--fg));
}
.mk-h3 { font-family: var(--mk-font-ui); font-weight: 700; font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.02em; }
.mk-stat { font-family: var(--mk-font-ui); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.mk-lede { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: hsl(var(--fg-muted)); max-width: 58ch; text-wrap: pretty; }
.mk-accent-word { color: hsl(var(--accent)); }
.mk-dark .mk-accent-word { color: hsl(var(--accent-bright)); }

.mk-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mk-font-ui); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  /* --accent is tuned so white sits ON it; as 12px text it reads 4.33:1 over
     --surface-sunken. --accent-soft-fg is the text-on-light member of the pair. */
  color: hsl(var(--accent-soft-fg));
}
.mk-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px;
  border-radius: var(--radius-full); font-size: 12.5px; font-weight: 600;
  background: hsl(var(--accent-soft)); color: hsl(var(--accent-soft-fg));
  border: 1px solid hsl(var(--accent) / 0.22);
}
.mk-dark .mk-chip { background: hsl(var(--accent-bright) / 0.14); color: hsl(var(--accent-bright)); border-color: hsl(var(--accent-bright) / 0.3); }
.mk-chip .pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .mk-chip .pulse { animation: mk-pulse 2.4s var(--ease-in-out) infinite; }
  @keyframes mk-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }
}

/* ---------- Buttons ----------
   Extends the product's .btn rather than inventing a marketing button, so the
   two surfaces keep the same press feel and focus ring. */
.btn-hero { height: 52px; padding: 0 26px; font-size: 15px; border-radius: var(--radius-md); font-weight: 700; }
.btn-accent.btn-hero { box-shadow: 0 10px 28px -10px hsl(var(--accent) / 0.65); }
@media (hover: hover) and (pointer: fine) {
  .btn-accent.btn-hero:hover { box-shadow: 0 14px 34px -10px hsl(var(--accent) / 0.75); transform: translateY(-1px); }
}
.btn-ghost-light {
  background: hsl(0 0% 100% / 0.08); color: white; border: 1px solid hsl(0 0% 100% / 0.18);
  backdrop-filter: blur(8px);
}
.btn-ghost-light:hover { background: hsl(0 0% 100% / 0.14); border-color: hsl(0 0% 100% / 0.3); }

/* ---------- Scroll reveal ----------
   IntersectionObserver adds .is-in (see marketing.js). No scroll listener
   anywhere on this page. */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
/* Nothing hidden by JS may stay hidden if JS never runs. */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Nav ---------- */
.mk-nav { position: sticky; top: 0; z-index: 60; transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out); }
.mk-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 74px; transition: height var(--dur-base) var(--ease-out); }
.mk-nav.is-stuck { background: hsl(var(--surface) / 0.82); backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 1px 0 hsl(var(--border)), var(--shadow-xs); }
.mk-nav.is-stuck .mk-nav__inner { height: 62px; }
.mk-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mk-font-ui); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; color: hsl(var(--fg)); }
.mk-brand__mark { width: 30px; height: 30px; border-radius: 9px; background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); display: grid; place-items: center; box-shadow: 0 4px 14px -4px hsl(var(--accent) / .6); }
.mk-brand__mark svg { width: 17px; height: 17px; }
.mk-nav__links { display: flex; align-items: center; gap: var(--space-6); font-size: 14px; font-weight: 600; color: hsl(var(--fg-muted)); }
.mk-nav__links a { transition: color var(--dur-fast) var(--ease-out); }
.mk-nav__links a:hover { color: hsl(var(--fg)); }
.mk-nav__cta { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 900px) { .mk-nav__links { display: none; } }
@media (max-width: 560px) { .mk-nav__cta .btn-secondary { display: none; } }

/* ---------- Hero ---------- */
.mk-hero { position: relative; padding-top: clamp(48px, 7vw, 92px); padding-bottom: clamp(56px, 8vw, 110px); overflow: hidden; }
/* Soft petrol wash behind the hero. A gradient, not an image — no extra
   request, no layout shift, and it recolours itself in dark mode. */
.mk-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 130%;
  background:
    radial-gradient(52% 44% at 18% 14%, hsl(var(--primary) / .16), transparent 62%),
    radial-gradient(44% 38% at 84% 6%, hsl(var(--accent-bright) / .14), transparent 60%);
  pointer-events: none;
}
.mk-hero__grid { position: relative; }
.mk-hero__copy { max-width: 780px; margin-inline: auto; text-align: center; }
.mk-hero__copy > * + * { margin-top: var(--space-5); }
.mk-hero__copy .mk-lede { margin-inline: auto; }
.mk-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.mk-trustline { justify-content: center; }
@media (max-width: 560px) { .mk-hero__ctas .btn { width: 100%; } }
.mk-trustline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: hsl(var(--fg-muted)); }
.mk-trustline .sep { width: 3px; height: 3px; border-radius: 50%; background: hsl(var(--border-strong)); }
.mk-trustline .stars { color: hsl(var(--warning)); letter-spacing: 1px; }

/* ---------- Trust bar ---------- */
.mk-trustbar { border-block: 1px solid hsl(var(--border)); background: hsl(var(--surface)); padding-block: var(--space-6); }
.mk-trustbar__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 760px) { .mk-trustbar__row { grid-template-columns: 1fr; text-align: center; } }
.mk-metric__value { font-family: var(--mk-font-ui); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.03em; color: hsl(var(--fg)); font-variant-numeric: tabular-nums lining-nums; }
.mk-metric__label { font-size: 13px; color: hsl(var(--fg-muted)); margin-top: 2px; }
.mk-trustbar__where { text-align: center; font-size: 12.5px; color: hsl(var(--fg-subtle)); margin-bottom: var(--space-5); }

/* ---------- Problem scene (the "before") ---------- */
.mk-pains { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-8); }
@media (max-width: 760px) { .mk-pains { grid-template-columns: 1fr; } }
.mk-pain {
  display: flex; gap: var(--space-4); padding: var(--space-5);
  border-radius: var(--radius-lg); background: hsl(0 0% 100% / 0.04);
  border: 1px solid hsl(0 0% 100% / 0.09);
}
.mk-pain__time {
  flex-shrink: 0; width: 54px; font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: hsl(var(--accent-bright)); padding-top: 1px;
}
.mk-pain h4 { font-size: 15px; margin-bottom: 4px; }
.mk-pain p { font-size: 13.5px; line-height: 1.55; color: hsl(0 0% 100% / 0.62); }
.mk-turn { margin-top: var(--space-10); text-align: center; }
.mk-turn p { font-family: var(--mk-font-display); font-weight: 800; font-size: clamp(22px, 3vw, 32px); color: white; letter-spacing: -0.035em; }

/* ---------- Feature scenes ---------- */
.mk-feature { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.mk-feature + .mk-feature { margin-top: clamp(64px, 8vw, 112px); }
.mk-feature:nth-child(even) .mk-feature__copy { order: 2; }
@media (max-width: 880px) {
  .mk-feature { grid-template-columns: 1fr; gap: var(--space-6); }
  .mk-feature:nth-child(even) .mk-feature__copy { order: 0; }
}
.mk-feature__copy > * + * { margin-top: var(--space-3); }
.mk-feature__copy .mk-h2 { font-size: clamp(24px, 2.9vw, 34px); }
/* Was an italic "how it feels" line. Now it names the AI's actual steps, which
   is both more concrete and the thing the page is selling. */
.mk-feature__felt {
  font-size: 13px; line-height: 1.55; color: hsl(var(--fg-muted));
  padding: 11px 13px; border-radius: var(--radius-md);
  background: hsl(var(--accent-soft) / .5); border-left: 3px solid hsl(var(--accent));
}
.mk-feature__felt b { color: hsl(var(--accent-soft-fg)); font-weight: 700; }
.mk-eyebrow svg { width: 13px; height: 13px; }
.mk-pro-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-full);
  font-family: var(--mk-font-ui); font-size: 10px; font-weight: 800; letter-spacing: .08em;
  background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); margin-left: 8px; vertical-align: 3px;
}
.mk-demo {
  border-radius: var(--radius-xl); padding: var(--space-5); position: relative; overflow: hidden;
  background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); box-shadow: var(--mk-glass-shadow);
}
.mk-demo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 50% at 50% 0%, hsl(var(--primary) / .07), transparent 70%);
}
.mk-demo__row { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); }
.mk-demo__row:last-child { border-bottom: none; }
.mk-demo__icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: hsl(var(--primary-soft)); color: hsl(var(--primary-soft-fg)); }
.mk-demo__icon svg { width: 15px; height: 15px; }
/* These are spans inside an inline wrapper, so they have to be told to stack
   — otherwise the label and its meta line run together as one string. */
.mk-demo__row > span:not([class]) { display: flex; flex-direction: column; min-width: 0; }
.mk-demo__label { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.mk-demo__meta { display: block; font-size: 11.5px; color: hsl(var(--fg-muted)); line-height: 1.35; margin-top: 1px; }
.mk-demo__value { margin-left: auto; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-toast-win {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-full);
  font-size: 12.5px; font-weight: 700; background: hsl(var(--success-bg)); color: hsl(var(--success)); margin-top: var(--space-3);
}

/* Voice waveform — pure CSS bars, no audio asset needed. */
.mk-wave { display: flex; align-items: center; gap: 3px; height: 46px; margin: var(--space-3) 0; }
.mk-wave i { flex: 1; background: hsl(var(--primary) / .55); border-radius: var(--radius-full); height: 22%; }
@media (prefers-reduced-motion: no-preference) {
  .is-in .mk-wave i { animation: mk-wave 1.25s var(--ease-in-out) infinite alternate; animation-delay: calc(var(--w) * 55ms); }
  @keyframes mk-wave { from { height: 14%; } to { height: 100%; } }
}

/* ---------- "A day with Vostay" timeline ----------
   Sticky heading + a rail. position:sticky does the pinning natively, so
   there is no scroll listener and nothing to clean up. */
.mk-day { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 880px) { .mk-day { grid-template-columns: 1fr; } }
.mk-day__sticky { position: sticky; top: 108px; }
@media (max-width: 880px) { .mk-day__sticky { position: static; } }
.mk-rail { position: relative; padding-left: 34px; }
.mk-rail::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: hsl(var(--border)); }
.mk-tick { position: relative; padding-bottom: var(--space-6); }
.mk-tick:last-child { padding-bottom: 0; }
.mk-tick::before {
  content: ""; position: absolute; left: -30px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: hsl(var(--surface)); border: 2px solid hsl(var(--border-strong));
}
.mk-tick.is-in::before { border-color: hsl(var(--primary)); background: hsl(var(--primary)); }
.mk-tick.is-owner::before { border-color: hsl(var(--accent)); background: hsl(var(--accent)); }
.mk-tick__time { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: hsl(var(--fg-subtle)); }
.mk-tick__title { font-size: 14.5px; font-weight: 600; margin-top: 2px; }
.mk-tick__by { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: var(--radius-full);
  background: hsl(var(--primary-soft)); color: hsl(var(--primary-soft-fg)); }
.mk-tick.is-owner .mk-tick__by { background: hsl(var(--accent-soft)); color: hsl(var(--accent-soft-fg)); }

/* ---------- ROI + calculator ---------- */
.mk-roi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-bottom: var(--space-10); }
@media (max-width: 880px) { .mk-roi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .mk-roi { grid-template-columns: 1fr; } }
.mk-roi__v { font-family: var(--mk-font-ui); font-weight: 800; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.03em; color: white; font-variant-numeric: tabular-nums lining-nums; }
.mk-roi__l { font-size: 13px; color: hsl(0 0% 100% / 0.66); margin-top: 4px; }
.mk-calc { border-radius: var(--radius-xl); padding: clamp(20px, 3vw, 32px); background: hsl(0 0% 100% / 0.06); border: 1px solid hsl(0 0% 100% / 0.12); }
.mk-calc__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.mk-calc__n { font-family: var(--mk-font-ui); font-weight: 800; font-size: 30px; color: hsl(var(--accent-bright)); font-variant-numeric: tabular-nums; }
.mk-calc input[type="range"] { width: 100%; accent-color: hsl(var(--accent-bright)); height: 28px; }
.mk-calc__out { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
@media (max-width: 520px) { .mk-calc__out { grid-template-columns: 1fr; } }
.mk-calc__cell { background: hsl(0 0% 100% / .05); border-radius: var(--radius-md); padding: var(--space-4); }
.mk-calc__cell b { display: block; font-family: var(--mk-font-ui); font-size: 26px; font-weight: 800; color: white; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mk-calc__cell span { font-size: 12.5px; color: hsl(0 0% 100% / .66); }
.mk-calc__note { font-size: 11.5px; color: hsl(0 0% 100% / .48); margin-top: var(--space-3); }

/* ---------- Social proof ---------- */
.mk-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 980px) { .mk-quotes { grid-template-columns: 1fr; } }
.mk-quote { background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.mk-quote blockquote { font-size: 17px; line-height: 1.5; letter-spacing: -.01em; color: hsl(var(--fg)); flex: 1; }
.mk-quote__by { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.mk-quote__by .avatar { box-shadow: 0 0 0 2px hsl(var(--surface)), 0 0 0 4px hsl(var(--swatch, var(--primary)) / .55); }
.mk-quote__name { font-size: 13.5px; font-weight: 600; }
.mk-quote__meta { font-size: 12px; color: hsl(var(--fg-muted)); }

/* Marquee. One per page — see the section comment in landing.html. */
.mk-marquee { margin-top: var(--space-8); overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.mk-marquee__track { display: flex; gap: var(--space-3); width: max-content; }
@media (prefers-reduced-motion: no-preference) { .mk-marquee__track { animation: mk-marq 46s linear infinite; } }
@media (hover: hover) { .mk-marquee:hover .mk-marquee__track { animation-play-state: paused; } }
@keyframes mk-marq { to { transform: translateX(-50%); } }
.mk-marquee__item { flex-shrink: 0; padding: 10px 16px; border-radius: var(--radius-full); background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); font-size: 13px; color: hsl(var(--fg-muted)); }

/* ---------- Pricing ---------- */
.mk-toggle { display: inline-flex; padding: 3px; background: hsl(var(--surface-sunken)); border-radius: var(--radius-full); gap: 2px; margin-inline: auto; }
.mk-toggle button { height: 34px; padding: 0 18px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600; color: hsl(var(--fg-muted)); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.mk-toggle button[aria-pressed="true"] { background: hsl(var(--surface)); color: hsl(var(--fg)); box-shadow: var(--shadow-xs); }
.mk-toggle .save { font-size: 11px; color: hsl(var(--success)); font-weight: 700; margin-left: 5px; }
.mk-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); max-width: 860px; margin: var(--space-8) auto 0; }
@media (max-width: 780px) { .mk-plans { grid-template-columns: 1fr; } }
.mk-plan { position: relative; background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; }
.mk-plan--pro { border-color: hsl(var(--accent)); box-shadow: 0 0 0 1px hsl(var(--accent)), var(--mk-glass-shadow); }
.mk-plan__badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-full); white-space: nowrap; }
.mk-plan__name { font-family: var(--mk-font-ui); font-weight: 700; font-size: 15px; }
.mk-plan__tag { font-size: 12.5px; color: hsl(var(--fg-muted)); margin-top: 2px; }
.mk-plan__price { display: flex; align-items: baseline; gap: 5px; margin: var(--space-4) 0 var(--space-2); }
.mk-plan__price b { font-family: var(--mk-font-ui); font-weight: 800; font-size: 40px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mk-plan__price span { font-size: 13px; color: hsl(var(--fg-muted)); }
.mk-plan ul { display: flex; flex-direction: column; gap: 10px; margin: var(--space-5) 0; flex: 1; }
.mk-plan li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.45; align-items: flex-start; }
.mk-plan li svg { width: 16px; height: 16px; flex-shrink: 0; color: hsl(var(--success)); margin-top: 1px; }
.mk-plan__note { text-align: center; font-size: 12.5px; color: hsl(var(--fg-muted)); margin-top: var(--space-5); }

/* ---------- Security ---------- */
.mk-sec { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@media (max-width: 880px) { .mk-sec { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mk-sec { grid-template-columns: 1fr; } }
.mk-sec__item svg { width: 22px; height: 22px; color: hsl(var(--accent-bright)); margin-bottom: 10px; }
.mk-sec__item h4 { font-size: 14.5px; color: white; margin-bottom: 4px; }
.mk-sec__item p { font-size: 13px; line-height: 1.55; color: hsl(0 0% 100% / .62); }

/* ---------- FAQ ---------- */
.mk-faq { max-width: 760px; margin-inline: auto; }
.mk-faq details { border-bottom: 1px solid hsl(var(--border)); }
.mk-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) 0; cursor: pointer; list-style: none; min-height: 44px;
  font-size: 15px; font-weight: 600; color: hsl(var(--fg));
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary:hover { color: hsl(var(--primary)); }
.mk-faq summary:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; border-radius: var(--radius-sm); }
.mk-faq summary svg { width: 18px; height: 18px; flex-shrink: 0; color: hsl(var(--fg-subtle)); transition: transform var(--dur-base) var(--ease-out); }
.mk-faq details[open] summary svg { transform: rotate(45deg); }
.mk-faq__a { padding: 0 0 var(--space-5); font-size: 14px; line-height: 1.65; color: hsl(var(--fg-muted)); max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .mk-faq summary svg { transition: none; } }

/* ---------- Final CTA + footer ---------- */
.mk-final { position: relative; overflow: hidden; text-align: center; }
.mk-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 108%, hsl(var(--accent-bright) / .34), transparent 68%);
}
.mk-final__inner { position: relative; }
.mk-final .mk-h2 { color: white; font-size: clamp(30px, 4.6vw, 54px); }
.mk-footer { background: hsl(var(--petrol-950)); color: hsl(0 0% 100% / .6); padding-block: var(--space-10) var(--space-8); }
.mk-footer__grid { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; align-items: flex-start; }
.mk-footer a { color: hsl(0 0% 100% / .66); font-size: 13.5px; transition: color var(--dur-fast) var(--ease-out); }
.mk-footer a:hover { color: white; }
.mk-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); }
.mk-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center;
  margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid hsl(0 0% 100% / .1); font-size: 12.5px; }

/* ---------- For Cleaners ----------
   Deliberately a phone frame rather than another glass card: this is the one
   part of the product that lives on someone else's phone, and the section
   should look different from the operator-facing scenes around it. */
.mk-crew { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 880px) { .mk-crew { grid-template-columns: 1fr; } }
.mk-crew__copy > * + * { margin-top: var(--space-4); }
.mk-crew__points { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.mk-crew__point { display: flex; gap: var(--space-3); align-items: flex-start; }
.mk-crew__point svg { width: 17px; height: 17px; flex-shrink: 0; color: hsl(var(--success)); margin-top: 2px; }
.mk-crew__point b { font-size: 14px; display: block; }
.mk-crew__point span { font-size: 13.5px; color: hsl(var(--fg-muted)); line-height: 1.5; }

.mk-phone {
  width: min(280px, 100%); margin-inline: auto; border-radius: 34px; padding: 10px;
  background: hsl(var(--petrol-950)); box-shadow: var(--mk-glass-shadow);
  border: 1px solid hsl(var(--border));
}
.mk-phone__screen { border-radius: 26px; overflow: hidden; background: hsl(var(--surface-sunken)); }
.mk-phone__top {
  background: hsl(var(--petrol-900)); color: white; padding: 20px 16px 22px;
  border-radius: 0 0 18px 18px;
}
.mk-phone__greet { font-size: 11px; color: hsl(0 0% 100% / .62); }
.mk-phone__hi { font-size: 16px; font-weight: 700; margin-top: 2px; }
.mk-phone__body { padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.mk-job {
  background: hsl(var(--surface)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md); padding: 11px; border-left: 3px solid hsl(var(--swatch, var(--primary)));
}
.mk-job__t { font-size: 13px; font-weight: 700; }
.mk-job__m { font-size: 11px; color: hsl(var(--fg-muted)); margin-top: 1px; }
.mk-job__row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.mk-job__tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 7px; border-radius: var(--radius-full);
  background: hsl(var(--warning-bg)); color: hsl(var(--warning));
}
.mk-job__tag.is-done { background: hsl(var(--success-bg)); color: hsl(var(--success)); }
.mk-phone__nav {
  display: flex; background: hsl(var(--surface)); border-top: 1px solid hsl(var(--border));
  padding: 8px 0 12px;
}
.mk-phone__nav span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 8.5px; font-weight: 600; color: hsl(var(--fg-subtle)); }
.mk-phone__nav span svg { width: 15px; height: 15px; }
.mk-phone__nav span.on { color: hsl(var(--primary)); }

/* The boundary is the selling point, so it gets its own visual treatment
   rather than being a bullet like everything else. */
.mk-wall {
  margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-lg);
  background: hsl(var(--primary-soft)); border: 1px solid hsl(var(--primary) / .2);
  display: flex; gap: var(--space-3); align-items: flex-start;
}
.mk-wall svg { width: 18px; height: 18px; flex-shrink: 0; color: hsl(var(--primary-soft-fg)); margin-top: 1px; }
.mk-wall p { font-size: 13.5px; line-height: 1.55; color: hsl(var(--primary-soft-fg)); }

/* ==========================================================================
   HERO SCENE v2 — an annotated product window
   The first version was four floating cards. It looked designed but it
   explained nothing: a visitor could not tell what the software does from it.
   This is one legible product surface with numbered callouts pointing at the
   three things that matter — the AI drafts, you approve, everything
   downstream happens on its own.
   ========================================================================== */
.mk-stage { position: relative; margin-top: clamp(40px, 5vw, 64px); }
/* Gutters so the callout pins sit BESIDE the window rather than on top of the
   message they annotate. Below 1100px the pins are hidden and the gutters
   collapse; the inline step list under the copy carries the same points. */
@media (min-width: 1101px) { .mk-stage { padding-inline: 176px; } }
@media (min-width: 1320px) { .mk-stage { padding-inline: 196px; } }
.mk-win {
  border-radius: var(--radius-xl); overflow: hidden;
  background: hsl(var(--surface)); border: 1px solid hsl(var(--border));
  box-shadow: var(--mk-glass-shadow);
}
.mk-win__bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: hsl(var(--surface-sunken)); border-bottom: 1px solid hsl(var(--border));
}
.mk-win__dots { display: flex; gap: 5px; }
.mk-win__dots i { width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--border-strong)); }
.mk-win__title { font-size: 11.5px; font-weight: 600; color: hsl(var(--fg-muted)); }
.mk-win__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: hsl(var(--success));
}
.mk-win__live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .mk-win__live i { animation: mk-pulse 2s var(--ease-in-out) infinite; }
}

.mk-win__body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
/* minmax(0,…): a bare 1fr track grew to the typewriter line's full
   unwrapped width and pushed the reply bubbles off the window on a phone. */
@media (max-width: 620px) { .mk-win__body { grid-template-columns: minmax(0, 1fr); } }
.mk-win__thread { padding: clamp(16px, 2.2vw, 28px); border-right: 1px solid hsl(var(--border)); }
@media (max-width: 620px) { .mk-win__thread { border-right: none; border-bottom: 1px solid hsl(var(--border)); } }
.mk-win__side { padding: clamp(14px, 1.8vw, 22px); background: hsl(var(--surface-sunken) / .5); }
.mk-win__side-h {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: hsl(var(--fg-subtle)); margin-bottom: 10px;
}

/* The AI label that appears above the drafted reply — this is the moment the
   page has to sell, so it is the one thing wearing the accent. */
.mk-ai-tag {
  display: inline-flex; align-items: center; gap: 5px; margin: 10px 0 5px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 9px; border-radius: var(--radius-full);
  background: hsl(var(--accent-soft)); color: hsl(var(--accent-soft-fg));
}
.mk-ai-tag svg { width: 11px; height: 11px; }

.mk-act { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid hsl(var(--border)); }
.mk-act:last-child { border-bottom: none; }
.mk-act__ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: hsl(var(--success-bg)); color: hsl(var(--success)); }
.mk-act__ico svg { width: 12px; height: 12px; }
.mk-act__t { font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.mk-act__m { font-size: 10.5px; color: hsl(var(--fg-muted)); }
@media (prefers-reduced-motion: no-preference) {
  .is-in .mk-act { animation: mk-pop .5s var(--ease-out) both; animation-delay: calc(2.6s + var(--a) * .35s); }
}

/* ---------- Callouts ----------
   Numbered pins that name what is happening. Hidden below 980px, where they
   would cover the very UI they are annotating; the copy list below the
   visual carries the same three points on small screens. */
.mk-callout {
  position: absolute; z-index: 6; display: flex; align-items: flex-start; gap: 8px;
  max-width: 158px; padding: 9px 12px 9px 9px; border-radius: var(--radius-lg);
  background: hsl(var(--petrol-950)); color: white;
  font-size: 11.5px; font-weight: 600; line-height: 1.35; text-align: left;
  box-shadow: var(--shadow-popover);
}
.mk-callout b {
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-size: 10.5px; font-weight: 800;
  margin-top: 1px;
}
.mk-callout::after {
  content: ""; position: absolute; width: 26px; height: 1px;
  background: hsl(var(--petrol-950) / .45);
}
.mk-callout::after { top: 18px; }
.mk-callout--1 { top: 13%; left: 0; }
.mk-callout--1::after { right: -20px; width: 20px; }
.mk-callout--2 { top: 46%; left: 0; }
.mk-callout--2::after { right: -20px; width: 20px; }
.mk-callout--3 { bottom: 14%; right: 0; }
.mk-callout--3::after { left: -20px; width: 20px; }
@media (max-width: 1100px) { .mk-callout { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .is-in .mk-callout { animation: mk-pop .55s var(--ease-spring) both; }
  .is-in .mk-callout--1 { animation-delay: 1.5s; }
  .is-in .mk-callout--2 { animation-delay: 2.1s; }
  .is-in .mk-callout--3 { animation-delay: 3.2s; }
}

/* The same three points, as text. Visible on small screens where the pins
   are hidden, so nobody loses the explanation. */
.mk-steps-inline { display: none; margin-top: var(--space-6); flex-direction: column; gap: var(--space-3);
  text-align: left; max-width: 540px; margin-inline: auto; }
@media (max-width: 1100px) { .mk-steps-inline { display: flex; } }
.mk-steps-inline div { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.mk-steps-inline b {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-size: 11px; font-weight: 800; margin-top: 1px;
}


/* ---------- Message bubbles & PIN ----------
   Shared by the hero window and the feature demos. (These were briefly lost
   when the first hero scene was cut; they were never hero-only.) */
.mk-bubble { border-radius: var(--radius-md); padding: 11px 14px; font-size: 13.5px; line-height: 1.5; }
.mk-bubble--guest { background: hsl(var(--surface-sunken)); color: hsl(var(--fg)); border-bottom-left-radius: 4px; }
.mk-bubble--ai { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-bottom-right-radius: 4px; }
.mk-demo .mk-bubble--ai, .mk-win__thread .mk-bubble--ai { margin-top: 4px; }
.mk-demo .mk-bubble + .mk-bubble { margin-top: 8px; }

.mk-typing { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
/* The typewriter needs one unbroken line; a phone doesn't have one that
   long, so there the reply simply wraps and appears. */
@media (max-width: 620px) {
  .mk-typing { display: inline; white-space: normal; }
  .is-in .mk-typing { animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .is-in .mk-typing { animation: mk-type 2s steps(42, end) 1s both; }
  @keyframes mk-type { from { width: 0; } to { width: 100%; } }
}

.mk-approve {
  margin-top: 10px; display: flex; align-items: center; gap: 6px; width: fit-content;
  font-size: 12px; font-weight: 700; color: hsl(var(--success));
  background: hsl(var(--success-bg)); border-radius: var(--radius-full); padding: 6px 12px;
}
.mk-approve svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .is-in .mk-approve { animation: mk-pop .5s var(--ease-spring) 3s both; }
  @keyframes mk-pop { from { opacity: 0; transform: scale(.92) translateY(4px); } to { opacity: 1; transform: none; } }
}

.mk-pin { display: flex; gap: 6px; margin-top: 4px; }
.mk-pin span {
  flex: 1; aspect-ratio: 3/4; border-radius: 7px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  background: hsl(var(--primary-soft)); color: hsl(var(--primary-soft-fg));
}
@media (prefers-reduced-motion: no-preference) {
  .is-in .mk-pin span { animation: mk-flip .5s var(--ease-out) both; animation-delay: calc(.5s + var(--d) * .1s); }
  @keyframes mk-flip { from { transform: rotateX(-84deg); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ==========================================================================
   THE SHIFT — an explicit in / think / out flow
   The first version was four nouns floating around a circle. It named the
   inputs but never said what the AI does with them, which is the only
   interesting part. This spells out the whole loop: what arrives, what the
   AI decides, what happens as a result.
   ========================================================================== */
.mk-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: clamp(12px, 2vw, 28px); align-items: stretch; margin-top: var(--space-8); text-align: left; }
@media (max-width: 1020px) { .mk-flow { grid-template-columns: 1fr; gap: var(--space-4); } }
.mk-flow__col { display: flex; flex-direction: column; }
.mk-flow__h {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: hsl(var(--fg-subtle)); margin-bottom: var(--space-3);
}
.mk-flow__items { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mk-flow__item {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border-radius: var(--radius-md); background: hsl(var(--surface));
  border: 1px solid hsl(var(--border)); font-size: 13px; font-weight: 500;
}
/* The text is already wrapped in a <span> in the markup, which keeps the
   inline <b> from becoming its own flex item. */
.mk-flow__item > span { min-width: 0; }
.mk-flow__item svg { width: 15px; height: 15px; flex-shrink: 0; color: hsl(var(--fg-muted)); }
.mk-flow__item b { font-weight: 600; }

/* The middle column is the product. It gets the petrol treatment so the eye
   lands there and reads left-to-right out of it. */
.mk-flow__brain {
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4);
  background: linear-gradient(160deg, hsl(var(--primary)), hsl(var(--petrol-950)));
  color: white; box-shadow: var(--mk-glass-shadow); min-width: 0;
}
/* --accent-bright on the petrol gradient measures 2.48:1 — it looks vivid but
   a 10.5px label at that contrast is not readable. A paler coral keeps the
   accent and clears AA at 4.90:1. */
.mk-flow__brain .mk-flow__h { color: hsl(10 100% 88%); }
.mk-flow__brain ol { display: flex; flex-direction: column; gap: 10px; counter-reset: fl; }
/* The li is NOT flex: a flex container turns every text run into its own flex
   item, so an inline <b> mid-sentence gets torn onto its own line. Block with
   an absolutely-positioned counter keeps the sentence as one sentence. */
.mk-flow__brain li {
  position: relative; padding-left: 27px; font-size: 12.5px; line-height: 1.45;
  color: hsl(0 0% 100% / .86); counter-increment: fl;
}
.mk-flow__brain li::before {
  content: counter(fl); position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: hsl(0 0% 100% / .14); color: white; font-size: 10px; font-weight: 800;
  display: grid; place-items: center;
}
.mk-flow__brain li b { color: white; font-weight: 700; }
.mk-flow__arrow { display: grid; place-items: center; color: hsl(var(--border-strong)); }
.mk-flow__arrow svg { width: 20px; height: 20px; }
@media (max-width: 1020px) { .mk-flow__arrow { transform: rotate(90deg); padding: 2px 0; } }

.mk-flow__out .mk-flow__item { border-color: hsl(var(--success) / .34); background: hsl(var(--success-bg) / .5); }
.mk-flow__out .mk-flow__item svg { color: hsl(var(--success)); }

/* The one line that names the boundary — the objection every owner has. */
.mk-flow__note {
  margin-top: var(--space-6); text-align: center; font-size: 13.5px; color: hsl(var(--fg-muted));
  max-width: 62ch; margin-inline: auto;
}
.mk-flow__note b { color: hsl(var(--fg)); }

/* ---------- Before / after ----------
   The problem scene and the day-timeline already carry these separately, but
   side by side is the argument. Placed just before pricing, where it does the
   most work. */
.mk-vs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); max-width: 900px; margin: var(--space-8) auto 0; text-align: left; }
@media (max-width: 760px) { .mk-vs { grid-template-columns: 1fr; } }
.mk-vs__col { border-radius: var(--radius-xl); padding: var(--space-5); border: 1px solid hsl(var(--border)); background: hsl(var(--surface)); }
.mk-vs__col--after { border-color: hsl(var(--primary) / .4); box-shadow: 0 0 0 1px hsl(var(--primary) / .28), var(--shadow-card-hover); }
.mk-vs__h { display: flex; align-items: center; gap: 8px; font-family: var(--mk-font-ui); font-weight: 700; font-size: 14px; margin-bottom: var(--space-4); }
.mk-vs__h span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: var(--radius-full); }
.mk-vs__col--before .mk-vs__h span { background: hsl(var(--surface-sunken)); color: hsl(var(--fg-muted)); }
.mk-vs__col--after .mk-vs__h span { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.mk-vs__list { display: flex; flex-direction: column; }
.mk-vs__row { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); font-size: 13.5px; line-height: 1.45; }
.mk-vs__row:last-child { border-bottom: none; }
.mk-vs__row svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.mk-vs__col--before .mk-vs__row { color: hsl(var(--fg-muted)); }
.mk-vs__col--before .mk-vs__row svg { color: hsl(var(--destructive)); }
.mk-vs__col--after .mk-vs__row svg { color: hsl(var(--success)); }
.mk-vs__foot { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed hsl(var(--border)); font-size: 13px; font-weight: 600; }
.mk-vs__col--before .mk-vs__foot { color: hsl(var(--fg-muted)); }
.mk-vs__col--after .mk-vs__foot { color: hsl(var(--primary)); }