/* ekplabz unit page — design source: prototype/unit.html (styles copied as-is; markup is in category.php). */
.stage.unitpage { padding: 26px clamp(16px, 4vw, 48px) 56px; overflow: clip; }
.wrap { position: relative; max-width: 1200px; margin: 0 auto; } /* no z-index: the machine image must multiply-blend with the bed */

/* ───────── hero: nameplate + machine + sub-units ───────── */
.hero { position: relative; display: grid; gap: 22px 34px; align-items: center; }
.hero .plate-area { grid-area: plate; }
.hero .machine-area { grid-area: machine; position: relative; }
.hero .subs-area { grid-area: subs; position: relative; z-index: 3; display: grid; gap: 12px; }
.pipes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.pipes .tube { fill: none; stroke: #5a6375; stroke-width: 8; stroke-linecap: round; }
.pipes .tube-in { fill: none; stroke: #c7ced9; stroke-width: 4; stroke-linecap: round; }
.pipes .lit { fill: none; stroke: var(--acc); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--acc)); }
.pipes .off { fill: none; stroke: var(--acc); stroke-width: 2; stroke-dasharray: 5 6; opacity: .45; }
.pipes .joint { fill: #3d4556; stroke: #c7ced9; stroke-width: 2; }

/* six layouts — each unit gets its own arrangement */
.L1 .hero { grid-template-columns: 1.35fr 1fr; grid-template-areas: "plate plate" "machine subs"; }
.L1 .subs-area { grid-template-columns: 1fr 1fr; }
.L2 .hero { grid-template-columns: 1fr 1.3fr; grid-template-areas: "subs plate" "subs machine"; }
.L2 .subs-area { grid-template-columns: 1fr; }
/* L3: machine in the middle, three sub-units on each side (sub-units become direct grid items) */
.L3 .hero { grid-template-columns: 1fr minmax(0, 1.5fr) 1fr; grid-template-areas: none; row-gap: 14px; }
.L3 .plate-area { grid-column: 1 / -1; grid-row: 1; }
.L3 .machine-area { grid-column: 2; grid-row: 2 / span 3; }
.L3 .subs-area { display: contents; }
.L3 .sub:nth-child(1) { grid-column: 1; grid-row: 2; } .L3 .sub:nth-child(2) { grid-column: 1; grid-row: 3; } .L3 .sub:nth-child(3) { grid-column: 1; grid-row: 4; }
.L3 .sub:nth-child(4) { grid-column: 3; grid-row: 2; } .L3 .sub:nth-child(5) { grid-column: 3; grid-row: 3; } .L3 .sub:nth-child(6) { grid-column: 3; grid-row: 4; }
.L3 .sub { position: relative; z-index: 3; }
.L4 .hero { grid-template-columns: 1.2fr 1fr; grid-template-areas: "machine plate" "machine subs"; }
.L4 .subs-area { grid-template-columns: 1fr; gap: 6px; } /* stacked like print layers */
.L5 .hero { grid-template-columns: 1fr; grid-template-areas: "plate" "machine" "subs"; }
.L5 .machine-area { width: min(560px, 100%); justify-self: center; }
.L5 .subs-area { grid-template-columns: repeat(6, 1fr); } /* stations along a line */
.L6 .hero { grid-template-columns: 1fr 1.35fr; grid-template-areas: "plate machine" "subs machine"; }
.L6 .subs-area { grid-template-columns: 1fr 1fr; }

/* nameplate */
.nameplate { position: relative; }
.nameplate .no {
  display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .18em; padding: 2px 10px;
  color: var(--acc); border: 1px solid var(--acc); background: #0b1022; text-shadow: 0 0 6px var(--acc);
}
.nameplate h1 { margin: 8px 0 0; font-size: clamp(36px, 5.6vw, 64px); line-height: 1.05; letter-spacing: .02em; color: var(--blue-900); }
.nameplate .en { margin-top: 4px; font-family: var(--tech); font-weight: 700; font-size: clamp(16px, 2vw, 22px); letter-spacing: .24em; color: var(--blue-500); }
.nameplate .tagline { margin: 14px 0 0; display: inline-block; padding: 8px 14px; font-size: 15px; color: #fff; background: linear-gradient(90deg, #0d1d4f, #1d3a92); border-left: 4px solid var(--acc); box-shadow: -2px 0 10px -2px var(--acc); }
.nameplate .rail { height: 3px; margin-top: 14px; background: linear-gradient(90deg, var(--acc), transparent); box-shadow: 0 0 8px var(--acc); }

/* machine */
.machine-area .frame { position: relative; aspect-ratio: 3 / 2; } /* generated unit machines are 1536×1024 */
.machine-area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; z-index: 2; }
.machine-area .glow { /* unit-coloured light from inside the machine (option B) */
  position: absolute; left: 20%; top: 28%; width: 50%; height: 46%; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--acc) 80%, transparent), transparent 70%); opacity: .3; /* the generated machines already glow in the unit colour */
}
.machine-area .callout { position: absolute; z-index: 4; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--steel-700); }
.machine-area .callout b { color: var(--blue-700); }
.machine-area .c1 { left: 0; bottom: -4px; }
.machine-area .c2 { right: 0; top: 0; text-align: right; }

