/* Google Pay — hero: black surface, LAYA | Google Pay lockup, dual mockups (mirrors Apple Pay layout; Figma 85:6991) */

.google-pay-hero {
  --google-pay-tilt-1: 5deg;
  --google-pay-tilt-2: -5deg;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 5vw, 65px);
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--padding);
  padding-block: clamp(40px, 8vw, 60px);
  box-sizing: border-box;
  background: var(--color-black);
  overflow-x: clip;
  overflow-y: visible;
}

body.page-under-nav-hero .google-pay-hero {
  --app-hero-top-pull: clamp(16px, 3.5vw, 44px);
  margin-top: calc(-1 * var(--app-hero-top-pull));
  padding-top: calc(var(--navbar-height) + var(--section-stack-padding-y));
}

.google-pay-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--max-width);
  text-align: center;
}

/* Breadcrumbs on dark (parent link = ghost; current = light pill — unchanged) */
.google-pay-hero .breadcrumbs__link {
  color: var(--color-bg);
  background: transparent;
}

.google-pay-hero .breadcrumbs__link:hover {
  background: rgba(250, 253, 252, 0.12);
}

.google-pay-hero .breadcrumbs__link:focus-visible {
  outline: none;
  background: rgba(250, 253, 252, 0.18);
}

.google-pay-hero .breadcrumbs__sep {
  color: var(--color-bg);
}

/* Figma Google_Pay_Label — centered lockup */
.google-pay-hero__brand {
  display: block;
  width: auto;
  max-width: min(280px, 88vw);
  height: auto;
  max-height: clamp(36px, 8vw, 48px);
}

/* Figma Hero 120 / 110 / tracking ~-5px */
.google-pay-hero__title {
  margin: 0;
  max-width: 100%;
  font-size: clamp(2.5rem, 5vw + 1.25rem, 7.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.05em;
  color: var(--color-bg);
}

/* Regular/Main 32 */
.google-pay-hero__subtitle {
  margin: 0;
  max-width: min(920px, 100%);
  font-size: clamp(1.125rem, 1.5vw + 0.75rem, var(--font-main));
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-bg);
}

/* Row LTR so wallet icon stays on the physical left; label uses RTL bidi inside */
.google-pay-hero .google-pay-hero__cta-add {
  direction: ltr;
}

.google-pay-hero__cta-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  /* Space between Hebrew and English without relying on bidi/collapsed spaces */
  gap: 0.35em;
  unicode-bidi: isolate;
}

.google-pay-hero__cta-he {
  unicode-bidi: embed;
}

.google-pay-hero__cta-en {
  display: inline-block;
  margin-inline: 0;
  unicode-bidi: embed;
}

.google-pay-hero__devices {
  --google-pay-devices-fade: linear-gradient(
    to bottom,
    #000 0%,
    #000 min(52%, 180px),
    rgba(0, 0, 0, 0.92) 68%,
    rgba(0, 0, 0, 0.45) 84%,
    rgba(0, 0, 0, 0.12) 94%,
    transparent 100%
  );
  position: relative;
  width: 100%;
  max-width: var(--max-width-wide);
  height: clamp(200px, 34vw, 440px);
  margin-inline: auto;
  box-sizing: border-box;
  /* Hairline inset so rounded tops aren’t flush against the clip edge */
  padding-top: clamp(6px, 1.5vw, 16px);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  direction: ltr;
  flex-wrap: nowrap;
  /* Top-align so mockup tops (Dynamic Island / watch) stay inside the strip; bottom fades via mask */
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 1.5vw, 20px);
  flex-shrink: 0;
  pointer-events: none;
  isolation: isolate;
  -webkit-mask-image: var(--google-pay-devices-fade);
  mask-image: var(--google-pay-devices-fade);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
}

.google-pay-hero__device {
  flex: 0 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transform-origin: center center;
  will-change: transform;
}

.google-pay-hero__device--1 {
  transform: rotate(var(--google-pay-tilt-1));
}

.google-pay-hero__device--2 {
  transform: rotate(var(--google-pay-tilt-2));
}

.google-pay-hero__device img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(48vw, 520px);
  max-height: min(620px, 82vh);
  object-fit: contain;
  object-position: center top;
}

.google-pay-hero__device--2 img {
  max-width: min(38vw, 380px);
  max-height: min(480px, 68vh);
  object-position: center top;
}

@media (prefers-reduced-motion: reduce) {
  .google-pay-hero {
    --google-pay-tilt-1: 0deg;
    --google-pay-tilt-2: 0deg;
  }

  .google-pay-hero__device {
    will-change: auto;
  }
}

@media (max-width: 900px) {
  body.page-under-nav-hero .google-pay-hero {
    min-height: 0;
  }

  .google-pay-hero__devices {
    height: clamp(180px, 42vw, 360px);
  }
}

@media (max-width: 480px) {
  .google-pay-hero__inner {
    gap: 16px;
  }

  .google-pay-hero__device img {
    max-width: min(52vw, 280px);
  }

  .google-pay-hero__device--2 img {
    max-width: min(44vw, 220px);
  }
}