/* ==========================================================================
   iottag — solutions pages stylesheet
   Page-specific components for /solutions/… — load AFTER main.css:
     <link rel="stylesheet" href="…/assets/css/main.css">
     <link rel="stylesheet" href="…/assets/css/solutions.css">
   Contents:
     1. Photo hero (full-strength photo + Figma diagonal navy overlay)
     2. Visibility tabs ("One Platform. Complete Visibility.")
     3. Key Insights 2x2 grid
     4. Icon chip row (Atlas asset types)
     5. Fatal risk hazard cards (photo tiles, staggered 2-col)
     6. Detect→Prevent flow (bordered card strip + banner row)
   ========================================================================== */

/* 1. PHOTO HERO ---------------------------------------------------------- */
.hero--photo { min-height: 720px; }
/* let long single-line headings wrap on small screens instead of overflowing */
@media (max-width: 640px) { .hero--photo .h1 { white-space: normal; } }
.hero--photo .hero__bg { opacity: 1; }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(122deg, rgba(12,71,125,.8) 0%, rgba(47,79,91,.32) 49%, rgba(7,52,89,.08) 100%);
}

/* 2. VISIBILITY TABS ----------------------------------------------------- */
.vtabs { border-radius: var(--r-md); box-shadow: inset 0 0 0 1px rgba(6,3,9,.15); overflow: hidden; background: #fff; }
.vtabs__bar { display: flex; flex-wrap: wrap; background: var(--c-surface); border-bottom: 1px solid #e5e7eb; }
.vtabs__tab {
  flex: 1 1 0;
  min-width: 150px;
  min-height: 100px;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface);
  border: 0;
  border-right: 1px solid #e5e7eb;
  font-family: var(--f-body); font-weight: 500; font-size: 18px; line-height: 1.2;
  color: var(--c-ink); text-align: center;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
  transition: background .15s ease, box-shadow .15s ease;
}
.vtabs__tab:last-child { border-right: 0; }
.vtabs__tab:hover { background: #fff; }
.vtabs__tab.is-active { background: #fff; box-shadow: inset 0 -2px 0 var(--c-blue); }
.vtabs__panel { display: none; padding: 48px; gap: 40px; align-items: center; background: #fff; }
.vtabs__panel.is-active { display: flex; }
.vtabs__copy { width: 680px; max-width: 100%; flex-shrink: 0; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.vtabs__media { flex: 1; min-width: 280px; width: 100%; height: 400px; border-radius: 10px; object-fit: cover; }
@media (max-width: 1100px) {
  .vtabs__panel { flex-wrap: wrap; padding: 32px; }
  .vtabs__copy { width: 100%; }
  .vtabs__media { height: auto; }
}

/* 3. KEY INSIGHTS GRID --------------------------------------------------- */
.insight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 40px; width: 100%; }
.insight-grid .cap-list__item { font-size: 18px; }
@media (max-width: 640px) { .insight-grid { grid-template-columns: 1fr; } }

/* 4b. PRODUCTION CHAIN CARDS (production-intelligence) -------------------- */
.pchain { display: flex; gap: 8px; width: 100%; }
.pchain__card {
  position: relative;
  flex: 1 1 0; min-width: 160px; height: 240px;
  border-radius: var(--r-md); overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 24px;
}
.pchain__card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pchain__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) { .pchain { flex-wrap: wrap; } .pchain__card { min-width: 240px; } }

/* 4c. FRAGMENTATION BAND (production-intelligence) ------------------------ */
.frag-band {
  position: relative; overflow: hidden;
  padding: 80px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.frag-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.frag-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%);
}
.frag-band > .stack, .frag-band > .frag-cards, .frag-band > .body, .frag-band > .btn { position: relative; z-index: 2; }
.frag-band .h2, .frag-band .lead, .frag-band .body { color: #fff; }
.frag-cards { display: flex; gap: 40px; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.frag-card {
  background: #fff; border-radius: var(--r-md);
  padding: 24px; width: 480px; max-width: 100%;
  display: flex; flex-direction: column; gap: 20px;
}
.frag-card__title { margin: 0; font-family: var(--f-alt); font-weight: 600; font-size: 20px; line-height: 1.4; color: #4b5059; }
.frag-item { display: flex; align-items: center; gap: 8px; font-family: var(--f-body); font-size: 18px; color: var(--c-ink); }
.frag-item__ic {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--r-md); background: var(--ic-bg, var(--c-blue-pale));
  display: flex; align-items: center; justify-content: center;
}
.frag-item__ic--warn { --ic-bg: #fdf6e5; }
.frag-item__ic img { width: 24px; height: 24px; display: block; }

/* 4. ICON CHIP ROW (Atlas asset types) ------------------------------------ */
.chip-item { display: flex; align-items: center; gap: 12px; width: 200px; font-family: var(--f-body); font-size: 16px; color: var(--c-ink); }
.chip-item .chip-ic {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px; background: var(--c-surface);
  display: flex; align-items: center; justify-content: center;
}
.chip-item .icon { font-size: 20px; color: #1E729C; }

/* 5. FATAL RISK HAZARD CARDS ---------------------------------------------- */
.risk-grid { display: flex; gap: 16px; flex: 1 1 0; min-width: 320px; }
.risk-grid__col { flex: 1; display: flex; flex-direction: column; gap: 16px; justify-content: center; min-width: 0; }
.risk-grid__col--offset { padding-top: 40px; }
.risk-card { position: relative; height: 120px; border-radius: var(--r-md); overflow: hidden; display: flex; align-items: center; padding: 32px 24px; }
.risk-card::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.risk-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.risk-card__label {
  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) {
  .risk-grid { flex-direction: column; }
  .risk-grid__col--offset { padding-top: 0; }
}

/* plain 18px disc list (Fatal Risk Dashboard bullets) */
.disc-list { margin: 0; padding-left: 27px; display: flex; flex-direction: column; gap: 4px; }
.disc-list li { font-family: var(--f-body); font-size: 18px; line-height: 1.5; color: #5c616b; }

/* 6. DETECT -> PREVENT FLOW ------------------------------------------------ */
.flow { width: 100%; border: 1px solid #d9d9da; border-radius: var(--r-md); overflow: hidden; background: #fff; }
.flow__row { display: flex; min-height: 240px; }
.flow__row--banner { border-top: 1px solid #d9d9da; }
.flow__card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 24px; }
.flow__card > .icon { font-size: 48px; color: #1e729c; }
.flow__title {
  margin: 16px 0 8px; font-family: var(--f-alt); font-weight: 400; font-size: 24px;
  line-height: 1.4; letter-spacing: -.01em; color: #4b5059;
}
.flow__text { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.4; color: var(--c-ink); }
.flow__sep { flex: 0 0 24px; display: flex; flex-direction: column; align-items: center; }
.flow__sep::before, .flow__sep::after { content: ""; width: 1px; flex: 1; background: #d9d9da; }
.flow__sep .icon { font-size: 24px; color: #d9d9da; }
.flow__media { flex: 1 1 0; min-width: 0; height: auto; object-fit: cover; }
.flow__banner { flex: 1 1 0; min-width: 0; position: relative; background: var(--c-blue); display: flex; flex-direction: column; justify-content: center; padding: 24px; }
.flow__banner > .icon { font-size: 48px; color: #fff; }
.flow__banner .flow__title, .flow__banner .flow__text { color: #fff; }
.flow__banner .flow__chev { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #fff; }
@media (max-width: 960px) {
  .flow__row { flex-direction: column; }
  .flow__sep { flex-basis: 24px; flex-direction: row; width: 100%; }
  .flow__sep::before, .flow__sep::after { width: auto; height: 1px; flex: 1; align-self: center; }
  .flow__sep .icon { transform: rotate(90deg); }
  .flow__media { width: 100%; max-height: 300px; }
  .flow__banner .flow__chev { display: none; }
}

/* 7. OPERATIONAL DIGITAL TWIN (odt-/odt2-) ---------------------------------
   Rebuilt 2026-07-16 from Figma 10504:12006 ("Operational Digital Twin •
   Desktop", "Ready to Dev" canvas). Page loads main.css + platform.css
   (.stages/.stage chevrons, .cta-band) + solutions.css.
   Kept from the old build because other pages use them:
   .stage--white (production-intelligence) · .odt-videocard (fatal-risk). */

/* chevron-stage variants (shared) */
.stage--white { background: #fff; }
.stage .stage__reg { font-weight: 400; }

/* full-bleed cream band (Figma web-orange-lightest) */
.section.odt-cream { background: #fdf6e5; box-shadow: 0 0 0 100vmax #fdf6e5; clip-path: inset(0 -100vmax); }

/* video card (kept for fatal-risk-intelligence) */
.odt-videocard { position: relative; width: 660px; max-width: 100%; height: 400px; border-radius: var(--r-lg); overflow: hidden; flex-shrink: 0; }
.odt-videocard > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.odt-videocard__play {
  position: absolute; inset: 0; margin: auto;
  width: 80px; height: 80px; border: 0; border-radius: 50%;
  background: var(--c-blue-light);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 32px 32px rgba(0,0,0,.14);
}
.odt-videocard__play .icon { font-size: 40px; color: #fff; }
@media (max-width: 1100px) { .odt-videocard { width: 100%; height: auto; aspect-ratio: 16 / 9; } }

/* --- odt2: hero copy (Ubuntu Bold headline, bold 20 sub, regular 16/1.2 body) */
.odt2-hero .h1 { font-weight: 700; }
.odt2-hero__sub { margin: 0; font: 700 20px/1.5 var(--f-body); color: #fff; }
.odt2-hero .hero__text { font-weight: 400; line-height: 1.2; max-width: 775px; }

/* --- odt2: split section-title row (H2 + sub left, copy right) */
.odt2-title { display: flex; gap: 60px; width: 100%; }
.odt2-title--80 { gap: 80px; }
/* content box is ~1200px vs Figma's 1280 — the heading column gets the extra
   share so the designed 2-line H2 breaks survive (Figma cols are 610/610) */
.odt2-title__head { flex: 1.25 1 0; min-width: 300px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
/* wide-heading variant (Figma 715px column: "Turning Operational Complexity…") */
.odt2-title__head--lg { flex: 0 1 715px; }
.odt2-title__body { flex: 1 1 0; min-width: 300px; display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.odt2-h2 { margin: 0; font-family: var(--f-alt); font-weight: 500; font-size: 40px; line-height: 1.2; letter-spacing: -.01em; color: #4b5059; }
.odt2-sub { margin: 0; font: 600 18px/1.2 var(--f-body); color: var(--c-ink); }
.odt2-copy { margin: 0; font: 400 16px/1.2 var(--f-body); color: var(--c-ink); }
.odt2-copy--md { font-size: 18px; }
@media (max-width: 960px) {
  .odt2-title { flex-direction: column; gap: 24px; }
  /* fixed flex-basis would become a HEIGHT once the row stacks */
  .odt2-title__head, .odt2-title__head--lg { flex: 0 0 auto; }
}

/* --- odt2: "Every System Sees Something" flow diagram */
.odt2-flow { display: flex; align-items: center; width: 100%; }
.odt2-flow__link { flex: 1 1 0; min-width: 24px; align-self: stretch; }
.odt2-flow__link svg { width: 100%; height: 100%; display: block; }
.odt2-sys { width: 420px; flex-shrink: 0; background: #fff; border: 1px solid #ffa36e; border-radius: 16px; overflow: hidden; }
.odt2-sys__head { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 12px; background: #fdf6e5; }
.odt2-sys__head img { width: 20px; height: 20px; }
.odt2-sys__head span { font: 600 12px/1.2 var(--f-body); color: #060309; }
.odt2-sys__body { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 16px; }
.odt2-sys__cell { padding: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.odt2-sys__t { margin: 0; display: flex; gap: 8px; align-items: center; font: 600 12px/1.2 var(--f-body); color: #060309; }
.odt2-sys__t img { width: 20px; height: 20px; }
.odt2-sys__cell ul { margin: 0; padding: 0 0 0 28px; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.odt2-sys__cell li { font: 400 10px/1.2 var(--f-body); color: var(--c-grey); }
.odt2-atlas-card { width: 288px; flex-shrink: 0; background: #fff; border: 4px solid var(--c-blue-pale); border-radius: 24px; box-shadow: 0 4px 8px -2px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.06); padding: 20px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.odt2-atlas-card > img { width: 36px; height: 36px; }
.odt2-atlas-card__name { margin: 0; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: var(--c-blue); }
.odt2-atlas-card__div { display: flex; align-items: center; align-self: stretch; }
.odt2-atlas-card__div::before, .odt2-atlas-card__div::after { content: ""; flex: 1; height: 1px; background: var(--c-blue-pale); }
.odt2-atlas-card__div img { width: 11px; height: 6px; margin: 0 10px; }
.odt2-atlas-card p { margin: 0; font: 600 12px/1.2 var(--f-body); color: var(--c-grey); }
.odt2-oi { width: 400px; height: 200px; flex-shrink: 0; background: #fff; border: 1px solid var(--c-blue-light); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.odt2-oi > img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; }
.odt2-oi__row { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 16px; }
.odt2-oi__row img { width: 24px; height: 24px; }
.odt2-oi__row span { font: 600 14px/1.2 var(--f-body); color: #060309; }
@media (max-width: 1280px) {
  .odt2-flow { flex-direction: column; gap: 24px; }
  .odt2-flow__link { display: none; }
  .odt2-sys, .odt2-oi { width: 100%; max-width: 480px; margin-inline: auto; }
  .odt2-atlas-card { margin-inline: auto; }
}
@media (max-width: 480px) { .odt2-sys__body { grid-template-columns: repeat(2, 1fr); } }

/* --- odt2: photo + stacked-rows panel (platform accordion / outcomes list) */
.odt2-panel { display: flex; width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.odt2-panel__photo { position: relative; width: 400px; flex-shrink: 0; background: #fdf6e5; border-right: 1px solid rgba(6,3,9,.15); }
.odt2-panel__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.odt2-panel__rows { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.odt2-panel__row { min-height: 88px; padding: 12px 40px; display: flex; flex-direction: column; justify-content: center; }
.odt2-panel__row + .odt2-panel__row { border-top: 1px solid rgba(6,3,9,.15); }
.odt2-panel__row h3 { margin: 0; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.odt2-panel__row p { margin: 0; font: 400 16px/1.2 var(--f-body); color: var(--c-ink); }
@media (max-width: 900px) {
  .odt2-panel { flex-direction: column; }
  .odt2-panel__photo { width: 100%; height: 260px; border-right: 0; border-bottom: 1px solid rgba(6,3,9,.15); }
  .odt2-panel__row { padding: 12px 24px; }
}

/* --- odt2: pale board with white chevron separators (timeline / workflows) */
.odt2-tl { display: flex; width: 100%; background: var(--c-blue-pale); border-radius: var(--r-md); overflow: hidden; }
.odt2-tl--tall { min-height: 360px; }
.odt2-tl--mid { min-height: 240px; }
.odt2-tl__sep { flex: 0 0 24px; align-self: stretch; }
.odt2-tl__sep svg { width: 100%; height: 100%; display: block; }
.odt2-tl__list { margin: 0; padding: 40px; list-style: none; display: flex; flex-direction: column; justify-content: center; }
.odt2-tl__list li { display: flex; gap: 8px; align-items: center; padding: 8px 0; font: 700 16px/1.5 var(--f-alt); color: #4b5059; white-space: nowrap; }
.odt2-tl__list img { width: 24px; height: 24px; flex-shrink: 0; }
.odt2-tl__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; padding: 40px 16px; text-align: center; }
.odt2-tl__col img { width: 40px; height: 40px; }
.odt2-tl__label { margin: 0; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
/* workflows: two item lists side by side filling the 800px left block */
.odt2-wf { flex: 0 0 auto; width: 62.5%; padding: 40px; display: flex; gap: 80px; align-items: center; justify-content: center; }
.odt2-wf .odt2-tl__list { padding: 0; }
@media (max-width: 960px) {
  .odt2-tl { flex-direction: column; }
  .odt2-tl__sep { display: none; }
  .odt2-tl__col { padding: 24px 16px; }
  .odt2-wf { width: 100%; flex-wrap: wrap; gap: 8px 40px; padding: 24px; }
  .odt2-tl__list { padding: 24px; }
  .odt2-tl__list li { white-space: normal; }
}

/* --- odt2: rule-edged callouts */
.odt2-insight { width: 100%; background: #fff; border-left: 2px solid var(--c-orange); padding: 40px 40px 40px 42px; display: flex; gap: 40px; align-items: center; }
.odt2-insight h3 { margin: 0; font: 700 24px/1.3 var(--f-alt); letter-spacing: -.01em; color: #4b5059; white-space: nowrap; }
@media (max-width: 760px) { .odt2-insight h3 { white-space: normal; } }
.odt2-insight p { margin: 0; font: 400 18px/1.2 var(--f-body); color: var(--c-ink); }
@media (max-width: 760px) { .odt2-insight { flex-direction: column; gap: 16px; align-items: flex-start; } }

/* example summary: two columns split by a white chevron on the pale tint */
.odt2-ex { width: 100%; background: var(--c-blue-pale); border-left: 2px solid var(--c-blue); padding-left: 42px; display: flex; gap: 24px; }
.odt2-ex__col { flex: 1 1 0; min-width: 0; padding: 40px 40px 40px 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.odt2-ex__col--main { flex: 0 1 600px; }
.odt2-ex__eyebrow { margin: 0; font: 700 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: var(--c-blue); }
.odt2-ex h3 { margin: 0 0 8px; font: 700 24px/1.3 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.odt2-ex p { margin: 0; font: 400 18px/1.2 var(--f-body); color: var(--c-ink); }
.odt2-ex__sep { flex: 0 0 24px; align-self: stretch; }
.odt2-ex__sep svg { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
  .odt2-ex { flex-direction: column; gap: 0; padding-right: 24px; }
  .odt2-ex__col { padding: 24px 0; }
  .odt2-ex__col--main { flex: 0 0 auto; }
  .odt2-ex__sep { display: none; }
}

/* --- odt2: organisation-levels board (photo circles + pale chevrons) */
.odt2-levels { display: flex; width: 100%; min-height: 240px; background: #fff; border-radius: var(--r-md); overflow: hidden; }
.odt2-level { flex: 1 1 0; min-width: 0; padding: 40px 0 40px 40px; display: flex; flex-direction: column; gap: 16px; }
.odt2-level__ring { display: flex; align-items: center; gap: 8px; }
.odt2-level__ring img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.odt2-level__ring::after { content: ""; flex: 1; height: 1px; background: var(--c-blue-pale); }
.odt2-level--end .odt2-level__ring::after { background: transparent; }
.odt2-level h3 { margin: 0; font: 700 16px/1.5 var(--f-alt); color: #4b5059; }
.odt2-level p { margin: 0; font: 400 14px/1.2 var(--f-body); color: var(--c-grey); }
.odt2-levels__sep { flex: 0 0 24px; align-self: stretch; }
.odt2-levels__sep svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1100px) {
  .odt2-levels { flex-wrap: wrap; min-height: 0; }
  .odt2-level { flex: 1 1 40%; min-width: 200px; padding: 24px; }
  .odt2-levels__sep { display: none; }
  .odt2-level__ring::after { background: transparent; }
}

/* --- odt2: closing line + CTA sizing (Figma Heading 1 / overlay 70%) */
.odt2-close { margin: 0; font: 600 18px/1.2 var(--f-body); color: #1e729c; text-align: center; }
.odt2-cta .h2 { font-size: 56px; }
.odt2-cta .cta-band__overlay { background: rgba(5,55,80,.7); }
@media (max-width: 640px) { .odt2-cta .h2 { font-size: 32px; } }

/* 7b. ODT redesign 2026-07-20 (odt3-) --------------------------------------
   Rebuilt from Figma 10504:12006 ("OPERATIONAL INTELLIGENCE" • Ready to Dev)
   + map component set 12833:17335 ("Operational Digital Twin Explorer Map").
   Reuses .odt2-title/.odt2-panel/.odt2-insight/.odt2-ex/.stages/.cta-band. */

/* hero overlay — Figma OVL linear gradient at 60% */
.odt3-hero .hero__overlay {
  background: linear-gradient(122deg, rgba(12,71,125,.6) 0%, rgba(47,79,91,.6) 49%, rgba(7,52,89,.6) 100%);
}

/* chevron strips: pin every icon AND every label to the same rows regardless
   of how many lines a label wraps to (labels top-align right under the icon) */
.stages--align .stage { justify-content: flex-start; padding-top: 36px; }
.stages--align .stage img { flex-shrink: 0; }

/* section-title column ratios per Figma (base .odt2-title head is 1.25:1) */
/* gap 40 (not 60) so the copy column's left edge lines up with the panel row
   text below it (420px photo card + 40px row padding = 460px) */
.odt2-title--n420 { gap: 40px; }
.odt2-title--n420 .odt2-title__head { flex: 0 0 420px; }
.odt2-title--n500 .odt2-title__head { flex: 0 0 500px; }
.odt2-title--eq .odt2-title__head { flex: 1 1 0; }
@media (max-width: 960px) {
  .odt2-title--n420 .odt2-title__head,
  .odt2-title--n500 .odt2-title__head,
  .odt2-title--eq .odt2-title__head { flex: 0 0 auto; }
}

/* photo card with centered "One Connected View" caption over a blue wash.
   420px (not the odt2 400) so the row text at 420+40 lines up with the copy
   column above it (420px head + 40px gap = 460px) */
.odt3-photocard { width: 420px; }
@media (max-width: 900px) { .odt3-photocard { width: 100%; } }
.odt3-photocard img { object-position: 98% 50%; }
.odt3-photocard::after { content: ""; position: absolute; inset: 0; background: rgba(20,130,255,.3); }
.odt3-photocard__cap {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.1)) drop-shadow(0 2px 2px rgba(0,0,0,.06));
}
.odt3-photocard__cap img { position: static; width: 60px; height: 60px; object-fit: contain; }
.odt3-photocard__cap span { font: 700 24px/1.3 var(--f-alt); letter-spacing: -.01em; color: #fff; }

/* Operational Intelligence Explorer — sidebar tabs + swappable site map */
.odt3-x { width: 100%; background: #fff; border-radius: var(--r-md); overflow: hidden; }
.odt3-x__title {
  margin: 0; min-height: 60px;
  display: flex; align-items: center; padding: 8px 16px;
  border-bottom: 1px solid var(--c-line);
  font: 600 18px/1.2 var(--f-body); color: #1a1a1a;
}
.odt3-x__body { display: flex; }
.odt3-x__tabs { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--c-line); }
.odt3-x__tab {
  flex: 1 1 0; min-height: 52px;
  display: flex; gap: 10px; align-items: center;
  padding: 8px 16px 8px 13px;
  background: #fff; border: 0; border-left: 3px solid transparent;
  font: 400 16px/1.2 var(--f-body); color: #060309; text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.odt3-x__tab + .odt3-x__tab { border-top: 1px solid var(--c-line); }
.odt3-x__tab img { width: 24px; height: 24px; flex-shrink: 0; }
.odt3-x__tab:hover { background: #f4fafd; }
.odt3-x__tab.is-active { background: var(--c-blue-pale); border-left-color: var(--c-blue); font-weight: 600; }
.odt3-x__panel { flex: 1 1 0; min-width: 0; }
/* contain, not cover — several map views carry a feature list flush with the
   left edge that a cover-crop would hide behind the tab rail */
.odt3-x__panel img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 960px) {
  .odt3-x__body { flex-direction: column; }
  .odt3-x__tabs { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--c-line); }
  .odt3-x__tab { flex: 1 1 50%; min-width: 220px; border-left-width: 0; border-bottom: 3px solid transparent; }
  .odt3-x__tab.is-active { border-bottom-color: var(--c-blue); }
  .odt3-x__panel img { height: auto; }
}

/* "One Source of Intelligence" split: 580px copy + tablet dashboard carousel */
.odt3-src { display: flex; gap: 20px; align-items: center; width: 100%; }
.odt3-src__copy { width: 580px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.odt3-tablet { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.odt3-tablet__stage { position: relative; width: 100%; aspect-ratio: 787 / 456; }
.odt3-tablet__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* screen window measured from the Figma tablet composition (787x456 frame) */
.odt3-tablet__screen { position: absolute; left: 12.71%; top: 13.36%; width: 74.59%; height: 73.25%; border-radius: 6px; overflow: hidden; }
.odt3-tablet__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.odt3-tablet__screen img.is-active { opacity: 1; }
.odt3-dots { display: flex; gap: 8px; align-items: center; padding: 8px; }
.odt3-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line); }
.odt3-dots span.is-active { background: var(--c-blue); }
@media (max-width: 1100px) {
  .odt3-src { flex-direction: column; align-items: stretch; gap: 40px; }
  .odt3-src__copy { width: 100%; }
}

/* role board: white card, 100px photo circles, pale chevron separators */
.odt3-roles { display: flex; width: 100%; min-height: 400px; background: #fff; border-radius: var(--r-md); overflow: hidden; }
.odt3-role { flex: 1 1 0; min-width: 0; padding: 40px 20px 40px 40px; display: flex; flex-direction: column; gap: 4px; }
.odt3-role__ring { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.odt3-role__ring img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.odt3-role__ring::after { content: ""; flex: 1; height: 1px; margin-right: -43px; background: var(--c-blue-pale); }
.odt3-role--end .odt3-role__ring::after { background: transparent; }
.odt3-role h3 { margin: 0 0 4px; font: 700 16px/1.5 var(--f-alt); color: #060309; }
.odt3-role p { margin: 0; font: 400 14px/1.2 var(--f-body); color: var(--c-grey); }
.odt3-role p strong { font-weight: 700; }
.odt3-role p + p { margin-top: 8px; }
.odt3-roles__sep { flex: 0 0 24px; align-self: stretch; }
.odt3-roles__sep svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1100px) {
  .odt3-roles { flex-wrap: wrap; min-height: 0; }
  .odt3-role { flex: 1 1 40%; min-width: 220px; padding: 24px; }
  .odt3-roles__sep { display: none; }
  .odt3-role__ring::after { margin-right: 0; background: transparent; }
}

/* 8. FATAL RISK INTELLIGENCE (fri-) ----------------------------------------
   Rebuilt 2026-07-13 from Figma 12426:23090 ("Fatal Risk Intelligence • Desktop").
   Reuses .stages/.stage (platform.css), .odt-cream / .odt-duo / .odt-videocard (§7). */

/* intro split row: fixed 480px title + copy */
.fri-intro { display: flex; gap: 40px; align-items: center; width: 100%; }
.fri-intro__head { width: 480px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.fri-intro__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.fri-intro__copy p { margin: 0; font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink); }
@media (max-width: 960px) { .fri-intro { flex-wrap: wrap; } .fri-intro__head { width: 100%; } }

/* 18px body text used across this page (Figma text-medium, lh 1.2) */
.fri-copy { margin: 0; font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink); }
.fri-copy--semi { font-weight: 600; }

/* bordered 6-cell fatal-risk-category row (orange illustrated icons) */
.fri-conds { display: flex; width: 100%; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.fri-cond { flex: 1 1 0; min-width: 0; min-height: 300px; padding: 24px; display: flex; flex-direction: column; }
.fri-cond + .fri-cond { border-left: 1px solid var(--c-line); }
.fri-cond > img { width: 80px; height: 80px; }
.fri-cond h3 { margin: 16px 0 0; font-family: var(--f-alt); font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--c-ink); }
.fri-cond p { margin: 8px 0 0; font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: var(--c-ink); }

/* 2026-07-14 redesign: cream icon strip (labels only) + caption inside one card.
   Figma gives every card the SAME fixed width, so the columns must be equal
   (flex 1 1 0) — space-between over natural label widths staggers the icons. */
.fri-conds2 { width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.fri-conds2__strip { display: flex; gap: 16px; background: #fdf6e5; padding: 32px 40px; }
.fri-cond2 { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.fri-cond2 img { width: 80px; height: 80px; }
.fri-cond2 h3 { margin: 0; font-family: var(--f-alt); font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--c-ink); text-align: center; white-space: nowrap; }
.fri-conds2__caption { margin: 0; padding: 32px 24px; font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink); text-align: center; }
@media (max-width: 960px) { .fri-conds2__strip { flex-wrap: wrap; justify-content: center; gap: 24px 40px; } .fri-cond2 { flex: 0 0 auto; } .fri-cond2 h3 { white-space: normal; } .fri-conds2__caption br { display: none; } }
@media (max-width: 1100px) {
  .fri-conds { flex-wrap: wrap; }
  .fri-cond { flex: 1 1 33%; min-width: 200px; min-height: 240px; border-top: 1px solid var(--c-line); }
  .fri-cond:nth-child(-n+3) { border-top: 0; }
}

/* full-width overview video card (poster has title baked in) */
.fri-videocard { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; }
.fri-videocard__play { background: var(--c-blue-light); }

/* dark "understanding exposure" band — Figma (2026-07-15 photo swap): ONE photo
   used twice over #0f394e, full-bleed at .2 + the SAME photo brightening toward
   the right edge through a linear-gradient window (identical geometry keeps the
   bright side seamless). No overflow:hidden — it would clip the full-bleed
   layers; width divides by the html zoom (.8, main.css) because under zoom
   100vw paints at only 80% of the screen. */
.fri-dark {
  position: relative; background: #0f394e;
  box-shadow: 0 0 0 100vmax #0f394e; clip-path: inset(0 -100vmax);
  /* design band is 1440x720; the site container is 1360 css px so the
     equivalent band height caps at 720 * (1360/1440) = 680 css px — a fixed
     cap (not viewport-tracking) so wide screens don't grow empty photo area */
  min-height: min(calc(100vw / 0.8 / 2), 680px);
  display: flex; flex-direction: column; justify-content: center;
}
.fri-dark__bg {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(100vw / 0.8); max-width: none; height: 100%;
  object-fit: cover; object-position: center;
  /* the exported band (Figma 12619:9128) already bakes in the blue overlay and
     the lit worker on the right — paint it at full opacity */
}
.fri-dark__inner { position: relative; z-index: 1; display: flex; gap: 40px; align-items: center; width: 100%; }
@media (min-width: 1281px) { .fri-dark__copy .h2, .fri-dark__h { white-space: nowrap; } }
/* section heading sits outside the copy column (Figma 12426:23105 — H1 size, white) */
.fri-dark__h { color: #fff; font-size: 56px; }
@media (max-width: 640px) { .fri-dark__h { font-size: 40px; } }
.fri-dark__copy { flex: 1 1 0; min-width: 300px; display: flex; flex-direction: column; gap: 24px; }
.fri-dark__copy .h2 { color: #fff; }
.fri-dark__copy p { margin: 0; font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: #fff; }
/* 2026-07-14 redesign: copy stacked over a row of two compact dark chips */
.fri-dark__inner--col { flex-direction: column; align-items: flex-start; gap: 40px; }
.fri-darkchips { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; max-width: 880px; }
.fri-darkchip { flex: 1 1 0; min-width: 260px; height: 88px; display: flex; gap: 12px; align-items: center; background: rgba(0,0,0,.4); border-radius: var(--r-md); padding: 20px; }
.fri-darkchip img { width: 32px; height: 32px; flex-shrink: 0; }
.fri-darkchip p { margin: 0; font-family: var(--f-body); font-weight: 600; font-size: 16px; line-height: 1.3; color: #fff; }

.fri-glasses { display: flex; gap: 40px; flex-shrink: 0; }
.fri-glass { width: 320px; height: 200px; background: rgba(0,0,0,.4); border-radius: var(--r-sm); padding: 32px; display: flex; flex-direction: column; gap: 24px; justify-content: center; }
.fri-glass:first-child { margin-top: 200px; }
.fri-glass img { width: 40px; height: 40px; }
.fri-glass h3 { margin: 0; font-family: var(--f-alt); font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; color: #fff; }
@media (max-width: 1280px) {
  .fri-dark__inner { flex-wrap: wrap; }
  .fri-glasses { flex-wrap: wrap; }
  .fri-glass:first-child { margin-top: 0; }
}

/* "How Fatal Risk Intelligence Works" diagram (right column) */
.fri-hiw { position: relative; width: 640px; max-width: 100%; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.fri-hiw__connectors { position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -58%); width: 748px; max-width: none; pointer-events: none; }
.fri-hiw__chips { position: relative; z-index: 1; display: flex; gap: 8px; justify-content: center; align-items: flex-start; }
.fri-chip { width: 100px; height: 88px; border-radius: 11px; background: #fff; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; padding: 8px 4px; }
.fri-chip img { width: 24px; height: 24px; }
.fri-chip span { font-family: var(--f-body); font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--c-ink); }
.fri-hiw__chips > .fri-chip:nth-child(1) { margin-top: 20px; }
.fri-hiw__chips > .fri-chip:nth-child(2), .fri-hiw__chips > .fri-chip:nth-child(6) { margin-top: 8px; }
.fri-hiw__chips > .fri-chip:nth-child(3), .fri-hiw__chips > .fri-chip:nth-child(5) { margin-top: 4px; }
.fri-hiw__chips > .fri-chip:nth-child(7) { margin-top: 20px; }
.fri-atlas { position: relative; z-index: 1; width: 548px; max-width: 100%; background: #fdf6e5; border: 4px solid var(--c-blue-pale); border-radius: 24px; box-shadow: 0 4px 8px -2px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.06); overflow: hidden; }
.fri-atlas__top { background: #fff; padding: 20px 20px 8px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.fri-atlas__top h3 { margin: 0; font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.4; letter-spacing: -.01em; color: var(--c-ink); }
.fri-atlas__top p { margin: 0; font-family: var(--f-body); font-weight: 600; font-size: 12px; line-height: 1.2; color: var(--c-grey); }
.fri-atlas__wave { display: block; width: 100%; height: 16px; margin-top: -2px; }
.fri-atlas__bot { padding: 12px 0 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.fri-atlas__bot h4 { margin: 0; font-family: var(--f-alt); font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--c-ink); }
.fri-atlas__steps { display: flex; gap: 32px; justify-content: center; padding: 0 20px; font-family: var(--f-body); font-size: 14px; line-height: 1.2; color: var(--c-ink); white-space: nowrap; }
.fri-atlas__steps span { display: inline-flex; align-items: center; gap: 4px; }
.fri-atlas__steps b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: #fff; font-weight: 600; font-size: 12px; color: #e36821; }
.fri-hiw__out { position: relative; z-index: 1; width: 400px; max-width: 100%; height: 160px; background: #fff; border: 1px solid var(--c-blue-light); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.fri-hiw__out > img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; }
.fri-hiw__outrow { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 12px 0; font-family: var(--f-body); font-weight: 600; font-size: 14px; color: var(--c-ink); }
.fri-hiw__outrow img { width: 24px; height: 24px; }
@media (max-width: 1280px) { .fri-hiw { margin-inline: auto; } }
@media (max-width: 700px) { .fri-hiw__chips { flex-wrap: wrap; } .fri-hiw__connectors { display: none; } }

/* play-triangle bullet lists (dashboard features / recommended actions) */
.fri-plist { display: flex; gap: 10px; width: 100%; }
.fri-plist ul { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.fri-plist li { display: flex; gap: 8px; align-items: center; font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink); }
.fri-plist li::before { content: ""; width: 10px; height: 10px; flex-shrink: 0; background: url("../icon/fri-bullet-play.svg") no-repeat center / contain; }
@media (max-width: 640px) { .fri-plist { flex-direction: column; } }

/* dashboard tablet shot */
.fri-shot { width: 700px; max-width: 100%; height: auto; flex-shrink: 0; margin-right: calc(-1 * var(--pad-x)); }
@media (max-width: 1100px) { .fri-shot { margin-right: 0; } }

/* example / "Atlas explains" card — note column inside, split off by a
   chevron hairline that kinks at the cream/white row boundary (y:96) */
.fri-ex { width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; display: flex; align-items: stretch; }
.fri-ex__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.fri-ex__card { display: flex; gap: 20px; align-items: center; padding: 24px; background: #fdf6e5; }
.fri-ex__card:first-child { height: 96px; }
.fri-ex__card--blue { background: var(--c-blue-pale); border-top: 1px solid var(--c-line); align-items: flex-start; }
.fri-ex__ic { width: 48px; height: 48px; border-radius: 50%; background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.fri-ex__ic img { width: 24px; height: 24px; }
.fri-ex__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fri-ex__body h3 { margin: 0; font-family: var(--f-body); font-weight: 600; font-size: 18px; line-height: 1.2; color: var(--c-ink); }
.fri-ex__body p { margin: 0; font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink); }
.fri-ex-link { margin: 0; font-family: var(--f-body); font-weight: 600; font-size: 18px; line-height: 1.2; color: #1e729c; }
.fri-ex__note { width: 240px; flex-shrink: 0; position: relative; background: #fff; display: flex; align-items: center; padding: 20px 24px 20px 40px; }
/* Figma exports the ">" kink as two wedge vectors (cream over the 96px Example
   row, blue below, flipped) — preserveAspectRatio=none lets the bottom wedge
   stretch with the Atlas-explains row height */
.fri-ex__cut { position: absolute; inset: 0 auto 0 0; width: 16px; display: flex; flex-direction: column; }
.fri-ex__cut img { display: block; width: 17px; height: 96px; }
.fri-ex__cut img + img { flex: 1 1 0; min-height: 0; height: auto; transform: scaleY(-1); }
@media (max-width: 900px) {
  .fri-ex { flex-wrap: wrap; }
  .fri-ex__main { flex-basis: 100%; }
  .fri-ex__card:first-child { height: auto; }
  .fri-ex__note { width: 100%; padding: 24px; border-top: 1px solid var(--c-line); }
  .fri-ex__cut { display: none; }
}

/* before / after photo composition (1440x800 stage, % coordinates) */
.fri-ba { position: relative; width: 100%; aspect-ratio: 1440 / 800; background: #fff; overflow: hidden; }
.fri-ba__bg, .fri-ba__guy { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fri-ba__fade { position: absolute; inset: 0; background: linear-gradient(180deg, #fff 38.9%, rgba(153,153,153,0) 100%); }
@media (max-width: 1100px) { .fri-ba__fade { display: none; } }
.fri-ba__label { position: absolute; margin: 0; font-family: var(--f-alt); font-weight: 400; font-size: 20px; letter-spacing: .35em; color: #4b5059; }
.fri-ba__bar { position: absolute; margin: 0; display: flex; align-items: center; padding: 0 24px; font-family: var(--f-alt); font-weight: 700; font-size: 24px; letter-spacing: -.01em; color: #fff; }
.fri-ba__list { position: absolute; margin: 0; display: flex; flex-direction: column; font-family: var(--f-alt); font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; color: #4b5059; }
.fri-ba__list p { margin: 0; }
.fri-ba__list b { font-weight: 700; margin-right: 10px; }
.fri-ba__list--x b { color: #f4813e; }
.fri-ba__list--tick b { color: #0489c6; }
.fri-ba__panel {
  position: absolute; left: 59.45%; right: 0; top: 60.25%; bottom: 17.6%;
  background: rgba(0,0,0,.39); mix-blend-mode: darken;
  clip-path: polygon(18.5% 0, 100% 0, 100% 100%, 18.5% 100%, 0 50%);
}
.fri-ba__quote { position: absolute; left: 67.4%; top: 63.4%; width: 28%; display: flex; flex-direction: column; gap: 9px; color: #fff; }
.fri-ba__quote h3 { margin: 0; font-family: var(--f-alt); font-weight: 500; font-size: 40px; line-height: 1.2; letter-spacing: -.01em; }
.fri-ba__quote h4 { margin: 0; font-family: var(--f-alt); font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: .18em; }
.fri-ba__quote p { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.2; }
@media (max-width: 1100px) {
  .fri-ba { aspect-ratio: auto; padding: 40px 24px; display: flex; flex-direction: column; gap: 24px; background: #f5f5f5; }
  .fri-ba__bg, .fri-ba__guy, .fri-ba__panel { display: none; }
  .fri-ba__label, .fri-ba__bar, .fri-ba__list { position: static; }
  .fri-ba__bar { padding: 8px 24px; border-radius: var(--r-sm); align-self: flex-start; }
  .fri-ba__quote { position: static; width: auto; background: rgba(5,55,80,.9); padding: 24px; border-radius: var(--r-sm); }
}

/* operational outcomes card grid */
.fri-oc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; }
.fri-oc__card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: 20px 24px; min-height: 156px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.fri-oc__card img { width: 40px; height: 40px; }
.fri-oc__card h3 { margin: 0; font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.4; letter-spacing: -.01em; color: #4B5059; }
.fri-oc__card p { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: #5C616B; }
@media (max-width: 960px) { .fri-oc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fri-oc { grid-template-columns: 1fr; } }

/* "see risk before it becomes fatal" gauge panel (exported @2x from Figma) */
.fri-gauges { width: 400px; max-width: 100%; height: auto; flex-shrink: 0; }

/* "Designed For Complex Operations" application grid */
.fri-apps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; border: 1px solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; }
.fri-app { min-height: 180px; padding: 24px; background: rgba(255,255,255,.9); border-left: 1px solid var(--c-line); border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.fri-app:nth-child(-n+6) { border-top: 0; }
.fri-app:nth-child(6n+1) { border-left: 0; }
.fri-app img { width: 40px; height: 40px; }
.fri-app h3, .fri-app p { margin: 0; font-family: var(--f-alt); font-weight: 400; font-size: 20px; line-height: 1.4; letter-spacing: -.01em; color: var(--c-ink); }
.fri-app--note { grid-column: span 3; background: var(--c-blue-pale); }
@media (max-width: 1100px) {
  .fri-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fri-app:nth-child(-n+6) { border-top: 1px solid var(--c-line); }
  .fri-app:nth-child(-n+3) { border-top: 0; }
  .fri-app:nth-child(6n+1) { border-left: 1px solid var(--c-line); }
  .fri-app:nth-child(3n+1) { border-left: 0; }
}

/* 2026-07-14 redesign: comparison columns float over the dusty-tunnel photo.
   The band must keep growing with viewport width (capped at the photo's native
   984px height) — a fixed ~680px cap over-zooms the cover-fitted photo on wide
   screens until only its empty top edge is visible. */
.fri-why { position: relative; width: 100%; overflow: hidden; min-height: min(calc(100vw / 0.8 / 2), 984px); display: flex; flex-direction: column; }
.fri-why__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* design fades the photo into the white page at the top, behind the heading */
.fri-why__fade { position: absolute; inset: 0; background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.85) 10%, rgba(255,255,255,0) 32%); pointer-events: none; }
.fri-why__title { position: relative; z-index: 1; margin: 44px 0 0; }
.fri-why__inner {
  position: relative; z-index: 1; flex: 1;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
  width: min(100%, calc(var(--maxw) + (var(--pad-x) * 2)));
  margin-inline: auto;
  padding: 40px var(--pad-x) 88px;
}
.fri-why .fri-cmp__col { width: 320px; }
.fri-why .fri-cmp__col--trad .fri-cmp__head { background: #fdf6e5; color: var(--c-ink); }
.fri-x { color: var(--c-orange); font-weight: 700; font-size: 14px; }
@media (max-width: 760px) { .fri-why__inner { flex-direction: column; } }

/* traditional-vs-FRI comparison tables */
.fri-cmp { display: flex; align-items: flex-end; flex-shrink: 0; }
.fri-cmp__col { width: 320px; background: #fff; border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.fri-cmp__col--trad { margin-right: -40px; }
.fri-cmp__col--fri { position: relative; z-index: 1; border-color: var(--c-blue-light); box-shadow: 0 12px 16px -4px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.03); }
/* equal 50px rows in both cards keep every row aligned; the FRI card's extra
   height sits only in its taller head (cards are bottom-aligned) */
.fri-cmp__head { padding: 16px 20px; font-family: var(--f-body); font-weight: 600; font-size: 18px; line-height: 1.2; color: #504e52; background: #f2f2f2; }
.fri-cmp__col--fri .fri-cmp__head { padding: 24px 20px; font-weight: 700; color: var(--c-ink); background: var(--c-blue-pale); }
.fri-cmp__row { display: flex; gap: 8px; align-items: center; height: 50px; padding: 0 20px; border-bottom: 1px solid var(--c-line); font-family: var(--f-body); font-weight: 600; font-size: 14px; line-height: 1.2; color: #504e52; }
.fri-cmp__col--fri .fri-cmp__row { color: var(--c-ink); }
.fri-cmp__row img { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 1100px) {
  .fri-cmp { flex-wrap: wrap; gap: 20px; align-items: flex-start; }
  .fri-cmp__col--trad { margin-right: 0; }
}

/* 9. PRODUCTION INTELLIGENCE (pi-) -----------------------------------------
   Rebuilt 2026-07-13 from Figma uSpSiuWCXpiRjrcPWJdeyD node 12405:20872
   ("Production Intelligence • Desktop" — rock-fragmentation redesign).
   Page loads main.css + platform.css (.stages/.stage chevrons, .sys-item,
   .cta-band) + solutions.css. */

/* section headings on this design are Ubuntu Medium 40 near-black */
.pi-h2 { font-size: 40px; color: #4b5059; }

/* hero overlay — flipped bottom-up navy fade over the Figma "Dblue" diagonal */
.hero__overlay--pi {
  background:
    linear-gradient(0deg, rgba(5,55,80,.55) 0%, rgba(5,55,80,0) 45%),
    linear-gradient(122deg, rgba(13,66,120,.94) 0%, rgba(20,84,146,.7) 49%, rgba(6,58,88,.55) 100%);
}

/* cream advisory callout with orange left rule (blast-chain section) */
.pi-callout {
  width: 100%;
  background: #fdf6e5; border-left: 2px solid var(--c-orange);
  padding: 24px;
  display: flex; gap: 16px; align-items: center;
}
.pi-callout img { width: 48px; height: 48px; flex-shrink: 0; }
.pi-callout p { flex: 1; margin: 0; font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink); text-align: center; }

/* real-time feature list: 36px pale icon squares (base .sys-item in platform.css) */
.pi-rt { gap: 16px 40px; }
.pi-rt .sys-item__ic { width: 36px; height: 36px; background: var(--c-blue-pale); }

/* rock-flags video card (base .video-thumb / play handler in main.css+main.js) */
.pi-video { width: 640px; height: 340px; border-radius: 16px; }
@media (max-width: 1100px) { .pi-video { width: 100%; height: auto; aspect-ratio: 16 / 9; } }

/* tablet dashboard shot (pre-composited export) */
.pi-shot { flex: 1 1 0; min-width: min(320px, 100%); max-width: 660px; height: auto; }

/* the shared .stages chevron strip (platform.css) can't fit 8 cells on small
   screens — fold it into rounded tiles, matching the .stages--cards breakpoint */
@media (max-width: 960px) {
  .stages { flex-wrap: wrap; height: auto; gap: 12px; }
  .stages .stage { flex: 1 1 45%; min-height: 120px; clip-path: none; border-radius: var(--r-md); }
  .stages .stage + .stage { margin-left: 0; }
}

/* haulage & crusher board: 440px photo card + numbered list on the pale band */
.pi-haul { display: flex; align-items: center; width: 100%; }
.pi-haul > img { width: 380px; height: 280px; flex-shrink: 0; object-fit: cover; background: #fdf6e5; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.pi-haul__body { flex: 1 1 0; min-width: 0; padding: 40px 24px; display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.pi-haul__lead { margin: 0; font-family: var(--f-body); font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--c-ink); }
/* columns size to their widest single-line chip; leftover space spreads between them */
.pi-checks { display: flex; gap: 24px 16px; justify-content: space-between; }
.pi-checks__col { flex: 0 1 max-content; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pi-check { display: flex; gap: 8px; align-items: center; font-family: var(--f-body); font-size: 16px; line-height: 1.2; color: var(--c-ink); }
.pi-check__ic {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 10px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--c-blue);
}
@media (max-width: 1100px) {
  .pi-haul { flex-direction: column; }
  .pi-haul > img { width: 100%; max-height: 320px; min-height: 0; }
  .pi-haul__body { padding: 40px 24px; }
}
@media (max-width: 700px) { .pi-checks { flex-direction: column; } }

/* role dashboards strip: photo circles + zigzag hairline dividers, matching
   the odt-org card ("From site operations to executive visibility") */
.pi-dash { display: flex; gap: 20px; width: 100%; background: var(--c-blue-pale); border-radius: var(--r-md); overflow: hidden; }
.pi-dash__col { position: relative; flex: 1 1 0; min-width: 0; padding: 40px 0 40px 40px; display: flex; flex-direction: column; gap: 16px; }
/* zigzag divider = two skewed hairlines meeting on the connector line
   (y:90 = col padding 40 + circle radius 50). Same leg slopes as odt-org:
   upper leans 9.3deg over 90px (~15px), lower drifts back 4.2deg to the
   card bottom — the kink sits mid-gap so the horizontal connector crosses it. */
.pi-dash__col + .pi-dash__col::before,
.pi-dash__col + .pi-dash__col::after {
  content: ""; position: absolute; left: -11px; width: 1px;
  background: #fff;
}
.pi-dash__col + .pi-dash__col::before {
  top: 0; height: 90px; transform: skewX(9.3deg); transform-origin: bottom left;
}
.pi-dash__col + .pi-dash__col::after {
  top: 90px; height: calc(100% - 90px); transform: skewX(-4.2deg); transform-origin: top left;
}
.pi-dash__head { display: flex; align-items: center; gap: 8px; }
.pi-dash__head img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
/* -9px = ends exactly at the zigzag kink (kink at next col left -11px; col gap 20px) */
.pi-dash__head::after { content: ""; flex: 1; height: 1px; margin-right: -9px; background: #fff; }
.pi-dash__col:last-child .pi-dash__head::after { background: transparent; }
.pi-dash__col h3 { margin: 0; font-family: var(--f-alt); font-weight: 700; font-size: 16px; line-height: 1.5; color: #5C616B; }
.pi-dash__col p { margin: 0; font-family: var(--f-body); font-size: 14px; line-height: 1.4; color: #504e52; }
@media (max-width: 960px) {
  .pi-dash { flex-wrap: wrap; }
  .pi-dash__col { flex: 1 1 40%; min-width: 220px; padding: 24px; }
  .pi-dash__col + .pi-dash__col::before,
  .pi-dash__col + .pi-dash__col::after { display: none; }
  .pi-dash__head::after { margin-right: 0; }
  .pi-dash__col:last-child .pi-dash__head::after { background: #fff; }
}

/* continuous-optimisation 4x2 bordered icon grid.
   The four columns are narrow, so the longest single words ("Fragmentation",
   "Performance") set the minimum cell width: the grid takes a bigger share of
   the row and the label steps down from 20px so those words clear the 24px
   padding instead of running into the cell border. */
.pi-opt {
  flex: 1.8 1 0; min-width: min(320px, 100%);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden;
}
.pi-opt__cell {
  min-height: 180px; padding: 24px;
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
  border-left: 1px solid var(--c-line); border-top: 1px solid var(--c-line);
}
.pi-opt__cell:nth-child(-n+4) { border-top: 0; }
.pi-opt__cell:nth-child(4n+1) { border-left: 0; }
.pi-opt__cell img { width: 48px; height: 48px; }
.pi-opt__cell p { margin: 0; font-family: var(--f-alt); font-weight: 400; font-size: 17px; line-height: 1.4; letter-spacing: -.01em; color: #4B5059; }
@media (max-width: 700px) {
  .pi-opt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-opt__cell { min-height: 140px; }
  .pi-opt__cell:nth-child(-n+4) { border-top: 1px solid var(--c-line); }
  .pi-opt__cell:nth-child(-n+2) { border-top: 0; }
  .pi-opt__cell:nth-child(4n+1) { border-left: 1px solid var(--c-line); }
  .pi-opt__cell:nth-child(2n+1) { border-left: 0; }
}

/* "Operational Intelligence Enabled" band: tinted copy + 480px photo */
.pi-oi { display: flex; width: 100%; border-radius: 0 var(--r-md) var(--r-md) 0; overflow: hidden; }
.pi-oi__copy {
  flex: 1 1 0; min-width: 0;
  background: #fff; border-left: 2px solid var(--c-blue-light);
  padding: 40px 60px;
  display: flex; flex-direction: column; gap: 20px; justify-content: center;
}
.pi-oi__copy p { margin: 0; font-family: var(--f-body); font-weight: 600; font-size: 18px; line-height: 1.2; color: #5C616B; }
.pi-oi__img { width: 480px; flex-shrink: 0; object-fit: cover; min-height: 320px; height: auto; }
@media (max-width: 1100px) {
  .pi-oi { flex-direction: column; }
  .pi-oi__copy { padding: 32px 24px; }
  .pi-oi__img { width: 100%; min-height: 0; max-height: 320px; }
}

/* PI redesign (Figma 12405:20872, Jul 2026) --------------------------- */
/* full-width feature video under "Rock Fragmentation Analysis" */
.pi-video--wide { width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* bulleted dashboard lists (replaces the old <br>-separated paragraphs) */
.pi-dash__list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.4;
  color: #504e52;
}
.pi-dash__list li::marker { color: #504e52; }