/* The Purchasing & inventory page, from the 2026-11-04 handoff. It reuses the Labor
   productivity page's hero, problem, stage, pricing, and FAQ styles.
   Loaded after home.css and pages.css. */
@import url("/assets/css/labor-productivity.css");

/* Hero: the Labor page's layout the card takes the image's own height. */
.lp-hero-visual.pi-hero-visual .screen-card { height: auto; }
.lp-hero-visual.pi-hero-visual .screen-card img { height: auto; object-fit: fill; }

/* The problem: quote and paragraph with the navy facts card, as on the Labor page (card added 2026-11-04 at Alan's request). */

.lp-visual .pi-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; max-height: 100%; background: #E5E5E0; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--slate); text-align: center; padding: 24px; }

/* How it connects: a sand card with four short columns. */
.pi-connects { padding-block: 0 24px; }
.pi-connects-card { padding: 48px; background: var(--sand); border-radius: 20px; }
.pi-connects h2 { max-width: 20ch; font-size: 30px; }
.pi-connects-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 32px; }
.pi-connects-grid a, .pi-connects-grid div { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.pi-connects-grid strong { font-size: 16px; color: var(--navy); }
.pi-connects-grid a:hover strong { color: var(--teal); }
.lp-mid { padding-block: 72px 96px; }

@media (max-width: 960px) {
  .pi-connects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pi-connects-card { padding: 24px; }
  .pi-connects-grid { grid-template-columns: 1fr; }
  .lp-mid { padding-block: 48px 64px; }
}

/* The accent underline draws left to right in one pass. With non-scaling-stroke
   the dash offset is miscomputed once the svg is stretched past the homepage's
   width, and the line appears from both ends at once. */
.lp-hero .word-accent path { vector-effect: none; stroke-width: 4; }