/**
 * Location / city dealer pages – typography matches robotic-pool-cleaner (Foundation).
 * Loaded only when layout sets locationPage: true.
 * Dealer map section: 3 sizes only (1rem body, 0.75rem badges, 1.25rem stat).
 * Content below map: inherits Foundation .title-container / .text-callout.
 */
body.location-page { background-color: #fff; overflow-x: hidden; }
html.location-page { overflow-x: hidden; }

.location-page section { margin: 0; }

/* Screen-reader only (e.g. section H2 for SEO/a11y) */
.location-page .show-for-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.location-page section:has(> .show-for-sr) { position: relative; }

/* Location hero – clean, official */
#home-banners.location-hero { margin: 0; padding: 0; width: 100%; max-width: none; }
#home-banners .orbit { max-height: 380px; overflow: hidden; }
#home-banners .orbit img { object-fit: cover; object-position: center; max-height: 380px; }
#home-banners .slide-content { padding: 2.5rem 1.5rem; min-height: 200px; }
.location-hero-text { max-width: 28em; }
.location-hero-label {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}
.location-hero-title {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}
.location-hero-sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
}
@media (min-width: 48em) {
  .location-hero-title { font-size: 2rem; }
}
@media (max-width: 640px) {
  #home-banners .orbit { max-height: 320px; }
  #home-banners .orbit img { max-height: 320px; }
  .location-hero-title { font-size: 1.375rem; }
  .location-hero-sub { font-size: 0.9375rem; }
}

