/* ==========================================================================
   Customer sign-in (/login): WhatsApp OTP + Google. Cute but calm
   (owner 2026-11-04). Builds on dsc-light.css; ids are driven by dsc-login.js.
   ========================================================================== */

.lg [hidden]{display:none!important}
.lg{position:relative;overflow:hidden;padding:clamp(28px,6vw,72px) 0 clamp(48px,8vw,96px);background:
  radial-gradient(800px 420px at 0% 0%,color-mix(in srgb,var(--blush) 90%,transparent),transparent 70%),
  radial-gradient(700px 380px at 100% 100%,color-mix(in srgb,var(--butter) 85%,transparent),transparent 70%),var(--cream)}
.lg__blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none}
.lg__blob--a{width:320px;height:320px;left:46%;top:-120px;background:#F7CBD6}
.lg__blob--b{width:260px;height:260px;left:-80px;bottom:-60px;background:#E2DCEE}
.lg__wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr minmax(0,460px);gap:clamp(24px,5vw,72px);align-items:center;max-width:1040px}

/* ---- the little illustration (desktop) ------------------------------------ */
.lg__art{position:relative;min-height:440px}
.lg__stack{position:relative;height:400px}
.lg__card{position:absolute;display:flex;flex-direction:column;gap:2px;width:230px;padding:18px 20px;border-radius:24px;background:#fff;
  box-shadow:0 22px 50px -24px rgba(142,59,85,.5);animation:lgBob 6s ease-in-out infinite}
.lg__card i{font-style:normal;font-size:30px;margin-bottom:6px}
.lg__card b{font-family:var(--serif);font-size:1.45rem;font-weight:600;line-height:1.1;color:var(--ink)}
.lg__card em{font-style:normal;font-size:var(--t-xs);font-weight:600;color:var(--muted-ink)}
.lg__card--1{left:4%;top:10px;transform:rotate(-6deg);background:linear-gradient(160deg,#FFF,#FFE9EE)}
.lg__card--2{left:40%;top:96px;z-index:1;transform:rotate(4deg);background:linear-gradient(160deg,#FFF,#FFF4D9);animation-delay:-2s}
.lg__card--3{left:8%;top:232px;z-index:2;transform:rotate(-2deg);background:linear-gradient(160deg,#FFF,#EEE8F8);animation-delay:-4s}
@keyframes lgBob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.lg__spark{position:absolute;font-size:24px;animation:lgTwinkle 3.2s ease-in-out infinite}
.lg__spark--1{left:72%;top:0}
.lg__spark--2{left:0;top:180px;font-size:20px;animation-delay:-1s}
.lg__spark--3{left:80%;top:300px;animation-delay:-2s}
@keyframes lgTwinkle{0%,100%{transform:scale(.85) rotate(-8deg);opacity:.7}50%{transform:scale(1.12) rotate(8deg);opacity:1}}
.lg__art-t{margin:18px 0 0;max-width:380px;font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:600;line-height:1.15;color:var(--ink)}
.lg__art-t em{font-style:italic;color:#B4236B}

/* ---- the card --------------------------------------------------------------- */
.lg__card-main{position:relative;padding:clamp(26px,4vw,40px) clamp(20px,3.6vw,36px) 26px;border-radius:32px;background:rgba(255,254,252,.94);
  border:1px solid rgba(232,223,210,.9);box-shadow:0 30px 70px -30px rgba(142,59,85,.45);animation:lgIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes lgIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.lg__card-main.is-shake{animation:lgShake .4s ease}
@keyframes lgShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.lg__logo{position:absolute;top:-30px;left:50%;display:grid;place-items:center;width:60px;height:60px;margin-left:-30px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 6px rgba(255,254,252,.9),0 14px 30px -10px rgba(142,59,85,.45)}
.lg__logo img{display:block;width:34px;height:34px}
.lg__eyebrow{margin:14px 0 0;text-align:center;font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#B4236B}
.lg__h1{margin:6px 0 0;text-align:center;font-family:var(--serif);font-size:clamp(2.1rem,4.4vw,2.8rem);font-weight:600;line-height:1.05}
.lg__h1 em{font-style:italic;color:#B4236B}
.lg__note{margin:10px auto 0;max-width:340px;text-align:center;font-size:var(--t-sm);line-height:1.55;color:var(--muted-ink)}
.lg__note b{color:var(--ink);white-space:nowrap}
.lg__change{appearance:none;border:0;background:none;padding:2px 4px;font:700 var(--t-sm) var(--sans);color:#B4236B;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.lg__form{margin-top:22px}
.lg__field{display:block}
.lg__field > span:first-child{display:block;margin-bottom:7px;font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.lg__phone{position:relative;display:block}
.lg__wa{position:absolute;left:14px;top:50%;translate:0 -50%;display:grid;place-items:center;color:#1FA855;pointer-events:none}
.lg__phone input{width:100%;height:56px;padding:0 16px 0 44px;border:1.5px solid var(--hairline);border-radius:18px;background:#fff;
  font:500 17px var(--sans);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.lg__phone input:focus{outline:0;border-color:#E58EA4;box-shadow:0 0 0 4px rgba(229,142,164,.2)}

.lg__otp label{display:block;margin-bottom:8px;text-align:center;font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.lg__boxes{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;animation:lgIn .4s cubic-bezier(.2,.8,.2,1) both}
.lg__boxes input{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;background:transparent;color:transparent;caret-color:transparent;
  font-size:16px;letter-spacing:2em;opacity:.01;cursor:text}
.lg__boxes span{display:grid;place-items:center;height:58px;border:1.5px solid var(--hairline);border-radius:16px;background:#fff;
  font:700 24px var(--sans);color:var(--ink);transition:border-color .2s,box-shadow .2s,transform .2s}
.lg__boxes span.is-full{border-color:#E58EA4;background:#FFF5F7;transform:translateY(-2px)}
.lg__boxes span.is-cur{border-color:#B4236B;box-shadow:0 0 0 4px rgba(180,35,107,.14)}
.lg__boxes span.is-cur:empty::after{content:"";width:2px;height:24px;border-radius:2px;background:#B4236B;animation:lgCaret 1s steps(1) infinite}
@keyframes lgCaret{50%{opacity:0}}

.lg__err{margin:14px 0 0;border-radius:14px}
.lg__go{width:100%;justify-content:center;margin-top:16px;height:56px;border-radius:18px;font-size:16px;transition:transform .15s,box-shadow .2s}
.lg__go:active{transform:scale(.98)}
.lg__go:disabled{opacity:.7}
.lg__resend{margin-top:12px}

.lg__or{display:flex;align-items:center;gap:12px;margin:22px 0 16px;color:var(--muted-ink);font-size:var(--t-xs);font-weight:600}
.lg__or::before,.lg__or::after{content:"";flex:1;height:1px;background:var(--hairline)}
.lg__google{display:flex;justify-content:center;min-height:44px}

.lg__perks{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0 0;padding:18px 0 0;border-top:1px solid var(--hairline-soft)}
.lg__perks li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:.76rem;font-weight:600;line-height:1.35;color:var(--muted-ink)}
.lg__perks i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#FBE9ED;color:#B4236B}
.lg__perks li:nth-child(2) i{background:#FBF0D6;color:#9A6A12}
.lg__perks li:nth-child(3) i{background:#E6EEDF;color:#4B7A43}
.lg__done{margin:16px 0 0;text-align:center;font-weight:700;color:#B4236B}
.lg__done span{display:inline-block;animation:lgTwinkle 1s ease-in-out infinite}
.lg__card-main.is-done .lg__form{opacity:.5;pointer-events:none}

@media (max-width:860px){
  .lg{padding:44px 0 40px}
  .lg__wrap{grid-template-columns:1fr;max-width:480px}
  .lg__art{display:none}
}
@media (max-width:420px){
  .lg__card-main{border-radius:28px}
  .lg__boxes{gap:6px}
  .lg__boxes span{height:52px;border-radius:14px;font-size:22px}
  .lg__perks li{font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){
  .lg *,.lg__card-main{animation:none!important}
}