/* ══════════════════════════════════════════════════════════════════════
   lb11-login.css — the premium sign-in page.
   Layout follows the supplied reference: promise on the left, card on the
   right, stacking to one column on phones. Colours come from the existing
   --lp-* tokens, so all five skins and both themes work unchanged.
   The arena backdrop is drawn in CSS (see .fp-arena in lb11-proof.css);
   no stadium photograph ships with this codebase.
   ══════════════════════════════════════════════════════════════════════ */

.lg-body{min-height:100%}

/* ── Supplied hero photograph ──────────────────────────────────────────
   assets/arena/batsman-*.webp|jpg — the client's own image, resized only.
   Scoped to the hero so it never bleeds into the section below. A layered
   scrim keeps the headline and the card above AA contrast on top of it.
   If it fails to load, .off hides it and the CSS arena carries the page. */
.lg-hero{position:relative; isolation:isolate; overflow:clip; border-radius:26px;
  box-shadow:0 0 0 1px rgba(var(--lp-acc2-rgb),.42), 0 0 54px -6px rgba(var(--lp-acc2-rgb),.30),
             0 30px 90px -30px rgba(0,0,0,.9)}
.lg-photo{position:absolute; inset:-6% 0; z-index:-1; overflow:hidden; pointer-events:none;
  border-radius:26px;
  background:var(--lp-night) url('../arena/batsman-blur.jpg') center/cover no-repeat}
.lg-photo.off{display:none}
.lg-photo img{width:100%; height:100%; object-fit:cover; object-position:46% 28%;
  opacity:.82; filter:saturate(1.12) contrast(1.06) brightness(1.04)}
/* 1 — darken hard where the sign-in card sits, 2 — pool of shade under the
   headline, 3 — fade all four edges back into the page. */
.lg-photo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(62% 78% at 18% 48%, color-mix(in srgb,var(--lp-night) 80%,transparent) 0%,
                                        color-mix(in srgb,var(--lp-night) 34%,transparent) 58%,
                                        transparent 80%),
    linear-gradient(100deg, transparent 0%,
                            color-mix(in srgb,var(--lp-night) 18%,transparent) 48%,
                            color-mix(in srgb,var(--lp-night) 74%,transparent) 70%,
                            color-mix(in srgb,var(--lp-night) 94%,transparent) 90%),
    linear-gradient(to bottom, color-mix(in srgb,var(--lp-night) 48%,transparent) 0%,
                            transparent 20%, transparent 70%, var(--lp-night) 100%);
}
@media (max-width:980px){
  /* On phones the photo is a top band; the form must stay fully legible. */
  .lg-photo{inset:-4% 0 auto; height:56%; border-radius:0 0 26px 26px}
  .lg-photo img{object-position:50% 24%; opacity:.72}
  .lg-photo::after{
    background:linear-gradient(to bottom, color-mix(in srgb,var(--lp-night) 30%,transparent) 0%,
                            color-mix(in srgb,var(--lp-night) 62%,transparent) 44%,
                            var(--lp-night) 90%);
  }
}
@media (prefers-reduced-motion:no-preference){
  .lg-photo img{animation:lgPhotoIn 1.1s var(--lp-ease,ease) both}
}
@keyframes lgPhotoIn{from{opacity:0; transform:scale(1.04)}}

.lg-main{min-height:calc(100vh - 68px); display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(18px,3vw,40px); padding-bottom:clamp(18px,3vw,40px)}
/* Below 900px .lp-nav becomes a fixed bottom tab bar. Keep clear of it so the
   card, the footer strip and the safe-area inset are never covered. */
@media (max-width:900px){
  .lg-main{ min-height:auto; padding-bottom:calc(var(--lp-tab-h,64px) + 24px + env(safe-area-inset-bottom)); }
  .lg-foot{ margin-bottom:calc(var(--lp-tab-h,64px) + env(safe-area-inset-bottom)); }
}
@supports (min-height:100dvh){ .lg-main{min-height:calc(100dvh - 68px)} }

