/* TapHelp — 412px view
   Dedicated 412–413px stylesheet.
   Layered after the existing mobile styles so only this untested range changes.
   Locked 414px, 428px, 430px and all other approved views remain untouched.
*/

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

/* Move the inherited 414 intro position 8px to the right. */
.intro__copy {
  width: calc(100% - 20px);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-6px);
}

.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 day.\A"
    "But when something changes or stops working,\A"
    "a device that makes life easier can suddenly\A"
    "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 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 appointment\A"
    "for them.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.55;
}


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

/* Use more of the available 412px card width without changing type scale. */
.about-card__body {
  width: calc(100% - 12px);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  transform: none;
}

/* Restore natural 412px wrapping instead of the narrower forced 414 composition. */
.about-card__body p:first-child,
.about-card__body p:nth-child(2) {
  font-size: 18px;
  line-height: 1.55;
  text-wrap: pretty;
}

.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
   ========================================================= */

/* Let FAQ answers fill the 412px cards instead of keeping the forced narrow lines. */
.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;
}