/* ==========================================================================
   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: 20px; 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. */

/* anchor the crop low so the truck + workers stay visible on wide viewports */
.hero__bg--fv { object-position: 50% 80%; }

/* 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; }
/* dashboard rows: a 16:9 screenshot kept at its natural aspect only reaches
   ~260px beside the 740px copy, so trade copy width for image width */
.feat--dash .feat__copy { width: 620px; }
@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: #4b5059; }
.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: #5c616b; }
@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: left; }
@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: 12px;
}
/* each cell is now titled: 32px icon beside a semibold label, list underneath */
.em-cell__hd { display: flex; gap: 8px; align-items: center; }
.em-cell img { width: 32px; height: 32px; flex-shrink: 0; }
.em-cell__hd span {
  font-family: var(--f-body); font-weight: 600; font-size: 16px; line-height: 1.2; color: #4b5059;
}
.em-cell ul { margin: 0; padding: 0; list-style: none; }
.em-cell li { font-family: var(--f-body); font-weight: 400; font-size: 16px; line-height: 1.2; color: var(--c-ink); }
.em-cell li::before { content: "- "; }

/* capability accordion panes (Figma 13369:11252 / 13369:11320) — the shared
   .faq component beside a 500px photo that stretches to the accordion's
   height; the rounded clip trims both into one card */
.em-acc {
  position: relative; width: 100%; padding-right: 500px;
  border-radius: var(--r-md); overflow: hidden;
}
.em-acc__faq { border-radius: 0; }
/* absolutely filled so the photo always matches the accordion's height,
   growing and shrinking with the open panel */
.em-acc__img {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 500px; height: 100%; object-fit: cover;
}
/* the accordion titles are page headings here, not plain questions */
.faq__hd { margin: 0; }

/* Regulatory Compliance Automation (Figma 12696:15863) — the one row in the
   pale band that sits on its own WHITE full-viewport band, with the laptop
   render bleeding off the left edge. The exported asset is already clipped on
   its left side, so the cut only reads as intentional when it lands exactly on
   the viewport edge — hence the 100vw break-out rather than a padded row.
   Widths divide by the html zoom (.8, main.css): under zoom 100vw paints at
   only 80% of the screen (same trick as .fri-dark in solutions.css). */
.feat--bleed {
  width: calc(100vw / 0.8);
  margin-left: calc(50% - 50vw / 0.8);
  background: #fff;
  gap: 80px;
  padding: 20px 0 0;
  /* keep the copy's right edge on the page content column on wide screens */
  padding-right: max(var(--pad-x), calc(50vw / 0.8 - var(--maxw) / 2));
  /* row-reverse: pins the copy right and the render hard left, free space between */
  justify-content: space-between;
}
.feat--bleed .feat__copy { width: auto; flex: 1 1 0; min-width: 0; max-width: 800px; }
.feat--bleed .feat__img {
  \* 913x904 source: the box keeps that aspect so nothing crops, and is sized
     to close most of the space-between gap toward the copy on wide screens */
  flex: 0 0 760px; width: 760px; height: 752px;
  border-radius: 0; box-shadow: none; object-fit: cover;
}
/* stacked (matches the .feat column breakpoint) — the band keeps its white
   full-bleed, the render keeps hugging the left edge so the clip stays hidden */
@media (max-width: 1240px) {
  .feat--bleed { gap: 32px; padding: 20px var(--pad-x) 48px 0; }
  .feat--bleed .feat__copy { width: 100%; max-width: none; padding-left: var(--pad-x); }
  .feat--bleed .feat__img {
    flex: 0 0 auto; width: min(760px, 92%); height: auto; max-height: none;
  }
}

/* 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;
}
a.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; }
  .em-acc { padding-right: 0; }
  .em-acc__img { position: static; width: 100%; height: 320px; }
}
@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); }

/* 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; }
}

/* 14. DPM EXPOSURE INTELLIGENCE (dpm-exposure-intelligence, Figma 13935:22477) */
/* Built 2026-08-28 from "Ready to Dev" — hero reuses .hero--photo +
   .hero__overlay--em; sections reuse .em-h2 / .kicker / .cta-band. */

