/* =========================================================================
   Mango marketing shell - the ONE header + footer + CTA pill definition,
   loaded by BOTH the React home (via index.html) and the static pages (via
   their own <link>), so the chrome is pixel-identical everywhere and can
   never drift. Class-scoped only (no element selectors, no :root tokens) -
   safe to load app-wide.
   ========================================================================= */

/* The page NEVER scrolls sideways: full-bleed tricks use 100vw, which
   includes the vertical scrollbar's width on Windows - without this
   clip they overhang ~17px and spawn a horizontal bar. clip (not
   hidden) so position:sticky and scroll behaviour stay untouched. */
html { overflow-x: clip; }

/* ── BRAND THEME TOKENS ─ the ONE place colours live. Every marketing
   stylesheet references these; change a hex here and the whole site
   follows. --mk- prefix keeps them collision-proof anywhere. ────── */
:root {
  --mk-dark: #173536;        /* THE dark: headings ink + dark surfaces (original palette) */
  --mk-dark-press: #0d2022;  /* hover/pressed on dark surfaces */
  --mk-dark-rgb: 23, 53, 54; /* rgba() tints of the dark */
  --mk-teal: #157570;        /* brand teal: accents on light */
  --mk-teal-bright: #2dd4bf; /* small sparks only */
  --mk-seaglass: #7fcfc2;    /* accent text/icons on dark */
  --mk-clay: #ca8a68;        /* signature warm accent */
  --mk-clay-rgb: 202, 138, 104; /* rgba() tints of clay */
  --mk-clay-light: #d89f7f;  /* clay hover */
  --mk-taupe: #82695a;       /* muted labels (AA on paper) */
  --mk-paper: #f6f8f8;       /* off-white ground */
  --mk-stage: #d1d5db;       /* the tour's pale stage band */
  --mk-ink-body: #41393f;    /* body copy on light */
  --mk-ondark-rgb: 230, 252, 250; /* rgba() text tints on dark */
  --mk-font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --mk-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Atmosphere overlay for dark surfaces: a whisper of light falling
     from the top-left, deepening to the bottom-right, layered as
     background-image over --mk-dark. Baked in float and Bayer-dithered
     at export (browsers paint CSS gradients at 8-bit with no dithering,
     which bands on subtle dark ramps); stretched to each box so every
     section carries the full sweep, exactly as the gradient did. */
  --mk-dark-grad: url("/images/site/dark-grad.png");
  --mk-dark-grad-size: 100% 100%;
  --mk-dark-grad-blend: normal;
}

/* ── The shell owns its BOX MODEL - the root cause of the header
   sitting differently per page: site.css carries a global
   border-box reset, the home's LP styles don't, so the same 64px
   header with its 1px bottom border computed a 63px content box on
   the static pages and 64px on the home. That half-pixel centring
   shift re-rasterised every glyph and made the bar itself 65px vs
   64px. Pinning border-box here makes the page context irrelevant. */
.MK-header, .MK-header *, .MK-header *::before, .MK-header *::after,
.MK-footer, .MK-footer *, .MK-footer *::before, .MK-footer *::after {
  box-sizing: border-box;
}

