/* ==========================================================================
   iottag — platform pages stylesheet
   Page-specific components for /platform/… — load AFTER main.css:
     <link rel="stylesheet" href="…/assets/css/main.css">
     <link rel="stylesheet" href="…/assets/css/platform.css">
   Contents:
     1. Photo hero (baked photo + navy gradient, bullet lists)
     2. System icon grid ("The Visibility Challenge")
     3. Stage chevrons (Disconnected systems → Operational Understanding)
     4. Photo label cards ("Understanding complex operations")
     5. Layer band (dark photo band + white layer cards)
     6. Organisation levels timeline (photo circles + connector line)
     7. Flat CTA overlay variant
     8. Asset visibility (photo card height + bordered tracking strip)
     9. Fleet visibility (feature rows + white AI-insight stage cards)
     10. Workforce visibility (photo cards + timesheet tiles + quote bar)
     11. Operational analytics & benchmarking (tinted role-structure bands)
     12. Environmental intelligence (hero overlay, 40px h2, monitoring grid,
         technical-resources doc list)
     13. Connected Workforce redesign (workforce-visibility, Figma 10584:13913):
         question list, bordered 5-col label grid, safety card grid, tagline
         note bars, timesheet icon rows
   ========================================================================== */

/* 1. PHOTO HERO ---------------------------------------------------------- */
.hero--photo { min-height: 720px; }
.hero--photo .hero__bg { opacity: 1; }

.hero-lists { display: flex; gap: 20px; flex-wrap: wrap; }
.hero-lists ul { margin: 0; padding-left: 24px; width: 200px; }
.hero-lists ul:last-child { width: 240px; }
.hero-lists li { font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: #fff; }
.hero-lists li + li { margin-top: 3px; }

/* 2. SYSTEM ICON GRID ----------------------------------------------------- */
.sys-grid { display: flex; gap: 16px 80px; flex-wrap: wrap; }
.sys-grid__col { display: flex; flex-direction: column; gap: 16px; }
.sys-item { display: flex; align-items: center; gap: 12px; font-family: var(--f-body); font-size: 16px; color: var(--c-ink); }
.sys-item__ic {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px; background: var(--c-surface);
  display: flex; align-items: center; justify-content: center;
}
.sys-item__ic img { width: 20px; height: 20px; display: block; }

/* 3. STAGE CHEVRONS ------------------------------------------------------- */
.stages { display: flex; width: 100%; height: 160px; opacity: .8; }
.stage {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 20px 28px 16px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
}
.stage + .stage { margin-left: -16px; }
.stage--src  { background: #fdf6e5; }   /* web-orange lightest */
.stage--mid  { background: var(--c-blue-pale); }
.stage--dest { background: var(--c-blue-tint); }
.stage img { width: 40px; height: 40px; }
.stage span { font-family: var(--f-body); font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--c-ink); text-align: center; }

/* 4. PHOTO LABEL CARDS ----------------------------------------------------- */
.photo-cards { display: flex; gap: 8px; width: 100%; }
.photo-card {
  position: relative;
  flex: 1 1 0; min-width: 0; height: 320px;
  border-radius: var(--r-md); overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 24px;
}
.photo-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-card::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.photo-card__title {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--f-alt); font-weight: 700; font-size: 24px; line-height: 1.4;
  letter-spacing: -.01em; color: #fff;
}
@media (max-width: 1100px) { .photo-cards { flex-wrap: wrap; } .photo-card { min-width: 240px; height: 280px; } }

