/* ChatAI Engine — marketing site
 *
 * Committed dark design: a deliberate single visual identity (deep navy
 * charcoal ground, a green primary carried straight from the logo, cyan as
 * a secondary "intelligence" accent), not a dark-mode variant of a light
 * default. Separate stylesheet from app.css on purpose — the product UI is
 * a dense, information-first tool; the marketing site is a wide,
 * typographic, motion-forward story.
 *
 * Two greens, one family: --mk-brand is the logo's own deep green, used for
 * the mark itself and the solar-system sun in the hero. --mk-primary is a
 * brighter green tuned for UI contrast against the dark ground -- every
 * CTA, link and active state. Cyan stays as a minor "energy" accent inside
 * gradients and glows, never a solid fill on its own.
 *
 * Class prefix `mk-` throughout so this can never collide with app.css.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Brand green -- the logo's own colour. The hero sun, and the mark. */
  --mk-brand:      #14A87E;
  --mk-brand-600:  #0F6E56;

  /* Primary green -- the platform's colour, brighter than --mk-brand for
     contrast on the dark ground. Every CTA, link and active state. */
  --mk-primary:     #22C48D;
  --mk-primary-400: #5FE0B4;
  --mk-primary-600: #12A876;
  --mk-primary-700: #0C8760;
  --mk-primary-50:  rgba(34, 196, 141, .10);
  --mk-primary-100: rgba(34, 196, 141, .16);

  /* Cyan -- a minor "energy" accent inside gradients and glows only, never
     a solid text or button fill on its own. */
  --mk-cyan:    #2FE0C6;
  --mk-violet:  #6BE0B0;

  --mk-ink:      #F3FBF7;
  --mk-ink-2:    #C1D3CA;
  --mk-muted:    #86998F;
  --mk-faint:    #566B60;

  --mk-bg:        #060F0C;
  --mk-canvas:    #060F0C;
  --mk-surface:   #0C1712;
  --mk-surface-2: #0F1D17;
  --mk-surface-3: #14261E;
  --mk-line:      #1E3226;
  --mk-line-2:    #294130;
  --mk-header-bg: rgba(6, 15, 12, .78);

  --mk-ok:      #2FD180;
  --mk-warn:    #F0B25B;
  --mk-danger:  #FF6B6B;

  /* Channel colours -- the one place a non-brand hue is expected. */
  --mk-fb:  #4C9BFF;
  --mk-ig:  #E169B4;
  --mk-wa:  #2FD180;
  --mk-web: #C3C9E0;

  --mk-r-sm: 8px;
  --mk-r:    14px;
  --mk-r-lg: 22px;
  --mk-r-pill: 999px;

  --mk-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --mk-shadow:    0 8px 30px -12px rgba(0,0,0,.55);
  --mk-shadow-lg: 0 30px 80px -30px rgba(0,0,0,.7);
  --mk-ring: 0 0 0 3px var(--mk-primary-100);
  --mk-glow: 0 0 60px -12px rgba(34,196,141,.5);
  --mk-glow-violet: 0 0 60px -14px rgba(47,224,198,.42);

  --mk-t-display: clamp(2.15rem, 1.35rem + 3.2vw, 3.85rem);
  --mk-t-h1:      clamp(2.0rem, 1.4rem + 2.3vw, 3.05rem);
  --mk-t-h2:      clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem);
  --mk-t-h3:      clamp(1.08rem, 1.00rem + 0.3vw, 1.25rem);
  --mk-t-lead:    clamp(1.05rem, 0.98rem + 0.35vw, 1.24rem);
  --mk-t-body:    1rem;
  --mk-t-sm:      0.9125rem;
  --mk-t-xs:      0.8125rem;

  --mk-sp: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  --mk-gut: clamp(1.15rem, 0.7rem + 1.6vw, 2rem);
  --mk-max: 1200px;

  /* Space Grotesk carries the "engine" personality on headlines only --
     geometric, technical, a little mechanical. Plus Jakarta Sans stays on
     every body/UI string so long-form copy doesn't inherit that edge. */
  --mk-sans:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;
  --mk-display: "Space Grotesk", var(--mk-sans);
  --mk-mono:    ui-monospace, "SF Mono", Consolas, monospace;

  --mk-header-h: 72px;
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.mk {
  margin: 0;
  font-family: var(--mk-sans);
  font-size: var(--mk-t-body);
  line-height: 1.6;
  color: var(--mk-ink);
  background: var(--mk-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* One soft field of colour behind the whole page rather than a hard-edged
   gradient box: two large, low-opacity radial washes fixed to the viewport
   so they read as ambient light, not decoration bolted onto one section. */
body.mk::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 38% at 82% -6%, rgba(34,196,141,.18) 0%, transparent 70%),
    radial-gradient(46% 34% at 8% 18%, rgba(47,224,198,.09) 0%, transparent 70%);
}
.mk-header, .mk main, .mk-footer { position: relative; z-index: 1; }

.mk h1, .mk h2, .mk h3, .mk h4 {
  margin: 0;
  font-family: var(--mk-display);
  line-height: 1.14;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--mk-ink);
  text-wrap: balance;
}
.mk p { margin: 0; text-wrap: pretty; }
.mk img, .mk svg { max-width: 100%; }
.mk img { height: auto; }

.mk a { text-decoration: none; }
.mk a:where(:not(.mk-btn)) { color: var(--mk-primary-400); }
.mk a:where(:not(.mk-btn)):hover { text-decoration: underline; }
.mk ul { margin: 0; padding: 0; list-style: none; }

.mk :focus-visible {
  outline: 2px solid var(--mk-primary);
  outline-offset: 2px;
  border-radius: var(--mk-r-sm);
}

.mk-skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--mk-primary); color: #fff;
  padding: 10px 16px; border-radius: var(--mk-r-sm); font-weight: 600;
  transition: top .15s ease;
}
.mk-skip:focus { top: 12px; text-decoration: none; }

.mk-wrap {
  width: 100%; max-width: var(--mk-max);
  margin-inline: auto;
  padding-inline: var(--mk-gut);
}
.mk-section { padding-block: var(--mk-sp); }
.mk-section--tint { background: var(--mk-surface); }
.mk-section--edge { border-block: 1px solid var(--mk-line); }
.mk-section--pad-sm { padding-block: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); }

.mk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
         overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------- shared components */
.mk-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mk-mono);
  font-size: var(--mk-t-xs); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--mk-primary-400);
  margin-bottom: 14px;
}
.mk-eyebrow::before {
  content: ""; width: 16px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--mk-primary), var(--mk-cyan));
}
.mk-head--center .mk-eyebrow::before { display: none; }

