/* =========================================================================
   Marketing Package — page-scoped aesthetic layer (marketing-package.html ONLY)
   --------------------------------------------------------------------------
   Cloned 1:1 from design.css. Loaded AFTER mkp.css so it wins the cascade
   WITHOUT editing the base mkp.css. Every rule is scoped under
   .mkp-page--marketing (the <main> class) so nothing here can ever leak.

   Brand: Midnight Operator — navy #0A1A3F + gold #E8B400, Anybody + Inter.
   Honors UI-UX-PRO-MAX: visual-hierarchy, whitespace-balance, state-clarity,
   scale-feedback, motion-meaning, duration-timing (150-300ms), AA contrast,
   reduced-motion. All colours come from existing tokens — no new hex.
   ========================================================================= */

/* ---- Sticky-label secondary CTA ---------------------------------------- */
/* Recaptures the inline CTAs lost with the removed tier cards. Ghost (not
   gold) so the single dominant primary CTA stays the gold final-CTA band
   (UI-UX-PRO-MAX: primary-action — one primary per screen). */
.mkp-page--marketing .mkp-split__cta {
  margin-top: 28px;
  min-height: 48px;
}

/* =========================================================================
   SERVICES — numbered rows  ->  premium timeline of gold-node cards
   --------------------------------------------------------------------------
   Mirrors the methodology.html "Our Proven Process" treatment: large
   gradient-gold numerals in rich gold-outlined squares, anchored top-left,
   linked by a faint gold connector spine so the five stages read as one
   guided journey. The gradient-numeral technique is reused verbatim from
   pr-process.css (.pr-phase__num). CSS counters render 01-05 into the badge
   pseudo so the gold box fill and the clipped-text gradient never collide.
   ========================================================================= */
.mkp-page--marketing .mkp-services__list {
  display: grid;
  gap: 18px;
  counter-reset: mkp-step;
}

/* Card shell — an elevated node on the timeline.
   `isolation` scopes the connector spine (z-index:-1) above this card's own
   background yet behind its content, so each badge sits ON the line. Three
   local vars (badge size + paddings) drive both the grid and the spine maths
   so the responsive block only has to retune the vars. */
.mkp-page--marketing .mkp-svc {
  --mkp-num: clamp(60px, 6vw, 74px);
  --mkp-pad-x: 32px;
  --mkp-pad-y: 30px;
  position: relative;
  isolation: isolate;
  counter-increment: mkp-step;
  grid-template-columns: var(--mkp-num) 1fr;
  gap: 26px;
  align-items: start;
  padding: var(--mkp-pad-y) var(--mkp-pad-x);
  border: 1px solid var(--mkp-line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.020), transparent 120px),
    var(--mkp-card);
  box-shadow: var(--shadow-lg);
  transition: transform 240ms var(--ease-out-soft),
    border-color 240ms var(--ease-out-soft),
    box-shadow 240ms var(--ease-out-soft),
    background 240ms var(--ease-out-soft);
}
/* Neutralize wta.css first-child divider reset so card 01 matches the rest */
.mkp-page--marketing .mkp-svc:first-child {
  padding-top: var(--mkp-pad-y);
  border-top: 1px solid var(--mkp-line);
}
.mkp-page--marketing .mkp-svc:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 180, 0, 0.45);
  background:
    linear-gradient(180deg, rgba(232, 180, 0, 0.05), transparent 140px),
    var(--mkp-card-2);
  box-shadow:
    0 0 0 1px rgba(232, 180, 0, 0.16),
    var(--accent-glow),
    0 30px 64px -30px rgba(0, 0, 0, 0.85);
}

/* Connector spine — faint gold timeline threading the badge column.
   top/bottom -9px overhang meets the neighbour's overhang in the 18px gap, so
   the line reads continuous without any card painting over it. Trimmed at the
   ends so the journey starts at badge 01 and finishes at the last badge. */
.mkp-page--marketing .mkp-svc::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -9px;
  bottom: -9px;
  left: calc(var(--mkp-pad-x) + var(--mkp-num) / 2);
  width: 2px;
  transform: translateX(-1px);
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(232, 180, 0, 0.05),
    rgba(232, 180, 0, 0.42) 18%,
    rgba(232, 180, 0, 0.42) 82%,
    rgba(232, 180, 0, 0.05));
}
.mkp-page--marketing .mkp-svc:first-child::after {
  top: calc(var(--mkp-pad-y) + var(--mkp-num) / 2);
}
.mkp-page--marketing .mkp-svc:last-child::after {
  bottom: auto;
  height: calc(9px + var(--mkp-pad-y) + var(--mkp-num) / 2);
}

/* Hover-revealed gold accent bar across the card top — a live, on-brand cue
   (hidden at rest to keep the resting state calm and uncluttered). */