/* sub-unit modules */
.sub {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 11px 14px 11px 12px; color: #fff;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 45%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, rgba(0, 0, 0, .07) 1px 2px, transparent 2px 3px),
    linear-gradient(180deg, #4a72e0 0%, #2b4fb8 22%, #1d3a92 60%, #0f2263 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .4);
  filter: drop-shadow(0 8px 8px rgba(5, 15, 50, .35));
}
.sub .sn { font-family: var(--mono); font-weight: 700; font-size: 11px; padding: 1px 6px; color: var(--acc); border: 1px solid var(--acc); background: rgba(0, 0, 0, .35); text-shadow: 0 0 6px var(--acc); }
.sub .nm { display: grid; line-height: 1.3; }
.sub .nm b { font-size: 15px; }
.sub .nm small { font-family: var(--tech); font-weight: 600; font-size: 11px; letter-spacing: .18em; color: #a9bbe6; }
.sub .ct { font-family: var(--mono); font-size: 12px; padding: 2px 7px; background: #0b1022; color: var(--acc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.sub::after { content: ""; position: absolute; right: 8px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
/* a sub-unit with no articles yet: blueprint outline */
.sub.draft {
  color: var(--blue-700); filter: none;
  background: linear-gradient(rgba(29, 61, 156, .07) 1px, transparent 1px) 0 0 / 10px 10px, linear-gradient(90deg, rgba(29, 61, 156, .07) 1px, transparent 1px) 0 0 / 10px 10px, rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 0 1.5px rgba(29, 61, 156, .55);
}
.sub.draft .nm small { color: var(--steel-500); }
.sub.draft .sn { background: #fff; color: var(--blue-700); border-color: var(--blue-700); text-shadow: none; }
.sub.draft .ct { background: transparent; color: var(--steel-500); box-shadow: inset 0 0 0 1px var(--steel-300); }
.sub.draft::after { background: transparent; box-shadow: inset 0 0 0 1.5px var(--steel-500); }
.L4 .sub { clip-path: none; border-radius: 2px; }

/* ───────── about: intro sheet + status panel ───────── */
.about { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; margin-top: 40px; align-items: start; }
.sheet { position: relative; background: #fff; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); box-shadow: 0 0 0 1px var(--steel-300); filter: drop-shadow(0 12px 16px rgba(20, 30, 60, .16)); }
.sheet::before { content: ""; position: absolute; left: 0; top: 0; bottom: 22px; width: 5px; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.sheet .hd { display: flex; align-items: center; gap: 10px; padding: 14px 30px; border-bottom: 2px solid var(--ink); font-family: var(--tech); font-weight: 700; font-size: 16px; letter-spacing: .18em; color: var(--blue-900); }
.sheet .hd small { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--steel-500); letter-spacing: .1em; }
.sheet .bd { padding: 22px 30px 26px; font-size: 16px; line-height: 1.95; }
.sheet .bd p { margin: 0 0 1em; }
.spec { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 14px; }
.spec th { width: 9em; padding: 8px 12px; text-align: left; color: #e9eef6; background: linear-gradient(#4a5263, #2a2f3a); border: 1px solid #1a1e26; font-weight: 700; }
.spec td { padding: 8px 12px; border: 1px solid var(--steel-300); }
.status-panel { color: #dfe6f3; padding: 16px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px), linear-gradient(180deg, #474f60, #2a2f3a 40%, #1b1f28); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.status-panel h4 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-family: var(--tech); font-size: 15px; letter-spacing: .16em; color: #fff; }
.status-panel h4::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.meter { margin-bottom: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: #9aa6bd; }
.meter b { display: block; font-family: var(--tech); font-size: 30px; letter-spacing: .04em; color: #fff; line-height: 1.1; }
.meter b small { font-size: 14px; color: #9aa6bd; margin-left: 4px; }
.meter .track { height: 6px; margin-top: 4px; background: #11141b; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8); }
.meter .fill { height: 100%; background: var(--acc); box-shadow: 0 0 6px var(--acc); }
.state { display: inline-block; padding: 3px 10px; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .14em; color: #0b1022; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.planned-page .state { background: var(--amber); box-shadow: 0 0 8px var(--amber); }

/* ───────── conveyor ───────── */
.out { margin-top: 36px; }
.out-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.out-head h3 { margin: 0; font-family: var(--tech); font-size: 22px; letter-spacing: .14em; color: var(--blue-900); }
.out-head span { font-family: var(--mono); font-size: 11px; color: var(--steel-700); }
.belt { padding: 16px 14px 30px; position: relative; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); background: repeating-linear-gradient(90deg, #252c3b 0 2px, #1b2130 2px 26px); }
.belt::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 12px; border-radius: 6px; background: radial-gradient(circle, #e7ebf0 0 2px, #7d8698 3px 4px, transparent 5px) 0 0 / 24px 12px, linear-gradient(#5d6676, #2b313d); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.card { position: relative; display: block; padding: 12px 12px 14px 15px; background: linear-gradient(#ffffff, #e9edf2); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); transition: transform .15s; }
.card:hover { transform: translateY(-2px); }
.card::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 4px; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.card .meta { font-family: var(--mono); font-size: 10.5px; color: var(--steel-500); display: flex; justify-content: space-between; gap: 8px; }
.card .meta b { color: var(--blue-700); }
.card h4 { margin: 6px 0 0; font-size: 14px; line-height: 1.45; font-weight: 500; }
.empty { padding: 26px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: #9aa6bd; }
.more { display: flex; justify-content: flex-end; margin-top: 12px; }
.labnotes { margin-top: 30px; text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--steel-700); }
.labnotes a { color: var(--blue-700); border-bottom: 1px dashed var(--blue-700); }

/* ───────── planned (not yet online) ───────── */
.planned-page .machine-area img { filter: grayscale(1) contrast(1.1) brightness(1.05); opacity: .85; }
.planned-page .machine-area .glow { opacity: .25; }
.planned-page .machine-area .frame::after { /* blueprint veil */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(rgba(29, 61, 156, .16) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(29, 61, 156, .16) 1px, transparent 1px) 0 0 / 14px 14px, rgba(196, 214, 255, .35);
}
.shutter-half { /* half-closed shutter over the lower part of the machine */
  position: absolute; left: 6%; right: 6%; bottom: 6%; height: 34%; z-index: 4;
  background: repeating-linear-gradient(180deg, #d9dee6 0 9px, #aeb6c3 9px 11px, #eef1f5 11px 12px);
  box-shadow: inset 0 0 0 1px #8d96a5, 0 6px 10px rgba(0, 0, 0, .25);
  display: grid; place-items: center;
}
.shutter-half span { font-family: var(--tech); font-weight: 700; font-size: clamp(16px, 2.4vw, 26px); letter-spacing: .3em; color: var(--blue-900); background: rgba(255, 255, 255, .85); padding: 4px 14px; box-shadow: 0 0 0 2px var(--acc), 0 0 12px var(--acc); }
.tape { position: absolute; left: -4%; right: -4%; height: 22px; z-index: 5; transform: rotate(-6deg); top: 18%; background: repeating-linear-gradient(-45deg, #ffcf1f 0 14px, #1a1d26 14px 28px); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); opacity: .92; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr !important; grid-template-areas: "plate" "machine" "subs" !important; }
  .subs-area { grid-template-columns: 1fr 1fr !important; }
  .pipes { display: none; }
  .L3 .plate-area, .L3 .machine-area, .L3 .sub { grid-column: auto !important; grid-row: auto !important; }
  .about { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .subs-area { grid-template-columns: 1fr !important; }
  .sheet .bd, .sheet .hd { padding-left: 20px; padding-right: 20px; }
}

/* WordPress / SWELL fit */
#content.l-content:has(.ekp-unitpage) { max-width: none; padding: 0; margin: 0; }
.ekp-unitpage { width: 100%; }
.ekp-unitpage .card h4 { color: var(--ink); }
.ekp-unitpage .sub, .ekp-unitpage .card { text-decoration: none; }
.ekp-unitpage .sub.cur { outline: 2px solid var(--acc); outline-offset: 2px; }
.ekp-unitpage .pager { margin-top: 14px; }
.ekp-unitpage .pager .page-numbers { display: inline-block; margin: 2px; padding: 4px 10px; font-family: var(--mono); font-size: 12px; color: #dfe6f3; background: linear-gradient(#3a4150, #1f232c); text-decoration: none; }
.ekp-unitpage .pager .current { color: #0b1022; background: var(--acc); }

/* ═════════ sub-unit page = DETAIL VIEW (parts/unit/detail.php) ═════════
   The unit page is the full assembly; a sub-unit page is one detail of it, drawn on blueprint paper. */
.stage.detailpage {
  background:
    linear-gradient(rgba(29, 61, 156, .16) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(29, 61, 156, .16) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(rgba(29, 61, 156, .07) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(90deg, rgba(29, 61, 156, .07) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(180deg, #e3ebfb, #d3def4);
}

/* the way back to the parent unit: the most visible control on the page */
.trail { display: flex; align-items: stretch; gap: 0; margin: -8px 0 26px; }
.trail-back {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 26px 12px 18px; color: #fff; text-decoration: none;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .14) 45%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #474f60, #2a2f3a 45%, #161a22);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 4px 0 0 var(--acc);
  transition: transform .08s;
}
.trail-back:hover { transform: translateX(-3px); }
.trail-back:active { transform: translate(-3px, 2px); }
.trail-back .arrow {
  display: grid; place-items: center; width: 40px; height: 40px; font-size: 16px; color: #0b1022;
  background: var(--acc); box-shadow: 0 0 14px var(--acc); clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%, 0 50%);
}
.trail-back .lbl { display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: baseline; line-height: 1.2; }
.trail-back .lbl small { grid-column: 1 / -1; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: #9aa6bd; }
.trail-back .lbl b { font-family: var(--mono); font-size: 18px; letter-spacing: .12em; color: var(--acc); text-shadow: 0 0 8px var(--acc); }
.trail-back .lbl em { font-style: normal; font-weight: 700; font-size: 20px; }
.trail-sep { display: grid; place-items: center; padding: 0 14px; font-family: var(--tech); font-size: 34px; font-weight: 700; color: var(--blue-700); }
.trail-here { display: flex; align-items: center; gap: 10px; padding: 0 18px; border: 2px dashed var(--blue-700); background: rgba(255, 255, 255, .6); }
.trail-here b { font-family: var(--mono); font-size: 18px; letter-spacing: .1em; color: var(--blue-700); }
.trail-here em { font-style: normal; font-weight: 700; font-size: 18px; color: var(--blue-900); }

/* plate on the left, the detail machine on the right */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 34px; align-items: start; }
.d-plate h1 { font-size: clamp(34px, 5vw, 56px); }
.keymap {
  display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; margin-top: 22px; padding: 10px; text-decoration: none;
  background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1.5px rgba(29, 61, 156, .5);
}
.keymap:hover { box-shadow: inset 0 0 0 2px var(--acc), 0 0 12px -2px var(--acc); }
.km-img { position: relative; display: block; aspect-ratio: 3 / 2; }
.km-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(.6); }
.km-ring {
  position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  display: grid; place-items: end; font: 700 11px var(--mono); font-style: normal; color: var(--acc);
  border: 2px solid var(--acc); box-shadow: 0 0 8px var(--acc), inset 0 0 8px var(--acc);
}
.km-cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--steel-700); line-height: 1.8; }
.km-cap b { font-family: var(--body); font-size: 14px; letter-spacing: .04em; color: var(--blue-700); }
.d-stat { display: flex; gap: 24px; margin: 18px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--steel-700); }
.d-stat dt { margin-bottom: 4px; }
.d-stat dd { margin: 0; }
.d-stat dd b { font-family: var(--tech); font-size: 26px; color: var(--blue-900); }

/* the detail machine sits in a drawing-style detail circle frame */
.detailpage .machine-area .frame { border: 2px solid rgba(29, 61, 156, .55); border-radius: 28px; background: rgba(255, 255, 255, .55); }
.detailpage .machine-area .frame::before { /* leader line from the key plan */
  content: ""; position: absolute; left: -34px; top: 50%; width: 34px; height: 2px; background: rgba(29, 61, 156, .55);
}
.detailpage .machine-area .c1 { bottom: -22px; }

/* sibling sub-units: one row of small tabs, no pipes */
.sibs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 40px; }
.sib {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; text-decoration: none; color: var(--blue-900);
  background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1.5px rgba(29, 61, 156, .45), inset 0 -3px 0 var(--acc);
}
.sib .sn { font-family: var(--mono); font-size: 10.5px; color: var(--blue-700); }
.sib b { flex: 1; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sib .ct { font-family: var(--mono); font-size: 11px; color: var(--steel-700); }
.sib:hover { box-shadow: inset 0 0 0 2px var(--acc); }
.sib.draft { opacity: .7; box-shadow: inset 0 0 0 1.5px rgba(29, 61, 156, .3); }
.sib.cur { color: #fff; opacity: 1; background: linear-gradient(180deg, #4a72e0, #1d3a92 60%, #0f2263); box-shadow: 0 0 0 2px var(--acc), 0 0 12px var(--acc); }
.sib.cur .sn, .sib.cur .ct { color: #cfe0ff; }
.detailpage .out { margin-top: 26px; }
.detailpage .labnotes a { font-size: 13px; font-weight: 700; }

@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; }
  .detailpage .machine-area .frame::before { display: none; }
  .sibs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .trail { flex-wrap: wrap; row-gap: 8px; }
  .trail-sep { display: none; }
  .trail-back { width: 100%; }
  .sibs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keymap { grid-template-columns: 110px 1fr; }
}

.detailpage .ekp-roadmap-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.detailpage .ekp-roadmap-card { display:flex; flex-direction:column; gap:8px; padding:16px 18px; color:#172345; background:#f6f8ff; border:1px solid #8493b0; border-left:4px solid var(--acc); text-decoration:none; overflow-wrap:anywhere; }
.detailpage .ekp-roadmap-card:is(:hover,:focus-visible) { outline:2px solid var(--acc); outline-offset:2px; }
.ekp-roadmap-card small { font-weight:700; letter-spacing:.08em; }
.ekp-roadmap-card strong { font-size:1.05rem; }
.ekp-roadmap-card span { font-size:.85rem; }
.ekp-roadmap-card b { margin-top:auto; padding-top:8px; border-top:1px solid #bcc5d8; font-size:.8rem; }
.ekp-roadmap-card em { float:right; font-style:normal; }
@media(max-width:767px) { .detailpage .ekp-roadmap-grid { grid-template-columns:minmax(0,1fr); } }