/* TapHelp — 400px view
   Dedicated 400px-only stylesheet.
   Layer this after view-393.css.
   Does not alter locked 393px or 412px views.
*/

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

/* Use more of the available 400px width and keep the block balanced. */
.intro__copy {
  width: calc(100% - 16px);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(8px);
}

/* Restore natural wrapping at 400px instead of inheriting narrower forced lines. */
.intro__copy p:first-child,
.intro__copy p:nth-child(2),
.intro__copy p:nth-child(3),
.intro__copy p:nth-child(4) {
  max-width: none;
  font-size: 18px;
  line-height: 1.55;
}

.intro__copy p:first-child::before,
.intro__copy p:nth-child(2)::before,
.intro__copy p:nth-child(3)::before,
.intro__copy p:nth-child(4)::before {
  content: none;
  display: none;
}

.intro__copy br {
  display: none;
}


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

/* Let the About body use more of the card width at 400px. */
.about-card__body {
  width: calc(100% - 14px);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  transform: none;
}

/* Natural wrapping instead of the narrower forced mobile composition. */
.about-card__body p:first-child,
.about-card__body p:nth-child(2) {
  font-size: 18px;
  line-height: 1.55;
}

.about-card__body p:first-child::before,
.about-card__body p:nth-child(2)::before {
  content: none;
  display: none;
}

.about-card__body br {
  display: none;
}


/* =========================================================
   FAQ
   ========================================================= */

/* Use the available card width and remove narrow forced line compositions. */
.faq__answer,
.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 {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 18px;
  line-height: 1.55;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: pretty;
}

.faq details:nth-of-type(1) .faq__answer::before,
.faq details:nth-of-type(2) .faq__answer::before,
.faq details:nth-of-type(3) .faq__answer::before,
.faq details:nth-of-type(4) .faq__answer::before {
  content: none;
  display: none;
}

.faq__answer br {
  display: none;
}

/* =========================================================
   400px controlled text reflow — spacing-safe
   ========================================================= */

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

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

.intro__copy p:nth-child(3) {
  font-size: 0;
  line-height: 0;
}
.intro__copy p:nth-child(3)::before {
  content:
    "TapHelp offers patient, one-on-one help\A"
    "from a real person so you can get back to\A"
    "using your iPhone or iPad instead of\A"
    "wrestling with it.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.55;
}

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

/* ABOUT */
.about-card__body p:first-child {
  font-size: 0;
  line-height: 0;
}
.about-card__body p:first-child::before {
  content:
    "I provide patient, one-on-one help with\A"
    "everyday iPhone and iPad problems.\A\A"
    "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;
}

.about-card__body p:nth-child(2) {
  font-size: 0;
  line-height: 0;
}
.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;
}

/* FAQ 1 */
.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\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.55;
}

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

/* FAQ 3 */
.faq details:nth-of-type(3) summary {
  font-size: 0;
  line-height: 0;
}
.faq details:nth-of-type(3) summary::before {
  content:
    "What kinds of problems can you help\A"
    "me with?";
  display: block;
  white-space: pre;
  font-size: 16px;
  line-height: 1.35;
}

.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\A"
    "issues such as Wi-Fi, texts, photos, email,\A"
    "settings, suspicious messages or scams,\A"
    "and other common questions.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.55;
}

/* FAQ 4 */
.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\A"
    "what I can safely handle remotely, I’ll explain\A"
    "what the next step should be and help point\A"
    "you in the right direction.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.55;
}