/*
 * RealtyIQ marketing surface - "Dark SaaS Glow" on deep navy (F-contract).
 * Type: Inter Tight 600 display (-2%), Inter body, Instrument Serif italic accent word.
 * Amber (--mk-money) is used ONLY for rupee figures and money-at-risk callouts.
 * Motion: transform/opacity only; reveals expo.out, hovers cubic-bezier(.2,.8,.2,1);
 * everything static under prefers-reduced-motion.
 */
/*
 * Metric-matched fallbacks (CLS): until the Google Fonts arrive, text is set in a
 * local Arial / Times New Roman (or Roboto / Noto Serif on Android) scaled to the
 * web font's advance widths and vertical metrics, so the swap does not rewrap
 * headlines. Values measured from the pinned Google Fonts files (latin subset).
 */
@font-face { font-family: 'Inter Tight Fallback'; font-weight: 100 500; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'); size-adjust: 98.31%; ascent-override: 98.54%; descent-override: 24.53%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Tight Fallback'; font-weight: 600 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'); size-adjust: 93.36%; ascent-override: 103.76%; descent-override: 25.84%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Tight Fallback A'; src: local('Roboto'); size-adjust: 99.23%; ascent-override: 97.63%; descent-override: 24.31%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 100 500; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'); size-adjust: 106.94%; ascent-override: 90.59%; descent-override: 22.56%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 600 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'); size-adjust: 101.3%; ascent-override: 95.63%; descent-override: 23.81%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback A'; src: local('Roboto'); size-adjust: 107.58%; ascent-override: 90.05%; descent-override: 22.42%; line-gap-override: 0%; }
@font-face { font-family: 'Instrument Serif Fallback'; font-style: italic; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'), local('Tinos Italic'); size-adjust: 87.74%; ascent-override: 112.84%; descent-override: 35.33%; line-gap-override: 0%; }
@font-face { font-family: 'Instrument Serif Fallback A'; font-style: italic; src: local('Noto Serif Italic'), local('NotoSerif-Italic'); size-adjust: 76.52%; ascent-override: 129.37%; descent-override: 40.51%; line-gap-override: 0%; }

:root {
  --mk-navy: #0B1F3A;
  --mk-navy-deep: #060F1F;
  --mk-surface: #0E2444;
  --mk-surface-2: #12305A;
  --mk-line: rgba(157, 187, 245, .14);
  --mk-line-strong: rgba(157, 187, 245, .28);
  --mk-brand: #1D5FBF;
  --mk-brand-2: #5B8DEF;
  --mk-brand-soft: #9DBBF5;
  --mk-money: #FFB338;
  --mk-money-fill: #FC9C00;
  --mk-success: #4ADE80;
  --mk-danger: #F87171;
  --mk-text: #E8EEF8;
  --mk-muted: #A9B8CF;
  --mk-font-display: 'Inter Tight', 'Inter Tight Fallback', 'Inter Tight Fallback A', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mk-font-body: 'Inter', 'Inter Fallback', 'Inter Fallback A', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mk-font-accent: 'Instrument Serif', 'Instrument Serif Fallback', 'Instrument Serif Fallback A', Georgia, 'Times New Roman', serif;
  --mk-ease: cubic-bezier(.2, .8, .2, 1);
  --mk-dur: 220ms;
  --mk-r: 18px;
  --mk-gutter: 16px;
  --mk-max: 1200px;
  --mk-pad: clamp(72px, 11vw, 160px);
}

/* ---------- Base ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body.mk-body {
  /* Wave F illustrations read the --rq-* tokens: map them to the navy surface. */
  --rq-primary: #5B8DEF;
  --rq-brand: #5B8DEF;
  --rq-navy: #060F1F;
  --rq-surface: #0E2444;
  --rq-surface-2: #12305A;
  --rq-border: #2A4874;
  --rq-text-muted: #A9B8CF;
  --rq-money-fill: #FFB338;
  margin: 0;
  background-color: var(--mk-navy-deep);
  background-image:
    radial-gradient(900px 520px at 85% -8%, rgba(29, 95, 191, .35), transparent 70%),
    radial-gradient(700px 480px at -10% 30%, rgba(91, 141, 239, .14), transparent 70%),
    linear-gradient(var(--mk-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mk-line) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
  background-attachment: scroll;
  color: var(--mk-text);
  font-family: var(--mk-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.mk-body a { color: var(--mk-brand-soft); text-underline-offset: 3px; }
.mk-body a:hover { color: #fff; }
.mk-body h1, .mk-body h2, .mk-body h3, .mk-body h4 { font-family: var(--mk-font-display); color: #fff; letter-spacing: -.02em; font-weight: 600; }
.mk-body .h4 { font-size: 1.35rem; margin-top: 2rem; }
.mk-body :focus-visible { outline: 3px solid var(--mk-brand-soft); outline-offset: 3px; border-radius: 6px; }
.mk-body ::selection { background: var(--mk-brand); color: #fff; }
.mk-body code { color: var(--mk-brand-soft); }
.mk-body .table { --bs-table-bg: transparent; --bs-table-color: var(--mk-text); --bs-table-border-color: var(--mk-line); }
.mk-muted, .mk-body .rq-muted { color: var(--mk-muted) !important; }
.mk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.mk-money { color: var(--mk-money) !important; font-variant-numeric: tabular-nums; }
.mk-skip { position: absolute; left: -999px; top: 8px; z-index: 2000; background: #fff; color: var(--mk-navy) !important; padding: 10px 14px; border-radius: 10px; }
.mk-skip:focus { left: 12px; }
.mk-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.mk-wrap { width: 100%; max-width: var(--mk-max); margin-inline: auto; padding-inline: var(--mk-gutter); }
@media (min-width: 768px) { :root { --mk-gutter: 32px; } }
.mk-narrow { max-width: 820px; }
.mk-section { padding-block: var(--mk-pad); position: relative; }
.mk-section--tight { padding-block: clamp(48px, 7vw, 96px); }
.mk-section--flush { padding-top: 0; }
.mk-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }

.mk-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mk-brand-soft); margin-bottom: 1rem; }
.mk-eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; }
.mk-h1 { font-size: clamp(2.6rem, 7.2vw, 5.8rem); line-height: 1.02; margin: 0 0 1.5rem; max-width: 9.15em; } /* = 15ch of Inter Tight; em, not ch, so the fallback font wraps the same */
.mk-h1--page { font-size: clamp(2.3rem, 5.6vw, 4.4rem); max-width: 11em; }
.mk-h1--post { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 14.6em; }
.mk-h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.06; margin: 0 0 1.25rem; }
.mk-h2--sm { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.mk-h2--xl { font-size: clamp(2.4rem, 6.4vw, 5.2rem); max-width: 9.75em; margin-inline: auto; }
.mk-h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; margin: 0 0 .75rem; }
.mk-accent {
  font-family: var(--mk-font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  padding-right: .06em;
  background: linear-gradient(100deg, #fff 0%, var(--mk-brand-soft) 45%, var(--mk-brand-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mk-lead { font-size: clamp(1.08rem, 1.5vw, 1.3rem); color: var(--mk-muted); max-width: 36.6em; margin-bottom: 2rem; }
.mk-fine { font-size: .875rem; color: var(--mk-muted); margin: 1rem 0 0; }
.mk-sample { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-navy); background: var(--mk-brand-soft); border-radius: 999px; padding: .15rem .55rem; }
.mk-chip { display: inline-flex; align-items: center; font-size: .75rem; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--mk-line-strong); color: var(--mk-text); margin-left: .35rem; }
.mk-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; min-height: 44px; }
.mk-link i { transition: transform var(--mk-dur) var(--mk-ease); }
.mk-link:hover i { transform: translateX(4px); }
.mk-linkbtn { background: none; border: 0; padding: 0; color: var(--mk-brand-soft); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.mk-linkbtn:hover { color: #fff; }
.mk-ill { display: block; width: 100%; height: auto; color: var(--mk-brand-2); }
.mk-ill svg, .mk-ill img { width: 100%; height: auto; display: block; }
.mk-ill--sm { max-width: 200px; margin-inline: auto; }

/* ---------- Buttons ---------- */
.mk-btn {
  --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .7rem 1.35rem; border-radius: 999px;
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transform: translate(var(--mx), var(--my));
  transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease), background-color var(--mk-dur) var(--mk-ease), border-color var(--mk-dur) var(--mk-ease), opacity var(--mk-dur) var(--mk-ease);
}
.mk-btn--sm { min-height: 44px; padding: .5rem 1rem; font-size: .925rem; }
.mk-btn--lg { min-height: 56px; padding: .9rem 1.7rem; font-size: 1.05rem; }
.mk-btn--primary { background: linear-gradient(135deg, var(--mk-brand-2), var(--mk-brand)); color: #fff !important; box-shadow: 0 10px 30px -10px rgba(91, 141, 239, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.mk-btn--primary:hover { box-shadow: 0 16px 44px -12px rgba(91, 141, 239, .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
.mk-btn--ghost { background: rgba(255, 255, 255, .04); color: #fff !important; border-color: var(--mk-line-strong); }
.mk-btn--ghost:hover { background: rgba(255, 255, 255, .09); border-color: var(--mk-brand-soft); }
.mk-btn:active { transform: translate(var(--mx), var(--my)) scale(.97); }
.mk-btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.mk-btn i { transition: transform var(--mk-dur) var(--mk-ease); }
.mk-btn:hover i.bi-arrow-right { transform: translateX(3px); }

/* ---------- Progress, curtain, preloader ---------- */
.mk-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1100; pointer-events: none; }
.mk-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--mk-brand-2), var(--mk-brand-soft)); transform: scaleX(0); transform-origin: 0 50%; }
.mk-curtain { position: fixed; inset: 0; z-index: 1200; background: var(--mk-navy-deep); opacity: 0; pointer-events: none; transition: opacity 280ms var(--mk-ease); }
.mk-curtain.is-on { opacity: 1; }

.mk-preloader { display: none; }
.mk-first .mk-preloader {
  position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center;
  background: var(--mk-navy-deep);
  animation: mk-pre-out .3s ease-in .9s forwards;
}
.mk-preloader__dots { position: absolute; width: 160px; height: 160px; }
.mk-preloader__dots span {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%;
  background: var(--mk-brand-soft);
  transform: rotate(calc(var(--i) * 45deg)) translateX(78px);
  animation: mk-pre-dot .75s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(var(--i) * 25ms);
}
.mk-preloader__mark {
  font-family: var(--mk-font-display); font-weight: 600; font-size: 2.2rem; color: #fff;
  width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--mk-brand-2), var(--mk-brand));
  opacity: 0; transform: scale(.6);
  animation: mk-pre-mark .4s cubic-bezier(.34, 1.56, .64, 1) .55s forwards;
}
@keyframes mk-pre-dot { to { transform: rotate(calc(var(--i) * 45deg)) translateX(0); opacity: 0; } }
@keyframes mk-pre-mark { to { opacity: 1; transform: scale(1); } }
@keyframes mk-pre-out { to { opacity: 0; visibility: hidden; } }

