/* /services/massage-therapy: the few things the shared components can't do.
   Loaded after /css/service.css on this page only. (The Plate offset, the big
   lede line and the no-break phone links moved into the shared layer on Sept 22;
   their page copies are gone from here.) */

/* 1 · Myth, then fact: inside the photo split the copy column is ~55% of the page,
   too narrow for two columns, so the pair reads top to bottom as a sequence. */
.split__copy .compare--2 { grid-template-columns: minmax(0, 1fr); gap: var(--sc-4); }
.split__copy .compare__col { padding: var(--sc-5) var(--sc-5) var(--sc-6); }
.split__copy .compare__x, .split__copy .compare__pts { max-width: 52ch; }

/* 2 · Who it's for: the sentence the list completes ("…is for:") on the left in the
   display face, the five conditions as a ruled index on the right, and the closing
   line under the list. Five entries in one column, so no empty cell in the grid.
   Stacks on phones (sentence, list, line). */
.mt-who { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sc-6) clamp(2rem, 6vw, 7rem); align-items: start; }
.mt-who .checklist { display: contents; }
.mt-who .checklist__label { grid-column: 1; grid-row: 1 / span 2; margin: 0; padding-top: var(--sc-4); font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--sc-ink); max-width: 16ch; text-wrap: balance; }
.mt-who .checklist__list { grid-column: 2; gap: 0; border-bottom: 1px solid var(--rule-ink); }
.mt-who .checklist__list li { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.3; padding: var(--sc-4) 0 var(--sc-4) 1.6em; border-top: 1px solid var(--rule-ink); }
.mt-who .checklist__list li::before { top: calc(var(--sc-4) + 0.66em); width: 0.7em; }
.mt-who__close { grid-column: 2; }
/* The open question on "Headaches" (RMT sign-off) sits under the word in the text
   face at body size, so the condition reads first and the chip doesn't grow to the
   list's display size. */
.mt-who .checklist__list .mt-gap { margin-top: var(--sc-2); }
.mt-who .checklist__list .tbc { font-family: var(--sc-font-text); font-size: var(--sc-t-sm); line-height: 1.45; }
.mt-who__close p + p { margin-top: var(--sc-3); }
/* The label spans the list's two grid rows, so on desktop it can ride down beside
   the list and the closing line instead of leaving the left column empty under it
   (third review). Held under the chapter bar (54px). */
@media (min-width: 861px) {
  .mt-who .checklist__label { position: sticky; top: calc(54px + var(--sc-6)); align-self: start; }
}
@media (max-width: 860px) {
  .mt-who { grid-template-columns: minmax(0, 1fr); gap: var(--sc-5); }
  .mt-who .checklist__label, .mt-who .checklist__list, .mt-who__close { grid-column: 1; grid-row: auto; }
  .mt-who .checklist__label { padding-top: 0; font-size: var(--sc-t-lg); max-width: 24ch; }
}

/* 3 · "Check your plan." beside the list of what to check: the instruction (with the
   help and the billing line, and the billing chip, under it) and the list it
   introduces, read together, straight after the Coverage lede. The referral line
   sits under the list, next to the doctor's-note item it answers. Stacks on phones.
   The Standout title drops one step (3xl → 2xl, 2xl → xl on phones) so the chapter
   headline stays the largest line in the chapter (third review: at 3xl the two read
   as two headlines of equal weight). */
.mt-plan { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sc-6) clamp(2rem, 6vw, 7rem); align-items: start; margin-top: var(--sc-9); padding-top: var(--sc-6); border-top: 1px solid var(--rule-ink); }
.mt-plan .standout { margin-top: 0; padding-top: 0; border-top: 0; }
.mt-plan .checklist__label { margin-top: 0.55rem; }
.mt-plan .checklist__list li { font-size: var(--sc-t-base); }
.mt-plan .standout__t { font-size: var(--sc-t-2xl); line-height: 1.14; margin-bottom: var(--sc-5); }
.mt-plan .standout__x p + p { margin-top: var(--sc-3); }
/* the billing chip under the Standout body: text face at small size, like the Glance chips,
   so the open question reads as a note on the two sentences above it, not a third line. */
.mt-plan .standout__x .tbc { font-family: var(--sc-font-text); font-size: var(--sc-t-sm); line-height: 1.45; }
.mt-plan__ref { margin-top: var(--sc-6); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); max-width: 46ch; }
@media (max-width: 860px) {
  .mt-plan { grid-template-columns: minmax(0, 1fr); margin-top: var(--sc-8); }
  .mt-plan .standout__t { font-size: var(--sc-t-xl); }
}

/* 4 · A placeholder that follows a sourced sentence in the same fact (Glance "Session
   length", "Who treats you", "Insurance"; the "Headaches" entry) sits on its own
   line, so the fact reads first and the gap second. */
.mt-gap { display: block; margin-top: var(--sc-3); }
/* In the Glance the facts are set in the display face; four of its five facts carry
   an open question, and at the facts' size the chips outweighed the facts they
   qualify. Every Glance chip (Cost too, so they match) drops to the text face at
   small size: the fact reads first, the gap second. */
.svc-glance .facts .tbc { font-family: var(--sc-font-text); font-size: var(--sc-t-sm); line-height: 1.45; }

/* 5 · Hero breadcrumb: photo 25 is near-white above the headline (the window blind sits
   right behind the crumb), where the shared scrim has faded to ~0, so the cream crumb
   washed out. On desktop the scrim climbs a little higher; plus a soft shadow like the
   intro's. The phone scrim (service.css) already reaches the crumb. */
@media (min-width: 861px) {
  .svc-hero__scrim { background:
    linear-gradient(to top, rgb(var(--dusk) / 0.92) 0%, rgb(var(--dusk) / 0.82) 24%, rgb(var(--dusk) / 0.62) 46%, rgb(var(--dusk) / 0.42) 66%, rgb(var(--dusk) / 0.2) 82%, rgb(var(--dusk) / 0) 95%),
    linear-gradient(to bottom, rgb(var(--dusk) / 0.5) 0%, rgb(var(--dusk) / 0) 22%); }
}
.svc-hero__crumb { text-shadow: 0 1px 10px rgb(0 0 0 / 0.55), 0 0 2px rgb(0 0 0 / 0.35); }
.svc-hero__crumb a { opacity: 0.9; }

/* 6 · The hero's second link was one two-part line ("Not sure which service fits?
   Free 15-minute consultation", ~578px of tracked caps) in a ~384px desktop column,
   so it wrapped at every width, against the one-line CTA rule. Sept 23: the question
   now leads in as plain text above the link (SvcHero cta2.lead, service.css), and
   the link is the action alone, on one line at every width. Same words, same order. */

/* 7 · The "What it is" photograph (Atrin's audit, Oct 1): running off the right edge of
   the screen, with the table cropped at the frame, the table read as coming out of the
   page. On desktop this one photograph stops at the page margin and sets a little
   shorter, so the crop (pos 34% 62%, still) holds the whole table. Phones keep the
   full-width band. */
@media (min-width: 861px) {
  #what .split__photo { margin-right: 0; height: auto; aspect-ratio: 4 / 5; }
}