.mk-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); }
.mk-head--center { margin-inline: auto; text-align: center; }
.mk-head h2 { font-size: var(--mk-t-h1); }
.mk-head p { margin-top: 14px; font-size: var(--mk-t-lead); color: var(--mk-ink-2); }
.mk-h2 { font-size: var(--mk-t-h2) !important; margin-bottom: 16px; }
.mk-lead-text { font-size: var(--mk-t-lead); color: var(--mk-ink-2); margin-top: 4px; }

.mk-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 7px; margin-bottom: 22px;
  border-radius: var(--mk-r-pill);
  background: var(--mk-surface-2); border: 1px solid var(--mk-line-2);
  font-size: var(--mk-t-xs); color: var(--mk-ink-2); font-weight: 550;
}
.mk-badge b {
  background: linear-gradient(120deg, var(--mk-primary), var(--mk-violet));
  color: #fff; font-weight: 650;
  padding: 3px 9px; border-radius: var(--mk-r-pill); font-size: 11px;
}

.mk-note {
  font-size: var(--mk-t-sm); color: var(--mk-ink-2);
  background: var(--mk-surface-2); border: 1px dashed var(--mk-line-2);
  border-radius: var(--mk-r); padding: 16px 20px;
}
.mk-note b { color: var(--mk-ink); }
.mk-inline-link { color: var(--mk-primary-400); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; }
.mk-inline-link:hover { color: var(--mk-primary-400); }

.mk-checklist { display: grid; gap: 12px; margin-top: 26px; }
.mk-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--mk-t-sm); color: var(--mk-ink-2); }
.mk-checklist svg { margin-top: 3px; flex: none; color: var(--mk-primary-400); }
.mk-checklist b { color: var(--mk-ink); }

.mk-mt-24 { margin-top: 24px; }
.mk-mt-26 { margin-top: 26px; }
.mk-mt-28 { margin-top: 28px; }
.mk-mt-48 { margin-top: 48px; }
.mk-mt-64 { margin-top: 64px; }

/* --------------------------------------------------------------- buttons */
.mk-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mk-sans); font-weight: 650; font-size: var(--mk-t-sm);
  padding: 12px 20px; border-radius: var(--mk-r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease,
              background-color .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.mk-btn--lg { padding: 14px 26px; font-size: 1rem; }
.mk-btn--sm { padding: 9px 16px; font-size: var(--mk-t-xs); }
.mk-btn--primary {
  background: linear-gradient(120deg, var(--mk-primary), var(--mk-primary-600));
  color: #fff; box-shadow: 0 10px 30px -12px rgba(34,196,141,.55);
}
.mk-btn--primary:hover { transform: translate3d(0,-2px,0); box-shadow: 0 16px 36px -12px rgba(34,196,141,.68); }
.mk-btn--ghost { background: var(--mk-surface-2); color: var(--mk-ink); border-color: var(--mk-line-2); }
.mk-btn--ghost:hover { background: var(--mk-surface-3); border-color: var(--mk-primary-400); }
.mk-btn--onbrand { background: #fff; color: var(--mk-primary-700); }
.mk-btn--onbrand:hover { transform: translate3d(0,-2px,0); box-shadow: 0 16px 36px -14px rgba(0,0,0,.4); }
.mk-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.mk-btn--outline-light:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.mk-btn svg { transition: transform .2s ease; flex: none; }
.mk-btn--primary:hover svg, .mk-btn--onbrand:hover svg { transform: translate3d(3px,0,0); }

/* ---------------------------------------------------------------- header */
.mk-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--mk-header-bg);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mk-header { backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
}
.mk-header.is-stuck { border-bottom-color: var(--mk-line); box-shadow: 0 1px 30px -12px rgba(0,0,0,.6); }
.mk-header__inner { height: var(--mk-header-h); display: flex; align-items: center; gap: 20px; }
.mk-header__logo { flex: none; }

/* `.mk a:where(:not(.mk-btn)):hover` (0,2,1) outranks a bare
   `.mk-brand-lockup:hover` (0,2,0), so the generic link underline was
   winning here -- invisible while the lockup was an <img> with no text,
   real once the wordmark became text. Qualifying with the ancestor lifts
   this past it. */
.mk-header .mk-brand-lockup:hover,
.mk-footer .mk-brand-lockup:hover {
  text-decoration: none;
}

/* Mark + real text, not a raster lockup: "ChatAi" and "Engine" need
   independent colour, which only works when the wordmark is text. Shared by
   the header and the footer -- see marketing-logo-motion.css, which targets
   this same class for the entrance/idle/hover animation. */
.mk-brand-lockup {
  display: flex; align-items: center; gap: 10px; flex: none;
  position: relative; isolation: isolate;
}
.mk-brand-lockup .brandmark { display: block; flex: none; }
.mk-wordmark {
  font-family: var(--mk-display); font-weight: 700; font-size: 1.2rem;
  letter-spacing: -0.01em; white-space: nowrap;
}
.mk-wordmark__ink { color: var(--mk-ink); }
.mk-wordmark__brand { color: var(--mk-brand); }

.mk-nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.mk-nav a {
  color: var(--mk-ink-2); font-size: var(--mk-t-sm); font-weight: 550;
  padding: 9px 13px; border-radius: var(--mk-r-sm);
  transition: color .15s ease, background-color .15s ease;
}
.mk-nav a:hover { color: var(--mk-ink); background: var(--mk-surface-2); text-decoration: none; }

.mk-header__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.mk-header__login { color: var(--mk-ink) !important; }

.mk-burger {
  display: none; position: relative; flex: none; width: 40px; height: 40px;
  border-radius: var(--mk-r-sm); border: 1px solid var(--mk-line-2);
  background: var(--mk-surface-2); color: var(--mk-ink); cursor: pointer;
  align-items: center; justify-content: center;
}
.mk-burger__x { display: none; }
.mk-burger[aria-expanded="true"] .mk-burger__bars { display: none; }
.mk-burger[aria-expanded="true"] .mk-burger__x { display: block; }
.mk-burger svg { width: 20px; height: 20px; }

.mk-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--mk-primary), var(--mk-cyan));
  transform: scaleX(var(--mk-scroll, 0)); transform-origin: left; pointer-events: none;
}

.mk-drawer {
  position: fixed; inset: var(--mk-header-h) 0 0 0; z-index: 55;
  background: var(--mk-bg); padding: 20px var(--mk-gut) 32px; overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}
.mk-drawer.is-open {
  transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform .2s ease, opacity .2s ease, visibility 0s linear;
}
@media (prefers-reduced-motion: reduce) { .mk-drawer { transition: opacity .15s ease, visibility 0s linear .15s; } }
.mk-drawer__link {
  display: block; padding: 16px 4px; font-size: 1.1rem; font-weight: 600;
  color: var(--mk-ink); border-bottom: 1px solid var(--mk-line);
}
.mk-drawer__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.mk-drawer__cta .mk-btn { width: 100%; }

@media (max-width: 940px) {
  .mk-nav { display: none; }
  .mk-burger { display: inline-flex; }
  .mk-drawer { display: block; }
  .mk-header__login { display: none; }
}