/* ── Header - dark teal gradient bar, sticky on every page ─────── */
.MK-header {
  /* NOT sticky: the header (and the open drawer hanging from it) scrolls
     away with the page, so the drawer's glide-to-section is VISIBLE -
     the behaviour the home page always had. Back-to-top returns you. */
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 30px;
  height: 64px;
  /* Full-width chrome, matching the full-bleed tour: logo hugs the
     left edge, actions the right, on the same edge padding. */
  padding: 0 clamp(20px, 2.5vw, 48px);
  /* The display face, pinned: the header inherited its font from the
     page (Bricolage on home, Inter on static pages) - visibly
     different chrome. Home's look is canonical. */
  font-family: var(--mk-font-display);
  background: var(--mk-dark); /* the reading panels' deep teal */
  background-image: var(--mk-dark-grad);
  background-size: var(--mk-dark-grad-size);
  background-blend-mode: var(--mk-dark-grad-blend);
  /* strong enough to draw the line between header and the open drawer,
     which now shares the same fill */
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  cursor: auto;
  /* The shell owns its own type metrics - the pages around it set very
     different line-heights, and inheriting them changed the pill/chip
     heights between the home and the static pages. */
  line-height: 1.2;
  /* ...and its own text rasterisation: site.css antialiases, the home
     doesn't, and the two smoothing modes made the SAME header text
     render subtly bolder on one page than the other (pixel-diff proven:
     background identical, every differing pixel was text). */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Force the header onto its OWN compositing layer on EVERY page.
     On Windows, Chrome picks the text antialiasing mode from how the
     element is composited (font-smoothing CSS is a no-op there): the
     home's header sits amid WebGL canvases and blend layers and
     rasterised its text differently from the plain static pages.
     Compositing it everywhere makes the rasterisation identical - and
     a composited sticky header repaints less during scroll anyway. */
  transform: translateZ(0);
  /* Own snapshot during cross-document view transitions: the header is
     identical on every page, so pairing old/new into one named group
     renders it pixel-frozen while the rest of the page cross-fades -
     no shimmer, no background pop. (Ignored by older browsers.) */
  view-transition-name: mk-header;
}
.MK-logo { display: flex; align-items: center; cursor: pointer; }
.MK-logo img { height: 24px; display: block; }
.MK-headrule {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.45);
  flex: 0 0 auto;
}
.MK-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.MK-nav a {
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: color 220ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-nav a:hover { color: #ffffff; text-decoration: none; }
/* Links announce themselves: an underline sweeps in from the left on
   hover (the cursor stays constant - the target reacts). */
.MK-nav a { position: relative; }
.MK-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1.5px;
  border-radius: 1px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.246, -0.005, 0, 0.995);
}
.MK-nav a:hover::after { transform: scaleX(1); }
.MK-nav a[aria-current="page"] { color: #ffffff; }
.MK-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── CTA pill ─ ONE 35px control, shared by the header, CTA band,
   join tiles, contact form and footer. Colour comes only from the
   modifiers: clay (default) carries near-black ink, --dark is the
   deep teal with white text, --light is white for dark bands and
   --ghost the quiet outline. Metrics never vary per context. ──── */
.MK-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 35px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--mk-clay);
  color: #241108;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background 220ms cubic-bezier(0.409, 0.001, 0.094, 0.983),
    transform 220ms cubic-bezier(0.246, -0.005, 0, 0.995),
    box-shadow 220ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-cta:hover {
  background: var(--mk-clay-light);
  text-decoration: none;
  transform: translateY(-1px);
}
.MK-cta--dark { background: var(--mk-dark); color: #ffffff; }
.MK-cta--dark:hover { background: var(--mk-dark-press); }
.MK-loginlink {
  position: relative;
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  margin: 0 4px;
}
.MK-loginlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1.5px;
  border-radius: 1px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-loginlink:hover { text-decoration: none; }
.MK-loginlink:hover::after { transform: scaleX(1); }
.MK-cta--light {
  background: #ffffff;
  color: var(--mk-dark);
}
.MK-cta--light:hover { background: #ecfdf9; }
.MK-cta--ghost {
  background: transparent;
  color: var(--mk-dark);
  box-shadow: inset 0 0 0 1.5px rgba(15, 118, 110, 0.35);
}
.MK-cta--ghost:hover {
  background: rgba(20, 184, 166, 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(15, 118, 110, 0.55);
}
/* Ghost variant on dark surfaces (CTA bands, footer) */
.MK-dark .MK-cta--ghost {
  color: #ffffff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
.MK-dark .MK-cta--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.8);
}

/* ── Mobile nav (checkbox toggle - works in HTML and React alike) ── */
.MK-burger { display: none; }
.MK-burger-btn {
  display: none;
  margin-left: 4px;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.MK-burger-btn span,
.MK-burger-btn span::before,
.MK-burger-btn span::after {
  content: "";
  position: absolute;
  left: 9px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #e6fcfa;
}
.MK-burger-btn span { top: 19px; }
.MK-burger-btn span::before { top: -7px; left: 0; }
.MK-burger-btn span::after { top: 7px; left: 0; }

/* Log in and Get Started ride in the mobile drawer (shell.js appends
   them); desktop keeps the inline header link and mega-menu instead. */
.MK-nav .MK-nav-login { display: none; }
.MK-nav .MK-nav-getstarted { display: none; }

@media (max-width: 900px) {
  .MK-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    padding: 10px clamp(20px, 4vw, 56px) 18px;
    background: var(--mk-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .MK-nav a { padding: 11px 0; font-size: 16px; width: 100%; }
  .MK-nav .MK-nav-login {
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    margin-top: 6px;
    padding-top: 14px;
  }
  /* Pressed-dark Get Started band closing the drawer */
  .MK-nav .MK-nav-getstarted {
    display: block;
    box-sizing: border-box;
    width: calc(100% + 2 * clamp(20px, 4vw, 56px));
    margin: 14px calc(-1 * clamp(20px, 4vw, 56px)) -18px;
    padding: 18px clamp(20px, 4vw, 56px) 22px;
    background: var(--mk-dark-press);
  }
  .MK-nav .MK-nav-getstarted strong {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mk-clay);
    margin-bottom: 4px;
  }
  .MK-nav .MK-nav-getstarted a {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
  }
  .MK-burger:checked ~ .MK-nav { display: flex; }
  .MK-burger-btn { display: block; }
  .MK-headrule { display: none; }
  /* The full inline set (logo, Log in, CTA, burger) is wider than a
     phone; Log in moves into the drawer and the gaps tighten. */
  .MK-header { gap: 14px; }
  .MK-header-actions { gap: 10px; }
  .MK-header-actions .MK-loginlink { display: none; }
}

/* ── Footer - dark teal gradient bookend ───────────────────────── */
.MK-footer {
  /* Edge padding matches the header - the two dark bands bookend the page */
  padding: 48px clamp(20px, 2.5vw, 48px) 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.22); /* the header's rule, mirrored */
  background: var(--mk-dark);
  color: #e6fcfa;
  cursor: auto;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.MK-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
  justify-content: space-between;
}
.MK-footer-brand img { height: 22px; display: block; margin-bottom: 12px; }
.MK-footer-brand p { font-size: 13.5px; color: rgba(var(--mk-ondark-rgb), 0.6); margin: 0; max-width: 300px; }
.MK-footer nav {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}
.MK-footer nav .MK-footcol { display: flex; flex-direction: column; gap: 9px; }
.MK-footer nav strong {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mk-clay);
  font-weight: 700;
  margin-bottom: 2px;
}
.MK-footer nav .MK-footcol a,
.MK-footer nav .MK-footcol button {
  color: rgba(var(--mk-ondark-rgb), 0.82);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 220ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-footer nav .MK-footcol a:hover,
.MK-footer nav .MK-footcol button:hover { color: #ffffff; text-decoration: none; }
.MK-footer nav .MK-footcol a,
.MK-footer nav .MK-footcol button { position: relative; align-self: flex-start; }
.MK-footer nav .MK-footcol a::after,
.MK-footer nav .MK-footcol button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms cubic-bezier(0.246, -0.005, 0, 0.995);
}
.MK-footer nav .MK-footcol a:hover::after,
.MK-footer nav .MK-footcol button:hover::after { transform: scaleX(1); }
.MK-footer-legal {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--mk-ondark-rgb), 0.14);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(var(--mk-ondark-rgb), 0.55);
}
.MK-footer-legal a {
  color: rgba(var(--mk-ondark-rgb), 0.55);
  text-decoration: none;
  cursor: pointer;
}
.MK-footer-legal a:hover { color: rgba(var(--mk-ondark-rgb), 0.85); }
/* Get Started pill sits under the brand blurb, bottom left */
.MK-footer-cta { margin-top: 18px; }

