/* ===== diagrams ===== */
.ic{width:24px;height:24px}
.cir{width:76px;height:76px;border-radius:50%;background:#fff;border:2px solid var(--navy);display:grid;place-items:center;color:var(--navy);margin:0 auto}
.cir .ic{width:36px;height:36px}
.cir.y{border-color:#d4b200;background:#fffbe3;color:#6b5a00}
.cir .mk{width:40px;height:40px;color:var(--navy)}
/* flow */
.dg-flow{display:grid;grid-template-columns:1fr 1.1fr 1.2fr 1.1fr 1fr;align-items:start;gap:0;background:#fff;border-radius:8px;padding:50px 40px 34px;position:relative}
.dg-flow .node{text-align:center}
.dg-flow .node b{display:block;font-family:"Zen Old Mincho",serif;font-size:20px;margin-top:12px}
.dg-flow .node small{display:block;font-size:12px;color:var(--sub)}
.dg-flow .node.main .cir{width:96px;height:96px;border-width:3px}
.dg-flow .node.main .mk{width:52px;height:52px}
.dg-flow ul{margin-top:16px;display:grid;gap:6px;text-align:left}
.dg-flow li{list-style:none;font-size:13px;display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:4px;padding:6px 10px}
.dg-flow li .ic{width:16px;height:16px;flex:none;color:var(--navy)}
.dg-flow .arrows{padding-top:14px;display:grid;gap:18px}
.ar{position:relative;height:30px;margin:0 6px}
.ar::before{content:"";position:absolute;left:0;right:12px;top:14px;height:3px;border-radius:2px}
.ar::after{content:"";position:absolute;right:0;top:7px;border:8px solid transparent;border-left:14px solid}
.ar span{position:absolute;left:0;right:0;top:-12px;text-align:center;font-size:12px;font-weight:700}
.ar.wk::before{background:var(--navy)}.ar.wk::after{border-left-color:var(--navy)}
.ar.mn::before{background:#e8c400}.ar.mn::after{border-left-color:#e8c400}
.ar.mn span{top:28px;color:#7a6500}
.dg-flow .legend{grid-column:1/-1;display:flex;justify-content:center;gap:28px;margin-top:26px;font-size:12px;color:var(--sub)}
.legend span::before{content:"";display:inline-block;width:22px;height:3px;vertical-align:middle;margin-right:8px}
.legend .lw::before{background:var(--navy)}.legend .lm::before{background:#e8c400}
/* steps */
.dg-steps{display:grid;grid-template-columns:repeat(var(--c,6),1fr);gap:14px;position:relative}
.dg-steps::before{content:"";position:absolute;left:8%;right:8%;top:38px;border-top:2px dashed #c3c8cf}
.dg-steps li{list-style:none;text-align:center;position:relative}
.dg-steps em{display:block;font-style:normal;font-family:"Montserrat",sans-serif;font-weight:800;font-size:11px;color:#b39500;letter-spacing:.12em;margin-top:14px}
.dg-steps b{display:block;font-family:"Zen Old Mincho",serif;font-size:17px;margin-top:2px}
.dg-steps span{display:block;font-size:12.5px;color:var(--sub);line-height:1.75;margin-top:6px;padding:0 4px}
/* line mock */
.line-row{display:grid;grid-template-columns:1fr 340px;gap:70px;align-items:center}
.line-row h3{font-family:"Zen Old Mincho",serif;font-size:28px;line-height:1.6;letter-spacing:.08em}
.line-row p.t{margin-top:16px;font-size:15px}
.phone{justify-self:center}
.phone .scr{width:300px;border:10px solid #1c2230;border-radius:36px;background:#8fa9c6;padding:0 12px 18px;overflow:hidden;box-shadow:0 20px 50px rgba(20,30,50,.18)}
.phone .top{margin:0 -12px 12px;background:#26344a;color:#fff;font-size:13px;font-weight:700;padding:14px 16px;text-align:center}
.phone .msg{display:flex;align-items:flex-end;gap:6px;margin-bottom:10px}
.phone .msg p{font-size:12.5px;line-height:1.7;padding:9px 12px;border-radius:14px;max-width:210px}
.phone .msg time{font-size:9px;color:#eef3f8;white-space:nowrap}
.phone .l p{background:#fff;border-top-left-radius:4px}
.phone .r{flex-direction:row-reverse}
.phone .r p{background:#8de055;border-top-right-radius:4px}
.phone .file p{background:#fff;border-left:4px solid #d33;font-weight:700}
.phone .cap{text-align:center;font-size:11.5px;color:var(--sub);margin-top:14px}
/* map */
.map-row{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.dg-map svg{width:100%;height:auto}
.dg-map .rg rect{fill:#fff;stroke:var(--navy);stroke-width:2}
.dg-map .rg text{font-family:"Zen Old Mincho",serif;font-weight:700;font-size:17px;text-anchor:middle;fill:var(--navy)}
.dg-map .rg.home rect{fill:var(--navy)}
.dg-map .rg.home text{fill:#fff}
.dg-map .pinm path{fill:#e8c400;stroke:#7a6500;stroke-width:1.5}
.dg-map .pint{font-size:14px;font-weight:700;text-anchor:middle;fill:#7a6500}
/* swimlane */
.swipe{display:none;font-size:12px;color:var(--sub);text-align:center;margin-bottom:8px}
.dg-lane-wrap{overflow-x:auto;background:#fff;border-radius:8px;padding:30px}
.dg-lane{display:grid;grid-template-columns:120px repeat(var(--n),minmax(84px,1fr));min-width:900px}
.dg-lane .h{text-align:center;padding-bottom:16px;color:var(--navy);border-bottom:2px solid var(--line)}
.dg-lane .h .ic{width:28px;height:28px}
.dg-lane .h span{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-top:4px}
.dg-lane .lab{display:flex;align-items:center;font-weight:700;font-size:14px;border-bottom:1px solid var(--line)}
.dg-lane .lab.e{color:var(--navy)}.dg-lane .lab.p{color:#7a6500}
.dg-lane .c{height:76px;border-bottom:1px solid var(--line);position:relative;display:grid;place-items:center}
.dg-lane .c::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed #d6dade}
.dg-lane .c i{position:relative;width:30px;height:30px;border-radius:50%}
.dg-lane .c i.e{background:var(--navy)}
.dg-lane .c i.p{background:#e8c400}
/* payment timeline */
.dg-pay{background:#fff;border-radius:8px;padding:70px 90px 40px}
.dg-pay .track{position:relative;height:4px;background:var(--navy);border-radius:2px}
.dg-pay .track i{position:absolute;top:-10px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:#fff;border:4px solid var(--navy)}
.dg-pay .track i.end{background:#e8c400;border-color:#e8c400;width:30px;height:30px;margin-left:-15px;top:-13px}
.dg-pay .br{position:absolute;left:66%;right:0;top:-46px;height:22px;border:2px solid #e8c400;border-bottom:none;border-radius:6px 6px 0 0}
.dg-pay .br span{position:absolute;left:50%;top:-14px;transform:translateX(-50%);background:#e8c400;font-weight:800;font-size:13px;padding:2px 14px;border-radius:20px;white-space:nowrap}
.dg-pay .lbls{position:relative;height:80px;margin-top:22px}
.dg-pay .lbls div{position:absolute;transform:translateX(-50%);text-align:center;width:180px}
.dg-pay .lbls b{display:block;font-family:"Zen Old Mincho",serif;font-size:16px}
.dg-pay .lbls small{display:block;font-size:12px;color:var(--sub)}
/* trio */
.dg-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:60px}
.dg-trio>div{background:#fff;border-radius:8px;padding:34px 24px;text-align:center}
.dg-trio .cir{border-color:#e8c400;color:#7a6500;background:#fffbe3}
.dg-trio b{display:block;font-family:"Zen Old Mincho",serif;font-size:19px;margin-top:14px}
.dg-trio span{display:block;font-size:13px;color:var(--sub);margin-top:6px}
.nums .ic{width:30px;height:30px;color:var(--y);display:block;margin:0 auto 6px}
@media(max-width:860px){
 .dg-flow{grid-template-columns:1fr;padding:34px 22px;gap:6px}
 .dg-flow .arrows{grid-template-columns:1fr 1fr;padding:6px 0 14px;gap:10px}
 .ar{height:64px;margin:0}
 .ar::before{left:50%;right:auto;top:0;bottom:12px;width:3px;height:auto}
 .ar::after{left:50%;right:auto;top:auto;bottom:0;margin-left:-7px;border:7px solid transparent;border-top:13px solid}
 .ar.wk::after{border-top-color:var(--navy);border-left-color:transparent}
 .ar.mn::after{border-top-color:#e8c400;border-left-color:transparent}
 .ar span,.ar.mn span{top:20px;left:auto;right:auto;width:46%;text-align:left;font-size:11.5px}
 .ar.wk span{left:0;text-align:right;width:44%}
 .ar.mn span{left:56%}
 .dg-flow ul{max-width:260px;margin:14px auto 0}
 .dg-steps{grid-template-columns:1fr 1fr;row-gap:30px}.dg-steps::before{display:none}
 .line-row{grid-template-columns:minmax(0,1fr);gap:36px}.line-row h3{font-size:22px}
 .map-row{grid-template-columns:minmax(0,1fr);gap:30px}
 .dg-lane-wrap{padding:18px}.dg-lane{grid-template-columns:96px repeat(var(--n),minmax(80px,1fr));min-width:820px}.swipe{display:block}
 .dg-pay{padding:30px 22px}
 .dg-pay .track{display:none}
 .dg-pay .lbls{height:auto;margin:0;display:grid;gap:0}
 .dg-pay .lbls div{position:static;transform:none;width:auto;text-align:left;padding:12px 0 12px 28px;border-left:3px solid var(--navy);margin-left:8px;position:relative}
 .dg-pay .lbls div::before{content:"";position:absolute;left:-11px;top:16px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--navy)}
 .dg-pay .lbls div:last-child{border-left-color:#e8c400}
 .dg-pay .lbls div:last-child::before{background:#e8c400;border-color:#e8c400}
 .dg-trio{grid-template-columns:minmax(0,1fr);gap:12px}
}