/* ---------------------------------------------------------------------------
   Utilities the build references but never generated
   ---------------------------------------------------------------------------
   The markup uses these 20 classes, but Tailwind's purge did not emit them, so
   they silently computed to nothing. That is why the pricing page had a hero
   with no bottom padding and a pricing-card section with no vertical padding
   at all — the classes were there, the rules were not.

   Values are the Tailwind defaults for each name, so this restores the design
   as it was written rather than inventing new spacing.

   Verified by scanning every class used in the HTML against the compiled
   stylesheet plus each page's inline <style>, accounting for the backslash
   escaping Tailwind applies to `:`, `[`, `]` and `.` in selectors.

   Every max-w-* here lands on body copy or a grid container, never a heading.
--------------------------------------------------------------------------- */

/* spacing scale: 1=.25rem 3=.75rem 4=1rem 12=3rem 14=3.5rem 16=4rem 20=5rem */

.pb-1  { padding-bottom: .25rem; }
.pt-3  { padding-top: .75rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

.mb-1  { margin-bottom: .25rem; }
.mb-3  { margin-bottom: .75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-14 { margin-top: 3.5rem; }

/* line-length limits — body copy and layout containers only */
.max-w-md       { max-width: 28rem; }
.max-w-lg       { max-width: 32rem; }
.max-w-4xl      { max-width: 56rem; }
.max-w-\[74ch\] { max-width: 74ch; }

@media (min-width: 768px) {
  .md\:pt-44 { padding-top: 11rem; }
  .md\:pb-20 { padding-bottom: 5rem; }
  .md\:pb-24 { padding-bottom: 6rem; }
  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
}

/* ---------------------------------------------------------------------------
   Positioning and typography the build also failed to generate
   ---------------------------------------------------------------------------
   Same cause, different properties. The clearest symptom: the pricing page's
   "MOST POPULAR" badge is `absolute -top-3 left-10`, but with neither rule
   emitted it fell back to auto and landed exactly on top of the "Pay as you
   go" heading, hiding it completely.
--------------------------------------------------------------------------- */

.-top-3  { top: -.75rem; }
.left-10 { left: 2.5rem; }

.items-end    { align-items: flex-end; }
.text-left    { text-align: left; }
.font-normal  { font-weight: 400; }
.leading-none { line-height: 1; }
.leading-\[1\.7\] { line-height: 1.7; }

.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.text-\[0\.6rem\] { font-size: .6rem; }
.text-\[0\.7rem\] { font-size: .7rem; }
.text-\[0\.8rem\] { font-size: .8rem; }
.text-\[2\.4rem\] { font-size: 2.4rem; }
.text-\[\#5c6478\] { color: #5c6478; }

.tracking-\[0\.12em\] { letter-spacing: .12em; }
.tracking-\[0\.14em\] { letter-spacing: .14em; }

.border-accent\/40 { border-color: rgb(28 143 176 / .4); }
.border-accent\/50 { border-color: rgb(28 143 176 / .5); }

@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
}

/* Section top padding. The pricing cards section had no pt at all, so the
   cards butted straight against the dark hero band above and the card's
   `-top-3` "Most popular" badge overhung into it. */
.pt-16 { padding-top: 4rem; }
.pt-20 { padding-top: 5rem; }

@media (min-width: 768px) {
  .md\:pt-20 { padding-top: 5rem; }
  .md\:pt-24 { padding-top: 6rem; }
}

/* Benefit pills on the "Built for pharmacy" cards. The cards are flex columns
   and the pill uses `mt-auto` to sit on the card's bottom edge (so pills line
   up across a row of unequal-length copy) and `self-start` so it stays
   pill-width instead of stretching to the column. `mb-6` is the guaranteed gap
   above it. None of the three were emitted by the build. */
.mt-auto { margin-top: auto; }
.mb-6 { margin-bottom: 1.5rem; }
.self-start { align-self: flex-start; }