/* ---------- Nav ---------- */
.mk-nav { position: sticky; top: 0; z-index: 1000; background: rgba(6, 15, 31, .72); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--mk-line); }
.mk-nav__row { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.mk-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff !important; min-height: 44px; }
.mk-brand__mark svg { display: block; }
.mk-brand__name { font-family: var(--mk-font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; }
.mk-brand__name span { color: var(--mk-brand-soft); }
.mk-nav__links { display: none; gap: .25rem; margin-left: 1rem; }
.mk-nav__links a { color: var(--mk-muted); text-decoration: none; font-weight: 500; font-size: .95rem; padding: .55rem .8rem; border-radius: 999px; transition: color var(--mk-dur) var(--mk-ease), background-color var(--mk-dur) var(--mk-ease); }
.mk-nav__links a:hover, .mk-nav__links a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .06); }
.mk-nav__cta { display: none; align-items: center; gap: .75rem; margin-left: auto; }
.mk-nav__login { color: var(--mk-text) !important; text-decoration: none; font-weight: 500; padding: .55rem .6rem; }
.mk-menu { margin-left: auto; position: relative; }
.mk-menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--mk-line-strong); cursor: pointer; font-size: 1.4rem; color: #fff; }
.mk-menu summary::-webkit-details-marker { display: none; }
.mk-menu__panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(320px, calc(100vw - 32px)); display: grid; gap: .25rem; padding: .75rem; border-radius: 16px; background: var(--mk-navy); border: 1px solid var(--mk-line-strong); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.mk-menu__panel a { color: var(--mk-text); text-decoration: none; padding: .75rem .8rem; border-radius: 10px; min-height: 44px; }
.mk-menu__panel a:hover { background: rgba(255, 255, 255, .06); }
.mk-menu__panel .mk-btn { margin-top: .4rem; }
@media (min-width: 992px) {
  .mk-nav__links, .mk-nav__cta { display: flex; }
  .mk-menu { display: none; }
}

