/* TapHelp — 600px view
   Built from the locked desktop / 320 / 360 / 375 views.
   600 changes layout and available width only; standardized component
   styling remains sourced from style.css wherever it already fits. */

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 scale fits at 600; only the container becomes fluid. */

.hero__inner {
  padding-top: 18px;
}

.hero__logo {
  width: 440px;
}

/* Intro — use the desktop text measure and natural desktop copy treatment. */

.intro__inner {
  width: auto;
}

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

/* Services — return to the desktop two-column structure, sized to 600. */

.service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

.service-card {
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 6px;
  width: 100%;
  height: 126px;
  padding: 15px 8px;
}

.service-card img,
.service-card > div {
  transform: none;
}

.service-card > div {
  min-width: 0;
}

/* Steps — keep the approved card component spacious instead of squeezing
   three cards into a tablet-width row. */

.steps-grid {
  grid-template-columns: 1fr;
  gap: 18px;
  width: 460px;
  max-width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
}

.step-card {
  width: 100%;
}

/* About — widen toward desktop while keeping the full card inside 600. */

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

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

/* Pricing — desktop component already fits; no component restyling needed. */

/* FAQ — use the available tablet width and natural text wrapping. */

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

.faq summary {
  padding-left: 14px;
  padding-right: 38px;
}

.faq details:last-of-type summary {
  padding-right: 34px;
  white-space: nowrap;
}

.faq__answer {
  padding-left: 14px;
  padding-right: 14px;
  line-height: 1.55;
}

.faq__answer br {
  display: inline;
}

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

/* FAQ 1 — balanced 600px composition */
.faq details:nth-of-type(1) .faq__answer {
  font-size: 0;
  line-height: 0;
}

.faq details:nth-of-type(1) .faq__answer::before {
  content:
    "You share your screen so I can see what you’re seeing and\A"
    "guide you step by step. You remain in control of your iPhone\A"
    "or iPad the entire time.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.55;
}

/* FAQ 3 — balanced 600px composition */
.faq details:nth-of-type(3) .faq__answer {
  font-size: 0;
  line-height: 0;
}

.faq details:nth-of-type(3) .faq__answer::before {
  content:
    "I can help with everyday iPhone and iPad issues such as Wi-Fi,\A"
    "texts, photos, email, settings, suspicious messages or scams,\A"
    "and other common questions.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.55;
}

/* FAQ 4 — balanced 600px composition */
.faq details:nth-of-type(4) .faq__answer {
  font-size: 0;
  line-height: 0;
}

.faq details:nth-of-type(4) .faq__answer::before {
  content:
    "If the problem requires something beyond what I can safely\A"
    "handle remotely, I’ll explain what the next step should be and\A"
    "help point you in the right direction.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.55;
}

/* CTA — desktop component styling fits at 600. */

/* Footer — fluid container with a balanced legal measure. */

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

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

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

.footer__legal br {
  display: inline;
}

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