/* ----------------------------------------------------------------- hero */
.mk-hero { position: relative; padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); }
.mk-hero__grid {
  display: grid; align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
}
.mk-hero h1 {
  font-size: var(--mk-t-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.06;
  max-width: 20ch;
}
.mk-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--mk-primary-400), var(--mk-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mk-hero__lead { margin-top: 22px; font-size: var(--mk-t-lead); color: var(--mk-ink-2); max-width: 34rem; line-height: 1.6; }
.mk-hero__btns { margin-top: 30px; }
.mk-hero__note { margin-top: 20px; font-size: var(--mk-t-xs); color: var(--mk-faint); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-hero__note svg { color: var(--mk-ok); flex: none; }

/* --------------------------------------------------------- the hero card
   One square panel, one facet of the engine at a time -- its own
   illustration, its own colour -- crossfading to the next on a loop, the
   way a showcase card works rather than a wiring diagram. The slide list
   is data-driven (see the $heroSlides loop in landing.php, currently 27
   illustrations) so the count can change freely; the per-cycle keyframe
   percentages and each slide's animation-duration/animation-delay are
   computed in PHP from however many slides actually exist and written as
   inline styles, rather than being hand-tuned CSS for a fixed slide count. */
.mk-herocard-wrap { position: relative; }
.mk-herocard-wrap::before {
  content: ""; position: absolute; inset: -10%; z-index: -1; filter: blur(10px);
  background: radial-gradient(60% 60% at 50% 45%, var(--mk-primary-50), transparent 72%);
}
.mk-herocard {
  position: relative; aspect-ratio: 1 / 1.02; max-width: 440px; margin-inline: auto;
  border-radius: 30px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--mk-line-2); box-shadow: var(--mk-shadow-lg);
  background: var(--mk-surface-2);
}
.mk-herocard__slide { position: absolute; inset: 0; opacity: 0; }

/* All slides are the client's own source photography (website image/),
   used at their original colour, sized and cropped identically (object-fit:
   cover, centred) so the set reads as one consistent series. A slow
   continuous zoom (mkHeroZoom) never resets while a slide is visible -- it
   only snaps back to 1x during the invisible portion of its own loop, so
   the jump is never seen. */
.mk-herocard .mk-herocard__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
/* The BI photo's chart cluster sits in its top half, with a lot of empty
   background below -- centring the crop cut the top charts off AND left
   that empty band showing near the caption, so this one crops from the
   top instead, keeping the full cluster in frame with nothing dead below
   it. */
.mk-herocard__slide--hero-bi .mk-herocard__photo { object-position: 50% 0%; }
.mk-herocard__scrim {
  position: absolute; inset: auto 0 0 0; height: 48%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(4,12,9,.82) 82%);
}
.mk-herocard__tag {
  position: absolute; left: 26px; right: 26px; bottom: 68px;
  font-size: var(--mk-t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mk-primary-400);
}
.mk-herocard__title {
  position: absolute; left: 26px; right: 26px; bottom: 34px;
  font-family: var(--mk-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
/* Timing for a 27-slide loop, one slide (`.mk-herocard__slide`, in
   landing.php's $heroSlides order) at a time, `step` = 4.2s each:
     loop duration = count * step = 27 * 4.2 = 113.4s
     nth-child(i) animation-delay = (i - 1) * step
     keyframe fade-in-done  % = (1 / count) * 0.24 * 100 = 0.889%
     keyframe fade-out-start% = (1 / count) * 0.82 * 100 = 3.037%
     keyframe fully-off     % = (1 / count) * 100        = 3.704%
   These are static, not computed per-request, because this app's CSP is
   `style-src 'self'` with no `unsafe-inline` -- an inline `style=""` or a
   view-rendered `<style>` block is silently dropped by the browser (see
   the note beside $heroSlides in landing.php, and avatar()/swatch_class()
   in helpers.php for the same constraint elsewhere). If the slide count in
   landing.php ever changes, re-run the formula above and regenerate the
   :nth-child rules below to match. */
@media (prefers-reduced-motion: no-preference) {
  .mk-herocard__slide { animation: mkHeroCycle 113.4s infinite; }
  .mk-herocard__photo { animation: mkHeroZoom 113.4s ease-in-out infinite; transform-origin: 50% 40%; }
  .mk-herocard__slide:nth-child(1), .mk-herocard__slide:nth-child(1) .mk-herocard__photo { animation-delay: 0s; }
  .mk-herocard__slide:nth-child(2), .mk-herocard__slide:nth-child(2) .mk-herocard__photo { animation-delay: 4.2s; }
  .mk-herocard__slide:nth-child(3), .mk-herocard__slide:nth-child(3) .mk-herocard__photo { animation-delay: 8.4s; }
  .mk-herocard__slide:nth-child(4), .mk-herocard__slide:nth-child(4) .mk-herocard__photo { animation-delay: 12.6s; }
  .mk-herocard__slide:nth-child(5), .mk-herocard__slide:nth-child(5) .mk-herocard__photo { animation-delay: 16.8s; }
  .mk-herocard__slide:nth-child(6), .mk-herocard__slide:nth-child(6) .mk-herocard__photo { animation-delay: 21s; }
  .mk-herocard__slide:nth-child(7), .mk-herocard__slide:nth-child(7) .mk-herocard__photo { animation-delay: 25.2s; }
  .mk-herocard__slide:nth-child(8), .mk-herocard__slide:nth-child(8) .mk-herocard__photo { animation-delay: 29.4s; }
  .mk-herocard__slide:nth-child(9), .mk-herocard__slide:nth-child(9) .mk-herocard__photo { animation-delay: 33.6s; }
  .mk-herocard__slide:nth-child(10), .mk-herocard__slide:nth-child(10) .mk-herocard__photo { animation-delay: 37.8s; }
  .mk-herocard__slide:nth-child(11), .mk-herocard__slide:nth-child(11) .mk-herocard__photo { animation-delay: 42s; }
  .mk-herocard__slide:nth-child(12), .mk-herocard__slide:nth-child(12) .mk-herocard__photo { animation-delay: 46.2s; }
  .mk-herocard__slide:nth-child(13), .mk-herocard__slide:nth-child(13) .mk-herocard__photo { animation-delay: 50.4s; }
  .mk-herocard__slide:nth-child(14), .mk-herocard__slide:nth-child(14) .mk-herocard__photo { animation-delay: 54.6s; }
  .mk-herocard__slide:nth-child(15), .mk-herocard__slide:nth-child(15) .mk-herocard__photo { animation-delay: 58.8s; }
  .mk-herocard__slide:nth-child(16), .mk-herocard__slide:nth-child(16) .mk-herocard__photo { animation-delay: 63s; }
  .mk-herocard__slide:nth-child(17), .mk-herocard__slide:nth-child(17) .mk-herocard__photo { animation-delay: 67.2s; }
  .mk-herocard__slide:nth-child(18), .mk-herocard__slide:nth-child(18) .mk-herocard__photo { animation-delay: 71.4s; }
  .mk-herocard__slide:nth-child(19), .mk-herocard__slide:nth-child(19) .mk-herocard__photo { animation-delay: 75.6s; }
  .mk-herocard__slide:nth-child(20), .mk-herocard__slide:nth-child(20) .mk-herocard__photo { animation-delay: 79.8s; }
  .mk-herocard__slide:nth-child(21), .mk-herocard__slide:nth-child(21) .mk-herocard__photo { animation-delay: 84s; }
  .mk-herocard__slide:nth-child(22), .mk-herocard__slide:nth-child(22) .mk-herocard__photo { animation-delay: 88.2s; }
  .mk-herocard__slide:nth-child(23), .mk-herocard__slide:nth-child(23) .mk-herocard__photo { animation-delay: 92.4s; }
  .mk-herocard__slide:nth-child(24), .mk-herocard__slide:nth-child(24) .mk-herocard__photo { animation-delay: 96.6s; }
  .mk-herocard__slide:nth-child(25), .mk-herocard__slide:nth-child(25) .mk-herocard__photo { animation-delay: 100.8s; }
  .mk-herocard__slide:nth-child(26), .mk-herocard__slide:nth-child(26) .mk-herocard__photo { animation-delay: 105s; }
  .mk-herocard__slide:nth-child(27), .mk-herocard__slide:nth-child(27) .mk-herocard__photo { animation-delay: 109.2s; }
}
@keyframes mkHeroCycle {
  0%      { opacity: 0; }
  0.889%  { opacity: 1; }
  3.037%  { opacity: 1; }
  3.704%, 100% { opacity: 0; }
}
@keyframes mkHeroZoom { from { transform: scale(1); } to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .mk-herocard__slide { opacity: 0 !important; animation: none !important; }
  .mk-herocard__slide:first-child { opacity: 1 !important; }
  .mk-herocard__photo { animation: none !important; transform: none !important; }
}

/* --------------------------------------------------------------- channels */
.mk-ribbon__label { text-align: center; font-size: var(--mk-t-xs); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mk-faint); margin-bottom: 22px; }
.mk-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mk-marquee__track { display: flex; gap: 12px; width: max-content; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .mk-marquee__track.is-running { animation: mkMarquee var(--mk-marquee-dur, 26s) linear infinite; }
}
@keyframes mkMarquee { to { transform: translateX(-50%); } }
.mk-ribbon__item {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 11px 20px; border-radius: var(--mk-r-pill);
  background: var(--mk-surface-2); border: 1px solid var(--mk-line);
  font-size: var(--mk-t-sm); font-weight: 600; color: var(--mk-ink-2);
}
.mk-ribbon__item svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ grid */
.mk-grid { display: grid; gap: clamp(1rem, .7rem + 1vw, 1.5rem); }
.mk-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.mk-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mk-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.mk-split { display: grid; align-items: center; gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); }
.mk-split--flip > :first-child { order: 2; }

