/* TapHelp — 320px view
   320 changes layout/reflow only. Standardized component styling
   matches the approved desktop view unless width physically requires otherwise. */

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: 16px;
  margin-right: 16px;
}

.section {
  padding: 42px 0;
}

/* Header */

/* Desktop logo width cannot fit a 320px viewport, so only the logo width is reduced. */

.hero__logo {
  width: 260px;
}

/* Keep the three trust phrases as three clean lines at 320. */
.hero__trust {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.hero__meta span {
  display: block;
  height: 0;
  margin: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

/* Intro */

.intro__copy {
  width: auto;
  margin: 0;
  transform: translateX(10px);
}

/* Preserve the spaces represented by desktop <br> tags at 320 instead of
   collapsing adjacent words together. */

.intro__copy br {
  display: inline;
}

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

/* Services — same card component, stacked for 320 */

.footer__legal {
  width: auto;
}

.service-grid {
  grid-template-columns: 1fr;
  width: auto;
  margin: 0;
}

.service-card {
  grid-template-columns: 70px minmax(0, 1fr);
  column-gap: 12px;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.service-card img {
  transform: none;
}

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

/* Preserve a real space where the desktop Settings line break occurs. */
.service-card:nth-child(5) p br {
  display: inline;
}

.service-card:nth-child(5) p br::after {
  content: " ";
  white-space: pre;
}

/* Steps — same card component, stacked for 320 */

.steps-grid {
  grid-template-columns: 1fr;
  width: auto;
  margin: 0;
}

.step-card {
  width: 100%;
}

.step-card h3 {
  white-space: normal;
}

/* About */

.about-card {
  width: auto;
  margin: 0 8px;
  padding: 24px 14px;
}

.about-card__body {
  width: auto;
  margin: 0;
  transform: translateX(42px);
}

.about-card__body br {
  display: contents;
}

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

/* Pricing */

.pricing {
  padding-top: 32px;
  padding-bottom: 32px;
}

.price-card {
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 27px 14px 25px;
}

.price-card__price {
  white-space: nowrap;
}

.price-card__price span {
  margin: 0 5px;
}

/* FAQ */

/* Give FAQ content more usable width at 320px while keeping
   the standardized type sizes. */

.faq__inner {
  margin-left: 6px;
  margin-right: 6px;
}

.faq h2 {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  white-space: nowrap;
}

.faq summary {
  padding: 20px 42px 20px 12px;
}

.faq summary::after {
  right: 12px;
}

/* Keep “sharing work?” together instead of leaving “work?” by itself. */
.faq details:first-of-type summary {
  padding-right: 42px;
  white-space: nowrap;
}

/* Give the last question just enough room to keep “fixed during the appointment?” together. */
.faq details:last-of-type summary {
  padding-right: 34px;
}

.faq__answer br {
  display: inline;
}

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

/* 2nd FAQ answer — exact 360 reflow */
.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;
}

/* Small 320 finishing adjustments */

/* Slightly easier reading in the intro without changing its width */
.intro__copy p:first-child::before {
  line-height: 1.6;
}

/* Tighten the space before “How I can help” */
.services {
  padding-top: 24px;
  padding-bottom: 46px;
}

/* Tighten the space around “As easy as...” */
.steps {
  padding-top: 34px;
  padding-bottom: 34px;
}

/* Footer */

.footer {
  padding: 34px 0 30px;
}

.footer a[href^="tel:"] {
  white-space: nowrap;
}

.footer__legal {
  width: auto;
  font-size: 11px;
  line-height: 1.4;
}

.footer__legal br {
  display: contents;
}

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

/* =========================================================
   EXACT APPROVED 320 TEXT REFLOW — CSS ONLY
   HTML remains untouched.
   ========================================================= */

/* Intro — exact approved first-paragraph line composition */
.intro__copy p:first-child {
  font-size: 0;
  line-height: 0;
}

.intro__copy p:first-child::before {
  content:
    "They keep us connected, hold\A"
    "our photos, play our music,\A"
    "and help us get through the day.\A"
    "But when something changes or\A"
    "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;
}

/* About — exact approved first paragraph */
.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\A"
    "help with everyday iPhone\A"
    "and iPad problems.\A\A"
    "We work by phone or screen\A"
    "share, at your pace, without\A"
    "jargon or judgment.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.55;
  transform: translateX(14px);
}

/* About — exact approved second paragraph */
.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\A"
    "IT help desk and technical\A"
    "support experience.\A\A"
    "For more than 25 years,\A"
    "I’ve also been the person\A"
    "family and friends turn to\A"
    "when they need help with\A"
    "everyday technology.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.55;

}

/* Align all About body copy to the same left edge */
.about-card__body p:first-child::before,
.about-card__body p:nth-child(2)::before {
  transform: none;
}

.faq h2 {
  font-size: 30px;
  line-height: 1.1;
}

.about-card h2 {
  font-size: 28px;
  line-height: 1.1;
}

.pricing h2 {
  font-size: 29px;
  line-height: 1.1;
}

.about-card h2 {
  font-size: 0;
}

.about-card h2::before {
  content: "Who you’ll be\A working with";
  white-space: pre-line;
  font-size: 28px;
  line-height: 1.1;
}

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

.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\A"
    "beyond what I can safely handle\A"
    "remotely, I’ll explain what the\A"
    "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;
}

/* 360 — balance legal copy without duplicating it */
.footer__legal {
  width: 270px;
  max-width: 270px;
  margin-left: auto;
  margin-right: auto;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.intro__copy,
.intro__copy p,
.intro__copy p:first-child::before {
  font-size: 18px;
  line-height: 1.55;
}

/* 360 — final intro alignment and exact reflow */

.intro__copy {
  width: calc(100% - 30px);
  margin: 0;
  transform: translateX(30px);
}

/* Sometimes... exact approved reflow */
.intro__copy p:nth-child(2) {
  max-width: none;
  font-size: 0;
  line-height: 0;
}

.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: 18px;
  line-height: 1.55;
}

/* TapHelp offers... exact approved reflow */
.intro__copy p:nth-child(3) {
  max-width: none;
  font-size: 0;
  line-height: 0;
}

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

/* Helping a parent... */
.intro__copy p:nth-child(4) {
  max-width: 305px;
}