/* Two service-specific hero diagrams. All explanatory labels stay in HTML. */
.design-page .hero .dj-visual{background:#fcfcf6;overflow:hidden}
.dj-visual{--dj-ink:#173c48;--dj-muted:#4b6870;--dj-blue:#147fa3;--dj-line:#bfd0ce;--dj-pale:#e7f0ed;color:var(--dj-ink)}
.dj-visual .product-visual__heading{position:relative;z-index:1}
.dj-visual :is(.dj-document-map,.dj-regulatory-map){min-height:398px;padding:33px 36px 38px;font-family:var(--font-b)}
.dj-kicker{display:block;color:var(--dj-muted);font-size:12px;line-height:1.35;font-weight:500;letter-spacing:.015em}
.dj-visual strong{display:block;color:var(--dj-ink);font-size:16px;line-height:1.35;font-weight:600}
.dj-glyph{position:relative;display:block;width:35px;height:35px;flex:0 0 35px;border:1px solid #84a8ad;border-radius:50%;background:#f1f8f6}
.dj-glyph::before,.dj-glyph::after{content:"";position:absolute;display:block}
.dj-glyph--spec::before{width:12px;height:17px;left:10px;top:7px;border:1.5px solid #1b637c;border-radius:2px}
.dj-glyph--spec::after{width:6px;left:13px;top:13px;border-top:1.5px solid #1b637c;box-shadow:0 4px #1b637c}
.dj-glyph--material::before{width:13px;height:13px;left:9px;top:8px;border:1.5px solid #1b637c;transform:rotate(45deg)}
.dj-glyph--material::after{width:4px;height:4px;left:15px;top:15px;border-radius:50%;background:#1b637c}
.dj-glyph--batch::before{width:18px;height:12px;left:7px;top:10px;border:1.5px solid #1b637c;border-radius:2px}
.dj-glyph--batch::after{width:8px;left:12px;top:17px;border-top:1.5px solid #1b637c}
.dj-glyph--formula::before{width:18px;height:18px;left:7px;top:7px;border:1.5px solid #1b637c;border-radius:50%}
.dj-glyph--formula::after{width:10px;height:10px;left:12px;top:12px;border-top:1.5px solid #1b637c;transform:rotate(-35deg)}
.dj-glyph--label::before{width:18px;height:15px;left:8px;top:8px;border:1.5px solid #1b637c;border-radius:2px}
.dj-glyph--label::after{width:8px;left:13px;top:15px;border-top:1.5px solid #1b637c;box-shadow:0 4px #1b637c}
.dj-glyph--market::before{width:18px;height:18px;left:7px;top:7px;border:1.5px solid #1b637c;border-radius:50%}
.dj-glyph--market::after{width:18px;height:8px;left:7px;top:13px;border-top:1.5px solid #1b637c;border-bottom:1.5px solid #1b637c;border-radius:50%}

/* Documents: the agreed specification links material and finished-batch evidence. */
.dj-document-map{background:radial-gradient(circle at 50% 30%,#edf5f1 0,#fcfcf6 65%)}
.dj-spec{position:relative;display:flex;align-items:center;gap:15px;width:max-content;max-width:100%;margin:0 auto;padding:16px 22px;background:#e5f1f1;border:1px solid #84adb4;border-radius:4px}
.dj-spec::after{content:"";position:absolute;left:50%;top:100%;height:23px;border-left:1px solid #87b3bc}
.dj-spec strong{font-size:18px}
.dj-evidence{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.dj-evidence::before{content:"";position:absolute;left:25%;right:25%;top:-25px;border-top:1px solid #87b3bc}
.dj-evidence__item{position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:112px;padding:17px;background:#fffefa;border:1px solid var(--dj-line);border-radius:4px;box-shadow:0 10px 24px -20px #1e5159}
.dj-evidence__item::before{content:"";position:absolute;left:50%;top:-25px;height:24px;border-left:1px solid #87b3bc}
.dj-evidence__item>span:last-child{min-width:0}
.dj-scope{display:flex;align-items:center;gap:12px;margin-top:26px;padding:13px 0 0;border-top:1px solid #c7d8d6;color:#3c5e68;font-size:13px;line-height:1.5}
.dj-scope__mark{width:7px;height:7px;flex:0 0 7px;border:1px solid #1b7795;border-radius:50%;background:#a5dce9}

/* Regulatory: inputs meet the market check before ownership is agreed. */
.dj-regulatory-map{background:linear-gradient(160deg,#fcfcf6 40%,#edf4ef 100%)}
.dj-regulatory-inputs{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);align-items:center;gap:11px}
.dj-regulatory-input{display:flex;align-items:center;gap:12px;min-width:0;min-height:100px;padding:14px;border:1px solid var(--dj-line);border-radius:4px;background:#fffefa}
.dj-regulatory-input>span:last-child{min-width:0}
.dj-plus{text-align:center;color:#478199;font:500 19px/1 var(--font-b)}
.dj-regulatory-market{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;min-height:85px;margin:40px 12% 0;padding:14px 20px;border:1px solid #8fb5ba;border-radius:4px;background:#e5f1f1}
.dj-regulatory-market::before{content:"";position:absolute;left:50%;top:-27px;height:26px;border-left:1px solid #87b3bc}
.dj-regulatory-market strong{font-size:18px}
.dj-regulatory-owner{position:relative;display:flex;align-items:center;gap:14px;min-height:74px;margin-top:27px;padding:13px 18px;border:1px solid #b8ced0;border-left:3px solid #1681a3;border-radius:2px;background:#fffefa}
.dj-regulatory-owner::before{content:"";position:absolute;left:50%;top:-28px;height:27px;border-left:1px solid #87b3bc}
.dj-owner-line{width:22px;height:22px;flex:0 0 22px;border:1px solid #75a6af;border-radius:50%;background:linear-gradient(135deg,#c6e5e9 50%,#f5faf5 50%)}

@media(max-width:1050px) and (min-width:701px){
 .dj-visual :is(.dj-document-map,.dj-regulatory-map){padding:25px 20px 28px;min-height:370px}
 .dj-evidence__item,.dj-regulatory-input{padding:11px;gap:9px}
 .dj-visual strong{font-size:14px}
 .dj-kicker{font-size:11px}
 .dj-glyph{width:30px;height:30px;flex-basis:30px;transform:scale(.86);transform-origin:center}
}
@media(max-width:700px){
 .dj-visual :is(.dj-document-map,.dj-regulatory-map){padding:28px 20px 30px;min-height:0}
 .dj-kicker{font-size:13px}
 .dj-visual strong{font-size:16px}
 .dj-evidence{margin-top:46px}
 .dj-regulatory-market{margin-top:37px}
}
@media(max-width:420px){
 .dj-visual :is(.dj-document-map,.dj-regulatory-map){padding:25px 16px 27px}
 .dj-kicker{font-size:14px}
 .dj-evidence{grid-template-columns:1fr;gap:10px;margin-top:36px}
 .dj-evidence::before{left:19px;right:auto;top:-21px;width:1px;height:20px;border-top:0;border-left:1px solid #87b3bc}
 .dj-evidence__item{min-height:72px;padding:12px}
 .dj-evidence__item::before{display:none}
 .dj-spec{width:100%;margin:0;padding:13px}
 .dj-spec::after{left:19px;height:16px}
 .dj-spec strong{font-size:17px}
 .dj-regulatory-inputs{grid-template-columns:1fr;gap:8px}
 .dj-regulatory-input{min-height:65px;padding:10px 12px}
 .dj-plus{line-height:.8}
 .dj-regulatory-market{justify-content:flex-start;min-height:72px;margin:27px 0 0;padding:12px}
 .dj-regulatory-market::before{top:-20px;height:19px}
 .dj-regulatory-owner{margin-top:24px;padding:12px;min-height:76px}
 .dj-regulatory-owner::before{top:-25px;height:24px}
 .dj-regulatory-owner strong{font-size:15px}
}