.mk-workflow{--paper:#fbfcf7;--ink:#171d18;--muted:#657063;--line:#e0e5da;--lime:#caff52;--orange:#df501d;max-width:1180px;margin:auto;scroll-margin-top:100px;padding:64px 28px 24px;color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}

.mk-workflow,.mk-workflow *{box-sizing:border-box}
body:has(> main.mk-workflow){margin:0;background:#fbfcf7}
.mk-workflow button{font:inherit;color:inherit}
.mk-workflow button:focus-visible{outline:3px solid #527b1c;outline-offset:5px}
.mk-workflow button{cursor:pointer}
.mk-workflow .eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;letter-spacing:1.8px;font-weight:650}
.mk-workflow .brand-mark{display:grid;place-items:center;width:28px;height:28px;background:var(--ink);color:var(--lime);border-radius:8px;font-size:10px;letter-spacing:-1px}
.mk-workflow .intro{text-align:center}
.mk-workflow .intro :is(h1,h2){font-weight:560;font-size:clamp(34px,4.3vw,56px);line-height:1.1;letter-spacing:-2.4px;margin:24px 0 18px}
.mk-workflow .intro em{font-style:normal;background:linear-gradient(transparent 63%,#d8f9a3 63%,#d8f9a3 94%,transparent 94%)}
.mk-workflow .intro>p{font-size:16px;line-height:1.65;color:var(--muted);margin:0}
.mk-workflow .scenario-tabs{display:flex;width:fit-content;max-width:100%;margin:32px auto 30px;padding:5px;border:1px solid var(--line);border-radius:13px;background:#f0f3e9;gap:5px}
.mk-workflow .scenario-tabs button{border:1px solid transparent;background:transparent;padding:12px 18px;border-radius:9px;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;white-space:nowrap;transition:background .2s,box-shadow .2s}
.mk-workflow .scenario-tabs button[aria-selected=true]{background:#fff;border-color:#e2e7db;box-shadow:0 2px 5px #28371a09}
.mk-workflow .scenario-tabs button>span{font-size:19px;font-weight:400}
.mk-workflow .demo{display:grid;grid-template-columns:315px minmax(0,1fr);border:1px solid #d9e0d1;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 14px 44px #27332206}
.mk-workflow .journey{padding:26px 22px;background:#f5f7ef;border-right:1px solid var(--line)}
.mk-workflow .order-chips{display:flex;gap:7px;margin:0 0 24px}
.mk-workflow .order-chips span{background:#fff;border:1px solid var(--line);padding:6px 10px;border-radius:6px;font-size:12px}
.mk-workflow .steps{display:grid;gap:7px}
.mk-workflow .step{display:grid;grid-template-columns:28px 1fr;gap:9px;text-align:left;width:100%;padding:14px 10px;background:transparent;border:1px solid transparent;border-radius:10px;transition:background .25s,border-color .25s}
.mk-workflow .step[aria-current=step]{background:#eaf5d7;border-color:#d6e4c0}
.mk-workflow .step-number{font-family:ui-monospace,monospace;font-size:12px;color:#65705b;margin-top:2px}
.mk-workflow .step[aria-current] .step-number{color:#496729}
.mk-workflow .step-owner{display:block;font-size:12px;letter-spacing:.8px;color:#65705b;margin-bottom:7px}
.mk-workflow .step strong{display:block;font-size:14px;font-weight:650;letter-spacing:-.2px}
.mk-workflow .step-copy{display:block;font-size:12px;line-height:1.6;color:var(--muted);margin-top:7px}
.mk-workflow .reddit-scene{padding:26px 26px 18px;min-width:0;background:radial-gradient(ellipse at 80% 10%,#eff6e4,transparent 65%),#fcfdf9}
.mk-workflow .reddit-card{border:1px solid #dfe3db;border-radius:13px;background:#fff;box-shadow:0 16px 32px #21301b08;overflow:hidden}
.mk-workflow .reddit-bar{display:flex;align-items:center;gap:6px;padding:14px 20px;border-bottom:1px solid #edf0e9}
.mk-workflow .reddit-logo{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#f45222;color:#fff;font-size:14px;font-weight:750}
.mk-workflow .reddit-bar>strong{font-size:22px;letter-spacing:-1px}
.mk-workflow .reddit-search{font-size:12px;background:#f4f6f2;border-radius:20px;color:#65705b;padding:8px 14px;flex:1;margin-left:24px}
.mk-workflow .window-menu{color:#65705b;letter-spacing:2px;margin-left:9px}
.mk-workflow .post{padding:23px 24px 18px}
.mk-workflow .post-meta{display:flex;align-items:center;gap:7px;font-size:12px;color:#65705b}
.mk-workflow .post-meta strong{font-size:12px;color:#46503f}
.mk-workflow .community-icon{display:grid;place-items:center;border-radius:50%;background:#e3e9fa;color:#6375aa;width:24px;height:24px;font-weight:650}
.mk-workflow .post h2{font-size:21px;line-height:1.35;font-weight:650;letter-spacing:-.5px;margin:14px 0 9px}
.mk-workflow .post>p{font-size:13px;line-height:1.7;color:#63705f;margin:0}
.mk-workflow .post-actions{display:flex;gap:15px;margin-top:16px;font-size:12px;color:#606b59;align-items:center}
.mk-workflow .post-actions>span:first-child{border-radius:20px;padding:7px 10px;background:#f3f5ef}
.mk-workflow .comments-heading{border-top:1px solid #edf0e9;margin:0 24px;padding:17px 0 10px;display:flex;justify-content:space-between;font-size:12px;color:#65705b}
.mk-workflow .comments-heading strong{color:#59634f}
.mk-workflow .comments-heading>span:last-child{color:#65705b}
.mk-workflow .comments{position:relative;height:321px;margin:0 16px;overflow:hidden}
.mk-workflow .background-comment{position:absolute;left:8px;right:8px;display:flex;gap:9px;height:74px;filter:blur(2.5px);opacity:.42;user-select:none;transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .3s;padding-top:10px}
.mk-workflow .ghost-avatar{flex-shrink:0;width:22px;height:22px;background:#d7def0;border-radius:50%}
.mk-workflow .ghost-avatar.second{background:#e8dcc5}
.mk-workflow .background-comment>div{flex:1}
.mk-workflow .ghost-meta{width:120px;height:7px;background:#bbc3b5;border-radius:3px;margin:3px 0 11px}
.mk-workflow .ghost-line{height:7px;background:#c6cdc0;border-radius:3px;margin:7px 0}
.mk-workflow .ghost-line.long{width:92%}
.mk-workflow .ghost-line.short{width:56%}
.mk-workflow .ghost-line.medium{width:75%}
.mk-workflow .ghost-votes{display:block;font-size:12px;margin-top:9px}
.mk-workflow .featured-comment{position:absolute;left:0;right:0;top:0;padding:15px 16px 12px;border:1px solid #d7e6c5;background:#fbfef6;border-radius:10px;box-shadow:0 4px 10px #3e592405;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .3s;z-index:2}
.mk-workflow .featured-comment[hidden]{display:none}
.mk-workflow .comment-meta{display:flex;align-items:center;gap:7px;font-size:12px;color:#65705b;white-space:nowrap}
.mk-workflow .comment-meta strong{font-weight:550;color:#54624a}
.mk-workflow .comment-avatar{display:grid;place-items:center;background:#e4edcf;width:23px;height:23px;border-radius:50%;color:#749148}
.mk-workflow .your-comment{margin-left:auto;color:#59743c;background:#edf4e2;padding:4px 6px;border-radius:4px;font-size:12px;letter-spacing:.2px}
.mk-workflow .featured-comment p{font-size:13px;line-height:1.7;color:#414c3a;margin:11px 0}
.mk-workflow .product-mention{background:#e5f5c9;color:#2c421b;font-weight:650;border-radius:3px;padding:1px 3px;box-decoration-break:clone}
.mk-workflow .comment-actions{position:relative;display:flex;align-items:center;gap:16px;color:#65705b;font-size:12px}
.mk-workflow .vote-pill{display:flex;align-items:center;gap:9px;background:#eff3e8;border-radius:20px;padding:6px 10px;color:#677456;transition:background .25s,color .25s}
.mk-workflow .vote-pill.active{color:#ca4a20;background:#fff0e8}
.mk-workflow .vote-pill strong{font-size:12px}
.mk-workflow .comment-actions>#vote-burst{position:absolute;left:28px;top:0;color:#ca4a20;font-weight:700;opacity:0}
.mk-workflow .burst{animation:mk-vote-rise .7s ease-out}
.mk-workflow .scene-status{display:flex;align-items:center;gap:8px;background:#f6f8f1;border-top:1px solid #e7ecdf;padding:13px 18px;min-height:55px;color:#657456;font-size:12px;line-height:1.4}
.mk-workflow .status-icon{display:grid;place-items:center;background:#e9efdf;width:24px;height:24px;border-radius:50%;flex-shrink:0}
.mk-workflow .delivery-count{margin-left:auto;white-space:nowrap;font-size:12px;color:#65705b}
.mk-workflow .scene-caption{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 0;font-size:12px;color:#65705b}
.mk-workflow .caption-arrow{font-size:22px;color:#90a875}
.mk-workflow .demo-note{display:flex;justify-content:space-between;gap:20px;padding:18px 4px;color:#65705b;font-size:12px;line-height:1.6}
.mk-workflow .demo[data-phase="2"] .scene-caption{color:#57723b}
@keyframes mk-vote-rise{0%{opacity:1;transform:translateY(0)}
100%{opacity:0;transform:translateY(-23px)}
}

.mk-workflow .mobile-stage-copy{display:none}

.mk-workflow .demo[data-phase="0"] .featured-comment{border-color:#dfe3db;background:#fff;box-shadow:none}

.mk-workflow .draft-heading,.mk-workflow .draft-field,.mk-workflow .draft-actions{display:none}
.mk-workflow .demo[data-phase="0"] .comment-meta,.mk-workflow .demo[data-phase="0"] #comment-text,.mk-workflow .demo[data-phase="0"] .comment-actions{display:none}
.mk-workflow .demo[data-phase="0"] .draft-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:12px;color:#58634f}
.mk-workflow .draft-heading #draft-label{font-weight:600}
.mk-workflow .draft-heading>span{color:#6b7562;font-size:12px}
.mk-workflow .demo[data-phase="0"] .draft-field{display:grid;border:1px solid #d9ded3;border-radius:7px;padding:12px;background:#fafbf8;color:#414c3a;font-size:13px;line-height:1.7;min-height:108px;overflow-wrap:anywhere}
.mk-workflow .draft-measure,.mk-workflow .draft-content{grid-area:1/1;white-space:pre-wrap}
.mk-workflow .draft-measure{visibility:hidden;pointer-events:none}
.mk-workflow .typing-caret{display:inline-block;height:1em;width:1.5px;margin-left:1px;background:#65705b;vertical-align:-.15em;animation:mk-caret-blink .65s step-end infinite}
.mk-workflow .demo[data-phase="0"] .draft-actions{display:flex;position:relative;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.mk-workflow .draft-actions>span{font-size:12px;color:#65705b}
.mk-workflow #order-demo{border:0;border-radius:7px;min-width:104px;padding:10px 15px;background:#202820;color:#fff;font-size:12px;font-weight:600;transition:transform .15s,background .15s,color .15s}
.mk-workflow #order-demo:disabled{cursor:default;opacity:.5}
.mk-workflow .featured-comment[data-draft-state="clicking"] #order-demo{transform:scale(.94);background:#caff52;color:#171d18;box-shadow:0 0 0 5px #caff5233}
.mk-workflow .featured-comment[data-draft-state="ordered"] #order-demo{opacity:1;background:#e7f4d4;color:#40592b}
.mk-workflow .featured-comment[data-draft-state="ordered"] .order-arrow{display:none}
.mk-workflow .featured-comment[data-draft-state="ordered"] .typing-caret{visibility:hidden}
.mk-workflow .order-pointer{pointer-events:none;position:absolute;right:24px;bottom:0;width:24px;height:30px;z-index:3;opacity:var(--pointer-opacity,0);transform:translate(var(--pointer-x,70px),var(--pointer-y,-55px))}
.mk-workflow .demo[data-paused="true"] .typing-caret{animation-play-state:paused}
@keyframes mk-caret-blink{50%{opacity:0}}

@media(min-width:1400px){.mk-workflow{padding-top:78px}
}

@media(max-width:1000px){.mk-workflow{padding:40px 22px 18px}
.mk-workflow .demo{grid-template-columns:280px minmax(0,1fr)}
.mk-workflow .journey{padding:22px 16px}
.mk-workflow .reddit-scene{padding:22px 16px 16px}
.mk-workflow .reddit-search{margin-left:10px}
.mk-workflow .comment-meta>span:nth-child(3){display:none}
.mk-workflow .post{padding:20px}
.mk-workflow .your-comment{font-size:12px}
}

@media(max-width:760px){.mk-workflow{padding:34px 16px 16px}
.mk-workflow .intro :is(h1,h2){font-size:38px;letter-spacing:-1.7px}
.mk-workflow .intro>p{font-size:14px}
.mk-workflow .eyebrow{font-size:12px;letter-spacing:1px}
.mk-workflow .scenario-tabs{width:100%;margin:26px auto 22px;gap:2px}
.mk-workflow .scenario-tabs button{flex:1;justify-content:center;padding:11px 8px;font-size:12px;gap:6px}
.mk-workflow .scenario-tabs button>span{font-size:16px}
.mk-workflow .demo{grid-template-columns:1fr}
.mk-workflow .journey{border-right:0;border-bottom:1px solid var(--line);padding:20px}
.mk-workflow .order-chips{position:static;margin:0;gap:5px}
.mk-workflow .order-chips span{padding:6px;font-size:12px}
.mk-workflow .journey{position:relative}
.mk-workflow .steps{display:flex;gap:6px;margin-top:20px}
.mk-workflow .step{padding:10px 6px;display:block;flex:1}
.mk-workflow .step-number{display:block;margin:0 0 6px}
.mk-workflow .step-owner{font-size:12px;letter-spacing:0;min-height:28px;margin-bottom:4px}
.mk-workflow .step strong{font-size:12px;line-height:1.45}
.mk-workflow .step-copy{display:none}
.mk-workflow .mobile-stage-copy{display:block;font-size:12px;line-height:1.6;color:var(--muted);min-height:58px;margin:12px 6px 0}
.mk-workflow .reddit-scene{padding:18px 12px 16px}
.mk-workflow .reddit-bar{padding:12px 15px}
.mk-workflow .reddit-search{padding:7px 10px;font-size:12px}
.mk-workflow .post{padding:19px 16px 16px}
.mk-workflow .post h2{font-size:19px}
.mk-workflow .post>p{font-size:12px}
.mk-workflow .comments-heading{margin:0 16px;font-size:12px;gap:12px}
.mk-workflow .comments-heading>span:last-child{max-width:52%;text-align:right}
.mk-workflow .comments{margin:0 8px;height:355px}
.mk-workflow .featured-comment{padding:12px}
.mk-workflow .comment-meta{gap:5px}
.mk-workflow .comment-meta strong{font-size:12px}
.mk-workflow .comment-avatar{width:19px;height:19px}
.mk-workflow .your-comment{font-size:12px;padding:3px 4px;letter-spacing:0}
.mk-workflow .featured-comment p{font-size:12px;line-height:1.7}
.mk-workflow .demo[data-phase="0"] .draft-field{font-size:12px;min-height:145px}
.mk-workflow .scene-status{padding:12px 13px;gap:7px;flex-wrap:wrap}
.mk-workflow .scene-status #status{flex:1}
.mk-workflow .delivery-count{margin-left:31px;width:100%}
.mk-workflow .scene-caption{justify-content:start;margin:12px 6px 0;font-size:12px}
.mk-workflow .demo-note{flex-direction:column;gap:4px;padding-top:14px;font-size:12px}
}

@media(max-width:370px){.mk-workflow .scenario-tabs button{min-width:0;white-space:normal;padding:10px 5px;line-height:1.4}.mk-workflow .scenario-tabs button>span{display:none}.mk-workflow{padding-inline:10px}
.mk-workflow .intro :is(h1,h2){font-size:33px}
.mk-workflow .journey{padding:16px 12px}
.mk-workflow .order-chips{right:12px;top:16px}
.mk-workflow .your-comment{margin-left:0}
.mk-workflow .comment-meta{flex-wrap:wrap}
.mk-workflow .reddit-search{display:none}
}

@media(prefers-reduced-motion:reduce){.mk-workflow,.mk-workflow *,.mk-workflow *::before,.mk-workflow *::after{animation:none!important;transition:none!important}
}