/* fees.html only. A hairline above "Insurance and payment" (echoing the page-intro rule),
   so the section reads as separate from the fee tables, whose grid gap matches the section gap on mobile. */
.page-fees #insurance .section-head { padding-top: var(--space-7); border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .page-fees #insurance .section-head { padding-top: var(--space-8); } }

/* Two-column fee grid at narrower desktops: let the long gum-treatment fee wrap after the range,
   so the hygiene table's label column is not squeezed ("Hygienist, per / visit"). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .page-fees #fees-hygiene td { white-space: normal; max-width: 9.5em; }
}
/* Same squeeze on phones. */
@media (max-width: 599px) {
  .page-fees #fees-hygiene td { white-space: normal; max-width: 8.5em; }
}

/* Short note under the X-rays table (examination / X-ray pricing pending owner confirmation). */
.page-fees .fee-note { margin: var(--space-3) 0 0; font-size: var(--step--1, 0.9375rem); color: var(--muted); }