.price-lists {
  padding-bottom: 105px;
}

.price-panel {
  scroll-margin-top: 24px;
  margin-bottom: 34px;
  padding: 38px;
  color: var(--ink);
  background: #f7faf9;
  border-top: 5px solid var(--petrol-light);
}

.price-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}

.price-heading .eyebrow {
  margin-bottom: 12px;
}

.price-heading h3 {
  font-size: clamp(2.4rem, 4vw, 4.2rem);
}

.price-heading > span,
.price-heading-action > span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.price-heading-action {
  display: flex;
  align-items: center;
  gap: 18px;
}

.price-heading-action .button {
  color: #fff;
  white-space: nowrap;
}

.mobile-table-hint {
  display: none;
  color: var(--muted);
  font-size: .78rem;
}

.price-table-scroll {
  overflow-x: auto;
  outline: none;
  scrollbar-color: var(--petrol-light) #dce7e6;
}

.price-table-scroll:focus-visible {
  outline: 3px solid rgba(44, 133, 136, .35);
  outline-offset: 4px;
}

.rental-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  font-size: .83rem;
  font-variant-numeric: tabular-nums;
}

.rental-table th,
.rental-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #dce7e6;
  text-align: center;
}

.rental-table thead th {
  color: #fff;
  background: var(--petrol-deep);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rental-table thead th:first-child,
.rental-table tbody th[scope="row"] {
  width: 245px;
  text-align: left;
}

.rental-table tbody th[scope="row"] {
  font-weight: 700;
}

.rental-table tbody th small {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 500;
}

.rental-table tbody tr:not(.price-group):hover {
  background: #eaf3f2;
}

.rental-table .price-group th {
  padding: 10px 12px;
  color: var(--petrol-deep);
  background: #bcd8d8;
  font: 800 1rem/1 var(--display);
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
}

.service-price-panel {
  margin-bottom: 0;
  background: #fff;
}

.service-price-grid {
  display: grid;
  gap: 1px;
  background: #dce7e6;
  border: 1px solid #dce7e6;
}

.service-price-grid > article {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 30px;
  padding: 26px 28px;
  background: #fff;
}

.service-price-grid > article:nth-child(odd) {
  background: #edf5f4;
}

.service-price-title > span {
  display: block;
  margin-bottom: 7px;
  color: var(--petrol);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.service-price-title h4 {
  font-size: 1.4rem;
  line-height: 1.05;
}

.service-price-title ul {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.55;
}

.service-price-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-self: center;
}

.service-price-values.single {
  grid-template-columns: 1fr;
}

.service-price-values p {
  margin: 0;
  padding: 14px;
  text-align: center;
  background: var(--petrol-deep);
}

.service-price-values span,
.service-price-values strong {
  display: block;
}

.service-price-values span {
  color: #9fc2c3;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.service-price-values strong {
  margin-top: 3px;
  color: #fff;
  font: 800 1.45rem/1 var(--display);
}

.service-price-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 24px;
  padding-top: 23px;
  border-top: 1px solid #dce7e6;
}

.service-price-cta p {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
}

.service-price-cta a {
  flex: 0 0 auto;
  color: var(--petrol);
  font-size: .84rem;
  font-weight: 800;
}

@media (max-width: 850px) {
  .price-panel {
    padding: 30px 24px;
  }

  .price-heading,
  .price-heading-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .price-heading {
    gap: 18px;
  }

  .price-heading-action {
    gap: 12px;
  }

  .mobile-table-hint {
    display: block;
  }

  .service-price-grid > article {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 560px) {
  .price-lists {
    padding-bottom: 75px;
  }

  .price-panel {
    width: calc(100% + 28px);
    margin-left: -14px;
    padding: 28px 14px;
  }

  .rental-table {
    font-size: .78rem;
  }

  .rental-table thead th:first-child,
  .rental-table tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 190px;
    min-width: 190px;
    background: #f7faf9;
    box-shadow: 1px 0 #dce7e6;
  }

  .rental-table thead th:first-child {
    z-index: 2;
    color: #fff;
    background: var(--petrol-deep);
  }

  .rental-table .price-group th {
    position: static;
  }

  .service-price-grid > article {
    padding: 22px 18px;
  }

  .service-price-values p {
    padding: 12px 8px;
  }

  .service-price-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}