/* The Safety & compliance 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.sc-hero-visual .screen-card { height: auto; }
.lp-hero-visual.sc-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 .sc-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. */
.sc-connects { padding-block: 0 24px; }
.sc-connects-card { padding: 48px; background: var(--sand); border-radius: 20px; }
.sc-connects h2 { max-width: 20ch; font-size: 30px; }
.sc-connects-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 32px; }
.sc-connects-grid a, .sc-connects-grid div { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.sc-connects-grid strong { font-size: 16px; color: var(--navy); }
.sc-connects-grid a:hover strong { color: var(--teal); }
.lp-mid { padding-block: 72px 96px; }

@media (max-width: 960px) {
  .sc-connects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sc-connects-card { padding: 24px; }
  .sc-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; }

/* Step 1 placeholder until the OSHA 300 log capture arrives. */
.lp-visual .sc-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; }

/* Step 3: the toolbox talk phone alone, centered, as tall as the box. */
.lp-visual .sc-render { position: absolute; left: 50%; top: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 16px 28px rgba(18, 43, 67, .22)); }
/* Step 4: two phones, the safety observations in front and slightly overlapping the JHA (Alan, 2026-11-05). */
.lp-visual .sc-phones { position: relative; width: 100%; height: 100%; }
.lp-visual .sc-phone { position: absolute; width: auto; filter: drop-shadow(0 16px 28px rgba(18, 43, 67, .22)); }
.lp-visual .sc-phone.is-back { left: 18%; top: 0; height: 92%; z-index: 1; }
.lp-visual .sc-phone.is-front { right: 18%; top: 8%; height: 92%; z-index: 2; }
@media (max-width: 720px) {
  .lp-visual .sc-phones { aspect-ratio: 1 / 1; }
  .lp-visual .sc-render { position: static; width: 260px; height: auto; margin: 0 auto; transform: none; display: block; }
}