/* ============================================================
   Zak Pay — Homepage design-system refinements
   Scoped to index.html (loaded AFTER style.css so it wins the
   cascade). Covers: consistent card system, section rhythm,
   tighter type scale, and primary-CTA colour discipline.
   Safe to remove this <link> to fully revert.
   ============================================================ */

:root {
  --zp-primary: #ff7800;
  --zp-ink: #223046;
  --zp-radius-card: 16px;
  --zp-shadow-card: 0 6px 24px rgba(44, 62, 80, 0.08);
  --zp-section-y: 3.25rem;
  --zp-section-y-sm: 2.25rem;
}

/* ---------- (10) Consistent section rhythm ---------- */
/* One vertical rhythm for the main content bands... */
.features-intro-bg,
.features-bg,
.mobile-app,
.showcase,
.get-started,
.pricing-section,
.growth,
.section-heading,
.faq-section {
  padding-top: var(--zp-section-y);
  padding-bottom: var(--zp-section-y);
}

/* ...and a tighter rhythm for the thin logo / stat strips. */
.partners,
.stats-section {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

@media (max-width: 768px) {
  .features-intro-bg,
  .features-bg,
  .mobile-app,
  .showcase,
  .get-started,
  .pricing-section,
  .growth,
  .section-heading,
  .faq-section {
    padding-top: var(--zp-section-y-sm);
    padding-bottom: var(--zp-section-y-sm);
  }
}

/* ---------- (9) Unified card system ---------- */
/* Same radius, shadow and padding for every card on the page. */
.feature-card,
.pricing-card {
  border-radius: var(--zp-radius-card);
  box-shadow: var(--zp-shadow-card);
  padding: 2rem;
}

/* ---------- (8) Tighter, consistent type scale ---------- */
/* Section headings snap to one size... */
.section-title,
.get-started .section-title,
.faq-title,
.partners h2,
.intro-title,
.growth-text h2 {
  font-size: 2.25rem;
}

/* ...and every big heading gets consistent tracking + leading. */
.hero-text h1,
.section-title,
.get-started .section-title,
.faq-title,
.partners h2,
.intro-title,
.growth-text h2,
.mobile-app__title {
  letter-spacing: -0.02em;
  line-height: 1.15;
}

@media (max-width: 768px) {
  .section-title,
  .get-started .section-title,
  .faq-title,
  .partners h2,
  .intro-title,
  .growth-text h2 {
    font-size: 1.75rem;
  }
}

/* ---------- (4) Reserve orange for primary CTAs ---------- */
/* Secondary / outline buttons become neutral ink; the filled
   orange buttons stay as the single primary action colour. */
.btn-outline-dark {
  color: var(--zp-ink);
  border-color: var(--zp-ink);
}
.btn-outline-dark:hover {
  background: var(--zp-ink);
  border-color: var(--zp-ink);
  color: #fff;
}

/* ---------- Features grid: two cards per row ---------- */
/* Desktop was 3-up; show 2 per row (tablet already 2, mobile 1). */
@media (min-width: 901px) {
  .features-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

/* These stack extra margin on top of the section padding above, which
   doubled the gaps; the padding alone is enough. */
.faq-section {
  margin-top: 0;
  /* 6rem of white below the last FAQ left the footer stranded, especially on
     a phone where it read as the page having ended. */
  margin-bottom: 0;
}
.growth-content {
  margin-top: 2rem;
}
.site-footer {
  margin-top: 0;
}
.faq-subtitle {
  margin-bottom: 2rem;
}

/* A logo strip already reads as a divider, so the section right after it
   doesn't need the full rhythm on top. */
.partners + .features-intro-bg {
  padding-top: 2.5rem;
}

/* "Available on App Stores" reads as a label, not muted helper text */
.store-label {
  color: var(--zp-ink);
}

/* ============================================================
   Product showcase: one section, four selectable tabs
   Replaces the old wallet checklist / phone screenshots /
   "make every transaction easy" blocks.
   ============================================================ */
.showcase {
  text-align: center;
}
.showcase__title {
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--zp-ink);
  margin: 0 0 0.75rem;
}
.showcase__sub {
  max-width: 640px;
  margin: 0 auto 2rem;
  color: #5a6472;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Segmented control */
.showcase__tablist-wrap {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.showcase__tablist-wrap::-webkit-scrollbar {
  display: none;
}
.showcase__tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 8px;
  background: #f1f3f5;
  border-radius: 50px;
}
.showcase__tab {
  border: 0;
  /* Safari ignores custom button backgrounds without this */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border-radius: 50px;
  padding: 14px 24px;
  font-family: "Outfit", sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--zp-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.showcase__tab:hover:not(.is-active) {
  background: rgba(34, 48, 70, 0.06);
}
.showcase__tab.is-active {
  background: var(--zp-primary);
  color: #fff;
}
.showcase__tab:focus-visible {
  outline: 2px solid var(--zp-primary);
  outline-offset: 2px;
}

/* Panels: ~45% copy / ~55% visual on desktop */
.showcase__panels {
  margin-top: 2rem;
}
.showcase__panel {
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: center;
  gap: 2.5rem;
  text-align: left;
  background: #fff;
  border-radius: var(--zp-radius-card);
  box-shadow: var(--zp-shadow-card);
  padding: 2.5rem;
}
.showcase__panel[hidden] {
  display: none;
}
.showcase__panel.is-active {
  animation: showcase-in 0.35s ease both;
}
@keyframes showcase-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.showcase__heading {
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--zp-ink);
  margin: 0 0 0.75rem;
}
.showcase__lead {
  color: #444;
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}
.showcase__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.showcase__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  line-height: 1.5;
  margin-bottom: 0.7rem;
}
.showcase__list li::before {
  content: "\2713"; /* escape, so encoding can't garble it */
  color: var(--zp-primary);
  font-weight: 700;
  flex-shrink: 0;
}
.showcase__kicker {
  margin: 0;
  color: var(--zp-primary);
  font-weight: 700;
  font-size: 1.05rem;
}

.showcase__visual {
  display: flex;
  justify-content: center;
}

.showcase__media {
  display: block;
  width: 100%;
  max-width: 420px;
  max-height: 460px;
  object-fit: contain;
  border-radius: 20px;
}

/* Mobile: visual on top, copy below; tabs scroll sideways */
@media (max-width: 900px) {
  .showcase__panel {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  .showcase__visual {
    order: -1;
  }
  .showcase__tablist-wrap {
    justify-content: flex-start;
  }
  .showcase__title {
    font-size: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__panel.is-active {
    animation: none;
  }
  .showcase__tab {
    transition: none;
  }
}

/* ---------- Hero trust strip ---------- */
.hero-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 4rem 0 0;
  padding: 0;
  font-family: "Outfit", sans-serif;
  font-size: 0.95rem;
  color: #5a6472;
}
/* Bullet separators between items, not before the first */
.hero-trust li + li::before {
  content: "•";
  color: var(--zp-primary);
  margin-right: 1rem;
}

/* ---------- Hero carousel: consistent slide box ---------- */
/* Slides have different aspect ratios (some square, some not), and the
   active slide was setting the wrapper height, so size/position jumped
   between slides. Fix the box and fit every slide inside it. */
.hero-carousel .carousel-wrapper {
  aspect-ratio: 1 / 1;
}
.hero-carousel .carousel-image {
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.hero-carousel .carousel-image.active {
  position: absolute;
}

/* ---------- Accepted Payment Methods: logo marquee ---------- */
/* Logos scroll left -> right in a seamless loop (two identical sets).
   Soft edge fade + pauses off-screen (see js/script.js). */
.logo-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(
    to right, transparent 0, #000 8%, #000 92%, transparent 100%
  );
  mask-image: linear-gradient(
    to right, transparent 0, #000 8%, #000 92%, transparent 100%
  );
}
.logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-marquee-ltr 24s linear infinite;
}
/* Logos in assets/images/logos/ are trimmed to their artwork, so one
   height gives every brand the same visible size. */
.logo-marquee__track img {
  height: 32px;
  width: auto;
  flex: 0 0 auto;
  margin: 0 2.25rem;
}
/* Wide, bold wordmarks read larger than the square/pill marks
   (Samsung Pay, Amex, Capitec Pay) at the same height: 15% smaller. */
.logo-marquee__track img[src*="logos/scan-to-pay"],
.logo-marquee__track img[src*="logos/ozow"],
.logo-marquee__track img[src*="logos/zak-pay"],
.logo-marquee__track img[src*="logos/google-pay"],
.logo-marquee__track img[src*="logos/apple-pay"],
.logo-marquee__track img[src*="logos/visa"],
.logo-marquee__track img[src*="logos/mastercard"] {
  height: 27px;
}
/* left -> right: start shifted one set-width left, glide back to 0 */
@keyframes logo-marquee-ltr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
}