/* In-page warp (long back-to-top / footer jumps): a slightly longer,
   eased crossfade than the between-page navigations. Scoped by the
   .MK-warp class glidePage sets for the duration of the jump. */
html.MK-warp::view-transition-old(root),
html.MK-warp::view-transition-new(root) {
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1);
}

/* ── Cross-document view transitions - the pages CROSS-FADE instead
   of flashing white between navigations (progressive: browsers
   without support just navigate normally). ─────────────────────── */
@view-transition {
  navigation: auto;
}/* ── Features menu - compact hover panel under the header ───────── */
.MK-nav .MK-featChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
}
.MK-featChip-chev {
  display: block;
  color: var(--mk-clay); /* the chevron carries the accent; label stays white */
  transition: transform 220ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-featChip--open .MK-featChip-chev { transform: rotate(180deg); }
.MK-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 70;
  background: var(--mk-dark);
  /* The separation line lives on the DRAWER (the header's own border
     can be covered as the drawer slides in over it). */
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease,
    transform 240ms cubic-bezier(0.409, 0.001, 0.094, 0.983),
    visibility 0s linear 240ms;
}
.MK-menu--open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms ease,
    transform 240ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-menu-grid {
  /* SIX equal columns, edge to edge: features span 3 (band dark),
     Get started spans 2 (pressed dark), Explore takes 1 (brand teal).
     Three flush colour blocks - no dead space at any width. */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.MK-menu-block {
  padding: 24px clamp(20px, 2vw, 40px) 30px;
  min-height: 100%;
  box-sizing: border-box;
}
.MK-menu-block--features { grid-column: span 3; background: var(--mk-dark); }
.MK-menu-block--actions { grid-column: span 2; background: var(--mk-dark-press); position: relative; }
.MK-menu-block--explore { grid-column: span 1; background: var(--mk-teal); order: -1; /* Mango App leads */ }
.MK-menu-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px clamp(20px, 2vw, 44px);
}
/* Block-level group names above each colour block's content */
.MK-menu-blocktitle {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.MK-menu-block--features .MK-menu-blocktitle { color: var(--mk-teal-bright); }
.MK-menu-block--actions .MK-menu-blocktitle { color: var(--mk-clay); }
/* Get Started: links left, white placeholder tile in the right half */
.MK-menu-block--actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 2vw, 36px);
  align-content: start;
}
.MK-menu-block--actions .MK-menu-blocktitle { grid-column: 2; }
.MK-menu-block--actions .MK-menu-item { grid-column: 2; }
.MK-menu-video {
  /* OUT OF FLOW: absolute over the block's right half, so the video's
     intrinsic size can never inflate the menu - the block's natural
     height (the links) defines the viewport, cover crops the rest */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 46%;
  overflow: hidden;
}
.MK-menu-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.MK-menu-video-cta {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 35px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--mk-clay);
  color: #241108;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.MK-menu-video-cta svg { width: 15px; height: 15px; }
