/* HERO — large, dark, animated entry. */

[data-mr="1"] .mr-hero {
  position: relative;
  background: var(--mr-navy-800);
  color: var(--mr-text-on-dark);
  padding-top: var(--mr-space-12);
  overflow: hidden;
  isolation: isolate;
}

[data-mr="1"] .mr-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

[data-mr="1"] .mr-hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 70%);
}

[data-mr="1"] .mr-hero__bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 25%, rgba(20, 149, 139, 0.18), transparent 50%),
    radial-gradient(circle at 15% 80%, rgba(18, 58, 94, 0.20), transparent 55%),
    radial-gradient(circle at 50% 0%, rgba(15, 118, 110, 0.10), transparent 60%);
}

/* mktcontent.2 — the right column holds the CTAs, not a product mockup, so
   the copy takes the greater share and the actions sit in a narrower rail. */
[data-mr="1"] .mr-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
  align-items: center;
  gap: var(--mr-space-11);
  padding-top: var(--mr-space-10);
  padding-bottom: var(--mr-space-12);
}

@media (max-width: 1024px) {
  [data-mr="1"] .mr-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--mr-space-9);
    padding-top: var(--mr-space-8);
    padding-bottom: var(--mr-space-9);
  }
}

/* Phase mktbanner.4 — reclaim the dead band above the headline on phones.
   .mr-hero contributes padding-top: 80px and .mr-hero__inner adds another
   40px, and there was no phone-specific override — so a 375x812 screen spent
   120px (15% of the viewport) on empty navy before the H1, in the one place
   where vertical space is scarcest and most valuable. The generous spacing is
   right on a wide screen where the hero is a centred two-column composition;
   it is not right once the loop diagram stacks underneath. */
@media (max-width: 768px) {
  [data-mr="1"] .mr-hero {
    padding-top: var(--mr-space-6);   /* 24px, was 80px */
  }

  [data-mr="1"] .mr-hero__inner {
    padding-top: var(--mr-space-4);   /* 16px, was 40px */
    gap: var(--mr-space-7);
  }
}

[data-mr="1"] .mr-hero__copy {
  max-width: 720px;
}

/* Phase mktbanner.2 — .mr-hero__eyebrow, .mr-hero__eyebrow-dot and the
   mr-pulse-dot keyframes were deleted with the "Built for UK payment ISOs"
   pill they styled. That line now opens the subtitle. Nothing else in
   src/views references these classes. */

[data-mr="1"] .mr-hero__title {
  font-size: var(--mr-fs-display);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: var(--mr-fw-bold);
  color: var(--mr-white);
  margin: 0 0 var(--mr-space-5) 0;
}

[data-mr="1"] .mr-hero__title-accent {
  background: linear-gradient(120deg, #7CC7BC 0%, #14958B 60%, #0F766E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

[data-mr="1"] .mr-hero__subtitle {
  font-size: var(--mr-fs-body-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--mr-space-7) 0;
  max-width: 560px;
}

[data-mr="1"] .mr-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mr-space-3);
  margin-bottom: var(--mr-space-5);
}

/* Phase mktbanner.2 — .mr-hero__microcopy deleted with the strip under the
   CTAs. At 0.55 alpha on navy it was also below AA. */

/* mktcontent.2 — the hero's right-hand column. Was .mr-hero__mockup holding a
   product frame (and .mr-hero__loop before that); Lewis removed the image, so
   the two CTAs became the right-hand focus instead.

   Stacked and stretched rather than sitting side by side: two full-width
   buttons in a narrow rail read as a deliberate destination at the end of the
   headline's line of travel, where an inline pair would just trail off the
   copy. The rail is capped so the buttons stay button-sized on a wide screen. */
[data-mr="1"] .mr-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--mr-space-3);
  width: 100%;
  max-width: 320px;
  justify-self: end;
}

/* .mr-btn is inline-flex and centres its own content, so stretching the rail
   is all that is needed — no per-button width overrides. */
[data-mr="1"] .mr-hero__actions .mr-btn {
  width: 100%;
}

@media (max-width: 1024px) {
  /* Stacked layout: the actions sit under the copy, left-aligned with it and
     sized to their content rather than spanning the whole column. */
  [data-mr="1"] .mr-hero__actions {
    justify-self: start;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
  }

  [data-mr="1"] .mr-hero__actions .mr-btn {
    width: auto;
  }
}

@media (max-width: 480px) {
  /* Small phones: back to full-width stacked, so neither CTA wraps awkwardly
     and both stay comfortably tappable. */
  [data-mr="1"] .mr-hero__actions {
    flex-direction: column;
  }

  [data-mr="1"] .mr-hero__actions .mr-btn {
    width: 100%;
  }
}

/* Trust strip docked to hero bottom. */
[data-mr="1"] .mr-hero__trust {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.18) 100%);
  padding: var(--mr-space-7) 0 var(--mr-space-8);
}

[data-mr="1"] .mr-hero__trust-label {
  text-align: center;
  font-size: 11px;
  font-weight: var(--mr-fw-semi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Phase mktcopy.1 — was 0.45 alpha, which blends to #79838C on the navy:
     4.32:1, under the 4.5:1 AA floor for 11px text. 0.62 measures 7.09:1. */
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 var(--mr-space-4) 0;
}

/* Phase mktcopy.1 — named customers and the PCI partner. The site had no
   social proof of any kind; this is the first thing on the page that someone
   other than us has put their name to. Set as wordmarks rather than logos so
   it works before we have permission-cleared assets. */
[data-mr="1"] .mr-hero__trust-names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--mr-space-4) var(--mr-space-7);
  /* No trailing margin — this is now the last row in the band since the chips
     were removed (mktcopy.2); the band's own padding closes it out. */
  margin-bottom: 0;
}

[data-mr="1"] .mr-hero__trust-name {
  font-size: 20px;
  font-weight: var(--mr-fw-bold);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);   /* ~14:1 on the navy */
}

[data-mr="1"] .mr-hero__trust-partner {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);   /* ~8.5:1 */
}

[data-mr="1"] .mr-hero__trust-partner strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: var(--mr-fw-semi);
}

@media (max-width: 768px) {
  [data-mr="1"] .mr-hero__trust-names {
    gap: var(--mr-space-3) var(--mr-space-5);
  }

  [data-mr="1"] .mr-hero__trust-name {
    font-size: 17px;
  }

  [data-mr="1"] .mr-hero__trust-partner {
    font-size: 12px;
    flex-basis: 100%;
    text-align: center;
  }
}

/* Phase mktcopy.2 — .mr-hero__trust-row, .mr-hero__trust-chip, its :hover and
   .mr-hero__trust-dot were deleted with the six pill badges they styled.
   Nothing in src/views references them; verified by grep. */