/* /services/facials: 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 · The price list under Practical Details: the six lines of the live list, set as
   a compact ruled list in three columns (two on tablets, one on phones). The last row
   carries no rule of its own: the Facts row closes it with its hairline. */
.fc-prices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 4rem); }
.fc-prices li { padding-block: var(--sc-3); border-bottom: 1px solid var(--sc-hairline); font-variant-numeric: lining-nums tabular-nums; }
/* design pass (Sept 23): each line is name | — | price, so within a column the dashes and the
   (tabular) prices line up on the right edge and the six prices read down as a column. */
.fc-prices li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 0.5em; align-items: baseline; }
.fc-prices__p { text-align: right; min-width: 4ch; }
.fc-prices li:nth-last-child(-n+3) { border-bottom: 0; }
.details__wide dd:has(.fc-prices) { max-width: none; }
@media (max-width: 1100px) {
  .fc-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-prices li:nth-last-child(3) { border-bottom: 1px solid var(--sc-hairline); }
}
@media (max-width: 720px) {
  .fc-prices { grid-template-columns: minmax(0, 1fr); }
  .fc-prices li:nth-last-child(2) { border-bottom: 1px solid var(--sc-hairline); }
}

/* 2 · The paragraph a chapter continues with, around its Payoff line. --tight: the rest
   of the Payoff's own paragraph, read as its continuation. */
.fc-after { margin-top: var(--sc-6); }
.fc-after--tight { margin-top: var(--sc-4); }
/* the three places this doesn't happen, read straight after the columns */
.fc-not { margin-top: var(--sc-7); }
/* the source sentence that opens the Lift checklist, at body size in ink (not a micro-label) */
.fc-lead { color: var(--sc-ink); margin: 0 0 var(--sc-4); }

/* 3 · Why BWell: the lede stops at "two options:" and runs on into the columns, so each
   phrase is printed once. The spa and the medspa are two compact ruled rows (no label:
   the row's title names it, one size below BWell's line so BWell leads; the bracketed
   descriptor sits beneath at body size), stacked at the top of the left column; BWell's
   sentence and paragraph sit in the lit column beside them, spanning both rows. On
   phones: the two rows, then the BWell panel. */
#why .compare__label:empty { display: none; }
#why .compare__col:not(.compare__col--us) { padding: var(--sc-5) 0; gap: var(--sc-2); }
#why .compare__col:not(.compare__col--us) .compare__t { font-size: var(--sc-t-lg); line-height: 1.3; }
#why .compare__col:nth-child(2) { border-bottom: 1px solid var(--sc-hairline-strong); }
@media (min-width: 861px) {
  #why .compare--3 { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; gap: 0 clamp(1.5rem, 3vw, 3rem); }
  #why .compare__col:nth-child(1) { grid-column: 1; grid-row: 1; }
  #why .compare__col:nth-child(2) { grid-column: 1; grid-row: 2; align-self: start; }
  #why .compare__col--us { grid-column: 2; grid-row: 1 / span 2; padding-inline: clamp(1.5rem, 3vw, 3rem); }
  #why .compare__col--us .compare__x { max-width: 56ch; }
}
@media (max-width: 860px) {
  #why .compare--3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #why .compare__col--us { margin-top: var(--sc-6); }
}

/* 4 · A compound that should not break at its hyphen: the Glance lede and its Where fact,
   the big lede line in Warning Signs, one Lift sentence, the Why descriptors, two Menu
   descriptions and four FAQ answers (each one broke at 390 or 1440). */
.fc-nb { white-space: nowrap; }

/* 5 · The menu on phones: the item name is `flex: none` (max 80%), so a long name plus
   leader plus price ran past the gutter ("Advanced Renewal Facial … $189" clipped at 390).
   The name steps down a size (every name then fits one line at 390) and may still
   shrink and wrap on narrower phones; the leader and price stay inside the column. */
@media (max-width: 600px) {
  .menu-item__name { flex: 0 1 auto; min-width: 0; }
  .menu-item__name, .menu-item__price { font-size: var(--sc-t-lg); line-height: 1.24; }
  .menu-item__lead { min-width: 1rem; }
}

/* 6 · (moved to service.css, Sept 23 shared follow-ups: .menu-list--2 at 861-1280px) */