/* ── Hero: pitch + card ────────────────────────────────────────────── */
.lg-hero{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:clamp(22px,4vw,56px); align-items:center;
  padding:clamp(20px,4vw,52px) 0;
}
@media (max-width:980px){ .lg-hero{grid-template-columns:1fr; gap:26px} }

.lg-pitch{min-width:0}
.lg-script{
  font:700 clamp(17px,2.4vw,26px)/1.1 var(--lp-head); letter-spacing:.02em;
  color:var(--lp-on-night-3); opacity:.72; transform:rotate(-4deg);
  transform-origin:left center; margin-bottom:clamp(8px,1.4vw,16px);
}
.lg-pitch h1{
  margin:0 0 12px; font:800 clamp(38px,7vw,78px)/.92 var(--lp-head);
  text-transform:uppercase; letter-spacing:.005em; color:var(--lp-on-night);
}
.lg-pitch h1 i{
  display:block; font-style:normal;
  background:var(--lp-foil); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lg-sub{margin:0 0 clamp(18px,2.6vw,30px); font:700 clamp(15px,1.7vw,19px)/1.5 var(--lp-font); color:var(--lp-on-night-2,var(--lp-on-night-3)); max-width:34ch}

.lg-trust{list-style:none; margin:0; padding:0; display:flex; gap:clamp(12px,2.4vw,34px); flex-wrap:wrap}
.lg-trust li{display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ic b" "ic s"; gap:2px 11px; align-items:center; min-width:0; max-width:230px}
.lg-trust .ic{grid-area:ic; width:34px; height:34px; display:grid; place-items:center; color:var(--lp-gold-hi)}
.lg-trust .ic svg{width:25px; height:25px}
.lg-trust b{grid-area:b; align-self:end; font:800 13px var(--lp-font); letter-spacing:.09em; text-transform:uppercase; color:var(--lp-on-night)}
.lg-trust small{grid-area:s; align-self:start; font:600 11.5px/1.4 var(--lp-font); color:var(--lp-on-night-3)}
@media (max-width:620px){
  .lg-trust{gap:14px}
  .lg-trust li{max-width:none; flex:1 1 150px}
  .lg-trust small{display:none}
}

/* ── The card ──────────────────────────────────────────────────────── */
.lg-cardwrap{min-width:0; display:flex; justify-content:flex-end}
@media (max-width:980px){ .lg-cardwrap{justify-content:stretch} }
.lg-card{
  width:min(420px,100%); border-radius:22px; padding:clamp(22px,2.6vw,30px);
  background:color-mix(in srgb, var(--lp-night) 78%, transparent);
  border:1px solid rgba(var(--lp-acc2-rgb),.34);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.lg-card-head h2{margin:0 0 5px; font:800 clamp(22px,2.6vw,28px)/1.15 var(--lp-head); color:var(--lp-on-night)}
.lg-card-head p{margin:0 0 20px; font:600 13.5px var(--lp-font); color:var(--lp-on-night-3)}

/* fields */
.lg-f{position:relative; display:block; margin-bottom:12px}
.lg-f .ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--lp-on-night-3); pointer-events:none}
.lg-f .ic svg{width:19px; height:19px; display:block}
.lg-f input{
  width:100%; box-sizing:border-box; height:52px; padding:0 46px 0 44px;
  border-radius:13px; border:1px solid rgba(var(--lp-acc2-rgb),.3);
  background:rgba(0,0,0,.42); color:var(--lp-on-night);
  font:600 16px var(--lp-font);  /* 16px: stops iOS zooming on focus */
  transition:border-color .16s, box-shadow .16s;
}
.lg-f input::placeholder{color:var(--lp-on-night-3); opacity:.8}
.lg-f input:focus{outline:none; border-color:var(--lp-gold); box-shadow:0 0 0 3px rgba(var(--lp-acc-rgb),.22)}
.lg-f.bad input{border-color:var(--lp-red)}
.lg-f .pw{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:36px; height:36px;
  display:grid; place-items:center; border:0; background:none; color:var(--lp-on-night-3); cursor:pointer; border-radius:9px}
.lg-f .pw:hover,.lg-f .pw:focus-visible{color:var(--lp-gold-hi); background:rgba(255,255,255,.07)}
.lg-f .pw svg{width:19px; height:19px}

.lg-rowx{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:4px 0 16px}
.lg-keep{display:flex; align-items:center; gap:9px; cursor:pointer; font:600 12.5px var(--lp-font); color:var(--lp-on-night-3)}
.lg-keep input{width:17px; height:17px; flex:0 0 17px; accent-color:var(--lp-gold)}
.lg-link{border:0; background:none; padding:0; cursor:pointer; font:700 12.5px var(--lp-font); color:var(--lp-gold-text); text-decoration:underline}
.lg-link.strong{font-weight:800}

/* primary button */
.lg-go{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:54px;
  border:0; border-radius:13px; cursor:pointer; text-decoration:none;
  background:var(--lp-foil); color:var(--lp-gold-ink);
  font:800 16px var(--lp-font);
  box-shadow:0 14px 34px -10px rgba(var(--lp-acc-rgb),.65);
  transition:transform .14s, box-shadow .14s, opacity .14s;
}
.lg-go:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 18px 42px -10px rgba(var(--lp-acc-rgb),.75)}
.lg-go:disabled{opacity:.6; cursor:default; transform:none}
.lg-spin{width:15px; height:15px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:lgSpin .7s linear infinite}
@keyframes lgSpin{to{transform:rotate(1turn)}}

