.mail-dialogue{padding:55px 2.8vw 35px;max-width:1500px;margin:0 auto;color:#16394f;font-family:Onest,sans-serif;scroll-margin-top:100px}
.mail-dialogue *{box-sizing:border-box}
.mail-dialogue__scene{position:relative;isolation:isolate;min-height:700px;overflow:hidden;border-radius:18px;background:#edf3f5}
.mail-dialogue__art{position:absolute;top:0;bottom:0;left:-10%;width:110%;max-width:none;height:100%;object-fit:cover;object-position:center;z-index:-2}
.mail-dialogue__content{width:38%;margin-left:62%;padding:150px 42px 36px 0}
.mail-dialogue h2{position:absolute;left:7.5%;top:34px;max-width:450px;margin:0;font-size:clamp(34px,3vw,44px);font-weight:430;line-height:1.14;letter-spacing:-.04em;color:#16394f;text-wrap:balance}
.mail-dialogue__flow{position:relative;margin:0 0 0 -16px;width:calc(100% + 16px);font-size:14px;text-align:left}
.mail-dialogue__inbox{padding:16px 18px 12px;background:#ffffffef;border:1px solid #cedce6;border-radius:12px;box-shadow:0 14px 30px -22px #234a6270}
.mail-dialogue__source{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.mail-dialogue__source>svg{flex:none;width:24px;height:24px;stroke:#527a98;stroke-width:1.5}
.mail-dialogue__source strong{font-size:14px;font-weight:540;letter-spacing:-.02em}
.mail-dialogue__connected{display:flex;gap:5px;align-items:center;margin-left:auto;color:#42637a;font-size:11px;white-space:nowrap}
.mail-dialogue__connected i{display:block;width:4px;height:4px;border-radius:50%;background:#4f819d}
.mail-dialogue__thread{display:flex;align-items:center;gap:10px;min-height:34px;padding:7px 9px;color:#647b8c;border-top:1px solid #edf1f5;font-size:13px}
.mail-dialogue__thread p{margin:0;line-height:1.4}.mail-dialogue__thread q{display:block;margin-top:5px;quotes:none;font-size:12px;line-height:1.45;color:#607789}.mail-dialogue__thread:has(q){align-items:flex-start}.mail-dialogue__thread:has(q)>span{margin-top:2px}.mail-dialogue__thread:has(q)>i{flex:none;margin-top:7px}.mail-dialogue__thread--selected q{color:#476780}
.mail-dialogue__thread>span{font-size:17px;color:#7c98aa;line-height:1}
.mail-dialogue__thread--selected{color:#234c70;background:#edf4fc;border:1px solid #d9e6f5;border-radius:6px;margin-bottom:3px}
.mail-dialogue__thread--selected+div{border-top:0}
.mail-dialogue__thread i{display:block;width:5px;height:5px;border-radius:50%;background:#6d9dd4;margin-left:auto}
.mail-dialogue__handoff{height:60px;display:flex;align-items:center;justify-content:center;padding-left:24px}
.mail-dialogue__handoff svg{display:block;width:44px;height:44px}
.mail-dialogue__route-arrow{fill:#225c91;stroke:none}
@media(max-width:700px){.mail-dialogue__handoff{padding-left:16px}}
.mail-dialogue__destination{position:relative;padding:18px 21px 8px;margin-left:24px;background:#fafdff;border:1px solid #a8c8e0;border-top:3px solid #2e6ba1;border-radius:11px;box-shadow:0 16px 34px -22px #244c6866}
.mail-dialogue__destination-head{display:flex;gap:8px;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid #dce7ef;color:#43647d;font-size:12px;font-weight:500}
.mail-dialogue__destination-head img{width:78px;height:auto;display:block}
.mail-dialogue__records{display:flex;flex-direction:column}
.mail-dialogue__record{display:block;padding:13px 0}
.mail-dialogue__record+.mail-dialogue__record{border-top:1px solid #e3ecf2}
.mail-dialogue__record-icon{display:none}
.mail-dialogue__record-icon svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.5}
.mail-dialogue__record-label{display:block;color:#426e8c;font-size:12px;font-weight:500;line-height:1.35;margin-bottom:4px}
.mail-dialogue__record strong{display:block;color:#18374b;font-size:17px;line-height:1.25;font-weight:470;letter-spacing:-.015em}
@media(min-width:1400px){.mail-dialogue__content{padding-top:195px;padding-bottom:45px}.mail-dialogue__scene{min-height:820px}.mail-dialogue h2{top:42px;max-width:520px}}
@media(max-width:1100px) and (min-width:701px){.mail-dialogue__scene{min-height:790px}.mail-dialogue__art{left:-22%;width:122%;object-position:center}.mail-dialogue__content{width:44%;margin-left:56%;padding:220px 28px 35px 0}.mail-dialogue h2{left:7%;top:32px;max-width:380px;font-size:33px}.mail-dialogue__record strong{font-size:16px}}
@media(max-width:700px){.mail-dialogue{padding:30px 12px}.mail-dialogue__scene{min-height:0;overflow:hidden;border-radius:14px;background:#dce7ef;padding-top:345px}.mail-dialogue__art{left:0;width:100%;height:325px;object-position:38% center;border-radius:14px 14px 0 0}.mail-dialogue__content{width:auto;margin:0;padding:0 24px 30px;position:relative}.mail-dialogue h2{position:static;font-size:32px;max-width:none}.mail-dialogue__flow{margin:24px 0 0;width:100%}.mail-dialogue__destination{margin-left:16px}.mail-dialogue__inbox{padding:15px}.mail-dialogue__record strong{font-size:16px}.mail-dialogue__connected{font-size:9px}}

/* B: Pale enamel, narrow blue contour and subtle highlight. */
.mail-dialogue__handoff svg{overflow:visible;filter:drop-shadow(0 2px 1.5px #173e6433)}
.mail-dialogue__route-arrow{fill:url(#mail-arrow-b);stroke:#326b9a;stroke-width:1.45;stroke-linejoin:round;paint-order:fill stroke}