/* ============================================================
   Login V2 Web ("Aangan") — LOGIN_V2_WEB_PLAN.md, Phases 0–4.
   Click-through UI only (no live API calls yet — see loginv2.js).

   Everything in this file lives under .lrv2-scope (the page shell and the
   quick-login modal both carry it) and every rule is prefixed lrv2- so
   this can never collide with the site's existing CSS, which does define
   bare .field/.dots/.cta/.role rules elsewhere. Design tokens/measurements
   ported from the approved Aangan prototype's "Web onboarding" frame,
   translated 1:1 (colours, radii, type sizes) — see FONT note below for
   the one deliberate deviation.

   Site is light-theme only per the plan — no dark variants needed here.
   ============================================================ */

/* ============ SELF-HOSTED FONTS ============
   Same two families/weights as the Android app (public/front/assets/fonts,
   converted from the app's own .ttf so both platforms render identically).
   Not loaded via Google Fonts because this pair isn't used anywhere else
   on the site (the rest of the site runs on Plus Jakarta Sans / --lr-font
   — see FONT_CONSOLIDATION_PLAN.md, which this deliberately does not
   touch: Aangan is its own isolated design system per the plan's ground
   rules, sharing nothing with the current site chrome). */
@font-face{
  font-family:"LRV2 Instrument Sans";
  src:url("../fonts/instrument_sans_regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"LRV2 Instrument Sans";
  src:url("../fonts/instrument_sans_medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"LRV2 Instrument Sans";
  src:url("../fonts/instrument_sans_semibold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"LRV2 Instrument Sans";
  src:url("../fonts/instrument_sans_bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"LRV2 Bricolage Grotesque";
  src:url("../fonts/bricolage_grotesque_bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"LRV2 Bricolage Grotesque";
  src:url("../fonts/bricolage_grotesque_extrabold.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
}

/* ============ TOKENS + RESET (scoped) ============ */
.lrv2-scope{
  --lrv2-bg:#FBF9F7;
  --lrv2-card:#FFFFFF;
  --lrv2-ink:#2B2621;
  --lrv2-sub:#7A716A;
  --lrv2-line:rgba(43,38,33,.10);
  --lrv2-line-strong:rgba(43,38,33,.16);
  --lrv2-prime:#FF5403;
  --lrv2-prime-deep:#C8420E;
  --lrv2-on-prime:#FFF6F1;
  --lrv2-accent:#FACC15;
  --lrv2-soft:#FFF0E7;
  --lrv2-danger:#F04747;
  --lrv2-good:#009960;
  --lrv2-shadow:0 12px 32px rgba(43,38,33,.13);
  --lrv2-shadow-lg:0 30px 80px rgba(20,17,16,.16);
  --lrv2-font-display:"LRV2 Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --lrv2-font-body:"LRV2 Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-family:var(--lrv2-font-body);
  color:var(--lrv2-ink);
  -webkit-font-smoothing:antialiased;
}
.lrv2-scope, .lrv2-scope *, .lrv2-scope *::before, .lrv2-scope *::after{
  box-sizing:border-box;
}
.lrv2-scope button{font-family:inherit}
/* ID-scoped, not .lrv2-scope: the page renders inside the site's
   .hp-preview wrapper, which carries its own `.hp-preview a{color:
   #FC4A0A}` at equal (0,1,1) specificity — a same-specificity rule loaded
   later in template.blade.php's <head> always wins the cascade regardless
   of scoping, so plain class selectors here silently lose to it. #lrv2Page
   / #lrv2ModalOverlay push specificity to (1,0,1), which always wins. */
#lrv2Page a, #lrv2ModalOverlay a{color:var(--lrv2-prime);text-decoration:none}
#lrv2Page a:hover, #lrv2ModalOverlay a:hover{text-decoration:underline}
.lrv2-scope input{font-family:inherit;color:inherit}

/* ============ PAGE SHELL ============ */
body.loginv2-page .hp-header,
body.loginv2-page .hp-header-mobile,
body.loginv2-page .hp-app-banner,
body.loginv2-page .hp-footer,
body.loginv2-page .hp-bottom-nav{
  display:none !important;
}

.lrv2-page{
  min-height:100vh;
  background:var(--lrv2-card);
}
.lrv2-shell{
  width:100%;
  min-height:100vh;
  display:flex;
  position:relative;
}

/* ---- brand panel (left on desktop, stacked top on mobile) ---- */
.lrv2-panel{
  width:41%;
  flex-shrink:0;
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg,var(--lrv2-prime),var(--lrv2-prime-deep));
  color:var(--lrv2-on-prime);
  padding:44px 42px;
  display:flex;
  flex-direction:column;
}
.lrv2-panel::before{
  content:"";position:absolute;top:-110px;right:-110px;width:300px;height:300px;
  border-radius:50%;border:44px solid rgba(255,255,255,.10);pointer-events:none;
}
.lrv2-ghar-mark{
  position:absolute;bottom:-34px;right:8px;
  font-family:"Tiro Devanagari Hindi",serif;
  font-size:150px;line-height:1;color:#fff;opacity:.08;
  pointer-events:none;user-select:none;
}
.lrv2-brand{display:flex;align-items:center;gap:10px;position:relative}
.lrv2-brand img{width:50px;height:47px;object-fit:contain;filter:brightness(0) invert(1)}
.lrv2-brand b{font-family:var(--lrv2-font-display);font-size:18px;font-weight:700}
/* .lrv2-brand is an <a> now (links home) — needs its own color against
   .hp-preview a (see the #lrv2Page note above); two classes beats it. */
#lrv2Page .lrv2-panel .lrv2-brand{color:var(--lrv2-on-prime)}
.lrv2-tagline{
  font-family:var(--lrv2-font-display);font-size:30px;font-weight:800;
  line-height:1.1;letter-spacing:-.02em;margin-top:40px;position:relative;
  text-wrap:balance;max-width:20ch;
}
.lrv2-trust{margin-top:auto;display:flex;flex-direction:column;gap:13px;position:relative}
.lrv2-trust span{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.lrv2-trust i{
  font-style:normal;width:24px;height:24px;border-radius:8px;flex-shrink:0;
  background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:12px;
}

/* ---- steps column (right on desktop, below panel on mobile) ---- */
.lrv2-content{
  flex:1;min-width:0;
  padding:44px min(90px,7vw) 32px;
  display:flex;flex-direction:column;justify-content:center;
}
.lrv2-steps{
  flex:0 1 auto;position:relative;min-height:280px;
  width:100%;max-width:520px;
}
/* Page context centers steps+foot as one group vertically in the
   full-bleed right pane, so the foot must follow steps in normal flow
   here instead of the modal's "pin to card bottom" auto-margin. */
.lrv2-content .lrv2-foot{max-width:520px;margin-top:28px}

/* ---- exit link + step-back chevron (page only; the modal exits via
   its own X / backdrop / Esc, never this) ---- */
/* #lrv2Page-scoped: needs to beat the #lrv2Page a rule above, which a
   plain .lrv2-back class (or even .lrv2-scope .lrv2-back) cannot — ID
   specificity always outranks any number of classes. */
#lrv2Page .lrv2-back{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:18px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--lrv2-sub);transition:color .2s ease;
  align-self:flex-start;text-decoration:none;position:relative;z-index:2;
}
#lrv2Page .lrv2-back:hover{color:var(--lrv2-prime);text-decoration:none}
.lrv2-back-full{display:inline}

/* ---- mobile-only brand row (desktop shows the brand inside .lrv2-panel;
   that panel doesn't exist on mobile web, so this duplicate — hidden on
   desktop — takes its place, exactly like the prototype's .ob-brand) ---- */
.lrv2-brand-mobile{display:none}
.lrv2-mobile-ghar{
  display:none;position:absolute;top:70px;right:20px;
  font-family:"Tiro Devanagari Hindi",serif;font-size:110px;line-height:1;
  color:var(--lrv2-prime);opacity:.10;pointer-events:none;user-select:none;z-index:0;
}
.lrv2-h-mobile,.lrv2-lede-mobile,.lrv2-fine-mobile{display:none}
.lrv2-dots-wrap{display:flex;align-items:center}
.lrv2-stepback{
  width:36px;height:36px;border-radius:13px;border:1.5px solid var(--lrv2-line-strong);
  background:var(--lrv2-card);color:var(--lrv2-ink);cursor:pointer;flex-shrink:0;
  display:grid;place-items:center;font-size:14px;margin-right:12px;
  transition:all .2s ease;
}
.lrv2-stepback:hover{border-color:var(--lrv2-prime);color:var(--lrv2-prime)}
.lrv2-stepback:disabled{opacity:0;pointer-events:none}

.lrv2-step{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;transform:translateX(28px);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1);
}
.lrv2-step.lrv2-step-on{opacity:1;transform:none;pointer-events:auto;position:relative}
.lrv2-step.lrv2-step-gone{transform:translateX(-28px)}

.lrv2-h{
  font-family:var(--lrv2-font-display);
  font-size:27px;font-weight:800;letter-spacing:-.015em;line-height:1.14;
  margin:0 0 8px;text-wrap:balance;
}
.lrv2-h em{font-style:normal;color:var(--lrv2-prime)}
.lrv2-lede{color:var(--lrv2-sub);font-size:13.5px;max-width:40ch;margin:0}
.lrv2-fine{color:var(--lrv2-sub);font-size:12px;margin-top:16px}
.lrv2-fine a{font-weight:600}

/* ============ PHONE FIELD ============ */
.lrv2-field{
  margin-top:24px;display:flex;align-items:center;gap:12px;
  background:var(--lrv2-card);border:1.5px solid var(--lrv2-line-strong);
  border-radius:16px;padding:15px 18px;box-shadow:var(--lrv2-shadow);
  max-width:380px;transition:border-color .2s ease,box-shadow .2s ease;
}
.lrv2-field:focus-within{border-color:var(--lrv2-prime);box-shadow:0 0 0 4px var(--lrv2-soft)}
.lrv2-field .lrv2-cc{
  font-weight:700;font-variant-numeric:tabular-nums;color:var(--lrv2-sub);
  border-right:1px solid var(--lrv2-line);padding-right:12px;flex-shrink:0;
}
.lrv2-field input{
  border:0;outline:0;background:transparent;flex:1;min-width:0;
  font-weight:600;font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:.03em;
}
.lrv2-field input::placeholder{color:var(--lrv2-sub);opacity:.6;font-weight:500}

/* ============ OTP ============ */
.lrv2-otp-row{display:flex;gap:11px;margin-top:24px}
.lrv2-otp{
  width:54px;height:62px;border-radius:16px;background:var(--lrv2-card);
  border:1.5px solid var(--lrv2-line-strong);text-align:center;outline:0;
  font:700 22px var(--lrv2-font-display);font-variant-numeric:tabular-nums;
  transition:all .25s ease;color:var(--lrv2-ink);
}
.lrv2-otp:focus{border-color:var(--lrv2-prime);box-shadow:0 0 0 4px var(--lrv2-soft)}
.lrv2-otp.lrv2-fill{
  border-color:var(--lrv2-prime);box-shadow:0 0 0 4px var(--lrv2-soft);
  animation:lrv2-otp-pop .3s cubic-bezier(.2,1.4,.3,1);
}
@keyframes lrv2-otp-pop{
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-6px) scale(1.06)}
  100%{transform:translateY(0) scale(1)}
}
.lrv2-otp.lrv2-otp-error{border-color:var(--lrv2-danger);animation:lrv2-shake .35s ease}
@keyframes lrv2-shake{
  25%{transform:translateX(-5px)}75%{transform:translateX(5px)}
}
/* Phase 5: server-side error messages (rate limits, wrong OTP, validation
   failures) — one per step, created/toggled by loginv2.js as needed. */
.lrv2-api-error{color:var(--lrv2-danger);font-size:13px;margin-top:14px;display:none}
.lrv2-resend{margin-top:16px;font-size:13px;color:var(--lrv2-sub)}
.lrv2-resend-btn{
  background:none;border:0;padding:0;font:inherit;font-weight:600;
  color:var(--lrv2-prime);cursor:pointer;
}
.lrv2-resend-btn:disabled{color:var(--lrv2-sub);cursor:default}
.lrv2-edit-number{
  margin-top:14px;background:none;border:0;padding:0;font:inherit;font-size:12.5px;
  font-weight:600;color:var(--lrv2-sub);cursor:pointer;display:inline-flex;align-items:center;gap:5px;
}
.lrv2-edit-number:hover{color:var(--lrv2-prime)}

/* ============ NAME STEP ============ */
.lrv2-name-field{
  margin-top:24px;background:var(--lrv2-card);border:1.5px solid var(--lrv2-line-strong);
  border-radius:16px;padding:15px 18px;box-shadow:var(--lrv2-shadow);max-width:380px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.lrv2-name-field:focus-within{border-color:var(--lrv2-prime);box-shadow:0 0 0 4px var(--lrv2-soft)}
.lrv2-name-field input{
  width:100%;border:0;outline:0;background:transparent;font-weight:600;font-size:16px;
}
.lrv2-name-field input::placeholder{color:var(--lrv2-sub);opacity:.6;font-weight:500}

/* ============ ACCOUNT TYPE (2×2) ============ */
.lrv2-acct-group{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lrv2-sub);margin:22px 0 10px;
}
.lrv2-acct-group:first-of-type{margin-top:20px}
.lrv2-acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px}
.lrv2-acct{
  border:1.5px solid var(--lrv2-line-strong);border-radius:16px;background:var(--lrv2-card);
  padding:14px;display:flex;flex-direction:column;gap:6px;cursor:pointer;text-align:left;
  transition:all .2s ease;box-shadow:var(--lrv2-shadow);color:var(--lrv2-ink);
}
.lrv2-acct:hover{transform:translateY(-2px)}
.lrv2-acct.lrv2-pick{border-color:var(--lrv2-prime);box-shadow:0 0 0 4px var(--lrv2-soft)}
.lrv2-acct .lrv2-aicon{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:var(--lrv2-soft);font-size:16px;
}
.lrv2-acct b{font-size:14px;font-family:var(--lrv2-font-display);font-weight:700}
.lrv2-acct span{font-size:11px;color:var(--lrv2-sub);line-height:1.35}

/* ============ REQUIREMENT: LOCATION + QUICK-PICKS ============ */
.lrv2-loc-field{
  margin-top:22px;display:flex;align-items:center;gap:10px;
  background:var(--lrv2-card);border:1.5px solid var(--lrv2-line-strong);
  border-radius:16px;padding:14px 16px;box-shadow:var(--lrv2-shadow);max-width:420px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.lrv2-loc-field:focus-within{border-color:var(--lrv2-prime);box-shadow:0 0 0 4px var(--lrv2-soft)}
.lrv2-loc-field svg{width:17px;height:17px;stroke:var(--lrv2-prime);fill:none;stroke-width:2.2;flex-shrink:0}
.lrv2-loc-field input{border:0;outline:0;background:transparent;flex:1;min-width:0;font-weight:600;font-size:14.5px}
.lrv2-loc-field input::placeholder{color:var(--lrv2-sub);opacity:.7;font-weight:500}

.lrv2-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lrv2-chip{
  border:1.5px solid var(--lrv2-line-strong);background:var(--lrv2-card);border-radius:999px;
  padding:8px 15px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .18s ease;
  color:var(--lrv2-ink);
}
.lrv2-chip:hover{border-color:var(--lrv2-prime)}
.lrv2-chip.lrv2-pick{background:var(--lrv2-prime);color:var(--lrv2-on-prime);border-color:var(--lrv2-prime)}

.lrv2-match-pulse{
  margin-top:18px;display:inline-flex;align-items:center;gap:10px;
  background:var(--lrv2-soft);border-radius:999px;padding:9px 16px;
  font-size:13px;font-weight:600;color:var(--lrv2-prime-deep);
}
.lrv2-match-pulse i{
  width:8px;height:8px;border-radius:50%;background:var(--lrv2-good);flex-shrink:0;
  animation:lrv2-pulse 1.6s ease infinite;
}
@keyframes lrv2-pulse{50%{transform:scale(1.7);opacity:.5}}

/* Requirement step "short path" (gated-click signups — Contact Now, View
   Number, etc.): only the tenant_type ("For") row is asked, matching the
   old wizard's LR_OB_SHORT_ORDER. See initPage()/requirementStep() in
   loginv2.js. */
.lrv2-req-h-short,.lrv2-req-lede-short{display:none}
[data-step="requirement"][data-req-short="1"] .lrv2-req-h-full{display:none}
[data-step="requirement"][data-req-short="1"] .lrv2-req-h-short,
[data-step="requirement"][data-req-short="1"] .lrv2-req-lede-short{display:block}
[data-step="requirement"][data-req-short="1"] .lrv2-req-full{display:none}
[data-step="requirement"][data-req-short="1"] .lrv2-req-tenanttype-label{display:none}

/* ============ WELCOME / DONE ============ */
.lrv2-done{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex:1}
.lrv2-done-ring{
  width:76px;height:76px;border-radius:50%;background:var(--lrv2-prime);
  display:grid;place-items:center;color:var(--lrv2-on-prime);font-size:30px;
  margin-bottom:22px;animation:lrv2-pop .5s cubic-bezier(.2,1.4,.3,1);
}
@keyframes lrv2-pop{from{transform:scale(.4);opacity:0}}

/* ============ FOOT: DOTS + CTA ============ */
.lrv2-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:22px;gap:16px}
.lrv2-dots{display:flex;gap:7px}
.lrv2-dots i{width:7px;height:7px;border-radius:99px;background:var(--lrv2-line-strong);transition:all .3s ease}
.lrv2-dots i.lrv2-on{width:22px;background:var(--lrv2-prime)}
.lrv2-cta{
  border:0;cursor:pointer;border-radius:999px;
  background:var(--lrv2-prime);color:var(--lrv2-on-prime);
  font:600 14.5px var(--lrv2-font-body);
  padding:14px 28px;display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 10px 24px rgba(255,84,3,.32);transition:transform .18s ease,opacity .18s ease;
  white-space:nowrap;
}
.lrv2-cta:hover{transform:translateY(-2px)}
.lrv2-cta:disabled{opacity:.5;cursor:not-allowed;transform:none}
.lrv2-cta-block{width:100%;justify-content:center;padding:16px 0}
.lrv2-cta:focus-visible,
.lrv2-acct:focus-visible,
.lrv2-chip:focus-visible,
.lrv2-resend-btn:focus-visible{outline:2px solid var(--lrv2-prime);outline-offset:3px}

/* ============ QUICK-LOGIN MODAL ============ */
.lrv2-modal-overlay{
  position:fixed;inset:0;z-index:99999;
  background:rgba(23,19,16,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.lrv2-modal-overlay.lrv2-show{opacity:1;visibility:visible}
.lrv2-modal{
  width:100%;max-width:420px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--lrv2-card);border-radius:26px;padding:36px 32px 30px;
  box-shadow:var(--lrv2-shadow-lg);position:relative;
  transform:translateY(18px) scale(.98);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s ease;
}
.lrv2-modal-overlay.lrv2-show .lrv2-modal{transform:none;opacity:1}
.lrv2-modal-close{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
  border:0;background:var(--lrv2-bg);color:var(--lrv2-sub);cursor:pointer;
  display:grid;place-items:center;font-size:16px;line-height:1;
}
.lrv2-modal-close:hover{background:var(--lrv2-soft);color:var(--lrv2-prime)}
.lrv2-modal .lrv2-brand{margin-bottom:24px;color:var(--lrv2-ink)}
.lrv2-modal .lrv2-brand img{filter:none}
.lrv2-modal .lrv2-steps{min-height:220px}
.lrv2-modal .lrv2-foot{padding-top:20px}

/* ============ DESKTOP SCALE-UP (page only, not the modal) ============
   The prototype's desktop frame was presented inside a ~960px browser
   mockup, so its type/component sizes read correctly at that width. Now
   that the page is genuinely full-bleed (no floating card), those same
   px values sit inside a much wider real pane on an actual unzoomed
   monitor (1440px+) and read as undersized — exactly the "125% browser
   zoom looks right, 100% looks small" report. Scaled ~1.15–1.2× here,
   #lrv2Page-scoped (ID beats the base classes regardless of media-query
   order) so the quick-login modal — a fixed small card, not full-bleed —
   keeps its own already-correct proportions untouched. */
@media (min-width:901px){
  #lrv2Page .lrv2-content{padding:48px min(110px,7vw) 36px}
  #lrv2Page .lrv2-steps{max-width:600px}
  #lrv2Page .lrv2-content .lrv2-foot{max-width:600px}
  #lrv2Page .lrv2-back{font-size:14px}
  #lrv2Page .lrv2-h{font-size:32px;margin:0 0 10px}
  #lrv2Page .lrv2-lede{font-size:15.5px}
  #lrv2Page .lrv2-fine{font-size:13.5px;margin-top:18px}
  #lrv2Page .lrv2-field,
  #lrv2Page .lrv2-name-field{max-width:440px;padding:17px 20px}
  #lrv2Page .lrv2-field input,
  #lrv2Page .lrv2-name-field input{font-size:17px}
  #lrv2Page .lrv2-otp-row{gap:13px}
  #lrv2Page .lrv2-otp{width:62px;height:70px;font-size:25px}
  #lrv2Page .lrv2-resend{font-size:14.5px}
  #lrv2Page .lrv2-edit-number{font-size:14px}
  #lrv2Page .lrv2-acct-grid{max-width:480px;gap:12px}
  #lrv2Page .lrv2-acct{padding:16px}
  #lrv2Page .lrv2-acct .lrv2-aicon{width:40px;height:40px;font-size:18px}
  #lrv2Page .lrv2-acct b{font-size:15.5px}
  #lrv2Page .lrv2-acct span{font-size:12.5px}
  #lrv2Page .lrv2-acct-group{font-size:12px}
  #lrv2Page .lrv2-loc-field{max-width:480px;padding:16px 18px}
  #lrv2Page .lrv2-loc-field input{font-size:16px}
  #lrv2Page .lrv2-chip{padding:9px 17px;font-size:13.5px}
  #lrv2Page .lrv2-match-pulse{font-size:14px}
  #lrv2Page .lrv2-done-ring{width:86px;height:86px;font-size:34px}
  #lrv2Page .lrv2-dots i{width:8px;height:8px}
  #lrv2Page .lrv2-dots i.lrv2-on{width:26px}
  #lrv2Page .lrv2-cta{padding:16px 32px;font:600 16px var(--lrv2-font-body)}
  #lrv2Page .lrv2-stepback{width:40px;height:40px;font-size:15px}
  #lrv2Page .lrv2-panel{padding:52px 50px}
  #lrv2Page .lrv2-brand img{width:56px;height:53px}
  #lrv2Page .lrv2-brand b{font-size:20px}
  #lrv2Page .lrv2-tagline{font-size:35px;margin-top:46px}
  #lrv2Page .lrv2-trust{gap:15px}
  #lrv2Page .lrv2-trust span{font-size:14.5px}
  #lrv2Page .lrv2-trust i{width:27px;height:27px;font-size:13px}
}

/* ============ RESPONSIVE ============
   Mobile web is NOT a squeezed split-screen — the prototype's "mobile web"
   frame is its own design, reusing the native app's onboarding screen
   pattern verbatim (courtyard rings, ghar watermark, big per-step
   headline, full-width CTA), not a stacked version of the desktop panel.
   900px matches the prototype's own split→stack breakpoint; 768/375
   verified per the plan's review checklist. */
@media (max-width:900px){
  .lrv2-panel{display:none}
  .lrv2-shell{display:block}
  .lrv2-content{
    min-height:100vh;justify-content:flex-start;
    padding:24px 26px 26px;position:relative;overflow:hidden;
    background:var(--lrv2-bg);
  }
  .lrv2-content::before{
    content:"";position:absolute;top:-140px;right:-120px;width:380px;height:380px;
    border-radius:50%;border:56px solid var(--lrv2-soft);pointer-events:none;
  }
  .lrv2-content::after{
    content:"";position:absolute;bottom:-160px;left:-100px;width:340px;height:340px;
    border-radius:50%;border:2px solid var(--lrv2-line);pointer-events:none;
  }
  .lrv2-mobile-ghar{display:block}
  .lrv2-brand-mobile{
    display:flex;align-items:center;gap:10px;margin:14px 0 0;position:relative;z-index:2;
  }
  .lrv2-brand-mobile img{width:36px;height:34px;object-fit:contain;filter:none}
  .lrv2-brand-mobile b{font-family:var(--lrv2-font-display);font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--lrv2-ink)}
  .lrv2-back-full{display:none}
  /* min-height only needs to fit the phone step (the one the prototype's
     mobile frame actually specifies) — .lrv2-step is absolutely positioned,
     so this is the step column's real rendered height regardless of which
     step is showing; too tall here is exactly what stranded the CTA. */
  .lrv2-steps{min-height:210px;max-width:none;margin-top:58px}
  /* .lrv2-steps' own margin-top (above) already opens 26px from the brand
     row; .lrv2-step is absolutely positioned so it can't collapse with it,
     so .lrv2-h only needs a small delta to reach the prototype's ~34px
     total (26+8), not the raw 34px .ob h2 itself carries in a normal-flow
     context where the two margins collapse into one. */
  .lrv2-h{font-size:46px;margin-top:8px}
  .lrv2-lede{font-size:16px;max-width:30ch}
  /* Scoped to .lrv2-page: the modal reuses these same step partials but
     must always keep the compact functional copy, on every viewport. */
  .lrv2-page .lrv2-h-desktop,.lrv2-page .lrv2-lede-desktop{display:none}
  .lrv2-page .lrv2-h-mobile{display:block}
  .lrv2-page .lrv2-lede-mobile{display:block}
  /* Terms/Privacy sits below the CTA on mobile (prototype order), not
     above it — the in-step copy hides and a copy placed after .lrv2-foot
     takes over, shown only while the phone step is current. */
  .lrv2-fine-desktop{display:none}
  .lrv2-fine-mobile{margin-top:14px;font-size:11.5px;position:relative;z-index:2}
  #lrv2Page[data-current-step="phone"] .lrv2-fine-mobile{display:block}
  /* Dots kept on mobile (2026-08-26, reversed from the earlier prototype-
     exact "no dots" call) — the step-back chevron alone, with no count or
     position shown, read as confusing on its own: it implies a multi-step
     flow without saying how many steps or where you are. Foot follows the
     step content directly instead of pinning to the viewport bottom
     (margin-top:auto stranded the CTA far below short steps). */
  .lrv2-content .lrv2-foot{
    max-width:none;margin-top:18px;padding-top:22px;position:relative;z-index:2;
    flex-direction:column-reverse;align-items:stretch;gap:10px;
  }
  .lrv2-acct-grid{max-width:none}
  .lrv2-foot .lrv2-cta{
    width:100%;justify-content:center;border-radius:18px;
    font-size:18px;font-weight:700;padding:20px 0;
  }
  .lrv2-dots{justify-content:center}
}
@media (max-width:480px){
  .lrv2-otp{width:22vw;max-width:54px;height:58px}
  .lrv2-otp-row{gap:2.6vw}
}

/* Quick-login modal keeps its centred card treatment even on narrow
   viewports (it overlays the current page rather than replacing it). */
@media (max-width:480px){
  .lrv2-modal{padding:30px 22px 24px;border-radius:22px}
}

@media (prefers-reduced-motion: reduce){
  .lrv2-scope *,
  .lrv2-scope *::before,
  .lrv2-scope *::after{
    animation-duration:.001s !important;transition-duration:.001s !important;
  }
}