/* Sign-in: the operator's photo across the page, sales copy on the left,
   Filament's own form inside the card on the right. */
.lg { position: relative; min-height: 100vh; display: flex; flex-direction: column; background: #eef4fb; color: #101828; overflow: hidden; }
.lg-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 3.5rem; background: rgb(255 255 255 / .92); border-bottom: 1px solid rgb(234 236 240 / .8); backdrop-filter: blur(8px); }
.lg-brand { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.lg-top-right { display: flex; align-items: center; gap: 1.1rem; font-size: .92rem; color: #344054; }
.lg-signup { border: 1.5px solid #f5325b; border-radius: 10px; padding: .55rem 1.7rem; font-weight: 700; color: #f5325b; text-decoration: none; background: #fff; }
.lg-signup:hover { background: #fff1f4; }

.lg-photo { position: absolute; inset: 0; background: center / cover no-repeat; z-index: 0; }
.lg-photo.is-empty { background: linear-gradient(160deg, #dbe7ff 0%, #f3e3ea 45%, #cfe3f7 100%); }
.lg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / .82) 0%, rgb(255 255 255 / .62) 45%, rgb(255 255 255 / .3) 100%); }

.lg-body { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 640px); gap: 2rem; align-items: center; padding: 2.5rem 3.5rem 2rem; max-width: 1720px; margin: 0 auto; width: 100%; }

/* left */
/* Positioned, so it paints above the photo layer: a static child would sit
   under an absolutely positioned sibling whatever its z-index. */
.lg-pitch { position: relative; z-index: 1; min-width: 0; max-width: 720px; }
.lg-pill { display: inline-block; border-radius: 999px; padding: .4rem 1rem; background: rgb(255 228 234 / .9); color: #e11d48; font-size: .88rem; font-weight: 600; }
.lg-title { margin: 1rem 0 .2rem; font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #1a1a5e; }
.lg-title em { font-style: normal; background: linear-gradient(90deg, #7c2d8f, #e11d48); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-lede { margin: 0 0 1rem; font-size: clamp(1.2rem, 2vw, 1.8rem); font-style: italic; font-weight: 500; color: #4b2b6b; }
.lg-lede + .lg-sub { margin-top: 0; }
.lg-sub { margin: 0; max-width: 40ch; font-size: 1.05rem; line-height: 1.5; color: #344054; }

.lg-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; max-width: 760px; }
.lg-benefit { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; }
.lg-benefit b { display: block; font-size: .95rem; color: #1a1a5e; }
.lg-benefit small { display: block; font-size: .82rem; line-height: 1.35; color: #475467; }
.lg-benefit-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.lg-benefit-icon svg { width: 22px; height: 22px; }
.lg-benefit-icon.is-rose { background: #ffe4ea; color: #f5325b; }
.lg-benefit-icon.is-green { background: #dcfae6; color: #17b26a; }

.lg-script { margin-top: 2.75rem; display: flex; flex-direction: column; gap: 1.1rem; }
.lg-script .bk-banner-script { font-size: clamp(2.2rem, 4vw, 3.4rem); color: #1a1a5e; align-self: flex-start; padding-bottom: .55rem; }
.lg-script .bk-banner-script::after { right: 45%; height: 3px; }
.lg-strap { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #344054; max-width: 22ch; line-height: 1.5; margin-left: 2.2rem; }

.lg-assurances { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; margin: 2.5rem 0 0; padding: 0; }
.lg-assurances li { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; color: #344054; position: relative; }
.lg-assurances li + li::before { content: ""; position: absolute; left: -.9rem; top: 10%; height: 80%; width: 1px; background: #cfd7e6; }
.lg-assurances svg { width: 20px; height: 20px; color: #475467; }

/* right */
.lg-card-ctn { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; min-width: 0; }
.lg-card { flex: 1; max-width: 560px; background: #fff; border-radius: 26px; padding: 2rem 2.25rem 2.25rem; box-shadow: 0 24px 60px rgb(16 24 40 / .12); }
.lg-card-brand { margin-bottom: 1.5rem; }
.lg-card-title { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; color: #1a1a5e; }
.lg-card-sub { margin: .35rem 0 1.5rem; font-size: 1rem; color: #667085; }
.lg-alt { margin: 1.25rem 0 0; text-align: center; font-size: .92rem; color: #475467; }
.lg-alt a { color: #f5325b; font-weight: 700; text-decoration: none; }
.lg-explore { display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem; padding: .9rem 1rem; border-radius: 16px; background: #fff1f4; color: inherit; text-decoration: none; }
.lg-explore:hover { background: #ffe4ea; }
.lg-explore-icon { width: 42px; height: 42px; border-radius: 999px; background: #f5325b; color: #fff; display: grid; place-items: center; flex: none; }
.lg-explore-icon svg { width: 21px; height: 21px; }
.lg-explore-text { flex: 1; min-width: 0; }
.lg-explore-text b { display: block; font-size: .95rem; color: #1a1a5e; }
.lg-explore-text small { font-size: .82rem; color: #667085; }
.lg-explore .fs-chev { color: #98a2b3; }

.lg-side { display: flex; flex-direction: column; align-items: flex-start; gap: 3.5rem; padding-bottom: 1rem; flex: none; width: 130px; }
.lg-side .bk-banner-script { font-size: 1.6rem; line-height: 1.15; color: #1a1a5e; }
.lg-side .bk-banner-script::after { right: 30%; }
.lg-side-words { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #475467; line-height: 1.9; position: relative; padding-top: .9rem; }
.lg-side-words::before { content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 2px; background: #f5325b; }

/* Filament's form inside the card */
.lg .fi-sc-form { gap: 1rem; }
.lg .fi-fo-field-wrp-label { font-size: .88rem; font-weight: 600; color: #344054; }
.lg .fi-input-wrp { border-radius: 12px; box-shadow: none; border: 1px solid #dfe3ea; background: #fbfcfe; }
.lg .fi-input-wrp:focus-within { border-color: #f5325b; box-shadow: 0 0 0 3px rgb(245 50 91 / .15); }
.lg .fi-input { padding-top: .85rem; padding-bottom: .85rem; font-size: .98rem; }
.lg .fi-input-wrp-prefix .fi-icon, .lg .fi-input-wrp-suffix .fi-icon { color: #98a2b3; }
.lg .fi-fo-field-wrp-hint { font-size: .88rem; }
.lg .fi-fo-field-wrp-hint .fi-link-label { color: #f5325b; font-weight: 600; }
.lg .fi-fo-checkbox-row .fi-fo-field-wrp-label, .lg .fi-fo-checkbox-lbl { font-size: .92rem; color: #475467; font-weight: 500; }
.lg .fi-ac-btn-action .fi-btn, .lg .fi-btn.fi-color-primary { width: 100%; justify-content: center; border-radius: 12px; padding: .95rem 1.25rem; font-size: 1rem; font-weight: 700; box-shadow: 0 10px 24px rgb(245 50 91 / .3); }
.lg .fi-sc-actions { margin-top: .5rem; }

@media (max-width: 1280px) {
    .lg-body { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1.5rem; }
    .lg-card-ctn { justify-content: flex-start; }
    .lg-side { display: none; }
    .lg-script { margin-top: 2rem; }
    .lg-assurances { margin-top: 1.5rem; }
}
@media (max-width: 760px) {
    .lg-top { padding: .8rem 1.2rem; }
    .lg-benefits { grid-template-columns: 1fr; gap: .9rem; margin-top: 1.5rem; }
    .lg-card { padding: 1.5rem 1.25rem 1.75rem; border-radius: 20px; }
    .lg-title { font-size: 2.4rem; }
    .lg-assurances { gap: 1rem; }
    .lg-assurances li + li::before { display: none; }
}