/* ===================== TapTap ===================== */
@import url("service.css");

.text-orange-2 { color: #ff9900; }

/* ---------- hero ---------- */
.tt-hero { height: 618px; overflow: hidden; }
.tt-hero-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5.5%; }
.tt-hero-text { padding: 147px 0 0 17px; }
.tt-hero-text h1 { padding-bottom: 10px; font-size: 50px; font-weight: 700; line-height: 65px; color: #000000; }
.tt-hero-text p { margin-top: 8px; font-size: 29px; line-height: 24px; color: var(--ink-2); }
.tt-store { display: inline-block; margin-top: 30px; }
.tt-store img { width: 286px; }
.tt-hero-img { padding-top: 62px; }
.tt-hero-img img { width: 100%; }

/* ---------- trust logos ---------- */
.tt-trust { height: 92px; padding-top: 27px; background: var(--white); }
.tt-trust .trust-row { margin-left: 0; }

/* ---------- setup steps ---------- */
.tt-setup { position: relative; height: 782px; background: #f9f9f9; }
.tt-setup-row { position: relative; height: 100%; }
/* the big phone image is scaled up and pulled left on the live page */
.tt-setup-img { position: absolute; top: -55px; left: -24.57%; width: 69.36%; }
.tt-setup-img img { width: 100%; }
.tt-setup-text { position: absolute; top: 133px; left: 63.3%; width: 36.7%; }
.tt-setup-text h2 { padding-top: 10px; font-size: 26px; font-weight: 700; line-height: 31.2px; color: #000000; }
.tt-steps { list-style: none; margin-top: 31px; }
.tt-steps li { position: relative; padding: 10px 0 10px 27px; font-size: 18px; font-weight: 500; line-height: 21.6px; color: #000000; }
.tt-steps li + li { margin-top: 86px; }
/* orange line joining the steps */
.tt-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 29px;
  top: 32px;
  width: 1px;
  height: 97px;
  background: #f79210;
}
.tt-steps strong { margin-right: 8px; font-weight: 700; }

/* ---------- photos ---------- */
.tt-photos { height: 646px; margin-top: 9px; overflow: hidden; background: var(--white); }
.tt-photos-row { position: relative; height: 100%; }
.tt-phone { position: absolute; top: 116px; left: 14.76%; width: 20.83%; }
.tt-shop { position: absolute; top: 150px; left: 49.5%; width: 64.06%; max-width: none; }

/* ---------- FAQ (answer lists use orange bullets) ---------- */
.tt-faq { padding-bottom: 7px; }
.tt-faq .svc-faq-title { margin-bottom: 62px; }
.page-taptap .acc-steps .acc-body p.w500 { font-weight: 500; }
.acc-dash { margin: 0 0 0 30px; padding: 0 0 0 15px; list-style: none; font-size: 15px; font-weight: 500; line-height: 22.5px; color: #56595c; }
.acc-dash li::before { content: "\2022"; padding: 0 10px; font-size: 21px; color: var(--orange); }

/* ---------- button images ---------- */
/* the live page leaves 101px of white below the buttons */
.tt-buttons { height: 205px; margin-bottom: 101px; overflow: hidden; background: var(--white); }
.tt-buttons-row { position: relative; height: 100%; }
.tt-buttons img { width: 100%; }
.tt-btn-app { position: absolute; top: 116px; left: 10.24%; width: 47.25%; }
.tt-btn-support { position: absolute; top: 109px; left: 63.1%; width: 47.25%; }

/* ---------- tablet ---------- */
@media (max-width: 980px) {
  .tt-hero { height: 1017px; }
  .tt-hero-row { grid-template-columns: 1fr; text-align: center; }
  .tt-hero-text { padding: 80px 0 0 17px; }
  .tt-hero-text h1 { font-size: 43px; line-height: 42px; }
  .tt-hero-text h1 br { display: none; }
  .tt-hero-img { padding-top: 0; }

  .tt-trust { height: 61px; padding: 0; }
  .tt-trust .container { display: none; }

  .tt-setup { height: 1481px; }
  .tt-setup-img { top: -71px; left: -31.5%; width: 120%; }
  .tt-setup-text { top: 914px; left: 0; width: 100%; }
  .tt-steps { margin-top: 30px; }
  .tt-steps li + li { margin-top: 83px; }
  .tt-steps li:not(:last-child)::after { top: -5px; height: 166px; }

  .tt-photos { display: none; }

  .tt-faq { padding-bottom: 8px; }
  .tt-faq .svc-faq-title { margin-bottom: 68px; }

  .tt-buttons { height: 405px; }
  .tt-btn-app { top: 115px; left: 172px; width: 720px; }
  .tt-btn-support { top: 281px; left: 173px; width: 720px; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .tt-hero { height: 229px; }
  .tt-hero-text { padding-top: 60px; }
  .tt-hero-text h1 { font-size: 26px; line-height: 42px; }
  .tt-store,
  .tt-hero-img { display: none; }

  .tt-setup { height: 790px; }
  .tt-setup-img { display: none; }
  .tt-setup-text { top: 160px; }
  .tt-steps li:not(:last-child)::after { height: 72px; top: 0; }
  .tt-steps li + li { margin-top: 83px; }

  .tt-faq .svc-faq-title { margin-bottom: 68px; }
  .tt-faq { padding-bottom: 14px; }
  .tt-buttons { height: 187px; }
  .tt-steps li { padding-right: 4px; }
  .tt-buttons .container { display: none; }
}