.mkp-page--marketing .mkp-svc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent,
    var(--color-accent-hi), var(--color-accent), transparent);
  opacity: 0;
  transition: opacity 240ms var(--ease-out-soft);
}
.mkp-page--marketing .mkp-svc:hover::before { opacity: 0.9; }

/* Number -> large gold-outlined square node. The box fill + rich gold ring
   live on the element; the gradient-gold numeral is painted into ::before via
   a leading-zero counter (the literal "01" is collapsed with font-size:0). */
.mkp-page--marketing .mkp-svc__num {
  position: relative;
  z-index: 1;
  width: var(--mkp-num);
  height: var(--mkp-num);
  align-self: start;
  margin: 0;
  border: 0;
  border-radius: 18px;
  font-size: 0;
  -webkit-text-stroke: 0;
  background:
    linear-gradient(160deg, rgba(232, 180, 0, 0.14), rgba(232, 180, 0, 0.02) 72%),
    var(--mkp-card-2);
  box-shadow:
    inset 0 0 0 1.5px rgba(232, 180, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -12px 22px -12px rgba(232, 180, 0, 0.32),
    0 0 0 1px rgba(232, 180, 0, 0.12),
    0 12px 26px -14px rgba(232, 180, 0, 0.40);
  transition: transform 240ms var(--ease-out-soft),
    box-shadow 240ms var(--ease-out-soft),
    background 240ms var(--ease-out-soft);
}
.mkp-page--marketing .mkp-svc__num::before {
  content: counter(mkp-step, decimal-leading-zero);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Anybody", var(--mkp-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #FFE24A 0%, var(--color-accent) 70%, #C99A00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 5px rgba(4, 13, 46, 0.50));
}
/* Fallback: never let the numeral vanish if clipped-text gradients are unsupported. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .mkp-page--marketing .mkp-svc__num::before {
    color: var(--color-accent);
    -webkit-text-fill-color: var(--color-accent);
  }
}
.mkp-page--marketing .mkp-svc:hover .mkp-svc__num {
  transform: scale(1.05);
  background:
    linear-gradient(160deg, rgba(232, 180, 0, 0.22), rgba(232, 180, 0, 0.04) 72%),
    var(--mkp-card-2);
  box-shadow:
    inset 0 0 0 1.5px rgba(232, 180, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -12px 22px -12px rgba(232, 180, 0, 0.45),
    0 0 0 1px rgba(232, 180, 0, 0.22),
    0 16px 30px -14px rgba(232, 180, 0, 0.55);
}
.mkp-page--marketing .mkp-svc:hover .mkp-svc__num::before {
  background: linear-gradient(180deg, #FFE96B 0%, var(--color-accent-hi) 65%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Tighten the heading so it reads confidently beside the larger numeral. */
.mkp-page--marketing .mkp-svc__title {
  margin: 0;
  font-size: clamp(20px, 1.95vw, 25px);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

/* Separate the deliverables line from the body and turn the lead-in into a
   small gold label for scannability (CSS only — the <strong> already exists). */
.mkp-page--marketing .mkp-svc__deliver {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--mkp-line-soft);
}
.mkp-page--marketing .mkp-svc__deliver strong {
  font-family: var(--mkp-display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* =========================================================================
   WHY US — arrow list  ->  2-up value cards with circular gold tokens
   ========================================================================= */
.mkp-page--marketing .mkp-diff__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.mkp-page--marketing .mkp-diff__item {
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  margin: 0;
  padding: 26px 26px;
  border: 1px solid var(--mkp-line);
  border-radius: 16px;
  background: var(--mkp-card);
  transition: transform 240ms var(--ease-out-soft),
    border-color 240ms var(--ease-out-soft),
    box-shadow 240ms var(--ease-out-soft),
    background 240ms var(--ease-out-soft);
}
/* Override wta.css first-child border-top:0 so every card has a full border */
.mkp-page--marketing .mkp-diff__item:first-child {
  border-top: 1px solid var(--mkp-line);
}
.mkp-page--marketing .mkp-diff__item:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 180, 0, 0.38);
  background: var(--mkp-card-2);
  box-shadow: 0 26px 54px -32px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(232, 180, 0, 0.10);
}

/* Arrow -> circular gold token */
.mkp-page--marketing .mkp-diff__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: 0;
  border-radius: 50%;
  background: rgba(232, 180, 0, 0.12);
  border: 1px solid rgba(232, 180, 0, 0.30);
  color: var(--color-accent);
  transition: background 240ms var(--ease-out-soft),
    border-color 240ms var(--ease-out-soft),
    transform 240ms var(--ease-out-soft);
}
.mkp-page--marketing .mkp-diff__arrow svg {
  width: 20px;
  height: 20px;
}
.mkp-page--marketing .mkp-diff__item:hover .mkp-diff__arrow {
  background: rgba(232, 180, 0, 0.22);
  border-color: rgba(232, 180, 0, 0.55);
  transform: scale(1.06);
}
.mkp-page--marketing .mkp-diff__lead {
  margin-top: 2px;
}

