/* Five linked workflow steps, with a readable vertical layout on phones. */
#workflow .workflow-path{grid-template-columns:repeat(5,minmax(0,1fr))}
#workflow .workflow-path:before,#workflow .workflow-path:after{left:10%;right:10%}
#workflow .workflow-step strong{font-size:clamp(24px,2.4vw,30px);line-height:1.12;min-height:68px;display:grid;place-items:center;max-width:210px}
#workflow .workflow-caption{white-space:normal;max-width:170px;font-size:11px;line-height:1.5}
.notification-section{background:#fafaf7;color:#27251f;padding:76px 8% 88px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8%;border-top:1px solid #d9dad2}
.notification-copy .eyebrow{color:#8b6a38;font-size:10px;letter-spacing:1.5px}
.notification-copy h2{font:400 clamp(42px,4.5vw,66px)/1.03 CRMSerif,Georgia,serif;letter-spacing:-1.3px;margin:25px 0}
.notification-copy h2 em{color:#8b6a38;font-weight:400}
.notification-copy>p{font-size:17px;line-height:1.8;margin:0 0 13px;max-width:440px;color:#4e4d44}
.notification-copy>p strong{font-weight:600;color:#27251f}
.notification-copy>p.notification-detail{font-size:14px;color:#6d6c65;line-height:1.8}
.notification-link{display:inline-flex;gap:28px;align-items:center;font-size:13px;color:#795d34;border-bottom:1px solid #b8a079;padding:12px 0;margin-top:14px}
.notification-link span{font-size:22px;transition:transform .3s}
.notification-link:hover span{transform:translate(3px,-3px)}
.notification-preview{background:#fff;border:1px solid #ddded7;box-shadow:0 18px 55px -35px #3b352e45;min-width:0}
.notification-preview-top{padding:18px 22px;border-bottom:1px solid #e7e7e1;display:flex;gap:14px;justify-content:space-between;align-items:center;color:#706148;font-size:10px;letter-spacing:1px}
.notification-preview-top small{font-size:9px;color:#858578;letter-spacing:.7px;white-space:nowrap}
.notification-stream{list-style:none;margin:0;padding:9px 22px}
.notification-row{display:grid;grid-template-columns:42px 1fr 8px;align-items:center;gap:17px;padding:25px 0;position:relative}
.notification-row+.notification-row{border-top:1px solid #e7e7e1}
.notification-icon{width:42px;height:42px;border:1px solid #d9c9ab;color:#8b6a38;display:grid;place-items:center;border-radius:50%;animation:notice-ring 9s var(--notice-delay) infinite}
.notification-icon svg{width:21px;height:21px}
.notification-channel{font-size:10px;letter-spacing:1.1px;color:#8b6a38;font-weight:600}
.notification-row h3{font-size:17px;line-height:1.4;margin:6px 0 4px;font-weight:600;letter-spacing:-.3px;color:#27251f}
.notification-row p{font-size:13px;line-height:1.6;color:#6d6c65;margin:0}
.notification-signal{width:6px;height:6px;border-radius:50%;background:#b19769;animation:notice-signal 9s var(--notice-delay) infinite}
.notification-preview-note{border-top:1px solid #e7e7e1;padding:16px 22px;margin:0;color:#858578;font-size:11px;line-height:1.6}
@keyframes notice-ring{0%,30%,100%{box-shadow:0 0 0 0 #b9a17400}8%,20%{box-shadow:0 0 0 6px #b9a17415;border-color:#a98b56}}
@keyframes notice-signal{0%,30%,100%{opacity:.4;box-shadow:0 0 0 0 #b9a17400}8%,20%{opacity:1;box-shadow:0 0 0 4px #b9a17420}}
@media(max-width:1000px){.notification-section{gap:5%;padding-left:6%;padding-right:6%}.notification-preview-top{padding:16px;gap:8px;font-size:8px}.notification-preview-top small{font-size:8px}.notification-stream{padding:8px 16px}.notification-row{gap:12px;grid-template-columns:38px 1fr 6px}.notification-icon{width:38px;height:38px}.notification-row h3{font-size:16px}}
@media(max-width:750px){#workflow .workflow-path{grid-template-columns:1fr;gap:24px;padding-top:28px}#workflow .workflow-path:before,#workflow .workflow-path:after{left:57px;right:auto;top:50px;bottom:28px;height:auto;width:1px}#workflow .workflow-path:after{transform:scaleY(var(--workflow-progress));transform-origin:top}#workflow .workflow-step{display:grid;grid-template-columns:24px 40px minmax(0,1fr);column-gap:14px;row-gap:4px;text-align:left;padding:0;align-items:center}#workflow .workflow-number{grid-column:1;grid-row:1/3;margin:0;font-size:10px}#workflow .workflow-icon{grid-column:2;grid-row:1/3;width:40px;height:40px;box-shadow:0 0 0 7px #fafaf7}#workflow .workflow-step strong{grid-column:3;grid-row:1;display:block;font-size:25px;min-height:0;max-width:none;margin:0}#workflow .workflow-caption{grid-column:3;grid-row:2;max-width:none;margin:0;font-size:12px}.notification-section{grid-template-columns:1fr;padding:55px 6% 60px;gap:35px}.notification-copy h2{font-size:48px}.notification-copy>p{font-size:16px}.notification-preview-top{padding:16px 18px;font-size:9px}.notification-stream{padding:5px 18px}.notification-row{padding:23px 0;gap:13px}.notification-row h3{font-size:17px}.notification-preview-note{padding:15px 18px}}
.motion-paused #workflow .workflow-path:after{transform:none}
@media(prefers-reduced-motion:reduce){#workflow .workflow-path:after{transform:none}.notification-icon,.notification-signal{animation:none}.notification-link span{transition:none}.notification-link:hover span{transform:none}}