/* Styling for the SHARED body sections: intro, the product
   TOUR, integrations strip, founder strip, CTA card. Loaded by every
   page and fully self-contained (palette literals), so the block
   renders identically under any hero.

   The TOUR is the centrepiece: a full-bleed dark stage. On desktop
   shell.js pins it to the viewport and scroll scrubs through the ten
   features (chips + clay progress on top, text left, drawer-size
   renders right). Without JS, or under 1100px, the same markup lays
   out as stacked dark slides. */

.MK-secwrap {
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 clamp(24px, 3vw, 48px);
}
/* The shared body owns its base font (on the home page it lives outside
   .LP, which was what carried Inter - without this it fell to serif). */
.MK-secwrap,
.MK-tour,
.MK-footer {
  font-family: var(--mk-font-body);
}

/* ── Kicker ─────────────────────────────────────────────────────── */
.MK-secwrap .MK-kicker,
.MK-why .MK-kicker,
.MK-tour .MK-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mk-teal);
  margin: 0 0 16px;
}
.MK-secwrap .MK-kicker::before,
.MK-why .MK-kicker::before,
.MK-tour .MK-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mk-clay);
}

/* ── Intro ──────────────────────────────────────────────────────── */
.MK-secwrap .MK-secintro {
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(48px, 6vw, 88px);
  max-width: 1080px;
}
.MK-secwrap .MK-secintro h2 {
  font-family: var(--mk-font-display);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 20px;
  color: var(--mk-dark);
}
.MK-secwrap .MK-accent { color: var(--mk-teal); }
.MK-secwrap .MK-secintro-lede {
  font-size: clamp(15.5px, 1.25vw, 17.5px);
  line-height: 1.65;
  color: var(--mk-ink-body);
  margin: 0 0 34px;
  max-width: 860px;
}
/* The four promises: a slim editorial strip, clay ticks */
.MK-secwrap .MK-promises {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
  border-top: 1px solid rgba(var(--mk-dark-rgb), 0.12);
  padding-top: 26px;
}
.MK-secwrap .MK-promises p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mk-ink-body);
  padding-left: 20px;
  position: relative;
}
.MK-secwrap .MK-promises p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--mk-clay);
}
.MK-secwrap .MK-promises strong {
  display: block;
  color: var(--mk-dark);
  font-weight: 700;
  margin-bottom: 2px;
}

/* ── Core tasks: full-height light section just before the tour ─── */
.MK-tasks {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 100dvh;
  background: var(--mk-dark);
  background-image: var(--mk-dark-grad);
  background-size: var(--mk-dark-grad-size);
  background-blend-mode: var(--mk-dark-grad-blend);
  border-bottom: 2px solid rgba(255, 255, 255, 0.18); /* rules off before the tour */
  position: relative;
}
/* the hero's scroll cue, restated in dark teal for the overview */
.MK-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--mk-dark);
  /* typography matches the hero cue exactly (the section sits outside
     the Inter-scoped wrappers, so the family must be explicit) */
  font-family: var(--mk-font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.MK-scrollcue-line {
  width: 1.5px;
  height: 32px;
  background: linear-gradient(rgba(var(--mk-dark-rgb), 0), rgba(var(--mk-dark-rgb), 0.95));
  animation: mkCue 1.8s cubic-bezier(0.409, 0.001, 0.094, 0.983) infinite;
}
@keyframes mkCue {
  0% { transform: scaleY(0.3); transform-origin: top; opacity: 0.3; }
  55% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.3); transform-origin: bottom; opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) { .MK-scrollcue-line { animation: none; } }
