/* GonzaPay Blocks — plugin stylesheet.
   Every widget's rendered HTML is wrapped in .gpb-scope so these styles
   never leak into (or get overridden by) the surrounding theme.
*/

/* Full-width widgets (.gpb-scope--full) use width:100vw to break out of
   Elementor's padded containers. On tall pages 100vw can resolve wider
   than the true visible viewport (scrollbar accounting), and with many
   full-width sections stacked this compounds into real horizontal
   overflow — every section's text ends up wrapping against that wider
   phantom width instead of the actual screen. Clipping at the document
   level is the standard fix. */
html, body { overflow-x: hidden; max-width: 100%; }

.gpb-scope {
  --gp-blue:   #003CA6;
  --gp-blue-2: #0061B0;
  --gp-yellow: #F5EA61;
  --gp-cream:  #FFFDE6;
  --gp-red:    #EF5460;
  --gp-red-2:  #F05460;
  --gp-green:  #29FF85;
  --gp-ink:    #171717;
  --gp-mute:   #6C6E70;
  --gp-line:   #E1E1E1;
  --gp-bg:     #F6F6F6;

  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--gp-ink);
  line-height: 1.5;
  background: transparent;
  overflow-x: hidden;
}
.gpb-scope, .gpb-scope *, .gpb-scope *::before, .gpb-scope *::after { box-sizing: border-box; }

/* Full-width breakout: extend past any padded parent (Elementor section/column)
   so the widget's background reaches the browser edges. Uses the classic
   50% - 50vw margin trick so it works no matter how deeply nested it sits. */
.gpb-scope--full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
}
.gpb-scope img { max-width: 100%; height: auto; display: block; }
.gpb-scope a   { color: inherit; text-decoration: none; }
.gpb-scope ul  { list-style: none; padding: 0; margin: 0; }
.gpb-scope h1, .gpb-scope h2, .gpb-scope h3, .gpb-scope h4 { margin: 0; line-height: 1.15; font-weight: 700; }
.gpb-scope p { margin: 0; }

.gpb-scope .gp-container {
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px;
}