/* ----------------------------------------------------------------- cards */
.mk-card {
  background: var(--mk-surface-2); border: 1px solid var(--mk-line);
  border-radius: var(--mk-r); padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  height: 100%; transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.mk-card:hover { transform: translate3d(0,-3px,0); box-shadow: var(--mk-shadow); border-color: var(--mk-primary-400); }
.mk-card h3 { font-size: var(--mk-t-h3); margin-bottom: 8px; }
.mk-card p { color: var(--mk-ink-2); font-size: var(--mk-t-sm); }

.mk-ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--mk-primary-100); color: var(--mk-primary-400);
  flex: none;
}
.mk-ico svg { width: 21px; height: 21px; }
.mk-card:hover .mk-ico { transform: scale(1.06); }
.mk-ico { transition: transform .28s cubic-bezier(.22,1.2,.4,1); }

/* ------------------------------------------------- solution feature cards
   Icon badge + status pill up top, a title, a description, and the
   concrete bullets that back it up -- scannable like a real product's
   solutions page, not an illustrated poster. One consistent accent colour
   across all four cards (icon, pill border tint, bullet dots), matching
   the reference layout, rather than a different hue per card. */
.mk-featuregrid { align-items: stretch; }
.mk-feature {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--mk-surface-2); border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-lg); padding: 24px 22px 26px;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease;
}
.mk-feature:hover {
  text-decoration: none; transform: translate3d(0,-5px,0);
  box-shadow: var(--mk-shadow-lg); border-color: var(--mk-primary-400);
}
.mk-feature--ghost { border-style: dashed; border-color: var(--mk-line-2); }
.mk-feature--ghost:hover { border-color: var(--mk-primary-400); transform: translate3d(0,-3px,0); box-shadow: none; }

.mk-feature__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.mk-feature__icon {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; position: relative;
  background: var(--mk-primary-100); color: var(--mk-primary-400);
  transition: transform .32s cubic-bezier(.22,1.2,.4,1);
}
.mk-feature__icon svg { width: 19px; height: 19px; }
.mk-feature:hover .mk-feature__icon { transform: scale(1.08) rotate(-4deg); }
/* A quiet always-on pulse behind the icon, the same "signal" language as
   the header logo's own breathing glow, so the grid doesn't feel static
   even before anyone hovers it. */
.mk-feature__icon::before {
  content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 15px;
  background: var(--mk-primary-100); opacity: 0;
}
.mk-feature__badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--mk-ink-2); background: var(--mk-surface-3); border: 1px solid var(--mk-line-2);
  border-radius: var(--mk-r-pill); padding: 5px 11px; flex: none; margin-top: 2px;
}
.mk-feature__title { font-size: var(--mk-t-h3); margin-bottom: 8px; }
.mk-feature__desc { color: var(--mk-ink-2); font-size: var(--mk-t-sm); margin-bottom: 16px; }
.mk-feature--ghost .mk-feature__desc { flex: 1; }
.mk-feature__list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mk-feature__list li {
  position: relative; padding-left: 18px; font-size: var(--mk-t-sm); color: var(--mk-ink-2);
  opacity: 0; transform: translateX(-6px);
}
.mk-feature__list li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--mk-primary-400);
}
.js .mk-reveal--box.is-in .mk-feature__list li {
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.js .mk-reveal--box.is-in .mk-feature__list li:nth-child(1) { transition-delay: .12s; }
.js .mk-reveal--box.is-in .mk-feature__list li:nth-child(2) { transition-delay: .22s; }
.js .mk-reveal--box.is-in .mk-feature__list li:nth-child(3) { transition-delay: .32s; }
.js .mk-reveal--box.is-in .mk-feature__list li { opacity: 1; transform: none; }
.mk-feature__cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
  font-size: var(--mk-t-sm); font-weight: 650; color: var(--mk-primary-400); text-decoration: none;
}
.mk-feature__cta svg { transition: transform .22s cubic-bezier(.22,.61,.36,1); }
.mk-feature__cta:hover svg { transform: translate3d(3px,0,0); }

