/* Pricing cards: a 1px-gap grid on the rule colour, same language as the capability grid. The recommended card is marked by an ink top edge. */.pricing { display: grid; gap: 1px; background: var(--color-rule); border: 1px solid var(--color-rule); border-radius: 12px; overflow: hidden; margin-top: 0.5rem;}@media (min-width: 900px) { .pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); }}.pricing__card { display: flex; flex-direction: column; padding: 1.5rem 1.4rem 1.6rem; background: var(--color-surface); position: relative;}.pricing__card--rec::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--color-ink);}.pricing__eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-ink-3); margin-bottom: 0.9rem;}.pricing__card--rec .pricing__eyebrow { color: var(--color-ink);}.pricing__name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); margin-bottom: 0.15rem;}.pricing__aud { font-size: 14px; color: var(--color-ink-3); margin-bottom: 1.1rem;}.pricing__price { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 1.25rem;}.pricing__amount { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); font-variant-numeric: tabular-nums;}.pricing__unit { font-size: 13.5px; color: var(--color-ink-3);}.pricing__card > .btn-primary,.pricing__card > .btn-secondary { align-self: flex-start; margin-bottom: 1.4rem;}.pricing__flabel { font-size: 12.5px; font-weight: 500; color: var(--color-ink); margin-bottom: 0.6rem;}
/* Pricing cards: a 1px-gap grid on the rule colour, same language as the
capability grid. The recommended card is marked by an ink top edge. */
.pricing {
display: grid;
gap: 1px;
background: var(--color-rule);
border: 1px solid var(--color-rule);
border-radius: 12px;
overflow: hidden;
margin-top: 0.5rem;
}
@media (min-width: 900px) {
.pricing {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.pricing__card {
display: flex;
flex-direction: column;
padding: 1.5rem 1.4rem 1.6rem;
background: var(--color-surface);
position: relative;
}
.pricing__card--rec::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: var(--color-ink);
}
.pricing__eyebrow {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--color-ink-3);
margin-bottom: 0.9rem;
}
.pricing__card--rec .pricing__eyebrow {
color: var(--color-ink);
}
.pricing__name {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-ink);
margin-bottom: 0.15rem;
}
.pricing__aud {
font-size: 14px;
color: var(--color-ink-3);
margin-bottom: 1.1rem;
}
.pricing__price {
display: flex;
align-items: baseline;
gap: 0.4rem;
margin-bottom: 1.25rem;
}
.pricing__amount {
font-size: 40px;
line-height: 1;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--color-ink);
font-variant-numeric: tabular-nums;
}
.pricing__unit {
font-size: 13.5px;
color: var(--color-ink-3);
}
.pricing__card > .btn-primary,
.pricing__card > .btn-secondary {
align-self: flex-start;
margin-bottom: 1.4rem;
}
.pricing__flabel {
font-size: 12.5px;
font-weight: 500;
color: var(--color-ink);
margin-bottom: 0.6rem;
}