/* A subscription reads as an offer, not a grid item: one telescope, what it gives you, the terms. */
.subs-page {
  padding-block: 32px 64px;
}
.subs-page h1 {
  margin: 0 0 6px;
}
.lede {
  margin: 0 0 28px;
  color: var(--muted);
}
.subs-list {
  display: grid;
  gap: 28px;
}
.subs-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-control, 8px);
  overflow: hidden;
}
.subs-shot {
  display: block;
  width: 100%;
  aspect-ratio: 1400 / 720;
  object-fit: cover;
  max-width: 100%;
}
.subs-body {
  padding: 22px 24px 26px;
}
.subs-body h2 {
  margin: 0 0 10px;
}
.subs-description {
  color: var(--muted);
}
.subs-description ul {
  margin: 10px 0 0;
  padding-left: 20px;
}
.subs-description li {
  margin-bottom: 6px;
}
.subs-form {
  margin-top: 22px;
}
.subs-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Each term shows its own price, because the price is the reason to pick one. */
.subs-term {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control, 8px);
  cursor: pointer;
}
.subs-term input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.subs-term:has(input:checked) {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
}
.subs-term:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.subs-term-price {
  font-variant-numeric: tabular-nums;
}
.subs-term-price small {
  color: var(--muted);
}
.subs-soon {
  margin: 18px 0 0;
  color: var(--muted);
}
.subs-empty {
  color: var(--muted);
}