/* A wider entrance than the default .mk-reveal -- these four should read
   as arriving one after another, not fading in as a group. */
.js .mk-reveal--box { transform: translateY(34px) scale(.98); }
.js .mk-reveal--box.is-in { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .mk-feature__icon::before { animation: mkFeatureIconPulse 4.5s ease-in-out infinite; }
  .mk-feature:nth-child(2) .mk-feature__icon::before { animation-delay: .3s; }
  .mk-feature:nth-child(3) .mk-feature__icon::before { animation-delay: .6s; }
}
@keyframes mkFeatureIconPulse {
  0%, 100% { opacity: 0; transform: scale(.85); }
  50%      { opacity: .55; transform: scale(1.15); }
}

/* -------------------------------------------------------------- premium
   inbox mock. Built from real markup, not a screenshot, so it can carry
   the AI/human colour rule (blue = automated, white/neutral = human) and
   replay itself via marketing.js. */
.mk-mock {
  background: var(--mk-surface-2); border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-lg); overflow: hidden; box-shadow: var(--mk-shadow-lg);
}
.mk-mock--tilt { transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg); }
.mk-mock--float { animation: mkFloat 7s ease-in-out infinite; }
@keyframes mkFloat { 0%,100% { transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg) translateY(0); }
  50% { transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg) translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .mk-mock--float { animation: none; } .mk-mock--tilt { transform: none; } }

.mk-mock__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--mk-surface-3); border-bottom: 1px solid var(--mk-line); }
.mk-mock__dots { display: flex; gap: 6px; }
.mk-mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--mk-line-2); display: block; }
.mk-mock__title { font-size: var(--mk-t-xs); color: var(--mk-muted); font-weight: 600; }

.mk-sound-toggle {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--mk-muted); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.mk-sound-toggle:hover { background: var(--mk-surface); color: var(--mk-ink-2); }
.mk-sound-toggle svg { width: 15px; height: 15px; }
.mk-sound-toggle__off { display: none; }
.mk-sound-toggle[aria-pressed="false"] .mk-sound-toggle__on { display: none; }
.mk-sound-toggle[aria-pressed="false"] .mk-sound-toggle__off { display: block; }

/* three-pane inbox: channel rail, thread list, conversation + customer panel */
.mk-inbox { display: grid; grid-template-columns: 56px 220px minmax(0,1fr) 200px; min-height: 420px; }
.mk-inbox__rail { border-right: 1px solid var(--mk-line); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mk-inbox__railBtn { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--mk-muted); }
.mk-inbox__railBtn.is-on { background: var(--mk-primary-100); color: var(--mk-primary-400); }
.mk-inbox__railBtn svg { width: 17px; height: 17px; }

.mk-inbox__list { border-right: 1px solid var(--mk-line); overflow: hidden; }
.mk-inbox__filter { display: flex; gap: 6px; padding: 12px; border-bottom: 1px solid var(--mk-line); }
.mk-inbox__filter span { font-size: 11.5px; font-weight: 650; color: var(--mk-muted); padding: 5px 10px; border-radius: var(--mk-r-pill); }
.mk-inbox__filter span.is-on { background: var(--mk-primary-100); color: var(--mk-primary-400); }