.MK-tasks > .MK-secwrap { width: 100%; }
/* Labelled divider between the heading and the tile grid */
.MK-coredivide {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: clamp(18px, 2.6vh, 30px) 0 clamp(24px, 3.4vh, 40px);
}
.MK-coredivide span {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(var(--mk-dark-rgb), 0.16);
}
.MK-coredivide em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mk-clay);
  white-space: nowrap;
}
/* Overview reads on the dark band */
.MK-tasks .MK-secintro h2 { color: #ffffff; }
.MK-tasks .MK-accent {
  color: var(--mk-clay);
  font-weight: 300;
  letter-spacing: -0.03em;
}
.MK-tasks .MK-coredivide span { background: rgba(255, 255, 255, 0.18); }
.MK-tasks .MK-coredivide em { color: #ffffff; }
.MK-tasks .MK-coretile {
  background: var(--mk-dark-press);
  border-color: rgba(255, 255, 255, 0.14);
}
.MK-tasks .MK-coretile:hover { background: var(--mk-dark); border-color: var(--mk-seaglass); }
.MK-tasks .MK-scrollcue { color: #ffffff; transition: opacity 300ms ease; }
.MK-tasks .MK-scrollcue-line {
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
}
/* Headings read centred; the grid inside stays left-set */
.MK-tasks .MK-secintro { margin: 0 auto; text-align: center; }
.MK-tasks .MK-secintro .MK-coregrid { text-align: left; }
.MK-coreband .MK-secwrap { text-align: center; }
.MK-coreband .MK-secintro-lede { margin-left: auto; margin-right: auto; }
.MK-coreband {
  position: relative; /* anchors the corner logo */
  /* border-box or min-height:100dvh + padding overshoots the viewport
     (no global reset on these pages - the height-lock bug's root) */
  box-sizing: border-box;
  background: var(--mk-dark);
  background-image: var(--mk-dark-grad);
  background-size: var(--mk-dark-grad-size);
  background-blend-mode: var(--mk-dark-grad-blend);
  display: flex;
  flex-direction: column;
  /* centre the cluster: spare height sits above the title and below
     the tiles, so both hug the constellation */
  justify-content: center;
  align-items: stretch;
  gap: clamp(10px, 1.6vh, 22px);
  min-height: 100dvh;
  padding: clamp(18px, 2.4vh, 36px) 0;
}
.MK-coreband .MK-coreband-top h3 { margin-bottom: 8px; }
/* The category line rides as a follow-on to the headline: same size,
   the light weight Paid. carries - the two-line heading pattern */
.MK-coreband .MK-coreband-top .MK-secintro-lede {
  margin-bottom: 0;
  max-width: none;
  font-family: var(--mk-font-display);
  /* 0.88 of the headline - the tour follow-ons' ratio */
  font-size: clamp(30px, 3.52vw, 51px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  /* ghost text: the TYPE wears the tiles' glass tone - a whisper of
     white over the dark band, no container */
  color: rgba(255, 255, 255, 0.5);
}

/* ── The order-to-cash constellation: staggered clay stars on the
   dark ground, spider bloom on hover ─────────────────────────────── */
.MK-chainstrip {
  width: 100%;
  /* basis 0: the strip's height is exactly the section's leftover
     share, so the band totals 100dvh instead of content-plus */
  flex: 1 1 0;
  display: flex;
  align-items: stretch;
  min-height: clamp(220px, 24vh, 420px);
  max-height: clamp(300px, 44vh, 500px); /* growth cap keeps the hug */
  overflow: hidden; /* spiders clip at the strip, never scroll the page */
}
.MK-chainwrap { width: 100%; display: flex; }
.MK-chain {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(60px, 8vw, 150px);
}
.MK-chain-const {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.MK-chain-const polyline {
  stroke: var(--mk-clay);
  stroke-width: 1.5;
  /* draw-on: shell.js measures the length into --len; until the
     section reveals, the whole dash sits offset (invisible) */
  stroke-dasharray: var(--len, 0);
  stroke-dashoffset: var(--len, 0);
}
.MK-chainstrip.rv-in .MK-chain-const polyline {
  animation: mkDraw 1500ms cubic-bezier(0.409, 0.001, 0.094, 0.983) 400ms forwards,
    mkLineBreath 6s ease-in-out 2.4s infinite alternate;
}
@keyframes mkDraw { to { stroke-dashoffset: 0; } }
/* travelling flow chevrons: hidden until the line has drawn itself */
.MK-chain-flow {
  stroke: var(--mk-clay);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
  transition: opacity 220ms ease;
}
.MK-chainstrip.rv:not(.rv-in) .MK-chain-flow { opacity: 0; }
.MK-chainstrip.rv-in .MK-chain-flow { animation: mkFlowIn 700ms ease 2100ms backwards; }
@keyframes mkFlowIn { from { opacity: 0; } }
/* with a station open every resting label steps aside too, returning
   as the hover leaves the circle */
.MK-chain--live-open .MK-chain-node:not(.MK-chain-node--open) .MK-chain-title { opacity: 0; }
/* and the rest of the chart steps back slightly - focus on the dock */
.MK-chain-node { transition: opacity 340ms ease; }
.MK-chain-const { transition: opacity 340ms ease; }
.MK-chain--live-open .MK-chain-node:not(.MK-chain-node--open) { opacity: 0.55; }
.MK-chain--live-open .MK-chain-const { opacity: 0.5; }
/* the dock stays pristine: chevrons pause out while a station is open */
.MK-chain--live-open .MK-chain-flow { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .MK-chain-flow { display: none; }
}
@keyframes mkLineBreath { from { opacity: 1; } to { opacity: 0.55; } }
/* stars pop in as the line reaches them. ONE-SHOT ANIMATIONS, not
   transition states: persistent rv-in transition-delays were leaking
   into every later interaction (labels lagged up to 1.74s on close). */
.MK-chainstrip.rv:not(.rv-in) .MK-chain-dot { scale: 0; }
.MK-chainstrip.rv:not(.rv-in) .MK-chain-title { opacity: 0; }
.MK-chainstrip.rv-in .MK-chain-dot {
  animation: mkStarPop 420ms cubic-bezier(0.246, -0.005, 0, 0.995) backwards;
}
.MK-chainstrip.rv-in .MK-chain-title {
  animation: mkTitleIn 400ms ease backwards;
}
@keyframes mkStarPop { from { scale: 0; } }
@keyframes mkTitleIn { from { opacity: 0; } }
.MK-chainstrip.rv-in .MK-chain-node:nth-child(2) .MK-chain-dot { animation-delay: 500ms; }
.MK-chainstrip.rv-in .MK-chain-node:nth-child(3) .MK-chain-dot { animation-delay: 780ms; }
.MK-chainstrip.rv-in .MK-chain-node:nth-child(4) .MK-chain-dot { animation-delay: 1060ms; }
.MK-chainstrip.rv-in .MK-chain-node:nth-child(5) .MK-chain-dot { animation-delay: 1340ms; }
.MK-chainstrip.rv-in .MK-chain-node:nth-child(6) .MK-chain-dot { animation-delay: 1620ms; }
.MK-chainstrip.rv-in .MK-chain-node:nth-child(2) .MK-chain-title { animation-delay: 620ms; }
.MK-chainstrip.rv-in .MK-chain-node:nth-child(3) .MK-chain-title { animation-delay: 900ms; }
.MK-chainstrip.rv-in .MK-chain-node:nth-child(4) .MK-chain-title { animation-delay: 1180ms; }
.MK-chainstrip.rv-in .MK-chain-node:nth-child(5) .MK-chain-title { animation-delay: 1460ms; }
.MK-chainstrip.rv-in .MK-chain-node:nth-child(6) .MK-chain-title { animation-delay: 1740ms; }
/* idle life: a dashed halo slowly orbits every star (and the grown
   ring), alternating direction along the chain */
/* SVG halos (engine-built): the circle's radius is driven per frame,
   the dash pattern is anchored (no redistribution on resize) and the
   dashes MARCH at a constant px/s - identical motion at every size. */
.MK-chain-halo {
  position: absolute;
  inset: -69px;
  width: 160px;
  height: 160px;
  pointer-events: none;
  transition: opacity 260ms ease 140ms; /* eases back as the ring lands */
}
.MK-chain-halo circle {
  fill: none;
  stroke: rgba(var(--mk-clay-rgb), 0.55);
  stroke-width: 1.5;
  /* pathLength=100 units: ~33 dashes that spin as one rigid ring */
  stroke-dasharray: 1.1 1.9;
  animation: mkDashMarch 53s linear infinite;
}
@keyframes mkDashMarch { to { stroke-dashoffset: -100; } }
.MK-chain-node--open .MK-chain-halo { opacity: 0; transition: opacity 200ms ease 220ms; } /* hides late while opening */

.MK-chain-node {
  position: relative;
  width: 22px;
  height: 22px;
  outline: none;
  transform: translateY(var(--dy, 0px)); /* star-map stagger */
  transition: opacity 320ms ease;
}
/* (spotlight dim retired - the distance reshuffle carries the focus;
   everything stays full opacity) */
.MK-chain-node--open { z-index: 5; }
.MK-chain-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* open circle - the dark ground shows through, masking the line */
  background: var(--mk-dark);
  border: 2px solid var(--mk-clay);
  transition: opacity 240ms ease 120ms;
}
.MK-chain-node--open .MK-chain-dot { opacity: 0; transition-delay: 0ms; }
/* the grow-ring: scales outward from the star's centre to the halo's
   size, then the contents arrive; on close the contents clear first
   and the ring collapses back to the centre */
.MK-chain-node::after {
  content: "";
  position: absolute;
  inset: -63px;
  border: 2px solid var(--mk-clay);
  border-radius: 50%;
  background: var(--mk-dark);
  transform: scale(0.135);
  opacity: 0;
  pointer-events: none;
  transition: transform 400ms cubic-bezier(0.409, 0.001, 0.094, 0.983),
    opacity 200ms ease 120ms;
}
.MK-chain-node--open::after {
  transform: scale(1);
  opacity: 1;
  transition: transform 460ms cubic-bezier(0.409, 0.001, 0.094, 0.983),
    opacity 180ms ease;
}
.MK-chain-title,
.MK-chain-tag,
.MK-chain-bigicon,
.MK-chain-spider { z-index: 1; }
.MK-chain-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 20px);
  font-family: var(--mk-font-display);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
  transition: transform 440ms cubic-bezier(0.409, 0.001, 0.094, 0.983),
    font-size 300ms ease, opacity 320ms ease 140ms;
}
/* after a close the label waits for the ring to land, then fades back
   in at its home position (engine holds --settle ~800ms). The second
   selector outweighs the strip-reveal rule, which was silently winning
   and letting the label snap straight back. */
.MK-chain-node--settle .MK-chain-title,
.MK-chainstrip.rv-in .MK-chain-node--settle .MK-chain-title {
  opacity: 0;
  transition: none;
}
.MK-chain-node--open .MK-chain-title {
  transform: translate(-50%, calc(-50% - 14px));
  font-size: 12.5px;
  transition-delay: 300ms;
}
/* one small line of subtext joins the title inside the grown ring */
.MK-chain-tag {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 2px);
  width: 130px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease,
    transform 300ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-chain-node--open .MK-chain-tag {
  opacity: 1;
  transform: translate(-50%, 8px);
  transition-delay: 400ms;
}
/* station icon crowns the grown ring */
.MK-chain-bigicon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54px);
  color: var(--mk-clay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease,
    transform 300ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-chain-bigicon .MK-panelicon svg { width: 18px; height: 18px; }
.MK-chain-node--open .MK-chain-bigicon {
  opacity: 1;
  transform: translate(-50%, -50px);
  transition-delay: 380ms;
}
/* Spider: five spokes from the circle, labels upright at the tips,
   the whole bloom gently orbiting (labels counter-orbit to stay
   readable). */
.MK-chain-spider {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 0s 260ms;
  animation: mkOrbit 8s ease-in-out infinite alternate;
  pointer-events: none;
}
.MK-chain-node--open .MK-chain-spider {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease 60ms, visibility 0s;
}
.MK-chain-spoke {
  position: absolute;
  left: 0;
  top: 0;
  width: 158px;
  height: 0;
  transform: rotate(var(--a));
  transform-origin: left center;
}
.MK-chain-spoke::before {
  content: "";
  position: absolute;
  left: 80px;
  top: 0;
  width: 66px;
  height: 2px;
  border-radius: 1px;
  background: var(--mk-clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-chain-node--open .MK-chain-spoke::before {
  transform: scaleX(1);
  transition-delay: 420ms;
}
.MK-chain-sub {
  position: absolute;
  left: 158px;
  top: 0;
  transform: translate(-50%, -50%) rotate(var(--ai));
  animation: mkOrbitSub 8s ease-in-out infinite alternate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mk-dark);
  white-space: nowrap;
  background: #ffffff;
  padding: 6px 13px;
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
  opacity: 0;
  scale: 0.88; /* standalone property: composes with the orbit's transform */
  transition: opacity 200ms ease, scale 200ms ease;
}
.MK-chain-sub .MK-panelicon { color: inherit; } /* icon matches the text */
.MK-chain-sub .MK-panelicon svg { width: 13px; height: 13px; }
.MK-chain-node--open .MK-chain-sub {
  opacity: 1;
  scale: 1;
  transition-duration: 520ms;
  transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
}
.MK-chain-node--open .MK-chain-spoke:nth-child(1) .MK-chain-sub { transition-delay: 430ms; }
.MK-chain-node--open .MK-chain-spoke:nth-child(2) .MK-chain-sub { transition-delay: 470ms; }
.MK-chain-node--open .MK-chain-spoke:nth-child(3) .MK-chain-sub { transition-delay: 510ms; }
.MK-chain-node--open .MK-chain-spoke:nth-child(4) .MK-chain-sub { transition-delay: 550ms; transition-duration: 620ms; }
.MK-chain-node--open .MK-chain-spoke:nth-child(5) .MK-chain-sub { transition-delay: 580ms; transition-duration: 760ms; }
@keyframes mkOrbit {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}
@keyframes mkOrbitSub {
  from { transform: translate(-50%, -50%) rotate(calc(var(--ai) + 3deg)); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--ai) - 3deg)); }
}
/* Big icons crown the promise tiles */
.MK-coreband .MK-promises .MK-panelicon {
  display: block;
  margin: 0 auto 10px;
  color: var(--mk-seaglass);
}
.MK-coreband .MK-promises .MK-panelicon svg {
  width: 26px;
  height: 26px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .MK-coreband { min-height: 0; }
  .MK-chainstrip { min-height: 0; padding: 26px 0; }
  .MK-chain { flex-wrap: wrap; gap: 26px 34px; justify-content: center; padding: 0 20px; }
  .MK-chain-const { display: none; }
  .MK-chain-spider { display: none; }
  .MK-chain-node { width: auto; height: auto; transform: none; }
  .MK-chain-dot { position: static; transform: none; display: block; margin: 0 auto 8px; }
  .MK-chain-title { position: static; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .MK-chain-spider, .MK-chain-sub, .MK-chain-halo circle,
  .MK-chainstrip.rv-in .MK-chain-const polyline { animation: none; }
  .MK-chain-sub { transform: translate(-50%, -50%) rotate(var(--ai)); }
  .MK-chain-const polyline { stroke-dasharray: none; stroke-dashoffset: 0; }
  .MK-chainstrip.rv .MK-chain-dot { scale: 1; }
  .MK-chainstrip.rv .MK-chain-title { opacity: 1; }
}
.MK-coreband .MK-secwrap { width: 100%; }
.MK-coreband h3 {
  font-family: var(--mk-font-display);
  font-size: clamp(34px, 4vw, 58px); /* matches the intro h2 */
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #ffffff;
  margin: 0 0 clamp(6px, 1vh, 12px); /* the ghost line hugs as a second heading row */
}
.MK-coreband h3 em {
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--mk-clay);
}
.MK-coregrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.MK-coretile {
  /* Dark tiles on the light section - the panels' deep teal */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
  border-radius: 12px;
  background: var(--mk-dark);
  border: 1px solid var(--mk-dark);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease,
    transform 220ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-coretile:hover {
  background: var(--mk-dark-press);
  transform: translateY(-2px);
  text-decoration: none;
}
.MK-coretile .MK-panelicon { color: var(--mk-clay); flex: 0 0 auto; }
.MK-coretile .MK-panelicon svg { width: 20px; height: 20px; }
.MK-coretile-head { display: flex; align-items: center; gap: 12px; }
.MK-coretile-copy {
  color: rgba(var(--mk-ondark-rgb), 0.72);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
/* The dark band now carries the Ordered/Delivered pitch + promises */
.MK-coreband .MK-secintro-lede { color: rgba(var(--mk-ondark-rgb), 0.86); }
/* The four promises render as centred tiles on the dark band */
.MK-coreband .MK-promises {
  border-top: 0;
  padding-top: 0;
  gap: 14px;
  /* squarer tiles: the row narrows and each card deepens */
  max-width: 1080px; /* wide enough for each promise line unwrapped */
  margin-left: auto;
  margin-right: auto;
}
.MK-coreband .MK-promises p {
  color: rgba(var(--mk-ondark-rgb), 0.8);
  font-size: 13.5px;
  line-height: 1.5;
  padding: 20px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.MK-coreband .MK-promises p::before { display: none; }
.MK-coreband .MK-promises strong { color: var(--mk-clay); margin-bottom: 4px; }
@media (max-width: 1100px) {
  .MK-coregrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .MK-coregrid { grid-template-columns: 1fr; }
}

/* ── The product tour ───────────────────────────────────────────── */
.MK-tour {
  /* Neutral pale stage - the drawer's grey. The COLOUR lives on each
     feature's text panel block and the chip strip. */
  background: var(--mk-stage);
  position: relative;
}
.MK-tour-pin { position: relative; }
.MK-tour-inner {
  /* FULL-BLEED, like the drawer. The panel block runs flush to the
     screen edge; the head strip and stage pad themselves. */
  padding: 0;
  display: flex;
  flex-direction: column;
}
.MK-tour-head { display: none; }

/* Static / mobile / no-JS: stacked dark slides */
.MK-tour-item {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.MK-tour-item + .MK-tour-item { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.MK-tour-text {
  /* Sloped so mid-size desktops keep a workable text column: 398px
     @1920 (heading room), 520px cap from ~2410, 300px floor on
     laptops. The stage's plain padding supplies the panel gap. */
  flex: 0 0 clamp(300px, calc(24.7vw - 76px), 520px);
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Side padding slopes gentler than the panel width, so mid-size
     desktops (1080p) keep a usable text column: 42px/side at 1920
     (was capped 56px), same 48px feel from ~2200 up. */
  padding: clamp(28px, 3vw, 56px) clamp(26px, 2.2vw, 48px);
  background: var(--mk-dark);
  background-image: var(--mk-dark-grad);
  background-size: var(--mk-dark-grad-size);
  background-blend-mode: var(--mk-dark-grad-blend);
}
/* Big ghost index, bottom-left of the reading panel */
.MK-ghostnum {
  position: absolute;
  bottom: clamp(18px, 2vw, 34px);
  left: clamp(24px, 2.6vw, 48px);
  font-family: var(--mk-font-display);
  font-size: clamp(64px, 6.4vw, 118px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
  user-select: none;
}
/* Deck-style kicker: line icon inline before the caption */
.MK-panelicon {
  display: inline-flex;
  color: inherit;
}
.MK-panelicon svg {
  width: 19px;
  height: 19px;
  display: block;
}

.MK-tour-text h3 {
  font-family: var(--mk-font-display);
  /* Mobile/stacked fallback; ≥1100px the size is derived from the
     panel column itself (below) so line breaks never move. */
  font-size: clamp(34px, 2.9vw, 60px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.07;
  margin: 0 0 14px;
  color: #ffffff;
}
/* Learn more pill under a panel's bullets */
.MK-tour-more { margin-top: 10px; align-self: flex-start; }
/* Follow-on heading line: same size as the main title, lighter
   weight, teal spark - the title stays white and full weight. */
.MK-hsub {
  display: block;
  /* Slightly under the title (0.88em) with tighter tracking: what it
     takes to hold "Fully White-Label." on ONE row in the panel column
     at every width - full size needs ~335px against 314px available. */
  font-size: 0.88em;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--mk-clay);
}
/* Ratio-locked headings: the size is a fixed fraction (0.178) of the
   panel's TEXT COLUMN (basis minus both side paddings), so the
   heading-to-column ratio - and therefore every line break - is
   identical at 1080p, 2K and beyond. ~56px at 1920, ~75px at 2560. */
@media (min-width: 1100px) {
  .MK-tour-text h3 {
    font-size: calc((clamp(300px, 24.7vw - 76px, 520px) - 2 * clamp(26px, 2.2vw, 48px)) * 0.178);
  }
}
.MK-tour .MK-kicker { color: var(--mk-seaglass); } /* softened sea-glass teal */
/* The icon replaces the clay dot on tour kickers */
.MK-tour .MK-kicker::before { display: none; }
.MK-tour-text p {
  color: rgba(var(--mk-ondark-rgb), 0.86);
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
}
.MK-tour-text ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(var(--mk-ondark-rgb), 0.86);
  font-size: 14.5px;
}
.MK-tour-text li {
  padding: 6px 0 6px 26px;
  position: relative;
  line-height: 1.5;
}
.MK-tour-text li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--mk-clay);
}
.MK-tour-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: min(72dvh, 760px);
  padding: clamp(20px, 2.5vw, 48px);
}
/* In the pinned tour the stage owns the full layer height */
.MK-tour--pin .MK-tour-stage { align-items: center; }

/* PINNED mode (shell.js adds MK-tour--pin on desktop): the tour holds
   the viewport while scroll scrubs through the items. */
.MK-tour--pin .MK-tour-pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
}
.MK-tour--pin .MK-tour-inner { height: 100%; position: relative; }
/* Solid underlay behind the panel column: the items crossfade above it,
   so the reading panel never flashes pale mid-swap. */
.MK-tour--pin .MK-tour-inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* The panel is content-box: its real width = flex basis + the two
     side paddings. The underlay spans all of it PLUS an overshoot so
     the green runs on under the preview, which sits on top of it -
     the split reads layered, not butted. */
  width: calc(clamp(300px, calc(24.7vw - 76px), 520px) + 2 * clamp(26px, 2.2vw, 48px) + clamp(56px, 6vw, 130px));
  background: var(--mk-dark);
  background-image: var(--mk-dark-grad);
  background-size: var(--mk-dark-grad-size);
  background-blend-mode: var(--mk-dark-grad-blend);
}
/* The bar OVERLAYS the split: the panel colour and the pale stage run
   to the very top of the pin, and the bar floats on top of both. */
