/* ===================== Become a Merchant ===================== */
.merchant-banner { background: #212427; }

/* ---------- hero: white card + photo ---------- */
.merchant-hero { overflow: hidden; }
.merchant-hero-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5.5%; }
.merchant-card {
  align-self: start;
  width: 530px;
  max-width: 100%;
  min-height: 369px;
  margin-top: 60px;
  padding: 92px 25px 0;
  background: var(--white);
  border-radius: 5px 5px 0 0;
}
.merchant-card h1 { padding-bottom: 10px; font-size: 32px; font-weight: 700; line-height: 38.4px; color: #333333; }
.merchant-card p { font-size: 14px; line-height: 21px; color: #000000; }
.merchant-store { margin-top: 14px; padding-top: 16px; }
.merchant-photo img { width: 95%; max-width: none; margin: 36px 0 0 9%; }

/* ---------- benefits ---------- */
.merchant-benefits { padding: 81px 0 79px; text-align: center; }
.merchant-benefits h2 { width: 700px; max-width: 100%; margin: 0 auto; padding-bottom: 10px; font-size: 40px; font-weight: 700; line-height: 48px; color: var(--white); }
.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; margin-top: 62px; }
.benefit-col { display: flex; flex-direction: column; gap: 18px; }
.benefit { min-width: 0; padding: 50px 15px; background: var(--white); border-radius: 5px; color: #000000; transition: transform 0.3s, box-shadow 0.3s; }
.benefit.pad-60 { padding: 60px 15px; }
.benefit.pad-47 { padding: 47px 15px; }
.benefit img { margin: 0 auto; }
.benefit h3 { margin-top: 48px; font-size: 20px; font-weight: 500; line-height: 24px; }
.benefit p { margin-top: 20px; font-size: 13px; font-weight: 300; line-height: 19.5px; }
.benefit p.big { font-size: 14px; line-height: 21px; }
.only-mobile { display: none; }

/* ---------- request a POS banner ---------- */
.merchant-pos { padding: 115px 0 20px; }
.merchant-pos img { width: 100%; }

/* ---------- reach us ---------- */
.merchant-reach { padding: 81px 0 89px; text-align: center; }
.merchant-reach h2 { padding-bottom: 10px; font-size: 40px; font-weight: 700; line-height: 48px; color: var(--white); }
.reach-links { margin-top: 32px; padding-bottom: 10px; font-size: 25px; font-weight: 700; line-height: 30px; color: var(--orange); }
.reach-links a { transition: color 0.2s; }
.reach-links a:first-child { margin-right: 9px; }
.reach-links a + a { margin-left: 9px; }
.reach-links a:hover { color: #ffad44; }

/* ---------- tablet ---------- */
@media (max-width: 980px) {
  .merchant-hero-row { grid-template-columns: 1fr; }
  .merchant-card { width: auto; min-height: 380px; }
  .merchant-card h1 { font-size: 43px; line-height: 42px; }
  .merchant-photo img { width: 98%; margin: 24px 0 0 35px; }

  .merchant-benefits { padding: 80px 0 0; }
  .merchant-benefits h2 { font-size: 30px; line-height: 36px; }
  .benefit-grid { grid-template-columns: 1fr; margin-top: 68px; }
  .benefit-col { gap: 30px; }
  .benefit-col + .benefit-col { margin-top: 30px; }
  .only-desktop { display: none; }
  .only-mobile { display: block; }
  .benefit p.big { max-width: 550px; margin: 20px auto 16px; }

  .merchant-pos { padding: 85px 0 20px; }
  .merchant-reach { padding: 80px 0 88px; }
  .reach-links { margin-top: 30px; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .merchant-card { min-height: 443px; }
  .merchant-card h1 { font-size: 26px; line-height: 42px; }
  .merchant-photo img { width: 96%; margin-left: 35px; }

  .merchant-benefits h2 { font-size: 25px; line-height: 30px; }
  .merchant-benefits h2 br { display: none; }
  .benefit p.big br { display: none; }

  .merchant-pos { padding: 0; height: 41px; }
  .merchant-pos .container { display: none; }
  .reach-links { overflow-wrap: anywhere; }
}