/* Feature highlight row: four cards across on desktop
   (auto-fit was settling on three and wrapping the fourth) */
/* Give the four-card row a wider track than the default 1200px container */
@media (min-width: 1240px) {
  .feature-highlights.container,
  .feature-highlights .container {
    max-width: 1320px;
  }
}

/* Reserve two lines for every card title so the paragraphs below them
   all start on the same line, whether the title wraps or not. */
.feature-highlights .feature-card__title {
  line-height: 1.3;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 992px) {
  .mobile-app .feature-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .mobile-app .feature-cards .feature-card {
    padding: 1.5rem 1.25rem;
  }
  /* Three cards now, so the product screens can be shown large enough
     to actually read */
  .mobile-app .feature-cards .feature-card__img-wrap img {
    height: 400px;
  }
  .mobile-app .feature-cards .feature-card__title {
    font-size: 1.4rem;
  }
  .mobile-app .feature-cards .feature-card__text {
    font-size: 0.95rem;
  }
  .mobile-app .feature-cards .feature-card__btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
    white-space: nowrap;
  }
}

/* ---------- Pricing: per-payment-method rate cards ---------- */
.pricing-section .pricing-card--rates {
  max-width: 720px;
}
.card-price-from {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 0.4rem;
}
.rate-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  flex-grow: 1;
}
/* logos | method | rate */
.rate-row {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid #f0f0f0;
  font-family: "Outfit", sans-serif;
}
.rate-row:last-child {
  border-bottom: none;
}
.rate-logos {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
/* Same height for every trimmed logo; no width caps so none get shrunk */
.rate-logos img {
  height: 22px;
  width: auto;
}
/* Same optical balance as the banner: wide wordmarks 15% smaller */
.rate-logos img[src*="logos/scan-to-pay"],
.rate-logos img[src*="logos/ozow"],
.rate-logos img[src*="logos/zak-pay"],
.rate-logos img[src*="logos/google-pay"],
.rate-logos img[src*="logos/apple-pay"],
.rate-logos img[src*="logos/visa"],
.rate-logos img[src*="logos/mastercard"] {
  height: 19px;
}
.rate-label {
  font-size: 15px;
  font-weight: 500;
  color: #444;
  line-height: 1.3;
}
.rate-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--zp-ink);
  text-align: right;
  white-space: nowrap;
}
.rate-note {
  font-size: 13px;
  color: #777;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 1.5rem;
}
/* Narrow phones: logos sit on their own line above method + rate */
@media (max-width: 480px) {
  .rate-row {
    grid-template-columns: 1fr auto;
    row-gap: 0.4rem;
  }
  .rate-logos {
    grid-column: 1 / -1;
  }
}