/* 5. LAYER BAND ------------------------------------------------------------ */
.layer-band {
  position: relative; overflow: hidden;
  padding: 81px 80px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.layer-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.layer-band__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(5,55,80,.5) 0%, rgba(11,125,182,.7) 51%, rgba(11,125,182,.8) 100%);
}
.layer-band > :not(.layer-band__bg):not(.layer-band__overlay) { position: relative; z-index: 2; }
.layer-band .h2, .layer-band .lead, .layer-band .body { color: #fff; }
.layer-cards { display: flex; gap: 20px; width: 100%; max-width: 1280px; }
.layer-card {
  flex: 1 1 0; min-width: 0; min-height: 180px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
  transition: background .15s ease, transform .2s ease, box-shadow .2s ease;
}
a.layer-card:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(6,3,9,.3); }
.layer-card img { width: 40px; height: 40px; }
.layer-card__title {
  margin: 0;
  font-family: var(--f-alt); font-weight: 500; font-size: 24px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
.layer-card p { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: var(--c-ink); }
@media (max-width: 960px) { .layer-cards { flex-direction: column; } }

/* 6. ORGANISATION LEVELS TIMELINE ------------------------------------------ */
.levels { display: flex; width: 100%; }
.level {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 8px 0;
  text-align: center;
}
.level__ring { display: flex; align-items: center; gap: 8px; width: 100%; }
.level__ring::before, .level__ring::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.level:first-child .level__ring::before,
.level:last-child .level__ring::after { background: transparent; }
.level__ring img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.level__title {
  margin: 0;
  font-family: var(--f-alt); font-weight: 500; font-size: 24px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
.level__text { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: var(--c-grey); max-width: 220px; }
@media (max-width: 960px) {
  .levels { flex-wrap: wrap; gap: 24px 0; }
  .level { flex-basis: 33%; min-width: 180px; }
  .level__ring::before, .level__ring::after { background: transparent; }
}

/* 7. FLAT CTA OVERLAY VARIANT ---------------------------------------------- */
.cta-band__overlay--flat { background: rgba(5,55,80,.6); }

/* 8. ASSET VISIBILITY (asset-visibility) ----------------------------------- */
/* asset type cards are shorter than the OI 320px photo cards */
.photo-cards--asset .photo-card { height: 280px; }

/* bordered 6-up tracking strip ("High-volume asset tracking") */
.track-strip {
  display: flex; width: 100%;
  background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.track-strip__cell {
  flex: 1 1 0; min-width: 0; min-height: 200px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 24px;
}
.track-strip__cell + .track-strip__cell { border-left: 1px solid var(--c-line); }
.track-strip__label {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
@media (max-width: 1100px) {
  .track-strip { flex-wrap: wrap; }
  .track-strip__cell { flex: 1 1 33%; min-width: 200px; min-height: 160px; border-top: 1px solid var(--c-line); }
  .track-strip__cell:nth-child(-n+3) { border-top: 0; }
}

/* --eq: uniform 48px icon boxes + fixed-height label rows so icons and labels
   sit on the same lines across all cells (ODT strip) */
.track-strip--eq .track-strip__cell img { width: 48px; height: 48px; }
.track-strip--eq .track-strip__label { display: flex; align-items: center; min-height: 68px; }

/* 9. FLEET VISIBILITY (fleet-visibility) ------------------------------------ */
/* Rebuilt 2026-07-21 from Figma 10584:14765 ("FLEET OPERATIONS", "Ready to
   Dev" canvas): photo hero (Connected Fleet), icon-list intro row with the
   blue-rule callout (.oab-note, §11), collision-avoidance .track-strip. */

/* hero overlay — Figma OVL pair reads as the brand gradient wash */
.hero__overlay--fv {
  position: absolute; inset: 0; z-index: 1;
  opacity: .8;
  background: var(--grad-hero);
  backdrop-filter: blur(4px);
}

/* intro list items are a step up from the 16px feature-row chips */
.sys-item--lg { font-weight: 600; font-size: 18px; }

/* this design's strip labels are Ubuntu 20, not the asset-page 24px;
   cells top-align so icons and first label lines share the same rows
   across all six cells regardless of how far the labels wrap */
.track-strip--fv .track-strip__label { font-size: 20px; }
.track-strip--fv .track-strip__cell { justify-content: flex-start; padding-top: 44px; }

/* alternating 740px copy + shadowed photo rows */
.feat { display: flex; gap: 40px; align-items: center; width: 100%; }
.feat--flip { flex-direction: row-reverse; }
.feat__copy { width: 740px; max-width: 100%; flex-shrink: 0; display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.feat__img {
  flex: 1 1 0; min-width: 300px; height: 420px;
  border-radius: var(--r-md); object-fit: cover;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}
/* device-frame renders (tablet bezel + shadow baked into the transparent PNG) —
   the CSS radius/shadow would draw a rectangle around the transparent margins */
.feat__img--device { border-radius: 0; box-shadow: none; object-fit: contain; }
@media (max-width: 1240px) {
  .feat, .feat--flip { flex-direction: column; align-items: flex-start; }
  .feat__copy { width: 100%; }
  .feat__img { width: 100%; min-width: 0; height: auto; max-height: 420px; }
}

/* white AI-insight stage cards (longer copy than the coloured chevrons);
   top-aligned (not centered) so the icons and first text lines sit on the
   same rows across all four cards regardless of copy length */
.stages--cards { height: auto; }
.stages--cards .stage { background: #fff; min-height: 200px; padding: 36px 36px 24px; justify-content: flex-start; gap: 16px; }
.stages--cards .stage img { flex-shrink: 0; }
.stages--cards .stage p { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: var(--c-ink); text-align: center; }
@media (max-width: 960px) {
  .stages--cards { flex-wrap: wrap; gap: 12px; }
  .stages--cards .stage { flex-basis: 100%; clip-path: none; border-radius: var(--r-md); }
  .stages--cards .stage + .stage { margin-left: 0; }
}

/* 10. WORKFORCE VISIBILITY (workforce-visibility) ---------------------------- */
/* Rebuilt 2026-07-21 from Figma 10584:13913 ("WORKFORCE OPERATIONS", "Ready to
   Dev" canvas) — "Connected Workforce". Page components live in §13; the
   timesheet tiles below stay for resources/video-library (.ts-tiles--vl). */

/* hero: the OVL wash is baked into wv-hero-bg.jpg (Figma render of 10584:13915)
   — the CSS grad-hero overlay reads far heavier than the design's OVL pair */
.hero--photo .hero__content { z-index: 10; }

/* timesheet photo tiles (staggered 2-col, 120px rows) */
.ts-tiles { display: flex; gap: 16px; flex: 1 1 0; min-width: 320px; }
.ts-tiles__col { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ts-tiles__col--offset { padding-top: 40px; }
.ts-tile {
  position: relative; height: 120px;
  border-radius: var(--r-md); overflow: hidden;
  display: flex; align-items: center;
  padding: 32px;
}
.ts-tile::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.ts-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ts-tile h3 {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 32px; line-height: 1.3;
  letter-spacing: -.01em; color: #fff;
}
@media (max-width: 640px) {
  .ts-tiles { flex-direction: column; }
  .ts-tiles__col--offset { padding-top: 0; }
}

/* sys-item chips on the pale section background → white tile behind the icon */
.sys-item__ic--card { background: #fff; }

/* 11. OPERATIONAL ANALYTICS & BENCHMARKING (operational-analytics-benchmarking)
   Rebuilt 2026-07-16 from Figma 12733:81766 ("5. OPERATIONAL ANALYTICS &
   BENCHMARKING", "Ready to Dev" canvas). Page loads main.css + platform.css
   (.sys-grid/.sys-item chips, .stages/.stage chevrons, .feat rows, .cta-band)
   + solutions.css (.odt2-hero, .odt2-title/.odt2-h2/.odt2-sub/.odt2-copy,
   .odt2-levels, .odt2-panel, .odt2-cta). */

/* bordered 6-col "They need to understand" grid (same 1px-collapse as .vis-grid) */
.oab-needs {
  /* 1.25px: survives the html zoom .8 (1.25 x .8 = 1 device px; plain 1px collapses) */
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25px;
  width: 100%;
  background: var(--c-line);
  border: 1.25px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.oab-need { min-height: 160px; padding: 24px 20px; background: #fff; display: flex; flex-direction: column; gap: 16px; }
.oab-need img { width: 40px; height: 40px; }
.oab-need p { margin: 0; font: 600 16px/1.2 var(--f-body); color: var(--c-ink); }
@media (max-width: 1100px) { .oab-needs { grid-template-columns: repeat(3, 1fr); } .oab-need { min-height: 140px; } }
@media (max-width: 640px)  { .oab-needs { grid-template-columns: repeat(2, 1fr); } }

/* pale flow band with a blue left rule: 5 labels split by thin white chevrons,
   then a bold blue takeaway row under a white hairline */
.oab-flow { width: 100%; background: var(--c-blue-pale); border-left: 2px solid var(--c-blue); }
.oab-flow__row { display: flex; gap: 24px; height: 80px; padding: 0 40px; }
.oab-flow__cell { flex: 1 1 0; min-width: 0; display: flex; align-items: center; font: 600 16px/1.2 var(--f-body); color: var(--c-ink); }
.oab-flow__sep { flex: 0 0 24px; align-self: stretch; }
.oab-flow__sep svg { width: 100%; height: 100%; display: block; }
.oab-flow__quote { margin: 0; border-top: 2px solid #fff; padding: 40px; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #1e729c; }
@media (max-width: 960px) {
  .oab-flow__row { flex-wrap: wrap; height: auto; gap: 8px 24px; padding: 16px 24px; }
  .oab-flow__sep { display: none; }
  .oab-flow__cell { flex: 1 1 40%; }
  .oab-flow__quote { padding: 24px; }
}

/* single-site vs portfolio duo card */
.oab-duo { display: flex; width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.oab-duo__card { flex: 1 1 0; min-width: 0; display: flex; gap: 20px; align-items: center; padding: 24px; }
.oab-duo__card--cream { background: #fdf6e5; }
.oab-duo__ic {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%; background: var(--c-blue-pale);
  display: flex; align-items: center; justify-content: center;
}
.oab-duo__card--cream .oab-duo__ic { background: #fff; }
.oab-duo__ic img { width: 24px; height: 24px; }
.oab-duo__card p { margin: 0; font: 600 18px/1.2 var(--f-body); color: var(--c-ink); }
@media (max-width: 760px) { .oab-duo { flex-direction: column; } }

/* benchmarking board reuses .pi-dash (solutions.css §9): pale band, photo
   circles, zigzag hairline dividers and the connector line through the kink.
   --inset: 16px gap only between photo and title; title and text touch */
.pi-dash--inset .pi-dash__col { gap: 0; }
.pi-dash--inset .pi-dash__col h3 { margin-top: 16px; }
.pi-dash--inset .pi-dash__col p { margin-right: 12px; }

/* operational-hierarchy card (Figma 12736:83454): white rounded card, three
   label + circle-timeline rows split by hairlines */
.oab-hier__ring { display: flex; align-items: center; gap: 8px; }
.oab-hier__ring img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.oab-hier__ring::after { content: ""; flex: 1; height: 1px; background: var(--c-blue-tint); }
.oab-tiers { width: 100%; background: #fff; border-radius: var(--r-md); overflow: hidden; }
.oab-tiers__row { display: flex; align-items: center; gap: 40px; padding: 40px; }
.oab-tiers__row + .oab-tiers__row { border-top: 1px solid var(--c-line); }
.oab-tiers__label { margin: 0; width: 240px; flex-shrink: 0; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #060309; }
.oab-tiers__cols { flex: 1 1 0; min-width: 0; display: flex; gap: 20px; }
.oab-tiers__cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.oab-tiers__cell:last-child { flex: 0 1 280px; }
.oab-tiers__cell:last-child .oab-hier__ring::after { background: transparent; }
.oab-tiers__cell p { margin: 0; font: 400 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #060309; }
@media (max-width: 960px) {
  .oab-tiers__row { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .oab-tiers__label { width: auto; }
  .oab-tiers__cols { flex-direction: column; width: 100%; }
  .oab-tiers__cell:last-child { flex: 1 1 0; }
  .oab-tiers .oab-hier__ring::after { background: transparent; }
}

/* rule-edged callout (blue left bar); pale on white sections, white on pale */
.oab-note { width: 100%; background: var(--c-blue-pale); border-left: 2px solid var(--c-blue); padding: 20px 40px; }
.oab-note--white { background: #fff; }
.oab-note p { margin: 0; font: 600 18px/1.2 var(--f-body); color: var(--c-ink); }
.oab-note--lg { padding: 40px; }
.oab-note--lg p { font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; text-align: center; }
@media (max-width: 640px) { .oab-note, .oab-note--lg { padding: 20px 24px; } }

/* "Supporting Owners…" white card: title + four circle columns split by
   zigzag hairlines running the full card height (same geometry as .pi-dash,
   solutions.css §9, but white card + pale lines) */
.oab-sup { width: 100%; background: #fff; border-radius: var(--r-md); padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.oab-sup__title { margin: 0; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.oab-sup__cols { display: flex; gap: 20px; }
.oab-sup__cell { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.oab-sup__role { margin: 0; font: 400 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.oab-sup__cell > p:last-child { margin: 0; font: 400 16px/1.2 var(--f-body); color: var(--c-grey); }
/* zigzag divider = two skewed hairlines meeting on the circle connector line
   (y:50 = circle radius in cell coords). The card top edge sits 88px above
   the cols row (padding 40 + one-line title 28 + card gap 20), so the upper
   leg reaches up through the title band; the lower leg runs down through the
   bottom padding. Same leg slopes as .pi-dash. */
.oab-sup__cell + .oab-sup__cell::before,
.oab-sup__cell + .oab-sup__cell::after {
  content: ""; position: absolute; left: -11px; width: 1px;
  background: var(--c-blue-tint);
}
.oab-sup__cell + .oab-sup__cell::before {
  top: -88px; height: 138px; transform: skewX(9.3deg); transform-origin: bottom left;
}
.oab-sup__cell + .oab-sup__cell::after {
  top: 50px; height: calc(100% - 10px); transform: skewX(-4.2deg); transform-origin: top left;
}
/* circle connector reaches the zigzag kink (kink at next col left -11px; gap 20) */
.oab-sup__cell .oab-hier__ring::after { margin-right: -9px; }
.oab-sup__cols > .oab-sup__cell:last-child .oab-hier__ring::after { background: transparent; }
@media (max-width: 960px) {
  .oab-sup { padding: 24px; }
  .oab-sup__cols { flex-wrap: wrap; }
  .oab-sup__cell { flex: 1 1 40%; min-width: 200px; }
  .oab-sup__cell + .oab-sup__cell::before,
  .oab-sup__cell + .oab-sup__cell::after { display: none; }
  .oab-sup__cell .oab-hier__ring::after { margin-right: 0; }
}

/* continuous-improvement intro: fixed 380px heading column + free-flow copy */
.oab-ci { display: flex; gap: 80px; align-items: center; width: 100%; }
.oab-ci__head { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.oab-ci__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 960px) { .oab-ci { flex-direction: column; gap: 24px; } .oab-ci__head { width: 100%; } }

/* ecosystem panel: .odt2-panel with a half-width photo + linked rows;
   row text follows the site greys (odt2 default is near-black) */
.oab-eco .odt2-panel__photo { width: 50%; }
.oab-eco .odt2-panel__row h3 { color: #4b5059; }
.oab-eco .odt2-panel__row p { color: var(--c-ink); }
.oab-eco a.odt2-panel__row:hover h3 { color: var(--c-blue); }
@media (max-width: 900px) { .oab-eco .odt2-panel__photo { width: 100%; } }

/* 12. ENVIRONMENTAL MONITORING (environmental-monitoring) -------------------- */
/* hero: translucent pale-blue mini cards, staggered 2-col, right of the copy.
   Scoped to platform pages — industries pages define their own .hero-cards
   (row-based) in industries.css and must not inherit these. */
[data-page="platform"] .hero-cards { display: flex; gap: 8px; width: 400px; flex-shrink: 0; align-items: center; }
[data-page="platform"] .hero-cards__col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
[data-page="platform"] .hero-card {
  height: 128px;
  background: rgba(233,243,249,.9);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 24px 20px;
}
[data-page="platform"] .hero-card img { width: 24px; height: 24px; }
[data-page="platform"] .hero-card span {
  font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
@media (max-width: 1240px) { [data-page="platform"] .hero-cards { display: none; } }

/* bordered 5-col visibility grid — 1px gaps over a line-coloured backing so the
   inner borders collapse cleanly at any column count; note cell spans 2 */
.vis-grid {
  /* 1.25px: survives the html zoom .8 (1.25 x .8 = 1 device px; plain 1px collapses) */
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25px;
  width: 100%;
  background: var(--c-line);
  border: 1.25px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.vis-cell {
  min-height: 180px; padding: 24px;
  background: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.vis-cell img { width: 48px; height: 48px; }
.vis-cell__label {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
.vis-cell--note { grid-column: span 2; flex-direction: row; align-items: center; gap: 8px; background: var(--c-blue-pale); }
@media (max-width: 1100px) {
  .vis-grid { grid-template-columns: repeat(2, 1fr); }
  .vis-cell { min-height: 140px; }
}

/* example chevrons carry sentence copy, not labels → regular weight */
.stages--example .stage span { font-weight: 400; }

/* 12. ENVIRONMENTAL INTELLIGENCE (environmental-intelligence) --------------- */
/* hero overlay — Figma OVL layer: 80% brand gradient + 4px backdrop blur */
.hero__overlay--em {
  position: absolute; inset: 0; z-index: 1;
  opacity: .8;
  background: var(--grad-hero);
  backdrop-filter: blur(4px);
}

/* this design's section headings are Ubuntu Medium 40 (like the 12405-wave
   solutions pages), not the site 52px .h2 — fleet- and workforce-visibility
   share them */
.em-h2, .fv-h2, .wv-h2 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 500; font-size: 40px; line-height: 1.2;
  letter-spacing: -.01em; color: #4b5059;
}

/* Environmental Visibility intro — 520px title column + free-flow copy */
.em-intro { display: flex; gap: 80px; align-items: center; width: 100%; }
.em-intro__title { width: 520px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }

/* bordered 6-col monitoring grid (same line-collapse trick as .vis-grid).
   1.25px hairlines: the site renders at html zoom .8, so 1px would rasterize
   to 0.8 device px and some dividers vanish at default zoom — 1.25 x .8 = 1. */
.em-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25px;
  width: 100%;
  background: var(--c-line);
  border: 1.25px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.em-cell {
  min-height: 220px; padding: 24px 20px;
  background: #fff;
  display: flex; flex-direction: column; gap: 16px;
}
.em-cell img { width: 40px; height: 40px; }
.em-cell ul { margin: 0; padding: 0; list-style: none; }
.em-cell li { font-family: var(--f-body); font-weight: 600; font-size: 16px; line-height: 1.2; color: #5c616b; }
.em-cell li::before { content: "- "; }

/* Download Technical Resources — two columns of underlined doc links */
.em-docs { display: flex; gap: 40px; width: 100%; }
.em-docs__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.em-doc {
  display: flex; gap: 8px; align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
}
.em-doc img { width: 40px; height: 40px; flex-shrink: 0; }
.em-doc span {
  font-family: var(--f-alt); font-weight: 700; font-size: 24px; line-height: 1.3;
  letter-spacing: -.01em; color: #4b5059;
}
.em-doc:hover span { color: var(--c-blue); }

@media (max-width: 1100px) {
  .em-grid { grid-template-columns: repeat(3, 1fr); }
  .em-cell { min-height: 160px; }
  .em-intro { flex-direction: column; align-items: flex-start; gap: 24px; }
  .em-intro__title { width: 100%; }
  .em-docs { flex-direction: column; gap: 0; }
}
@media (max-width: 820px) {
  .em-h2, .fv-h2, .wv-h2 { font-size: 32px; }
  .em-doc span { font-size: 20px; }
  .em-grid { grid-template-columns: 1fr 1fr; }
}

/* 13. CONNECTED WORKFORCE (workforce-visibility, Figma 10584:13913) ---------- */
/* "answers the key questions" list — bare 20px icons, 18px semibold copy.
   Column-flow grid so the rows of the two columns line up with each other */
.wv-qs {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto);
  grid-auto-flow: column; gap: 20px 40px;
  width: 100%;
}
/* top-aligned so the ? icons stay in a straight column when copy wraps to 2 lines */
.wv-q { display: flex; align-items: flex-start; gap: 12px; font: 600 18px/1.2 var(--f-body); color: var(--c-ink); }
.wv-q img { flex-shrink: 0; margin-top: 1px; }

/* intro row: copy + question list left, tracking-UI still right, bottom-aligned */
.wv-mtt { display: flex; gap: 40px; align-items: flex-end; width: 100%; }
.wv-mtt__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.wv-mtt__img { width: 440px; max-width: 100%; height: auto; flex-shrink: 0; }

/* unified-platform chevrons: white cells on the pale band */
.stages--wv .stage { background: #fff; }

/* workforce-management header: fixed 440px title column + free-flow copy */
.wv-intro { display: flex; gap: 80px; align-items: center; width: 100%; }
.wv-intro__head { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.wv-intro__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* bordered 5-col label grid (same 1.25px line-collapse as .vis-grid/.em-grid) */
.wv-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25px;
  width: 100%;
  background: var(--c-line);
  border: 1.25px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.wv-cell {
  /* top-aligned so icons and labels line up across a row (labels wrap 1–2 lines) */
  min-height: 180px; padding: 32px 24px 24px;
  background: #fff;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 16px;
}
.wv-cell h3 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}

/* safety card grid: 4×2 white cards split by hairline gaps on the pale band */
.wv-safe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25px; width: 100%; border-radius: var(--r-md); overflow: hidden; }
.wv-safe__card {
  /* top-aligned so icons, titles and bullet lists line up across a row */
  min-height: 200px; padding: 24px 28px 20px;
  background: #fff;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 8px;
}
.wv-safe__card h3 {
  margin: 0;
  /* reserve two title lines so the bullet lists start on the same baseline */
  min-height: 56px;
  font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
.wv-safe__card ul { margin: 0; padding-left: 24px; }
.wv-safe__card li { font: 400 16px/1.2 var(--f-body); color: var(--c-ink); }
.wv-safe__cols { display: flex; }
.wv-safe__cols ul { flex: 1 1 0; min-width: 0; }

/* timesheets row: chip list left, briefing photo right */
.wv-ts { display: flex; gap: 40px; align-items: center; width: 100%; }
.wv-ts__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.wv-ts__img { width: 520px; max-width: 100%; height: auto; flex-shrink: 0; border-radius: var(--r-md); }

@media (max-width: 1100px) {
  .wv-mtt, .wv-ts { flex-direction: column; align-items: flex-start; }
  .wv-mtt__img, .wv-ts__img { width: 100%; }
  .wv-intro { flex-direction: column; gap: 24px; }
  .wv-intro__head { width: 100%; }
  .wv-grid { grid-template-columns: repeat(3, 1fr); }
  .wv-cell { min-height: 140px; }
  .wv-safe { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .wv-qs { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .wv-grid { grid-template-columns: 1fr 1fr; }
  .wv-safe { grid-template-columns: 1fr; }
}