/* Brand wordmark */
.gpb-scope .gp-logo { display: inline-flex; align-items: baseline; font-weight: 800; letter-spacing: -0.02em; font-size: 28px; }
.gpb-scope .gp-logo__gonza { color: var(--gp-blue); }
.gpb-scope .gp-logo__pay   { color: var(--gp-red); }
.gpb-scope .gp-logo--stacked { flex-direction: column; align-items: flex-start; line-height: 1; }
.gpb-scope .gp-logo--stacked em { font-style: normal; font-weight: 400; font-size: 0.5em; color: var(--gp-blue); margin-top: 4px; }
.gpb-scope .gp-logo--light .gp-logo__gonza { color: #fff; }
.gpb-scope .gp-logo--light em { color: #fff; opacity: 0.85; }
.gpb-scope .gp-brand { color: var(--gp-blue); font-weight: 800; }
.gpb-scope .gp-brand--red { color: var(--gp-red); }

/* Buttons */
.gpb-scope .gp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 999px;
  font-weight: 600; font-size: 15px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.gpb-scope .gp-btn--yellow { background: var(--gp-yellow); color: var(--gp-blue); }
.gpb-scope .gp-btn--yellow:hover { background: #ffee7a; transform: translateY(-1px); }
.gpb-scope .gp-btn--outline { background: #fff; border: 1.5px solid var(--gp-blue); color: var(--gp-blue); padding: 10px 22px; }
.gpb-scope .gp-btn--outline:hover { background: var(--gp-blue); color: #fff; }

/* Store badges */
.gpb-scope .gp-store-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.gpb-scope .gp-store-buttons--stack { flex-direction: column; }
.gpb-scope .gp-store-btn {
  display: inline-flex; flex-direction: column; justify-content: center;
  background: #000; color: #fff; border-radius: 10px;
  padding: 10px 20px 10px 52px; min-width: 180px; position: relative;
  transition: background .12s ease;
}
.gpb-scope .gp-store-btn:hover { background: #1a1a1a; }
/* Store-badge icons — no longer monochrome masks. Google Play uses
   the four-colour triangle (blue / green / yellow / red), Apple uses
   the solid-white silhouette. Both rendered as inline SVG so the
   badges stay crisp at any DPI and never trigger a network request. */
.gpb-scope .gp-store-btn::before {
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  background: no-repeat center / contain;
}
.gpb-scope .gp-store-btn--play::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%234285F4' d='M3.6 2.4C3.2 2.6 3 3 3 3.6v16.8c0 .5.2 1 .6 1.2L13 12 3.6 2.4z'/><path fill='%2334A853' d='M13 12l3.7-3.7L4.9 1.5c-.3-.2-.7-.2-1-.1-.1 0-.2.1-.3.2L13 12z'/><path fill='%23FBBC04' d='M16.7 15.7L13 12l3.7-3.7 3.7 2.1c.7.4.7 1.4 0 1.8l-3.7 2.5z'/><path fill='%23EA4335' d='M13 12l-9.4 9.6c.1.1.2.2.3.2.3.1.7.1 1-.1l11.8-6.8L13 12z'/></svg>");
}
.gpb-scope .gp-store-btn--ios::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/></svg>");
}
.gpb-scope .gp-store-btn__eyebrow { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.9; }
.gpb-scope .gp-store-btn__name    { font-size: 18px; font-weight: 700; margin-top: 2px; }

/* NAV BAR */
.gpb-scope .gp-nav {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 48px;
}
.gpb-scope .gp-nav__brand { flex-shrink: 0; display: inline-flex; align-items: center; }
.gpb-scope .gp-nav__brand .gp-logo { font-size: 24px; }
.gpb-scope .gp-nav__logo-img { display: block; height: 32px; width: auto; max-width: 220px; }
.gpb-scope .gp-nav__links {
  display: flex; gap: 40px; flex: 1;
  justify-content: center;
  font-weight: 500;
}
.gpb-scope .gp-nav__cta { flex-shrink: 0; }
.gpb-scope .gp-nav__links a { transition: color .12s ease; }
/* .gp-nav__panel only becomes a real box (the full-screen mobile
   overlay) below the 768px breakpoint. On desktop it stays inert so
   .gp-nav__links lays out exactly as before. */
.gpb-scope .gp-nav__panel { display: contents; }
.gpb-scope .gp-nav__panel-head,
.gpb-scope .gp-nav__panel-contact,
.gpb-scope .gp-nav__panel-cta,
.gpb-scope .gp-nav__panel-social { display: none; }

/* White pill variant — original rounded look, keep for standalone pages. */
.gpb-scope .gp-nav--white {
  background: #fff; color: var(--gp-ink);
  border-radius: 999px;
  padding: 10px 22px;
}
.gpb-scope .gp-nav--white .gp-nav__links   { color: var(--gp-ink); }
.gpb-scope .gp-nav--white .gp-nav__links a:hover { color: var(--gp-blue); }

/* Overlay bar variant — straight-edged 147px overlay per the Figma:
   dark ink (#171717) fades to full transparency, layered over the hero
   blue so the fade lands on the hero's own colour seamlessly. Content
   sits near the top so the gradient has room to breathe below it. */
.gpb-scope .gp-nav--blue {
  color: #fff;
  border-radius: 0;
  /* Tightened from 147px so the CTA sits closer to the section below
     it — 96px still leaves room for the fade to breathe. */
  min-height: 96px;
  padding: 14px clamp(48px, 6.6vw, 127px) 0;
  gap: 40px;
  align-items: flex-start;
  background:
    linear-gradient(180deg, #171717 0%, rgba(23, 23, 23, 0) 100%),
    var(--gp-blue);
}
/* Vertically-align each child inside its own 44px row at the top,
   so logo, links and CTA share a consistent centreline without
   forcing align-items: center on the whole 147px block. */
.gpb-scope .gp-nav--blue .gp-nav__brand,
.gpb-scope .gp-nav--blue .gp-nav__links,
.gpb-scope .gp-nav--blue .gp-nav__cta {
  min-height: 44px;
  align-items: center;
}
/* Menu text — smaller and sharper than the loose default. Gilroy per
   Figma if available on the site, Poppins otherwise; semibold with a
   subtle negative tracking for cleaner letterforms at small sizes. */
.gpb-scope .gp-nav--blue .gp-nav__links {
  color: #fff;
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.01em;
}
.gpb-scope .gp-nav--blue .gp-nav__links a:hover { color: var(--gp-yellow); }
.gpb-scope .gp-nav--blue .gp-nav__toggle span   { background: #fff; }
.gpb-scope .gp-nav__cta { padding: 10px 22px; font-size: 14px; }
.gpb-scope .gp-nav__toggle {
  display: none; background: transparent; border: 0; padding: 8px; cursor: pointer;
  flex-direction: column; gap: 4px;
}
.gpb-scope .gp-nav__toggle span { display: block; width: 22px; height: 2px; background: var(--gp-ink); border-radius: 2px; }

/* HERO — solid blue section; the halo below is scoped to the phone
   image so it forms a soft "spotlight" around the image only. */
.gpb-scope .gp-hero {
  color: #fff;
  padding: 25px 0 0;
  overflow: hidden;
  background: var(--gp-blue);
  display: flex;
  align-items: end;
}
.gpb-scope .gp-hero .gp-container { width: 100%; }
.gpb-scope .gp-hero__body {
  display: grid;
  /* Copy column wide enough to absorb the accumulated 345px left
     padding without wrapping "Gonza obulamu" at Poppins 80px. */
  grid-template-columns: 1fr 2.8fr;
  gap: 40px;
  align-items: end;
  margin-top: -40px;
}
/* Left block — image is absolutely-positioned so its size is not
   constrained by the grid cell width. It's anchored bottom-centre
   so its bottom edge sits on the section edge, and it can be much
   taller than a natural-aspect fit inside the column would allow. */
.gpb-scope .gp-hero__phone {
  position: relative; overflow: visible;
  border-radius: 0;
  padding: 0;
  min-height: 640px;
  background: transparent;
}
/* Halo sized to cover the (much wider than the column) phone image
   so the image never shows a hard edge against the solid blue. Fades
   from a subtle grey haze at centre to fully transparent at ~95% of
   its radius — at the image's rendered width (~1760px @ height:1000),
   its half-width (~880px) must sit fully inside this fade-out, or the
   image's own edge shows as a hard cut past where the gradient has
   already gone transparent. (Previously 42%/70%, whose effective
   fade radius of ~588px fell well short of the image's ~880px
   half-width on screens beyond laptop widths, where nothing else
   constrains the image's rendered size.) Anchored to match the
   image, flush at bottom:0. */
.gpb-scope .gp-hero__phone::before {
  content: "";
  position: absolute;
  left: calc(88% + 340px); bottom: 0;
  transform: translateX(-50%);
  width: 2200px; height: 1060px;
  background: radial-gradient(ellipse 45% 50% at 50% 55%,
    rgba(214, 213, 215, 0.55) 0%,
    rgba(214, 213, 215, 0.28) 30%,
    transparent 95%
  );
  pointer-events: none;
  z-index: 0;
}
.gpb-scope .gp-hero__phone img {
  position: absolute;
  bottom: 0;
  /* The phone silhouette lives in the LEFT third of the source PNG
     (centre at ~320/936 across). The image itself is ~1600px wide at
     this height, much wider than the column. Push the image right so
     the phone lands roughly centred within the left column. */
  left: calc(88% + 340px);
  transform: translateX(-50%);
  height: 1000px; width: auto;
  max-width: none; display: block;
  z-index: 1;
  /* Decorative — let clicks pass through to any links (like the
     store badges) that sit under the image's transparent overhang. */
  pointer-events: none;
  /* The photo's own background content runs to its canvas edge, so on
     screens beyond laptop widths — where nothing crops the image and
     its full ~1760px width is visible — the left edge shows a hard
     cut against the solid blue section background instead of fading
     into it (the halo behind can't fix this: it only shows through
     the image's own transparent areas, not through opaque photo
     content). The phone itself doesn't start until ~18% in from the
     left, so fading that outer margin is safe. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
}
/* Copy fills the whole grid cell so the top block (title/lede/logos)
   anchors to the top and the download anchors to the bottom
   (via margin-top: auto below). Bottom padding is generous so the
   download row lifts off the section edge. */
.gpb-scope .gp-hero__copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 40px 0 100px 445px;  /* +150px more */
}
.gpb-scope .gp-hero__copy .gp-hero__download { margin-top: 90px; }

/* Fixed section height on desktop — viewport-relative sizing warped
   the layout on short/tall screens, so the hero is pinned at a fixed
   height regardless of window size. Trimmed 120px shorter than the
   old 980px so the now-flush (bottom:0) image sits right on the
   section edge with no empty strip below it, while its top position
   is unchanged. */
@media (min-width: 1024px) {
  .gpb-scope .gp-hero,
  .gpb-scope .gp-hero__body { min-height: 860px; }
  /* Wider inner container on large screens so the copy column can
     absorb its ~345px left padding without wrapping the title. */
  .gpb-scope .gp-hero .gp-container { max-width: 1520px; }
  .gpb-scope .gp-hero__copy { padding-top: 100px; }
}

/* (Laptop min-height moved into the phone block above.) */
/* Per Figma: Gilroy 500, 80px/72px, letter-spacing -4px, #FFFFFF.
   Falls back to Poppins if Gilroy isn't installed on the site.
   Sizes are proportional (em / vw) so they scale down on tablets. */
.gpb-scope .gp-hero__title {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: clamp(48px, 5.5vw, 80px);
  font-weight: 500;
  line-height: 0.9;              /* 72 / 80 */
  letter-spacing: -0.05em;       /* -4px @ 80px */
  color: #fff;
  margin-bottom: 48px;           /* bigger gap between title and lede */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.gpb-scope .gp-hero__title-sub { display: block; margin-top: 10px; }
.gpb-scope .gp-hero__copy {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* "with" — yellow (matches reference), lighter than the brand */
.gpb-scope .gp-hero__title-prefix {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--gp-yellow);
  margin-right: 0.22em;
  vertical-align: 0.35em;   /* aligns "with" to the visual midline of "GonzaPay" */
  letter-spacing: -0.02em;
}
/* Brand inside the hero title inherits the Figma H1 spec — Gilroy 500,
   80px, -4px tracking — overriding the default .gp-brand (which is
   800 elsewhere in the plugin). Colours: white "Gonza" + coral "Pay". */
.gpb-scope .gp-hero__title .gp-brand {
  color: #fff;
  font-family: inherit;
  font-weight: 500;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.gpb-scope .gp-hero__title .gp-brand--red {
  color: var(--gp-red);
  font-weight: 500;
}
/* Per Figma: Gilroy 500, 24px/32px, letter-spacing -0.4px, #FFFFFF,
   width 592px. Falls back to Poppins if Gilroy isn't loaded. */
.gpb-scope .gp-hero__lede {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.017em;   /* -0.4px @ 24px */
  color: #fff;
  max-width: 592px;
  margin-bottom: 56px;         /* bigger gap between lede and payment icon row */
}
.gpb-scope .gp-hero__paylogos { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
/* Bigger icons, no white pill / padding — the source PNGs already
   have their own transparent backgrounds. */
.gpb-scope .gp-hero__paylogos li {
  background: transparent;
  padding: 0;
  width: 84px; height: 84px;
  display: grid; place-items: center;
}
.gpb-scope .gp-hero__paylogos img { max-width: 100%; max-height: 100%; border-radius: 14px; }
/* Download block — yellow caption above, QR beside vertically-stacked buttons. */
.gpb-scope .gp-hero__download {
  display: flex; flex-direction: column;
  gap: 10px; align-items: flex-start;
}
/* Per Figma: Gilroy 16px/24px, #F5EA61, width 358.89px.
   (font-weight left to inherit the section default per your request.) */
.gpb-scope .gp-hero__download-caption {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #F5EA61;
  max-width: 360px;
  margin: 0;
}
/* No-op on desktop (inherits the caption's own yellow) — the two-tone
   split only kicks in on mobile, see the media query below. */
.gpb-scope .gp-hero__download-caption-highlight { color: inherit; }
.gpb-scope .gp-hero__download-row {
  display: flex; gap: 16px; align-items: stretch;
}
.gpb-scope .gp-hero__qr {
  width: 130px; height: 130px;
  background: #fff;
  border: 3px solid var(--gp-red);
  border-radius: 8px;
  padding: 5px;
  flex-shrink: 0;
  display: block;
}
/* Store-badge image links — no background, just the badge PNG at a
   set height. Sits above the phone image's z-index so clicks land
   on the badge, not the (now pointer-events: none) picture. */
.gpb-scope .gp-store-badges { display: flex; gap: 10px; }
.gpb-scope .gp-store-badges--stack { flex-direction: column; }
.gpb-scope .gp-store-badge {
  display: inline-block;
  position: relative;
  z-index: 2;
  line-height: 0;
  transition: transform .12s ease;
}
.gpb-scope .gp-store-badge:hover { transform: translateY(-1px); }
.gpb-scope .gp-store-badge img {
  height: var(--gp-badge-h, 56px);
  width: auto;
  display: block;
}
.gpb-scope .gp-store-buttons--stack {
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.gpb-scope .gp-store-buttons--stack .gp-store-btn { min-width: 190px; }

/* ============ FEATURES (per Figma spec) ============
   Section 1921×1200; content wrapper 1240×~998 centred; 60px gap
   between blocks. Font stack: Gilroy → Poppins fallback. */
.gpb-scope .gp-features {
  padding: 100px 0;
  background: #fff;
}
.gpb-scope .gp-features .gp-container { max-width: 1240px; }

/* Title block — heading + description, 60px below is the features row */
.gpb-scope .gp-features__lede {
  max-width: 521px;
  margin-bottom: 60px;
  display: flex; flex-direction: column;
  gap: 11.2px;
}
.gpb-scope .gp-features__lede h2 {
  font-family: 'Gilroy', 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 46px;
  line-height: 46px;         /* 100% */
  letter-spacing: -0.07em;   /* -3.22px @ 46px */
  color: #003CA6;
  max-width: 420px;          /* fits "Simple everyday payments" on 2 lines with Poppins */
  margin: 0;
}
.gpb-scope .gp-features__lede p {
  font-family: 'Gilroy', 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.02em;   /* -0.32px @ 16px */
  color: #888888;
  margin: 0;
}

/* Feature widget stack — 3 columns, 60px gap, ~97px tall */
.gpb-scope .gp-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  padding: 0;
  border: 0;
  margin-bottom: 60px;
}
.gpb-scope .gp-feature { max-width: 448px; }
.gpb-scope .gp-feature__icon { display: none; }
.gpb-scope .gp-feature h3 {
  font-family: 'Gilroy', 'Poppins', system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.02em;
  color: #003CA6;
  margin: 0 0 12px;
}
.gpb-scope .gp-feature p {
  font-family: 'Gilroy', 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.02em;
  color: #888888;
  margin: 0;
}

/* Slider progress bar — 3 tracks, first fully filled, second partial,
   third empty (matches Figma's "step 2 of 3" state). Purely visual. */
.gpb-scope .gp-features__slider {
  display: flex;
  gap: 0;
  margin-bottom: 60px;
  list-style: none; padding: 0;
}
.gpb-scope .gp-features__slider li {
  flex: 1;
  height: 2px;
  background: #E1E1E1;
  position: relative;
}
.gpb-scope .gp-features__slider li.is-full::after,
.gpb-scope .gp-features__slider li.is-partial::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #003CA6;
}
.gpb-scope .gp-features__slider li.is-full::after    { width: 100%; }
.gpb-scope .gp-features__slider li.is-partial::after { width: 15%; }

/* Phone-with-chips image block — 1240×620, 16px radius, red overlay */
.gpb-scope .gp-features__phone {
  position: relative;
  width: 100%;
  height: 620px;
  border-radius: 16px;
  overflow: hidden;
  background: #EF5460;
  aspect-ratio: auto;
}
.gpb-scope .gp-features__phone-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.gpb-scope .gp-features__phone-img {
  position: absolute;
  left: 50%; top: 34.19px;
  transform: translateX(-50%);
  height: 586px; width: auto;
  max-width: none;
}

/* Chip — Figma "info card" with 3-layer glass backdrop behind a
   white pill. 319 × 87.7 pill, glass halos sit below-left. */
.gpb-scope .gp-chip {
  position: absolute; z-index: 2;
  width: 319px; height: 125px;
}
/* Three stacked glass discs behind the pill */
.gpb-scope .gp-chip__glow {
  position: absolute; left: 4%; right: 4%; bottom: 0;
  height: 108.53px;
  pointer-events: none;
  z-index: 0;
}
.gpb-scope .gp-chip__glow::before,
.gpb-scope .gp-chip__glow::after,
.gpb-scope .gp-chip__glow > i {
  content: ""; position: absolute;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-radius: 999px;
  display: block;
}
.gpb-scope .gp-chip__glow > i {
  width: 293px; height: 91px; left: 0; top: 0;
  background: rgba(255, 255, 255, 0.14);
}
.gpb-scope .gp-chip__glow::after {
  width: 267px; height: 84px; left: 13px; top: 18px;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}
.gpb-scope .gp-chip__glow::before {
  width: 252px; height: 76px; left: 20px; bottom: 0;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}
/* The white pill sits on top of the glass */
.gpb-scope .gp-chip__card {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center;
  gap: 10px;
  width: 319px; height: 87.7px;
  background: #fff; border-radius: 180px;
  padding: 12px 30px 12px 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}
.gpb-scope .gp-chip__card img {
  width: 63.7px; height: 63.7px;
  border-radius: 50%; object-fit: cover;
  flex-shrink: 0;
}
.gpb-scope .gp-chip__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 7px;
}
.gpb-scope .gp-chip__title {
  font-family: 'Gilroy', 'Poppins', system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.02em;
  color: #003CA6;
  display: flex; align-items: center; gap: 8px;
}
.gpb-scope .gp-chip__icon {
  display: inline-block;
  width: 24px; height: 24px;
  background: #29FF85;
  border-radius: 6px;
  flex-shrink: 0;
}
.gpb-scope .gp-chip__meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; line-height: 18px;
}
.gpb-scope .gp-chip__price  { color: #171717; font-weight: 400; }
.gpb-scope .gp-chip__accent { color: #EF5460; font-weight: 500; text-align: right; }
/* Backwards-compat with the earlier chip markup (img + strong + span + em) */
.gpb-scope .gp-chip > img {
  width: 63.7px; height: 63.7px;
  border-radius: 50%; object-fit: cover;
}
.gpb-scope .gp-chip > div strong {
  display: block;
  font-family: 'Gilroy', 'Poppins', system-ui, sans-serif;
  font-weight: 800; font-size: 16px; line-height: 19px;
  color: #003CA6;
}
.gpb-scope .gp-chip > div span { color: #171717; font-size: 14px; font-family: 'Inter', system-ui, sans-serif; }
.gpb-scope .gp-chip > div em   { color: #EF5460; font-style: normal; font-weight: 500; margin-left: 8px; }

/* PHOTO BANNER (No bank etc.) — per Figma "Lifestyle – Brand Photo":
   white section, photo centred full-bleed. */
.gpb-scope .gp-nobank { position: relative; background: #fff; height: 720px; overflow: hidden; }
.gpb-scope .gp-nobank__photo {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
}
/* Video facade: full-bleed button that behaves like the poster image until clicked */
.gpb-scope .gp-nobank__facade {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0;
  background: transparent; cursor: pointer;
  display: block; overflow: hidden;
}
.gpb-scope .gp-nobank__facade .gp-nobank__photo { position: absolute; inset: 0; z-index: 0; }
.gpb-scope .gp-nobank__facade:focus-visible { outline: 3px solid var(--gp-yellow); outline-offset: -3px; }
.gpb-scope .gp-nobank__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  display: grid; place-items: center;
  transition: transform .16s ease, background .16s ease;
  z-index: 2;
}
.gpb-scope .gp-nobank__play::after {
  content: ""; display: block;
  width: 0; height: 0; margin-left: 8px;
  border-style: solid; border-width: 18px 0 18px 28px;
  border-color: transparent transparent transparent var(--gp-red);
}
.gpb-scope .gp-nobank__facade:hover .gp-nobank__play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.gpb-scope .gp-nobank__iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1;
}
@media (max-width: 768px) {
  .gpb-scope .gp-nobank__play { width: 72px; height: 72px; }
  .gpb-scope .gp-nobank__play::after { border-width: 14px 0 14px 22px; margin-left: 6px; }
}

/* STATEMENT — per Figma "Hero – Tagline": yellow section, a pill badge
   above a big centred headline. Padding approximates the 1200px-tall
   Figma frame while staying flexible for longer/shorter copy. */
.gpb-scope .gp-statement { background: var(--gp-yellow); padding: 160px 0; }
.gpb-scope .gp-statement__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 43px;
  max-width: 1416px; margin: 0 auto;
}
/* Pill badge — Gilroy 500, 24px/32px, letter-spacing -0.4px, #FF492C
   on a matching 1px outline. */
.gpb-scope .gp-statement__badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 24px;
  border: 1px solid #FF492C;
  border-radius: 9999px;
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.017em;
  color: #FF492C;
  white-space: nowrap;
}
/* Headline — Gilroy 800, up to 100px/110% per Figma. Width capped so
   the default copy breaks over four lines, which reads better than a
   single wide block at this size. */
.gpb-scope .gp-statement__text {
  color: #003CA6; text-align: center;
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: clamp(32px, 5.4vw, 88px);
  font-weight: 800;
  line-height: 1.1;
  max-width: 1456px;
}
.gpb-scope .gp-statement__text .gp-brand { color: #003CA6; font-weight: 800; }
.gpb-scope .gp-statement__text .gp-brand--red { color: var(--gp-red); font-weight: 800; }

/* EMPOWER (stats + testimonial) — per Figma "Social Proof – Stats":
   centred head (two-weight headline + lede), then a 3-card row —
   stats / photo+chip / testimonial — all sharing a 30px radius. */
.gpb-scope .gp-empower { padding: 120px 0; }
.gpb-scope .gp-empower .gp-container { max-width: 1240px; }
.gpb-scope .gp-empower__head {
  display: flex; flex-direction: column; align-items: center;
  gap: 35px;
  max-width: 914px; margin: 0 auto 64px;
  text-align: center;
}
.gpb-scope .gp-empower__head h2 { display: flex; flex-direction: column; align-items: center; }
/* "GonzaPay empowers" — Gilroy 600, 80px/110px */
.gpb-scope .gp-empower__head-top {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 5.6vw, 80px);
  line-height: 1.375;
  color: #003CA6;
}
.gpb-scope .gp-empower__head-top .gp-brand { color: #003CA6; font-weight: 600; }
.gpb-scope .gp-empower__head-top .gp-brand--red { color: var(--gp-red); font-weight: 600; }
/* "everyday payments" — Gilroy 800, 80px/88px */
.gpb-scope .gp-empower__head-bottom {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5.6vw, 80px);
  line-height: 1.1;
  color: #003CA6;
}
/* Lede — Gilroy 500, 24px/32px, letter-spacing -0.4px, #6C6E70 */
.gpb-scope .gp-empower__head p {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.017em;
  color: var(--gp-mute);
  max-width: 592px; margin: 0 auto;
}

.gpb-scope .gp-empower__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: stretch; }

/* Stats card */
.gpb-scope .gp-stats-card {
  background: var(--gp-cream); border-radius: 30px; padding: 20px 20px 34px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 480px;
}
.gpb-scope .gp-stats-card h3 {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: -0.07em;
  color: #003CA6; margin-bottom: 12px;
}
.gpb-scope .gp-stats-card p {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 500; font-size: 16px; line-height: 19px; letter-spacing: -0.02em;
  color: #888888; margin-bottom: 20px;
}
.gpb-scope .gp-stats-card a.gp-btn--outline {
  border-radius: 36px;
  padding: 20px 32px;
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 500; font-size: 16px; letter-spacing: -0.02em;
}
.gpb-scope .gp-stats-card__figures { display: flex; gap: 32px; flex-wrap: wrap; }
.gpb-scope .gp-stats-card__figures strong {
  display: block; color: #003CA6;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 40px; font-weight: 700; line-height: 1;
}
.gpb-scope .gp-stats-card__figures span {
  color: #003CA6;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; font-weight: 500; letter-spacing: -0.02em;
}

/* Photo card + floating chip */
.gpb-scope .gp-empower__photo {
  position: relative; margin: 0; border-radius: 30px; overflow: hidden; background: var(--gp-red);
  min-height: 480px;
}
.gpb-scope .gp-empower__photo img { width: 100%; height: 100%; object-fit: cover; min-height: 480px; }
.gpb-scope .gp-savings-chip {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 999px; padding: 10px 24px 10px 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.gpb-scope .gp-savings-chip img {
  width: 56px; height: 56px; min-height: 0; max-width: none;
  object-fit: cover; border-radius: 50%; flex-shrink: 0;
}
.gpb-scope .gp-savings-chip > div { display: flex; flex-direction: column; gap: 6px; }
.gpb-scope .gp-savings-chip span {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 600; font-size: 16px; letter-spacing: -0.02em;
  color: #003CA6; display: block;
}
.gpb-scope .gp-savings-chip strong {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 400; font-size: 14px;
  color: #171717; display: block;
}
.gpb-scope .gp-savings-chip em { color: #FF492C; font-style: normal; font-weight: 500; margin-left: 8px; }

/* Testimonial card */
.gpb-scope .gp-testimonial {
  background: #E4EEFF; border-radius: 30px; padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 480px;
}
.gpb-scope .gp-testimonial p {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 500; font-size: 20px; line-height: 22px; letter-spacing: -0.02em;
  color: #003CA6;
}
.gpb-scope .gp-testimonial footer { display: flex; align-items: center; gap: 12px; }
.gpb-scope .gp-testimonial footer img { width: 48px; height: 48px; border-radius: 50%; }
.gpb-scope .gp-testimonial strong {
  display: block;
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 500; font-size: 16px; letter-spacing: -0.02em;
  color: #003CA6;
}
.gpb-scope .gp-testimonial span {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 400; font-size: 14px;
  color: #888888;
}

/* ESTIMATOR — per Figma "Hero - Desktop": full-bleed dark photo with a
   white "Loan Card" floated on top. */
.gpb-scope .gp-estimator {
  padding: 120px 0; background-color: #222;
  background-size: cover; background-position: center; color: #fff;
}
.gpb-scope .gp-estimator__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.gpb-scope .gp-estimator__copy h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 12px; color: #fff; }
.gpb-scope .gp-estimator__copy p  { max-width: 460px; color: #fff; }
.gpb-scope .gp-estimator__card {
  background: #fff; color: var(--gp-ink);
  border-radius: 30px; padding: 30px;
  display: flex; flex-direction: column; gap: 30px;
  max-width: 426px; justify-self: end; width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.gpb-scope .gp-estimator__card fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 24px; }
/* "Send Money" pill — Figma "Link - Light Grey": F6F6F6 pill, Gilroy
   500 16px, letter-spacing -0.32px, blue text. */
.gpb-scope .gp-estimator__pill {
  display: inline-flex; align-self: flex-start;
  background: #F6F6F6; border-radius: 36px;
  padding: 14px 24px;
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 500; font-size: 16px; letter-spacing: -0.02em;
  color: #003CA6;
}
.gpb-scope .gp-estimator__card label { display: block; }
.gpb-scope .gp-estimator__card label span {
  display: block; margin-bottom: 8px;
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 500; font-size: 16px;
  color: #888888;
}
/* Amount — Gilroy 800, 46px/56px, letter-spacing -1px, blue */
.gpb-scope .gp-estimator__card input {
  width: 100%; border: 0; padding: 0; background: transparent;
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 800; font-size: 46px; line-height: 56px; letter-spacing: -0.02em;
  color: #003CA6;
}
.gpb-scope .gp-estimator__slider { position: relative; height: 6px; background: #E5E7EB; border-radius: 4px; margin-top: 16px; }
.gpb-scope .gp-estimator__track {
  position: absolute; left: 0; top: 0; height: 100%; width: 55%;
  background: linear-gradient(90deg, #1F3F2F 0%, var(--gp-green) 100%);
  border-radius: 4px;
}
.gpb-scope .gp-estimator__thumb {
  position: absolute; left: 55%; top: 50%; width: 24px; height: 24px;
  background: var(--gp-green); border: 0; border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transform: translate(-50%, -50%);
}
/* Range endpoints under the slider — lower/upper limit + their fee. */
.gpb-scope .gp-estimator__range { display: flex; justify-content: space-between; margin-top: 12px; }
.gpb-scope .gp-estimator__range-item { display: flex; flex-direction: column; gap: 2px; }
.gpb-scope .gp-estimator__range-item--end { align-items: flex-end; text-align: right; }
.gpb-scope .gp-estimator__range-item span {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 600; font-size: 13px; color: #003CA6;
}
.gpb-scope .gp-estimator__range-item em {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-style: normal; font-weight: 400; font-size: 12px; color: #888888;
}
/* Fee amount — Gilroy 800, 20px/25px, letter-spacing -0.5px, blue.
   No "Estimated Transfer Fee" label per your request — just the figure. */
.gpb-scope .gp-estimator__fee strong {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 800; font-size: 20px; line-height: 25px; letter-spacing: -0.025em;
  color: #003CA6;
}
.gpb-scope .gp-estimator__caption {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 400; font-size: 14px; line-height: 18px;
  color: #888888; margin: 0;
}

/* LOGO CLUSTER — per Figma "Payments - Desktop": cream section, a
   centred heading/lede/CTA, with round logo bubbles floating around it. */
.gpb-scope .gp-payments { background: #FFFEED; padding: 240px 0; position: relative; overflow: hidden; }
.gpb-scope .gp-payments__head { text-align: center; max-width: 489px; margin: 0 auto; position: relative; z-index: 2; }
.gpb-scope .gp-payments__head h2 {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.14;
  letter-spacing: -0.0575em;
  color: #003CA6;
  margin-bottom: 24px;
}
.gpb-scope .gp-payments__head p {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.02em;
  color: #888888;
  max-width: 488px; margin: 0 auto 24px;
}
.gpb-scope .gp-payments__head .gp-btn--yellow {
  border-radius: 36px;
  padding: 20px 32px;
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 800; font-size: 16px; letter-spacing: -0.02em;
}
/* --x/--y are fixed pixel offsets from the exact centre (not
   percentages) so the ring is a true circle no matter how wide or
   tall the section is — percentages would stretch into an ellipse. */
.gpb-scope .gp-payments__cluster {
  position: absolute; inset: 0; pointer-events: none;
  --bubble-inner: 55px; --bubble-outer: 75px;
}
.gpb-scope .gp-payments__cluster li {
  position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y));
  width: var(--bubble-outer); height: var(--bubble-outer); border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: translate(-50%, -50%);
}
/* Inner ring sits close to the heading, so its icons are smaller. */
.gpb-scope .gp-payments__cluster li.gp-payments__bubble--inner { width: var(--bubble-inner); height: var(--bubble-inner); }
.gpb-scope .gp-payments__cluster img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}

/* FAQ — per Figma "FAQs - Desktop": wide aside/list split, download
   block pinned to the aside's bottom, accordion grouped in a grey card. */
.gpb-scope .gp-faq { padding: 160px 0; background: #fff; }
.gpb-scope .gp-faq__inner { display: grid; grid-template-columns: 407px 1fr; gap: 227px; align-items: stretch; }
.gpb-scope .gp-faq__aside { display: flex; flex-direction: column; }
.gpb-scope .gp-faq__aside h2 {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.07em;
  color: #003CA6;
  margin-bottom: 12px;
}
.gpb-scope .gp-faq__aside p {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.02em;
  color: #888888;
}
/* Download block sits pinned to the bottom of the aside column. */
.gpb-scope .gp-faq__download { margin-top: auto; }
.gpb-scope .gp-faq__download h3 {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.9;
  color: #003CA6;
}
.gpb-scope .gp-faq__download-row { display: flex; gap: 16px; align-items: center; }
.gpb-scope .gp-faq__download-row .gp-faq__qr { width: 130px; height: 130px; border-radius: 12px; border: 3px solid var(--gp-red-2); padding: 4px; }
/* Caption beside the QR — shown only at mobile widths (see media query). */
.gpb-scope .gp-faq__download-caption { display: none; }

/* Accordion grouped in a light-grey card; each question is its own
   flat white card inside it — no border/shadow per Figma. */
.gpb-scope .gp-faq__card { background: #F6F6F6; border-radius: 30px; padding: 10px; }
.gpb-scope .gp-faq__list { display: grid; gap: 8px; }
.gpb-scope .gp-faq__list li {
  background: #fff; border-radius: 20px; padding: 0 20px;
}
.gpb-scope .gp-faq__list summary {
  list-style: none; cursor: pointer; padding: 20px 0;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 600; font-size: 20px; line-height: 22px; letter-spacing: -0.02em;
  color: #003CA6;
}
.gpb-scope .gp-faq__list summary::-webkit-details-marker { display: none; }
.gpb-scope .gp-faq__list summary > span:first-child { flex: 1; }
.gpb-scope .gp-faq__icon { width: 24px; height: 24px; position: relative; flex: none; }
.gpb-scope .gp-faq__icon::before, .gpb-scope .gp-faq__icon::after {
  content: ""; position: absolute; background: #003CA6; border-radius: 2px;
}
.gpb-scope .gp-faq__icon::before { left: 2px; top: 11px; width: 20px; height: 2px; }
.gpb-scope .gp-faq__icon::after  { left: 11px; top: 2px; width: 2px; height: 20px; }
.gpb-scope details[open] .gp-faq__icon::after { display: none; }
.gpb-scope .gp-faq__list p {
  font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 500; font-size: 16px; line-height: 19px; letter-spacing: -0.02em;
  color: #888888; padding: 0 0 20px;
}

/* FOOTER */
.gpb-scope .gp-footer { background: var(--gp-blue); color: #fff; padding: 60px 0 0; }
.gpb-scope .gp-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding-bottom: 40px; align-items: stretch; }
/* Right pane: nav columns on top, legal links pinned to the bottom —
   matching the brand column's bottom-aligned social row per Figma. */
.gpb-scope .gp-footer__right { display: flex; flex-direction: column; height: 100%; }
.gpb-scope .gp-footer__legal-links {
  display: flex; align-items: center; gap: 20px;
  margin-top: auto; padding-top: 24px;
  font-size: 14px;
}
.gpb-scope .gp-footer__legal-links li[aria-hidden] {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gp-yellow);
  font-size: 0; line-height: 0; overflow: hidden;
}
.gpb-scope .gp-footer__legal-links a:hover { text-decoration: underline; }
.gpb-scope .gp-footer__logo { display: block; }
.gpb-scope .gp-footer__logo img { display: block; width: auto; }
.gpb-scope .gp-footer__contact { font-size: 14px; opacity: 0.9; margin: 24px 0; }
.gpb-scope .gp-footer__contact strong { display: block; margin-bottom: 4px; }
/* Per Figma: the phone number is the one highlighted line — Gilroy 800, #F5EA61. */
.gpb-scope .gp-footer__contact .gp-footer__phone { color: var(--gp-yellow); }
/* Icons are pre-badged (yellow circle baked into the PNG), so the
   anchor just sizes/positions the image — no separate background. */
.gpb-scope .gp-footer__social { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gpb-scope .gp-footer__social a {
  width: 32px; height: 32px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  color: var(--gp-blue);
  transition: transform .12s ease;
}
.gpb-scope .gp-footer__social a:hover { transform: translateY(-1px); }
.gpb-scope .gp-footer__social a img { width: 100%; height: 100%; display: block; }
.gpb-scope .gp-footer__handle { margin-left: 8px; font-size: 14px; opacity: 0.85; }
.gpb-scope .gp-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.gpb-scope .gp-footer__nav h4 { color: rgba(255,255,255,0.65); font-size: 12px; text-transform: capitalize; margin-bottom: 12px; font-weight: 500; }
.gpb-scope .gp-footer__nav ul { display: grid; gap: 8px; font-size: 14px; }
.gpb-scope .gp-footer__nav a:hover { text-decoration: underline; }
.gpb-scope .gp-footer__legal { border-top: 1px solid rgba(255,255,255,0.2); padding: 20px 0 28px; }
.gpb-scope .gp-footer__legal p { font-size: 12px; opacity: 0.7; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .gpb-scope .gp-hero__body { grid-template-columns: 1fr; }
  .gpb-scope .gp-features__grid { grid-template-columns: 1fr 1fr; }
  .gpb-scope .gp-empower__grid { grid-template-columns: 1fr 1fr; }
  .gpb-scope .gp-empower__photo { grid-column: 1 / -1; }
  .gpb-scope .gp-estimator__inner { grid-template-columns: 1fr; }
  .gpb-scope .gp-estimator__card { justify-self: start; }
  .gpb-scope .gp-faq__inner { grid-template-columns: 1fr; gap: 40px; }
  .gpb-scope .gp-payments__cluster li { width: 60px; height: 60px; }
}
@media (max-width: 768px) {
  .gpb-scope .gp-container { padding: 0 18px; }
  .gpb-scope .gp-nav { padding: 10px 18px; gap: 12px; position: relative; justify-content: space-between; }
  .gpb-scope .gp-nav--blue { min-height: 96px; padding: 14px 18px 0; }
  .gpb-scope .gp-nav__toggle { display: inline-flex; flex-shrink: 0; }
  /* The top-bar CTA and the hamburger were competing for space on
     narrow screens — the pill's text doesn't shrink, so it could push
     the toggle button off-screen entirely. The full menu panel already
     has its own prominent download button, so just hide this one on
     mobile rather than trying to protect two competing priorities. */
  .gpb-scope .gp-nav__cta { display: none; }

  /* Mobile menu — full-screen blue overlay (Figma mobile spec), not a
     small dropdown. .gp-nav__panel becomes the overlay's own box here
     (it's `display:contents` on desktop), holding its own logo/close
     header, the link list (large text + chevron + divider), a contact
     block, the download CTA, and social icons. */
  .gpb-scope .gp-nav__panel {
    display: none;
    position: fixed; inset: 0; z-index: 1000;
    background:
      linear-gradient(180deg, #171717 0%, rgba(23,23,23,0) 100%),
      var(--gp-blue);
    background-repeat: no-repeat;
    background-size: 100% 140px, 100% 100%;
    flex-direction: column;
    padding: 24px 24px 32px;
    overflow-y: auto;
  }
  .gpb-scope .gp-nav__panel.is-open { display: flex; }
  /* On short viewports the panel's content (header + links + contact +
     CTA + social) can exceed the fixed 100vh box. Without flex-shrink:0,
     flexbox tries to compress these instead of scrolling — the link
     list shrinks below its own children's content size, and since
     overflow is visible on the list, its <li> rows then paint outside
     its shrunk box, overlapping the header above and contact info
     below. Protecting every direct child lets overflow-y:auto scroll
     properly instead. */
  .gpb-scope .gp-nav__panel > * { flex-shrink: 0; }

  .gpb-scope .gp-nav__panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
  .gpb-scope .gp-nav__panel-logo img { display: block; height: 24px; width: auto; }
  .gpb-scope .gp-nav__panel-logo .gp-logo { font-size: 18px; }
  /* Plain X icon, no circular outline, per Figma "x-circle". */
  .gpb-scope .gp-nav__close {
    width: 40px; height: 40px;
    background: transparent; border: 0; color: #fff;
    display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
    position: relative; font-size: 0;
  }
  .gpb-scope .gp-nav__close::before,
  .gpb-scope .gp-nav__close::after {
    content: ""; position: absolute; width: 18px; height: 2px; background: #fff; border-radius: 2px;
  }
  .gpb-scope .gp-nav__close::before { transform: rotate(45deg); }
  .gpb-scope .gp-nav__close::after  { transform: rotate(-45deg); }

  .gpb-scope .gp-nav__panel .gp-nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: transparent; box-shadow: none; border-radius: 0; padding: 0;
    position: static; margin: 0; color: #fff; width: 100%;
    /* Override the desktop rule's `flex: 1` (flex-basis: 0%, flex-grow: 1),
       which sizes this list via the grow algorithm instead of its actual
       content height — that's what let it collapse to a fraction of its
       real size on short viewports. Size by content instead. */
    flex: none; min-height: min-content;
  }
  .gpb-scope .gp-nav__panel .gp-nav__links li {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,0.102);
  }
  .gpb-scope .gp-nav__panel .gp-nav__links a {
    font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 32px; font-weight: 600; line-height: 38px; color: #fff;
  }
  /* Chevron drawn from a rotated border corner, matching the Figma vector. */
  .gpb-scope .gp-nav__panel .gp-nav__links li::after {
    content: ""; width: 8px; height: 8px; margin-left: 12px; flex-shrink: 0;
    border-top: 2px solid #A1A1AA; border-right: 2px solid #A1A1AA;
    transform: rotate(45deg); opacity: 0.5;
  }

  .gpb-scope .gp-nav__panel-contact {
    margin-top: 48px;
    display: flex; flex-direction: column; gap: 20px;
  }
  .gpb-scope .gp-nav__panel-row { display: flex; flex-direction: column; gap: 4px; }
  .gpb-scope .gp-nav__panel-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px; font-weight: 600; line-height: 15px; letter-spacing: 0.02em; text-transform: uppercase;
    color: #A1A1AA;
  }
  .gpb-scope .gp-nav__panel-value {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px; font-weight: 500; line-height: 19px; color: #fff;
  }
  .gpb-scope .gp-nav__panel-value--accent {
    font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
    font-weight: 800; line-height: 22px; letter-spacing: -0.025em;
    color: var(--gp-yellow);
  }

  /* Download button — 12px rounded corners (not a pill), black label. */
  .gpb-scope .gp-nav__panel-cta {
    display: flex; align-items: center; justify-content: center;
    margin-top: 32px; width: 100%; height: 56px;
    background: var(--gp-yellow); border-radius: 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px; font-weight: 700; color: #000;
  }

  /* Flat, muted icon glyphs — no circular badge. */
  .gpb-scope .gp-nav__panel-social { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .gpb-scope .gp-nav__panel-social a {
    width: 24px; height: 24px;
    background: transparent; color: rgba(255,255,255,0.3);
    display: grid; place-items: center; font-size: 12px; font-weight: 700;
  }
  .gpb-scope .gp-nav__panel-social a img { width: 24px; height: 24px; opacity: 0.55; }
  /* Features section — white intro (heading+lede) stacked on a
     full-bleed coral "showcase" band containing the phone screenshot
     and a white card of icon+text feature rows, per Figma. */
  .gpb-scope .gp-features { padding: 0; }
  .gpb-scope .gp-features__intro { padding: 64px 0; }
  .gpb-scope .gp-features__lede {
    display: flex; flex-direction: column; align-items: center;
    gap: 24px; margin-bottom: 0; max-width: none;
  }
  .gpb-scope .gp-features__lede h2 {
    font-size: 32px; line-height: 1.25; font-weight: 800;
    letter-spacing: normal; text-align: center;
    max-width: 290px;
  }
  .gpb-scope .gp-features__lede p {
    font-size: 16px; line-height: 19px; letter-spacing: -0.32px;
    text-align: center; max-width: none;
  }

  .gpb-scope .gp-features__showcase {
    background: #EF5460;
    width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw);
    padding: 0 24px 64px;
    display: flex; flex-direction: column; align-items: center;
  }
  .gpb-scope .gp-features__slider { display: none; }
  .gpb-scope .gp-chip { display: none; }

  .gpb-scope .gp-features__phone {
    order: 1;
    position: relative;
    width: 342px; max-width: 100%; height: 370px;
    background: transparent;
  }
  .gpb-scope .gp-features__phone-bg { display: none; }
  .gpb-scope .gp-features__phone-img {
    position: absolute; inset: 0;
    width: 100%; height: 69%; max-width: none;
    object-fit: cover; object-position: 65% top;
    border-radius: unset;
    transform: none;
    /* drop-shadow (not box-shadow) hugs the phone's own silhouette
       instead of casting a visible rounded-rect "card" behind the
       transparent parts of the image — matches the Figma spec, which
       used filter:drop-shadow for the same reason. */
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.101961));
  }

  .gpb-scope .gp-features__grid {
    order: 2;
    position: relative;
    grid-template-columns: 1fr;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    gap: 32px;
    margin-bottom: 0;
    margin-top: -115px;
    width: 342px; max-width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.101961);
  }
  .gpb-scope .gp-feature { display: flex; align-items: flex-start; gap: 16px; max-width: none; }
  .gpb-scope .gp-feature__icon {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex-shrink: 0;
    background: #FFF9E5; border-radius: 12px;
    color: #EF5460;
  }
  .gpb-scope .gp-feature__icon svg { width: 24px; height: 24px; }
  .gpb-scope .gp-feature__body { display: flex; flex-direction: column; gap: 4px; }
  .gpb-scope .gp-nobank { height: 400px; }

  /* Big Statement — yellow band, subtle dot texture, tight centred
     headline with the brand mark bumped up a size, per Figma. */
  .gpb-scope .gp-statement {
    padding: 64px 24px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .gpb-scope .gp-statement::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 0; pointer-events: none;
    background-image: radial-gradient(#003B95 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.05;
  }
  .gpb-scope .gp-statement .gp-container { position: relative; z-index: 1; }
  .gpb-scope .gp-statement__inner { gap: 19px; max-width: none; }
  .gpb-scope .gp-statement__badge {
    padding: 8px 16px;
    font-size: 16px; line-height: 24px; letter-spacing: -0.4px;
  }
  .gpb-scope .gp-statement__text {
    font-size: 25px; line-height: 1; max-width: 342px;
  }
  .gpb-scope .gp-statement__text .gp-brand {
    display: inline-block;
    font-size: 1.22em;
  }
  .gpb-scope .gp-empower { padding: 60px 0; }
  .gpb-scope .gp-empower__grid { grid-template-columns: 1fr; }
  .gpb-scope .gp-empower__photo { grid-column: auto; }
  .gpb-scope .gp-estimator { padding: 80px 0; }
  .gpb-scope .gp-estimator__card { max-width: 100%; }
  .gpb-scope .gp-payments { padding: 60px 0 80px; }
  .gpb-scope .gp-payments__cluster { display: none; }
  .gpb-scope .gp-faq { padding: 60px 0 0; }
  /* Mobile FAQ — heading/lede, then the accordion (now individual
     shadowed cards, no grey wrapper), then the download block in its
     own full-bleed grey band below. */
  .gpb-scope .gp-faq__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gpb-scope .gp-faq__aside { display: contents; }
  .gpb-scope .gp-faq__aside h2 { order: 1; margin-bottom: 8px; min-width: 0; width: 100%; }
  .gpb-scope .gp-faq__aside p { order: 2; margin-bottom: 32px; min-width: 0; width: 100%; }
  .gpb-scope .gp-faq__card { order: 3; background: transparent; padding: 0; min-width: 0; width: 100%; }
  .gpb-scope .gp-faq__list { grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; }
  .gpb-scope .gp-faq__list li { box-shadow: 0 4px 16px rgba(0,0,0,0.07); min-width: 0; width: 100%; }
  .gpb-scope .gp-faq__list summary { min-width: 0; }
  .gpb-scope .gp-faq__list summary > span:first-child { min-width: 0; }
  .gpb-scope .gp-faq__download {
    order: 4; margin: 40px calc(50% - 50vw) 0;
    padding: 40px 20px; min-width: 0;
    background: #F6F6F6;
  }
  .gpb-scope .gp-faq__download h3 { margin-bottom: 20px; }
  /* Explicit grid: QR + caption share the top row, badges span the
     full width below — avoids relying on flex-wrap ordering quirks. */
  .gpb-scope .gp-faq__download-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-areas: "qr caption" "badges badges";
    column-gap: 20px; row-gap: 16px;
  }
  .gpb-scope .gp-faq__download-row .gp-faq__qr { grid-area: qr; width: 100px; height: 100px; }
  .gpb-scope .gp-faq__download .gp-faq__download-caption {
    display: block; grid-area: caption; min-width: 0;
    font-family: 'Gilroy', 'Poppins', system-ui, -apple-system, sans-serif;
    font-weight: 600; font-size: 14px; line-height: 1.4;
    color: #888888;
  }
  .gpb-scope .gp-faq__download .gp-faq__download-caption-highlight { color: #f05460; }
  .gpb-scope .gp-faq__download-row .gp-store-badges {
    grid-area: badges; flex-direction: row; gap: 12px;
  }
  .gpb-scope .gp-faq__download-row .gp-store-badges .gp-store-badge { flex: 1; }
  .gpb-scope .gp-faq__download-row .gp-store-badges img { width: 100%; height: auto; }
  /* Mobile footer — logo, contact, the nav-column pair, then social
     icons + handle, then the legal links, all centred as a stack. */
  .gpb-scope .gp-footer__inner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 0; padding-bottom: 32px;
  }
  .gpb-scope .gp-footer__brand,
  .gpb-scope .gp-footer__right { display: contents; }
  .gpb-scope .gp-footer__logo { order: 1; margin-bottom: 40px; }
  .gpb-scope .gp-footer__contact { order: 2; margin: 0 0 40px; }
  .gpb-scope .gp-footer__nav {
    order: 3;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    text-align: left;
    margin-bottom: 56px;
  }
  .gpb-scope .gp-footer__social { order: 4; justify-content: center; gap: 14px; }
  .gpb-scope .gp-footer__social a { width: 40px; height: 40px; }
  .gpb-scope .gp-footer__handle { flex-basis: 100%; margin: 16px 0 0; font-size: 22px; }
  .gpb-scope .gp-footer__legal-links { order: 5; justify-content: center; margin-top: 32px; }
  .gpb-scope .gp-footer__legal p { text-align: center; }
}
@media (max-width: 480px) {
  .gpb-scope .gp-statement__text { font-size: 20px; }
  .gpb-scope .gp-store-buttons { width: 100%; }
  .gpb-scope .gp-store-btn { flex: 1; min-width: 0; }
  .gpb-scope .gp-stats-card__figures { flex-direction: column; gap: 12px; }
  .gpb-scope .gp-footer__nav { grid-template-columns: 1fr 1fr; gap: 75px; }
}

/* Hero — mobile stack, split out to its own <=640px breakpoint
   (rather than sharing the general <=768px mobile block above) so it
   doesn't overlap with the tablet two-column rules below. Common
   "tablet portrait" widths (e.g. the classic 768px iPad) used to
   still match a shared <=768px block and get this single-column
   stack ("two rows") instead of two columns — keeping the ranges
   mutually exclusive avoids fighting the cascade property-by-property
   across two very differently-structured layouts. Centred stack:
   title, lede, pay logos, phone image, then the (QR-less) download
   caption + store badges. .gp-hero__copy is flattened via
   display:contents so its children can interleave with .gp-hero__phone
   (a sibling) purely via flex `order`. */
@media (max-width: 640px) {
  .gpb-scope .gp-hero { padding: 32px 0 48px; text-align: center; }
  .gpb-scope .gp-hero .gp-container { max-width: 480px; }
  .gpb-scope .gp-hero__body {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0; margin-top: 0; min-height: auto; position: relative;
  }
  .gpb-scope .gp-hero__copy { display: contents; }
  .gpb-scope .gp-hero__title,
  .gpb-scope .gp-hero__lede,
  .gpb-scope .gp-hero__paylogos,
  .gpb-scope .gp-hero__phone,
  .gpb-scope .gp-hero__download { min-width: 0; width: 100%; }
  .gpb-scope .gp-hero__title { order: 1; margin-bottom: 16px; }
  .gpb-scope .gp-hero__lede  { order: 2; margin-bottom: 30px; max-width: none; }
  .gpb-scope .gp-hero__paylogos { order: 3; justify-content: center; margin-bottom: 32px; }
  .gpb-scope .gp-hero__phone { order: 4; }

  /* Title block — per Figma "Frame 1171277392" dev spec: "Gonza obulamu"
     is a single uniform-weight line (not a light/bold split), with the
     "with [GonzaPay]" row sized independently below it. */
  .gpb-scope .gp-hero__title {
    font-size: 42px; line-height: 1.15; font-weight: 500; letter-spacing: normal;
  }
  .gpb-scope .gp-hero__title-lead,
  .gpb-scope .gp-hero__title-rest { font-weight: 500; }
  .gpb-scope .gp-hero__title-sub { margin-top: 8px; }
  .gpb-scope .gp-hero__title-prefix { font-size: 18px; line-height: 40px; font-weight: 600; }
  .gpb-scope .gp-hero__title .gp-brand { font-size: 42px; line-height: 40px; font-weight: 800; }

  .gpb-scope .gp-hero__lede {
    font-size: 16px; line-height: 32px; font-weight: 500; letter-spacing: -0.4px;
  }

  /* Pay-method logos — fixed 56x56, 16px radius, 8px gap, per Figma. */
  .gpb-scope .gp-hero__paylogos { gap: 8px; }
  .gpb-scope .gp-hero__paylogos li { width: 56px; height: 56px; }
  .gpb-scope .gp-hero__paylogos img { border-radius: 16px; }

  /* Phone image — full-bleed, rounded top corners, cropped to a fixed
     height. A gradient fades the bottom of the photo into the section's
     blue (rather than a hard edge), and the download caption + badges
     sit overlaid on that faded area instead of as a block below it. */
  .gpb-scope .gp-hero__phone {
    position: relative; overflow: hidden;
    width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw);
    height: 358px; min-height: 358px; border-radius: 24px 24px 0 0;
  }
  .gpb-scope .gp-hero__phone::before { display: none; }
  .gpb-scope .gp-hero__phone::after {
    content: "";
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,60,166,0) 52%, var(--gp-blue) 88%);
  }
  .gpb-scope .gp-hero__phone img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: 20% 50%;
    transform: scale(0.88);
    transform-origin: 50% 20%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  }

  /* Download block — no QR on mobile; caption + badges overlaid on the
     photo's faded bottom edge instead of sitting below it as their own
     block. It's taken out of the flex flow (position:
     absolute, anchored to .gp-hero__body) and pinned near the bottom —
     since .gp-hero__phone is the last in-flow item, the body's height
     ends exactly at the photo's bottom edge, so bottom:16px lands it
     right where the Figma spec wants without needing to know the
     preceding content's height. */
  .gpb-scope .gp-hero__qr { display: none; }
  .gpb-scope .gp-hero__download {
    position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3;
    padding: 0 16px; width: auto; align-items: center;
  }
  .gpb-scope .gp-hero__download-caption {
    max-width: none; text-align: center;
    font-weight: 900; font-size: 14px; line-height: 24px;
    color: #fff;
  }
  .gpb-scope .gp-hero__download-caption-highlight { color: #F5EA61; }
  .gpb-scope .gp-hero__download-row { justify-content: center; }
  .gpb-scope .gp-store-badges--stack { flex-direction: row; }
  .gpb-scope .gp-hero__download .gp-store-badge img { height: 40px; }
}

/* Tablet — a genuine two-column hero for the gap between the phone
   stack (<=640px) and desktop (>=1024px). Ranges are mutually
   exclusive with the block above, so nothing needs to fight the
   cascade against the mobile stack's very different structure
   (display:contents, flex order, full-bleed image, absolute-
   positioned overlay caption, etc.). The desktop values (image at a
   fixed height:1000px positioned via left:calc(88%+340px), copy with
   a 445px left padding) assume a ~1520px-wide canvas and don't scale
   down — at tablet widths they pushed almost the whole image
   off-screen to the right and crushed the copy column, so this
   replaces them with a contained, responsive object-fit:cover image
   instead of reusing either the free-floating desktop image or the
   mobile full-bleed stack. */
@media (min-width: 641px) and (max-width: 1023px) {
  .gpb-scope .gp-hero { padding: 32px 0 0; }
  /* Row 1: title, row 2: lede — both span the full width, above the
     two-column split. Row 3/4: image in column 1 (spanning both rows,
     so its height matches the icons+download stack beside it) with
     the pay-logos row and download block in column 2. .gp-hero__copy
     is flattened via display:contents so its children (title, lede,
     paylogos, download) can be placed independently on this grid
     alongside their sibling .gp-hero__phone. */
  .gpb-scope .gp-hero__body {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    grid-template-rows: auto auto auto auto;
    align-items: start;
    column-gap: 32px;
    row-gap: 0;
    margin-top: 0;
  }
  .gpb-scope .gp-hero__copy { display: contents; }
  .gpb-scope .gp-hero__title,
  .gpb-scope .gp-hero__lede,
  .gpb-scope .gp-hero__paylogos,
  .gpb-scope .gp-hero__download { width: auto; min-width: 0; }

  .gpb-scope .gp-hero__title { grid-column: 1 / -1; grid-row: 1; margin-bottom: 16px; text-align: center; }
  .gpb-scope .gp-hero__lede { grid-column: 1 / -1; grid-row: 2; margin-bottom: 24px; max-width: none; text-align: center; }
  .gpb-scope .gp-hero__paylogos {
    grid-column: 2; grid-row: 3;
    justify-content: flex-start; margin-bottom: 72px; gap: 10px;
  }
  .gpb-scope .gp-hero__paylogos li { width: 56px; height: 56px; }

  .gpb-scope .gp-hero__phone {
    grid-column: 1; grid-row: 3 / 5;
    align-self: stretch;
    position: relative;
    min-height: 0;
  }
  .gpb-scope .gp-hero__phone::before { display: none; }
  .gpb-scope .gp-hero__phone img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: 30% 50%;
    /* Rounded top only, flat bottom — this card sits flush against
       whatever's below it (no gap to round away from), so rounding
       the bottom corners just cut a curved notch out of the image
       there. Fixed edges: fade the photo's own left/right edges via
       mask-image (like the desktop and mobile hero already do)
       instead of a background glow, which can't blend a still
       hard-edged foreground image — it only lightens what's already
       outside it. */
    border-radius: 24px 24px 0 0;
    transform: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }

  .gpb-scope .gp-hero__copy .gp-hero__download { margin-top: 0; }
  .gpb-scope .gp-hero__download {
    grid-column: 2; grid-row: 4;
    position: static;
    padding: 0; align-items: flex-start;
  }
  .gpb-scope .gp-hero__download-caption {
    text-align: left; font-weight: 500; font-size: 16px; line-height: 24px; color: #F5EA61;
  }
  .gpb-scope .gp-hero__download-caption-highlight { color: inherit; }
  .gpb-scope .gp-hero__download-row { justify-content: flex-start; align-items: stretch; }
  /* Fixed, matching pixel values rather than flex stretch — an img
     with width/height:auto plus aspect-ratio falls back to its own
     natural file size instead of stretching to the row's height (that's
     what made the QR balloon and cover the badges), so both sides are
     pinned to the same explicit numbers instead: two 44px badges +
     an 8px gap = 96px, and the QR is set to that same 96px square. */
  .gpb-scope .gp-hero__qr { display: block; width: 96px; height: 96px; margin-bottom: 16px; }
  .gpb-scope .gp-store-badges--stack { flex-direction: column; gap: 8px; }
  .gpb-scope .gp-hero__download .gp-store-badge img { height: 44px; width: auto; }

  .gpb-scope .gp-hero__title { font-size: clamp(34px, 5vw, 48px); }
}