/* Price · one ProductPrice row, wherever an amount appears.

   A component stylesheet rather than a page one, because
   templates/components/_price.html is included from the office-hours offer page
   and from every product detail page. These rules used to live in
   pages/office-hours.css, which is loaded only for office-hours products — so
   the cohort and framework detail pages rendered `.price` cards with no styling
   at all. A shared component's styles have to live where every one of its
   callers can load them. */
.price-group{display:grid;gap:12px}
/* On a detail page the prices are the page's own statement, not a line inside a
   tier card: they sit side by side and the column count follows the amount of
   ways to pay, one track each. */
.price-group--detail{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:0 0 12px;
}

.price{
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb,var(--surface-2) 82%,transparent);
}
.price-label{
  display:block;
  margin-bottom:6px;
  color:var(--silver);
  font-size:.62rem;
  font-weight:780;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.price-amount{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin:0;
  color:var(--paper);
}
.price-amount b{
  font-family:var(--font-display);
  font-size:1.72rem;
  font-weight:700;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.price--large .price-amount b{font-size:clamp(1.9rem,3.2vw,2.4rem)}
.price-period{color:var(--silver);font-size:.82rem;font-weight:700}
.price-equivalent,.price-instalment,.price-note{
  margin:7px 0 0;
  color:var(--silver);
  font-size:.76rem;
  line-height:1.5;
}
.price-instalment{color:var(--lavender)}