/* Compare page: architectural editorial presentation with mobile-first readability. */
body.compare-page {
  background: #f3f0e9 !important;
  color: #17221f !important;
}

body.compare-page .editorial-page-hero {
  background: #123f38 !important;
  padding: 0 !important;
}

body.compare-page .rr-hero-shell,
body.compare-page .rr-hero-frame {
  width: 100% !important;
  max-width: none !important;
  min-height: 500px !important;
  margin: 0 !important;
  box-shadow: none !important;
}

body.compare-page .editorial-page-hero-bg {
  filter: saturate(0.95) contrast(1.06) brightness(0.66) !important;
}

body.compare-page .editorial-page-hero-overlay {
  background: linear-gradient(90deg, rgba(10,34,30,0.96) 0%, rgba(10,34,30,0.8) 42%, rgba(10,34,30,0.2) 78%, rgba(10,34,30,0.06) 100%) !important;
}

body.compare-page .editorial-page-hero-inner {
  width: min(100%, 1280px) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: clamp(72px, 10vw, 132px) clamp(24px, 6vw, 76px) !important;
}

body.compare-page .editorial-hero-eyebrow {
  color: #d9b49a !important;
  font: 700 0.78rem/1.2 "DM Sans", Inter, sans-serif !important;
  letter-spacing: 0.18em !important;
}

body.compare-page .editorial-hero-title {
  max-width: 10ch !important;
  color: #fffdf8 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(4.7rem, 8vw, 8rem) !important;
  font-weight: 500 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.055em !important;
  text-shadow: none !important;
}

body.compare-page .editorial-hero-subtitle {
  max-width: 620px !important;
  color: #f1eee7 !important;
  font-size: clamp(1.08rem, 1.5vw, 1.28rem) !important;
  line-height: 1.65 !important;
}

body.compare-page .main-narrow {
  width: min(100% - 48px, 1320px) !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: clamp(64px, 9vw, 120px) 0 !important;
  background: transparent !important;
}

body.compare-page #compare-root {
  display: grid !important;
  gap: 36px !important;
}

body.compare-page .glass-card {
  padding: clamp(28px, 4vw, 52px) !important;
  margin: 0 !important;
  border: 1px solid rgba(23,34,31,0.16) !important;
  border-radius: 0 !important;
  background: #fffdf9 !important;
  color: #17221f !important;
  box-shadow: none !important;
}

body.compare-page .glass-card h2 {
  margin: 0 0 16px !important;
  color: #123f38 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(2.5rem, 4vw, 4.4rem) !important;
  font-weight: 500 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.045em !important;
}

body.compare-page .glass-card p,
body.compare-page .glass-card span,
body.compare-page .glass-card strong,
body.compare-page .glass-card label {
  color: #4f5b57 !important;
}

body.compare-page #compare-checkboxes {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 1px !important;
  margin: 28px 0 30px !important;
  background: rgba(23,34,31,0.16) !important;
  border: 1px solid rgba(23,34,31,0.16) !important;
}

body.compare-page #compare-checkboxes label {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 84px !important;
  padding: 18px 20px !important;
  background: #f7f3ec !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

body.compare-page #compare-checkboxes input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  accent-color: #23453f !important;
}

body.compare-page #compare-checkboxes strong {
  color: #123f38 !important;
  font-size: 1.05rem !important;
}

body.compare-page #compare-run-btn {
  min-height: 54px !important;
  padding: 14px 24px !important;
  border-radius: 0 !important;
  background: #23453f !important;
  color: #ffffff !important;
  border-color: #23453f !important;
}

body.compare-page #compare-results {
  display: grid !important;
  gap: 36px !important;
}

body.compare-page .compare-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid rgba(23,34,31,0.16) !important;
  background: #fffdf9 !important;
  -webkit-overflow-scrolling: touch;
}

body.compare-page .compare-table {
  width: 100% !important;
  min-width: 760px !important;
  border-collapse: collapse !important;
  background: #fffdf9 !important;
}

body.compare-page .compare-table th,
body.compare-page .compare-table td {
  padding: 18px 20px !important;
  border-bottom: 1px solid rgba(23,34,31,0.12) !important;
  border-right: 1px solid rgba(23,34,31,0.12) !important;
  color: #25322e !important;
  text-align: left !important;
}

body.compare-page .compare-table th {
  background: #23453f !important;
  color: #ffffff !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.compare-page .compare-table td:first-child {
  background: #eee7dc !important;
  color: #123f38 !important;
  min-width: 170px !important;
}

body.compare-page .city-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 40px !important;
  margin-top: 0 !important;
}

body.compare-page .city-card {
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.compare-page .city-media {
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: #d7d0c7 !important;
}

body.compare-page .city-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(0.95) contrast(1.05) !important;
}

body.compare-page .city-info {
  padding: 22px 0 0 !important;
  border-top: 1px solid rgba(23,34,31,0.16) !important;
}

body.compare-page .city-info h3 {
  margin: 0 0 12px !important;
  color: #123f38 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(2.8rem, 4.5vw, 4.8rem) !important;
  font-weight: 500 !important;
  line-height: 0.92 !important;
}

body.compare-page .city-info p {
  color: #58635f !important;
  line-height: 1.65 !important;
}

body.compare-page .city-explore-link {
  display: inline-flex !important;
  min-height: 44px !important;
  padding: 10px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #123f38 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #123f38 !important;
  font-weight: 700 !important;
}

body.compare-page .disclaimer-inline {
  max-width: 780px !important;
  margin: 56px 0 0 !important;
  color: #65706c !important;
  font-size: 0.86rem !important;
  line-height: 1.6 !important;
}

@media (max-width: 820px) {
  body.compare-page .main-narrow {
    width: calc(100% - 32px) !important;
  }

  body.compare-page #compare-checkboxes,
  body.compare-page .city-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body.compare-page .rr-hero-frame {
    min-height: 430px !important;
  }

  body.compare-page .editorial-page-hero-inner {
    padding: 48px 20px !important;
  }

  body.compare-page .editorial-hero-title {
    font-size: clamp(3.7rem, 18vw, 5.6rem) !important;
  }

  body.compare-page .main-narrow {
    width: calc(100% - 24px) !important;
    padding: 56px 0 !important;
  }

  body.compare-page .glass-card {
    padding: 24px 18px !important;
  }

  body.compare-page #compare-run-btn {
    width: 100% !important;
  }
}