/* 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(20px);
}

/* 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 — single source of truth for 375 */

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

.about-card h2 {
  margin-bottom: 25px;
  font-size: 0;
  line-height: 0;
}

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

.about-card__body {
  width: auto;
  margin: 0;
  transform: none;
  text-align: left;
}

.about-card__body p:first-child,
.about-card__body p:nth-child(2) {
  margin: 0;
  font-size: 0;
  line-height: 0;
}

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

/* 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 our photos,\A"
    "play our music and help us get through\A"
    "the day. But when something changes\A"
    "or stops working, a device that makes\A"
    "life easier can suddenly become frustrating.";
  display: block;
  white-space: pre;
  font-size: 18px;
  line-height: 1.55;
}

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


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


/* FAQ — use the same text measure as the locked 360 view. */
.faq__inner {
  margin-left: 8px;
  margin-right: 8px;
}

.faq summary {
  padding: 18px 42px 18px 14px;
}

.faq details:first-of-type summary,
.faq details:last-of-type summary {
  padding-right: 42px;
}

.faq__answer,
.faq details:nth-of-type(1) .faq__answer,
.faq details:nth-of-type(3) .faq__answer,
.faq details:nth-of-type(4) .faq__answer {
  padding-left: 14px;
  padding-right: 14px;
  font-size: 18px;
  line-height: 1.55;
}

/* FAQ 1 — exact approved 375 reflow */
.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\A"
    "what you’re seeing and guide you\A"
    "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 details:nth-of-type(3) .faq__answer::before {
  content: none;
}

.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 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.55;
}

/* Legal — balanced natural wrapping, guided by the 360 view. */
.footer p.footer__legal {
  width: 350px;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
}

.footer p.footer__legal::before {
  content: none;
  display: none;
}

.footer p.footer__legal br {
  content: " ";
}

.footer p.footer__legal br::after {
  content: " ";
  white-space: pre;
}
  width: 300px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.footer__legal br {
  display: inline;
}

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

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% - 12px);
  margin: 0;
  transform: translateX(2px);
}

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

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