/* 08-pages/_download.css — page composition for the public Download / pricing page.

   The plans read as three separated cards — Demo / Personal / Team — built from the
   c-panel vocabulary but softened here with rounded corners and set apart with real gaps
   between them. Each card leads with a simple, centred header (eyebrow, price, tagline),
   then a clean feature list, and every card's CTA is pinned to a common baseline so the
   buttons line up. The middle Personal card carries a stronger, accented rule. Collapses
   to a single stacked column on narrow viewports. */

.p-pricing {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: stretch;
  /* Keep the three-up from stretching edge-to-edge on wide viewports — a comfortable
     reading width, centred in the container. */
  max-width: 60rem;
  margin-inline: auto;
}

/* Rounded, separated cards — the one place on the site that softens the square-cornered
   panel, so pricing reads as distinct product cards rather than one fused terminal box. */
.p-pricing > .c-panel { border-radius: 4px; }

/* Each column is a flex box so its inner o-stack can grow and push the CTA down to a
   shared baseline; the CTA carries .p-pricing__cta so it — not any trailing fine print —
   is the element anchored to that baseline. */
.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; }

/* Centre the CTA buttons in every column. */
.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; }
/* The demo disclosure body inherits a marker-indented left pad from the shared component;
   even it out so its inner padding reads symmetric here. */
.p-pricing .c-disclosure__body { padding-left: var(--space-md); }

/* Card header — eyebrow, then price, then tagline, stacked and centred. */
.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);
}

/* Feature list — a box-drawing marker with a proper hanging indent, so wrapped lines
   align under the text rather than falling back under the marker. */
.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;
}

/* The featured CTA stacks its early-bird note above the Buy button. */
.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; }
/* Two little accent chips advertising the early-bird deal, centred above the Buy button. */
.p-pricing__earlybird { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }

@media (min-width: 56rem) {
  .p-pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The featured middle card stands proud with a stronger, accented rule. */
  .p-pricing__featured { border-color: var(--line-strong); }
}