/* ---------- birthdays ---------- */
.subhead {
  font: 700 var(--t-xl)/1.15 var(--font-display);
}
.perks {
  display: grid;
  gap: 14px;
}
.perks li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.perk-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--edge);
  border-radius: 50%;
  background: var(--c);
  color: var(--on-c);
}
[data-mode="night"] .perk-icon {
  border-color: var(--c);
}
.perks b {
  display: block;
}
.packages {
  display: grid;
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
}
@media (min-width: 820px) {
  .packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.package {
  display: grid;
  gap: 14px;
  padding: 22px;
  align-content: start;
}
.price-amount {
  font: 700 clamp(2.6rem, 2rem + 2vw, 3.4rem)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.pkg-price {
  font-size: 2rem;
}
.pkg-price .per {
  font: 700 1rem/1 var(--font-body);
  letter-spacing: 0.01em;
}
.pkg-inc {
  line-height: 1.45;
  text-wrap: pretty; /* no single word left alone on the last line */
}
.package .facts div {
  border-top-color: color-mix(in srgb, var(--on-c) 30%, transparent);
}
/* booking: beside the package on wide screens, under it on phones. The cards share a row, so this one is as tall as
   the package; any spare height goes above the button (the last row is 1fr), which sits at the bottom like a footer */
.book {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 12px;
  padding: 22px;
}
.book-kick {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.book h3 {
  line-height: 1.15; /* the same size as the package's "All Inclusive" */
}
.book-more {
  justify-self: start;
  align-self: end;
  margin-top: 6px; /* opens the birthday popup (#bday-modal), like Events' Learn more */
}
/* the big bold title, like Visit us and FAQ (.big-title, css/page/02-sections.css) */
#bday-h {
  --big: clamp(min(80px, 25vw), 22vw, 140px);
}