/* section header: title (+ bold sub) left, free-flow copy right */
.dpm-title { display: flex; gap: 80px; align-items: flex-end; width: 100%; }
.dpm-title__t { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.dpm-title__sub { margin: 0; font: 600 18px/1.2 var(--f-body); color: var(--c-ink); }
.dpm-title__d { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
/* --half: right copy column starts exactly at the table's 50% column line,
   its text indented 16px like the table cells, so both line up vertically */
.dpm-title--half { gap: 0; align-items: center; }
.dpm-title--half .dpm-title__t { flex: 0 0 50%; }
.dpm-title--half .dpm-title__d { padding-left: 17px; }
@media (max-width: 1100px) {
  .dpm-title { flex-direction: column; align-items: flex-start; gap: 16px; }
  .dpm-title--half .dpm-title__t { flex: 0 0 auto; }
  .dpm-title--half .dpm-title__d { padding-left: 0; }
}

/* small label above tables / diagrams */
.dpm-label { margin: 0; font: 600 18px/1.2 var(--f-body); color: #4b5059; }
.dpm-label--reg { font-weight: 400; }

/* 5-col factor grid feeding the hub card (same 1.25px line-collapse as .em-grid) */
.dpm-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;
}
.dpm-cell {
  min-height: 214px; padding: 24px;
  background: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.dpm-cell img { width: 32px; height: 32px; }
.dpm-cell h3 { margin: 0; font: 700 18px/1.2 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.dpm-cell ul { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
/* one line per item so every cell's icon + title sit on the same rows */
.dpm-cell li { font: 400 16px/1.2 var(--f-body); color: var(--c-ink); white-space: nowrap; }
@media (max-width: 1100px) {
  .dpm-grid { grid-template-columns: repeat(2, 1fr); }
  .dpm-cell { min-height: 160px; }
  .dpm-cell li { white-space: normal; }
}

/* elbow connectors from the five cells down to the hub card */
.dpm-hub { display: flex; flex-direction: column; align-items: center; width: 100%; }
.dpm-hub__links { display: block; width: 100%; height: 97px; }
.dpm-hub__links polyline { fill: none; stroke: #a9d4ed; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dpm-hub__card {
  width: 600px; max-width: 100%;
  background: var(--c-blue-pale);
  border: 1px solid var(--c-blue); border-radius: var(--r-md);
  padding: 41px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.dpm-hub__card img { width: 40px; height: 40px; }
.dpm-hub__card h3 { margin: 0; font: 700 24px/1.3 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.dpm-hub__card p { margin: 0; font: 400 18px/1.2 var(--f-body); color: var(--c-ink); text-align: center; }
@media (max-width: 1100px) { .dpm-hub__links { display: none; } .dpm-hub { padding-top: 24px; } }

/* hotspot-diagnosis steps: white card, 5 columns split by thin chevrons;
   each column = icon row with a trailing hairline, then title + question */
.dpm-steps { display: flex; width: 100%; background: #fff; border-radius: var(--r-md); overflow: hidden; }
.dpm-step { flex: 1 1 0; min-width: 0; padding: 40px 20px 40px 24px; display: flex; flex-direction: column; gap: 16px; }
.dpm-step__hd { display: flex; align-items: center; gap: 8px; height: 80px; }
.dpm-step__hd img { width: 32px; height: 32px; flex-shrink: 0; }
/* hairline runs through the column's 20px padding and 23px into the separator,
   so it terminates exactly on the chevron's kink */
.dpm-step__hd::after { content: ""; flex: 1; height: 1px; margin-right: -43px; background: var(--c-blue-pale); }
.dpm-step:last-child .dpm-step__hd::after { margin-right: 0; }
.dpm-step h3 { margin: 0; font: 700 18px/1.2 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.dpm-step p { margin: 0; font: 400 16px/1.2 var(--f-body); color: var(--c-grey); }
/* separator = fixed 80px top leg + flexible bottom leg, so the kink always
   sits at the icon-row hairline (40px padding + half the 80px icon row) */
.dpm-sep { flex: 0 0 24px; align-self: stretch; display: flex; flex-direction: column; }
.dpm-sep svg { width: 100%; display: block; }
.dpm-sep__top { flex: 0 0 80px; }
.dpm-sep__bot { flex: 1 1 0; min-height: 0; }
@media (max-width: 1100px) {
  .dpm-steps { flex-direction: column; }
  .dpm-sep { display: none; }
  .dpm-step { padding: 24px; }
  .dpm-step__hd { height: auto; }
  .dpm-step__hd::after { margin-right: 0; }
}

/* live-map figure with overlaid zone tooltips */
.dpm-map { position: relative; width: 100%; display: flex; justify-content: center; padding-block: 12px; }
.dpm-map > img { width: 78%; height: auto; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.dpm-tip {
  position: absolute; z-index: 1;
  background: #fff; border: 1.5px solid var(--c-line); border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 24px 42px rgba(0,0,0,.14);
}
.dpm-tip--medium { left: 1%; top: 30%; width: 240px; }
.dpm-tip--over { left: 3.5%; top: 63%; width: 280px; }
.dpm-tip h3 { margin: 0; font: 700 16px/1.2 var(--f-alt); color: #4b5059; }
.dpm-tip ul { margin: 0; padding-left: 22px; }
.dpm-tip li { font: 400 16px/1.2 var(--f-body); color: var(--c-ink); }
.dpm-tip__tags { display: flex; gap: 5px; flex-wrap: wrap; }
.dpm-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 5px 10px; border-radius: 99px;
  font: 700 12px/1.2 var(--f-alt); color: #fff;
}
.dpm-pill img { width: 16px; height: 16px; }
.dpm-pill--green { background: #34c759; padding-left: 3px; }
.dpm-pill--orange { background: #e36821; }
@media (max-width: 900px) {
  .dpm-map { flex-direction: column; gap: 16px; }
  .dpm-map > img { width: 100%; }
  .dpm-tip { position: static; width: auto; }
}

/* bordered data tables (TARP states, causes/controls, affected personnel) */
.dpm-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--c-blue-tint); border-radius: var(--r-sm); }
.dpm-table th, .dpm-table td { height: 48px; padding: 8px 16px; border: 1px solid var(--c-blue-tint); text-align: left; vertical-align: middle; }
.dpm-table thead th { background: #1e729c; font: 700 16px/1.2 var(--f-body); color: #fff; }
.dpm-table tbody th[scope="row"] { font: 700 16px/1.2 var(--f-body); color: #4b5059; }
.dpm-table td { font: 400 16px/1.2 var(--f-body); color: var(--c-ink); }
.dpm-table tr.is-warn th[scope="row"], .dpm-table tr.is-warn td, .dpm-table .is-warn { background: #fdf6e5; }
@media (max-width: 900px) {
  .dpm-table-scroll { width: 100%; overflow-x: auto; }
  .dpm-table-scroll .dpm-table { min-width: 720px; }
}

/* connected-process flow: label row split by chevrons + takeaway note row */
.dpm-flow { width: 100%; border-left: 2px solid var(--c-blue); }
.dpm-flow__row { display: flex; align-items: stretch; gap: 24px; min-height: 80px; padding: 0 40px; background: #fff; }
.dpm-flow__cell {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  font: 400 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; text-align: center;
}
.dpm-flow__sep { flex: 0 0 24px; align-self: stretch; }
.dpm-flow__sep svg { width: 100%; height: 100%; display: block; }
.dpm-flow__note { margin: 0; padding: 40px; background: #fff; border-top: 1.25px solid var(--c-blue-tint); font: 400 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; text-align: center; white-space: pre-line; }
.dpm-flow__note strong { font-weight: 700; }
/* on-white variant: bordered rounded card, pale takeaway band */
.dpm-flow--card { border: 1px solid var(--c-blue-tint); border-left: 2px solid var(--c-blue); border-radius: 0 var(--r-md) var(--r-md) 0; overflow: hidden; }
.dpm-flow--card .dpm-flow__note { background: var(--c-blue-pale); }
@media (max-width: 900px) {
  .dpm-flow__row { flex-wrap: wrap; gap: 8px 24px; padding: 16px 24px; }
  .dpm-flow__sep { display: none; }
  .dpm-flow__cell { flex: 1 1 40%; }
  .dpm-flow__note { padding: 24px; }
}

/* "Close the loop" (Figma 13947:26685): the hotspot step row wrapped in a bordered card with a pale takeaway band */
.dpm-steps-card { width: 100%; border: 1px solid var(--c-blue-tint); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.dpm-steps-card .dpm-steps { border-radius: 0; }
.dpm-steps-card__note { margin: 0; background: var(--c-blue-pale); padding: 24px; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: var(--c-blue); text-align: center; }