/* Why switch from paper: text left, a before/after slider right (the paper photo clipped to the left of --x, the Bisro
   khata under it); then paper / Bisro pairs as two columns; then a four-step switch on a sky band. */

.ws-hero { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px 5vw; align-items: center; padding-top: 140px; padding-bottom: clamp(60px, 9vh, 110px) }
.ws-text .h-xl { font-size: clamp(38px, 4.2vw, 64px) }

.ws-ba { --x: 50%; position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: #EEF2F6; box-shadow: 0 50px 90px -60px rgba(31,35,40,.6); touch-action: pan-y }
.ws-after, .ws-before { position: absolute; inset: 0 }
.ws-before { clip-path: inset(0 calc(100% - var(--x)) 0 0) }
.ws-photo, .ws-photo img { display: block; width: 100%; height: 100% } .ws-photo img { object-fit: cover }
.ws-after { display: grid; place-items: center; background: radial-gradient(70% 70% at 70% 40%, #E0F2FE, #F4F8FB) }
.ws-app { width: min(78%, 360px); padding: 20px; border-radius: 22px; background: #F8FAFF; border: 1px solid #DCE9FF; color: #001C38; box-shadow: 0 30px 60px -40px rgba(0,28,56,.45); font-size: 14.5px }
.ws-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px } .ws-top b { font: 800 22px/1.2 var(--font) } .ws-top span { font-size: 12.5px; font-weight: 700; color: #9A5B00 }
.ws-bal { margin: 12px 0; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1.5px solid #DCE9FF } .ws-bal small { display: block; color: #5B6B7F; font-weight: 600 } .ws-bal b { font: 800 28px/1.2 var(--font); color: #BA1A1A }
.ws-app ul { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: #fff; border: 1.5px solid #DCE9FF }
.ws-app li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #EEF2F7; font-weight: 600 } .ws-app li:last-child { border-bottom: 0 }
.ws-app li small { display: block; font-size: 11.5px; color: #5B6B7F } .ws-app .due { color: #BA1A1A } .ws-app .ok { color: #0B6B50 }
.ws-tag { position: absolute; top: 16px; z-index: 2; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; pointer-events: none }
.ws-tag.l { left: 16px; background: rgba(31,35,40,.75); color: #fff } .ws-tag.r { right: 16px; background: #fff; color: var(--ink); border: 1px solid var(--border) }
.ws-handle { position: absolute; top: 0; bottom: 0; left: var(--x); z-index: 2; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.25); pointer-events: none }
.ws-handle i { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; color: var(--ink); font: 800 16px/1 var(--font); font-style: normal; letter-spacing: 2px; box-shadow: 0 8px 20px -6px rgba(31,35,40,.5) }
.ws-range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none }
.ws-ba:has(.ws-range:focus-visible) .ws-handle i { outline: 3px solid var(--sky-dark); outline-offset: 3px }
.ws-ba figcaption { position: absolute; left: 16px; bottom: 12px; z-index: 2; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.85); pointer-events: none }

.ws-easier { padding-bottom: clamp(70px, 11vh, 130px) }
.ws-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 5vw; margin: 34px 0 0; padding-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase }
.ws-cols span:first-child { color: var(--faint) } .ws-cols span:last-child { color: var(--link) }
.ws-easier ul { list-style: none; margin: 0; padding: 0 }
.ws-easier li { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 5vw; padding: 22px 0; border-top: 1px solid var(--border) }
.ws-was b, .ws-now b { display: block; font-size: 19px; line-height: 1.3 } .ws-was p, .ws-now p { margin: 6px 0 0; font-size: 16.5px; line-height: 1.55 }
.ws-was b { color: var(--muted); font-weight: 700 } .ws-was p { color: var(--faint) }
.ws-now { position: relative; padding-left: 30px } .ws-now::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: var(--teal); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat }
.ws-now b { color: var(--ink) } .ws-now p { color: #2F3640 }

.ws-switch { padding: clamp(60px, 9vh, 110px) 0 clamp(70px, 11vh, 130px); background: var(--sky-light) }
.ws-switch ol { list-style: none; margin: 40px 0 0; padding: 0; counter-reset: sw; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px }
.ws-switch li { counter-increment: sw; position: relative; padding-top: 58px }
.ws-switch li::before { content: counter(sw); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; font: 800 18px/1 var(--font) }
.ws-switch li:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 54px; right: -14px; height: 2px; background: rgba(3,105,161,.25) }
.ws-switch h3 { margin: 0; font: 800 19px/1.3 var(--font) } .ws-switch li p { margin: 8px 0 0; color: #2F3640; font-size: 16px } .ws-more { font-size: 15.5px }

@media (max-width: 980px) {
  .ws-hero { grid-template-columns: 1fr; padding-top: 110px }
  .ws-switch ol { grid-template-columns: 1fr 1fr } .ws-switch li::after { display: none }
}
@media (max-width: 640px) {
  .ws-ba { aspect-ratio: 3 / 4 } .ws-app { width: 84% }
  .ws-cols { display: none } .ws-easier li { grid-template-columns: 1fr }
  .ws-switch ol { grid-template-columns: 1fr }
}