.modular-figure { min-width: 0; }
.modular-figure .figure-top { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.modular-system { width: 100%; margin: 8px 0 10px; }
.modular-system text { font-family: var(--body); }
.svg-label { fill: #6c7f8c; font-size: 11px; font-weight: 600; letter-spacing: 1.6px; }
.svg-kicker { fill: #6c7f8c; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.svg-title { fill: #2f4b5e; font-size: 14px; font-weight: 700; }
.svg-note, .svg-legend { fill: #6c7f8c; font-size: 9px; font-weight: 600; letter-spacing: .8px; }
.pink-fill { fill: var(--pink); }
.support-module > rect { fill: #dfe7ec; }
.equipment { stroke: #6a879a; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.equipment .face-top { fill: #f9fcfd; }
.equipment .face-front { fill: #edf3f7; }
.equipment .face-side { fill: #c4d5e0; }
.equipment .door { fill: #e2edf3; }
.equipment .hatch-inner { fill: #d4e3ec; }
.equipment .vent { fill: #c2d5e1; }
.equipment .equipment-line, .equipment .fan-detail { fill: none; }
.equipment .fan-detail { stroke-width: .7; }
.equipment .equipment-shadow { fill: #b9cdd9; stroke: none; opacity: .36; }
.equipment .control-panel { fill: #486b81; stroke: none; }
.equipment .control-detail { fill: none; stroke: #f3f7fa; }
.equipment .lid { fill: #e7f1f6; }
.equipment .belt-top { fill: #dae7ef; }
.equipment .belt-rollers { fill: none; stroke: #90aabd; }
.equipment .wheel { fill: #7894a6; }
.module-ready { fill: none; stroke: var(--pink); stroke-width: 2; stroke-linecap: round; }
.future-slots rect { fill: #f8fafb; stroke: #8da1ae; stroke-width: 1.5; stroke-dasharray: 6 5; }
.future-slots path { fill: none; stroke: #8da1ae; stroke-width: 1.5; stroke-linecap: round; }
.expansion-module { opacity: 0; transform-box: fill-box; transform-origin: center; }
.modular-figure figcaption { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.modular-figure figcaption div { display: flex; gap: 8px; }
.modular-figure figcaption strong { color: var(--ink); }
.modular-figure figcaption span, .modular-figure figcaption small { color: var(--muted); }
.modular-figure figcaption small { font-size: 12px; }
.modular-figure figcaption .motion-controls { align-items: center; flex-direction: row; gap: 12px; }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 78px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: transparent; font: 500 12px var(--body); cursor: pointer; }
.motion-toggle:hover { background: #e7edf1; }
.motion-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.play-icon, .is-paused .pause-icon { display: none; }
.is-paused .play-icon { display: block; }
.motion-toggle:disabled { cursor: default; }
.motion-toggle:disabled svg { display: none; }

/* Approved platform outcome cards. Loaded after the existing V3 styles. */
#process { background: #fff; }
#process .outline-dark { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
#process .process-flow { display: grid; grid-template-columns: minmax(0,1.15fr) 34px minmax(0,1.4fr) 34px minmax(0,1.15fr); gap: 12px; align-items: stretch; padding: 0; border: 0; }
#process .process-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 4px; background: #f3f6f8; }
#process .process-card > img { width: 100%; height: clamp(150px,18vw,230px); object-fit: contain; margin: 20px 0; mix-blend-mode: multiply; }
#process .card-copy { flex: 1; padding-top: 20px; border-top: 1px solid var(--line); }
#process .process-card h3 { font-size: 21px; line-height: 1.2; }
#process .process-card p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--muted); }
#process .step-number { font-size: 11px; }
#process .flow-arrow { display: grid; place-items: center; font-size: 28px; color: #637e90; }
#process .concept-note { margin-top: 18px; color: var(--muted); font-size: 12px; text-align: right; }
.modular-figure .status { white-space: nowrap; }
@media (max-width: 1150px) {
  .modular-figure figcaption { align-items: flex-start; }
  .modular-figure figcaption > div:first-child { flex-direction: column; gap: 0; }
  .modular-figure figcaption .motion-controls { flex-direction: column; align-items: flex-end; gap: 6px; }
}
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: clamp(68px,14vw,112px); }
  .modular-figure { width: 100%; max-width: 680px; }
  #process .section-heading { grid-template-columns: 1fr; gap: 24px; }
  #process .process-flow { grid-template-columns: 1fr; gap: 16px; }
  #process .flow-arrow { min-height: 30px; transform: rotate(90deg); }
  #process .process-card > img { height: auto; aspect-ratio: 3 / 2; max-height: 360px; }
  #process .concept-note { text-align: left; }
}
@media (max-width: 560px) {
  #process .process-card { padding: 18px; }
  #process .process-card > img { margin: 12px 0; }
  .modular-figure figcaption { align-items: flex-start; }
}
@media print { .motion-toggle { display: none; } }