/* Booking terms — a reading page, so it is narrower than the site container and
   sets its own type scale. base.css leaves h1/h2 unsized; the other page files
   each set their own, and this one wants prose sizes rather than display ones. */

.terms { padding: 62px 0 90px }
.terms .w { width: min(760px, 88vw) }

.terms h1 { font-size: clamp(38px, 5vw, 54px); line-height: 1.02; margin-bottom: 16px }
.terms .sectionintro { max-width: none; margin-bottom: 34px }
.terms .sectionintro p { font-size: 17px; line-height: 1.6; color: #526058 }

/* Numbered so a clause can be referred to by number in an email. The counter is
   manual because list-style would put the number inline with the heading. */
.termslist { list-style: none; counter-reset: clause; margin: 0; padding: 0 }

.termslist > li {
  counter-increment: clause;
  border-top: 1px solid var(--line);
  padding: 26px 0 4px;
}

.termslist > li h2 {
  font-size: 21px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.termslist > li h2::before {
  content: counter(clause);
  font-size: 13px;
  font-weight: 800;
  color: var(--pink-btn);
  letter-spacing: 0;
  flex: none;
}

.termslist p { font-size: 15px; line-height: 1.65; color: #46534c; margin: 0 0 12px }
.termslist strong { color: var(--ink) }
.termslist a { color: var(--blue); font-weight: 700; text-decoration: underline }

.termsback { margin-top: 34px; font-size: 15px }
.termsback a { color: var(--blue); font-weight: 800 }

@media (max-width: 700px) {
  .terms { padding: 44px 0 70px }
  .termslist > li h2 { font-size: 19px }
}