/* How to buy – two paths (same section-inner as dealers, card style) */
.choice-gate-section {
  padding: 2rem 0;
  background: #fff;
}
.choice-gate-section .section-inner { padding-top: 0; padding-bottom: 0; }
.choice-box {
  position: relative;
  padding: 1.5rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  border: 1px solid #e8e8ed;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 1px;
}
.choice-box-primary {
  border: 2px solid #0071e3;
  background: rgba(0,113,227,0.06);
}
.choice-box-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: #0071e3;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
}
.choice-box-badge-star {
  font-size: 0.875rem;
  line-height: 1;
  color: #fff;
}
.choice-box-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1.3;
  padding-right: 0;
}
.choice-box-primary .choice-box-title {
  padding-right: 0;
  padding-top: 1.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.02em;
}
.choice-box-subhead {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.35;
}
.choice-box-desc {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  color: #515154;
  line-height: 1.5;
}
.choice-box-list {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  color: #515154;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.choice-box-list li { margin-bottom: 0.6rem; }
.choice-box-list li strong { color: #1d1d1f; }
.choice-box-cta-row {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
}
.choice-box-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  min-width: 10rem;
  flex: 1 1 auto;
  box-sizing: border-box;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  font-family: inherit;
  line-height: 1.3;
  appearance: none;
  -webkit-appearance: none;
}
/* Single button in row: don't stretch to full width – match size of primary box buttons */
.choice-box-cta-row .choice-box-cta:only-child {
  flex: 0 0 auto;
  width: auto;
}
.choice-box-cta-row a.choice-box-cta { text-decoration: none; }
.choice-box-cta-row .choice-box-cta {
  margin-top: 0;
}
.choice-box-cta.button.primary {
  background: #0071e3;
  border-color: #0071e3;
  color: #fff;
}
.choice-box-cta.button.primary:hover {
  background: #0056b3;
  border-color: #0056b3;
  color: #fff;
}
.choice-box-cta.button.hollow {
  background: transparent;
  border: 2px solid #86868b;
  color: #1d1d1f;
}
.choice-box-cta.button.hollow:hover {
  background: #f5f5f7;
  border-color: #515154;
  color: #1d1d1f;
}
.choice-gate-note {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid #e8e8ed;
  font-size: 0.8125rem;
  color: #86868b;
  text-align: center;
}
.choice-gate-note a { color: #0071e3; text-decoration: none; }
.choice-gate-note a:hover { text-decoration: underline; }
@media (max-width: 47.937em) {
  .choice-gate-section { padding: 1.5rem 0; }
  .choice-box { padding: 1.25rem 1rem; }
  .choice-box-cta-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  .choice-box-cta-row .choice-box-cta {
    width: 100%;
    min-width: 0;
  }
}

/* Dealer list tier labels – minimal, same tone as dealer-count */
.dealer-tier-label {
  margin: 1rem 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #86868b;
  letter-spacing: 0.02em;
}
.dealer-tier-label:first-of-type { margin-top: 0.5rem; }
.dealer-tier-local { margin-top: 1.25rem; }

/* Dealers by State & City – multi-column, compact, max density */
.dealers-by-state-section {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}
.dealers-by-state-section .section-inner { padding-top: 0; padding-bottom: 0; max-width: 1600px; }
.dealers-by-state-title {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #1d1d1f;
}
.dealers-by-state-intro {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: #515154;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
.dealers-by-state-list {
  column-count: 2;
  column-gap: 2rem;
  column-fill: balance;
  margin-top: 0;
  text-align: left;
  max-width: 100%;
}
.dealers-by-state-group {
  break-inside: avoid;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #e8e8ed;
  page-break-inside: avoid;
}
.dealers-by-state-group:last-child { border-bottom: none; }
.dealers-by-state-heading {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1d1d1f;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid #e0e0e0;
  letter-spacing: 0.02em;
}
.dealers-by-state-cities {
  margin: 0;
  padding-left: 0.9rem;
  list-style: disc;
  font-size: 0.6875rem;
  line-height: 1.35;
  column-gap: 0;
}
.dealers-by-state-cities li { margin-bottom: 0.1rem; }
.dealers-by-state-cities a {
  color: #0071e3;
  text-decoration: none;
}
.dealers-by-state-cities a:hover { text-decoration: underline; }
@media (min-width: 30em) {
  .dealers-by-state-list { column-count: 3; column-gap: 1.75rem; }
}
@media (min-width: 48em) {
  .dealers-by-state-list { column-count: 4; column-gap: 2rem; }
  .dealers-by-state-heading { font-size: 0.8125rem; }
  .dealers-by-state-cities { font-size: 0.6875rem; }
}
@media (min-width: 64em) {
  .dealers-by-state-list { column-count: 5; column-gap: 2rem; }
}
@media (min-width: 90em) {
  .dealers-by-state-list { column-count: 6; column-gap: 2.25rem; }
}
@media (max-width: 47.937em) {
  .dealers-by-state-section { padding-top: 1.25rem; padding-bottom: 1.5rem; }
  .dealers-by-state-title { font-size: 1rem; }
  .dealers-by-state-intro { font-size: 0.75rem; margin-bottom: 0.75rem; }
  .dealers-by-state-list { column-count: 2; column-gap: 1.25rem; }
  .dealers-by-state-group { padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
  .dealers-by-state-heading { font-size: 0.75rem; }
  .dealers-by-state-cities { font-size: 0.625rem; padding-left: 0.75rem; }
}

.section-inner { max-width: 1600px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; width: 100%; box-sizing: border-box; }
.white-section { background: #fff; width: 100%; margin: 0; padding: 2rem 0; box-sizing: border-box; }
.grey-section { background: #f5f5f7; width: 100%; margin: 0; padding: 4rem 0; box-sizing: border-box; }
.dark-section { background: #1d1d1f; width: 100%; margin: 0; padding: 3rem 0; box-sizing: border-box; }

/* Grey section: all text dark (readable on light grey) */
.grey-section h1, .grey-section h2, .grey-section h3, .grey-section h4,
.grey-section .title-container h2, .grey-section .title-container h4,
.grey-section .spec-text, .grey-section strong { color: #1d1d1f; }
.grey-section p, .grey-section ul, .grey-section ul li, .grey-section li,
.grey-section .title-container p, .grey-section .text-callout p,
.grey-section .four-points p, .grey-section .product-text p { color: #515154; }
.grey-section .product-text h3, .grey-section .product-text strong { color: #1d1d1f; }
.grey-section .title-container h4 { color: #86868b; } /* overline / label stays muted */
.grey-section .table-intro { color: #86868b; }
.grey-section .value-prop-desc { color: #86868b; }

.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section .spec-text { color: #fff; }
.dark-section p, .dark-section li { color: #a1a1a6; }
.dark-section a { color: #2997ff; }
.dark-section strong { color: #fff; }
.dark-section .blue-gradient { color: #2997ff; }
.dark-section .faq-item { border-bottom-color: #3d3d3d; }
.dark-section .button.hollow { border-color: #fff; color: #fff; }
.dark-section .button.hollow:hover { background: #fff; color: #1d1d1f; }

.white-section a, .grey-section a { color: #0071e3; }
.white-section a:hover, .grey-section a:hover { color: #0056b3; text-decoration: underline; }

#breadcrumbs-container { margin-top: 0 !important; padding: 0 1rem; }
.location-page .breadcrumbs { background: transparent; margin: 0 0 0.75rem 0; padding: 0; }
.location-page .breadcrumbs li { color: #86868b; }
.location-page .breadcrumbs li::after { color: #d2d2d7; }
.location-page .breadcrumbs li a { color: #515154; }
.location-page .breadcrumbs li a:hover { color: #1d1d1f; }
.location-page .breadcrumbs li span { color: #1d1d1f; }

/* Dealers section – classic design, improved */
.dealer-list-container {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dealer-list-container::-webkit-scrollbar { width: 6px; }
.dealer-list-container::-webkit-scrollbar-track { background: #f5f5f7; border-radius: 3px; }
.dealer-list-container::-webkit-scrollbar-thumb { background: #d2d2d7; border-radius: 3px; }

.dealer-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  background: #f5f5f7;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
}
.dealer-count h3 { margin: 0; font-size: 1rem; font-weight: 600; color: #1d1d1f; line-height: 1.3; }
.dealer-count span { font-size: 0.9375rem; color: #515154; }

.platinum-benefits {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(0,113,227,0.06);
  border: 1px solid rgba(0,113,227,0.2);
  border-radius: 10px;
}
.platinum-benefits-label {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1d1d1f;
}
.platinum-benefits-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.dealer-card-modern {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.5rem;
  margin-bottom: 0;
  border: 1px solid #e8e8ed;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dealer-card-modern:hover {
  border-color: rgba(0,113,227,0.35);
  box-shadow: 0 4px 12px rgba(0,113,227,0.08);
}
.dealer-card-modern.platinum {
  border-left: 4px solid #0071e3;
}

.dealer-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
  min-height: 3.5rem;
}
.dealer-card-modern.platinum .dealer-logo-link {
  display: flex;
  align-items: center;
  min-height: 3rem;
  border-radius: 8px;
  transition: background-color 0.2s;
}
.dealer-card-modern.platinum .dealer-logo-link:hover {
  background: rgba(0,113,227,0.06);
}
.dealer-card-modern.platinum .dealer-card-header img {
  max-height: 56px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.dealer-card-header h3 { margin: 0; font-size: 1rem; font-weight: 600; color: #1d1d1f; line-height: 1.3; }

.platinum-badge,
.local-badge {
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.platinum-badge {
  background: #0071e3;
  color: #fff;
}
.local-badge {
  background: #e8e8ed;
  color: #515154;
  font-weight: 500;
}

.dealer-blurb,
.dealer-card-modern p {
  margin: 0 0 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #515154;
}

.dealer-address { font-size: 1rem; line-height: 1.4; color: #515154; margin-bottom: 0.25rem; }
.dealer-phone { font-size: 1rem; font-weight: 500; color: #0071e3; margin-bottom: 0.5rem; }

.dealer-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.75rem;
}
.dealer-feature {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  color: #0071e3;
  background: rgba(0,113,227,0.08);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-weight: 500;
}

.dealer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.dealer-cta .buy-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.dealer-cta .buy-button:first-child {
  background: #0071e3;
  color: #fff;
  border: 1px solid #0071e3;
}
.dealer-cta .buy-button:first-child:hover {
  background: #0056b3;
  border-color: #0056b3;
  color: #fff;
}
.dealer-cta .buy-button.hollow {
  background: transparent;
  color: #0071e3;
  border: 1px solid #0071e3;
}
.dealer-cta .buy-button.hollow:hover {
  background: rgba(0,113,227,0.08);
  color: #0056b3;
}

.map-container {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #e8e8ed;
}
.map-container iframe { width: 100%; height: 380px; border: 0; display: block; }
.map-container .map-iframe-fallback { width: 100%; height: 380px; min-height: 280px; display: block; }
.map-container .map-iframe-fallback[hidden] { display: none; }
.dealer-map-leaflet,
.dealer-map-google,
.map-container gmp-map.dealer-map-gmp { width: 100%; height: 380px; min-height: 280px; display: block; z-index: 0; }
.dealer-map-google[hidden],
.map-container gmp-map.dealer-map-gmp[hidden] { display: none; }
.map-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e8e8ed;
  background: #fafafa;
}
.map-header h3 { margin: 0; font-size: 1rem; font-weight: 600; color: #1d1d1f; line-height: 1.3; }
.map-header p { margin: 0.25rem 0 0; font-size: 1rem; color: #515154; }

.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  padding: 1.25rem 1.5rem;
  background: #f5f5f7;
  border-radius: 10px;
  margin-top: 1rem;
  border: 1px solid #e8e8ed;
}
.stat-item {
  text-align: center;
  min-width: 4.5rem;
}
/* Dealer map stats only – do not override .stats-grid (50% wider cleaning path) from Foundation */
.stats-row .stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0071e3;
  line-height: 1.2;
  margin-bottom: 0.15rem;
}
.stats-row .stat-label {
  font-size: 0.85rem;
  color: #515154;
  font-weight: 500;
}

/* Table wrapper – smooth horizontal scroll on mobile */
.location-page .overflow-x-auto {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
@media (min-width: 48em) {
  .location-page .overflow-x-auto {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Tables – match robotic-pool-cleaner body text (Foundation) */
.match-table,
.spec-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 6px -1px rgba(0,0,0,0.1);
  font-size: 1rem;
}

.match-table thead,
.spec-table thead {
  background: #e0e0e0;
}

.match-table th,
.spec-table th {
  padding: 14px 16px;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.75);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  line-height: 1.4;
  white-space: nowrap;
}

.match-table tbody tr,
.spec-table tbody tr {
  transition: background 0.15s ease;
}

.match-table tbody tr:hover,
.spec-table tbody tr:hover {
  background: rgba(0,0,0,0.02);
}

.match-table td,
.spec-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: rgba(0,0,0,0.87);
  line-height: 1.5;
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.match-table tbody tr:last-child td,
.spec-table tbody tr:last-child td {
  border-bottom: none;
}

/* Match table: situation column emphasis, model cell layout */
.match-table td:first-child {
  color: rgba(0,0,0,0.87);
  font-weight: 500;
}

.match-table .model-cell {
  min-width: 80px;
}

.match-table .model-cell a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #0071e3;
  font-weight: 500;
  text-align: center;
}

.match-table .model-cell a:hover {
  text-decoration: underline;
  color: #0056b3;
}

.match-table .model-cell .product-thumb {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.match-table .model-cell a span {
  color: rgba(0,0,0,0.87);
  font-weight: 500;
}

/* Mobile: enforce min-width so table scrolls horizontally instead of squashing */
@media (max-width: 47.937em) {
  .match-table { min-width: 400px; }
  .spec-table { min-width: 520px; }
}

/* Desktop: comfortable min-width */
@media (min-width: 64em) {
  .match-table { min-width: 520px; }
  .spec-table { min-width: 600px; }
}

/* Spec table: check/yes styling */
.spec-table .check {
  color: #0071e3;
  font-weight: 500;
}

.spec-table td:first-child a {
  color: #0071e3;
  font-weight: 500;
  text-decoration: none;
}

.spec-table td:first-child a:hover {
  text-decoration: underline;
}

.spec-table tbody tr.highlight td {
  background: rgba(0,113,227,0.04);
}

.spec-table tbody tr.highlight:hover td {
  background: rgba(0,113,227,0.06);
}

/* FAQ – inherit Foundation / robotic-pool-cleaner sizing */
.faq-item { border-bottom: 1px solid #e8e8ed; padding: 1.25rem 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { color: #1d1d1f; margin: 0 0 0.5rem; font-weight: 600; line-height: 1.35; }
.faq-item p { color: #515154; margin: 0; line-height: 1.65; }
.faq-item a { color: #0071e3; text-decoration: none; }
.faq-item a:hover { text-decoration: underline; }

.dark-section .faq-item {
  border-bottom-color: #3d3d3d;
  padding: 1.5rem 0;
}
.dark-section .faq-item:last-child { border-bottom: none; }
.dark-section .faq-item h3 {
  color: #fff;
  font-weight: 600;
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.dark-section .faq-item p {
  color: #c7c7cc;
  margin: 0;
  line-height: 1.65;
}
.dark-section .faq-item a { color: #2997ff; text-decoration: none; }
.dark-section .faq-item a:hover { text-decoration: underline; color: #5eb3ff; }
.dark-section .faq-item strong { color: #fff; }

.spec-text { color: #1d1d1f; margin-bottom: 0.75rem; }
.blue-gradient { color: #0071e3; }
.max-width-900 { max-width: 900px; margin: 0 auto; }
.rounded-corners { border-radius: 12px; }

.value-props { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 1.5rem 0; padding: 1.5rem; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.value-prop { text-align: center; padding: 0.5rem; display: flex; flex-direction: column; align-items: center; }
.value-prop-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 0.75rem; color: #0071e3; flex-shrink: 0; }
.value-prop-icon svg { width: 32px; height: 32px; display: block; }
.value-prop-label { color: #1d1d1f; font-weight: 600; display: block; margin-bottom: 0.2rem; }
.value-prop-desc { color: #86868b; }
@media (max-width: 768px) { .value-props { grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1rem; } .value-prop-icon { margin-bottom: 0.5rem; } }

/* Takeaway callout – match .grid-container p (18px) like /dolphin-dealers */
.summary-callout {
  background: #fff;
  border-radius: 20px;
  padding: 2rem 2.25rem;
  margin: 2rem 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
}
.summary-callout p {
  color: #1d1d1f;
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  max-width: 56em;
}
.summary-callout strong { color: #1d1d1f; }
.grey-section .summary-callout p { color: #1d1d1f; }
.cta-section { text-align: center; padding: 2rem 0; }
.cta-section h3 { color: #1d1d1f; margin: 0 0 0.5rem; }
.cta-section p { color: #86868b; margin: 0 0 1.25rem; }
.cta-section a.button { margin-right: 0.5rem; }
.cta-section a.button:last-of-type { margin-right: 0; }

.section-padding { padding: 4rem 0; }
/* Below dealer map: match /dolphin-dealers – let Foundation .grid-container typography apply (18px body, 4rem h2) */
.location-page .title-container { padding: 1.5rem 0; }
.location-page .title-container h2 { line-height: 1.3; margin-bottom: 0.5rem; }
.location-page .title-container h4 { letter-spacing: 0.1em; color: #86868b; text-transform: uppercase; margin-bottom: 0.5rem; }
.location-page .title-container p + p { margin-top: 1rem; }
.button-btm { margin-top: 1rem; }
.button-btm .button { margin-right: 0.5rem; }

.cta-primary { display: inline-block; background: #0071e3; color: #fff; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background 0.2s; }
.cta-primary:hover { background: #0077ed; color: #fff; }
.cta-primary.hollow { background: transparent; border: 2px solid #0071e3; color: #0071e3; }
.cta-primary.hollow:hover { background: #0071e3; color: #fff; }

.location-page .dealer-card-modern p { margin: 0 0 0.75rem; }
.location-page .table-intro { color: #86868b; margin-bottom: 2rem; }
.location-page .overflow-x-auto { overflow-x: auto; }

/* Which Dolphin overview cards (dark section) */
.dark-section .which-dolphin-card {
  display: block;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255,255,255,0.12);
  transition: border-color 0.2s, background 0.2s;
}
.dark-section .which-dolphin-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(41,151,255,0.5);
}
.dark-section .which-dolphin-card img {
  width: 100%;
  max-width: 120px;
  height: auto;
  object-fit: contain;
  margin: 0 auto 0.75rem;
  display: block;
}
.dark-section .which-dolphin-card strong { color: #fff; display: block; margin-bottom: 0.25rem; }
.dark-section .which-dolphin-card .which-dolphin-tagline { color: #a1a1a6; }
#which-dolphin-dallas .grid-x + .grid-x { margin-top: 2rem; }

@media (max-width: 1024px) {
  .map-container { position: relative; margin-top: 1.5rem; top: auto; }
  .dealer-list-container { max-height: none; overflow: visible; padding-right: 0; }
  .dealer-count { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 48em) {
  .location-page .title-container h2 { font-size: 1.5rem; }
}
@media (max-width: 640px) {
  .map-container iframe { height: 280px; }
  .map-container .map-iframe-fallback { height: 280px; min-height: 200px; }
  .dealer-map-leaflet,
  .dealer-map-google,
  .map-container gmp-map.dealer-map-gmp { height: 280px; }
  .map-header { padding: 0.875rem 1rem; }
  .stats-row { padding: 1rem; gap: 0.75rem 1rem; }
  .stats-row .stat-value { font-size: 1.25rem; }
  .dealer-card-modern { padding: 1rem 1.25rem; }
  .match-table,
  .spec-table { font-size: 0.875rem; }
  .match-table th,
  .match-table td,
  .spec-table th,
  .spec-table td { padding: 10px 12px; }
  .match-table th,
  .spec-table th { font-size: 0.75rem; white-space: normal; }
  .match-table td,
  .spec-table td { vertical-align: top; }
  .match-table .model-cell { min-width: 72px; }
  .match-table .product-thumb { width: 44px; height: 44px; }
  .match-table .model-cell a { gap: 0.35rem; }
}

@media (max-width: 480px) {
  .match-table th,
  .match-table td,
  .spec-table th,
  .spec-table td { padding: 8px 10px; }
  .match-table,
  .spec-table { font-size: 0.8125rem; }
  .match-table .product-thumb { width: 40px; height: 40px; }
}

/* Sticky section nav – hidden until you scroll past breadcrumbs, then fixed at top (Material Design buttons) */
.sticky-section-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07), 0 4px 12px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}
.sticky-section-nav[hidden] {
  transform: translateY(-100%);
  pointer-events: none;
  box-shadow: none;
}
.sticky-nav-mobile-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  box-sizing: border-box;
}
.sticky-nav-arrow {
  display: none;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: #f5f5f5;
  color: #1d1d1f;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.sticky-nav-arrow:hover {
  background: #e8e8ed;
  color: #0071e3;
}
.sticky-nav-arrow:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 2px;
}
.sticky-nav-arrow svg {
  width: 24px;
  height: 24px;
}
.sticky-section-nav-inner {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  box-sizing: border-box;
}
/* All buttons – Material-style outlined by default; allow wrap so they never overflow */
.sticky-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: #1d1d1f;
  background: #fff;
  border: 2px solid #dadce0;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  min-width: 0;
  flex-shrink: 1;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  box-sizing: border-box;
}
.sticky-nav-btn:hover {
  background: #f8f9fa;
  border-color: #0071e3;
  color: #0071e3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.sticky-nav-btn:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 2px;
}
/* Lit up when its section is in view (scroll spy) */
.sticky-nav-btn-active {
  background: #e3f2fd !important;
  border-color: #0071e3 !important;
  color: #1565c0 !important;
  box-shadow: 0 2px 4px rgba(0, 113, 227, 0.2);
}
.sticky-nav-btn-primary.sticky-nav-btn-active {
  background: #0056b3 !important;
  border-color: #0056b3 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
/* Primary – filled button */
.sticky-nav-btn-primary {
  background: #0071e3;
  border-color: #0071e3;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.sticky-nav-btn-primary:hover {
  background: #0056b3;
  border-color: #0056b3;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}
@media (max-width: 640px) {
  .sticky-section-nav { padding: 0.5rem 0.25rem; }
  .sticky-nav-mobile-wrap { gap: 0.25rem; padding: 0 0.25rem; }
  .sticky-nav-arrow {
    display: none;
  }
  .sticky-section-nav-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.25rem 0;
    min-width: 0;
  }
  .sticky-nav-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
  }
}