/* TapHelp — 768px view
   Built from the locked Desktop / 320 / 360 / 375 / 600 views.
   Standardized components retain their approved desktop geometry wherever
   768px provides enough room; only layout, available width, and placement vary. */

html,
body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.container,
.hero__inner,
.intro__inner,
.faq__inner,
.footer__inner {
  width: auto;
  max-width: none;
  margin-left: 24px;
  margin-right: 24px;
}

/* Header — desktop component scale, fluid tablet container. */

.hero__inner {
  padding-top: 18px;
}

.hero__logo {
  width: 440px;
}

/* Intro — desktop text measure and alignment. */

.intro__inner {
  width: auto;
}

.intro__copy {
  width: 520px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(8px);
}

/* Services — restore the standardized desktop cards at full approved size. */

.service-grid {
  grid-template-columns: repeat(2, 330px);
  gap: 18px;
  width: 678px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.service-card {
  grid-template-columns: 70px 220px;
  column-gap: 18px;
  width: 330px;
  height: 126px;
  padding: 15px 10px;
}

.service-card img {
  transform: translateX(8px);
}

.service-card > div {
  min-width: 0;
  transform: translateX(8px);
}

/* Steps — retain the standardized 330px cards; two on the first row,
   third centered beneath them. */

.steps-grid {
  grid-template-columns: repeat(2, 330px);
  gap: 24px;
  width: 684px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.step-card {
  width: 330px;
}

.step-card:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
}

/* About — nearly desktop width, with the approved desktop body measure. */

.about-card {
  width: calc(100% - 48px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 31px 24px;
}

.about-card__body {
  width: 500px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(28px);
}

/* Pricing — desktop component already fits unchanged. */

/* FAQ — use the tablet width with the normal desktop text treatment.
   No narrow-mobile pseudo-element reflow is carried forward. */

.faq__inner {
  width: auto;
  margin-left: 24px;
  margin-right: 24px;
}

.faq summary {
  padding: 20px 52px 20px 18px;
  white-space: normal;
}

.faq__answer {
  padding: 16px 14px 18px;
  font-size: 18px;
  line-height: 1.6;
}

.faq__answer br {
  display: inline;
}

.faq__answer br::after {
  content: " ";
  white-space: pre;
}

/* Defensive reset: 768 should use the real FAQ text, not any narrow-view
   generated replacement text. */

.faq details .faq__answer::before {
  content: none;
}

/* CTA — desktop component styling fits unchanged. */

/* Footer — wide tablet measure, approaching the desktop layout. */

.footer {
  padding-left: 24px;
  padding-right: 24px;
}

.footer__inner {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.footer__legal {
  width: 620px;
  max-width: 100%;
}

.footer__legal br {
  display: inline;
}

.footer__legal br::after {
  content: " ";
  white-space: pre;
}