/* KupiBao next-step UX components: same tokens, typography and basic shell as prior prototypes. */
:root{--ux-shadow:0 10px 30px rgba(33,43,54,.055)}
.ux-success .page-heading{margin-bottom:16px}
.success-hero{display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;gap:30px;padding:33px 38px;margin-bottom:20px;background:#fff;border:1px solid #dfe7e2}
.success-medal{align-self:flex-start;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#eaf6ee;color:#24804b;flex:none}
.success-medal svg{width:33px;height:33px;stroke-width:2.4}
.success-copy{flex:1;min-width:0}
.success-tag{display:inline-flex;align-items:center;color:#32794e;font-size:11px;font-weight:650;margin-bottom:7px}
.success-copy h1{font-size:30px;margin:0 0 9px;letter-spacing:-.7px}
.success-copy p{max-width:580px;font-size:13px;color:#606b74;line-height:1.65;margin:0 0 17px}
.success-key{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.success-key span{color:#78818b;font-size:12px}.success-key strong{font-size:18px;font-weight:750;letter-spacing:.2px}
.success-side-art{width:150px;height:130px;position:relative;flex:none}
.artbox{position:absolute;width:91px;height:91px;border-radius:18px;background:#fff4f0;border:1px solid #f2ded7;display:grid;place-items:center;color:#be6560;transform:rotate(-8deg)}
.artbox svg{width:40px;height:40px}
.artbox.one{left:0;top:25px}.artbox.two{right:0;top:0;width:72px;height:72px;background:#f7f7f9;color:#687886;transform:rotate(8deg)}
.artbox.two svg{width:33px;height:33px}
.ux-success-cols{margin-top:0}
.section-heading-inline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.ordered-steps{padding:4px 0 0;margin:0;list-style:none;display:grid;gap:20px}
.ordered-steps li{display:flex;gap:13px;align-items:start}
.step-number{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:50%;background:#f2f4f5;color:#54616b;font-size:12px;font-weight:700}
.ordered-steps strong{font-size:13px}.ordered-steps p{font-size:12px;color:#737e88;margin:4px 0 0;line-height:1.6}
.success-shipments{display:grid;gap:11px}
.success-ship{border:1px solid #e9edf0;border-radius:8px;overflow:hidden}
.success-ship-head{background:#fafbfc;border-bottom:1px solid #edf0f2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px}
.success-ship-head strong{font-size:12px}.success-ship-head span{font-size:11px;color:#818a92}
.success-item{display:flex;align-items:start;justify-content:space-between;gap:16px;padding:9px 13px;font-size:12px;border-bottom:1px solid #f1f3f4}
.success-item:last-child{border:0}.success-item small{display:block;font-size:11px;margin-top:3px}.success-item b{white-space:nowrap}
.ux-contact-bar{background:#f4f6f7;border:1px solid #e7eaed;border-radius:9px;display:flex;align-items:center;gap:13px;padding:17px 19px;color:#505a65;font-size:12px}
.ux-contact-bar .ico{color:#6d7c89}.ux-contact-bar .ico svg{width:22px;height:22px}
.ux-contact-bar .text-link{margin-left:auto;white-space:nowrap}
.compact-definition{margin:12px 0 0;display:grid;gap:14px}
.compact-definition>div{display:flex;justify-content:space-between;align-items:start;gap:12px;font-size:12px}
.compact-definition dt{color:#78828c;flex:none}
.compact-definition dd{text-align:right;margin:0;max-width:65%;font-weight:650;line-height:1.5}
.price-line{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:12px}
.price-line span{color:#747f88}.price-line.total{padding-top:14px;margin-top:15px;border-top:1px solid var(--stroke)}.price-line.total span{color:var(--ink);font-weight:700}.price-line.total strong{font-size:20px}
/* account orders */
.account-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:20px;align-items:start}
.account-side{overflow:hidden;position:sticky;top:18px}
.account-profile{display:flex;align-items:center;gap:10px;padding:18px;border-bottom:1px solid #edf0f2}
.account-profile strong{display:block;font-size:13px}.account-profile small{display:block;font-size:11px}
.avatar{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:#f5eeee;color:#bc4d45;font-weight:800}
.account-links{display:grid;padding:10px}.account-links a{display:flex;align-items:center;gap:10px;padding:11px 12px;font-size:12px;color:#59636e;border-radius:7px}
.account-links a.active{background:#f3f5f7;color:#333d45;font-weight:700}.account-links a:hover{background:#f8f8fa}
.account-links .ico svg{width:18px;height:18px}
.order-tabbar{padding:6px;display:flex;gap:3px;align-items:center}
.order-filter{padding:9px 16px;border:0;border-radius:6px;background:none;color:#68727c;font-size:12px}
.order-filter.active{background:#f0f2f5;color:#2c3239;font-weight:700}
.order-preview{overflow:hidden}
.preview-head,.preview-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 19px}
.preview-head{border-bottom:1px solid #eef0f2}.preview-head strong{font-size:13px}
.preview-main{display:flex;align-items:center;gap:16px;padding:16px 19px}
.preview-images{display:flex;min-width:126px}.preview-images img{width:46px;height:50px;object-fit:contain;padding:4px;margin-right:-6px;border:1px solid #eff1f2;background:#f7f8f9;border-radius:7px}
.preview-copy{font-size:12px;flex:1;min-width:0}.preview-copy .tiny{margin-top:5px}.preview-main>strong{font-size:13px;white-space:nowrap}
.preview-foot{border-top:1px solid #edf0f2;background:#fcfcfd}
.delivered-product{display:flex;align-items:center;gap:15px;border-bottom:1px solid #edf0f2;padding:15px 0}.delivered-product:last-of-type{border:0}
.delivered-product img{height:74px;width:74px;object-fit:contain;background:#f7f8fa;border-radius:7px;padding:9px;flex:none}
.delivered-product>div{flex:1;min-width:0}.delivered-product>div strong{font-size:13px}.delivered-product .btn{flex:none}
.return-history-list{display:grid;gap:9px;margin-top:14px}.return-history-item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px;background:#fafbfc;border:1px solid #eaedf0;border-radius:7px}
.return-history-item strong{font-size:12px}.return-history-item small{display:block;font-size:11px;margin-top:4px;color:#78828a}
/* account return flow */
.ux-return .field{margin-top:17px}
.ux-return .field em{color:var(--red);font-style:normal}
.ux-return .field textarea{resize:vertical;min-height:100px}
.return-step-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.return-step-heading p{margin:4px 0 0}.return-step-count{display:grid;place-items:center;width:29px;height:29px;flex:none;border:1px solid #dfe4e9;border-radius:7px;color:#64707a;font-weight:750;background:#fafbfc}
.return-options{display:grid;gap:9px}
.return-good{display:flex;align-items:center;gap:11px;padding:12px 13px;border:1px solid #e4e8ec;border-radius:8px;cursor:pointer;transition:border-color .12s}
.return-good.active{border-color:#8e9ba8;background:#fbfcfd}
.return-good input{width:17px;height:17px;accent-color:#344251;flex:none}
.return-good img{width:63px;height:63px;padding:6px;object-fit:contain;background:#f6f7f8;border-radius:7px;flex:none}
.return-good span{flex:1;min-width:0}.return-good strong{display:block;font-size:12px}.return-good small{display:block;font-size:11px;margin-top:4px}
.return-good b{font-size:12px;white-space:nowrap}
.return-quantity{max-width:175px}.return-quantity select{margin-top:5px}
.field-error{display:block;font-size:11px;color:#b3363a;margin:6px 0}.file-drop{display:flex;align-items:center;gap:12px;border:1px dashed #b7c1ca;border-radius:8px;padding:15px;cursor:pointer;background:#fbfcfd}
.file-drop:hover{background:#f6f8f9}.file-drop .ico svg{width:22px;height:22px}.file-drop strong,.file-drop small{display:block}.file-drop strong{font-size:12px}.file-drop small{font-size:11px;margin-top:4px}
.file-summary{display:grid;gap:7px;margin-top:10px}.file-summary-item{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid var(--stroke);border-radius:6px;font-size:11px}
.file-summary-item button{border:0;background:none;text-decoration:underline;color:#747e88}
.return-actions{display:flex;gap:9px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:20px}
.return-result .result-head{display:flex;align-items:center;gap:12px}.result-head h2{margin:0 0 4px}.result-head p{font-size:12px;color:#707c86;margin:0}
.result-check{width:44px;height:44px;flex:none;background:#e8f5ee;border-radius:50%;display:grid;place-items:center;color:#298254}
.result-check .ico svg{width:25px;height:25px}
/* about/service page */
.about-hero{padding:35px 40px;display:flex;align-items:center;justify-content:space-between;gap:30px;overflow:hidden;margin-bottom:22px}
.about-hero>div:first-child{max-width:700px}
.eyebrow{font-size:10px;color:#a1524b;font-weight:750;text-transform:uppercase;letter-spacing:.08em;margin-bottom:11px}
.about-hero h1{font-size:34px;letter-spacing:-.8px;margin-bottom:12px}
.about-lead{font-size:15px;color:#5b6570;line-height:1.7;max-width:680px}
.about-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:23px}
.about-aside-art{display:grid;place-items:center;flex:0 0 205px;min-height:165px}
.art-grid{display:grid;grid-template-columns:repeat(2,67px);grid-template-rows:repeat(2,67px);gap:9px;transform:rotate(-9deg)}
.art-grid>.ico{border:1px solid #e5e8eb;background:#f8f9fa;border-radius:13px;color:#7b8790;display:grid;place-items:center}
.art-grid>.ico:nth-child(2){background:#fdf2ee;color:#b8665e;border-color:#f2dfd8}.art-grid>.ico:nth-child(3){background:#f8f1ea;color:#bc8857;border-color:#eee2d7}
.art-grid .ico svg{width:31px;height:31px}
.about-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:21px;align-items:start}
.about-toc{padding:17px;position:sticky;top:16px}.about-toc .toc-title{font-weight:700;font-size:13px;margin-bottom:12px}
.about-toc nav{display:grid;gap:2px}.about-toc nav a{display:block;padding:9px 10px;font-size:12px;border-radius:6px;color:#67727d}
.about-toc nav a:hover,.about-toc nav a.active{background:#f4f5f7;color:#28313a}
.toc-toggle{display:none}.about-content{min-width:0}
.content-section{scroll-margin-top:20px}.content-section h2{font-size:21px;letter-spacing:-.3px;margin:0 0 13px}
.content-section>p{font-size:13px;line-height:1.77;color:#626e78;margin:0 0 16px}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:21px}
.benefit-grid>div{padding:14px;background:#fafbfc;border:1px solid #edf0f2;border-radius:9px}
.benefit-grid .ico{display:block;margin-bottom:11px;color:#737e88}.benefit-grid .ico svg{width:21px;height:21px}
.benefit-grid strong{display:block;font-size:12px}.benefit-grid p{font-size:11px;line-height:1.55;color:#76808a;margin:5px 0 0}
.how-steps{margin:20px 0 18px;padding:0;list-style:none;display:grid;gap:0;border:1px solid #e9edf0;border-radius:9px;overflow:hidden}
.how-steps li{display:flex;align-items:center;gap:15px;padding:16px 18px;border-bottom:1px solid #e9edf0}
.how-steps li:last-child{border:0}.how-steps li>b{font-size:17px;color:#aab2b9;font-weight:700;min-width:35px}
.how-steps li>div{flex:1;min-width:0}.how-steps h3{font-size:13px;margin:0 0 4px}.how-steps p{margin:0;font-size:12px;color:#74808b;line-height:1.55}
.how-steps li>.ico{color:#919aa4}.how-steps li>.ico svg{width:22px;height:22px}
.delivery-diagram{display:flex;align-items:center;gap:18px;background:#f9fafb;border:1px solid #edf0f2;border-radius:9px;padding:20px;margin:17px 0}
.delivery-diagram>div:first-child{width:145px;flex:none;padding:16px;border-radius:8px;background:white;border:1px solid var(--stroke)}
.delivery-diagram>div:first-child>*{display:block}.delivery-diagram>div:first-child strong{font-size:17px;margin:6px 0}.delivery-diagram>div:first-child small{font-size:10px}
.diagram-arrow{font-size:24px;color:#a4adb6}.package-list{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.package-list>div{background:#fff;border:1px solid var(--stroke);border-radius:8px;padding:13px 10px;min-width:0}.package-list .ico{display:block;color:#78858f;margin-bottom:6px}.package-list strong{display:block;font-size:11px}.package-list small{font-size:10px;line-height:1.4;display:block;margin-top:4px}
.info-cta{display:flex;gap:14px;align-items:center;border:1px solid #e8ecef;border-radius:9px;background:#fafbfc;padding:16px}.info-cta>.ico{color:#78838d}.info-cta>div{flex:1;min-width:0}.info-cta strong{font-size:13px}.info-cta p{font-size:12px;margin:4px 0 0;color:#747f89}
.simple-faq{border:1px solid #ebedf0;border-radius:8px;overflow:hidden}.simple-faq details{border-bottom:1px solid #ebedf0}.simple-faq details:last-child{border:0}
.simple-faq summary{font-size:13px;font-weight:650;cursor:pointer;padding:15px 18px}.simple-faq details[open] summary{background:#fafbfc}
.simple-faq details p{margin:0;padding:0 18px 16px;font-size:12px;color:#67737d;line-height:1.65}
.simple-faq details p a{color:#a63235;text-decoration:underline}
.legal-grid{display:grid;gap:10px}.legal-grid>div{display:flex;justify-content:space-between;gap:20px;padding:13px;border:1px solid #ebedf0;border-radius:8px;font-size:12px}.legal-grid strong{flex:0 0 39%}.legal-grid span{color:#78828b}
/* launcher */
.launcher-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.launcher-card{display:flex;flex-direction:column;gap:10px;padding:23px;transition:box-shadow .18s,border-color .18s;min-height:210px}
.launcher-card:hover{border-color:#c9ced4;box-shadow:var(--ux-shadow)}.launcher-card>strong{font-size:15px}.launcher-card>p{font-size:12px;color:#737d87;margin:0;flex:1;line-height:1.65}.launcher-card>span:last-child{font-weight:700;color:#b13739;font-size:12px}
.launcher-icon{width:43px;height:43px;background:#f1f3f5;border-radius:9px;display:grid;place-items:center;color:#657381}.launcher-icon.green{background:#eef6f1;color:#328154}.launcher-icon .ico svg{width:24px;height:24px}
.launcher-links{display:flex;gap:10px 20px;flex-wrap:wrap;margin-top:14px}.launcher-links a{font-size:12px;text-decoration:underline;text-underline-offset:4px;color:#626e79}
@media(max-width:1100px){.about-layout{grid-template-columns:220px minmax(0,1fr)}.account-layout{grid-template-columns:205px minmax(0,1fr)}.footer-grid{gap:25px}}
@media(max-width:850px){
 .success-hero{padding:26px}.success-side-art{display:none}.success-medal{width:48px;height:48px}.success-copy h1{font-size:26px}
 .account-layout{grid-template-columns:1fr}.account-side{position:static}.account-side .account-profile{display:none}.account-links{display:flex;overflow:auto;padding:6px}.account-links a{white-space:nowrap}
 .about-layout{grid-template-columns:1fr}.about-toc{position:static}.about-toc nav{grid-template-columns:repeat(3,1fr)}.about-hero{padding:26px}.about-aside-art{display:none}
 .launcher-grid{grid-template-columns:1fr 1fr}.two-cols.ux-success-cols{grid-template-columns:1fr}.ux-success-cols>.aside-stick{position:static}
}
@media(max-width:640px){
 .success-hero{display:block;padding:21px}.success-medal{margin-bottom:16px;width:45px;height:45px}.success-copy h1{font-size:24px}.success-copy p{font-size:12px}.success-key strong{font-size:16px}
 .ux-contact-bar{align-items:flex-start;flex-wrap:wrap}.ux-contact-bar .text-link{margin-left:32px}
 .compact-definition>div{gap:12px}.compact-definition dd{max-width:60%}
 .page .card-p{padding:17px}
 .preview-main{flex-wrap:wrap;gap:10px}.preview-images{min-width:105px}.preview-images img{width:42px;height:42px}.preview-copy{min-width:40%}.preview-main>strong{margin-left:auto}
 .preview-foot{align-items:flex-start;flex-direction:column}.preview-foot .btn{width:100%}
 .delivered-product{display:grid;grid-template-columns:64px 1fr;gap:10px}.delivered-product img{grid-row:1 / 3;width:64px;height:64px}.delivered-product .btn{grid-column:2;justify-self:start}
 .return-good{flex-wrap:wrap;gap:9px;padding:10px}.return-good img{width:55px;height:55px}.return-good b{width:100%;margin-left:27px}
 .return-actions{flex-direction:column-reverse;align-items:stretch}.return-actions>*{width:100%}
 .about-hero{padding:21px}.about-hero h1{font-size:26px}.about-lead{font-size:13px}.about-hero-actions>.btn{flex:1}
 .about-toc nav{grid-template-columns:1fr;display:none}.about-toc.open nav{display:grid}
 .about-toc .toc-title{display:none}.toc-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:transparent;font-size:13px;font-weight:700;color:var(--ink);padding:4px 0}
 .benefit-grid{grid-template-columns:1fr}.benefit-grid>div{display:grid;grid-template-columns:25px 1fr;gap:0 10px}.benefit-grid .ico{grid-row:1 / 3}.benefit-grid p{grid-column:2;margin-top:3px}
 .delivery-diagram{flex-direction:column;align-items:stretch}.delivery-diagram>div:first-child{width:100%}.diagram-arrow{transform:rotate(90deg);text-align:center}.package-list{grid-template-columns:1fr}.package-list>div{display:grid;grid-template-columns:25px 1fr;gap:0 8px;align-items:center}.package-list .ico{grid-row:1 / 3;margin:0}.package-list small{grid-column:2;margin:0}
 .info-cta{flex-wrap:wrap}.info-cta .btn{width:100%}
 .legal-grid>div{flex-direction:column;gap:5px}.legal-grid strong{flex:none}
 .launcher-grid{grid-template-columns:1fr}.launcher-card{min-height:175px}
}