/* ══════════════════════════════════════════════════════════════════════
   Landing page polish — index.html only (linked after lms360.css, never
   in the app dashboards, which don't load this file).

   Root cause of "massive spacing" (confirmed via computed styles on the
   live page): the template's .mb-5.mb-lg-7 utility resolves to 128px at
   desktop widths, and it's stacked on nearly every row in #how (the
   section intro heading AND all four step rows) — over 600px of pure
   margin in one section. Scoped overrides below instead of touching
   .mb-lg-7 itself, since that utility class is shared by lms360.css
   across every console dashboard too (not just this landing page) and
   redefining it globally would be a much bigger, riskier change than
   this page needs.

   Also fixes "Why Choose Us" cards force-breaking a word mid-letter
   (e.g. "Deliverie / s") — the 4-up grid's real column width at common
   desktop widths (~1000-1200px) is too narrow for the heading's
   font-size, so the browser has no way to wrap without breaking the
   word. Shrinking the heading slightly and hyphenating properly (a
   real "Deliv-eries" break) fixes both the ugly first-word iteration
   and any future overflow.
═══════════════════════════════════════════════════════════════════════ */

/* "How It Works" — section intro + each step row */
#how .row.justify-content-center.mb-5.mb-lg-7 {
  margin-bottom: 2.5rem !important;
}
#how .row-grid.mb-5.mb-lg-7 {
  margin-bottom: 2rem !important;
}
@media (min-width: 992px) {
  #how .row.justify-content-center.mb-5.mb-lg-7 {
    margin-bottom: 3.5rem !important;
  }
  #how .row-grid.mb-5.mb-lg-7 {
    margin-bottom: 2.75rem !important;
  }
}

/* "Why Choose Us" — section intro row (same 128px pattern) */
#why .row.justify-content-center.mb-5.mb-lg-7 {
  margin-bottom: 2.5rem !important;
}
@media (min-width: 992px) {
  #why .row.justify-content-center.mb-5.mb-lg-7 {
    margin-bottom: 3.5rem !important;
  }
}

/* "Why Choose Us" cards — stop the ugly mid-word break */
#why .card h3 {
  font-size: 1.15rem;
  hyphens: auto;
}

/* #faq is the one content section that never got a `.py-0` override like
   its siblings (#how, #why, and the features section right after the
   hero all have it) — so on top of its own internal row margins it was
   also carrying .section-lg's full 128px top+bottom padding (256px of
   section padding alone), which is the other big chunk of the "spacer"
   feel right around the FAQ block. Matched to the same scale as #how/
   #why above instead of removing it outright — a FAQ block still wants
   some breathing room, just not a quarter of the block being padding. */
#faq {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}
@media (min-width: 992px) {
  #faq {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

/* #download (the "Get started in seconds" CTA right after FAQ) carries
   96px top+bottom by default — smaller than #faq's original 128px but
   still adds up directly after it. Trimmed to match. */
#download {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
@media (min-width: 992px) {
  #download {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}


/* BUG FIX: the "How It Works" step images (create-job.jpg,
   assign-track.jpg, Delivery-bro.svg, Printing-invoices.svg) got
   stretched vertically the moment explicit width/height HTML attributes
   were added to them (for layout-shift prevention). Root cause: the
   HTML height="..." attribute is mapped by the browser to a literal
   `height: <n>px` presentational style at low priority. `.w-100`
   overrides the matching width mapping (`width:100% !important`), but
   there is no equivalent height override — so the attribute's raw pixel
   height (e.g. 686px for create-job.jpg) stayed in effect no matter how
   narrow the actual rendered width became, and object-fit:fill then
   stretched the image to fill that mismatched box instead of scaling
   proportionally. `height: auto` restores the correct proportional
   scaling while the width/height attributes still do their job of
   reserving the right aspect ratio before the image loads. */
#how img.w-100 {
  height: auto !important;
  max-height: 260px;
  object-fit: contain;
}
@media (min-width: 992px) {
  #how img.w-100 {
    max-height: 300px;
  }
}