.mk-thread { display: flex; gap: 10px; padding: 12px; border-bottom: 1px solid var(--mk-line); position: relative; }
.mk-thread.is-active { background: var(--mk-surface-3); }
.mk-thread.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2.5px; background: var(--mk-primary); }
.mk-thread__av {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--mk-primary), var(--mk-violet));
}
.mk-thread__av--ig { background: linear-gradient(135deg, #E169B4, #F7A34B); }
.mk-thread__av--wa { background: linear-gradient(135deg, #2FD180, #1AA25E); }
.mk-thread__av--web { background: linear-gradient(135deg, #6B7BAE, #454F72); }
.mk-thread__meta { min-width: 0; flex: 1; }
.mk-thread__name { display: flex; align-items: center; gap: 6px; font-size: var(--mk-t-sm); font-weight: 650; color: var(--mk-ink); }
.mk-thread__snip { display: block; font-size: 12.5px; color: var(--mk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mk-thread__unread { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--mk-primary); flex: none; }

.mk-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 650;
  padding: 2px 7px 2px 5px; border-radius: var(--mk-r-pill); color: #fff; flex: none;
}
.mk-chip svg { width: 11px; height: 11px; }
.mk-chip--fb { background: #1877F2; }
.mk-chip--ig { background: linear-gradient(135deg,#F58529,#DD2A7B,#8134AF); }
.mk-chip--wa { background: #25A566; }
.mk-chip--web { background: var(--mk-surface-3); color: var(--mk-ink-2); border: 1px solid var(--mk-line-2); }

.mk-inbox__pane { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--mk-line); }
.mk-inbox__paneTop { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--mk-line); }
.mk-inbox__who { font-weight: 650; font-size: var(--mk-t-sm); }
.mk-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650;
  padding: 5px 10px; border-radius: var(--mk-r-pill); background: var(--mk-primary-100); color: var(--mk-primary-400); }
.mk-toggle::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mk-primary); }
.mk-toggle.is-human { background: var(--mk-surface-3); color: var(--mk-ink-2); }
.mk-toggle.is-human::before { background: var(--mk-muted); }

.mk-inbox__msgs { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.mk-chat { display: flex; flex-direction: column; gap: 10px; }
.mk-bub {
  max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5;
  opacity: 0; transform: translateY(6px); transition: opacity .32s ease, transform .32s ease;
}
.mk-bub.is-shown { opacity: 1; transform: translateY(0); }
.mk-bub--in { align-self: flex-start; background: var(--mk-surface-3); color: var(--mk-ink); border-bottom-left-radius: 4px; }
.mk-bub--ai { align-self: flex-end; background: linear-gradient(120deg, var(--mk-primary), var(--mk-primary-600)); color: #fff; border-bottom-right-radius: 4px; }
.mk-bub--human { align-self: flex-end; background: var(--mk-surface-3); color: var(--mk-ink); border: 1px solid var(--mk-line-2); border-bottom-right-radius: 4px; }
.mk-bub__by { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .8; margin-bottom: 3px; }

.mk-typing { display: none; align-self: flex-end; gap: 4px; padding: 10px 13px; border-radius: 14px; background: var(--mk-surface-3); }
.mk-typing.is-shown { display: inline-flex; }
.mk-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--mk-muted); animation: mkTyping 1.1s ease-in-out infinite; }
.mk-typing i:nth-child(2) { animation-delay: .15s; } .mk-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mkTyping { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.mk-inbox__customer { padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; }
.mk-cust__av { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center;
  font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--mk-primary), var(--mk-violet)); }
.mk-cust__name { text-align: center; font-weight: 650; font-size: var(--mk-t-sm); margin-top: 8px; }
.mk-cust__status { text-align: center; font-size: 11px; color: var(--mk-ok); font-weight: 600; }
.mk-cust__field { display: flex; flex-direction: column; gap: 3px; }
.mk-cust__field span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--mk-faint); font-weight: 650; }
.mk-cust__field b { font-size: 12.5px; color: var(--mk-ink-2); font-weight: 550; }

@media (max-width: 900px) {
  .mk-inbox { grid-template-columns: 1fr; min-height: 0; }
  .mk-inbox__rail, .mk-inbox__list, .mk-inbox__customer { display: none; }
}

/* --------------------------------------------------------------- steps */
.mk-steps { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); grid-template-columns: repeat(4, minmax(0,1fr)); }
.mk-step { position: relative; padding-top: 6px; }
.mk-step__n {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(135deg, var(--mk-primary-100), transparent); border: 1px solid var(--mk-line-2);
  color: var(--mk-primary-400); font-family: var(--mk-mono); font-weight: 700; margin-bottom: 18px;
}
.mk-step:nth-child(1) .mk-step__n::before { content: "01"; }
.mk-step:nth-child(2) .mk-step__n::before { content: "02"; }
.mk-step:nth-child(3) .mk-step__n::before { content: "03"; }
.mk-step:nth-child(4) .mk-step__n::before { content: "04"; }
.mk-step h3 { font-size: var(--mk-t-h3); margin-bottom: 8px; }
.mk-step p { color: var(--mk-ink-2); font-size: var(--mk-t-sm); }
@media (max-width: 900px) { .mk-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .mk-steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- demo form */
.mk-alert { padding: 12px 16px; border-radius: var(--mk-r-sm); margin-bottom: 18px; font-size: var(--mk-t-sm); font-weight: 550; }
.mk-alert--success { background: rgba(47,209,128,.12); color: #6EEBB0; border: 1px solid rgba(47,209,128,.3); }
.mk-alert--error { background: rgba(255,107,107,.12); color: #FF9B9B; border: 1px solid rgba(255,107,107,.3); }

/* No card chrome of its own any more -- the form now lives inside
   .mk-demo-dialog's panel, which is the card, so a second background/
   border/shadow here would nest one card inside another. */
.mk-demo-form { display: flex; flex-direction: column; gap: 13px; position: relative; }
/* marketing.js sets form.hidden = true on a successful submit (swapping in
   .mk-demo-form__success below) -- without this, the unconditional
   display:flex above outranks the browser's own [hidden]{display:none}
   default (author styles beat the UA stylesheet regardless of matching
   specificity), so the form never actually disappeared and looked like the
   submission silently did nothing. */
.mk-demo-form[hidden] { display: none; }
.mk-field { display: flex; flex-direction: column; gap: 5px; position: relative; z-index: 1; }
.mk-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.mk-field label { font-size: var(--mk-t-sm); font-weight: 650; color: var(--mk-ink); }
.mk-field__opt { font-weight: 500; color: var(--mk-muted); }
.mk-field input, .mk-field select {
  font: inherit; font-size: var(--mk-t-body); color: var(--mk-ink);
  background: var(--mk-surface-3); border: 1px solid var(--mk-line-2); border-radius: var(--mk-r-sm);
  padding: 10px 13px; transition: border-color .15s ease, box-shadow .15s ease; width: 100%; appearance: none;
}
.mk-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238891B0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; padding-right: 36px;
}
.mk-field input:focus, .mk-field select:focus { outline: none; border-color: var(--mk-primary); box-shadow: var(--mk-ring); }
.mk-field input::placeholder { color: var(--mk-faint); }
.mk-field__err { font-size: var(--mk-t-xs); color: #FF9B9B; font-weight: 550; }

/* Country-code + number, side by side as one compound control. The select
   only ever needs to show "🇧🇩 +880", so it gets a fixed, narrower width
   instead of stretching to fill like every other .mk-field select. */
.mk-phone-field { display: flex; gap: 8px; }
.mk-phone-field__country { flex: 0 0 104px; width: 104px; padding-right: 28px !important; text-align: center; }
.mk-phone-field input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 360px) { .mk-phone-field__country { flex-basis: 88px; width: 88px; } }
.mk-demo-form__submit { justify-content: center; margin-top: 6px; position: relative; z-index: 1; }

/* ---------------------------------------------------- demo request success
   The one moment in this form that earns a flourish (same reasoning as the
   signup welcome page's own `celebrate` flag) -- it happens at most once per
   visitor, right after they've committed to something. Confetti + a bouncing
   check carry the "crazy/fun" ask; the copy and 3-step list underneath carry
   the actual substance, so it reads as a real answer, not just a sticker. */
.mk-demo-form__success { text-align: center; padding: .5rem 0 .25rem; position: relative; }
.mk-demo-form__successIco {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 999px;
  background: rgba(47,209,128,.14); color: #6EEBB0; margin-bottom: 16px; position: relative;
}
.mk-demo-form__successIco svg { width: 26px; height: 26px; }
.mk-demo-form__success h3 { font-size: var(--mk-t-h3); margin-bottom: 10px; }
.mk-demo-form__successLead { color: var(--mk-ink-2); max-width: 38ch; margin: 0 auto 22px; }

.mk-demo-form__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.mk-demo-form__steps li { display: flex; gap: 12px; align-items: flex-start; }
.mk-demo-form__stepNum {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: var(--mk-surface-3); border: 1px solid var(--mk-line-2); color: var(--mk-primary-400);
  font-size: 12px; font-weight: 700; margin-top: 1px;
}
.mk-demo-form__steps strong { color: var(--mk-ink); }
.mk-demo-form__steps div { font-size: var(--mk-t-sm); color: var(--mk-ink-2); }

@media (prefers-reduced-motion: no-preference) {
  .mk-demo-form__successIco {
    animation: mk-check-pop .5s cubic-bezier(.22,1.4,.36,1) both;
    box-shadow: 0 0 0 0 rgba(47,209,128,.45);
  }
  .mk-demo-form__successIco::after {
    content: ''; position: absolute; inset: 0; border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(47,209,128,.45); animation: mk-check-ring .9s ease-out .15s both;
  }
  @keyframes mk-check-pop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
  }
  @keyframes mk-check-ring {
    0%   { box-shadow: 0 0 0 0 rgba(47,209,128,.45); }
    100% { box-shadow: 0 0 0 18px rgba(47,209,128,0); }
  }
  .mk-demo-form__success h3,
  .mk-demo-form__successLead,
  .mk-demo-form__steps { animation: mk-rise-in .5s ease both; }
  .mk-demo-form__success h3 { animation-delay: .08s; }
  .mk-demo-form__successLead { animation-delay: .16s; }
  .mk-demo-form__steps { animation-delay: .24s; }
  @keyframes mk-rise-in {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

/* Confetti: 16 small pieces, positioned at dead centre and thrown outward on
   an individually-angled, individually-timed arc via nth-child so the burst
   doesn't read as one repeating sprite. Pure CSS, no canvas/library --
   inert until [data-confetti].is-active is added (once, on a real success),
   and never runs at all under reduced motion. */
.mk-confetti { position: absolute; top: 64px; left: 50%; width: 0; height: 0; pointer-events: none; }
.mk-confetti span {
  position: absolute; top: 0; left: 0; width: 7px; height: 10px; opacity: 0;
  background: var(--mk-primary); border-radius: 1px;
}
.mk-confetti.is-active span { animation: mk-confetti-burst .95s cubic-bezier(.15,.7,.3,1) both; }
.mk-confetti span:nth-child(6n+1) { background: var(--mk-primary); }
.mk-confetti span:nth-child(6n+2) { background: var(--mk-primary-400); }
.mk-confetti span:nth-child(6n+3) { background: var(--mk-cyan); }
.mk-confetti span:nth-child(6n+4) { background: var(--mk-violet); }
.mk-confetti span:nth-child(6n+5) { background: var(--mk-warn); }
.mk-confetti span:nth-child(6n+6) { background: var(--mk-fb); }

@keyframes mk-confetti-burst {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)); opacity: 0; }
}
/* Sixteen trajectories, ~22.5deg apart around a ~90px radius, alternating
   spin direction and staggered by a few ms so the burst reads as thrown
   outward rather than one sprite repeated in place. */
.mk-confetti span:nth-child(1)  { --tx: 90px;  --ty: 0px;    --rot: 220deg;  animation-delay: 0s; }
.mk-confetti span:nth-child(2)  { --tx: 83px;  --ty: 34px;   --rot: -200deg; animation-delay: .015s; }
.mk-confetti span:nth-child(3)  { --tx: 64px;  --ty: 64px;   --rot: 240deg;  animation-delay: .03s; }
.mk-confetti span:nth-child(4)  { --tx: 34px;  --ty: 83px;   --rot: -180deg; animation-delay: .045s; }
.mk-confetti span:nth-child(5)  { --tx: 0px;   --ty: 90px;   --rot: 260deg;  animation-delay: .06s; }
.mk-confetti span:nth-child(6)  { --tx: -34px; --ty: 83px;   --rot: -220deg; animation-delay: .075s; }
.mk-confetti span:nth-child(7)  { --tx: -64px; --ty: 64px;   --rot: 200deg;  animation-delay: .09s; }
.mk-confetti span:nth-child(8)  { --tx: -83px; --ty: 34px;   --rot: -240deg; animation-delay: .105s; }
.mk-confetti span:nth-child(9)  { --tx: -90px; --ty: 0px;    --rot: 220deg;  animation-delay: 0s; }
.mk-confetti span:nth-child(10) { --tx: -83px; --ty: -34px;  --rot: -200deg; animation-delay: .015s; }
.mk-confetti span:nth-child(11) { --tx: -64px; --ty: -64px;  --rot: 240deg;  animation-delay: .03s; }
.mk-confetti span:nth-child(12) { --tx: -34px; --ty: -83px;  --rot: -180deg; animation-delay: .045s; }
.mk-confetti span:nth-child(13) { --tx: 0px;   --ty: -90px;  --rot: 260deg;  animation-delay: .06s; }
.mk-confetti span:nth-child(14) { --tx: 34px;  --ty: -83px;  --rot: -220deg; animation-delay: .075s; }
.mk-confetti span:nth-child(15) { --tx: 64px;  --ty: -64px;  --rot: 200deg;  animation-delay: .09s; }
.mk-confetti span:nth-child(16) { --tx: 83px;  --ty: -34px;  --rot: -240deg; animation-delay: .105s; }

/* ---------------------------------------------------------- demo dialog
   Every "Book a demo" link opens this in place (see [data-demo-trigger] in
   marketing.js) instead of scrolling down the page to a section. <dialog>
   supplies the top-layer stacking, focus trap and Escape-to-close; this is
   just the panel's own look plus a soft open/close transition for browsers
   that support @starting-style (Chrome/Edge/Safari; others simply show and
   hide it instantly, which is a perfectly fine fallback for a dialog). */
.mk-demo-dialog {
  position: fixed; inset: 0; margin: auto; z-index: 1;
  /* Wide enough that name/business, email/phone and category/website can
     all sit two-to-a-row -- three compact rows plus the button, rather
     than six stacked fields, is what actually stops this needing its own
     scrollbar on a normal laptop screen. */
  width: min(600px, calc(100vw - 32px));
  max-height: min(92vh, 700px); overflow-y: auto;
  background: var(--mk-surface-2); color: var(--mk-ink);
  border: 1px solid var(--mk-line-2); border-radius: var(--mk-r-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  box-shadow: var(--mk-shadow-lg);
}
.mk-demo-dialog::backdrop { background: rgba(4,10,8,.72); }
.mk-demo-dialog__close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; z-index: 2;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: var(--mk-surface-3); border: 1px solid var(--mk-line-2); color: var(--mk-ink-2);
  transition: background .15s ease, color .15s ease;
}
.mk-demo-dialog__close:hover { background: var(--mk-surface); color: var(--mk-ink); }
.mk-demo-dialog__head { margin-bottom: 14px; padding-right: 34px; }
.mk-demo-dialog__head h2 { font-size: var(--mk-t-h3); margin: 8px 0 6px; }
.mk-demo-dialog__lead { font-size: var(--mk-t-sm); color: var(--mk-ink-2); line-height: 1.5; }

html.mk-scroll-lock { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .mk-demo-dialog {
    transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1),
                overlay .22s ease allow-discrete, display .22s ease allow-discrete;
  }
  .mk-demo-dialog::backdrop {
    transition: background-color .22s ease, overlay .22s ease allow-discrete, display .22s ease allow-discrete;
  }
  @starting-style {
    .mk-demo-dialog[open] { opacity: 0; transform: scale(.96) translateY(10px); }
    .mk-demo-dialog[open]::backdrop { background-color: transparent; }
  }
}
@media (max-width: 560px) {
  .mk-demo-dialog { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}

@media (max-width: 640px) { .mk-field-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------- cta */
.mk-cta {
  padding-block: var(--mk-sp); text-align: center; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, #113D2E 0%, #060F0C 62%);
  border-top: 1px solid var(--mk-line);
}
.mk-cta h2 { font-size: var(--mk-t-h1); max-width: 22ch; margin-inline: auto; }
.mk-cta p { margin-top: 16px; font-size: var(--mk-t-lead); color: var(--mk-ink-2); max-width: 46ch; margin-inline: auto; }
.mk-cta .mk-btns { justify-content: center; margin-top: 30px; }

/* -------------------------------------------------------------------- faq */
.mk-faq { max-width: 760px; margin-inline: auto; border-top: 1px solid var(--mk-line); }
.mk-faq__item { border-bottom: 1px solid var(--mk-line); }
.mk-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0; text-align: left; font: inherit; font-weight: 650; font-size: 1rem; color: var(--mk-ink);
  padding: 20px 4px; cursor: pointer; }
.mk-faq__ico { position: relative; width: 18px; height: 18px; flex: none; }
.mk-faq__ico::before, .mk-faq__ico::after { content: ""; position: absolute; background: var(--mk-primary-400); border-radius: 2px; }
.mk-faq__ico::before { left: 0; top: 8px; width: 18px; height: 2px; }
.mk-faq__ico::after { left: 8px; top: 0; width: 2px; height: 18px; transition: transform .2s ease; }
.mk-faq__item.is-open .mk-faq__ico::after { transform: rotate(90deg); opacity: 0; }
.mk-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.mk-faq__a > div { overflow: hidden; }
.mk-faq__item.is-open .mk-faq__a { grid-template-rows: 1fr; }
.mk-faq__a p { padding: 0 4px 20px; color: var(--mk-ink-2); font-size: var(--mk-t-sm); max-width: 62ch; }

/* ------------------------------------------------------------------ footer */
.mk-footer { border-top: 1px solid var(--mk-line); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; background: var(--mk-surface); }
.mk-footer__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr)); }
.mk-footer__about p { margin-top: 16px; font-size: var(--mk-t-sm); color: var(--mk-muted); max-width: 30ch; }
.mk-footer h4 { font-size: var(--mk-t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--mk-faint); margin-bottom: 16px; font-weight: 650; }
.mk-footer ul { display: flex; flex-direction: column; gap: 11px; }
.mk-footer a { color: var(--mk-ink-2); font-size: var(--mk-t-sm); }
.mk-footer a:hover { color: var(--mk-primary-400); }
.mk-footer__base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: 24px; border-top: 1px solid var(--mk-line);
  font-size: var(--mk-t-xs); color: var(--mk-faint); }