/* =========================================================================
   "1 OF 1" featured value card  (App Specific Marketing Systems)
   Always-on rich-gold treatment so it reads as the singular, premium card
   at rest — not only on hover. Scoped to .mkp-page--marketing.
   ========================================================================= */
.mkp-page--marketing .mkp-diff__item--oneofone {
  position: relative;
  overflow: hidden;
  border-color: rgba(232, 180, 0, 0.85);
  background:
    linear-gradient(180deg, rgba(232, 180, 0, 0.10), rgba(232, 180, 0, 0.02) 60%),
    var(--mkp-card-2);
  box-shadow:
    0 0 0 1px rgba(232, 180, 0, 0.45),
    0 24px 60px -34px rgba(232, 180, 0, 0.45),
    0 18px 50px -30px rgba(0, 0, 0, 0.80);
}
.mkp-page--marketing .mkp-diff__item--oneofone:hover {
  border-color: rgba(232, 180, 0, 1);
  background:
    linear-gradient(180deg, rgba(232, 180, 0, 0.14), rgba(232, 180, 0, 0.03) 60%),
    var(--mkp-card-2);
  box-shadow:
    0 0 0 1px rgba(232, 180, 0, 0.60),
    0 30px 70px -32px rgba(232, 180, 0, 0.50),
    0 22px 56px -30px rgba(0, 0, 0, 0.85);
}

/* Solid-gold token on the featured card (vs translucent on the others) */
.mkp-page--marketing .mkp-diff__item--oneofone .mkp-diff__arrow {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #0A1A3F;
  box-shadow: 0 0 0 4px rgba(232, 180, 0, 0.14);
}
.mkp-page--marketing .mkp-diff__item--oneofone:hover .mkp-diff__arrow {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 5px rgba(232, 180, 0, 0.20);
}

/* Label row: gold "1 OF 1" pill + supporting Australia kicker */
.mkp-page--marketing .mkp-diff__flag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 12px;
}
.mkp-page--marketing .mkp-diff__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, #F5C518, #E8B400);
  color: #0A1A3F;
  font-family: var(--mkp-display);
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 12px -2px rgba(232, 180, 0, 0.60);
}
.mkp-page--marketing .mkp-diff__pill svg {
  width: 12px;
  height: 12px;
  flex: none;
}
.mkp-page--marketing .mkp-diff__flagtext {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-accent);
}

/* Subtle diagonal sheen sweep across the card (reduced-motion-guarded below) */
.mkp-page--marketing .mkp-diff__item--oneofone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.07) 48%,
    rgba(232, 180, 0, 0.10) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  animation: mkp-oneofone-sheen 6s ease-in-out 1.2s infinite;
}
@keyframes mkp-oneofone-sheen {
  0%, 18%   { transform: translateX(-120%); }
  38%, 100% { transform: translateX(120%); }
}

/* =========================================================================
   Responsive — match existing wta.css breakpoints (980 / 720 / 540)
   ========================================================================= */
@media (max-width: 720px) {
  .mkp-page--marketing .mkp-diff__list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 540px) {
  .mkp-page--marketing .mkp-svc {
    /* retune the vars; grid, padding, badge size + spine maths follow */
    --mkp-num: 56px;
    --mkp-pad-x: 20px;
    --mkp-pad-y: 22px;
    /* wta.css stacks .mkp-svc to 1 col here; keep the badge column left-aligned */
    grid-template-columns: var(--mkp-num) 1fr;
    gap: 18px;
  }
  .mkp-page--marketing .mkp-svc__num::before {
    font-size: 26px;
  }
  .mkp-page--marketing .mkp-diff__item {
    padding: 22px 20px;
  }
  .mkp-page--marketing .mkp-split__cta {
    width: 100%;
  }
}

/* =========================================================================
   Reduced motion — parity with wta.css (disable the new hover/transition fx)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .mkp-page--marketing .mkp-svc,
  .mkp-page--marketing .mkp-svc::before,
  .mkp-page--marketing .mkp-svc__num,
  .mkp-page--marketing .mkp-diff__item,
  .mkp-page--marketing .mkp-diff__arrow {
    transition: none;
  }
  .mkp-page--marketing .mkp-svc:hover,
  .mkp-page--marketing .mkp-diff__item:hover {
    transform: none;
  }
  .mkp-page--marketing .mkp-svc:hover .mkp-svc__num,
  .mkp-page--marketing .mkp-diff__item:hover .mkp-diff__arrow {
    transform: none;
  }
  .mkp-page--marketing .mkp-diff__item--oneofone::after {
    animation: none;
    display: none;
  }
}