/* /pricing, generated by tools/pricing-page.mjs.

   Design source: Paper, page "Website", artboard "Site · /pricing".
   Base comes from /to/to.css (wrap, section, vragen, afsluiter),
   /chrome.css (nav, footer, badge) and /legal.css (paginakop and the
   two-column blok). This file only adds what those do not know: the
   three plan cards, the currency note under them and the label rows. */

.pricing-head {
  gap: 28px;
  padding-top: clamp(48px, 7.2vw, 104px);
  padding-bottom: clamp(32px, 4.4vw, 64px);
}

.pricing-plans {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: clamp(56px, 7.2vw, 104px);
}

/* Each card spans three shared rows (subgrid), so name, price and fit
   line stay level across the cards when the Yearly tag wraps. Without
   subgrid support the cards simply stack their own rows. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  list-style: none;
}

.plan {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 32px;
  border: 1px solid rgba(247, 244, 240, 0.14);
  border-radius: 16px;
}

.plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.plan-name {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.012em;
}

.plan-tag {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.012em;
  color: rgba(247, 244, 240, 0.4);
}

.plan-cost {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
}

.plan-amount {
  font-size: clamp(48px, 4.45vw, 64px);
  font-weight: 500;
  line-height: 1.0625;
  letter-spacing: -0.04em;
}

.plan-unit {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: rgba(247, 244, 240, 0.4);
}

.plan-billing {
  font-size: 15px;
  line-height: 23px;
  color: var(--text-secondary);
}

.plan-fit {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 23px;
  color: rgba(247, 244, 240, 0.75);
}

.pricing-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.pricing-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
}

/* Label rows: a fixed label column, the value left-aligned next to it.
   Same rhythm as .feitrij in legal.css, which aligns its value right. */
.pricing-row {
  display: flex;
  align-items: baseline;
  gap: 32px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}

.pricing-row:last-child {
  border-bottom: 1px solid var(--hairline);
}

.pricing-row dt {
  width: clamp(150px, 15.3vw, 220px);
  flex-shrink: 0;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: rgba(247, 244, 240, 0.75);
}

.pricing-row dd {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.pricing-row dd a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(247, 244, 240, 0.3);
  text-underline-offset: 3px;
}

.pricing-row dd a:hover {
  color: var(--text);
}

.pricing-questions {
  border-top: 1px solid var(--hairline);
}

@media (max-width: 900px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  .plan {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    padding: 24px;
  }

  .plan-fit {
    margin-top: 32px;
  }

  .pricing-row {
    flex-direction: column;
    gap: 6px;
  }

  .pricing-row dt {
    width: auto;
  }
}