.lg-alt{display:block; width:100%; margin-top:10px; padding:12px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(var(--lp-acc2-rgb),.3); background:rgba(255,255,255,.04); color:var(--lp-on-night-2,var(--lp-on-night));
  font:700 13px var(--lp-font); transition:.15s}
.lg-alt:hover{border-color:var(--lp-gold); color:var(--lp-gold-text)}

.lg-err{margin:0 0 12px; padding:10px 13px; border-radius:11px; font:700 12.5px/1.45 var(--lp-font);
  color:#FF8A7E; background:rgba(224,65,58,.12); border:1px solid rgba(224,65,58,.4)}
.lg-err[hidden]{display:none}

.lg-or{display:flex; align-items:center; gap:12px; margin:18px 0 12px; color:var(--lp-on-night-3);
  font:700 10.5px var(--lp-font); letter-spacing:.14em; text-transform:uppercase}
.lg-or::before,.lg-or::after{content:""; flex:1; height:1px; background:rgba(var(--lp-acc2-rgb),.3)}
.lg-social{display:grid; grid-auto-flow:column; gap:9px}
.lg-soc{display:grid; place-items:center; min-height:48px; border-radius:12px; text-decoration:none;
  border:1px solid rgba(var(--lp-acc2-rgb),.3); background:rgba(255,255,255,.05); color:var(--lp-on-night); font:700 13px var(--lp-font)}
.lg-soc:hover{border-color:var(--lp-gold)}

.lg-foot-note{margin:16px 0 0; text-align:center; font:600 13px var(--lp-font); color:var(--lp-on-night-3)}
.lg-legal{margin:12px 0 0; text-align:center; font:600 10.5px/1.6 var(--lp-font); color:var(--lp-on-night-3)}
.lg-legal a{color:var(--lp-gold-text)}
.lg-already{margin:0 0 14px; font:600 14px var(--lp-font); color:var(--lp-on-night-3)}
.lg-already b{color:var(--lp-on-night)}

/* the shared email-code module, restyled to match this card */
.lg-ea h3{margin:0 0 6px; font:800 20px var(--lp-head); color:var(--lp-on-night)}
.lg-ea .lp-field{display:block; margin-bottom:12px}
.lg-ea .lp-field>span{display:block; margin-bottom:6px; font:700 11px var(--lp-font); letter-spacing:.1em; text-transform:uppercase; color:var(--lp-on-night-3)}
.lg-ea input{width:100%; box-sizing:border-box; height:52px; padding:0 14px; border-radius:13px;
  border:1px solid rgba(var(--lp-acc2-rgb),.3); background:rgba(0,0,0,.42); color:var(--lp-on-night); font:600 16px var(--lp-font)}
.lg-ea input:focus{outline:none; border-color:var(--lp-gold); box-shadow:0 0 0 3px rgba(var(--lp-acc-rgb),.22)}
.lg-ea .lp-btn.gold.block,.lg-ea .lp-btn.ghost.block{width:100%; min-height:52px; border-radius:13px; font-size:15px}
.lg-ea .lp-muted{color:var(--lp-on-night-3)}

/* ── "Your cricket journey" ───────────────────────────────────────── */
.lg-more{padding:clamp(26px,5vw,56px) 0 clamp(18px,3vw,34px); border-top:1px solid rgba(var(--lp-acc2-rgb),.16)}
.lg-more-head{max-width:62ch; margin-bottom:clamp(16px,2.4vw,26px)}
.lg-eyebrow{display:block; font:800 11px var(--lp-font); letter-spacing:.2em; text-transform:uppercase; color:var(--lp-gold-text); margin-bottom:8px}
.lg-more-head h2{margin:0 0 10px; font:800 clamp(24px,3.4vw,38px)/1.05 var(--lp-head); text-transform:uppercase; color:var(--lp-on-night)}
.lg-more-head p{margin:0; font:600 13.5px/1.65 var(--lp-font); color:var(--lp-on-night-3)}

.lg-feats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
@media (max-width:900px){ .lg-feats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .lg-feats{grid-template-columns:1fr} }
.lg-feat{display:block; padding:16px; border-radius:17px; text-decoration:none; min-width:0;
  background:rgba(0,0,0,.34); border:1px solid rgba(var(--lp-acc2-rgb),.18); transition:.18s}
.lg-feat:hover{transform:translateY(-2px); border-color:rgba(var(--lp-acc-rgb),.5); box-shadow:0 16px 38px -14px rgba(var(--lp-acc-rgb),.5)}
.lg-feat .pic{display:grid; place-items:center; width:58px; height:58px; border-radius:14px; margin-bottom:11px;
  background:rgba(var(--lp-acc-rgb),.12); overflow:hidden}
.lg-feat .pic img{width:100%; height:100%; object-fit:contain}
.lg-feat .pic.noimg{background:var(--lp-foil)}
.lg-feat b{display:block; font:800 14.5px var(--lp-font); color:var(--lp-on-night); margin-bottom:3px}
.lg-feat small{display:block; font:600 12px/1.5 var(--lp-font); color:var(--lp-on-night-3)}

/* ── Footer strip ─────────────────────────────────────────────────── */
.lg-foot{background:color-mix(in srgb, var(--lp-night) 92%, transparent); border-top:1px solid rgba(var(--lp-acc2-rgb),.2)}
.lg-foot-in{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  min-height:56px; padding-block:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom));
  font:800 11px var(--lp-font); letter-spacing:.14em; text-transform:uppercase; color:var(--lp-on-night-3); text-align:center}
.lg-foot-in i{opacity:.4; font-style:normal}

@media (prefers-reduced-motion:reduce){
  .lg-go:hover,.lg-feat:hover{transform:none}
  .lg-spin{animation:none}
}

/* R5 · reference fidelity: the approved screenshot shows the three trust
   marks on ONE row beside the headline. They were wrapping to two rows
   because each item reserved 230px. Tighter on wide screens only — the
   small-screen rules above are untouched. */
@media (min-width:1200px){
  .lg-trust{ gap:18px }
  .lg-trust li{ max-width:188px }
  .lg-trust b{ font-size:12.5px; letter-spacing:.07em }
  .lg-trust small{ font-size:11px; line-height:1.38 }
}