/* =====================================================================
   SEMA BAY — sign in (your design) · 2026.10.02-67
   orange #ff8a00 → #ff3d0d · blue #0a4ef0 → #29a6ff · navy #0b1f5c
   ===================================================================== */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.lg{--f:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-family:var(--f);color:#0b1f5c;min-height:100vh;min-height:100dvh;background:#f4f6fb;background-image:radial-gradient(60% 45% at 8% 30%,rgba(255,138,0,.22),transparent 70%),radial-gradient(60% 45% at 92% 70%,rgba(10,78,240,.2),transparent 70%)}
.lg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg{display:block}
.lg-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:clamp(70px,10vh,96px) 14px 24px;perspective:1600px}
/* the flipping card: both faces stacked in one grid cell */
.lg-flip{position:relative;width:min(460px,100%);transform-style:preserve-3d}
.lg-flip.is-flipped{transform:rotateY(180deg)}
.lg-face{grid-area:1/1;isolation:isolate;border-radius:46px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff}
.lg-back{transform:rotateY(180deg)}
/* ---------- FRONT ---------- */
.lg-front{border:6px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#ffa21a 0%,#ff5a0a 38%,#1f6dff 62%,#0a48e8 100%) border-box;box-shadow:-18px 0 50px -20px rgba(255,110,0,.55),18px 0 50px -20px rgba(10,78,240,.55),0 30px 60px -30px rgba(11,31,92,.35)}
.lg-badge{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:3;display:grid;place-items:center;width:clamp(120px,32vw,148px);height:clamp(120px,32vw,148px);border-radius:50%}
.lg-badge-logo{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#ff8a00,#ff5a0a 45%,#1f6dff 55%,#0a48e8) border-box;border:7px solid transparent;box-shadow:0 14px 30px -10px rgba(11,31,92,.35)}
.lg-badge-logo svg{width:62%;height:62%}
.lg-fin{position:relative;display:flex;flex-direction:column;align-items:center;padding:clamp(86px,22vw,104px) clamp(18px,5vw,30px) clamp(40px,9vw,56px);text-align:center}
.lg-wel{margin:0;font:700 clamp(24px,6.4vw,32px)/1.1 var(--f);color:#0b1f5c;letter-spacing:-.01em}
.lg-brand{margin:6px 0 4px;font:700 clamp(50px,14vw,74px)/1 var(--f);letter-spacing:-.04em;white-space:nowrap}
.lg-brand b{background:linear-gradient(115deg,#ff6a00 0 14%,#0b1f5c 30%,#0b1f5c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-brand i{font-style:normal;background:linear-gradient(120deg,#ff7a00,#ff3d0d);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-q{margin:6px 0 clamp(18px,5vw,28px);font:500 clamp(16px,4.4vw,21px) var(--f);color:#3f4263}
.lg-choice{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:clamp(12px,4vw,20px);width:100%;min-height:clamp(96px,26vw,118px);margin:0 0 16px;padding:12px clamp(14px,4vw,22px);border:0;border-radius:28px;color:#fff;text-align:left;cursor:pointer;font-family:var(--f);transition:transform .15s,box-shadow .15s}
.lg-choice::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-40%;height:85%;z-index:-1;border-radius:50% 50% 0 0/40% 40% 0 0;background:rgba(255,255,255,.18);transform:rotate(-4deg)}
.lg-choice::after{content:"";position:absolute;right:16px;top:12px;z-index:-1;width:90px;height:44px;background:radial-gradient(circle,rgba(255,255,255,.55) 0 2px,transparent 2.6px) 0 0/12px 12px}
.lg-choice.owner{background:linear-gradient(120deg,#ffa21a 0%,#ff7a00 40%,#ff3d0d 100%);box-shadow:0 16px 30px -14px rgba(255,80,10,.75)}
.lg-choice.shopper{background:linear-gradient(120deg,#0a4ef0 0%,#1f6dff 50%,#29a6ff 100%);box-shadow:0 16px 30px -14px rgba(10,78,240,.75)}
.lg-choice:hover{transform:translateY(-2px)}
.lg-choice:active{transform:scale(.98)}
.lg-choice:focus-visible{outline:4px solid #0b1f5c;outline-offset:3px}
.lg-ci{display:grid;place-items:center;flex:none;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.15)}
.lg-ci svg{width:52%;height:52%}
.owner .lg-ci svg{fill:#ff3d0d}
.shopper .lg-ci svg{fill:#0a4ef0}
.lg-ct{flex:1;min-width:0}
.lg-ct b{display:block;font:700 clamp(22px,6.4vw,30px)/1.15 var(--f)}
.lg-ct small{display:block;margin-top:4px;font:600 clamp(15px,4.2vw,19px) var(--f);opacity:.95}
.lg-chev{font:300 46px/1 var(--f);margin-top:-6px}
.lg-home{margin-top:4px;font:700 14.5px var(--f);color:#3f4263;text-decoration:none}
.lg-home:hover{color:#ff5a0a}
.lg-cont{margin:0 0 8px;font:700 15px var(--f);color:#0a4ef0;text-decoration:none}
/* ---------- BACK ---------- */
.lg-back{--c1:#ff8a00;--c2:#ff3d0d;--c3:#fe4e05;--soft:#fff3e8;--title:linear-gradient(120deg,#ff5a0a,#fe370b);border:6px solid var(--c3);box-shadow:0 30px 60px -28px rgba(254,78,5,.55)}
.lg-flip[data-role="shopper"] .lg-back{--c1:#29a6ff;--c2:#0a4ef0;--c3:#0292fb;--soft:#eaf4ff;--title:linear-gradient(120deg,#0a3df0,#1f6dff);box-shadow:0 30px 60px -28px rgba(2,100,251,.55)}
.lg-badge-role{width:clamp(108px,28vw,132px);height:clamp(108px,28vw,132px);background:linear-gradient(140deg,var(--c1),var(--c2));border:7px solid #fff;box-shadow:0 0 0 5px var(--c3),0 14px 30px -10px rgba(0,0,0,.35)}
.lg-badge-role svg{width:50%;height:50%;fill:#fff}
.lg-flip:not([data-role="shopper"]) .i-shop,.lg-flip[data-role="shopper"] .i-owner{display:none}
.lg-back-btn{position:absolute;left:16px;top:16px;z-index:4;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(0,0,0,.15);cursor:pointer}
.lg-back-btn svg{width:22px;height:22px;fill:#0b1f5c}
.lg-back-btn:focus-visible{outline:3px solid #0b1f5c;outline-offset:2px}
.lg-bin{position:relative;display:flex;flex-direction:column;padding:clamp(76px,20vw,92px) clamp(18px,5.5vw,34px) clamp(22px,6vw,32px);text-align:center}
.lg-as{margin:0;font:700 clamp(22px,6vw,28px)/1.1 var(--f);color:#0b1f5c}
.lg-title{margin:2px 0 6px;font:700 clamp(40px,11vw,58px)/1.05 var(--f);letter-spacing:-.03em;background:var(--title);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-desc{margin:0 auto 16px;max-width:360px;font:500 clamp(15px,4.2vw,18px)/1.4 var(--f);color:#3f4263}
.lg-note{margin:0 0 12px;padding:10px 12px;border-radius:12px;font:700 14px/1.4 var(--f);text-align:left}
.lg-note.ok{background:#e6f6ea;color:#0a7a35}
.lg-note.wait{background:#fff3d6;color:#8a4b00}
.lg-form{display:flex;flex-direction:column;gap:12px;text-align:left}
.lg-form.shake{animation:lgShake .35s}
@keyframes lgShake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.lg-field{position:relative;display:flex;align-items:center;gap:12px;height:clamp(54px,14vw,62px);padding:0 10px 0 16px;border:1.5px solid #d9e0ef;border-radius:16px;background:#f7f9fd;transition:border-color .15s,box-shadow .15s}
.lg-field:focus-within{border-color:var(--c3);box-shadow:0 0 0 4px color-mix(in srgb,var(--c3) 18%,transparent);background:#fff}
.lg-fi svg{width:28px;height:28px}
.lg-fi.i-user svg{fill:var(--c1)}
.lg-flip:not([data-role="shopper"]) .lg-fi.i-user svg{fill:#ff7a00}
.lg-flip[data-role="shopper"] .lg-fi.i-user svg{fill:#1f6dff}
.lg-flip:not([data-role="shopper"]) .lg-fi.i-lock svg{fill:#f5a300}
.lg-flip[data-role="shopper"] .lg-fi.i-lock svg{fill:#0a4ef0}
.lg-fi.i-mail svg{fill:var(--c2)}
.lg-field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:500 clamp(16px,4.4vw,18px) var(--f);color:#0b1f5c}
.lg-field input::placeholder{color:#7d86a8}
.lg-eye{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:none;cursor:pointer}
.lg-eye svg{width:26px;height:26px;fill:#0b1f5c}
.lg-eye .e-open{display:none}
.lg-eye.on .e-open{display:block}
.lg-eye.on .e-shut{display:none}
.lg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lg-check{position:relative;display:inline-flex;align-items:center;gap:10px;font:600 15.5px var(--f);color:#0b1f5c;cursor:pointer}
.lg-check input{position:absolute;opacity:0;width:24px;height:24px;margin:0}
.lg-check span{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;border:2px solid #b8c4dc;background:#fff}
.lg-check input:checked+span{background:#1f6dff;border-color:#1f6dff}
.lg-check input:checked+span::after{content:"";width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
.lg-check input:focus-visible+span{outline:3px solid #0b1f5c;outline-offset:2px}
.lg-link{border:0;background:none;padding:6px 0;font:700 15.5px var(--f);color:#1f5fff;cursor:pointer}
.lg-link:hover{text-decoration:underline}
.lg-center{align-self:center}
.lg-err{margin:0;padding:10px 12px;border-radius:12px;background:#fff1f2;color:#c8102b;font:700 14px/1.4 var(--f)}
.lg-help{margin:0;font:600 14.5px/1.4 var(--f);color:#3f4263}
.lg-main{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:clamp(58px,15vw,68px);margin-top:4px;padding:0 18px;border:0;border-radius:18px;background:linear-gradient(120deg,var(--c1),var(--c2));color:#fff;font:700 clamp(17px,4.8vw,21px) var(--f);cursor:pointer;box-shadow:0 14px 26px -12px color-mix(in srgb,var(--c2) 80%,transparent);transition:transform .12s,filter .12s}
.lg-main:hover{filter:brightness(1.05)}
.lg-main:active{transform:scale(.98)}
.lg-main:focus-visible{outline:4px solid #0b1f5c;outline-offset:3px}
.lg-main.busy{opacity:.8;cursor:progress}
.lg-mi svg{width:30px;height:30px;fill:#fff}
.lg-arrow{font:700 26px/1 var(--f);margin-left:auto}
.lg-main span:not(.lg-mi):not(.lg-arrow){flex:0 1 auto}
.lg-or{display:flex;align-items:center;gap:12px;margin:6px 0 0;font:600 14.5px var(--f);color:#3f4263}
.lg-or::before,.lg-or::after{content:"";flex:1;height:1.5px;background:#d9e0ef}
.lg-create{display:flex;align-items:center;justify-content:center;gap:12px;min-height:clamp(54px,14vw,62px);border:2.5px solid var(--c3);border-radius:16px;background:#fff;color:var(--c2);font:700 clamp(16px,4.6vw,20px) var(--f);text-decoration:none;cursor:pointer}
.lg-create .lg-mi svg{fill:var(--c2)}
.lg-create:hover{background:var(--soft)}
.lg-create:focus-visible{outline:4px solid #0b1f5c;outline-offset:3px}
.lg-demo{margin:22px 0 0;font:500 13px var(--f);color:#5d6a85}
@media (max-width:380px){
  .lg-row{font-size:14px}
  .lg-choice small{font-size:14px}
}
/* v2: exact wave shapes, hidden parts stay hidden, card sizes itself to the visible side */
[hidden]{display:none!important}
.lg-face{overflow:hidden!important}
.lg-front,.lg-back{overflow:visible!important}
.lg-svg{position:absolute;left:0;width:100%;z-index:-1;pointer-events:none;border-radius:40px}
.lg-svg-top{top:0;height:auto;border-radius:40px 40px 0 0}
.lg-svg-bot{bottom:0;height:auto;border-radius:0 0 40px 40px}
.lg-front .lg-svg-top{aspect-ratio:460/300}
.lg-front .lg-svg-bot{aspect-ratio:460/170}
.lg-back .lg-svg-top{aspect-ratio:460/210}
.lg-flip:not([data-role="shopper"]) .w-shop,.lg-flip[data-role="shopper"] .w-owner{display:none}
/* both sides sit on top of each other; the card takes the height of the side you see */
.lg-flip{display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1),height .35s ease}
.lg-face{position:absolute;left:0;top:0;width:100%}
.lg-fin{padding-top:clamp(132px,36vw,168px)}
.lg-bin{padding-top:clamp(118px,32vw,150px)}
.lg-brand{font-size:clamp(44px,13vw,70px)}
.lg-as{position:relative}
.lg-ct b{font-size:clamp(20px,5.4vw,30px);white-space:nowrap}
.lg-ct small{font-size:clamp(14px,3.7vw,19px);white-space:nowrap}
.lg-ci{width:clamp(56px,15vw,80px);height:clamp(56px,15vw,80px)}
.lg-fin{padding-bottom:clamp(64px,17vw,86px)}
.lg-main{font-size:clamp(16px,4.3vw,21px)}
.lg-main span:not(.lg-mi):not(.lg-arrow){white-space:nowrap}
.lg-row .lg-check,.lg-row .lg-link{font-size:clamp(14px,3.8vw,15.5px)}
@media (max-width:360px){
  .lg-mi{display:none}
  .lg-chev{display:none}
}
.lg-title{font-size:clamp(36px,10vw,52px);white-space:nowrap}