.prn-shift-flow {
    position: relative;
    background: linear-gradient(180deg, #fff 0%, #f3f6fc 100%);
    z-index: 2;
    color: #fff;
}
.prn-shift-flow h2 { color: #274fa2; margin: 18px auto; max-width: 940px; letter-spacing: -.035em; line-height: 1.2; }
.prn-shift-flow .subtitle-one { color: #4968ac; background: #edf2fc; border: 1px solid #dce5f6; }
.prn-shift-flow .work-process__four-title { margin-bottom: 52px; }
.prn-shift-flow .work-process__four-title > p { color: #71809b; }
.prn-flow-shell { position: relative; }
.prn-flow-scroll { overflow-x: auto; padding: 16px 4px 24px; scrollbar-width: thin; scrollbar-color: #547294 transparent; }
.prn-flow-track { display: flex; list-style: none; padding: 0; margin: 0; min-width: 920px; }
.prn-flow-step { flex: 1 1 0; position: relative; min-width: 0; }
.prn-flow-step:not(:last-child)::after { content: ''; position: absolute; left: calc(50% + 32px); right: calc(-50% + 32px); top: 29px; height: 1px; background: #c9d5e9; }
.prn-flow-step:not(:last-child)::before { content: ''; position: absolute; right: -3px; top: 26px; width: 7px; height: 7px; border-top: 1px solid #8aa5ca; border-right: 1px solid #8aa5ca; transform: rotate(45deg); }
.prn-flow-button {
    width: 100%; min-height: 130px; padding: 0 14px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 24px;
    border: 0; border-radius: 10px; background: transparent;
    color: #526887; font: inherit; cursor: pointer;
    transition: color .2s;
}
.prn-flow-button:hover, .prn-flow-button[aria-expanded="true"] { color: #274fa2; }
.prn-flow-button:focus-visible, .prn-flow-close:focus-visible { outline: 2px solid #90cdff; outline-offset: 5px; }
.prn-flow-number {
    display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid #c8d5ee;
    border-radius: 16px; background: #fff; color: #4968ac; font-size: 18px; font-weight: 600;
    transition: background .25s, color .25s, box-shadow .25s, border-color .25s;
}
.prn-flow-button:hover .prn-flow-number { border-color: #4968ac; color: #274fa2; }
.prn-flow-button[aria-expanded="true"] .prn-flow-number { background: #315ca5; color: #fff; border-color: #315ca5; box-shadow: 0 8px 20px #315ca530; }
.prn-flow-label { max-width: 158px; font-size: 15px; font-weight: 500; line-height: 1.5; }
.prn-flow-stage { position: absolute; top: calc(100% - 12px); left: 0; right: 0; z-index: 20; }
.prn-flow-placeholder { display: none; }
.has-active-step .prn-flow-placeholder { visibility: hidden; }
.prn-flow-detail {
    position: relative;
    width: min(360px, 100%); margin-left: var(--detail-left, 0px);
    padding: 20px 22px 22px; background: #fff; color: #233d5e; border: 1px solid #e4edf8;
    border-radius: 14px; border-top: 2px solid #4968ac; box-shadow: 0 12px 32px #203a701a, 0 2px 6px #203a7008;
    animation: prn-detail-enter .2s ease both;
}
.prn-flow-detail::before { content: ''; position: absolute; top: -8px; left: var(--detail-arrow, 50px); width: 14px; height: 14px; background: #fff; border-left: 2px solid #4968ac; border-top: 2px solid #4968ac; transform: translateX(-50%) rotate(45deg); }
.prn-flow-detail[hidden] { display: none; }
.prn-flow-art { display: none; }
.prn-flow-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #5b789b; font-size: 10px; letter-spacing: .16em; font-weight: 700; }
.prn-flow-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4b8ccb; }
.prn-flow-detail h3 { color: #172f50; font-size: 17px; line-height: 1.35; letter-spacing: -.015em; margin: 8px 14px 8px 0; }
.prn-flow-detail p { color: #64748a; margin: 0; font-size: 14px; line-height: 1.6; text-align: left; }
.prn-flow-close { position: absolute; z-index: 1; right: 10px; top: 10px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f1f5fa; color: #67809d; font-size: 22px; line-height: 1; padding: 0; cursor: pointer; }
.prn-flow-close:hover { background: #e1ecf8; color: #203e65; }
.prn-flow-mobile-hint { display: none; }
@keyframes prn-detail-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 991px) {
    .prn-flow-mobile-hint { display: block; margin: 20px 0 0; font-size: 13px; color: #71809b; text-align: center; }
}
@media (max-width: 575px) {
    .prn-shift-flow .work-process__four-title { margin-bottom: 28px; }
    .prn-flow-detail { padding: 18px 20px 20px; }
    .prn-flow-detail h3 { font-size: 16px; }
    .prn-flow-detail p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .prn-flow-button, .prn-flow-number { transition: none; }
    .prn-flow-detail { animation: none; }
}