.MK-tour--pin .MK-tour-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px clamp(20px, 2.5vw, 48px) 12px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  min-width: 0;
  /* The bar is ONE unit - green band + contents - fading in together
     over the split (the split alone shows until the tour pins). */
  background: var(--mk-dark);
  background-image: var(--mk-dark-grad);
  background-size: var(--mk-dark-grad-size);
  background-blend-mode: var(--mk-dark-grad-blend);
  opacity: 0;
  transition: opacity 400ms ease;
}
.MK-tour--live .MK-tour-head { opacity: 1; }
.MK-tour--pin .MK-tour-head::-webkit-scrollbar { display: none; }
.MK-tour--pin .MK-tour-head .MK-tour-chip { flex: 0 0 auto; }
.MK-tour-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--mk-dark);
  color: rgba(var(--mk-ondark-rgb), 0.8);
  /* explicit family: the chip also serves the intro bar, whose parent
     is the body (font:inherit picked up the browser serif there) */
  font-family: var(--mk-font-body);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.MK-tour-chip svg { width: 15px; height: 15px; }
/* Strip layout: logo left, chips centred, Home right */
.MK-tour-logopill { flex: 0 0 auto; display: inline-flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.MK-tour-logo { height: 24px; width: auto; display: block; }
.MK-tour-chiprow {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  /* centred when everything fits; from the left edge when width is
     tight (safe center never clips the first chips unreachable) */
  justify-content: safe center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 3px 100px; /* rings never touch the row edges */
  /* generous edge fades: cut-off chips melt away well before the logo
     and Top button, reading as breathing room at each end */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
}
.MK-tour-chiprow::-webkit-scrollbar { display: none; }
.MK-tour-home { flex: 0 0 auto; }
.MK-tour-chip:hover { border-color: rgba(127, 207, 194, 0.6); color: #ffffff; }
.MK-tour-chip--active {
  background: var(--mk-dark-press);
  border-color: var(--mk-seaglass);
  color: #ffffff;
}
/* Clay progress line under the chips */
.MK-tour-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 1px;
  overflow: hidden;
}
.MK-tour-progress span {
  display: block;
  height: 100%;
  background: var(--mk-clay);
  transform: scaleX(0);
  transform-origin: left;
}
.MK-tour--pin .MK-tour-layers {
  position: relative;
  height: 100%;
}
/* content clears the floating bar */
.MK-tour--pin .MK-tour-text { padding-top: 84px; }
/* The static underlay paints the panel ground; a per-item copy would
   crossfade against it during swaps and band mid-fade. */
.MK-tour--pin .MK-tour-item .MK-tour-text { background: none; }
.MK-tour--pin .MK-tour-stage { padding-top: 80px; }
.MK-tour--pin .MK-tour-item {
  position: absolute;
  inset: 0;
  padding: 0;
  border-top: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}
.MK-tour--pin .MK-tour-item--active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
/* Stacked fade: the just-left item (engine adds --prev for ~340ms)
   stays FULLY opaque beneath the incoming fade, so the swap reads as
   one solid image melting into the next - the backdrop and the green
   overshoot never show through. On release it eases out under an
   already-opaque active layer. */
.MK-tour--pin .MK-tour-item--prev {
  opacity: 1;
  z-index: 1;
  transition: none;
}
/* Graceful swap choreography: the panel text fades and rises in a
   stagger (kicker, title, copy, bullets), the stage settles separately.
   Outgoing items simply fade - no motion on exit. */
.MK-tour--pin .MK-tour-item .MK-tour-text > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease,
    transform 480ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-tour--pin .MK-tour-item--active .MK-tour-text > * {
  opacity: 1;
  transform: none;
}
.MK-tour--pin .MK-tour-item--active .MK-tour-text > :nth-child(1) { transition-delay: 60ms; }
.MK-tour--pin .MK-tour-item--active .MK-tour-text > :nth-child(2) { transition-delay: 130ms; }
.MK-tour--pin .MK-tour-item--active .MK-tour-text > :nth-child(3) { transition-delay: 210ms; }
.MK-tour--pin .MK-tour-item--active .MK-tour-text > :nth-child(4) { transition-delay: 290ms; }
.MK-tour--pin .MK-tour-item--active .MK-tour-text > :nth-child(5) { transition-delay: 360ms; }
.MK-tour--pin .MK-tour-item--active .MK-tour-text > :nth-child(6) { transition-delay: 430ms; }
.MK-tour--pin .MK-tour-item--active .MK-tour-text > :nth-child(7) { transition-delay: 500ms; }
/* bullets cascade individually inside their list */
.MK-tour--pin .MK-tour-item .MK-tour-text li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms ease,
    transform 420ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-tour--pin .MK-tour-item--active .MK-tour-text li { opacity: 1; transform: none; }
.MK-tour--pin .MK-tour-item--active .MK-tour-text li:nth-child(1) { transition-delay: 280ms; }
.MK-tour--pin .MK-tour-item--active .MK-tour-text li:nth-child(2) { transition-delay: 350ms; }
.MK-tour--pin .MK-tour-item--active .MK-tour-text li:nth-child(3) { transition-delay: 420ms; }
.MK-tour--pin .MK-tour-item--active .MK-tour-text li:nth-child(4) { transition-delay: 490ms; }
/* The settle runs on BOTH stacked layers at once: --active and --prev
   are toggled in the same frame, so their animations start together and
   the two screenshots drift home in lockstep - no double-image smear,
   just one solid picture bumping while it melts into the next. NO
   opacity in the keyframe; the stacked fade owns visibility. */
.MK-tour--pin .MK-tour-item--active .MK-tour-stage {
  animation: mkStageIn 650ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
/* Twin keyframes under a different NAME: the outgoing item flips
   straight from --active to --prev, and a changed animation-name is
   what forces its restart in the same frame as the incoming one. */
.MK-tour--pin .MK-tour-item--prev .MK-tour-stage {
  animation: mkStageInB 650ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
@keyframes mkStageIn {
  from { transform: translateY(8px) scale(0.99); }
  to { transform: none; }
}
@keyframes mkStageInB {
  from { transform: translateY(8px) scale(0.99); }
  to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .MK-tour--pin .MK-tour-item .MK-tour-text > *,
  .MK-tour--pin .MK-tour-item .MK-tour-text li,
  .MK-tour--pin .MK-tour-item .MK-tour-stage {
    transition: none;
    animation: none;
    transform: none;
    opacity: 1;
  }
}
.MK-tour--pin .MK-tour-stage { min-height: 0; }
.MK-tour--settle .MK-tour-item { transition: none; }

/* ── Stage furniture (browser shell, phones, documents) ─────────── */
.MK-fs-browser {
  width: fit-content;
  max-width: calc(100% - clamp(12px, 1.5vw, 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e3e6ea;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.MK-fs-bar {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
}
.MK-fs-bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d1d5db;
}
.MK-fs-bar span + span { margin-left: -5px; }
.MK-fs-url {
  flex: 1;
  height: 22px;
  border-radius: 7px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 12.5px;
  color: #6b7280;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.MK-fs-browser img {
  display: block;
  width: auto;
  max-width: 100%;
  /* Fill the pinned stage like the drawer did - viewport-driven, no
     pixel ceiling, so big monitors get BIG renders. 240px covers the
     chip strip, paddings and the browser bar. */
  max-height: calc(100dvh - 240px);
}
.MK-fs-phone {
  position: absolute;
  right: clamp(158px, calc(3.4vw + 114px), 192px); /* follows the stage's deeper left inset */
  bottom: clamp(18px, 3.4vh, 46px);
  z-index: 2;
  /* 20% up from 0.62 - the right/bottom anchor grows it up and left */
  height: calc((100dvh - 240px) * 0.856);
  aspect-ratio: 9 / 19;
  background: #101418;
  border-radius: clamp(18px, 2.4vh, 28px);
  padding: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
.MK-fs-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: clamp(13px, 1.9vh, 22px);
  display: block;
}
.MK-fs-phones {
  position: absolute;
  right: clamp(158px, calc(3.4vw + 114px), 192px); /* follows the stage's deeper left inset */
  bottom: clamp(18px, 3.4vh, 46px);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: clamp(12px, 1.2vw, 22px);
}
.MK-fs-phones .MK-fs-phone { position: static; }
.MK-fs-appphone {
  height: calc((100dvh - 240px) * 0.856);
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.4));
}
/* The docwrap IS the browser box's envelope: identical height (img
   max-height + 34px bar), identical width cap, same flex placement -
   so swapping between docs and any desktop render happens inside one
   constant frame, no chasing offsets. */
.MK-fs-docwrap {
  position: relative;
  box-sizing: content-box;
  width: calc(100% - clamp(12px, 1.5vw, 40px));
  /* Height derives exactly as the browser box's does: the screenshots
     are all 16:9, so ratio height + the 36px bar as padding (content-
     box keeps the ratio on the image area alone), capped like the img
     max-height for tall windows. Docs span the padding box = the full
     envelope, bar included. */
  aspect-ratio: 16 / 9;
  padding-top: 36px;
  max-height: calc(100dvh - 242px);
}
.MK-fs-doc {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  background: #ffffff;
}
.MK-fs-doc--1 { left: 0; z-index: 1; }
.MK-fs-doc--2 { left: 50%; transform: translateX(-50%); z-index: 2; }
.MK-fs-doc--3 { right: 0; z-index: 3; }
/* Payment & Accounts logo rows (dark panel) */
.MK-sec-logos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 30px; /* clear air below the Learn more pill */
}
.MK-sec-logorow { display: flex; align-items: center; gap: 22px; }
.MK-sec-logorow + .MK-sec-logorow {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding-top: 12px;
}
.MK-sec-logorow img { height: 28px; width: auto; display: block; opacity: 0.92; }
.MK-sec-logo-xero { height: 25px !important; }
.MK-sec-logo-qb { height: 32px !important; }

/* ── The gauge: right-edge tour instrument ──────────────────────── */
.MK-smap {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
  user-select: none;
}
.MK-smap--show { opacity: 1; pointer-events: auto; }
.MK-smap-tick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.MK-smap-tickline {
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: rgba(var(--mk-dark-rgb), 0.3);
  opacity: 0.6;
  transition: background 200ms ease, opacity 200ms ease,
    width 260ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-smap:hover .MK-smap-tickline { opacity: 1; }
.MK-smap-tick:hover .MK-smap-tickline { background: var(--mk-teal); width: 36px; }
.MK-smap-tick--active .MK-smap-tickline { background: var(--mk-clay); width: 42px; height: 3px; opacity: 1; }
/* Scrolled-past features read as done: clay, quiet, no fly-out */
.MK-smap-tick--past .MK-smap-tickline { background: var(--mk-clay); opacity: 0.85; }
.MK-smap-tick--past:hover .MK-smap-tickline { background: var(--mk-clay); width: 28px; }
.MK-smap-minor {
  display: block;
  width: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: rgba(var(--mk-dark-rgb), 0.16);
  opacity: 0.6;
  transition: background 220ms ease, opacity 220ms ease;
  pointer-events: none;
}
.MK-smap:hover .MK-smap-minor { opacity: 1; }
.MK-smap-minor--lit { background: var(--mk-clay); }@media (max-width: 1100px) { .MK-smap { display: none; } }/* ── CTA card ───────────────────────────────────────────────────── */
/* ── Testimonials: our take on the speech-bubble card ──────────── */
/* Closing act: testimonial + CTA card share one viewport-locked
   section - and SNAPS into place as you leave the tour, for impact */
@media (min-width: 1100px) {
  html { scroll-snap-type: y proximity; }
  .MK-closing {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}
.MK-closing {
  box-sizing: border-box;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0;
  padding-bottom: 0;
}
/* the testimonial rides a full-bleed stage-grey band - colour in the
   white closing act */
.MK-closing .MK-testi {
  /* top HALF: grey band, testimonial centred vertically in it */
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  margin: 0 0 0 calc(50% - 50vw);
  width: 100vw;
  background: var(--mk-dark);
  background-image: var(--mk-dark-grad);
  background-size: var(--mk-dark-grad-size);
  background-blend-mode: var(--mk-dark-grad-blend);
  padding: clamp(20px, 3vh, 36px) 0;
}
.MK-closing .MK-testi .MK-testi-row { flex: 1 1 auto; }
/* bottom HALF: soft teal backdrop, CTA card centred in it */
.MK-ctahalf {
  flex: 1 1 50%;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--mk-dark-press);
  display: flex;
  align-items: center;
}
.MK-secwrap.MK-closing .MK-ctahalf .MK-ctaband {
  margin: 0 auto;
  width: calc(min(1420px, 100vw) - 2 * clamp(24px, 3vw, 48px));
  box-sizing: border-box;
}
.MK-secwrap.MK-closing .MK-ctaband { margin: 0; }
.MK-testi-row {
  /* faux carousel: full-bleed row, one card centred, neighbours
     peeking at the screen edges and melting away */
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(24px, 3vw, 48px);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.MK-testi-card {
  position: relative;
  flex: 0 0 min(820px, 64vw);
  margin: 18px 0 0;
  background: #ffffff; /* pops on the grey band */
  /* bubble: every corner round except the bottom-left tail */
  border-radius: 30px 30px 30px 0;
  padding: clamp(30px, 4vw, 52px) clamp(28px, 4.5vw, 60px) clamp(26px, 3.4vw, 40px);
}
.MK-testi-card blockquote {
  margin: 0;
  padding-right: 40px;
  font-size: clamp(17.5px, 1.6vw, 23px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--mk-dark);
}
.MK-testi-quote {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 34px;
  height: 34px;
  color: var(--mk-clay);
}
.MK-testi-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.MK-testi-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mk-dark);
  color: #ffffff;
  font-family: var(--mk-font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.MK-testi-logo { display: inline-flex; align-items: center; }
/* slim rule between the logo and the attribution */
.MK-testi-logo::after {
  content: "";
  width: 1px;
  height: 26px;
  background: rgba(var(--mk-dark-rgb), 0.25);
  margin-left: 14px;
}
.MK-testi-logo img { height: 28px; width: auto; display: block; }
.MK-testi-who strong { display: block; font-size: 14.5px; color: var(--mk-dark); }
.MK-testi-who em { font-style: normal; font-size: 13px; color: var(--mk-taupe); }
.MK-testi-card--side {
  /* empty shells: the bubble shape alone, no copy - the carousel is
     implied while the single real quote holds all the focus */
  flex-basis: min(600px, 46vw);
  align-self: center;
  min-height: clamp(230px, 25vh, 310px);
  transform: scale(0.92);
  opacity: 0.75;
}
/* the real card: taller, quote top and caption anchored low */
.MK-testi-card:not(.MK-testi-card--side) {
  min-height: clamp(250px, 27vh, 340px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.MK-testi-card--right { border-radius: 30px 30px 0 30px; } /* tail mirrors */
@media (max-width: 900px) {
  .MK-testi-card--side { display: none; }
  .MK-testi-row {
    width: 100%;
    margin-left: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .MK-testi-card { flex: 1 1 auto; }
}

.MK-secwrap .MK-ctaband {
  background: var(--mk-dark);
  border-radius: 24px;
  padding: clamp(44px, 6vw, 80px) clamp(24px, 4vw, 64px);
  text-align: center;
  /* top clearance from the tour (the shorthand had been silently
     resetting an earlier margin-top - keep it ONE declaration) */
  margin: clamp(100px, 14vh, 180px) 0 clamp(48px, 6vw, 88px);
}
.MK-secwrap .MK-ctaband h2 {
  font-family: var(--mk-font-display);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: #ffffff;
}
.MK-secwrap .MK-ctaband .MK-accent { color: var(--mk-seaglass); }
.MK-secwrap .MK-ctaband p { margin: 0 0 26px; color: rgba(var(--mk-ondark-rgb), 0.82); font-size: 15.5px; }
.MK-secwrap .MK-ctarow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Why Mango story (the one-page flow: intro, story, tour) ──── */
.MK-why {
  box-sizing: border-box;
  font-family: var(--mk-font-body);
  width: min(1420px, 100%);
  margin: 0 auto;
  padding: clamp(44px, 5vw, 88px) clamp(24px, 3vw, 48px);
  /* full viewport like its neighbours (the -64px header allowance was
     from its page-hero days) */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  color: var(--mk-ink-body);
}
.MK-why-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 720px);
  gap: clamp(32px, 4vw, 80px);
  align-items: start;
}
.MK-why h2 {
  font-family: var(--mk-font-display);
  font-size: clamp(36px, 5.2vw, 62px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  color: var(--mk-dark);
}
.MK-why .MK-accent { color: inherit; } /* story title runs all dark teal */
/* The pop of colour: a short clay marker under the title */
.MK-why h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--mk-clay);
  margin-top: 20px;
}
.MK-why p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 720px;
}
.MK-why-sign { margin-top: 22px; }
.MK-why-sign strong { display: block; font-size: 16px; color: var(--mk-dark); }
.MK-why-sign span { font-size: 13.5px; color: var(--mk-dark); }
/* Polaroid collage: main shot straight, two overlapping tilted prints */
.MK-collage {
  position: relative;
  aspect-ratio: 97 / 100;
  max-width: 720px;
  margin: 8px auto 0;
  width: 100%;
}
.MK-collage-ph {
  position: absolute;
  background: #fff;
  padding: clamp(7px, 1.4vw, 12px);
  border: 1px solid #e9ebee;
  box-shadow: 0 22px 50px rgba(17, 24, 39, 0.24);
  box-sizing: border-box;
}
.MK-collage-ph img { width: 100%; height: auto; display: block; }
.MK-collage-ph--1 { left: 6%; top: 0; width: 84%; z-index: 1; }
.MK-collage-ph--2 { left: 0; top: 51%; width: 59%; z-index: 2; transform: rotate(-6deg); }
.MK-collage-ph--3 { left: 61%; top: 41%; width: 39%; z-index: 3; transform: rotate(7deg); }
@media (max-width: 960px) {
  .MK-why { min-height: 0; }
  .MK-why-grid { grid-template-columns: 1fr; }
  .MK-collage { margin-top: 20px; }
}

/* Section-level .rv classes are TRIGGERS only - the blanket .rv hide
   in home.css must never blank a whole band (white flash on scroll).
   Children carry all the motion. */
.MK-coreband.rv,
.MK-why.rv,
.MK-chainstrip.rv,
.MK-coreband-bottom.rv {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ── Choreographed reveals: the three pre-tour sections float their
   content in with tour-style staggers when scrolled into view ────── */
.MK-coreband.rv h3,
.MK-coreband.rv .MK-secintro-lede,
.MK-coreband-bottom.rv .MK-promises p,
.MK-why.rv .MK-why-copy > *,
.MK-tasks .MK-secintro.rv h2,
.MK-tasks .MK-secintro.rv .MK-coredivide,
.MK-tasks .MK-secintro.rv .MK-coretile {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.409, 0.001, 0.094, 0.983),
    transform 640ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-why.rv .MK-collage-ph {
  opacity: 0;
  transition: opacity 640ms ease,
    transform 700ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-why.rv .MK-collage-ph--1 { transform: translateY(20px); }
.MK-why.rv .MK-collage-ph--2 { transform: translateY(20px) rotate(-6deg); }
.MK-why.rv .MK-collage-ph--3 { transform: translateY(20px) rotate(7deg); }
.MK-coreband.rv-in h3,
.MK-coreband.rv-in .MK-secintro-lede,
.MK-coreband-bottom.rv-in .MK-promises p,
.MK-why.rv-in .MK-why-copy > *,
.MK-why.rv-in .MK-collage-ph--1,
.MK-tasks .MK-secintro.rv-in h2,
.MK-tasks .MK-secintro.rv-in .MK-coredivide,
.MK-tasks .MK-secintro.rv-in .MK-coretile {
  opacity: 1;
  transform: none;
}
.MK-why.rv-in .MK-collage-ph--2 { opacity: 1; transform: rotate(-6deg); }
.MK-why.rv-in .MK-collage-ph--3 { opacity: 1; transform: rotate(7deg); }
.MK-coreband.rv-in h3 { transition-delay: 60ms; }
.MK-coreband.rv-in .MK-secintro-lede { transition-delay: 150ms; }
.MK-coreband-bottom.rv-in .MK-promises p:nth-child(1) { transition-delay: 120ms; }
.MK-coreband-bottom.rv-in .MK-promises p:nth-child(2) { transition-delay: 200ms; }
.MK-coreband-bottom.rv-in .MK-promises p:nth-child(3) { transition-delay: 280ms; }
.MK-coreband-bottom.rv-in .MK-promises p:nth-child(4) { transition-delay: 360ms; }
.MK-why.rv-in .MK-why-copy > :nth-child(1) { transition-delay: 60ms; }
.MK-why.rv-in .MK-why-copy > :nth-child(2) { transition-delay: 140ms; }
.MK-why.rv-in .MK-why-copy > :nth-child(3) { transition-delay: 220ms; }
.MK-why.rv-in .MK-why-copy > :nth-child(4) { transition-delay: 300ms; }
.MK-why.rv-in .MK-why-copy > :nth-child(5) { transition-delay: 380ms; }
.MK-why.rv-in .MK-why-copy > :nth-child(6) { transition-delay: 460ms; }
.MK-why.rv-in .MK-why-copy > :nth-child(7) { transition-delay: 540ms; }
.MK-why.rv-in .MK-collage-ph--1 { transition-delay: 220ms; }
.MK-why.rv-in .MK-collage-ph--2 { transition-delay: 380ms; }
.MK-why.rv-in .MK-collage-ph--3 { transition-delay: 540ms; }
.MK-tasks .MK-secintro.rv-in h2 { transition-delay: 60ms; }
.MK-tasks .MK-secintro.rv-in .MK-coredivide { transition-delay: 160ms; }
.MK-tasks .MK-secintro.rv-in .MK-coretile:nth-child(1) { transition-delay: 220ms; }
.MK-tasks .MK-secintro.rv-in .MK-coretile:nth-child(2) { transition-delay: 270ms; }
.MK-tasks .MK-secintro.rv-in .MK-coretile:nth-child(3) { transition-delay: 320ms; }
.MK-tasks .MK-secintro.rv-in .MK-coretile:nth-child(4) { transition-delay: 370ms; }
.MK-tasks .MK-secintro.rv-in .MK-coretile:nth-child(5) { transition-delay: 420ms; }
.MK-tasks .MK-secintro.rv-in .MK-coretile:nth-child(6) { transition-delay: 470ms; }
.MK-tasks .MK-secintro.rv-in .MK-coretile:nth-child(7) { transition-delay: 520ms; }
.MK-tasks .MK-secintro.rv-in .MK-coretile:nth-child(8) { transition-delay: 570ms; }
.MK-tasks .MK-secintro.rv-in .MK-coretile:nth-child(9) { transition-delay: 620ms; }
.MK-tasks .MK-secintro.rv-in .MK-coretile:nth-child(10) { transition-delay: 670ms; }
.MK-tasks .MK-secintro.rv-in .MK-coretile:nth-child(11) { transition-delay: 720ms; }
.MK-tasks .MK-secintro.rv-in .MK-coretile:nth-child(12) { transition-delay: 770ms; }
/* children carry the motion - the tasks block itself stays put */
.MK-tasks .MK-secintro.rv { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .MK-coreband.rv h3,
  .MK-coreband.rv .MK-secintro-lede,
  .MK-coreband-bottom.rv .MK-promises p,
  .MK-why.rv .MK-why-copy > *,
  .MK-why.rv .MK-collage-ph,
  .MK-tasks .MK-secintro.rv h2,
  .MK-tasks .MK-secintro.rv .MK-coredivide,
  .MK-tasks .MK-secintro.rv .MK-coretile {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .MK-why.rv .MK-collage-ph--2 { transform: rotate(-6deg); }
  .MK-why.rv .MK-collage-ph--3 { transform: rotate(7deg); }
}

/* ── PRE-TOUR PIN: Introduction / Story / Overview page exactly like
   the tour - a sticky stage, sections as crossfading layers, scroll
   scrubbing between them (engine adds MK-prewrap--pin on desktop;
   mobile/no-JS keeps the natural stacked flow). ────────────────── */
.MK-prewrap--pin { height: calc(3 * 75vh + 100dvh); }
.MK-prewrap--pin .MK-prepin {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
}
.MK-prewrap--pin .MK-presec {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  /* content centres between the 65px bar and the page bottom, not in
     the raw viewport (it rode ~32px high otherwise) */
  padding-top: 65px;
  padding-bottom: 0; /* sections' own bottom paddings skewed the centring */
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms ease;
}
.MK-prewrap--pin .MK-presec--active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.MK-prewrap--pin .MK-presec--prev {
  opacity: 1;
  z-index: 1;
  transition: none;
}
/* the story layer needs an opaque ground and its own centring */
.MK-prewrap--pin .MK-why { background: #ffffff; width: 100%; }
.MK-prewrap--pin .MK-why-grid { max-width: 1324px; margin: 0 auto; }

/* Per-activation entrance choreography (replaces the rv reveals,
   which the engine strips inside the pin) - re-runs on every visit,
   exactly like the tour panels */
@keyframes mkRiseIn {
  from { opacity: 0; transform: translateY(16px); }
}
.MK-prewrap--pin .MK-presec--active .MK-coreband-top h3 { animation: mkRiseIn 600ms cubic-bezier(0.409, 0.001, 0.094, 0.983) 60ms backwards; }
.MK-prewrap--pin .MK-presec--active .MK-coreband-top .MK-secintro-lede { animation: mkRiseIn 600ms cubic-bezier(0.409, 0.001, 0.094, 0.983) 150ms backwards; }
.MK-prewrap--pin .MK-presec--active .MK-chain-const polyline {
  animation: mkDraw 1500ms cubic-bezier(0.409, 0.001, 0.094, 0.983) 400ms forwards,
    mkLineBreath 6s ease-in-out 2.4s infinite alternate;
}
.MK-prewrap--pin .MK-presec--active .MK-chain-dot { animation: mkStarPop 420ms cubic-bezier(0.246, -0.005, 0, 0.995) backwards; }
.MK-prewrap--pin .MK-presec--active .MK-chain-title { animation: mkTitleIn 400ms ease backwards; }
.MK-prewrap--pin .MK-presec--active .MK-chain-node:nth-child(2) .MK-chain-dot { animation-delay: 500ms; }
.MK-prewrap--pin .MK-presec--active .MK-chain-node:nth-child(3) .MK-chain-dot { animation-delay: 780ms; }
.MK-prewrap--pin .MK-presec--active .MK-chain-node:nth-child(4) .MK-chain-dot { animation-delay: 1060ms; }
.MK-prewrap--pin .MK-presec--active .MK-chain-node:nth-child(5) .MK-chain-dot { animation-delay: 1340ms; }
.MK-prewrap--pin .MK-presec--active .MK-chain-node:nth-child(6) .MK-chain-dot { animation-delay: 1620ms; }
.MK-prewrap--pin .MK-presec--active .MK-chain-node:nth-child(2) .MK-chain-title { animation-delay: 620ms; }
.MK-prewrap--pin .MK-presec--active .MK-chain-node:nth-child(3) .MK-chain-title { animation-delay: 900ms; }
.MK-prewrap--pin .MK-presec--active .MK-chain-node:nth-child(4) .MK-chain-title { animation-delay: 1180ms; }
.MK-prewrap--pin .MK-presec--active .MK-chain-node:nth-child(5) .MK-chain-title { animation-delay: 1460ms; }
.MK-prewrap--pin .MK-presec--active .MK-chain-node:nth-child(6) .MK-chain-title { animation-delay: 1740ms; }
.MK-prewrap--pin .MK-presec--active .MK-chain-flow { animation: mkFlowIn 700ms ease 2100ms backwards; }
.MK-prewrap--pin .MK-presec--active .MK-promises p { animation: mkRiseIn 600ms cubic-bezier(0.409, 0.001, 0.094, 0.983) backwards; }
.MK-prewrap--pin .MK-presec--active .MK-promises p:nth-child(1) { animation-delay: 240ms; }
.MK-prewrap--pin .MK-presec--active .MK-promises p:nth-child(2) { animation-delay: 320ms; }
.MK-prewrap--pin .MK-presec--active .MK-promises p:nth-child(3) { animation-delay: 400ms; }
.MK-prewrap--pin .MK-presec--active .MK-promises p:nth-child(4) { animation-delay: 480ms; }
.MK-prewrap--pin .MK-presec--active .MK-why-copy > * { animation: mkRiseIn 600ms cubic-bezier(0.409, 0.001, 0.094, 0.983) backwards; }
.MK-prewrap--pin .MK-presec--active .MK-why-copy > :nth-child(1) { animation-delay: 60ms; }
.MK-prewrap--pin .MK-presec--active .MK-why-copy > :nth-child(2) { animation-delay: 140ms; }
.MK-prewrap--pin .MK-presec--active .MK-why-copy > :nth-child(3) { animation-delay: 220ms; }
.MK-prewrap--pin .MK-presec--active .MK-why-copy > :nth-child(4) { animation-delay: 300ms; }
.MK-prewrap--pin .MK-presec--active .MK-why-copy > :nth-child(5) { animation-delay: 380ms; }
.MK-prewrap--pin .MK-presec--active .MK-why-copy > :nth-child(6) { animation-delay: 460ms; }
.MK-prewrap--pin .MK-presec--active .MK-why-copy > :nth-child(7) { animation-delay: 540ms; }
.MK-prewrap--pin .MK-presec--active .MK-collage-ph { animation: mkTitleIn 640ms ease backwards; }
.MK-prewrap--pin .MK-presec--active .MK-collage-ph--1 { animation-delay: 220ms; }
.MK-prewrap--pin .MK-presec--active .MK-collage-ph--2 { animation-delay: 380ms; }
.MK-prewrap--pin .MK-presec--active .MK-collage-ph--3 { animation-delay: 540ms; }
.MK-prewrap--pin .MK-tasks.MK-presec--active h2 { animation: mkRiseIn 600ms cubic-bezier(0.409, 0.001, 0.094, 0.983) 60ms backwards; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coredivide { animation: mkRiseIn 600ms cubic-bezier(0.409, 0.001, 0.094, 0.983) 160ms backwards; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coretile { animation: mkRiseIn 560ms cubic-bezier(0.409, 0.001, 0.094, 0.983) backwards; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coretile:nth-child(1) { animation-delay: 220ms; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coretile:nth-child(2) { animation-delay: 270ms; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coretile:nth-child(3) { animation-delay: 320ms; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coretile:nth-child(4) { animation-delay: 370ms; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coretile:nth-child(5) { animation-delay: 420ms; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coretile:nth-child(6) { animation-delay: 470ms; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coretile:nth-child(7) { animation-delay: 520ms; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coretile:nth-child(8) { animation-delay: 570ms; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coretile:nth-child(9) { animation-delay: 620ms; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coretile:nth-child(10) { animation-delay: 670ms; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coretile:nth-child(11) { animation-delay: 720ms; }
.MK-prewrap--pin .MK-tasks.MK-presec--active .MK-coretile:nth-child(12) { animation-delay: 770ms; }

/* Pre-tour bar: the tour bar treatment - dark band, logo left, pills
   right, border-bottom, clay progress strip */
.MK-prenav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* matches the tour bar's metrics exactly (border-box, or the
     min-height stacks with padding - the 91px bug) */
  box-sizing: border-box;
  padding: 14px clamp(20px, 2.5vw, 48px) 12px;
  min-height: 65px;
  background: var(--mk-dark);
  background-image: var(--mk-dark-grad);
  background-size: var(--mk-dark-grad-size);
  background-blend-mode: var(--mk-dark-grad-blend);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.MK-prenav--show { opacity: 1; pointer-events: auto; }
.MK-prenav::after {
  /* clay progress strip, scrub-driven (engine streams --pp) */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--mk-clay);
  transform: scaleX(var(--pp, 0));
  transform-origin: left;
}
.MK-prenav-logo {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.MK-prenav-logo img { height: 24px; width: auto; display: block; } /* header/tour logo size */
.MK-prenav-pills {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}
.MK-prenav-link {
  width: 12px;
  height: 1px;
  background: rgba(var(--mk-clay-rgb), 0.7);
}
.MK-prenav-pill {
  font-family: var(--mk-font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mk-clay);
  background: transparent;
  border: 1px solid var(--mk-clay);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  transition: background 240ms ease, color 240ms ease, transform 200ms ease;
}
.MK-prenav-pill:hover { transform: translateY(-1px); }
.MK-prenav-pill--active {
  background: var(--mk-clay);
  color: var(--mk-dark);
}
.MK-premap {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.MK-premap--show { opacity: 1; pointer-events: auto; }
.MK-premap-tick {
  border: 0;
  background: none;
  padding: 5px 0;
  cursor: pointer;
}
.MK-premap-tick span {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 1px;
  background: rgba(var(--mk-clay-rgb), 0.45);
  transition: background 220ms ease, width 260ms cubic-bezier(0.409, 0.001, 0.094, 0.983), height 220ms ease;
}
.MK-premap-tick:hover span { background: var(--mk-clay); }
.MK-premap-tick--active span {
  background: var(--mk-clay);
  width: 36px;
  height: 3px;
}
@media (max-width: 1100px) { .MK-prenav, .MK-premap { display: none; } }

/* ── Reveals (the shared .rv observer adds .rv-in) ──────────────── */
.MK-secwrap .rv,
.MK-why .rv,
.MK-tour .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(0.409, 0.001, 0.094, 0.983);
}
.MK-secwrap .rv.rv-in,
.MK-why .rv.rv-in,
.MK-tour .rv.rv-in { opacity: 1; transform: none; }

/* ── Small screens ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .MK-tour-item { flex-direction: column; }
  .MK-tour-text { flex: 0 0 auto; }
  .MK-tour-stage { min-height: 0; }
  .MK-fs-browser { width: 100%; max-width: 100%; }
  .MK-fs-browser img { max-height: none; width: 100%; }
  .MK-fs-phone, .MK-fs-phones { display: none; }
  .MK-tour-stage--docs { min-height: 58vw; }
  .MK-fs-docwrap { height: 54vw; width: 100%; padding-top: 0; }
}
@media (max-width: 900px) {
  .MK-secwrap .MK-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

/* ── Declared intrinsic ratios for lazy renders ───────────────────
   Containers already size these boxes, but the lazy-load audit wants
   the ratio derivable from style before fetch. Each value matches the
   file's intrinsic ratio, so nothing changes visually; where CSS sets
   both dimensions (the pinned desktop stage), aspect-ratio is inert. */
.MK-fs-phone img { aspect-ratio: 645 / 1398; }
.MK-fs-doc { aspect-ratio: 808 / 1145; }
.MK-collage-ph--1 img { aspect-ratio: 1400 / 997; }
.MK-collage-ph--2 img { aspect-ratio: 862 / 588; }
.MK-collage-ph--3 img { aspect-ratio: 531 / 783; }
.MK-sec-logorow img { aspect-ratio: 800 / 122; }
.MK-sec-logo-xero { aspect-ratio: 859 / 244; }
.MK-sec-logo-qb { aspect-ratio: 2345 / 600; }
.MK-testi-logo img { aspect-ratio: 776 / 296; }

/* ── Mobile (≤900px): carousels, phone renders, stacked CTAs ──────── */
.MK-tour-dots { display: none; }
.MK-core-dots { display: none; }
@media (max-width: 900px) {
  /* width:100% variants are content-box, so side paddings overhung the
     viewport by 48px and clipped headings; border-box on phones. */
  .MK-secwrap { box-sizing: border-box; }

  /* The constellation is a pointer instrument; phones skip it */
  .MK-chainstrip { display: none; }

  /* Feature tiles: swipe pages of three stacked cards, dots below
     (shell.js builds and syncs them) */
  .MK-tasks .MK-secintro .MK-coregrid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none; /* the tablet 2-col template must not leak in */
    grid-template-rows: repeat(3, 1fr);
    grid-auto-columns: 100%;
    gap: 10px 12px;
    margin: 0 calc(-1 * clamp(24px, 3vw, 48px));
    padding: 4px clamp(24px, 3vw, 48px) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 clamp(24px, 3vw, 48px);
    scrollbar-width: none;
  }
  .MK-tasks .MK-secintro .MK-coregrid::-webkit-scrollbar { display: none; }
  .MK-tasks .MK-secintro .MK-coretile {
    box-sizing: border-box;
    scroll-snap-align: start;
  }
  .MK-core-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 0;
  }
  .MK-core-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
  }
  .MK-core-dots button.is-on { background: var(--mk-clay); }

  /* Product tour: a deck of dark feature cards on the pale stage -
     swipe sideways with neighbours peeking at the edges. Each card
     leads with copy, then its phone render, cropped to keep the card
     height in check and tappable (zoom badge) to view full screen. */
  .MK-tour { padding: 26px 0 6px; }
  .MK-tour-layers {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 7vw 12px;
    scrollbar-width: none;
  }
  .MK-tour-layers::-webkit-scrollbar { display: none; }
  /* Every card is the same viewport-driven height: the copy holds the
     top, the render fills whatever height remains and bleeds off the
     card's bottom edge (the card's own overflow crops it), so shorter
     screens simply show less screenshot and never squash the text. */
  .MK-tour-item {
    flex: 0 0 86vw;
    box-sizing: border-box;
    height: clamp(540px, 78dvh, 720px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 18px;
    overflow: hidden;
    background: var(--mk-dark);
    background-image: var(--mk-dark-grad);
    background-size: var(--mk-dark-grad-size);
    background-blend-mode: var(--mk-dark-grad-blend);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  }
  .MK-tour-item + .MK-tour-item { border-top: 0; }
  .MK-tour-text {
    background: none;
    padding: 22px 22px 4px;
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .MK-tour-text h3 { font-size: 26px; }
  .MK-tour-text p { font-size: 14.5px; }
  .MK-tour-item .MK-sec-logos { margin-top: 12px; }
  .MK-ghostnum { display: none; }
  .MK-tour-stage {
    flex: 1 1 auto;
    justify-content: center;
    align-items: flex-start;
    min-height: 110px;
    padding: 14px 26px 0;
  }
  .MK-fs-browser { display: none; }
  .MK-fs-phone {
    display: block;
    position: relative;
    /* the desktop anchor offsets shift a relative box - reset them */
    right: auto;
    bottom: auto;
    height: auto;
    width: 100%;
    max-width: 340px;
    cursor: zoom-in;
  }
  .MK-fs-phone img { height: auto; }
  .MK-fs-phone::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mk-clay) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241108' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    pointer-events: none;
  }
  .MK-fs-phones {
    display: flex;
    position: static;
    gap: 14px;
  }
  .MK-fs-phones { width: 100%; justify-content: center; }
  .MK-fs-phones .MK-fs-phone { width: 100%; }
  .MK-fs-appphone { display: none; }
  /* Documents card: the invoice alone, same crop-and-bleed treatment */
  .MK-tour-stage--docs { min-height: 110px; }
  .MK-fs-docwrap {
    position: relative;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    padding: 0;
    width: 100%;
    max-width: 340px;
    cursor: zoom-in;
  }
  .MK-fs-doc {
    position: static;
    width: 100%;
    height: auto;
  }
  .MK-fs-doc--2,
  .MK-fs-doc--3 { display: none; }
  .MK-fs-docwrap::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mk-clay) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241108' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    pointer-events: none;
  }

  /* Dot strip under the deck, on the pale stage */
  .MK-tour-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px 20px;
  }
  .MK-tour-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--mk-dark-rgb), 0.28);
    cursor: pointer;
  }
  .MK-tour-dots button.is-on { background: var(--mk-clay); }

  /* Testimonial: breathing room instead of edge-to-edge */
  .MK-testi-row { padding: 0 20px; box-sizing: border-box; }

  /* Closing act sizes to its content; CTA buttons stack full width */
  .MK-closing { min-height: 0; }
  .MK-closing .MK-testi { padding: 36px 0; }
  .MK-ctahalf { padding: 36px 0; }
  .MK-secwrap .MK-ctarow { flex-direction: column; align-items: center; }
  .MK-secwrap .MK-ctarow .MK-cta {
    box-sizing: border-box; /* content-box + side padding overhung the tile */
    width: 100%;
    max-width: 340px;
    height: 44px;
  }
}
@media (max-width: 560px) {
  .MK-secwrap .MK-promises,
  .MK-coreband .MK-promises { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .MK-secwrap .rv, .MK-why .rv, .MK-tour .rv,
  .MK-tour--pin .MK-tour-item { transition: none; transform: none; }
}