/* ---------- Uniform card image size ---------- */
/* Every feature-card image matches the Employee Management card
   (per-card :nth-child sizes used 220px vs 280px). */
.features-grid .feature-card img {
  width: 100%;
  height: 280px;
  object-fit: contain;
  margin-bottom: 1rem;
}

/* Feature cards: let the product image dominate its frame */
.feature-highlights .feature-card__img-wrap {
  padding: 0.5rem;
}
@media (max-width: 991px) {
  .feature-highlights .feature-card__img-wrap img {
    height: 360px;
  }
}

/* Employee lanyard (showcase): shown at full size by default instead of
   growing on hover/tap. 15% larger than the standard media box, which is
   the size the global img:hover zoom used to take it to. */
.showcase__media[src*="scan-to-pay-67"] {
  max-width: 483px;
  max-height: 529px;
}
.showcase__media[src*="scan-to-pay-67"]:hover {
  transform: none;
}

/* QR stand card image is a transparent cut-out that doesn't fill its box,
   so the image-level shadow drew a second outline inside the frame.
   The frame alone gives it the same card look as the screenshots. */
.feature-card__img-wrap img[src*="qr-stand-card"],
.feature-card__img-wrap:hover img[src*="qr-stand-card"] {
  box-shadow: none;
}

/* Contact form intro line under the (now longer) form title */
.contact-sub {
  text-align: center;
  color: #5a6472;
  font-size: 1rem;
  line-height: 1.55;
  margin: -0.5rem 0 1.5rem;
}
/* growth-sub was near-white from an old dark background */
.growth-text .growth-sub {
  color: #5a6472;
  font-size: 1.1rem;
  margin: 0.5rem 0 1.5rem;
}

