.workflow-main{position:relative;z-index:1;padding:170px 28px 50px}
.workflow-story{width:min(1120px,100%);margin:auto;text-align:center}
.workflow-story h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(56px,7vw,98px);line-height:1.05;letter-spacing:-.055em;margin:0 0 20px}
.workflow-pain{font-size:clamp(23px,2.5vw,32px);font-weight:500;letter-spacing:-.045em;margin:0 0 12px}
.workflow-definition{font-size:17px;line-height:1.6;color:#c4ccd9;margin:0}
.workflow-visual .night-moon{right:10%;top:20%;width:90px;opacity:.75}
.workflow-visual .rain-canvas{opacity:.42}
.flow-example{margin:32px auto 0;padding:24px 30px 0;border:1px solid #d7e3ff20;border-radius:26px;background:linear-gradient(135deg,#142035e8,#0a101ddd);box-shadow:0 24px 80px #03081235;text-align:left;overflow:hidden}
.flow-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;letter-spacing:.13em;color:#a6b5cc}
.example-tag{font-size:12px;letter-spacing:0;border:1px solid #c6d6f522;border-radius:20px;padding:6px 10px;color:#c0ccde}
.flow-steps{list-style:none;padding:0;margin:24px 0 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.flow-step{position:relative;min-width:0}
.node-track{height:74px;display:flex;align-items:center;position:relative;margin-bottom:20px}
.app-node{width:74px;height:74px;border-radius:23px;display:grid;place-items:center;flex:none;position:relative;z-index:1;border:1px solid #ffffff26;box-shadow:0 10px 30px #0004}
.app-node svg{width:38px;height:38px}
.whatsapp-node{background:linear-gradient(145deg,#29cc77,#11784b);color:#fff}
.assistant-node{background:linear-gradient(145deg,#9c77ed,#523484);color:#f5edff}
.gmail-node{background:linear-gradient(145deg,#fff,#e3e7ef)}
.flow-wire{position:absolute;left:92px;right:-16px;top:36px;height:1px;background:linear-gradient(90deg,#7895c361,#7895c328)}
.flow-wire:after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border:1px solid #95aed377;border-radius:50%}
.flow-wire i{position:absolute;width:6px;height:6px;background:#b8c9ee;border-radius:50%;top:-2.5px;box-shadow:0 0 13px #b8c9ee;animation:message-travel 5.5s linear infinite}
.step-assistant .flow-wire i{animation-delay:1.8s}
@keyframes message-travel{0%,12%{left:0;opacity:0}20%{opacity:1}60%{left:95%;opacity:1}65%,100%{left:95%;opacity:0}}
.app-label{display:block;font-size:10px;line-height:1.4;letter-spacing:.09em;color:#a0b0c6;margin-bottom:10px}
.step-copy h2{font-size:19px;font-weight:500;line-height:1.35;letter-spacing:-.035em;margin:0 0 18px;min-height:51px}
.message{font-size:13px;line-height:1.55;min-height:53px;display:flex;align-items:center;padding:12px 14px;border-radius:14px;background:#ffffff08;border:1px solid #cbd7ed18;color:#e3e9f2;position:relative}
.incoming{border-top-left-radius:3px}.outgoing{background:#27614740;border-color:#6db99122;border-top-right-radius:3px;padding-right:30px}
.message-check{position:absolute;right:9px;bottom:7px;font-size:10px;letter-spacing:-4px;color:#89c9bb}
.mail{gap:9px}.mail-indicator{width:6px;height:6px;border-radius:50%;background:#80a9ef;flex:none}
.step-note{font-size:12px;color:#9dacbf;line-height:1.6;margin:10px 0 0}
.flow-result{display:flex;gap:10px;align-items:center;justify-content:center;border-top:1px solid #d5e4ff15;margin:0 -30px;padding:18px 20px;background:#a9c7ff04;color:#bfccdf;font-size:14px}
.flow-result p{margin:0;line-height:1.5}.flow-result strong{color:#eff4fb;font-weight:500}.result-check{color:#9edabf}
.workflow-bottom{margin-top:25px;display:flex;align-items:center;justify-content:center;gap:38px}
.workflow-bottom p{text-align:left;color:#afbed2;font-size:13px;line-height:1.7;margin:0}
.workflow-cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 22px;background:#f0f2f6;color:#111a29;border-radius:30px;font-size:13px;font-weight:500;transition:transform .2s,background .2s}
.workflow-cta:hover{transform:translateY(-2px);background:#fff}
@media(max-width:760px){.workflow-main{padding:189px 18px 36px}.workflow-story h1{font-size:58px;margin-bottom:14px}.workflow-pain{font-size:24px;margin-bottom:9px}.workflow-definition{font-size:15px;line-height:1.55}.desktop-break{display:none}.workflow-visual .night-moon{right:6%;top:25%;width:58px;opacity:.45}.flow-example{padding:20px 18px 0;border-radius:22px;margin-top:23px}.flow-caption{font-size:10px;letter-spacing:.09em}.example-tag{display:none}.flow-steps{display:block;margin:20px 0}.flow-step{display:grid;grid-template-columns:46px 1fr;gap:16px;padding-bottom:26px}.flow-step:last-child{padding-bottom:0}.node-track{height:100%;margin:0;align-items:flex-start}.app-node{width:46px;height:46px;border-radius:15px}.app-node svg{width:27px;height:27px}.flow-wire{left:22px;right:auto;top:59px;width:1px;height:calc(100% - 44px);background:#8fa8d345}.flow-wire:after{top:auto;bottom:0;left:-2px;right:auto;width:5px;height:5px}.flow-wire i{left:-2.5px;top:0;animation-name:message-travel-down}.app-label{font-size:9px;letter-spacing:.055em;margin:0 0 5px}.step-copy h2{font-size:16px;min-height:0;margin:0 0 10px;line-height:1.35}.message{font-size:12px;padding:10px;min-height:0;line-height:1.5}.outgoing{padding-right:25px}.step-note{font-size:11px;margin-top:7px;line-height:1.5}.flow-result{margin:0 -18px;font-size:12px;padding:14px 15px;gap:8px}.flow-result strong{display:block}.workflow-bottom{flex-direction:column;gap:16px;margin-top:20px}.workflow-bottom p{text-align:center;font-size:12px}.workflow-cta{min-height:46px}.workflow-visual .rain-canvas{opacity:.28}}
@keyframes message-travel-down{0%,12%{top:0;opacity:0}20%{opacity:1}60%{top:90%;opacity:1}65%,100%{top:90%;opacity:0}}
@media(prefers-reduced-motion:reduce){.flow-wire i{animation:none;opacity:.6}.workflow-cta{transition:none}}
html.page-away .flow-wire i{animation-play-state:paused}
/* Keep the complete example within the first glance on compact screens. */
.workflow-main{padding-top:155px}.workflow-story h1{font-size:76px;margin-bottom:12px}.workflow-pain{font-size:26px;margin-bottom:8px}.workflow-definition{font-size:16px}.desktop-break{display:none}.flow-example{margin-top:24px}.flow-caption{display:none}.flow-steps{margin-top:0;margin-bottom:24px}.node-track{height:62px;margin-bottom:16px}.app-node{width:62px;height:62px;border-radius:20px}.flow-wire{top:30px;left:80px}.app-node svg{width:34px;height:34px}.app-label{font-size:11px;margin-bottom:8px}.step-copy h2{min-height:0;margin-bottom:12px;font-size:18px}.message{min-height:48px;font-size:13px}.flow-result{padding:15px 20px}
@media(max-width:760px){.workflow-main{padding-top:177px}.workflow-story h1{font-size:54px;margin-bottom:12px}.workflow-pain{font-size:23px}.workflow-definition{font-size:15px}.flow-steps{margin:0 0 18px}.node-track{height:100%;margin:0}.app-node{width:46px;height:46px;border-radius:15px}.app-node svg{width:27px;height:27px}.flow-wire{top:57px;left:22px}.app-label{font-size:10px;letter-spacing:.02em;margin-bottom:5px}.step-copy h2{font-size:16px;margin-bottom:8px}.message{min-height:0;font-size:12px}.flow-result{padding:13px 14px}.flow-step{padding-bottom:23px}}

@media(max-width:760px){.workflow-story h1{font-size:clamp(29px,10vw,54px);letter-spacing:-.055em}.workflow-pain{font-size:clamp(19px,5.5vw,23px);line-height:1.35}}

/* Three distinct reading levels against the night sky. */
.workflow-main{padding-top:166px}
.workflow-story h1{margin-bottom:23px}
.workflow-pain{font-size:28px;line-height:1.4;letter-spacing:-.035em;margin:0;color:#c7cbd7;font-weight:400;text-wrap:balance}
.workflow-pain strong{font-weight:600;color:#a7e8d8;text-shadow:0 2px 18px #70c5b31a}
.workflow-definition{max-width:580px;margin:17px auto 0;color:#b9c6dc;font-size:16px;line-height:1.7;letter-spacing:-.012em;text-wrap:balance}
.flow-example{margin-top:32px}
.workflow-bottom{margin-top:30px;gap:34px}
.workflow-bottom p{font-size:15px;line-height:1.6;color:#c5d2e5;letter-spacing:-.015em}
.workflow-bottom p strong{display:block;font-weight:550;color:#f1f4fa}
.workflow-bottom p span{display:block;margin-top:4px}
@media(max-width:760px){
 .workflow-main{padding-top:191px}
 .workflow-story h1{margin-bottom:23px}
 .workflow-pain{font-size:clamp(20px,5.5vw,24px);line-height:1.4}
 .workflow-definition{font-size:15px;line-height:1.65;margin-top:15px;max-width:320px}
 .flow-example{margin-top:27px}
 .workflow-bottom{gap:19px;margin-top:26px}
 .workflow-bottom p{font-size:14px;line-height:1.65;max-width:340px}
}