/* Pricing card alignment fixes.
 *
 * Lives outside vdimapp.webflow.css on purpose: that file is a Webflow export and
 * a re-export would silently revert these. Everything here is scoped to
 * .pricing-card, which appears only on index.html and
 * tire-size-search-api-demo.html — the Webflow sheet itself is loaded by ten
 * pages, so unscoped edits to .text.* or .small-text.* would reach contact.html
 * and the "About Virtual Dimension" block on the homepage.
 *
 * The bug: .main-grid.top-margin sets place-items: stretch, so every card is
 * stretched to the tallest in the row (Business, the only one with five feature
 * rows). .pricing-card then sets place-content: stretch center, which on a column
 * flex means justify-content: center — so each card centres its content in its
 * OWN leftover space and no two cards share a line. Starter shows it worst
 * because it has the least content: a 2-sentence description and four features
 * left it ~86px of surplus, split ~43px above and below.
 *
 * The Free card escaped this only by accident — its trailing "No credit card
 * required" carries margin-top/bottom: auto, and auto margins consume free space
 * before justify-content is applied.
 */

/* Anchor content to the top so the four plan names share a line.
   `.pricing-card.white` must be named explicitly: the export re-declares
   flex-flow on it at (0,2,0), which outranks a bare `.pricing-card`, so the
   white cards (Starter, Business) would keep wrap-reverse. The export also
   re-declares both inside the 991/767/479 media blocks, hence the repeats
   below — media queries add no specificity, but the pairs must match. */
.pricing-card,
.pricing-card.white {
    justify-content: flex-start;
    /* Was `column wrap-reverse`. With card height capped by the grid, content
       that outgrows it would wrap into a SECOND COLUMN rather than overflow.
       wrap-reverse also flips the cross-axis start, which breaks the auto
       margins and the ::after band below. */
    flex-flow: column nowrap;
}

@media screen and (max-width: 991px) {
    .pricing-card, .pricing-card.white { flex-flow: column nowrap; justify-content: flex-start; }
}
@media screen and (max-width: 767px) {
    .pricing-card, .pricing-card.white { flex-flow: column nowrap; justify-content: flex-start; }
}
@media screen and (max-width: 479px) {
    .pricing-card, .pricing-card.white { flex-flow: column nowrap; justify-content: flex-start; }
}

/* Push every CTA onto one baseline, so a card's surplus collects below its
   features instead of being split around them. This is what closes the gap
   under the Starter button. */
.pricing-card > .outline-button,
.pricing-card > .primary-button {
    margin-top: auto;
    /* The ≤479px rule sets margin-bottom: auto on .outline-button; combined with
       the auto above, the button would centre itself in the slack instead of
       sitting at the bottom. */
    margin-bottom: 0;
    align-self: stretch;
    /* Outline buttons were 12px, filled ones 14px, so the two variants boxed to
       different heights and could not share a baseline. Keep the deliberate
       outline-vs-filled distinction; equalise only the box. */
    padding-top: 13px;
    padding-bottom: 13px;
    /* The label must not wrap to two lines at narrow widths, or the button
       grows and stops sharing a baseline with its neighbours. */
    white-space: nowrap;
}

/* .outline-button carries a 2px border and .primary-button carries none, which
   left the filled buttons 4px shorter than the outlined ones even at identical
   padding. A transparent border equalises the box without showing an edge. */
.pricing-card > .primary-button {
    border: 2px solid #0000;
}

/* Stop Free's caption eating the card's free space (see header note). */
.pricing-card .small-text.margin {
    margin-top: 12px;
    margin-bottom: 0;
}

/* Reserve the caption row on cards that don't have one, so Free's CTA lands on
   the same baseline as the other three rather than one caption-height above it.
   Conditional because the yearly grid has no captioned card at all. */
.pricing-card:not(:has(.small-text.margin))::after {
    content: "";
    display: block;
    min-height: 24px;
    margin-top: 12px;
}

/* Feature rows are white-space: nowrap, so a long label overflows the card
   instead of wrapping — the label column is only 148px at 1440px, and the
   ≤991px breakpoint scales this text up to 2vw. Only the wrapping is changed;
   the vw type scale is left as designed. Scoped four classes deep because
   .text.white / .text.dark are also used on contact.html and by the demo
   page's hero paragraph. */
.pricing-card .small-feature > .text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Now that labels can wrap, a wrapped row would be taller than its neighbours
   and every row below it would drift out of line with the other cards. A fixed
   row height makes a 1-line and a 2-line label occupy the same space, so row N
   lands on the same y in all four cards. 48px vs the 46px these rows already
   occupied (14px margin-top + 4+4 padding around a 20px icon). */
.pricing-card .small-feature {
    box-sizing: border-box;
    min-height: 48px;
    align-items: center;
    margin: 0;
    padding: 0;
}

.pricing-card .small-feature > .check-icon {
    flex: 0 0 20px;
}