/* Growth/contact section: the longer value-prop lines were sized with
   max-content, so the right column grew and squeezed the form. Give the
   two sides a fixed split and let the feature text wrap. */
@media (min-width: 769px) {
  /* value summary (left) then the form (right), top-aligned as one block */
  .growth-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3.5rem;
    align-items: start;
  }
  .growth-content {
    margin-top: 0;
    /* matches the form card's inner padding so both headings line up */
    padding-top: 2rem;
  }
  .contact-form-section {
    margin-top: 0;
    max-width: none;
  }
  .growth-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 2rem;
  }
  .growth-features div > div {
    font-size: 1.02rem;
    line-height: 1.45;
    color: #5a6472;
  }
  /* Same icon box for every item so the text lines up */
  .growth-features img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
  }
  .growth-features div > div strong {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--zp-ink);
    margin-bottom: 0.2rem;
  }
}

/* Download-the-app option at the bottom of the contact form card */
.contact-app {
  margin-top: 1.75rem;
  text-align: center;
}
.contact-app__label {
  font-weight: 700;
  color: var(--zp-ink);
  font-size: 1rem;
  margin: 0 0 0.9rem;
}
.contact-app__stores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
.contact-app__store {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 0.5rem;
  border: 1.5px solid #e4e7ec;
  border-radius: 12px;
  background: #fff;
  color: var(--zp-ink);
  text-decoration: none;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-app__store:hover {
  border-color: var(--zp-ink);
  box-shadow: 0 4px 14px rgba(34, 48, 70, 0.1);
}
.contact-app__store img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}
/* no site-wide hover zoom on these small icons */
.contact-app__store img:hover {
  transform: none;
}
.contact-app__store span {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.contact-app__store small {
  font-size: 0.62rem;
  font-weight: 500;
  color: #667085;
}
/* Below desktop the three fixed columns squeezed each button under the width
   of its own label, so the icon and text pushed through the border. Let the
   row fit as many as the card can actually hold: 3, then 2, then 1. */
@media (max-width: 767px) {
  .contact-app__stores {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  /* Last resort if a label still outruns its column: wrap inside the
     button rather than break out of it. */
  .contact-app__store span {
    white-space: normal;
  }
}

/* ============================================================
   MOBILE OPTIMISATION (phones & small tablets only)
   Everything below is inside max-width media queries, so the
   desktop layout is untouched.
   ============================================================ */
@media (max-width: 768px) {
  /* ---- Hero ---- */
  .hero-text h1 {
    font-size: 2.15rem;
    line-height: 1.12;
  }
  .hero-text .subhead {
    font-size: 1.02rem;
    line-height: 1.55;
  }
  /* The carousel slides are absolutely positioned inside a square box,
     which collapsed to a thumbnail in the stacked mobile hero. */
  .hero-image {
    width: 100%;
  }
  .hero-carousel {
    width: 100%;
    max-width: 420px;
    margin: 1.75rem auto 0;
  }
  /* Trust points as tidy chips instead of a wrapping bullet line */
  .hero-trust {
    margin-top: 1.75rem;
    justify-content: center;
    gap: 0.5rem;
  }
  .hero-trust li + li::before {
    content: none;
  }
  .hero-trust li {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
  }

  /* ---- Our Partners: compact row (it repeats the same two logos) ---- */
  .partners .partners-logos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 2.5rem;
  }
  .partners .partners-logos img {
    width: auto !important;
    height: auto !important;
    max-height: 44px !important;
    max-width: 150px;
    margin: 0;
  }
  .partners .partners-logos img:nth-child(n + 3) {
    display: none;
  }

  /* ---- Showcase tabs: three full-width pills. The row never fitted at
     phone width, so the third tab sat off-screen behind a fade and had to
     be scrolled to before it could be picked. ---- */
  .showcase__tablist-wrap {
    display: block;
    overflow-x: visible;
    padding-right: 0;
  }
  .showcase__tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    width: 100%;
    padding: 6px;
    border-radius: 26px;
  }
  .showcase__tab {
    width: 100%;
    padding: 13px 16px;
    font-size: 0.95rem;
    white-space: normal;
  }
  .showcase__heading {
    font-size: 1.45rem;
  }
  .showcase__media {
    max-height: 340px;
  }

  /* ---- Accepted payment methods marquee: smaller, tighter logos ---- */
  .logo-marquee__track img {
    height: 26px;
    margin: 0 1.4rem;
  }
  .logo-marquee__track img[src*="logos/scan-to-pay"],
  .logo-marquee__track img[src*="logos/ozow"],
  .logo-marquee__track img[src*="logos/zak-pay"],
  .logo-marquee__track img[src*="logos/google-pay"],
  .logo-marquee__track img[src*="logos/apple-pay"],
  .logo-marquee__track img[src*="logos/visa"],
  .logo-marquee__track img[src*="logos/mastercard"] {
    height: 22px;
  }

  /* ---- Get Started: tighter step cards ---- */
  .get-started .cards-grid {
    gap: 1rem;
  }
  .get-started .card {
    padding: 1.5rem;
  }
  .get-started .card-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
  }

  /* ---- Stats band: 2 x 2 grid with proper dividers ---- */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .stats-grid .stat {
    padding: 1rem 0.5rem;
    border-left: 0 !important;
  }
  .stats-grid .stat:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.35);
  }
  .stats-grid .stat:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  }
  .stats-grid .stat h3 {
    font-size: 1.6rem;
  }
  .stats-grid .stat p {
    font-size: 0.95rem;
  }
  .stats-grid .stat:hover {
    transform: none;
    box-shadow: none;
  }

  /* ---- More ways to grow your business ---- */
  .features-grid-title {
    font-size: 2rem;
  }
  .feature-highlights .feature-card__title {
    min-height: 0;
  }
  .feature-highlights .feature-card__img-wrap img {
    height: 300px;
  }

  /* ---- Pricing ---- */
  .pricing-title {
    font-size: 2rem;
  }

  /* ---- Value summary: icon + left-aligned text list ---- */
  .growth-features {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }
  .growth-features > div {
    align-items: flex-start;
    text-align: left;
    padding: 0;
  }
  .growth-features img {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .growth-features div > div {
    font-size: 0.98rem;
    line-height: 1.45;
    color: #5a6472;
  }
  .growth-features div > div strong {
    display: inline-block;
    font-size: 1.1rem;
    color: var(--zp-ink);
    margin-bottom: 0.15rem;
  }

  /* ---- Contact form card ---- */
  .contact-form-section {
    padding: 1.5rem;
  }
  .contact-title {
    font-size: 1.45rem;
  }

  /* ---- Feature cards: undo the double 90% container squeeze ---- */
  .feature-highlights .container {
    width: 100%;
  }

  /* ---- Pricing rows: left-aligned method names scan faster ---- */
  .rate-label {
    text-align: left;
  }

  /* ---- Footer newsletter: a usable, full-width email field ---- */
  .site-footer .newsletter {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .site-footer .newsletter input {
    flex: 1;
    width: auto;
    margin: 0;
    padding: 0.8rem 0.9rem;
    font-size: 1rem; /* 16px stops iOS zooming in on focus */
    border-radius: 10px;
  }
  .site-footer .newsletter button {
    padding: 0 1.1rem;
    font-size: 1.1rem;
    border-radius: 10px;
  }
}

/* FAQ: longer answers (logo strip, regulation note) were being clipped
   by the 200px open height */
.faq-item.active .faq-answer {
  max-height: 640px;
}
.faq-answer a {
  color: var(--zp-primary);
  font-weight: 600;
}
/* Accepted payment method logos inside the FAQ answer */
.faq-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
  /* same indent as the answer text */
  padding: 0 2rem 1.25rem;
}
.faq-logos img {
  height: 20px;
  width: auto;
}
.faq-logos img[src*="samsung-pay"],
.faq-logos img[src*="amex"],
.faq-logos img[src*="capitec-pay"] {
  height: 24px;
}
.faq-logos img:hover {
  transform: none;
}
@media (max-width: 768px) {
  .faq-logos {
    padding: 0 1.5rem 1rem;
    gap: 0.6rem 0.9rem;
  }
}

