/* ==========================================================================
   CONVEO — Pricing page
   Page-specific styles only. Inherits colors, type scale, layout utilities,
   nav, buttons, and footer from styles.css — load that first.

   Content column is centered and narrower than the sitewide container
   (measured from the comp: ~1160px vs the site's 1760px max-width) —
   a dedicated shell rather than reusing .container--narrow, since neither
   existing width matches what this page actually needs.
   ========================================================================== */

:root {
  --pricing-shell-max: 1160px;
  /* Biggest text on the page by design — the price is the focal point.
     Page-scoped, not added to styles.css's shared scale. */
  --fs-price: 96px;
  --fs-price-cents: 40px;
}

/* ---------- Active top-nav state (this page only) ---------- */
.nav__center a.active {
  opacity: 1;
  border-bottom: 1px solid var(--color-blue);
  padding-bottom: 4px;
}

.pricing-page {
  padding-top: calc(var(--nav-height) + 56px);
  padding-bottom: 96px;
}

.pricing-shell {
  max-width: var(--pricing-shell-max);
  margin: 0 auto;
  /* No desktop padding — the shell's own max-width is already narrower
     than the viewport at real desktop sizes, so padding here would eat
     into the content width the comp was actually measured at. Tablet/
     mobile breakpoints add their own padding once the viewport
     approaches the shell's max-width. */
  padding: 0;
}

.pricing-header {
  font-size: var(--fs-section);
  font-weight: var(--fw-regular);
  color: var(--color-white);
  margin-bottom: 96px;
}

.pricing-header em {
  font-style: italic;
}

/* ---------- Pricing cards ---------- */
/* Grid, not flexbox, so both cards' own boxes land at the same height
   (row 2 stretches both to match the taller card's content) while the
   badge sits in its own row above card 2 only — card 1 simply has
   nothing in row 1 of its column, so its box starts lower than the
   badge and ends level with card 2's box, exactly matching the comp
   (both card boxes equal height, card 2's total taller once the badge
   is added on top). A flex row bottom/stretch-aligning two
   independently-sized wrappers can't produce that relationship —
   it either bottom-aligns mismatched box heights or equalizes the
   wrong thing (the outer totals, which forces the boxes to differ). */
.pricing-cards {
  display: grid;
  /* minmax(0, 1fr), not plain 1fr — a bare 1fr track still respects each
     column's min-content width as a floor, which let card 1's longest
     feature line (a single unbroken phrase, once nothing forced it to
     wrap) push that column wider than an even split. minmax(0, 1fr)
     removes that floor so both columns actually split evenly and the
     text wraps instead. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 48px;
  margin-bottom: 64px;
}

.pricing-cards > .pricing-card:not(.pricing-card--popular) {
  grid-column: 1;
  grid-row: 2;
}

.pricing-cards > .pricing-card__badge {
  grid-column: 2;
  grid-row: 1;
}

.pricing-cards > .pricing-card--popular {
  grid-column: 2;
  grid-row: 2;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  border: 1px solid var(--white-faint-16);
  padding: 40px 40px 48px;
}

.pricing-card__badge {
  background: rgba(244, 241, 234, 0.4);
  color: var(--color-white);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  padding: 16px;
}

.pricing-card__title {
  font-size: var(--fs-feature);
  font-weight: var(--fw-semibold);
  margin-bottom: 16px;
}

.pricing-card__subtext {
  color: var(--white-85);
  max-width: 340px;
  margin-bottom: 32px;
}

.pricing-card__price {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  line-height: 1;
}

.pricing-card__price-main {
  font-size: var(--fs-price);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  line-height: 1;
}

.pricing-card__price-cents {
  font-size: var(--fs-price-cents);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  line-height: 1;
  margin-top: 4px;
}

.pricing-card__caption {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  margin-top: 12px;
  margin-bottom: 32px;
}

.pricing-card__rule {
  border: none;
  border-top: 2px solid var(--color-blue);
  width: 220px;
  margin: 0 0 32px;
}

.pricing-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
  /* Same min-content trap as the outer grid columns, one level down —
     without this, the UL (a flex item in .pricing-card's own column)
     refuses to shrink below its longest unwrapped line. */
  min-width: 0;
  width: 100%;
}

.pricing-card__features li {
  color: var(--color-white);
  font-size: var(--fs-body);
}

.pricing-card__features li::before {
  content: '• ';
  color: var(--color-white);
}

.pricing-card__cta {
  margin-top: auto;
}

/* ---------- Marketing callouts ---------- */
.pricing-callouts {
  display: flex;
  gap: 32px;
}

.pricing-callout {
  flex: 1;
  border: 1px solid var(--white-faint-16);
  padding: 24px;
}

.pricing-callout p {
  font-style: italic;
  color: var(--color-white);
  line-height: 1.5;
}

/* ==========================================================================
   Responsive — Tablet: 768px – 1279px
   ========================================================================== */
@media (max-width: 1279px) {
  .pricing-shell {
    padding: 0 var(--pad-tablet);
  }

  .pricing-cards {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    /* No row-gap here — with all three items stacked in one column,
       a row-gap applies between every adjacent pair, which would also
       shove the badge away from card 2 below it, not just separate
       card 1 from the popular-card group. Card 1 gets its own
       margin-bottom instead, so the badge stays flush against card 2
       (matching desktop) while still getting breathing room above it. */
  }

  .pricing-cards > .pricing-card:not(.pricing-card--popular),
  .pricing-cards > .pricing-card__badge,
  .pricing-cards > .pricing-card--popular {
    grid-column: 1;
    grid-row: auto;
  }

  .pricing-cards > .pricing-card:not(.pricing-card--popular) {
    margin-bottom: 32px;
  }

  .pricing-callouts {
    flex-direction: column;
    gap: 16px;
  }
}

/* ==========================================================================
   Responsive — Mobile: below 768px
   ========================================================================== */
@media (max-width: 767px) {
  .pricing-page {
    padding-top: calc(var(--nav-height) + 40px);
    padding-bottom: 64px;
  }

  .pricing-shell {
    padding: 0 var(--pad-mobile);
  }

  .pricing-header {
    font-size: var(--fs-large);
    margin-bottom: 56px;
  }

  :root {
    --fs-price: 64px;
    --fs-price-cents: 28px;
  }

  .pricing-card {
    padding: 32px 24px 40px;
  }
}