/* =========================================================
   TAPHELP — 402px MANUAL TEXT COMPOSITION
   EXACTLY 402px ONLY

   EDIT TEXT LINES:
   Move words between quoted lines.
   \A = forced line break.

   EDIT HORIZONTAL POSITION:
   translateX(-10px) = left 10px
   translateX(10px)  = right 10px
   ========================================================= */

/* Ignore HTML <br> tags at 402px where CSS composes the lines. */
.intro br,
.about br,
.faq br,
.footer br {
  display: none;
}

/* =========================================================
   INTRO
   ========================================================= */

.intro__title {
  transform: translateX(0px);
}

.intro__copy {
  width: 100%;
  position: relative;
  left: 5px;
  transform: none;
}

.intro__copy p:first-child {
  font-size: 0;
  transform: translateX(0px);
}

.intro__copy p:first-child::before {
  content:
    "They keep us connected, hold our\A"
    "photos, play our music and help us\A"
    "get through the day. But when something\A"
    "changes or stops working, a device that\A"
    "makes life easier can suddenly\A"
    "become frustrating.";
  display: block;
  white-space: pre;
  font-size: 20px;
  line-height: 1.55;
}

.intro__copy p:nth-child(2) {
  font-size: 0;
  transform: translateX(0px);
}

.intro__copy p:nth-child(2)::before {
  content:
    "Sometimes a little personal help\A"
    "is all it takes.";
  display: block;
  white-space: pre;
  font-size: 20px;
  line-height: 1.55;
}

/* Keep original inline emphasis in paragraph 3; edit width/position here. */
.intro__copy p:nth-child(3) {
  width: 350px;
  transform: translateX(0px);
}

.intro__copy p:nth-child(4) {
  font-size: 0;
  transform: translateX(0px);
}

.intro__copy p:nth-child(4)::before {
  content:
    "Helping a parent or loved one?\A"
    "You can arrange a TapHelp appointment\A"
    "for them.";
  display: block;
  white-space: pre;
  font-size: 20px;
  line-height: 1.55;
}

/* =========================================================
   SERVICE CARD TEXT — WIDTH / LEFT-RIGHT POSITION
   ========================================================= */

.service-card:nth-child(1) p { width: 150px; transform: translateX(0px); }
.service-card:nth-child(2) p { width: 150px; transform: translateX(0px); }
.service-card:nth-child(3) p { width: 150px; transform: translateX(0px); }
.service-card:nth-child(4) p { width: 150px; transform: translateX(0px); }
.service-card:nth-child(5) p { width: 150px; transform: translateX(0px); }
.service-card:nth-child(6) p { width: 150px; transform: translateX(0px); }

/* =========================================================
   AS EASY AS — WIDTH / LEFT-RIGHT POSITION
   Links remain live, so these stay as normal HTML text.
   ========================================================= */

.step-card:nth-child(1) h3,
.step-card:nth-child(1) p { width: 320px; transform: translateX(0px); }

.step-card:nth-child(2) h3,
.step-card:nth-child(2) p { width: 320px; transform: translateX(0px); }

.step-card:nth-child(3) h3,
.step-card:nth-child(3) p { width: 320px; transform: translateX(0px); }

/* =========================================================
   ABOUT
   ========================================================= */

.about-card__body {
  width: 100%;
  transform: translateX(10px);
}

.about-card__body p:first-child {
  font-size: 0;
  transform: translateX(0px);
}

.about-card__body p:first-child::before {
  content:
    "I provide patient, one-on-one help with\A"
    "everyday iPhone and iPad problems.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.55;
}

.about-card__body p:first-child::after {
  content:
    "We work by phone or screen share,\A"
    "at your pace, without jargon or judgment.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.55;
  margin-top: 16px;
}

.about-card__body p:nth-child(2) {
  font-size: 0;
  line-height: 0;
  transform: translateX(0px);
  margin-top: 16px;
}

.about-card__body p:nth-child(2)::before {
  content:
    "I have 15 years of professional IT help desk\A"
    "and technical support experience.\A\A"
    "For more than 25 years, I’ve also been\A"
    "the person family and friends turn to when\A"
    "they need help with everyday technology.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: 0;
}

.about-card__direct {
  font-size: 0;
  transform: translateX(0px);
}

.about-card__direct::before {
  content:
    "When you call TapHelp,\A"
    "you work directly with me.";
  display: block;
  white-space: pre;
  color: var(--blue);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}

/* =========================================================
   PRICING — WIDTH / LEFT-RIGHT POSITION
   ========================================================= */

.price-card__price { transform: translateX(0px); }

.price-card p:nth-child(2) {
  width: 250px;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(0px);
}

.price-card p:nth-child(3) {
  width: 250px;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(0px);
}

/* =========================================================
   FAQ QUESTIONS + ANSWERS
   ========================================================= */

.faq details:nth-of-type(1) summary,
.faq details:nth-of-type(2) summary,
.faq details:nth-of-type(3) summary,
.faq details:nth-of-type(4) summary {
  font-size: 0;
}

.faq details:nth-of-type(1) summary::before {
  content:
    "How does screen sharing work?";
  white-space: pre;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
}

.faq details:nth-of-type(2) summary::before {
  content:
    "Will you need my passwords or\A"
    "verification codes?";
  white-space: pre;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
}

.faq details:nth-of-type(3) summary::before {
  content:
    "What kinds of problems can you\A"
    "help me with?";
  white-space: pre;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
}

.faq details:nth-of-type(4) summary::before {
  content:
    "What if my problem can't be fixed\A"
    "during the appointment?";
  white-space: pre;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
}

.faq details:nth-of-type(1) summary::before,
.faq details:nth-of-type(1) .faq__answer { transform: translateX(0px); }

.faq details:nth-of-type(2) summary::before,
.faq details:nth-of-type(2) .faq__answer { transform: translateX(0px); }

.faq details:nth-of-type(3) summary::before,
.faq details:nth-of-type(3) .faq__answer { transform: translateX(0px); }

.faq details:nth-of-type(4) summary::before,
.faq details:nth-of-type(4) .faq__answer { transform: translateX(0px); }

.faq details:nth-of-type(1) .faq__answer,
.faq details:nth-of-type(2) .faq__answer,
.faq details:nth-of-type(3) .faq__answer,
.faq details:nth-of-type(4) .faq__answer {
  font-size: 0;
}

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

.faq details:nth-of-type(2) .faq__answer::before {
  content:
    "You enter your own passwords and\A"
    "verification codes.\A"
    "You should never give anyone your\A"
    "passwords or security codes.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.6;
}

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

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

/* =========================================================
   CTA — WIDTH / LEFT-RIGHT POSITION
   ========================================================= */

.cta h2 { transform: translateX(0px); }

.cta__phone {
  display: block;
  margin: 0 auto 6px;
  transform: translateX(0px);
}

.cta p {
  width: 240px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  transform: translateX(0px);
}

.cta__button { transform: translateX(0px); }

/* =========================================================
   FOOTER LEGAL
   ========================================================= */

.footer__legal {
  width: 100%;
  font-size: 0;
  transform: translateX(0px);
}

.footer__legal::before {
  content:
    "TapHelp is an independent support service and is not affiliated with,\A"
    "authorized, sponsored, or endorsed by Apple Inc. Apple, iPhone, iPad,\A"
    "FaceTime, AirPods, and iCloud are trademarks or service marks of Apple Inc.";
  display: block;
  white-space: pre;
  font-size: 14px;
  line-height: 1.6;
}