/* ============================================================
   Mobile: showcase card + footer
   ============================================================ */
@media (max-width: 900px) {
  /* The demo clips are square with the phone floating in the middle, so the
     stacked card opened with a tall band of empty white — and with nothing
     painted until several MB had buffered, it was blank on first scroll.
     A fixed 3:4 frame reserves the space, the poster fills it straight away
     and the dead margins either side of the phone are cropped off. */
  video.showcase__media {
    width: 100%;
    max-width: 300px;
    max-height: none;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  /* ---- Footer: one left-aligned column, tappable links ---- */
  .site-footer {
    padding: 2.5rem 0 1.25rem;
  }
  .site-footer .footer-top {
    gap: 1.75rem;
    padding: 0 0 1.75rem;
    text-align: left;
  }
  .footer-right {
    gap: 1.5rem;
  }
  .footer-brand h3 {
    font-size: 1.6rem;
  }
  .footer-tagline {
    max-width: none;
    margin-bottom: 0;
  }
  .footer-app-stores {
    margin-top: 1.25rem;
  }
  .footer-store-badges img {
    height: 34px;
  }
  /* Two even columns that can wrap, instead of nowrap links that pushed
     "Terms of service" off the edge on a narrow phone. */
  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.15rem 1.25rem;
  }
  .footer-nav a {
    white-space: normal;
    padding: 0.5rem 0;
  }
  .site-footer .newsletter {
    margin: 0;
    max-width: none;
  }
  .footer-bottom {
    text-align: left;
    padding-top: 1.25rem;
  }
  .footer-bottom p {
    font-size: 0.82rem;
    line-height: 1.55;
  }
}

