/* 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: 160px;
  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: none;
}

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

.intro__copy br {
  display: contents;
}

.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: 31px 14px;
}

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

.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: 114px;
}

/* 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: contents;
}

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

/* 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: 32px;
  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;
}