/* The public download and pricing page (downloads/show): three plan cards on c-panel, one column
   on a narrow viewport and three across from the site's two-column breakpoint. What the cards
   cannot do for themselves is line their calls to action up with each other, which is what the
   flex column and the auto margin below are for. */

.p-pricing {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: stretch;
  /* The three-up is capped and centred rather than filling the container, which on a wide screen
     would stretch each card past the width its half-dozen feature lines read at. */
  max-width: 60rem;
  margin-inline: auto;
}

/* The one place on the site that rounds c-panel's square corners, so the plans read as separate
   product cards rather than as one terminal box divided in three. */
.p-pricing > .c-panel { border-radius: 4px; transition: border-color 0.2s ease; }
.p-pricing > .c-panel:hover { border-color: var(--accent); }

/* A card is a flex column so its o-stack can grow and push the call to action to the bottom,
   which is what lines the three buttons up whatever each card's feature list costs. The markup
   puts .p-pricing__cta on the button's own wrapper, so trailing fine print is not what gets
   anchored there. */
.p-pricing > .c-panel { display: flex; flex-direction: column; }
.p-pricing > .c-panel > .o-stack { flex: 1 1 auto; }
.p-pricing__cta { margin-top: auto; }

.p-pricing__cta.o-cluster,
.p-pricing__cta > .o-cluster,
.p-pricing .c-disclosure__body .o-cluster { justify-content: center; }
.p-pricing__cta.c-disclosure > summary { justify-content: center; }
/* c-disclosure indents its body to clear the marker, which is off-centre inside a card whose
   every other block is centred; the left pad goes back to matching the right. */
.p-pricing .c-disclosure__body { padding-left: var(--space-md); }

.p-pricing__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  padding-block: var(--space-md) var(--space-lg);
}
.p-pricing__eyebrow {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.p-pricing__amount {
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--text-bright);
}
.p-pricing__amount--live { color: var(--good); }
.p-pricing__tagline {
  color: var(--text-dim);
  font-size: var(--text-sm);
}

/* The marker is a flex item rather than a list marker, so a feature that wraps hangs under its
   own text instead of running back under the ▸. */
.p-pricing__features { list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); }
.p-pricing__features > li {
  display: flex;
  gap: 0.8ch;
}
.p-pricing__features > li::before {
  content: "\25B8";                 /* ▸ */
  color: var(--accent);
  flex: none;
}

.p-pricing__featured .p-pricing__cta { display: flex; flex-direction: column; gap: var(--space-sm); }
.p-pricing__fine { font-size: var(--text-xs); color: var(--text-muted); text-align: center; }
.p-pricing__earlybird { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }

/* The featured card's stronger rule waits for the three-up: stacked in one column there is no
   row of cards for it to stand out from, only the card above and below it. */
@media (min-width: 56rem) {
  .p-pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .p-pricing__featured { border-color: var(--line-strong); }
}