/* wr-mobile.css — workstream E (mobile + perf). Loaded last. */
.burger{display:none;width:44px;height:44px;border:1px solid var(--line,#e5e7eb);border-radius:12px;background:#fff;align-items:center;justify-content:center;cursor:pointer;padding:0;margin-left:8px;flex:none}
.burger span{display:block;width:18px;height:2px;background:var(--ink,#111827);border-radius:2px;position:relative;transition:transform .2s,background .2s}
.burger span:before,.burger span:after{content:"";position:absolute;left:0;width:18px;height:2px;background:inherit;border-radius:2px;transition:transform .2s,top .2s}
.burger span:before{top:-6px}.burger span:after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span:before{top:0;transform:rotate(45deg);background:var(--ink,#111827)}
.burger[aria-expanded="true"] span:after{top:0;transform:rotate(-45deg);background:var(--ink,#111827)}
.mnav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line,#e5e7eb);box-shadow:0 18px 30px -18px rgba(17,24,39,.25);padding:8px 20px 20px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
.mnav.open{opacity:1;transform:none;visibility:visible}
.mnav a{display:block;padding:14px 4px;font-size:17px;font-weight:600;color:var(--ink,#111827);text-decoration:none;border-bottom:1px solid #f1f3f7}
.mnav a.btn{margin-top:14px;border:0;text-align:center;color:#fff}
@media(max-width:899px){
 .hdr{position:sticky}.hdr .wrap{position:relative;display:flex;align-items:center}
 .burger{display:inline-flex}
 .hdr .logo img{width:150px;height:auto}
 .hdr .btn-sm{padding:9px 14px;font-size:14px;margin-left:auto}
 /* sticky CTA: hidden until hero scrolled past */
 .sticky{transform:translateY(110%);transition:transform .25s ease;box-shadow:0 -8px 24px rgba(17,24,39,.08)}
 body.wr-show-sticky .sticky{transform:none}
 body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 .ftr{padding-bottom:28px}
 /* hero: one centered mockup, nothing clipped */

 .hero{padding:20px 0 36px}
 .hero .thumbs{display:flex!important;justify-content:center;overflow:visible}
 .hero .thumbs .thumb:not(.mid){display:none!important}
 .hero .thumbs .thumb.mid{margin:0 auto;transform:none!important;max-width:220px}
 /* tighter spacing */
 .sec{padding-top:44px!important;padding-bottom:44px!important}
 .sec[style*="padding-top:0"]{padding-top:0!important}
 h2{margin-bottom:14px}
 .cards3,.grid6{gap:12px}
 .bcard{padding:20px!important}.bcard .ic{margin-bottom:8px}
 .grid6>div{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:start}
 .grid6>div>.ic{grid-row:span 2;margin:0}.grid6>div h3{margin:0 0 4px}.grid6>div p{margin:0}
 .faq details{padding-top:12px;padding-bottom:12px}
}
/* Razorpay badge: never wrap mid-phrase */
.wr-rzp{white-space:normal;max-width:100%}.wr-rzp b{white-space:nowrap}
.ftr .wr-rzp{white-space:normal;display:inline-block}
.ftr .wr-rzp b{white-space:nowrap}
@media(max-width:600px){.ftr p .wr-rzp{font-size:13px;line-height:1.5}}
/* desktop hero fit (1280x720: both CTAs above fold) */
@media(min-width:960px){
 .hero{padding:32px 0 56px}
 .hero .grid{align-items:center!important}
 .hero h1{font-size:clamp(40px,3.6vw,52px)!important;line-height:1.08!important;margin:10px 0 14px!important}
 .hero .sub{font-size:17px;margin-bottom:20px}
 .hero .thumbs{align-self:center}
}
@media(max-width:899px){.hdr .btn-sm{white-space:nowrap;padding:9px 12px;font-size:13px}.hdr .logo img{width:132px}}
@media(max-width:360px){.hdr .btn-sm{display:none}}
@media(max-width:899px){.sticky .btn{white-space:nowrap;font-size:15px;padding:12px 10px}.sticky .btn-p{flex:1.4}}