/* ---------- Hero ---------- */
.mk-hero { position: relative; min-height: min(92svh, 920px); display: flex; align-items: flex-start; padding-block: clamp(72px, 12vw, 168px) clamp(72px, 10vw, 140px); overflow: hidden; isolation: isolate; }
/* Top-aligned, not centred: a headline that changes height when the web font lands must not move the hero. */
.mk-hero__bg { position: absolute; inset: 0; z-index: -1; }
.mk-hero__poster { position: absolute; right: -6%; top: 50%; width: min(760px, 70vw); transform: translateY(-50%); opacity: .42; transition: opacity .8s var(--mk-ease); }
.mk-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--mk-ease); display: none; }
/* The 3D funnel only where the hero has a free right-hand side, and masked away from the text column. */
@media (min-width: 1024px) {
  .mk-hero__canvas { display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 62%, #000 80%); mask-image: linear-gradient(90deg, transparent 0%, transparent 62%, #000 80%); }
}
.mk-hero.is-3d .mk-hero__canvas { opacity: 1; }
.mk-hero.is-3d .mk-hero__poster { opacity: 0; }
.mk-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--mk-navy-deep) 0%, rgba(6, 15, 31, .82) 38%, rgba(6, 15, 31, .1) 75%), linear-gradient(0deg, var(--mk-navy-deep), transparent 30%); }
.mk-hero__inner { position: relative; }
.mk-hero .mk-h1 { min-height: 3lh; }
@media (min-width: 768px) { .mk-hero .mk-h1 { min-height: 2lh; } }
.mk-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }
@media (max-width: 767px) {
  .mk-hero__poster { width: 120vw; right: -40vw; top: 18%; opacity: .25; }
  .mk-hero__actions .mk-btn { flex: 1 1 100%; }
}
[data-split] .mk-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-split] .mk-word > span { display: inline-block; will-change: transform; }

