/* EPCIMA PMT · modules.css — the per-module pages (modules/<slug>.html) */
.mp-body { padding-top: 76px; }
@media (max-width: 960px) { .mp-body { padding-top: 64px; } }
.nav--page { background: rgba(0,3,20,0.96); }
.nav__links a.is-current span { color: #fff; }
.nav__back { display: none; }
.mp__hero { background: var(--navy-900); color: var(--on-navy-2); padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); border-bottom: 1px solid rgba(255,255,255,0.1); }
.mp__crumb { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy-3); margin-bottom: 28px; }
.mp__crumb a { color: var(--on-navy-3); text-decoration: none; } .mp__crumb a:hover { color: #fff; }
.mp__crumb span { margin: 0 8px; }
.mp__hero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.mp__title { display: flex; align-items: center; gap: 16px; }
.mp__mark { width: 56px; height: 56px; border-radius: 12px; flex: none; }
.mp__hero h1 { color: #fff; font-size: clamp(34px, 4vw, 52px); }
.mp__tag { margin-top: 18px; font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.35; letter-spacing: -0.01em; color: #fff; max-width: 30ch; }
.mp__who { margin-top: 18px; font-size: 15px; color: var(--on-navy-3); max-width: 46ch; }
.mp__who b { color: var(--orange-hi); font-weight: 600; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 6px; }
.mp__hero-shot { box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8); }
.mp__sec { padding: clamp(44px, 6vw, 80px) 0; border-bottom: 1px solid var(--line); background: #fff; }
.mp__sec--paper { background: var(--paper); }
.mp__sec--flow { background: var(--paper); }
.mp__sec--nav { background: #fff; }
.mp__k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: 16px; }
.mp__two { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); }
.mp__desc { font-size: 17.5px; line-height: 1.6; color: var(--ink); max-width: 56ch; }
.mp__reads { list-style: none; display: grid; }
.mp__reads li { padding: 10px 0 10px 22px; border-top: 1px solid var(--line); position: relative; font-size: 15.5px; color: var(--ink); }
.mp__reads li:last-child { border-bottom: 1px solid var(--line); }
.mp__reads li::before { content: ""; position: absolute; left: 0; top: 19px; width: 10px; height: 2px; background: var(--orange); }
.mp__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mp__shots:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.mp__note { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.mp__connect { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mp__connect > div { padding: 18px 18px 20px; border-radius: 12px; background: var(--paper); display: grid; gap: 6px; }
.mp__connect b { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); }
.mp__connect span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.mp__related { margin-top: 18px; font-size: 14.5px; color: var(--ink-2); }
.mp__related a { color: var(--orange-ink); font-weight: 600; }
.mp__tiles { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.mp__tiles a { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 13.5px; font-weight: 600; transition: border-color .2s, transform .2s; }
.mp__tiles a:hover { border-color: var(--orange); transform: translateY(-1px); }
.mp__tiles .is-here a { border-color: var(--orange); background: rgba(245,130,42,0.08); }
.mp__tile-mark { width: 28px; height: 28px; border-radius: 7px; }
.mp__prevnext { display: flex; justify-content: space-between; margin-top: 22px; font-weight: 600; }
.mp__prevnext a { color: var(--ink); text-decoration: none; } .mp__prevnext a:hover { color: var(--orange-ink); }
.foot--page { padding: 28px 0; }
.foot--page a { color: var(--on-navy-2); }
@media (max-width: 960px) { .mp__hero-in, .mp__two { grid-template-columns: 1fr; } .mp__connect { grid-template-columns: 1fr 1fr; } .mp__tiles { grid-template-columns: repeat(3, 1fr); } .mp__shots { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .nav--page .nav__links, .nav--page .nav__actions { display: none; } .nav__back { display: inline-block; justify-self: end; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-decoration: none; } .nav--page .nav__toggle { display: none; } .mp__hero { padding: 24px 0 36px; } .mp__hero h1 { font-size: 30px; } .mp__mark { width: 44px; height: 44px; } .mp__tag { font-size: 17px; } .mp__connect { grid-template-columns: 1fr; } .mp__tiles { grid-template-columns: 1fr 1fr; } .mp__sec { padding: 36px 0; } }

/* Rev H.13 · real screens: click to enlarge */
.mp__shots:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.mp__shots:has(> :only-child) { grid-template-columns: minmax(0, 760px); }
.shot.is-ready { cursor: zoom-in; transition-property: box-shadow, translate; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.shot.is-ready:hover { translate: 0 -2px; }
.shot.is-ready:focus-visible { outline: 2px solid var(--orange, #F5822A); outline-offset: 3px; }
.shot img { outline: 1px solid rgba(255, 255, 255, 0.06); outline-offset: -1px; }
.lb { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1600px); max-height: 96vh; overflow: visible; }
.lb::backdrop { background: rgba(0, 3, 16, 0.88); }
.lb__fig { margin: 0; }
.lb__fig img { display: block; max-width: min(96vw, 1600px); max-height: 86vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); cursor: zoom-out; }
.lb__fig figcaption { margin-top: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; text-align: center; }
.lb__x { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 3, 16, 0.6); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.lb__x:active { scale: 0.96; }
.lb[open] { animation: lbIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes lbIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lb[open] { animation: none; } .shot.is-ready:hover { translate: none; } }


/* ── Rev H.14 · flows as rails, capabilities as a spec sheet ── */
.mp__secHead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.mp__secHead .mp__k { margin-bottom: 8px; }
.mp__count { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; font-variant-numeric: tabular-nums; }

.flows { display: grid; gap: clamp(28px, 3.5vw, 44px); }
.flow { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 18px clamp(20px, 3vw, 40px); align-items: start; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.flow:first-child { padding-top: 0; border-top: 0; }
.flow__head h3 { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.flow__head p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 36ch; text-wrap: pretty; }
.rail { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 18px 12px; counter-reset: step; overflow-x: clip; overflow-y: visible; }
.rail__step { position: relative; min-width: 0; padding: 12px 12px 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 4px; align-content: start; box-shadow: var(--sh-sm); }
.rail__step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: -8px; left: 10px; padding: 0 5px; background: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-3); line-height: 1.4; }
.rail__step::after { content: ""; position: absolute; top: 50%; right: -12px; width: 12px; height: 1px; background: var(--line-strong); }
.rail__step:last-child::after { display: none; }
.rail__step b { font-family: var(--display); font-weight: 700; font-size: 14.5px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.rail__step small { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.rail__step i, .cap li i { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.rail__step i { position: absolute; top: -8px; right: 10px; padding: 1px 6px; border-radius: 4px; background: var(--paper-2); color: var(--ink-3); line-height: 1.4; }
.rail__step.is-gate { border-color: var(--orange); box-shadow: var(--sh-sm), inset 0 0 0 1px var(--orange); }
.rail__step.is-gate i { background: var(--orange); color: #fff; }
.rail__step.is-gate::after { background: var(--orange); }
.rail__step.is-portal { border-style: dashed; border-color: var(--line-strong); background: var(--paper); }
.rail__step.is-portal i { background: var(--navy-800); color: #fff; }
.rail__step.is-auto, .rail__step.is-feed { background: var(--paper); }
.rail__step.is-auto i, .rail__step.is-feed i, .rail__step.is-config i { background: var(--paper-2); color: var(--ink-2); }
.rail__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: 12.5px; color: var(--ink-3); }
.rail__legend span { display: inline-flex; align-items: center; gap: 8px; }
.rail__legend span::before { content: ""; width: 14px; height: 10px; border-radius: 3px; border: 1px solid var(--line-strong); background: #fff; }
.rail__legend .is-gate::before { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.rail__legend .is-portal::before { border-style: dashed; background: var(--paper); }
.rail__legend .is-auto::before { background: var(--paper-2); }

.caps { columns: 4 235px; column-gap: clamp(28px, 4vw, 56px); }
.cap { break-inside: avoid; margin-bottom: 30px; }
.cap h3 { font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; color: var(--ink); padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); margin-bottom: 4px; }
.cap ul { list-style: none; }
.cap li { position: relative; padding: 7px 0 7px 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.cap li:first-child { border-top: 0; }
.cap li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 2px; background: var(--orange); }
.cap li i { margin-left: 7px; padding: 1px 5px; border-radius: 3px; background: var(--paper-2); color: var(--ink-2); vertical-align: 2px; white-space: nowrap; }


@media (max-width: 960px) {
  .flow { grid-template-columns: 1fr; gap: 14px; }
  .flow__head p { max-width: 60ch; }
}
@media (max-width: 640px) {
  .rail { grid-template-columns: 1fr; gap: 12px; padding-left: 14px; border-left: 1px solid var(--line-strong); }
  .rail__step::after { display: none; }
  .rail__step::before { left: auto; right: 10px; top: -8px; }
  .rail__step i { right: auto; left: 10px; }
  .caps { columns: 1; }
}
.foot--page .foot__row { margin-top: 0; }