/* Phone layout fixes for the bathtub pages (main, service and Seattle pages). Desktop is unchanged except
   for the service-area list and the compact comparison table, which are styled for both. */

/* Service areas: one expandable list instead of a grid of tiles */
.areas-list { margin: 8px 0 0; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.areas-list > summary { font-family: Montserrat, system-ui, sans-serif; cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 700; font-size: 16px; color: #0f172a; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.areas-list > summary::-webkit-details-marker { display: none; }
.areas-list > summary::after { content: "+"; color: #1e40af; font-size: 22px; line-height: 1; }
.areas-list[open] > summary::after { content: "–"; }
.areas-list ul { list-style: none; margin: 0; padding: 0 18px 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
.areas-list li { padding: 7px 0; }
@media (max-width: 767px) { .areas-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.areas-list a { font-family: Montserrat, system-ui, sans-serif; color: #1e40af; text-decoration: none; font-size: 15px; }
.areas-list a:hover { text-decoration: underline; }

/* Compact comparison table (shown on phones instead of the three cards) */
.cmp-m { display: none; }
.cmp-m table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: Montserrat, system-ui, sans-serif; font-size: 13px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(15, 23, 42, .08); table-layout: fixed; }
.cmp-m th, .cmp-m td { padding: 11px 6px; text-align: center; border-bottom: 1px solid #eef2f7; vertical-align: middle; line-height: 1.3; color: #334155; }
.cmp-m tr:last-child td { border-bottom: 0; }
.cmp-m th { font-size: 12px; font-weight: 700; color: #0f172a; padding-top: 14px; }
.cmp-m td:first-child, .cmp-m th:first-child { text-align: left; padding-left: 12px; font-weight: 600; color: #0f172a; width: 30%; }
.cmp-m .us { background: #eff6ff; color: #1e3a8a; font-weight: 700; }
.cmp-m th.us { background: #1e40af; color: #fff; }
.cmp-m th.us small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #bfdbfe; margin-top: 2px; }
.cmp-m .no { color: #b91c1c; } .cmp-m .yes { color: #15803d; }
.cmp-m .cmp-m-price td { font-size: 14px; font-weight: 800; }
.cmp-m .cmp-m-note { font-size: 13px; color: #475569; text-align: center; margin: 14px 0 0; }

@media (max-width: 767px) {
  /* Even 16px side margins on every section */
  .gallery-section, .value-prop-section, .instant-quote-section, .services-index, .service-areas-section { padding-left: 16px !important; padding-right: 16px !important; }
  .section.v1.v2 > div { padding-left: 4px; padding-right: 4px; }
  .container-22 { padding-left: 16px !important; padding-right: 16px !important; }

  /* "Ready to Transform Your Bathroom?": a full-width band, not a card */
  .gallery-section .gallery-cta { margin-left: -16px; margin-right: -16px; border-radius: 0; padding: 44px 20px; }
  .gallery-cta .cta-title { font-size: 28px; line-height: 1.2; margin-bottom: 10px; }
  .gallery-cta .cta-subtitle { font-size: 17px; margin-bottom: 22px; }
  .gallery-cta .cta-button { display: flex; width: 100%; max-width: 420px; margin: 0 auto; justify-content: center; box-sizing: border-box; }

  /* "Compare Your Options": full-width band with one compact table */
  .value-prop-section .comparison-section { margin-left: -16px; margin-right: -16px; border-radius: 0; padding: 40px 12px 36px; }
  .comparison-section .comparison-title { font-size: 28px; padding-bottom: 18px; }
  .comparison-section.has-cmp .comparison-grid { display: none !important; }
  .cmp-m { display: block !important; }
}

/* Small tablets: keep the "Best choice" badge clear of the Proper Reglazing title */
@media (min-width: 768px) and (max-width: 991px) {
  .comparison-card.featured { padding-top: 48px !important; }
}