/* ---------- Leak (pinned) ---------- */
.mk-leak__grid { display: grid; gap: 2rem; }
.mk-leak__visual { display: none; }
.mk-leak__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; counter-reset: none; }
.mk-step { padding: 1.6rem 1.6rem 1.4rem; border-radius: var(--mk-r); background: linear-gradient(180deg, rgba(18, 48, 90, .55), rgba(14, 36, 68, .35)); border: 1px solid var(--mk-line); transition: border-color .4s var(--mk-ease), background-color .4s var(--mk-ease); }
.mk-step__num { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--mk-danger); font-weight: 600; margin: 0 0 .4rem; transition: color .4s var(--mk-ease); }
.mk-step__title { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 0 0 .4rem; }
.mk-step__story { color: var(--mk-muted); margin: 0 0 1rem; }
.mk-step__fix { display: flex; gap: .9rem; align-items: flex-start; padding-top: 1rem; border-top: 1px dashed var(--mk-line-strong); }
.mk-step__fix i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(74, 222, 128, .12); color: var(--mk-success); font-size: 1.15rem; }
.mk-step__fix span { color: var(--mk-muted); font-size: .97rem; }
.mk-step.is-sealed { border-color: rgba(74, 222, 128, .45); }
.mk-step.is-sealed .mk-step__num { color: var(--mk-success); }
@media (min-width: 992px) {
  .mk-leak__grid { grid-template-columns: minmax(260px, 5fr) 7fr; gap: 4rem; }
  .mk-leak__visual { display: block; }
  .mk-leak__sticky { position: sticky; top: 120px; }
  .mk-leak__steps { gap: 30vh; padding-block: 6vh 20vh; }
  .mk-step { min-height: 220px; }
}
.mk-pipe { width: 100%; max-width: 320px; height: auto; display: block; margin-inline: auto; overflow: visible; }
.mk-crack__line { stroke: var(--mk-danger); transition: opacity .5s var(--mk-ease); }
.mk-crack__drop { fill: var(--mk-danger); animation: mk-drip 1.8s ease-in infinite; transform-box: fill-box; }
.mk-crack__seal { stroke: var(--mk-success); opacity: 0; transform: scale(.4); transform-origin: center; transform-box: fill-box; transition: opacity .45s var(--mk-ease), transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.mk-crack.is-sealed .mk-crack__line { opacity: .15; }
.mk-crack.is-sealed .mk-crack__drop { opacity: 0; animation: none; }
.mk-crack.is-sealed .mk-crack__seal { opacity: 1; transform: scale(1); }
@keyframes mk-drip { 0% { transform: translateY(0); opacity: 1; } 80% { opacity: .9; } 100% { transform: translateY(26px); opacity: 0; } }
.mk-leak__count { text-align: center; color: var(--mk-muted); margin-top: 1.5rem; font-variant-numeric: tabular-nums; }
.mk-leak__count span { color: var(--mk-success); font-weight: 600; }

/* ---------- ROI ---------- */
.mk-roi__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .mk-roi__grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.mk-roi__form { display: grid; gap: 1rem; max-width: 520px; }
.mk-field { display: grid; gap: .4rem; font-size: .95rem; color: var(--mk-text); font-weight: 500; }
.mk-field small { color: var(--mk-muted); font-weight: 400; }
.mk-field input, .mk-field select, .mk-field textarea {
  width: 100%; min-height: 52px; padding: .75rem 1rem; border-radius: 14px;
  background: rgba(6, 15, 31, .6); color: #fff; border: 1px solid var(--mk-line-strong);
  font: inherit; font-weight: 400; transition: border-color var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease);
}
.mk-field textarea { min-height: 120px; resize: vertical; }
.mk-field input:focus, .mk-field select:focus, .mk-field textarea:focus { outline: none; border-color: var(--mk-brand-2); box-shadow: 0 0 0 4px rgba(91, 141, 239, .22); }
.mk-field [aria-invalid="true"] { border-color: var(--mk-danger); }
.mk-field-row { display: grid; gap: 1rem; }
@media (min-width: 576px) { .mk-field-row { grid-template-columns: 1fr 1fr; } }
.mk-js .mk-roi__submit { display: none; }
.mk-roi__note { min-height: 1.5em; margin: 0; font-size: .875rem; color: var(--mk-brand-soft); }
.mk-roi__result { padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: radial-gradient(600px 300px at 80% 0%, rgba(252, 156, 0, .14), transparent 70%), linear-gradient(180deg, var(--mk-surface-2), var(--mk-surface)); border: 1px solid rgba(255, 179, 56, .25); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.mk-roi__label { margin: 0 0 .25rem; color: var(--mk-muted); font-size: .95rem; }
.mk-roi__big { font-family: var(--mk-font-display); font-weight: 600; font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 1; margin: 0 0 1.5rem; letter-spacing: -.02em; word-break: break-word; }
.mk-roi__mid { font-family: var(--mk-font-display); font-weight: 600; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.05; margin: 0 0 1.25rem; }

/* ---------- Dashboard theatre ---------- */
.mk-stage { margin: 0 auto; width: min(100% - 2 * var(--mk-gutter), 1400px); transform-origin: 50% 0; }
.mk-stage figcaption { text-align: center; font-size: .875rem; margin-top: 1rem; }
.mk-dash { border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #0F2A50, #0B2140); border: 1px solid var(--mk-line-strong); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 0 120px -30px rgba(91, 141, 239, .35); }
.mk-dash__bar { display: flex; align-items: center; gap: .45rem; padding: .8rem 1rem; border-bottom: 1px solid var(--mk-line); }
.mk-dash__bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.mk-dash__bar em { font-style: normal; margin-left: .6rem; font-size: .875rem; color: var(--mk-muted); }
.mk-dash__bar b { margin-left: auto; }
.mk-dash__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--mk-line); }
@media (min-width: 768px) { .mk-dash__tiles { grid-template-columns: repeat(4, 1fr); } }
.mk-tile { background: #0D2547; padding: 1.2rem 1.2rem 1.1rem; display: grid; gap: .15rem; }
.mk-tile span { font-size: .8rem; color: var(--mk-muted); }
.mk-tile strong { font-family: var(--mk-font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); color: #fff; letter-spacing: -.02em; line-height: 1.15; }
.mk-tile small { font-size: .75rem; color: var(--mk-muted); }
.mk-tile--danger strong { color: var(--mk-danger); }
.mk-dash__charts { display: grid; gap: 1px; background: var(--mk-line); }
@media (min-width: 768px) { .mk-dash__charts { grid-template-columns: 3fr 2fr; } }
.mk-chart { background: #0B2140; padding: 1.2rem; }
.mk-chart > p { font-size: .85rem; color: var(--mk-muted); margin: 0 0 1rem; }
.mk-bars { display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 22px); height: 170px; }
.mk-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .4rem; height: 100%; }
.mk-bar span { width: 100%; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--mk-brand-2), var(--mk-brand)); transform-origin: 50% 100%; }
.mk-bar em { font-style: normal; font-size: .7rem; color: var(--mk-muted); white-space: nowrap; }
.mk-rank { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.mk-rank li { display: grid; grid-template-columns: 72px 1fr 54px; align-items: center; gap: .6rem; font-size: .8rem; color: var(--mk-muted); }
.mk-rank i { display: block; height: 8px; width: var(--w); border-radius: 99px; background: var(--mk-success); transform-origin: 0 50%; }
.mk-rank i.is-slow { background: var(--mk-danger); }
.mk-rank b { color: #fff; font-weight: 600; text-align: right; }

/* ---------- Broker speed (horizontal) ---------- */
.mk-hscroll { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 1rem; }
.mk-hscroll::-webkit-scrollbar { display: none; }
.mk-hscroll__track { list-style: none; margin: 0; display: flex; gap: clamp(16px, 3vw, 40px); padding: 0 var(--mk-gutter); width: max-content; }
@media (min-width: 1264px) { .mk-hscroll__track { padding-left: calc((100vw - var(--mk-max)) / 2 + var(--mk-gutter)); } }
.mk-phone { flex: none; width: min(290px, 78vw); scroll-snap-align: center; }
@media (min-width: 992px) { .mk-phone { width: min(260px, 22vw); } }
.mk-phone__screen { aspect-ratio: 9 / 17; border-radius: 38px; padding: 28px 22px 22px; display: flex; flex-direction: column; background: linear-gradient(180deg, #102B52, #0A1D38); border: 8px solid #1A2C47; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px var(--mk-line-strong); }
.mk-phone__step { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--mk-brand-soft); margin: 0 0 .3rem; font-weight: 600; }
.mk-phone__cap { font-family: var(--mk-font-display); font-size: 1.35rem; color: #fff; margin: 0 0 1.2rem; font-weight: 600; }
.mk-phone__body { font-size: .95rem; color: var(--mk-text); margin: 0 0 1rem; }
.mk-phone__bubble { background: #134E3A; border-radius: 16px 16px 4px 16px; padding: .9rem 1rem; margin-left: auto; max-width: 92%; }
.mk-phone__tag { margin-top: auto; align-self: flex-start; }
.mk-phone--ill .mk-phone__screen { justify-content: center; background: linear-gradient(180deg, #0E2444, #081a33); }
.mk-wave { display: flex; align-items: center; gap: 3px; height: 54px; margin-bottom: 1rem; }
.mk-wave span { flex: 1; height: calc(18% + var(--n) * 7%); background: var(--mk-brand-2); border-radius: 3px; animation: mk-wave 1.2s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -90ms); transform-origin: 50% 50%; }
@keyframes mk-wave { to { transform: scaleY(.45); } }
.mk-hs-pinned .mk-hscroll { overflow: visible; scroll-snap-type: none; }

/* ---------- Mandate stack ---------- */
.mk-mandate__grid { display: grid; gap: 2.5rem; }
@media (min-width: 992px) {
  .mk-mandate__grid { grid-template-columns: 5fr 6fr; gap: 5rem; align-items: start; }
  .mk-mandate__copy { position: sticky; top: 120px; }
}
.mk-mandate__ill { max-width: 360px; margin-top: 2rem; opacity: .9; }
.mk-stack { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.mk-card { position: sticky; z-index: calc(1 + var(--i, 0)); top: calc(110px + var(--i) * 22px); padding: 1.8rem; border-radius: 22px; background-color: #EEF3FB; background-image: linear-gradient(180deg, #F5F8FD, #E6EDF8); color: #0B1F3A; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); transform-origin: 50% 0; min-height: 230px; isolation: isolate; }
/* Cards stay opaque: the card behind is dimmed by this overlay (marketing.js tweens --dim), never by opacity, so its text cannot show through the card on top. */
.mk-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--mk-navy-deep); opacity: var(--dim, 0); pointer-events: none; z-index: 1; }
.mk-card .mk-muted { color: #3B4F6B !important; }
.mk-card__kicker { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #3B4F6B; margin: 0 0 1.2rem; font-weight: 600; }
.mk-card__kicker .mk-sample { background: #0B1F3A; color: #fff; }
.mk-card__title { color: #0B1F3A !important; font-size: 1.3rem; margin: 0 0 .25rem; }
.mk-card__value { font-family: var(--mk-font-display); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 600; color: #1D5FBF; margin: 0 0 .5rem; letter-spacing: -.02em; line-height: 1.05; }
@media (min-width: 992px) { .mk-stack { gap: 14vh; padding-bottom: 10vh; } }

/* ---------- Cities ---------- */
.mk-cities__grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .mk-cities__grid { grid-template-columns: 1fr 1fr; } }
.mk-city { position: relative; display: block; border-radius: 24px; overflow: hidden; text-decoration: none; color: #fff !important; border: 1px solid var(--mk-line); background: linear-gradient(180deg, rgba(29, 95, 191, .25), rgba(11, 31, 58, .9)); min-height: 340px; transition: border-color var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease); }
.mk-city:hover { border-color: var(--mk-brand-soft); transform: translateY(-3px); }
.mk-city__art { position: absolute; left: -5%; right: -5%; top: 24px; color: var(--mk-brand-2); opacity: .9; }
.mk-city__text { position: absolute; inset: auto 0 0 0; padding: 1.4rem 1.6rem; background: linear-gradient(0deg, rgba(6, 15, 31, .95), rgba(6, 15, 31, 0)); }
.mk-city__text h3 { margin: 0 0 .2rem; font-size: 1.8rem; }

/* ---------- Plans ---------- */
.mk-plans { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .mk-plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mk-plans { grid-template-columns: repeat(4, 1fr); } .mk-plans--teaser { grid-template-columns: repeat(3, 1fr); } }
/* Three teaser plans never leave one alone on a row. */
@media (min-width: 768px) { .mk-plans--teaser { grid-template-columns: repeat(3, 1fr); gap: 1rem; } .mk-plans--teaser .mk-plan { padding: 1.5rem 1.3rem; } }
.mk-plan { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: 1.8rem; border-radius: 22px; background: linear-gradient(180deg, rgba(18, 48, 90, .6), rgba(14, 36, 68, .4)); border: 1px solid var(--mk-line); transition: transform var(--mk-dur) var(--mk-ease), border-color var(--mk-dur) var(--mk-ease); }
.mk-plan:hover { transform: translateY(-4px); border-color: var(--mk-line-strong); }
.mk-plan.is-featured { border-color: rgba(91, 141, 239, .7); box-shadow: 0 0 0 1px rgba(91, 141, 239, .4), 0 30px 80px -40px rgba(91, 141, 239, .7); }
.mk-plan__badge { position: absolute; top: -12px; left: 1.8rem; margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px; background: var(--mk-brand); color: #fff; }
.mk-plan__name { font-size: 1.35rem; margin: 0; }
.mk-plan__price { margin: .4rem 0 0; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.mk-plan__price span { font-family: var(--mk-font-display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.6rem); letter-spacing: -.02em; }
.mk-plan__price small { color: var(--mk-muted); font-size: .85rem; }
.mk-plan__price--text { font-family: var(--mk-font-display); font-size: 2rem; font-weight: 600; color: #fff; }
.mk-plan__yearly { color: var(--mk-muted); font-size: .9rem; margin: 0 0 .8rem; }
.mk-plan__limits { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; color: var(--mk-text); font-size: .95rem; }
.mk-plan__limits i { color: var(--mk-brand-soft); margin-right: .45rem; }
.mk-plan .mk-btn { margin-top: auto; }
.mk-plan--enterprise { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); }
.mk-pay { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.mk-pay li { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--mk-line-strong); font-weight: 500; min-height: 40px; }
.mk-pay li.is-first { border-color: var(--mk-brand-2); background: rgba(91, 141, 239, .14); color: #fff; }
.mk-pay__via { border: 0 !important; color: var(--mk-muted); padding-inline: .2rem !important; }
.mk-addons { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .mk-addons { grid-template-columns: 1fr 1fr; } }
.mk-addon { display: flex; gap: 1rem; padding: 1.4rem; border-radius: 18px; border: 1px dashed var(--mk-line-strong); }
.mk-addon > i { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(91, 141, 239, .14); color: var(--mk-brand-soft); font-size: 1.2rem; }
.mk-addon__title { font-size: 1.1rem; margin: 0 0 .25rem; }
.mk-table-wrap {
  position: relative; /* contains the absolutely positioned .visually-hidden labels, which would otherwise widen the page */
  overflow-x: auto; border-radius: 18px; border: 1px solid var(--mk-line); overscroll-behavior-x: contain;
  /* Scroll shadows: a glow on each edge that still has columns past it. */
  background:
    linear-gradient(90deg, var(--mk-navy-deep) 30%, rgba(6, 15, 31, 0)) left center / 48px 100% no-repeat local,
    linear-gradient(270deg, var(--mk-navy-deep) 30%, rgba(6, 15, 31, 0)) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(157, 187, 245, .35), rgba(157, 187, 245, 0)) right center / 18px 100% no-repeat scroll,
    var(--mk-navy-deep);
}
.mk-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; }
.mk-table th, .mk-table td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--mk-line); text-align: center; font-size: .95rem; }
.mk-table td { white-space: nowrap; }
.mk-table th[scope="row"], .mk-table thead th:first-child { text-align: left; font-weight: 500; color: var(--mk-text); }
.mk-table thead th { font-family: var(--mk-font-display); color: #fff; background: #0A1830; font-size: 1rem; white-space: nowrap; }
/* The feature column stays put while the plans scroll under it. */
.mk-table th[scope="row"], .mk-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: #0A1830; box-shadow: 1px 0 0 var(--mk-line-strong); }
.mk-table-hint { display: none; align-items: center; gap: .45rem; font-size: .85rem; color: var(--mk-muted); margin: 0 0 .75rem; }
@media (max-width: 767px) {
  .mk-table { min-width: 560px; }
  .mk-table th, .mk-table td { padding: .7rem .6rem; font-size: .85rem; }
  .mk-table th[scope="row"], .mk-table thead th:first-child { width: 9.5rem; min-width: 9.5rem; max-width: 9.5rem; }
  .mk-table thead th { font-size: .9rem; }
  .mk-table-hint { display: flex; }
}
.mk-table tbody tr:last-child th, .mk-table tbody tr:last-child td { border-bottom: 0; }
.mk-yes { color: var(--mk-success); font-size: 1.2rem; }
.mk-no { color: var(--mk-muted); }

/* ---------- FAQ (#27) ---------- */
.mk-faq { display: grid; gap: .75rem; }
.mk-faq__item { border-radius: 16px; border: 1px solid var(--mk-line); background: rgba(255, 255, 255, .02); transition: border-color var(--mk-dur) var(--mk-ease); }
.mk-faq__item[open] { border-color: var(--mk-line-strong); }
.mk-faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; cursor: pointer; font-weight: 600; color: #fff; min-height: 56px; }
.mk-faq__item summary::-webkit-details-marker { display: none; }
.mk-faq__item summary i { transition: transform var(--mk-dur) var(--mk-ease); flex: none; }
.mk-faq__item[open] summary i { transform: rotate(45deg); }
.mk-faq__body { padding: 0 1.3rem 1.1rem; color: var(--mk-muted); overflow: hidden; }
.mk-faq__body p { margin: 0; }

/* ---------- Demo panel (T47) ---------- */
.mk-demo { position: relative; padding: clamp(24px, 4vw, 44px); border-radius: 24px; border: 1px solid rgba(91, 141, 239, .5); background: linear-gradient(135deg, rgba(29, 95, 191, .22), rgba(11, 31, 58, .6)); }
.mk-demo__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--mk-line-strong); background: transparent; color: #fff; cursor: pointer; }
.mk-demo__close:hover { background: rgba(255, 255, 255, .08); }
.mk-demo__rows { display: grid; gap: .75rem; margin-top: 1.25rem; }
.mk-demo__row { display: grid; gap: .35rem .9rem; align-items: center; padding: 1rem 1.1rem; border-radius: 16px; background: rgba(6, 15, 31, .55); border: 1px solid var(--mk-line); margin: 0; }
.mk-demo__role { font-weight: 600; color: #fff; }
@media (min-width: 768px) { .mk-demo__row { grid-template-columns: 1.1fr 1.6fr 1fr auto; } }
[data-demo-panel].is-hidden { display: none; }

/* ---------- Final + footer ---------- */
.mk-final { overflow: hidden; }
.mk-final::before { content: ''; position: absolute; left: 50%; top: 40%; width: min(900px, 120vw); height: 420px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(29, 95, 191, .4), transparent); z-index: -1; pointer-events: none; }
/* ---------- Public error pages (guests on the platform host) ---------- */
.mk-err { min-height: calc(100svh - 68px); display: flex; align-items: flex-start; }
.mk-err__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .mk-err__grid { grid-template-columns: 6fr 5fr; gap: 4rem; } }
.mk-err__code { font-family: var(--mk-font-display); font-weight: 600; font-size: clamp(5rem, 16vw, 11rem); line-height: .9; letter-spacing: -.04em; margin: 0 0 1rem; color: transparent; -webkit-text-stroke: 1.5px rgba(157, 187, 245, .5); }
.mk-err .rq-accent { font-family: var(--mk-font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; padding-right: .06em; background: linear-gradient(100deg, #fff 0%, var(--mk-brand-soft) 45%, var(--mk-brand-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-err__links { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.mk-err__links a { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--mk-line-strong); text-decoration: none; color: var(--mk-text); min-height: 44px; transition: border-color var(--mk-dur) var(--mk-ease), background-color var(--mk-dur) var(--mk-ease); }
.mk-err__links a:hover { border-color: var(--mk-brand-soft); background: rgba(255, 255, 255, .05); color: #fff; }
.mk-err__art { max-width: 440px; width: 100%; margin-inline: auto; color: var(--mk-brand-2); }

.mk-footer { position: relative; padding: 0 0 48px; border-top: 1px solid var(--mk-line); overflow: hidden; }
.mk-wordmark { font-family: var(--mk-font-display); font-weight: 600; font-size: clamp(4.5rem, 19vw, 17rem); line-height: .85; letter-spacing: -.04em; margin: 0; padding-top: .12em; text-align: center; color: transparent; -webkit-text-stroke: 1.5px rgba(157, 187, 245, .35); white-space: nowrap; user-select: none; }
.mk-footer__grid { display: grid; gap: 2rem; margin-top: clamp(32px, 5vw, 64px); }
@media (min-width: 768px) { .mk-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.mk-footer__h { font-family: var(--mk-font-body) !important; font-size: .78rem !important; text-transform: uppercase; letter-spacing: .14em; color: var(--mk-muted) !important; margin: 0 0 .8rem; font-weight: 600; }
.mk-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; }
.mk-footer nav a, .mk-footer nav .mk-linkbtn { color: var(--mk-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; font-size: .95rem; }
.mk-footer nav a:hover, .mk-footer nav .mk-linkbtn:hover { color: #fff; text-decoration: underline; }
.mk-footer__about p { max-width: 22em; font-size: .95rem; }
.mk-social { display: flex !important; gap: .5rem !important; margin-top: 1rem !important; }
.mk-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--mk-line-strong); color: #fff; }
.mk-trust { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--mk-line); font-size: .85rem; color: var(--mk-muted); }
.mk-trust strong { color: var(--mk-text); }

/* ---------- Inner pages ---------- */
.mk-page-hero { padding-top: clamp(56px, 9vw, 120px); }
.mk-crumbs { font-size: .875rem; color: var(--mk-muted); margin-bottom: 1.5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.mk-crumbs a { color: var(--mk-muted); text-decoration: none; }
.mk-crumbs a:hover { color: #fff; }
.mk-uc-hero__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 992px) { .mk-uc-hero__grid { grid-template-columns: 6fr 5fr; gap: 4rem; } }
.mk-uc-hero__art { max-width: 560px; width: 100%; margin-inline: auto; }
/* Use-case hero visual: one composed stage - glowing panel, the page's main illustration large, a supporting
   illustration and a labelled sample tile - instead of a lone strip of art. */
.mk-uc-stage { position: relative; aspect-ratio: 1 / 1; max-height: 560px; width: 100%; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(420px 320px at 70% 20%, rgba(91, 141, 239, .35), transparent 70%), radial-gradient(360px 260px at 10% 100%, rgba(29, 95, 191, .35), transparent 70%), linear-gradient(180deg, var(--mk-surface-2), var(--mk-navy));
  border: 1px solid var(--mk-line-strong); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06); }
.mk-uc-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--mk-line) 1px, transparent 1px), linear-gradient(90deg, var(--mk-line) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.mk-uc-stage__main { position: absolute; left: 8%; right: 8%; top: 9%; bottom: 22%; display: grid; place-items: center; }
.mk-uc-stage__main .mk-ill, .mk-uc-stage__main svg { width: 100%; height: 100%; max-height: 100%; }
.mk-uc-stage__ground { position: absolute; left: -4%; right: -4%; bottom: 0; color: var(--mk-brand-2); opacity: .85; }
.mk-uc-stage--wide .mk-uc-stage__main { top: 6%; bottom: 30%; left: 14%; right: 14%; }
.mk-uc-stage__tile { position: absolute; left: 6%; bottom: 7%; display: grid; gap: .1rem; padding: .8rem 1rem; border-radius: 16px; background: rgba(6, 15, 31, .86); border: 1px solid var(--mk-line-strong); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-width: 9.5rem; }
.mk-uc-stage__tile span { font-size: .75rem; color: var(--mk-muted); }
.mk-uc-stage__tile strong { font-family: var(--mk-font-display); font-size: 1.5rem; line-height: 1.1; color: #fff; letter-spacing: -.02em; }
.mk-uc-stage__tile .mk-sample { justify-self: start; margin-top: .3rem; }
.mk-uc-stage__chip { position: absolute; right: 6%; top: 7%; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #fff; background: rgba(74, 222, 128, .14); border: 1px solid rgba(74, 222, 128, .45); }
.mk-uc-stage__chip i { color: var(--mk-success); }
@media (max-width: 575px) { .mk-uc-stage { aspect-ratio: 4 / 3.6; } .mk-uc-stage__tile { padding: .6rem .8rem; min-width: 0; } .mk-uc-stage__tile strong { font-size: 1.2rem; } }
.mk-problems { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.mk-problems li { display: flex; gap: .9rem; font-size: 1.1rem; color: var(--mk-text); }
.mk-problems i { color: var(--mk-danger); flex: none; margin-top: .2rem; }
.mk-features { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 768px) { .mk-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .mk-features { grid-template-columns: repeat(3, 1fr); }
  /* Never one card alone on the last row: four become 2 x 2, any other remainder of one spans the row. */
  .mk-features:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
  .mk-features > :nth-child(3n+1):last-child:not(:nth-child(4)) { grid-column: 1 / -1; }
}
.mk-feature { padding: 1.6rem; border-radius: 20px; border: 1px solid var(--mk-line); background: rgba(255, 255, 255, .03); transition: border-color var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease); }
.mk-feature:hover { border-color: var(--mk-line-strong); transform: translateY(-3px); }
.mk-feature h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.mk-proof { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .mk-proof { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.mk-proof__frame { margin: 0; padding: 1.5rem; border-radius: 24px; border: 1px solid var(--mk-line-strong); background: linear-gradient(180deg, var(--mk-surface-2), var(--mk-surface)); display: grid; gap: 1rem; justify-items: start; }
.mk-answers { display: grid; gap: 1.25rem; }
.mk-answers > .mk-head { margin-bottom: .75rem; }
.mk-answer { padding: 1.6rem 1.8rem; border-radius: 20px; border-left: 3px solid var(--mk-brand-2); background: rgba(255, 255, 255, .03); }
.mk-answer p { margin: 0; color: var(--mk-text); }
.mk-related { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.mk-related a { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--mk-line-strong); text-decoration: none; color: var(--mk-text); min-height: 44px; transition: border-color var(--mk-dur) var(--mk-ease), background-color var(--mk-dur) var(--mk-ease); }
.mk-related a:hover { border-color: var(--mk-brand-soft); background: rgba(255, 255, 255, .05); color: #fff; }
.mk-contact { display: grid; gap: 2.5rem; }
@media (min-width: 992px) { .mk-contact { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }
.mk-contact__facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; color: var(--mk-muted); }
.mk-contact__facts i { color: var(--mk-brand-soft); margin-right: .5rem; }
.mk-formcard { padding: clamp(22px, 4vw, 40px); border-radius: 24px; background: linear-gradient(180deg, var(--mk-surface-2), var(--mk-surface)); border: 1px solid var(--mk-line-strong); }
.mk-form { display: grid; gap: 1rem; }
.mk-alert { padding: .85rem 1rem; border-radius: 12px; background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .4); color: #FECACA; }
.mk-success { text-align: center; display: grid; gap: .75rem; justify-items: center; }
.mk-success > i { font-size: 3rem; color: var(--mk-success); animation: mk-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mk-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mk-empty { text-align: center; display: grid; gap: 1rem; justify-items: center; padding: 3rem 1.5rem; border-radius: 24px; border: 1px dashed var(--mk-line-strong); }
.mk-posts { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .mk-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mk-posts { grid-template-columns: repeat(3, 1fr); } }
.mk-post { padding: 1.6rem; border-radius: 20px; border: 1px solid var(--mk-line); background: rgba(255, 255, 255, .03); position: relative; transition: border-color var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease); }
.mk-post:hover { border-color: var(--mk-line-strong); transform: translateY(-3px); }
.mk-post__meta { font-size: .85rem; color: var(--mk-muted); margin: 0 0 .6rem; }
.mk-post__title { font-size: 1.3rem; margin: 0 0 .6rem; line-height: 1.25; }
.mk-post__title a { color: #fff; text-decoration: none; }
.mk-post__title a::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
.mk-pager { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.mk-prose { font-size: 1.08rem; }
.mk-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.4rem 0 .8rem; }
.mk-prose h3 { font-size: 1.3rem; margin: 2rem 0 .6rem; }
.mk-prose p, .mk-prose li { color: var(--mk-text); }
.mk-prose ul, .mk-prose ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.mk-prose li { margin-bottom: .4rem; }
.mk-prose blockquote { border-left: 3px solid var(--mk-brand-2); padding: .4rem 0 .4rem 1.2rem; color: var(--mk-muted); margin: 1.5rem 0; }
.mk-prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.mk-prose th, .mk-prose td { border: 1px solid var(--mk-line-strong); padding: .6rem .8rem; text-align: left; }

/* ---------- Reveal (JS adds .mk-in) ---------- */
/* .mk-js is added by marketing.js itself, so a slow or blocked CDN (which delays it) never hides content.
   Failsafe: even when the script has started, anything still hidden after 2.5 s fades in on its own,
   unless the reveal observer is confirmed running (.mk-io). */
.mk-js [data-reveal] { opacity: 0; transform: translateY(24px); animation: mk-reveal-failsafe .6s cubic-bezier(.16, 1, .3, 1) 2.5s forwards; }
.mk-js.mk-io [data-reveal] { animation: none; }
@keyframes mk-reveal-failsafe { to { opacity: 1; transform: none; } }
.mk-js [data-reveal].mk-in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }

.mk-head.mk-pre > * { opacity: 0; transform: translateY(28px); }
.mk-head.mk-pre.mk-in > * { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
.mk-head.mk-pre.mk-in > :nth-child(2) { transition-delay: 80ms; }
.mk-head.mk-pre.mk-in > :nth-child(3) { transition-delay: 160ms; }

/* ---------- Reduced motion: everything static and visible ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --mk-dur: 0ms; }
  .mk-first .mk-preloader { display: none; }
  .mk-js [data-reveal] { opacity: 1; transform: none; animation: none; }
  .mk-crack__drop, .mk-wave span { animation: none; }
  .mk-hero__canvas { display: none; }
  .mk-hero__poster { opacity: .42 !important; }
  .mk-curtain { display: none; }
  .mk-btn, .mk-plan, .mk-city, .mk-feature, .mk-post { transition: none; transform: none !important; }
  .mk-card { position: static; }
}

/* Tablet: the hero art sat behind the lead and CTAs; text first until there is room beside it. */
@media (min-width: 768px) and (max-width: 1023.98px) { .mk-hero__poster { display: none; } }