@font-face{font-family:Pretendard;src:url(/demos/payment-confirmation/font.woff2);font-display:swap}*{box-sizing:border-box}body{margin:0;background:#f4f6ef;color:#203e35;font:14px/1.6 Pretendard,sans-serif}button{font:inherit;cursor:pointer;color:#2c5146;background:#fff;border:1px solid #cbd8cf;border-radius:9px;min-height:42px;padding:9px 14px}button:disabled{cursor:default;opacity:.43}button:hover:not(:disabled){background:#eaf1e7}button:focus-visible,summary:focus-visible{outline:3px solid #347e9b;outline-offset:3px}.demo{max-width:1120px;margin:auto;padding:22px 26px}.demo-heading p{margin:0;font-size:12px;color:#6b8276}.demo-heading h1{font-size:25px;margin:5px 0 18px}.demo-top{display:flex;justify-content:space-between;align-items:center;gap:16px}.demo-top b{font-size:16px}.demo-top p{font-size:12px;color:#718374;margin:3px 0 0}.quiet{min-height:36px;font-size:12px;background:transparent}.cases{display:flex;gap:8px;margin:16px 0}.cases button{background:transparent;font-size:13px}.cases [aria-pressed=true]{color:#fff;background:#214e41;border-color:#214e41}.workspace{display:grid;grid-template-columns:minmax(0,340px) 64px minmax(0,1fr);align-items:stretch;gap:0}.app-panel,.server-panel{min-width:0;border:1px solid #bdcfbf;border-radius:15px;padding:16px;background:#e6efdf}.app-panel{background:#e8eff4;border-color:#bdceda}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px;margin-bottom:12px;color:#527c77;font-size:12px}.role{font-weight:750;color:#3a696c}.live-label{font-size:11px}.app-screen{border:1px solid #c7d5cf;background:#fff;border-radius:12px;overflow:hidden}.app-screen>header{padding:14px 18px 12px;background:#16483b;color:#f3f5ed}.app-screen>header span{font-size:9px;letter-spacing:.12em;color:#b4d3bc}.app-screen h2{font-size:20px;margin:1px 0}.app-body{padding:16px 18px 14px}.product{display:flex;gap:14px;align-items:center}.bag{position:relative;width:58px;height:72px;border:1px solid #b7a88b;background:#e9e0cb;border-radius:3px;padding:13px 5px 5px;text-align:center;display:flex;flex-direction:column;justify-content:space-between;flex:none}.bag:before{content:'';position:absolute;left:3px;right:3px;top:5px;height:2px;background:#c9b795}.bag small{font-size:7px;letter-spacing:.1em}.bag b{font-size:10px;color:#483e2f}.bag span{font-size:7px}.product>div:not(.bag)>b{font-size:15px}.product p{font-size:12px;color:#738375;margin:4px 0}.total{display:flex;align-items:baseline;justify-content:space-between;margin:15px 0 5px;padding-top:13px;border-top:1px solid #e3e8df;gap:8px}.total span{font-size:12px}.total strong{font-size:26px;line-height:1.3;letter-spacing:-.03em}.order-id{font-size:10px;color:#89938c;margin:0 0 12px;overflow-wrap:anywhere}.app-result{padding:11px 12px;background:#f3f4ed;border:1px solid #dde3d5;border-radius:9px}.app-result>span{display:block;font-size:10px;color:#778a70}.app-result>strong{display:block;font-size:21px;margin-top:2px}.app-result p{font-size:11px;margin:5px 0 0;line-height:1.55;color:#688063}.app-result[data-state=PAID]{background:#e6f2df;border-color:#b8d3ab}.app-result[data-state=VERIFYING]{background:#faf0d9;border-color:#decc99}.app-result[data-state=VERIFYING] strong{color:#806321}.fulfillment{display:flex;justify-content:space-between;font-size:11px;margin-top:13px}.fulfillment b{font-weight:550}.separate{font-size:10px;margin:5px 0 0;color:#879584}.connection{display:flex;flex-direction:column;justify-content:center;gap:22px;align-items:center;color:#719782}.wire{position:relative;display:flex;align-items:center;flex-direction:column;width:54px;height:42px}.wire span{font-size:10px}.wire i{font-style:normal;font-size:27px;line-height:1}.connection em{font-style:normal;font-size:10px}.packet{display:none;position:absolute;bottom:1px;width:5px;height:5px;background:#1a9e82;border-radius:50%}.workspace[data-busy=true] .packet{display:block;animation:travel 1s ease-in-out infinite}.workspace[data-busy=true] .to-app .packet{animation-direction:reverse;animation-delay:.45s}.workspace[data-busy=true] .wire i{color:#12947b}@keyframes travel{0%{left:4px;opacity:0}25%{opacity:1}100%{left:44px;opacity:0}}.server-panel h2{font-size:21px;line-height:1.5;margin:9px 0 16px}.server-steps{padding:0;margin:0;list-style:none;display:grid;gap:10px}.server-steps li{display:grid;grid-template-columns:28px minmax(0,1fr) 34px;gap:10px;align-items:center;background:#fff9;border:1px solid #cbdac6;border-radius:10px;padding:13px 12px;min-height:74px}.server-steps li>span{font-size:12px;width:27px;height:27px;border:1px solid #c3d2be;border-radius:7px;text-align:center;line-height:26px;background:#f5f7f0}.server-steps b{font-size:14px}.server-steps p{font-size:11px;color:#7e9277;margin:3px 0 0}.step-state{font-size:10px;color:#8b9c83;text-align:right;white-space:nowrap}.server-steps li.active{background:#f8fff3;border-color:#48905b}.server-steps li.done{border-color:#aac899;background:#f6fcf0}.server-steps li.error{background:#fff0e6;border-color:#d5ae8a}.stored{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #bfd0b5;margin-top:16px;padding-top:12px;gap:12px}.stored>div{display:flex;justify-content:space-between;align-items:center;gap:9px}.stored span{font-size:11px;color:#6d8562}.stored b{font-size:20px;white-space:nowrap}.server-notice{font-size:12px;color:#607e55;line-height:1.6;margin-top:10px;min-height:38px}.actions{display:flex;gap:9px;margin:17px 0 12px;flex-wrap:wrap}.primary{background:#174d3e;color:#fff;border-color:#174d3e;font-weight:650}.primary:hover:not(:disabled){background:#27624c}.advanced{border-top:1px solid #d7e0d0;padding-top:11px;color:#6b8070;font-size:12px}.advanced summary{cursor:pointer;font-weight:600}.advanced p{margin:12px 0}.sub-actions{display:flex;gap:10px;flex-wrap:wrap}.advanced pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:16px;border-radius:8px;background:#183b32;color:#d8e6d2;font:11px/1.7 ui-monospace,monospace;max-height:360px;overflow:auto}.advanced ol{padding-left:22px}.mobile-tabs{display:none}.demo[data-embed=true] .demo-heading{display:none}@media(max-width:640px){.demo{padding:18px 14px}.demo-top{align-items:flex-start;gap:8px}.demo-top b{font-size:14px}.demo-top p{font-size:10px;max-width:242px}.quiet{padding:7px 9px;font-size:11px;white-space:nowrap}.cases{display:grid;grid-template-columns:1fr 1.28fr 1.2fr;gap:6px;margin:13px 0}.cases button{padding:8px 5px;font-size:11px;line-height:1.5;min-height:42px}.mobile-tabs{display:grid;grid-template-columns:1fr 1fr;background:#e0e9db;border:1px solid #c5d5bb;border-radius:9px;padding:3px;margin-bottom:10px;gap:3px}.mobile-tabs button{font-size:12px;border:0;min-height:34px;padding:6px;background:transparent;border-radius:6px}.mobile-tabs [aria-selected=true]{background:#fff;color:#274f38;font-weight:700}.workspace{display:block}.workspace[data-panel=app] .server-panel,.workspace[data-panel=server] .app-panel,.connection{display:none}.app-panel,.server-panel{padding:13px;min-height:448px}.app-screen{max-width:315px;margin:auto}.server-panel h2{font-size:20px;margin:14px 0 20px}.server-steps li{min-height:81px}.stored{grid-template-columns:1fr;margin-top:18px;gap:9px}.stored>div{justify-content:space-between}.stored span{font-size:12px}.server-notice{margin-top:13px;font-size:12px}.panel-top{margin-bottom:10px}.app-body{padding:14px 16px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.actions button{padding:9px 6px;font-size:12px;min-height:43px}.actions .primary{grid-column:1/-1}.advanced{font-size:11px}.advanced pre{font-size:10px}.demo-heading h1{font-size:21px}.server-steps b{font-size:13px}.server-steps p{font-size:11px}.total strong{font-size:25px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(min-width:641px){.demo{padding-top:16px;padding-bottom:16px}.cases{margin:12px 0}.app-panel,.server-panel{padding:12px}.panel-top{margin-bottom:9px}.app-screen>header{padding:9px 16px 8px}.app-screen h2{font-size:19px;line-height:1.4}.app-body{padding:12px 16px 10px}.bag{height:60px;padding-top:11px}.total{margin:11px 0 4px;padding-top:10px}.order-id{margin-bottom:8px}.app-result{padding:9px 11px}.app-result>strong{font-size:20px;line-height:1.4}.app-result p{line-height:1.45;margin-top:4px}.fulfillment{margin-top:10px}.separate{display:none}.actions{margin:12px 0 9px}.server-panel h2{margin-bottom:13px}.server-steps li{min-height:70px;padding:11px}.server-notice{min-height:38px}}

/* R2: portrait app shell, checkout action and server-backed order navigation. */
.app-panel{display:flex;flex-direction:column;align-items:center;padding:12px 14px;background:#e8eef1}.app-panel>.panel-top{width:100%;margin-bottom:12px}.workspace{grid-template-columns:minmax(0,330px) 64px minmax(0,1fr)}
.app-screen{width:264px;height:500px;max-width:100%;flex:none;border:5px solid #263f37;border-radius:29px;background:#fff;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 3px 0 #263f3710;color:#263c32}
.device-status{display:flex;align-items:center;justify-content:space-between;flex:none;padding:7px 14px 2px;height:27px;color:#263c32;font-size:10px;font-weight:700;line-height:1}.device-indicators{display:flex;align-items:center;gap:5px}.device-indicators svg{width:15px;height:10px;stroke:#263c32;stroke-width:1.4;fill:none}.device-indicators svg:first-child{stroke-width:1.8}.device-indicators svg:last-child rect:last-child{fill:#263c32;stroke:0}
.app-screen>.app-bar{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;padding:3px 9px 9px;height:52px;flex:none;background:#fff;color:#263c32;border-bottom:1px solid #e9ede7;text-align:center}.app-bar>div>span{font-size:7px;line-height:1;letter-spacing:.15em;color:#7c8e7d}.app-screen .app-bar h2{margin:3px 0 0;font-size:16px;line-height:1.3;font-weight:750}.app-back{padding:4px;width:28px;height:28px;min-height:28px;border:0;background:transparent;border-radius:8px}.app-back svg{width:19px;height:19px;fill:none;stroke:#344d3b;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.app-screen[data-view=orders] .app-back{visibility:hidden}.app-bar-space{width:28px}
.app-screen .app-body{padding:14px 14px 8px;flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#dce4d7 transparent}.app-screen .app-result{padding:10px 11px;margin:0 0 14px;border-radius:9px;border:1px solid #e3e7dc;background:#f4f5ef}.app-screen .app-result>span{font-size:9px;color:#7c8b72}.app-screen .app-result>strong{font-size:20px;line-height:1.35;margin-top:3px;letter-spacing:-.025em}.app-screen .app-result p{font-size:10px;line-height:1.5;margin:5px 0 0;color:#71816a}.app-screen .app-result[data-state=PAID]{background:#edf6e8;border-color:#c9ddbe}.app-screen .app-result[data-state=VERIFYING]{background:#fff2d8;border-color:#ead4a4}
.purchase-section>h3{font-size:11px;font-weight:700;margin:0 0 9px;line-height:1.4}.purchase-section>h3 span{color:#709969;margin-left:3px}.app-screen .product{gap:11px}.app-screen .bag{width:45px;height:55px;padding:11px 4px 4px;border-radius:3px;background:#ece2cc}.app-screen .bag small{font-size:5px}.app-screen .bag b{font-size:8px}.app-screen .bag span{font-size:6px}.app-screen .product>div:not(.bag)>b{font-size:12px}.app-screen .product p{font-size:10px;margin:4px 0 0;line-height:1.4}.app-screen .total{padding-top:12px;margin:13px 0 0;border-color:#e7ebe3;gap:8px}.app-screen .total span{font-size:11px}.app-screen .total strong{font-size:21px;line-height:1.4;white-space:nowrap}.app-screen .fulfillment{margin:8px 0 0;font-size:10px;line-height:1.5;color:#7c8a73}.app-screen .fulfillment b{color:#64795a;font-weight:550}.app-screen .order-id{margin:6px 0 0;font-size:8px;line-height:1.4;color:#99a291}
.app-payment{flex:none;padding:8px 12px 7px;background:#fff;border-top:1px solid #edf0e9}.app-payment #run{display:block;width:100%;min-height:37px;padding:8px 6px;font-size:12px;border-radius:9px;font-weight:700;line-height:1.5}.app-payment>p{margin:4px 0 0;text-align:center;font-size:8px;color:#9ca792;line-height:1.3}.app-nav{display:grid;grid-template-columns:1fr 1fr;flex:none;height:45px;border-top:1px solid #edf0e9;background:#fbfcf9;padding:4px 22px 2px;gap:12px}.app-nav button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;padding:0;min-height:0;border:0;background:transparent;color:#a1ab99;font-size:8px;line-height:1.3;border-radius:4px}.app-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.app-nav button[aria-pressed=true]{color:#276244;font-weight:700}.app-nav button:hover:not(:disabled){background:#f0f5eb}.home-indicator{height:10px;flex:none;background:#fbfcf9;position:relative}.home-indicator:after{content:'';display:block;width:70px;height:3px;border-radius:3px;background:#344b3c;margin:3px auto 0}
.app-orders{display:none;flex:1;min-height:0;padding:15px 13px;overflow:auto}.app-screen[data-view=orders] .app-orders{display:block}.app-screen[data-view=orders] .app-body,.app-screen[data-view=orders] .app-payment{display:none}.order-list-label{font-size:11px;font-weight:700;margin:0 0 9px;color:#67825c}.order-tile{display:block;width:100%;min-height:0;padding:12px 11px;text-align:left;border:1px solid #dbe5d3;border-radius:11px;background:#fff}.order-tile-top{display:flex;justify-content:space-between;align-items:center;gap:4px;line-height:1.5}.order-tile-top>span{font-size:7px;color:#98a18f}.order-tile-top>b{font-size:9px;color:#547f42;white-space:nowrap}.order-tile-product{display:flex;align-items:center;gap:10px;margin:15px 0}.order-coffee{width:40px;height:48px;display:flex;flex-direction:column;justify-content:center;gap:0;text-align:center;background:#ece2cc;color:#5a503c;font-size:5px;border:1px solid #bdb096;border-radius:3px}.order-coffee b{font-size:7px}.order-tile-product strong{display:block;font-size:12px}.order-tile-product small{display:block;font-size:9px;margin-top:4px;color:#8b9a80}.order-tile-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid #eaf0e4}.order-tile-bottom>strong{font-size:14px}.order-tile-bottom>span{font-size:9px;color:#7c9070}.order-tile-bottom>span>b{font-size:16px;margin-left:3px;vertical-align:-1px}.orders-note{font-size:9px;line-height:1.6;color:#8f9d85;text-align:center;margin:14px 0 0}
.server-panel{display:flex;flex-direction:column}.server-steps{flex:1;align-content:center}.server-steps li{min-height:82px}.stored{flex:none}.server-notice{flex:none}.actions{justify-content:flex-end}.actions button{font-size:12px;min-height:36px;padding:7px 12px}
@media(max-width:640px){.workspace{display:block}.app-panel{padding:12px 10px 14px;min-height:0}.app-screen{width:274px;height:518px;border-radius:30px}.app-screen .app-body{padding:14px 15px 9px}.app-screen .app-bar h2{font-size:17px}.app-screen .product>div:not(.bag)>b{font-size:13px}.app-screen .product p{font-size:11px}.app-screen .total strong{font-size:23px}.app-screen .total span{font-size:12px}.app-screen .app-result>strong{font-size:21px}.app-screen .app-result p{font-size:11px}.app-payment #run{font-size:13px;min-height:40px}.app-nav{height:47px}.app-nav button{font-size:9px}.app-nav svg{width:18px;height:18px}.server-panel{min-height:540px}.server-steps li{min-height:84px}.actions{display:grid;grid-template-columns:1fr 1fr}.actions button{font-size:11px}.order-tile-product strong{font-size:13px}.order-tile-top>b{font-size:10px}}

.order-tile-top>b{color:#8a957e}.order-tile-top>b[data-state=VERIFYING]{color:#92712b}.order-tile-top>b[data-state=PAID]{color:#427941}
.app-screen .app-result{margin-bottom:10px}.app-screen .total{margin-top:10px}.app-screen .app-body{padding-bottom:7px}

/* Separate ownership: blue app, green merchant, purple payment system. */
.demo{max-width:1220px;padding-left:20px;padding-right:20px}.workspace{grid-template-columns:minmax(284px,1fr) 46px minmax(280px,1fr) 52px minmax(260px,.95fr)}.flow-explainer{margin:0 0 12px;font-size:12px;color:#6a7969}.flow-explainer b:first-child{color:#71528c}.flow-explainer b:nth-child(2){color:#3c714b}.app-panel,.server-panel,.gateway-panel{min-height:562px;padding:12px;min-width:0}.server-panel h2,.gateway-panel h2{font-size:20px;line-height:1.5;letter-spacing:-.035em;margin:8px 0 16px}.panel-top{font-size:11px;min-height:24px}.panel-top .role{white-space:nowrap}.panel-top>span:last-child{font-size:10px}.server-steps{gap:10px}.server-steps li{grid-template-columns:23px minmax(0,1fr);gap:8px;padding:12px 10px;position:relative;min-height:91px;align-items:start}.server-steps li>span{width:23px;height:23px;line-height:22px;font-size:11px}.server-steps b{font-size:13px}.server-steps p{font-size:11px;line-height:1.55;margin-top:6px}.server-steps .step-state{position:absolute;right:10px;bottom:8px;font-size:9px}.stored{grid-template-columns:1fr;padding-top:12px;margin-top:14px}.stored>div{justify-content:space-between}.server-notice{font-size:11px;line-height:1.65;min-height:55px}.connection{gap:28px}.wire{width:44px}.wire i{font-size:25px}.wire span{font-size:9px}
.gateway-panel{display:flex;flex-direction:column;background:#f1ebf8;border:1px solid #cdbadb;border-radius:15px;color:#5c4472}.gateway-panel .role{color:#79568e}.gateway-panel .panel-top{color:#9a80ad}.checkout-window{border:1px solid #d9cde3;border-radius:12px;background:#fff;padding:13px 14px}.checkout-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #eee7f2;gap:4px}.checkout-top>b{font-size:12px}.checkout-top>span{font-size:9px;color:#a18aac}.checkout-window>p{font-size:8px;letter-spacing:.1em;color:#a592b1;margin:13px 0 2px}.checkout-window h3{font-size:13px;margin:0;color:#61506c}.checkout-amount{display:block;font-size:27px;letter-spacing:-.04em;line-height:1.4;margin:4px 0 10px}.checkout-amount>span{font-size:13px;margin-left:3px}.checkout-method{display:flex;justify-content:space-between;padding:8px 10px;border-radius:6px;background:#f6f1fa;font-size:10px}.checkout-method b{font-size:10px}.checkout-window>small{display:block;font-size:9px;line-height:1.5;color:#a18eac;margin-top:9px}.gateway-approval{margin-top:14px;padding:12px;border-radius:10px;border:1px solid #dbcee5;background:#f8f4fc}.gateway-approval>span,.gateway-response>span{font-size:10px;color:#9981ac}.gateway-approval>p{font-size:11px;margin:6px 0 12px;min-height:18px;overflow-wrap:anywhere}.approval-result{display:flex;justify-content:space-between;gap:6px;align-items:center;border-top:1px solid #e4d9ec;padding-top:9px;font-size:10px}.approval-result strong{font-size:22px;line-height:1.3;color:#75518f}.gateway-response{display:flex;flex-direction:column;gap:4px;padding:11px 0 0}.gateway-response b{font-size:12px}.gateway-notice{font-size:11px;line-height:1.6;color:#8c749e;margin:11px 0}.gateway-disclosure{font-size:9px;color:#aa96b8;margin-top:auto;padding-top:5px}.gateway-panel[data-state=approved] .gateway-approval{background:#ece1f6;border-color:#b89dcd}.gateway-panel[data-state=processing] .gateway-approval{border-color:#9874b0}.gateway-panel[data-state=delayed] .gateway-response b{color:#a16e25}
.gateway-connection{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:21px;color:#a58db5}.pg-wire{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;width:48px;font-size:9px;line-height:1.4;gap:4px}.pg-wire i{font-size:28px;font-style:normal;line-height:1}.pg-wire>b{display:none;position:absolute;width:5px;height:5px;border-radius:50%;background:#8c5aac}.gateway-connection em{font-size:9px;font-style:normal;max-width:50px;text-align:center;line-height:1.5}.workspace[data-gateway-busy=true] .pg-wire>b{display:block;animation:pgTravel .9s linear infinite}.workspace[data-gateway-busy=true] .pg-wire.request>b{bottom:5px}.workspace[data-gateway-busy=true] .pg-wire.response>b{top:11px;animation-direction:reverse}.workspace[data-gateway-busy=true] .pg-wire i{color:#86569f}@keyframes pgTravel{0%{left:3px;opacity:0}25%{opacity:1}100%{left:43px;opacity:0}}
@media(min-width:641px) and (max-width:979px){.workspace{grid-template-columns:minmax(250px,1fr) 40px minmax(260px,1fr)}.gateway-connection{display:none}.gateway-panel{grid-column:3;min-height:0;margin-top:12px}.app-panel{grid-row:1/3}.connection{grid-row:1/3}.gateway-panel h2 br{display:none}.gateway-panel .checkout-window{display:none}.gateway-disclosure{margin-top:0}.server-panel{min-height:0}.server-steps{flex:none}.server-steps li{min-height:78px}.server-notice{min-height:0}}
@media(max-width:640px){.demo{padding:16px 14px}.mobile-tabs{grid-template-columns:1fr 1fr 1fr}.mobile-tabs button{font-size:11px;padding-left:3px;padding-right:3px}.mobile-tabs [data-panel=app][aria-selected=true]{color:#52728a}.mobile-tabs [data-panel=server][aria-selected=true]{color:#42724e}.mobile-tabs [data-panel=gateway][aria-selected=true]{color:#805c98}.flow-explainer{font-size:10px;line-height:1.6;margin-bottom:9px}.workspace{display:block}.workspace>.app-panel,.workspace>.server-panel,.workspace>.gateway-panel{display:none}.workspace[data-panel=app]>.app-panel{display:flex}.workspace[data-panel=server]>.server-panel{display:flex}.workspace[data-panel=gateway]>.gateway-panel{display:flex}.connection,.gateway-connection{display:none}.app-panel{padding:12px 10px 14px;min-height:0}.server-panel,.gateway-panel{min-height:565px;padding:15px}.server-panel h2,.gateway-panel h2{font-size:22px}.server-steps li{min-height:89px}.server-notice{font-size:12px}.checkout-window{padding:15px 17px}.checkout-window h3{font-size:14px}.checkout-amount{font-size:30px}.checkout-top>b{font-size:13px}.checkout-top>span{font-size:10px}.gateway-approval>p{font-size:12px}.gateway-notice{font-size:12px}.gateway-disclosure{font-size:10px}}

/* R4: narrower processing panels and readable request/response lanes. */
@media(min-width:1080px){
 .workspace{grid-template-columns:minmax(284px,1.04fr) 112px minmax(260px,1fr) 124px minmax(250px,.98fr)}
 .server-notice,.gateway-notice{word-break:keep-all;overflow-wrap:break-word}
 .connection,.gateway-connection{gap:25px;color:#638a77;padding:0 10px}
 .wire,.pg-wire{width:100%;height:65px;gap:8px;justify-content:flex-start;font-size:11px;line-height:1.3}
 .wire span,.pg-wire span{font-size:11px;font-weight:650;white-space:nowrap;line-height:1.4}
 .pg-wire span br{display:none}.pg-wire span br:after{content:' '}
 .wire i,.pg-wire i{display:block;position:relative;flex:none;width:100%;height:16px;min-height:16px;font-size:0;line-height:0;color:#648b78}
 .wire i:before,.pg-wire i:before{content:'';position:absolute;top:7px;left:2px;right:2px;height:2px;border-radius:2px;background:currentColor}
 .wire i:after,.pg-wire i:after{content:'';position:absolute;width:9px;height:9px;right:3px;top:3.5px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
 .wire.to-app i:after,.pg-wire.response i:after{right:auto;left:3px;transform:rotate(-135deg)}
 .wire.to-app,.pg-wire.response{flex-direction:column-reverse;justify-content:flex-end}
 .connection em,.gateway-connection em{font-size:10px;max-width:none;line-height:1.5;text-align:center}
 .gateway-connection{color:#8a6aa2}.pg-wire i{color:#9974b1}
 .workspace[data-busy=true] .wire i{color:#27906c}.workspace[data-gateway-busy=true] .pg-wire i{color:#8556a3}
 .workspace[data-busy=true] .packet{animation:r4Travel 1s ease-in-out infinite;bottom:28px;left:0}
 .workspace[data-busy=true] .to-app .packet{animation-direction:reverse;bottom:28px}
 .workspace[data-gateway-busy=true] .pg-wire>b{animation:r4Travel .9s ease-in-out infinite}
 .workspace[data-gateway-busy=true] .pg-wire.request>b{top:34px;bottom:auto}
 .workspace[data-gateway-busy=true] .pg-wire.response>b{top:34px;bottom:auto;animation-direction:reverse}
 .workspace[data-busy=true] .wire .packet,.workspace[data-gateway-busy=true] .pg-wire.request>b,.workspace[data-gateway-busy=true] .pg-wire.response>b{top:29px;bottom:auto}
 @keyframes r4Travel{0%{left:4%;opacity:0}20%{opacity:1}85%{opacity:1}100%{left:94%;opacity:0}}
}
@media(min-width:641px) and (max-width:1079px){
 .workspace{grid-template-columns:minmax(250px,1fr) 64px minmax(260px,1fr)}
 .gateway-connection{display:none}.gateway-panel{grid-column:3;min-height:0;margin-top:12px}.app-panel{grid-row:1/3}.connection{grid-row:1/3}
 .gateway-panel h2 br{display:none}.gateway-panel .checkout-window{display:none}.gateway-disclosure{margin-top:0}.server-panel{min-height:0}.server-steps{flex:none}.server-steps li{min-height:78px}.server-notice{min-height:0}
}

/* Keep the complete comparison in view; supporting detail stays expandable. */
.flow-explainer{display:none}.explanation-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:14px 0}.explanation-grid>div{min-width:0;padding:12px;background:#eaf0e4;border:1px solid #d9e3d2;border-radius:8px}.explanation-grid>div>b{display:block;font-size:11px;color:#54734b}.explanation-grid p,.explanation-grid .server-notice{font-size:12px;line-height:1.65;margin:5px 0 0;min-height:0;word-break:keep-all;overflow-wrap:anywhere}.demo-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:9px 0}.demo-footer #flow-status{margin:0;font-size:11px;line-height:1.55;word-break:keep-all;color:#5d7558}.demo-footer .actions{flex:none;margin:0}.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.demo-top{gap:10px;flex:1}.demo-top b{font-size:13px}.demo-top p{font-size:10px;margin:1px 0 0}.demo-top .quiet{min-height:30px;padding:4px 10px;font-size:10px}.cases{margin:0;gap:6px}.cases button{font-size:11px;min-height:32px;padding:6px 10px}.demo{padding-top:12px;padding-bottom:10px}.advanced{padding-top:7px;font-size:11px}.advanced summary{line-height:1.5}
.server-steps li{min-height:53px;align-items:center;padding:11px 10px;grid-template-columns:23px minmax(0,1fr) 24px}.server-steps .step-state{position:static;font-size:9px}.server-steps b{font-size:12px;word-break:keep-all}.server-steps{gap:8px;flex:none}.server-panel h2,.gateway-panel h2{font-size:17px;line-height:1.4;margin:3px 0 12px;letter-spacing:-.03em}.server-panel .stored{margin-top:auto;padding-top:10px}.stored b{font-size:21px}.panel-top{margin-bottom:8px;min-height:20px}.server-panel,.gateway-panel{padding:10px 12px;min-height:0}.app-panel{padding:10px 12px;min-height:0}.app-panel>.panel-top{margin-bottom:8px}.gateway-approval{padding:10px 11px;margin-top:10px}.gateway-approval>span{display:none}.approval-result{border:0;padding:0}.gateway-response{padding-top:10px;gap:3px}.gateway-response b{font-size:11px;word-break:keep-all;line-height:1.6}.gateway-disclosure{font-size:8px;padding-top:9px}.checkout-window{padding:10px 12px}.checkout-top{padding-bottom:7px}.checkout-top>b{font-size:11px}.checkout-top>span{font-size:8px}.checkout-window>p,.checkout-window>h3,.checkout-window>small{display:none}.checkout-amount{margin:8px 0;font-size:25px}.checkout-method{padding:6px 8px;font-size:10px}.gateway-approval .approval-result>span{font-size:10px}.app-panel .live-label{display:none}
@media(min-width:641px){
 .workspace{align-items:stretch}.app-screen{width:212px;height:378px;border-width:4px;border-radius:25px}.device-status{height:20px;padding:5px 11px 1px;font-size:8px}.device-indicators svg{width:13px;height:9px}.app-screen>.app-bar{height:40px;padding:2px 7px 5px;grid-template-columns:26px minmax(0,1fr) 26px}.app-bar>div>span{font-size:6px}.app-screen .app-bar h2{font-size:14px;margin-top:2px}.app-back{width:24px;height:24px;min-height:24px;padding:3px}.app-back svg{width:17px;height:17px}.app-screen .app-body{padding:9px 10px 7px}.app-screen .app-result{padding:8px 9px;margin-bottom:9px}.app-screen .app-result>span{font-size:9px}.app-screen .app-result>strong{font-size:19px;line-height:1.3;margin-top:2px}.purchase-section>h3{display:none}.app-screen .product{gap:9px}.app-screen .bag{width:36px;height:45px;padding-top:9px}.app-screen .bag b{font-size:7px}.app-screen .product>div:not(.bag)>b{font-size:11px}.app-screen .product p{font-size:9px}.app-screen .total{padding-top:8px;margin-top:9px}.app-screen .total span{font-size:10px}.app-screen .total strong{font-size:19px}.app-screen .fulfillment{font-size:9px;margin-top:6px}.app-screen .order-id{font-size:7px;margin-top:4px}.app-payment{padding:7px 9px}.app-payment>p{display:none}.app-payment #run{min-height:32px;padding:6px 5px;font-size:11px}.app-nav{height:34px;padding:3px 18px 2px;gap:8px}.app-nav svg{width:14px;height:14px}.app-nav button{font-size:7px;gap:1px}.home-indicator{height:7px}.home-indicator:after{height:2px;margin-top:2px;width:57px}.app-orders{padding:10px}.order-tile{padding:10px 8px}.order-tile-product{gap:7px;margin:12px 0}.order-tile-product strong{font-size:11px}.order-tile-top>span{font-size:6px}.order-tile-top>b{font-size:8px}.order-tile-bottom>strong{font-size:13px}.order-tile-bottom>span{font-size:8px}.order-tile-product small{font-size:8px}.orders-note{font-size:8px}.server-panel,.gateway-panel{height:428px}.app-panel{height:428px}.connection,.gateway-connection{gap:15px}.server-panel .stored{margin-bottom:0}.server-steps{margin-top:4px}.checkout-window{margin-top:3px}
}
@media(min-width:641px) and (max-width:1079px){
 .demo-controls{gap:10px}.demo-top{align-items:center}.demo-top p{font-size:8px}.demo-top b{font-size:12px}.cases button{font-size:10px;padding:6px}.workspace{grid-template-columns:minmax(220px,.9fr) 62px minmax(240px,1fr)}.app-panel{grid-row:1/3;height:auto;justify-content:center}.app-panel>.panel-top{margin-top:0}.connection{grid-row:1/3}.server-panel{height:auto}.server-panel h2{font-size:16px;margin-bottom:8px}.server-steps li{min-height:41px;padding:8px}.server-panel .stored{margin-top:9px;padding-top:7px}.gateway-panel{height:auto;margin-top:8px}.gateway-panel h2{font-size:15px;margin-bottom:6px}.gateway-panel .panel-top{margin-bottom:4px}.gateway-panel .checkout-window,.gateway-disclosure{display:none}.gateway-approval{margin-top:0}.gateway-response{padding-top:6px}.gateway-panel .approval-result strong{font-size:18px}.demo-footer{gap:10px}.demo-footer .actions button{font-size:10px;padding:5px 8px}
}
@media(max-width:640px){
 .demo{padding:12px 12px 10px}.demo-controls{display:block;margin-bottom:8px}.demo-top b{font-size:12px}.demo-top p{font-size:9px}.cases{margin-top:8px;grid-template-columns:1fr 1.28fr 1.2fr}.cases button{font-size:10px;min-height:32px;padding:5px 4px}.mobile-tabs{margin-bottom:8px}.mobile-tabs button{min-height:30px;font-size:10px}.panel-top{margin-bottom:8px}.app-panel{padding:9px 10px 10px}.app-panel>.panel-top{margin-bottom:7px}.app-screen{width:248px;height:446px}.purchase-section>h3{display:none}.app-payment>p{display:none}.server-panel,.gateway-panel{min-height:0;padding:12px 14px}.server-panel h2,.gateway-panel h2{font-size:19px}.server-steps li{min-height:53px}.server-steps{margin-bottom:15px}.server-steps b{font-size:12px}.server-panel .stored{margin-top:0}.checkout-window{padding:12px 14px}.checkout-amount{font-size:27px}.gateway-disclosure{font-size:9px}.demo-footer{display:block;margin:8px 0}.demo-footer #flow-status{font-size:10px;min-height:30px;margin-bottom:7px}.demo-footer .actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.demo-footer .actions button{min-height:32px;font-size:10px;padding:5px}.advanced{font-size:10px}.explanation-grid{grid-template-columns:1fr;gap:7px}.explanation-grid p{font-size:11px}.demo-heading h1{font-size:19px;margin-bottom:12px}
}

@media(min-width:641px){.demo-footer{flex-wrap:wrap;column-gap:14px;row-gap:8px}.demo-footer #flow-status{flex:1;min-width:180px}.demo-footer .advanced{flex:none;border-top:0;padding-top:0}.demo-footer .advanced[open]{flex:1 0 100%;border-top:1px solid #d7e0d0;padding-top:10px}.demo-footer .advanced summary{font-size:10px}.demo-footer .actions button{min-height:32px;font-size:10px;padding:5px 9px}}
@media(max-width:640px){.demo-footer .advanced{margin-top:8px}.demo-footer .advanced summary{font-size:10px}}

@media(max-width:640px){.app-screen .app-body{padding-top:11px}.app-screen .total{margin-top:7px}}

/* A single role detail below 1080px; the live three-role overview stays visible. */
@media(max-width:1079px){
 .demo{padding:12px}.demo-controls{display:block;margin-bottom:10px}.demo-top{display:flex;align-items:center;justify-content:space-between}.demo-top b{font-size:13px}.demo-top p{font-size:10px}.cases{display:grid;grid-template-columns:1fr 1.2fr 1.1fr;margin:9px 0 0;gap:6px}.cases button{min-height:32px;font-size:11px;padding:5px 6px}
 .mobile-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:19px;background:transparent;border:0;border-radius:0;padding:0;margin:0 0 10px}
 .mobile-tabs button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:9px 5px;min-height:59px;line-height:1.4;border:1px solid #cbd7dc;border-radius:9px;background:#e8eef1;color:#617e8b;font-size:10px;overflow:visible}
 .mobile-tabs button strong{font-size:13px;line-height:1.4;color:#345866;font-weight:700;white-space:nowrap}.mobile-tabs button[data-panel=server]{border-color:#cbdac1;background:#e8efdf;color:#5c8055}.mobile-tabs button[data-panel=server] strong{color:#3d663d}.mobile-tabs button[data-panel=gateway]{border-color:#d5c5df;background:#f1ebf8;color:#8d6fa3}.mobile-tabs button[data-panel=gateway] strong{color:#77508e}
 .mobile-tabs button[aria-selected=true]{box-shadow:inset 0 0 0 1px currentColor}.mobile-tabs button:not(:last-child):after{content:'↔';position:absolute;right:-17px;top:22px;width:14px;font-size:14px;line-height:1;color:#82a18d}.mobile-tabs button[data-panel=server]:after{color:#a18aaf}
 .workspace{display:block}.workspace>.app-panel,.workspace>.server-panel,.workspace>.gateway-panel{display:none;grid-row:auto;grid-column:auto;margin:0;width:100%;height:auto;min-height:0}
 .workspace[data-panel=app]>.app-panel,.workspace[data-panel=server]>.server-panel,.workspace[data-panel=gateway]>.gateway-panel{display:flex}
 .workspace>.connection,.workspace>.gateway-connection{display:none}.app-panel{align-items:center;justify-content:flex-start;padding:11px 12px 12px}.app-panel>.panel-top{margin-bottom:9px}.app-screen{width:248px;height:446px;border-width:4px;border-radius:28px}.server-panel,.gateway-panel{padding:13px 15px}.server-panel h2,.gateway-panel h2{font-size:19px;line-height:1.45;margin:4px 0 13px}.server-panel h2 br,.gateway-panel h2 br{display:none}.panel-top{width:100%;margin-bottom:8px}.server-steps{width:100%;margin:0 0 15px;gap:8px}.server-steps li{min-height:53px;padding:11px 10px}.server-steps b{font-size:12px}.server-panel .stored{margin:0;padding-top:10px}.gateway-panel .checkout-window{display:block;margin:0;padding:12px 14px}.checkout-top>b{font-size:12px}.checkout-top>span{font-size:10px}.checkout-amount{font-size:28px;margin:10px 0}.checkout-method{font-size:11px}.checkout-method b{font-size:11px}.gateway-approval{margin-top:10px;padding:11px 12px}.gateway-response{padding-top:11px}.gateway-response b{font-size:12px}.gateway-disclosure{display:block;margin:8px 0 0;padding-top:0;font-size:9px}
 .demo-footer{display:block;margin:8px 0 0}.demo-footer #flow-status{font-size:11px;min-height:0;margin:0 0 8px}.demo-footer .actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0}.demo-footer .actions button{font-size:11px;min-height:32px}.demo-footer .advanced{display:block;width:100%;margin-top:8px;padding-top:7px;border-top:1px solid #d7e0d0}.demo-footer .advanced summary{font-size:11px}.explanation-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:641px) and (max-width:1079px){
 .app-screen .app-body{padding:13px 14px 9px}.app-screen>.app-bar{height:45px}.app-screen .app-bar h2{font-size:16px}.device-status{height:23px;font-size:9px}.app-screen .app-result>strong{font-size:21px}.app-screen .app-result{padding:10px 11px;margin-bottom:12px}.app-screen .product>div:not(.bag)>b{font-size:13px}.app-screen .product p{font-size:11px}.app-screen .bag{width:43px;height:53px}.app-screen .total{margin-top:12px;padding-top:11px}.app-screen .total span{font-size:12px}.app-screen .total strong{font-size:23px}.app-screen .fulfillment{font-size:11px;margin-top:9px}.app-screen .order-id{font-size:8px;margin-top:6px}.app-payment{padding:8px 11px}.app-payment #run{font-size:13px;min-height:37px}.app-nav{height:41px}.app-nav button{font-size:8px}.app-nav svg{width:17px;height:17px}
}
@media(max-width:640px){
 .demo-top b{font-size:12px}.demo-top p{font-size:9px}.cases button{font-size:10px}.mobile-tabs{gap:15px}.mobile-tabs button{font-size:9px;padding:8px 2px;min-height:55px}.mobile-tabs button strong{font-size:11px}.mobile-tabs button:not(:last-child):after{right:-14px;font-size:12px;width:12px;top:21px}.explanation-grid{grid-template-columns:1fr}.demo-footer #flow-status{font-size:10px}.demo-footer .actions button{font-size:10px}.demo-footer .advanced summary{font-size:10px}
}
@media(min-width:641px) and (max-width:1079px){
 .demo-controls{display:flex;align-items:center;gap:12px}.demo-top{flex:1;min-width:0;gap:8px}.demo-top b{font-size:12px}.demo-top p{font-size:9px}.cases{display:flex;flex:none;margin:0;gap:5px}.cases button{font-size:10px;padding:5px 7px}
 .demo-footer{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:9px}.demo-footer #flow-status{flex:1;min-width:180px;margin:0}.demo-footer .actions{display:flex;flex:none;gap:6px}.demo-footer .actions button{font-size:10px;padding:5px 8px}.demo-footer .advanced{width:auto;flex:none;border:0;padding:0;margin:0}.demo-footer .advanced[open]{flex:1 0 100%;border-top:1px solid #d7e0d0;padding-top:10px}.demo-footer .advanced summary{font-size:10px}
}

/* Product-title type must not style the lettering inside the package. */
.app-screen .bag b{display:block;max-width:100%;white-space:nowrap;line-height:1.2;letter-spacing:.01em}

/* Fit both brand and title within the fixed app navigation bar. */
.app-screen .app-bar>div{min-width:0;line-height:1}
.app-screen .app-bar>div>span{display:block;line-height:1.2}
.app-screen .app-bar h2{max-width:100%;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
.app-screen .product>div:not(.bag){min-width:0;flex:1}
.app-screen .product>div:not(.bag)>b{display:block;max-width:100%;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}