.compare-page {
  background: #f4f7fb;
  color: #17263a;
}

.compare-page [hidden] { display: none !important; }
.compare-page button,
.compare-page select { font: inherit; }
.compare-page a { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.compare-page a:focus-visible,
.compare-page button:focus-visible,
.compare-page select:focus-visible,
.compare-scroll:focus-visible { outline: 3px solid #66b4ff; outline-offset: 3px; }

.compare-page .compare-header {
  position: relative;
  z-index: 20;
  height: auto;
  min-height: 78px;
  background: #102b4c !important;
}
.compare-header .navbar { padding: 13px 0; }
.compare-header .navbar-brand { margin-top: 7px; }
.compare-header .navbar-brand h2 { margin: 0; color: #fff; font-size: 23px; }
.compare-header .navbar-nav .nav-item { margin: 0 7px; }
.compare-header .navbar-nav a.nav-link { margin-top: 0; color: #e9f2ff; font-size: 14px; font-weight: 600; }
.compare-header .navbar-nav a.nav-link:hover,
.compare-header .navbar-nav .active > a.nav-link { color: #7cc3ff; }
.compare-header .navbar-nav .active > a.nav-link { border-color: #7cc3ff; }

.compare-hero {
  position: relative;
  overflow: hidden;
  padding: 82px 0 138px;
  background: radial-gradient(circle at 82% 26%, rgba(39, 126, 234, .40), transparent 36%),
    linear-gradient(125deg, #102b4c 0%, #0d3a6e 59%, #08294e 100%);
  color: #fff;
}
.compare-hero::before,
.compare-hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(183, 219, 255, .12);
  border-radius: 50%;
  pointer-events: none;
}
.compare-hero::before { width: 530px; height: 530px; right: -90px; top: -210px; }
.compare-hero::after { width: 350px; height: 350px; right: 140px; bottom: -250px; }
.compare-hero .container { position: relative; z-index: 1; }
.compare-hero-copy { max-width: 760px; }
.compare-eyebrow,
.compare-section-kicker {
  display: inline-block;
  color: #2791fb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
}
.compare-eyebrow { color: #a8d8ff; }
.compare-hero h1 {
  margin: 18px 0 18px;
  color: #fff;
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.035em;
}
.compare-hero p {
  max-width: 650px;
  margin: 0;
  color: #d3e6f9;
  font-size: 17px;
  line-height: 1.85;
}
.compare-hero-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.compare-hero-facts span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 9px 14px;
  border: 1px solid rgba(212, 232, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #f5faff;
  font-size: 13px;
  font-weight: 650;
}
.compare-hero-facts strong { font-size: 17px; }

.compare-workspace { position: relative; margin-top: -67px; padding-bottom: 90px; }
.compare-selector-card,
.compare-table-shell,
.compare-trim-card {
  border: 1px solid #e3eaf4;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(13, 52, 92, .055);
}
.compare-selector-card { padding: 34px; }
.compare-panel-heading,
.compare-result-heading,
.compare-trims-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}
.compare-panel-heading h2,
.compare-result-heading h2,
.compare-trims-heading h2 {
  margin: 8px 0 0;
  color: #14253a;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
}
.compare-panel-heading p,
.compare-result-heading p,
.compare-trims-heading p {
  max-width: 430px;
  margin: 0;
  color: #748296;
  font-size: 14px;
  line-height: 1.65;
}
.compare-select-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 28px; }
.compare-select-field { display: block; min-width: 0; margin: 0; }
.compare-select-field > span { display: block; margin-bottom: 10px; color: #5f7189; font-size: 13px; font-weight: 700; }
.compare-select-field b { margin-right: 5px; color: #2387ed; }
.compare-select-field select {
  width: 100%;
  min-height: 52px;
  padding: 0 38px 0 15px;
  border: 1px solid #dce6f1;
  border-radius: 12px;
  background: #f9fbfe;
  color: #1c3049;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.compare-select-field select:hover { border-color: #8abcf0; }
.compare-selector-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #eef2f7;
}
.compare-reset,
.compare-copy {
  min-height: 42px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.compare-reset { padding: 0 16px; border: 1px solid #dbe5f0; background: #fff; color: #405872; }
.compare-reset:hover { border-color: #9dc9f6; color: #086fcf; }
.compare-share { display: flex; align-items: center; gap: 13px; }
.compare-share > span { color: #8491a1; font-size: 13px; }
.compare-copy { padding: 0 17px; border: 1px solid #0877e0; background: #0877e0; color: #fff; }
.compare-copy:hover { border-color: #045fb8; background: #045fb8; }
.compare-copy span { margin-left: 5px; font-size: 17px; }
.compare-status { min-height: 0; margin: 0; color: #136cba; font-size: 13px; }
.compare-status:not(:empty) { margin-top: 14px; }

.compare-result-heading { margin: 62px 0 22px; }
.compare-mobile-only { display: none; }
.compare-table-shell { overflow: hidden; }
.compare-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 770px; margin: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.compare-table.is-three { min-width: 1030px; }
.compare-table th,
.compare-table td { border-bottom: 1px solid #e9eef5; vertical-align: middle; }
.compare-table thead th { width: 300px; padding: 20px; background: #f8fbff; vertical-align: top; }
.compare-table thead th:first-child { position: sticky; left: 0; z-index: 3; width: 170px; background: #f1f6fc; }
.compare-table tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 170px;
  padding: 17px 20px;
  background: #fff;
  color: #53647a;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
}
.compare-table tbody td { width: 300px; padding: 17px 20px; color: #1c2b3f; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.compare-table tbody tr:nth-child(even):not(.compare-group-row) td { background: #fcfdff; }
.compare-table tbody tr:nth-child(even):not(.compare-group-row) th { background: #fcfdff; }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table .compare-group-row th {
  position: static;
  width: auto;
  padding: 12px 20px;
  border-bottom-color: #e4edf7;
  background: #eaf4ff;
  color: #126dc3;
  font-size: 13px;
  font-weight: 800;
}
.compare-car-head { min-height: 220px; }
.compare-car-head img {
  display: block;
  width: 100%;
  height: 125px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: #eef3f9;
  object-fit: contain;
}
.compare-car-head span { display: block; margin-bottom: 4px; color: #7b8ca2; font-size: 12px; font-weight: 700; }
.compare-car-head a { color: #132c49; font-size: 20px; font-weight: 800; line-height: 1.3; }
.compare-car-head a:hover { color: #0877e0; }
.compare-car-head small { display: block; margin-top: 9px; color: #78889c; font-size: 12px; }
.compare-table .compare-price { color: #ed5144; font-size: 19px; font-weight: 800; }
.compare-table .compare-missing { color: #8b98a8; }
.compare-table .compare-cell-note { display: block; margin-top: 3px; color: #7a8a9d; font-size: 12px; }
.compare-table a.compare-source-link { color: #0877e0; font-size: 13px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.compare-table a.compare-source-link:hover { color: #045ba9; }

.compare-trims-heading { margin: 64px 0 22px; }
.compare-trims-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 17px; }
.compare-trim-card { overflow: hidden; padding: 25px; }
.compare-trim-card-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.compare-trim-card-top span { color: #8492a3; font-size: 12px; font-weight: 750; }
.compare-trim-card-top h3 { margin: 5px 0 0; color: #172c45; font-size: 22px; font-weight: 800; }
.compare-trim-count { padding: 7px 10px; border-radius: 999px; background: #eaf4ff; color: #116fc5 !important; white-space: nowrap; }
.compare-trim-card ul { margin: 20px 0 18px; padding: 0; list-style: none; }
.compare-trim-card li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf1f6; color: #425671; font-size: 13px; line-height: 1.5; }
.compare-trim-card li strong { flex: 0 0 auto; color: #e34f44; font-size: 14px; }
.compare-trim-card > a { color: #0a78dc; font-size: 13px; font-weight: 800; }
.compare-trim-card > a:hover { color: #045ba9; }

.compare-boundary {
  display: flex;
  gap: 18px;
  margin-top: 32px;
  padding: 22px 26px;
  border: 1px solid #cfe2f5;
  border-radius: 16px;
  background: #eaf5ff;
}
.compare-boundary-icon { display: grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1679d0; color: #fff; font-weight: 800; font-style: normal; }
.compare-boundary h2 { margin: 0 0 7px; color: #173857; font-size: 16px; font-weight: 800; }
.compare-boundary p { margin: 0; color: #516982; font-size: 13px; line-height: 1.8; }

.compare-footer { padding: 42px 0; background: #102b4c; color: #fff; }
.compare-footer-inner { display: flex; justify-content: space-between; gap: 30px; }
.compare-footer strong { font-size: 19px; }
.compare-footer p { margin: 8px 0 0; color: #aec2d9; font-size: 13px; }
.compare-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.compare-footer a { color: #d9e9fa; font-size: 13px; }
.compare-footer a:hover { color: #fff; }

@media (max-width: 991px) {
  .compare-header .navbar-brand { margin-top: 0; }
  .compare-header .navbar-toggler { top: 19px; }
  .compare-header .navbar-collapse { margin-top: 18px; padding: 14px 0 4px; background: #102b4c; }
  .compare-header .navbar-nav .nav-item { margin: 0; }
  .compare-header .navbar-nav a.nav-link { padding: 10px 2px; color: #e9f2ff !important; }
  .compare-header .navbar-nav .active > a.nav-link { color: #7cc3ff !important; }
}

@media (max-width: 767px) {
  .compare-hero { padding: 60px 0 115px; }
  .compare-hero h1 { font-size: 42px; }
  .compare-hero p { font-size: 15px; }
  .compare-workspace { margin-top: -55px; padding-bottom: 64px; }
  .compare-selector-card { padding: 22px 18px; border-radius: 20px; }
  .compare-panel-heading,
  .compare-result-heading,
  .compare-trims-heading { display: block; }
  .compare-panel-heading h2,
  .compare-result-heading h2,
  .compare-trims-heading h2 { font-size: 25px; }
  .compare-panel-heading p,
  .compare-result-heading p,
  .compare-trims-heading p { margin-top: 8px; }
  .compare-select-grid { grid-template-columns: 1fr; gap: 17px; margin-top: 22px; }
  .compare-selector-actions { align-items: flex-start; flex-direction: column; }
  .compare-share { justify-content: space-between; width: 100%; }
  .compare-share > span { font-size: 12px; }
  .compare-result-heading,
  .compare-trims-heading { margin-top: 50px; }
  .compare-mobile-only { display: inline; }
  .compare-table-shell { border-radius: 17px; }
  .compare-table thead th:first-child,
  .compare-table tbody th { width: 125px; }
  .compare-table thead th { width: 260px; padding: 14px; }
  .compare-table tbody th { padding: 13px 12px; }
  .compare-table tbody td { width: 260px; padding: 13px 14px; }
  .compare-car-head img { height: 105px; }
  .compare-car-head a { font-size: 17px; }
  .compare-boundary { padding: 19px; }
  .compare-footer-inner { display: block; }
  .compare-footer nav { margin-top: 24px; }
}

@media (max-width: 390px) {
  .compare-share { align-items: flex-start; flex-direction: column; }
  .compare-hero-facts { gap: 8px; }
  .compare-hero-facts span { padding: 8px 10px; font-size: 12px; }
}