/* The welcome: five steps, one layout, before the home screen. One stylesheet for all of it.
   Every step starts at the same height: a step label, the title, one line of text, then the content.
   The title and text sit on the sky in white; the content sits on white cards and fields with dark ink.
   Buttons and icons are black and white. No glow. Only transform and opacity animate. No blur, no backdrop filters. */

body.ob-open{overflow:hidden}
body.ob-open .app{visibility:hidden}

#onboard{position:fixed;inset:0;z-index:50;display:flex;justify-content:center;overflow:hidden;color:#fff;background:linear-gradient(180deg,var(--sk-a,#3f5f9a) 0%,var(--sk-b,#b7a0a6) 52%,var(--sk-c,#f0b98a) 100%);opacity:0;transition:opacity .4s ease}
#onboard[hidden]{display:none}
#onboard.on{opacity:1}
#onboard::before{display:none}
:root[data-style="sky"] body::before{display:none!important}

.wl{position:relative;width:100%;max-width:460px;height:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) 22px max(18px,env(safe-area-inset-bottom))}
@media (min-width:700px){.wl{padding-top:36px}}

/* top: the logo on the first step, back after it, then the five-part progress. The same height on every step. */
.wl-top{flex:none;display:flex;align-items:center;gap:14px;height:46px}
.wl-brand{flex:none;box-sizing:border-box;width:40px;height:40px;padding:9px;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(10,30,70,.2)}
.wl-brand[hidden],.wl-back[hidden]{display:none!important}
.wl-back{flex:none;width:44px;height:44px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;background:#fff;color:#1d1d1f;box-shadow:0 6px 16px rgba(10,30,70,.2);cursor:pointer;transition:transform .18s ease,opacity .2s ease}
.wl-back:active{transform:scale(.92)}
.wl-back.off{visibility:hidden}
/* five steps: a dot for each step; the step you are on becomes a pill, and it goes back to a dot when you leave it */
.wl-prog{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px}
.wl-prog i{flex:none;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.4);transition:width .35s cubic-bezier(.2,.8,.2,1),background .3s ease}
.wl-prog i.done{background:#fff}
.wl-prog i.on{width:44px;border-radius:99px;background:#fff}

/* the stage holds one step at a time. It scrolls, which also clips anything past its edge, so it reaches past the gutter by the width of the shadows */
.wl-stage{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;margin:0 -24px;padding:0 24px}
.wl-stage::-webkit-scrollbar{display:none}
/* every step is top-aligned with the same padding, so the step label, the title and the text never move between steps */
.wl-page{margin:0;padding:22px 0 16px;display:flex;flex-direction:column;gap:12px;animation:wlR .46s cubic-bezier(.2,.8,.2,1) both}
.wl-page.wl-in-l{animation-name:wlL}
@keyframes wlR{from{opacity:0;transform:translate3d(26px,0,0)}to{opacity:1;transform:none}}
@keyframes wlL{from{opacity:0;transform:translate3d(-26px,0,0)}to{opacity:1;transform:none}}
@keyframes wlRise{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes wlPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes wlDraw{to{stroke-dashoffset:0}}

/* the words over the sky: the step label, the title and one line of text */
.wl-eye{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#fff;opacity:.92;text-shadow:0 1px 10px rgba(20,40,80,.25)}
.wl h1{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(30px,8.4vw,38px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance;color:#fff;outline:none;text-shadow:0 2px 18px rgba(20,40,80,.25)}
:lang(hi) .wl h1{letter-spacing:0}
.wl-sub{margin:0;font-size:16.5px;line-height:1.5;color:#fff;max-width:36ch;text-wrap:pretty;text-shadow:0 1px 12px rgba(20,40,80,.28)}
@media (min-width:700px){.wl h1{font-size:44px}}

/* step 1: the language list fills the rest of the page and scrolls inside itself when it is short */
.wl-langs{display:flex;flex-direction:column;gap:8px;min-height:0}
.wl-page.wl-welcome{flex:1 1 auto;min-height:0}
.wl-page.wl-welcome > :not(.wl-langs){flex-shrink:0}
.wl-page.wl-welcome .wl-langs{flex:1 1 auto;min-height:0}
.wl-page.wl-welcome .wl-langs .langs{flex:1 1 auto;min-height:140px;max-height:min(50vh,460px)}

/* step 2: about you. White fields, dark ink. The labels sit on the sky, so they are dark too */
.wl-form{display:flex;flex-direction:column;gap:14px}
.wl-field{display:flex;flex-direction:column;gap:7px;min-width:0;margin:0}
.wl-lbl{padding-left:4px;font-size:14px;font-weight:600;color:#1d1d1f}
.wl-in{width:100%;height:54px;box-sizing:border-box;border:0;border-radius:18px;padding:0 18px;font:inherit;font-size:17px;color:#1d1d1f;background:#fff;outline:none;box-shadow:0 8px 22px rgba(10,30,70,.14);-webkit-appearance:none;appearance:none}
.wl-in::placeholder{color:#8a919c}
.wl-in:focus{box-shadow:0 8px 22px rgba(10,30,70,.14)}
.wl-hint-small{margin:0;padding-left:4px;min-height:1.2em;font-size:13px;color:#1d1d1f;opacity:.85}
.wl-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wl-chips button{height:52px;border:0;border-radius:18px;background:#fff;color:#1d1d1f;font:inherit;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 8px 22px rgba(10,30,70,.12);transition:background .2s ease,color .2s ease,transform .15s ease}
.wl-chips button:active{transform:scale(.97)}
.wl-chips button[aria-pressed=true]{background:#1d1d1f;color:#fff;box-shadow:0 8px 20px rgba(10,30,70,.22)}
.wl-dd .dd-btn{height:54px;border:0;border-radius:18px;background:#fff;color:#1d1d1f;font:inherit;font-size:17px;box-shadow:0 8px 22px rgba(10,30,70,.14)}
/* the shared sky rules give the dropdown a glass fill; the onboarding field stays solid white */
:root[data-style="sky"] .wl-dd .dd-btn{background:#fff!important;color:#1d1d1f}
.wl-err{margin:0;padding:10px 14px;border-radius:14px;background:#8f1d28;color:#fff;font-size:14px;font-weight:600}
.wl-err[hidden]{display:none}

/* step 3: what Saathi helps with. White cards, dark text, a black badge */
.wl-svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wl-svc li,.wl-points li{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:22px;background:#fff;box-shadow:0 10px 26px rgba(10,30,70,.14);animation:wlRise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
.wl-svc b,.wl-points b{display:block;font-size:15.5px;font-weight:600;line-height:1.25;color:#1d1d1f}
.wl-svc span:not(.wl-ic),.wl-points p{margin:0;font-size:13.5px;line-height:1.4;color:#5b6472}
.wl-ic{flex:none;width:42px;height:42px;border-radius:50%;background:#1d1d1f;color:#fff;display:grid;place-items:center}
/* step 3 is six cards: a little tighter, so all six fit on a phone without scrolling */
.wl-svc li{gap:8px;padding:14px}
.wl-svc .wl-ic{width:36px;height:36px}
.wl-svc span:not(.wl-ic){font-size:13px}

/* step 4: the promises */
.wl-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wl-points li{flex-direction:row;align-items:flex-start;gap:14px}
.wl-points div{display:flex;flex-direction:column;gap:4px;min-width:0}
.wl-points b{font-size:16px}
.wl-points p{font-size:14.5px}
.wl-link{align-self:center;margin:0;padding:6px 8px;border:0;background:none;color:#1d1d1f;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* step 5: done. A white disc with a black tick */
.wl-tick{display:block;width:96px;height:96px;margin:8px 0 0}
.wl-tick circle{fill:#fff;transform-box:fill-box;transform-origin:50% 50%;animation:wlPop .5s cubic-bezier(.2,.9,.3,1.2) both}
.wl-tick path{fill:none;stroke:#1d1d1f;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;animation:wlDraw .5s .3s ease forwards}

/* foot: one Continue, black with white text. Disabled until the step is complete, with a line saying what is missing */
.wl-foot{flex:none;display:flex;flex-direction:column;gap:10px;padding-top:12px}
.wl-hint{min-height:1.3em;margin:0;text-align:center;font-size:14px;color:#1d1d1f;opacity:.9}
.wl-next{width:100%;height:58px;border:0;border-radius:999px;background:#1d1d1f;color:#fff;font:inherit;font-size:17px;font-weight:650;cursor:pointer;box-shadow:0 14px 34px rgba(10,30,70,.26);transition:transform .16s ease,opacity .2s ease,box-shadow .2s ease,background .2s ease}
.wl-next:not(:disabled):hover{background:#000}
.wl-next:not(:disabled):active{transform:scale(.98)}
.wl-next:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}

/* the explicit Dark choice (night sky): the text that sits on the sky turns white */
:root[data-sky="night"] .wl-lbl,:root[data-sky="night"] .wl-hint,:root[data-sky="night"] .wl-hint-small,:root[data-sky="night"] .wl-link{color:#fff}
:root[data-sky="night"] .wl-next{background:#fff;color:#1d1d1f;box-shadow:0 14px 34px rgba(0,0,0,.3)}
:root[data-sky="night"] .wl-next:not(:disabled):hover{background:#f2f2f5}

/* shorter screens (laptops, small phones): a tighter rhythm. Every step gets the same change, so the layout stays the same */
@media (max-height:860px){
  .wl-page{padding:16px 0 10px;gap:10px}
  .wl-form{gap:10px}
}
@media (min-width:700px) and (max-height:860px){.wl{padding-top:20px}.wl h1{font-size:38px}}

@media (prefers-reduced-motion:reduce){
  .wl-page,.wl-svc li,.wl-points li,.wl-tick circle{animation:none!important}
  .wl-tick path{animation:none!important;stroke-dashoffset:0}
}

/* ---- focus: no white or black ring when you tap or click a field or a button. Fields keep their own shape and colour. ---- */
:focus,:focus-visible{outline:none!important}
input:focus,input:focus-visible,textarea:focus,textarea:focus-visible,select:focus,select:focus-visible,.wl-in:focus,.dd-q:focus,.dd-btn:focus,.dd-btn:focus-visible,.search-w input:focus{box-shadow:none!important}
.composer:focus-within,.search-w:focus-within,.field-i:focus,.field-i:focus-visible,.dd-q:focus,.dd-btn:focus,.dd-btn:focus-visible{border-color:color-mix(in srgb,currentColor 14%,transparent)!important}

/* ===== Step 1, the language list: a plain white card with dark text, in every sky. No fade, no glow. ===== */
.wl-welcome .search-w{height:50px;padding:0 16px;gap:10px;border:0;border-radius:16px;background:#fff!important;color:#5b6472;box-shadow:0 8px 22px rgba(10,30,70,.16)}
.wl-welcome .search{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;font-size:16px;color:#1d1d1f;outline:none;box-shadow:none}
.wl-welcome .search::placeholder{color:#6b7280;opacity:1}
.wl-welcome .langs{margin-top:0;border:0;border-radius:20px;background:#fff!important;box-shadow:0 14px 34px rgba(10,30,70,.2)}
.wl-welcome .lang{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:60px;padding:10px 18px;border:0;border-radius:0;background:transparent;color:#1d1d1f;text-align:left;font:inherit;cursor:pointer}
.wl-welcome .lang+.lang{border-top:1px solid rgba(29,29,31,.08)}
.wl-welcome .lang[aria-checked=true]{background:#f2f2f5}
.wl-welcome .l-tx{display:grid;gap:2px;min-width:0}
.wl-welcome .l-tx b{font:600 16px/1.3 var(--serif);color:#1d1d1f}
.wl-welcome .l-tx small{font-size:13px;color:#5b6472}
.wl-welcome .l-dot{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(29,29,31,.22);display:grid;place-items:center;color:transparent}
.wl-welcome .lang[aria-checked=true] .l-dot{background:#1d1d1f;border-color:#1d1d1f;color:#fff}

/* the first step wins over the shared sky rules for the list and the search (their dark night colours, their fade, their margin) */
:root[data-style="sky"] .wl-welcome .search-w{background:#fff!important;border:0;color:#5b6472}
:root[data-style="sky"] .wl-welcome .search{color:#1d1d1f}
:root[data-style="sky"] .wl-welcome .langs,
.wl-welcome .langs.fadey{background:#fff!important;-webkit-mask-image:none!important;mask-image:none!important;border:0}
:root[data-style="sky"] .wl-welcome .langs{margin-top:0}
:root[data-style="sky"] .wl-welcome .lang{background:transparent!important;color:#1d1d1f}
:root[data-style="sky"] .wl-welcome .lang[aria-checked=true]{background:#f2f2f5!important}
:root[data-style="sky"] .wl-welcome .l-tx b{color:#1d1d1f}
:root[data-style="sky"] .wl-welcome .l-tx small{color:#5b6472}