.mk-footer__social { display: flex; gap: 10px; }
.mk-footer__social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  background: var(--mk-surface-2); border: 1px solid var(--mk-line-2); color: var(--mk-ink-2); }
.mk-footer__social a:hover { color: var(--mk-primary-400); border-color: var(--mk-primary-400); }
.mk-footer__social svg { width: 16px; height: 16px; }

/* Contact column: an icon per channel, plus a real label and value, rather
   than a bare link -- a phone number or handle should be scannable without
   reading the underlying href. */
.mk-footer__contact a {
  display: flex; align-items: center; gap: 12px; padding: 6px 0;
  transition: transform .15s ease;
}
.mk-footer__contact a:hover { transform: translate3d(3px,0,0); }
.mk-footer__contactIco {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--mk-surface-3); border: 1px solid var(--mk-line-2);
  transition: background-color .15s ease, border-color .15s ease;
}
.mk-footer__contactIco svg { width: 15px; height: 15px; }
.mk-footer__contactIco--wa { color: #2FD180; }
.mk-footer__contactIco--fb { color: #4C9BFF; }
.mk-footer__contactIco--mail { color: var(--mk-primary-400); }
.mk-footer__contact a:hover .mk-footer__contactIco { border-color: currentColor; background: var(--mk-surface-2); }
.mk-footer__contactText { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mk-footer__contactText b { font-size: var(--mk-t-sm); color: var(--mk-ink); font-weight: 650; }
.mk-footer__contactText span { font-size: 12.5px; color: var(--mk-muted); white-space: nowrap; }
.mk-footer__contact a:hover .mk-footer__contactText b { color: var(--mk-primary-400); }

@media (max-width: 900px) {
  .mk-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mk-footer__about { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .mk-hero__grid, .mk-split { grid-template-columns: minmax(0,1fr); }
  .mk-split--flip > :first-child { order: 0; }
  .mk-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .mk-grid--3, .mk-grid--2, .mk-grid--4 { grid-template-columns: minmax(0,1fr); }
  .mk-btn--lg { width: 100%; }
  .mk-hero__btns { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------------------- scroll reveal
   .js is added by marketing.js; without it every .mk-reveal is fully visible
   so the page never depends on JS to be readable. */
.js .mk-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.js .mk-reveal--scale { transform: translateY(14px) scale(.97); }
.js .mk-reveal--left { transform: translateX(-18px); }
.js .mk-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------- legal pages
   Privacy Policy / Terms / Data Deletion: a narrow, readable prose column
   rather than the wide marketing grid -- these are read start to finish,
   not scanned, so line length matters more than visual drama here. */
.mk-legal { max-width: 46rem; margin-inline: auto; padding-block: var(--mk-sp); }
.mk-legal__updated { color: var(--mk-muted); font-size: var(--mk-t-sm); margin-top: 8px; }
.mk-legal__intro { color: var(--mk-ink-2); font-size: var(--mk-t-lead); margin-top: 18px; line-height: 1.6; }
.mk-legal h2 { font-size: 1.4rem; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--mk-line); }
.mk-legal h2:first-of-type { margin-top: 2.2rem; }
.mk-legal h3 { font-size: 1.05rem; margin-top: 1.6rem; color: var(--mk-ink); }
.mk-legal p { color: var(--mk-ink-2); margin-top: 12px; line-height: 1.75; }
.mk-legal ul, .mk-legal ol { color: var(--mk-ink-2); margin-top: 12px; padding-left: 1.3rem; line-height: 1.75; }
.mk-legal ul { list-style: disc; }
.mk-legal ol { list-style: decimal; }
.mk-legal li + li { margin-top: 6px; }
.mk-legal li::marker { color: var(--mk-primary-400); }
.mk-legal strong { color: var(--mk-ink); font-weight: 600; }
.mk-legal__toc { margin-top: 28px; padding: 18px 20px; background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: var(--mk-r-md, 14px); }
.mk-legal__toc p { margin-top: 0; font-size: var(--mk-t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--mk-muted); font-weight: 600; }
.mk-legal__toc ol { margin-top: 10px; padding-left: 1.2rem; columns: 2; column-gap: 24px; }
.mk-legal__toc li { break-inside: avoid; }
.mk-legal__toc a { color: var(--mk-ink-2); font-size: var(--mk-t-sm); }
.mk-legal__toc a:hover { color: var(--mk-primary-400); }
.mk-legal__contact { margin-top: 14px; padding: 18px 20px; background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: var(--mk-r-md, 14px); }
.mk-legal__contact p { margin-top: 4px; }
@media (max-width: 560px) {
  .mk-legal__toc ol { columns: 1; }
}
@media (prefers-reduced-motion: reduce) { .js .mk-reveal { opacity: 1; transform: none; transition: none; } }