/* ============================================================
   Mobile polish
   ============================================================ */

/* The nav toggle adds .no-scroll to <body>, but nothing ever styled it, so
   the page kept scrolling under the open menu. */
body.no-scroll {
  overflow: hidden;
}

/* The header is sticky and ~85px tall on a phone, so every in-page link
   (#pricing, #faqs, #get-app) landed with its heading hidden behind it. */
:target,
#showcase,
#get-started,
#get-app,
#pricing,
#faqs {
  scroll-margin-top: 100px;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
/* iOS inflates text in landscape unless told not to. */
html {
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 768px) {
  /* ---- Hero: one clear action per line, thumb-sized ---- */
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    /* Capped so the pair reads as a pair, not two full-bleed bars. */
    max-width: 340px;
    margin: 1.5rem auto 0;
  }
  .hero-ctas .btn {
    width: 100%;
    padding: 0.95rem 1.5rem;
    font-size: 1rem;
    text-align: center;
  }
  /* ---- Buttons: nothing smaller than a fingertip ---- */
  .btn,
  .pricing-btn,
  .feature-card__btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 16px keeps iOS from zooming the page when a field is focused. */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* ---- Pricing card: give the rate rows the full width ---- */
  .pricing-card {
    padding: 1.5rem 1.25rem;
  }
}

/* ============================================================
   "Get Zak Pay" store chooser modal
   ============================================================ */
.get-app-content {
  max-width: 460px;
  text-align: center;
}
.get-app-content h2 {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  color: var(--zp-ink);
}
.get-app-sub {
  margin: 0 0 1.5rem;
  color: #5a6472;
  font-size: 1rem;
  line-height: 1.5;
}
.get-app-stores {
  display: grid;
  gap: 0.75rem;
}
/* One row per store: icon, two-line label, chevron */
.get-app-store {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
  color: var(--zp-ink);
  text-decoration: none;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.get-app-store:hover,
.get-app-store:focus-visible {
  border-color: var(--zp-primary);
  box-shadow: 0 6px 18px rgba(34, 48, 70, 0.1);
  transform: translateY(-1px);
}
.get-app-store img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
/* the global img:hover zoom would jitter these */
.get-app-store img:hover {
  transform: none;
}
.get-app-store__text {
  display: flex;
  flex-direction: column;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}
.get-app-store__text small {
  font-size: 0.7rem;
  font-weight: 500;
  color: #667085;
}
.get-app-store__go {
  color: var(--zp-primary);
  font-size: 1.2rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .get-app-content {
    margin: 12% auto;
    padding: 1.75rem 1.25rem;
  }
  .get-app-content h2 {
    font-size: 1.35rem;
  }
  .get-app-store {
    padding: 0.85rem 1rem;
    min-height: 64px;
  }
}