.MK-menu-video-cta:hover {
  background: var(--mk-clay-light);
  transform: translateY(-1px);
  text-decoration: none;
}.MK-menu-block--explore .MK-menu-blocktitle { color: var(--mk-dark); }
.MK-menu-block h5,
.MK-menu-col h5 {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-teal-bright);
}
.MK-menu-block--actions h5 { color: var(--mk-clay); }
.MK-menu-block--explore h5 { color: #ffffff; }
.MK-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: opacity 180ms ease;
}
.MK-menu-item svg { width: 17px; height: 17px; color: rgba(var(--mk-ondark-rgb), 0.55); flex: 0 0 auto; }
.MK-menu-label { position: relative; }
.MK-menu-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1.5px;
  border-radius: 1px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms cubic-bezier(0.246, -0.005, 0, 0.995);
}
.MK-menu-item:hover { text-decoration: none; }
.MK-menu-item:hover .MK-menu-label::after { transform: scaleX(1); }
.MK-menu-item:hover svg { color: var(--mk-clay); }
/* Hovering one item fades its siblings */
.MK-menu-grid:hover .MK-menu-item:not(:hover) { opacity: 0.45; }

@media (max-width: 900px) {
  .MK-menu { display: none; }
  .MK-nav .MK-featChip { display: block; padding: 11px 0; }
  .MK-featChip-chev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .MK-menu { transition: none; transform: none; }
}

/* ── Back to top: floating circle, fades with scroll ────────────── */
.MK-toTop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: var(--mk-dark);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px -12px rgba(12, 43, 40, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease, background 0.2s ease, visibility 0s linear 0.28s;
  cursor: pointer;
}
.MK-toTop--show {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.28s ease, transform 0.28s ease, background 0.2s ease;
}
.MK-toTop:hover { background: var(--mk-dark-press); }

/* ── Touch screens: hover language is desktop-only. Taps must not
   leave stuck underlines, colour shifts or highlight flashes on the
   header, drawer or footer links. (Late in the file so these outrank
   the base hover rules at equal specificity.) ─────────────────────── */
@media (max-width: 900px) {
  .MK-header a,
  .MK-header button,
  .MK-nav a,
  .MK-footer a,
  .MK-footer button {
    -webkit-tap-highlight-color: transparent;
  }
  .MK-nav a::after,
  .MK-loginlink::after,
  .MK-footer nav .MK-footcol a::after,
  .MK-footer nav .MK-footcol button::after {
    display: none;
  }
  .MK-footer nav .MK-footcol a:hover,
  .MK-footer nav .MK-footcol button:hover {
    color: rgba(var(--mk-ondark-rgb), 0.82);
  }
  .MK-footer-legal a:hover { color: rgba(var(--mk-ondark-rgb), 0.55); }
  .MK-nav a:hover { color: #ffffff; }
}

/* ── Screenshot lightbox: tap a phone render to view it full screen ── */
.MK-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 16, 17, 0.92);
  cursor: zoom-out;
}
.MK-lightbox img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.MK-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}