.login-page-shell {
    --auth-title-size: 28px;
min-height: 100vh;
    padding: 26px 28px;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 18% 18%, rgba(39, 100, 255, 0.20), transparent 18%),
            radial-gradient(circle at 86% 12%, rgba(255, 190, 92, 0.10), transparent 18%),
            linear-gradient(180deg, #030d21 0%, #010611 100%);
    font-size: var(--workspace-base-size);
    line-height: 1.45;
}
.auth-family .login-stage {

    max-width: 1340px;
    height: auto;
    min-height: min(calc(100dvh - 52px), 820px);
    max-height: none;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.98fr) minmax(420px, 0.82fr);
    border-radius: 28px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.30),
            inset 0 1px 0 rgba(255,255,255,0.08);
}
.auth-family .login-showcase {
position: relative;
    overflow: hidden;
    padding: 30px 32px 20px 34px;
    background: linear-gradient(180deg, rgba(4, 13, 36, 0.18), rgba(4, 13, 36, 0.78)),
            url('../storage/wallpapers/wall-bakery.png'),
            radial-gradient(circle at 12% 14%, rgba(43, 104, 255, 0.20), transparent 18%),
            linear-gradient(180deg, rgba(7, 21, 53, 0.98), rgba(3, 13, 36, 1));
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: center center, center bottom, 12% 14%, center center;
    background-size: cover, cover, auto, auto;
    color: #fff;
}
.auth-family .login-showcase::before {
content: '';
    position: absolute;
    inset: 42px 42px 42px auto;
    width: 44%;
    border-radius: 180px 0 0 180px;
    background: radial-gradient(circle at 72% 82%, rgba(255,255,255,0.07), transparent 42%),
            linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.02) 100%);
    opacity: 0.9;
    pointer-events: none;
}
.auth-family .login-showcase::after {
content: '';
    position: absolute;
    right: 28px;
    top: 42px;
    width: 360px;
    height: 360px;
    border-radius: 42px;
    background: repeating-linear-gradient(
                140deg,
                rgba(43, 104, 255, 0.26) 0 2px,
                transparent 2px 34px
            );
    opacity: 0.30;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.95), transparent 96%);
    pointer-events: none;
}
.auth-family .login-grain {
position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.08) 0.8px, transparent 0.8px);
    background-size: 14px 14px;
    mask-image: linear-gradient(180deg, transparent 58%, rgba(0,0,0,0.9) 88%);
    opacity: 0.14;
}
.auth-family .login-bread-glow {
position: absolute;
    right: -10px;
    bottom: -12px;
    width: 58%;
    height: 44%;
    background: radial-gradient(circle at 40% 45%, rgba(236, 171, 85, 0.26), transparent 17%),
            radial-gradient(circle at 68% 38%, rgba(236, 171, 85, 0.22), transparent 16%),
            radial-gradient(circle at 82% 65%, rgba(236, 171, 85, 0.18), transparent 13%),
            radial-gradient(circle at 55% 78%, rgba(236, 171, 85, 0.14), transparent 16%);
    filter: blur(24px);
    opacity: 0.42;
    pointer-events: none;
}
.auth-family .login-showcase-inner,
.auth-family .login-panel-inner {
position: relative;
    z-index: 2;
}
.auth-family .login-brand-row {
display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}
.auth-family .login-hero-title {
max-width: 520px;
    margin: 0 0 14px;
    font-size: var(--auth-title-size);
    line-height: 1.08;
    letter-spacing: -0.055em;
    color: #f8fbff;
    text-transform: none !important;
}
.auth-family .login-hero-title .accent {
color: #3e7bff;
}
.auth-family .login-hero-copy {
font-size: 15px;
    max-width: 490px;
    margin: 0 0 20px;
    color: rgba(233, 242, 255, 0.84);
    line-height: 1.45;
}
.auth-family .login-benefits {
display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    max-width: 560px;
    margin-bottom: 18px;
}
.auth-family .login-benefit {
display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
}
.auth-family .login-benefit > div:last-child {
min-width: 0;
    width: 100%;
}
.auth-family .login-benefit-icon {
flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(29, 74, 189, 0.56), rgba(18, 46, 118, 0.65));
    border: 1px solid rgba(112, 155, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08),
            0 14px 26px rgba(4, 12, 32, 0.24);
}
.auth-family .login-benefit-icon i {
font-size: 1.02rem;
    color: #dfe9ff;
}
.auth-family .login-benefit-title {
font-size: 16px;
    margin: 0 0 4px;
    font-weight: 700;
    color: #f6f9ff;
    text-transform: none !important;
}
.auth-family .login-benefit-copy {
font-size: 15px;
    margin: 0;
    color: rgba(225, 234, 247, 0.78);
    line-height: 1.45;
}
.auth-family .login-quote-card {
font-size: var(--workspace-page-copy-size);
    max-width: 520px;
    padding: 18px 20px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(30, 44, 78, 0.62), rgba(18, 27, 52, 0.78));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 24px 40px rgba(0,0,0,0.22);
    backdrop-filter: blur(20px);
}
.auth-family .login-flow-card {
padding: 18px 20px;
}
.auth-family .login-flow-title {
font-size: 16px;
    margin-bottom: 14px;
    color: #f6f9ff;
    font-weight: 800;
}
.auth-family .login-flow-steps {
font-size: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: rgba(233,242,255,.86);
    font-weight: 600;
}
.auth-family .login-flow-steps i {
color: #3e7bff;
    font-size: .72rem;
}
.auth-family .login-panel {
position: relative;
    background: radial-gradient(circle at 22% 14%, rgba(255, 208, 140, 0.15), transparent 18%),
            radial-gradient(circle at 86% 20%, rgba(93, 144, 255, 0.08), transparent 18%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    color: #102347;
    padding: 24px 22px;
}
.auth-family .login-panel::before {
content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.75), transparent 34%);
    pointer-events: none;
}
.auth-family .login-language-wrap {
display: flex;
    justify-content: flex-end;
    margin-bottom: 34px;
}
.auth-family .login-language {
display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(18, 35, 71, 0.08);
    box-shadow: 0 18px 32px rgba(22, 42, 88, 0.10);
}
.auth-family .login-language-icon {
width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5b6787;
    font-size: 1.2rem;
}
.auth-family .login-language form {
display: inline-flex;
    gap: 2px;
    align-items: center;
}
.auth-family .login-language button {
border: 0;
    background: transparent;
    color: #586481;
    min-width: 44px;
    min-height: 44px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    transition: background .18s ease, color .18s ease;
}
.auth-family .login-language-caret {
padding: 0 10px 0 2px;
    color: #6c7894;
    font-size: 0.92rem;
}
.auth-family .login-panel-head {
max-width: 380px;
    margin: 0 auto 18px;
}
.auth-family .login-panel-title {

    margin: 0 0 10px;
    color: #172e5e;
    letter-spacing: -0.055em;
    text-transform: none !important;
    line-height: 1.2;
}
.auth-family .login-panel-copy {
font-size: 16px;
    
    color: #7584a8;
    line-height: 1.45;
}
.auth-family .login-form-card {
width: 100%;
    max-width: 380px;
    margin: 0 auto;
}
.auth-family .login-field {
margin-bottom: 16px;
}
.auth-family .login-field label {
font-size: 15px;
    display: block;
    margin-bottom: 10px;
    color: #263b67;
    font-weight: 600;
    text-transform: none !important;
}
.auth-family .login-input-wrap {
position: relative;
}
.auth-family .login-input-icon {
position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #7d89aa;
    font-size: 1.05rem;
    pointer-events: none;
}
.auth-family .login-input-wrap .form-control {
font-size: 16px;
    height: var(--workspace-control-height);
    border-radius: var(--workspace-radius-control);
    border: 1px solid rgba(31, 54, 104, 0.14);
    background: rgba(255,255,255,0.92);
    padding: 0 46px 0 44px;
    color: #17305f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75),
            0 10px 24px rgba(14, 35, 86, 0.04);
}
.auth-family .login-input-wrap .form-control::placeholder {
font-size: 16px;
    color: #8b98ba;
}
.auth-family .login-input-wrap .form-control[readonly] {
background:#f8faff;color:#60739b;
}
.auth-family .auth-status,
.auth-family .auth-error {
font-size: 15px;line-height:1.45;overflow-wrap:anywhere;
}
.auth-family .auth-status {
padding:12px;margin-bottom:14px;border:1px solid #b7ddc9;border-radius:var(--workspace-radius-control);background:#edf8f1;color:#246244;
}
.auth-family .auth-error {
margin-top:6px;color:#b42318;
}
.auth-family .auth-intro-icon {
width:44px;height:44px;display:grid;place-items:center;margin:0 auto 8px;border-radius:var(--workspace-radius-control);background:#edf4ff;color:#1769ff;font-size:1.35rem;
}
.auth-family .auth-back {
display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size: 15px;color:#1769ff;text-decoration:none;margin-bottom:6px;
}
.login-page-shell :is(button,a,input):focus-visible {
outline:3px solid rgba(23,105,255,.5);outline-offset:2px;
}
.auth-family .login-input-wrap .form-control:focus {
border-color: rgba(53, 106, 255, 0.34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75),
            0 0 0 0.22rem rgba(62,123,255,0.10),
            0 12px 24px rgba(14, 35, 86, 0.06);
    background: #fff;
    color: #17305f;
}
.auth-family .login-password-toggle {
position: absolute;
    right: 1px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #7c89a8;
    font-size: 1.18rem;
    line-height: 1;
    padding: 0;
}
.auth-family .login-form-meta {
font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 2px 0 18px;
    flex-wrap: wrap;
}
.auth-family .login-form-meta .form-check {
display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    min-width: 0;
}
.auth-family .login-form-meta .form-check-input {
width: 16px;
    height: 16px;
    margin: 0;
    border-radius: 4px;
    border-color: rgba(31, 54, 104, 0.18);
    background-color: #fff;
}
.auth-family .login-form-meta .form-check-input:checked {
background-color: #2f6dff;
    border-color: #2f6dff;
}
.auth-family .login-form-meta .form-check-label,
.auth-family .login-forgot-link {
font-size: 15px;
    color: #6e7ea4;
}
.auth-family .login-submit {
font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    min-height: var(--workspace-control-height);
    border: 0;
    border-radius: var(--workspace-radius-control);
    background: linear-gradient(90deg, #244fd8 0%, #1269ff 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
            0 18px 34px rgba(29, 83, 237, 0.22);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.auth-family .login-submit:hover,
.auth-family .login-submit:focus {
color: #fff;
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20),
            0 22px 40px rgba(29, 83, 237, 0.25);
}
.auth-family .login-submit .submit-arrow {
font-size: 1.3rem;
}
.auth-family .login-security {
color: #7f8fb2;
}
.auth-family .login-support-note {
font-size: 15px;
    margin-top: 14px;
}
.auth-family .login-support-note strong {
font-size: 16px;
}
.auth-family .login-security-icon {
display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auth-family .login-security-title {
font-size: 15px;
    text-transform: none !important;
}
.auth-family .login-security-copy {
font-size: 14.5px;
    line-height: 1.45;
}
.auth-family .login-invalid .invalid-feedback {
font-size: 15px;
    display: block;
    margin-top: 8px;
}

@media (min-width: 768px) {
.auth-family .login-panel > .login-panel-inner > .login-mobile-hero {
display: none !important;
}
.auth-family .login-showcase {
position: relative;
    overflow: hidden;
    isolation: isolate;
}
.auth-family .login-showcase::before {
content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    pointer-events: none;
    background: url('../images/login/desktop-food-showcase.png') center center / cover no-repeat;
}
.auth-family .login-benefit:nth-child(1) .login-benefit-icon {
background: linear-gradient(180deg,#2587ff,#1262dd);
    border-color: rgba(92,173,255,.6);
}
.auth-family .login-benefit:nth-child(2) .login-benefit-icon {
background: linear-gradient(180deg,#20c878,#0d9b58);
    border-color: rgba(91,231,162,.55);
}
.auth-family .login-benefit:nth-child(3) .login-benefit-icon {
background: linear-gradient(180deg,#ffad2f,#e77a00);
    border-color: rgba(255,194,91,.6);
}
.auth-family .login-benefit:nth-child(4) .login-benefit-icon {
background: linear-gradient(180deg,#a54cff,#7430d8);
    border-color: rgba(190,120,255,.6);
}
.auth-family .login-benefit-icon i {
color: #fff;
}
.auth-family .login-flow-steps {
flex-wrap: nowrap;
}
.auth-family .login-flow-item {
color: #fff;
    text-align: center;
}
.auth-family .login-flow-item > i {
color: #fff;
}
.auth-family .login-flow-item small {
font-size: 15px;
}
.auth-family .flow-purchases > i {
background: linear-gradient(180deg,#ff625f,#e43d3a);
}
.auth-family .flow-inventory > i {
background: linear-gradient(180deg,#2587ff,#1262dd);
}
.auth-family .flow-recipes > i {
background: linear-gradient(180deg,#a54cff,#7430d8);
}
.auth-family .flow-production > i {
background: linear-gradient(180deg,#20c878,#0d9b58);
}
.auth-family .flow-costs > i {
background: linear-gradient(180deg,#ffb43c,#e88908);
}
.auth-family .login-showcase {
background: linear-gradient(145deg, #061b45 0%, #031431 58%, #06245a 100%);
}
.auth-family .login-showcase::before {
display: block;
}
.auth-family .login-showcase::after,
.auth-family .login-bread-glow {
display: none !important;
}
.auth-family .login-flow-card {
backdrop-filter: blur(4px);
}
.auth-family .login-brand-row::after {
width: 96px;
    height: 3px;
    margin-top: 13px;
    border-radius: 999px;
    background: linear-gradient(90deg,#16b8ff 0 52%,rgba(22,184,255,.18) 52%);
}
.auth-family .login-hero-title .accent {
background: linear-gradient(90deg,#1da6ff,#0878f9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.auth-family .login-benefits {
margin-bottom: 20px;
}
.auth-family .login-benefit-icon {
border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 7px 20px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.16);
}
.auth-family .login-benefit-title {
margin-bottom: 3px;
}
.auth-family .login-flow-card {
margin-top: auto;
}
.auth-family .login-brand-row {
margin-bottom: 28px;
}
.auth-family .login-hero-title {
margin-bottom: 13px;
    text-shadow: 0 3px 20px rgba(0,12,38,.42);
}
.auth-family .login-hero-copy {
margin-bottom: 22px;
}
.auth-family .login-benefits {
gap: 0;
}
.auth-family .login-benefit {
border-left: 1px solid rgba(87,151,255,.30);
}
.auth-family .login-benefit:first-child {
padding-left: 0;
    border-left: 0;
}
.auth-family .login-benefit-icon {
margin-bottom: 10px;
}
.auth-family .login-panel {
display: flex;
    align-items: center;
    padding: 28px 32px;
}
.auth-family .login-panel-inner {
width: 100%;
}
.auth-family .login-language-wrap {
margin-bottom: 42px;
}
.auth-family .login-panel-head,
.auth-family .login-form-card {
max-width: 400px;
}
.auth-family .login-panel-head {
margin-bottom: 22px;
}
.auth-family .login-field {
margin-bottom: 18px;
}
.auth-family .login-input-wrap .form-control {
height: var(--workspace-control-height);
}
.auth-family .login-support-note {
margin-top: 16px;
}
.auth-family .login-security {
margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(31,54,104,.10);
}
.auth-family .login-stage {
grid-template-columns: minmax(0,1.08fr) minmax(410px,.72fr);
}
.auth-family .login-showcase {
padding: 58px 34px 24px;
}
.auth-family .login-showcase::before {
opacity: .48;
}
.auth-family .login-showcase::after {
content: '';
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(2,18,48,.36);
}
.auth-family .login-showcase-inner {
min-height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.auth-family .login-brand-row {
margin: 0 0 20px;
}
.auth-family .login-brand-row::after {
display: none;
    content: none;
}
.auth-family .login-hero-title {
max-width: 680px;
    margin: 0 0 16px;
    font-size: var(--auth-title-size);
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: -.04em;
}
.auth-family .login-hero-title .hero-line {
display: block;
    white-space: nowrap;
}
.auth-family .login-hero-copy {
max-width: 620px;
    margin: 0 0 30px;
    font-weight: 400;
    color: rgba(248,251,255,.94);
    text-shadow: 0 2px 10px rgba(0,0,0,.22);
}
.auth-family .login-benefits {
width: 650px;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    column-gap: 34px;
    row-gap: 25px;
    margin: 0 0 24px;
    padding: 0;
}
.auth-family .login-benefit {
display: grid;
    grid-template-columns: 62px minmax(0,1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 0;
    border: 0;
}
.auth-family .login-benefit:nth-child(odd) {
padding-right: 0;
    border-right: 0;
}
.auth-family .login-benefit:nth-child(odd)::after {
content: '';
    position: absolute;
    right: -17px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(45,137,255,.34);
}
.auth-family .login-benefit:nth-child(odd) {
position: relative;
}
.auth-family .login-benefit-icon {
width: 60px;
    height: 60px;
    margin: 0;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-family .login-benefit-title {
margin: 0 0 5px;
    line-height: 1.2;
    font-weight: 800;
}
.auth-family .login-benefit-copy {
width: 100%;
    max-width: none;
    margin: 0;
    color: rgba(235,243,255,.84);
}
.auth-family .login-flow-card {
width: 100%;
    max-width: none;
    margin: auto 0 0;
    border: 1px solid rgba(31,132,255,.55);
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.auth-family .login-flow-title {
margin: 0 0 16px;
    line-height: 1.15;
    font-weight: 900;
}
.auth-family .login-flow-steps {
justify-content: space-between;
    gap: 10px;
}
.auth-family .login-flow-item {
flex: 0 1 82px;
}
.auth-family .login-flow-item > i {
margin: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-family .login-flow-item small {
font-weight: 750;
}
.auth-family .login-flow-card {
padding: 18px 24px 16px;
    border-radius: 17px;
    background: linear-gradient(180deg,rgba(4,39,94,.76),rgba(2,27,69,.78));
    border-color: rgba(38,139,255,.62);
}
.auth-family .login-flow-title {
margin-bottom: 15px;
    letter-spacing: -.025em;
}
.auth-family .login-flow-steps {
display: grid;
    grid-template-columns: 72px 1fr 72px 1fr 72px 1fr 72px 1fr 72px;
    align-items: start;
    column-gap: 8px;
    width: 100%;
}
.auth-family .login-flow-item {
min-width: 0;
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.auth-family .login-flow-item > i {
width: 48px;
    height: 48px;
    font-size: 1.2rem;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 7px 18px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.18);
}
.auth-family .login-flow-item small {
width: 100%;
    margin-top: 7px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    color: rgba(246,249,255,.94);
}
.auth-family .login-flow-steps .flow-arrow {
justify-self: center;
    margin-top: 13px;
    font-size: 1.05rem;
    color: #35a4ff;
    opacity: .95;
}
}

@media (max-width: 1199.98px) {
.login-page-shell {
min-height: 100vh;
    padding: 18px;
    align-items: flex-start;
}
.auth-family .login-stage {
grid-template-columns: minmax(0, .82fr) minmax(390px, 1fr);
    height: auto;
    min-height: calc(100vh - 36px);
    max-height: none;
}
.auth-family .login-showcase {
min-height: 0;
    padding: 26px 24px;
}
.auth-family .login-brand-row {
margin-bottom: 24px;
}
.auth-family .login-hero-title {
font-size: var(--auth-title-size);
}
.auth-family .login-benefits {
grid-template-columns: 1fr;
    gap: 12px;
}
.auth-family .login-panel {
padding: 22px 24px 28px;
}
.auth-family .login-language-wrap {
margin-bottom: 24px;
}
}
.auth-family .login-brand-lockup {
display: flex;
    align-items: center;
    min-height: 72px;
}
.auth-family .login-brand-logo {
display: block;
    width: min(100%, 390px);
    height: auto;
    max-height: 118px;
    object-fit: contain;
    object-position: left center;
}
.auth-family .login-brand-lockup-mobile {

    max-width: 220px;
}
.auth-family .login-brand-lockup-mobile .login-brand-logo {

}

@media (min-width: 992px) {
.auth-family .login-stage {
max-width: 1580px;
}
.auth-family .login-showcase-inner {
padding: 58px 58px 32px;
}
.auth-family .login-brand-row {
margin-bottom: 30px;
}
.auth-family .login-brand-logo {
width: min(100%, 390px);
    max-height: 105px;
}
.auth-family .login-hero-title {
max-width: 650px;
    line-height: 1.05;
    letter-spacing: -.035em;
    margin-bottom: 22px;
}
.auth-family .login-hero-copy {
max-width: 620px;
    margin-bottom: 28px;
}
.auth-family .login-benefits {
column-gap: 42px;
    row-gap: 22px;
}
.auth-family .login-benefit {
min-width: 0;
}
.auth-family .login-benefit-icon {
width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 16px;
    align-self: flex-start;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-family .login-benefit-icon i {
font-size: 1.48rem;
    line-height: 1;
    display: block;
}
.auth-family .login-benefit-title {
margin-bottom: 5px;
}
.auth-family .login-flow-card {

    border-radius: 18px;
    padding: 18px 24px 16px;
    background: rgba(2,25,68,.58);
    
}
.auth-family .login-flow-title {
margin-bottom: 13px;
}
.auth-family .login-panel-inner {
max-width: 510px;
}
.auth-family .login-panel-head {
margin-bottom: 28px;
}
.auth-family .login-panel-title {
letter-spacing: -.035em;
}
.auth-family .login-input-wrap {
border-radius: 14px;
}
.auth-family .login-submit {
min-height: var(--workspace-control-height);
    border-radius: var(--workspace-radius-control);
}
.auth-family .login-support-note {
border-radius: 14px;
    padding: 15px 17px;
}
.auth-family .login-security {
margin-top: 26px;
    padding-top: 22px;
}
}

@media (min-width: 992px) {
.auth-family .login-flow-card {
width: 100%;
    margin-top: 26px;
    padding: 14px 20px 16px;
    border: 1px solid rgba(24,157,255,.9);
    border-radius: 15px;
    background: rgba(3,31,77,.66);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
}
.auth-family .login-flow-title {
margin: 0 0 12px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.015em;
}
.auth-family .login-flow-steps {
display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.auth-family .login-flow-item {
min-width: 58px;
    flex: 0 1 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.auth-family .login-flow-item > i {
width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.22rem;
    line-height: 1;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 5px 12px rgba(0,0,0,.12);
}
.auth-family .login-flow-item small {
margin-top: 7px;
    line-height: 1;
    font-weight: 750;
    white-space: nowrap;
}
.auth-family .login-flow-steps .flow-arrow {
margin-top: 13px;
    font-size: 1rem;
    line-height: 1;
    color: #18a6ff;
    opacity: .95;
}
}

@media (min-width: 1200px) {
.auth-family .login-panel-head,
.auth-family .login-form-card,
.auth-family .login-security {
width: 100%;
    max-width: none;
}
.auth-family .login-language-wrap {
width: 100%;
}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
.auth-family .login-panel {
padding-left: 32px;
    padding-right: 32px;
}
.auth-family .login-panel-inner {
width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.auth-family .login-panel-head,
.auth-family .login-form-card,
.auth-family .login-security {
width: 100%;
    max-width: none;
}
}

@media (min-width: 1200px) {
.login-page-shell {
padding: 24px 32px;
}
.auth-family .login-stage {
height: auto;
    min-height: min(calc(100dvh - 48px), 820px);
}
.auth-family .login-showcase {
padding: 42px 36px 24px;
}
.auth-family .login-showcase-inner {
width: 100%;
    margin: 0 auto;
    padding: 22px 24px 18px;
}
.auth-family .login-panel-inner {
width: 100%;
    margin-left: auto;
    margin-right: auto;
}
}


.auth-family .login-language button.is-active {
color: #ffffff;
    background: #1769ff;
    box-shadow: 0 4px 12px rgba(23,105,255,.22);
}
.auth-family .login-forgot-link {
color: #1769ff;
    font-weight: 700;
}
.auth-family .login-forgot-link:hover,
.auth-family .login-forgot-link:focus-visible {
color: #0d55db;
}



.auth-family .login-support-note {
display: grid;
    grid-template-columns: 40px minmax(0,1fr) 18px;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f4f7ff;
    border: 1px solid rgba(23,105,255,.12);
    color: #7282a6;
    line-height: 1.35;
}
.auth-family .login-support-icon {
width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f0ff;
    color: #1769ff;
    font-size: 1.12rem;
}
.auth-family .login-support-content {
min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.auth-family .login-support-note strong {
color: #173568;
    line-height: 1.2;
    font-weight: 750;
}
.auth-family .login-support-content > span {
font-size: 15px;
    color: #7182a8;
    line-height: 1.45;
}
.auth-family .login-support-arrow {
color: #1769ff;
    font-size: .9rem;
    justify-self: end;
}
.auth-family .login-security {

    grid-template-columns: 40px minmax(0,1fr);
    
    gap: 12px;
    margin-top: 18px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(31,54,104,.11);
}
.auth-family .login-security-icon {
width: 40px;
    height: 40px;
    
    background: #eef4ff;
    color: #1769ff;
    font-size: 1.08rem;
}
.auth-family .login-security-title {
margin: 0 0 3px;
    color: #526b9d;
    
    font-weight: 750;
}
.auth-family .login-security-copy {

    color: #8493b3;
}

@media (min-width: 1200px) {
.auth-family .login-stage {
width: min(100%, 1240px);
    max-width: 1240px;
    
}
.auth-family .login-showcase {
padding-left: 30px;
    padding-right: 30px;
}
.auth-family .login-showcase-inner {
max-width: 640px;
    padding-left: 18px;
    padding-right: 18px;
}
.auth-family .login-panel {
padding-left: 32px;
    padding-right: 32px;
}
.auth-family .login-panel-inner {
max-width: 420px;
}
}

@media (min-width: 1600px) {
.auth-family .login-stage {
max-width: 1280px;
}
}
.auth-family .login-support-note {
text-decoration: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.auth-family .login-support-note:hover {
text-decoration: none;
}
.auth-family .login-support-note:focus-visible {
outline: 3px solid rgba(23,105,255,.22);
    outline-offset: 2px;
}
.auth-family .login-support-note:hover .login-support-arrow {
transform: translateX(2px);
}
.auth-family .login-support-arrow {
transition: transform .18s ease;
}
.auth-family .login-support-note {
cursor: default;
}
.auth-family .login-support-note:hover {
background: #f4f7ff;
    border-color: rgba(23,105,255,.12);
    box-shadow: none;
    transform: none;
}
.auth-family .login-support-note .login-support-arrow {
display: none;
}

@media (min-width: 1200px) {
.auth-family .login-stage {
grid-template-columns: minmax(0, 1.16fr) minmax(400px, .84fr);
}
.auth-family .login-panel {
padding-left: 24px;
    padding-right: 24px;
}
.auth-family .login-panel-inner {
max-width: 400px;
}
}

@media (min-width:768px) and (max-width:1199.98px) {
.login-page-shell {
min-height: 100dvh;
    height: auto;
    padding: clamp(12px,2vw,20px);
    align-items: flex-start;
    overflow-y: auto;
}
.auth-family .login-stage {
width: 100%;
    max-width: 1100px;
    height: auto;
    min-height: calc(100dvh - clamp(24px,4vw,40px));
    max-height: none;
    grid-template-columns: minmax(0,58%) minmax(0,42%);
    overflow: hidden;
    border-radius: 24px;
}
.auth-family .login-showcase,
.auth-family .login-panel {
min-width: 0;
}
.auth-family .login-showcase {
padding: clamp(18px,2.4vw,28px);
}
.auth-family .login-showcase-inner {
min-height: 100%;
    padding: 0;
}
.auth-family .login-brand-row {
margin-bottom: clamp(18px,2.5vh,26px);
}
.auth-family .login-brand-lockup {
min-height: 58px;
}
.auth-family .login-brand-logo {
width: min(100%,290px);
    max-height: 82px;
}
.auth-family .login-hero-title {
max-width: 100%;
    margin-bottom: 12px;
    font-size: var(--auth-title-size);
    line-height: 1.05;
}
.auth-family .login-hero-title .hero-line {
white-space: normal;
}
.auth-family .login-hero-copy {
max-width: 100%;
    margin-bottom: 18px;
}
.auth-family .login-benefits {
width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0 0 18px;
}
.auth-family .login-benefit,
.auth-family .login-benefit:nth-child(odd) {
display: grid;
    grid-template-columns: 46px minmax(0,1fr);
    gap: 11px;
    padding: 0;
    border-right: 0;
    min-width: 0;
}
.auth-family .login-benefit-icon {
width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 14px;
}
.auth-family .login-benefit-title {
margin-bottom: 2px;
}
.auth-family .login-benefit-copy {
max-width: none;
}
.auth-family .login-flow-card {
width: 100%;
    margin-top: auto;
    padding: 12px 14px;
}
.auth-family .login-flow-title {
margin-bottom: 10px;
}
.auth-family .login-flow-steps {
display: grid;
    grid-template-columns: minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr);
    gap: 8px 4px;
    overflow: visible;
}
.auth-family .login-flow-item {
min-width: 0;
    width: auto;
    flex: 1 1 0;
}
.auth-family .login-flow-item > i {
width: 36px;
    height: 36px;
    font-size: .9rem;
}
.auth-family .login-flow-item small {
max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
.auth-family .login-flow-steps .flow-arrow {
font-size: .7rem;
    margin-top: 10px;
    flex: 0 0 auto;
}
.auth-family .login-panel {
padding: clamp(20px,3vw,34px);
    display: flex;
    align-items: center;
}
.auth-family .login-panel-inner {
width: 100%;
    max-width: 500px;
    margin: auto;
}
.auth-family .login-language-wrap {
margin-bottom: clamp(18px,3vh,28px);
}
.auth-family .login-panel-head,
.auth-family .login-form-card {
width: 100%;
    max-width: 440px;
}
.auth-family .login-field {
margin-bottom: 14px;
}
.auth-family .login-field label {
margin-bottom: 7px;
}
.auth-family .login-input-wrap .form-control {
height: var(--workspace-control-height);
}
.auth-family .login-form-meta {
margin-bottom: 16px;
}
.auth-family .login-submit {
min-height: var(--workspace-control-height);
}
.auth-family .login-support-note {
padding: 12px 14px;
}
.auth-family .login-security {
margin-top: 16px;
    padding-top: 14px;
}
.auth-family .login-security-icon {
width: 36px;
    height: 36px;
    flex: 0 0 36px;
}
}

@media (min-width:768px) and (max-width:899.98px) {
.auth-family .login-stage {
grid-template-columns: minmax(0,56%) minmax(0,44%);
}
.auth-family .login-showcase {
padding: 18px;
}
.auth-family .login-brand-logo {
width: min(100%,235px);
}
.auth-family .login-hero-title {
font-size: var(--auth-title-size);
}
.auth-family .login-benefits {
gap: 9px;
}
.auth-family .login-benefit {
grid-template-columns: 40px minmax(0,1fr);
}
.auth-family .login-benefit-icon {
width: 40px;
    height: 40px;
    flex-basis: 40px;
}
.auth-family .login-flow-card {
padding: 10px;
}
.auth-family .login-flow-item > i {
width: 32px;
    height: 32px;
}
.auth-family .login-panel {
padding: 20px;
}
.auth-family .login-language-wrap {
margin-bottom: 18px;
}
}

/* One phone composition for the existing Auth family. Extra feedback can grow naturally. */
@media (max-width:767.98px) {
.login-page-shell {
    --auth-title-size: 26px;
padding:0;min-height:100dvh;background:#fff;
}
.auth-family .login-stage {
display:block;width:100%;min-height:100dvh;border:0;border-radius:0;box-shadow:none;overflow:visible;
}
.auth-family .login-showcase {
display:none;
}
.auth-family .login-panel {
display:block;padding:0;width:100%;background:#fff;
}
.auth-family .login-panel-inner {
display:flex;flex-direction:column;width:100%;max-width:none;min-height:100dvh;margin:0;
}
.auth-family .login-mobile-hero {
display:block;flex:0 0 auto;width:100%;color:#fff;
}
.auth-family .login-mobile-topline {
min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px 11px;background:linear-gradient(90deg,rgba(0,25,68,.3),rgba(0,34,83,.1)),url('../images/login/header-wallpaper.png') center/cover no-repeat;
}
.auth-family .login-mobile-topline>div:first-child {
min-width:0;flex:1;
}
.auth-family .login-brand-lockup-mobile {
min-height:54px;max-width:235.75px;
}
.auth-family .login-brand-lockup-mobile .login-brand-logo {
width:100%;max-height:none;
}
.auth-family .login-mobile-slogan {
max-width:100px;flex:0 0 100px;border-left:1px solid rgba(255,255,255,.72);padding-left:13px;font-size: 14.5px;font-weight:700;line-height:1.3;
}
.auth-family .login-mobile-food-strip {
height:clamp(76px,11dvh,98px);position:relative;background:url('../images/login/food-showcase.png') center top/cover no-repeat;
}
.auth-family .login-mobile-food-strip::after {
content:'';position:absolute;inset:auto 0 0;height:44px;background:linear-gradient(to bottom,transparent,#fff 92%);pointer-events:none;
}
.auth-family .login-language-wrap {
flex:0 0 auto;justify-content:center;position:relative;z-index:3;margin:-18px 0 14px;
}
.auth-family .login-language {
gap:3px;padding:4px 8px;min-height:54px;box-shadow:0 8px 22px rgba(27,54,111,.12);
}
.auth-family .login-language-icon {
width:24px;height:24px;font-size:1rem;
}
.auth-family .login-language-caret {
padding:0 4px;
}
.auth-family .login-panel-head,
.auth-family .login-form-card {
width:calc(100% - 32px);max-width:none;margin-left:auto;margin-right:auto;flex:0 0 auto;
}
.auth-family .login-panel-head {
text-align:center;margin-bottom:18px;
}
.auth-family .login-panel-title {
margin:0 0 4px;font-size: var(--auth-title-size);
}
.auth-family .login-panel-copy {
margin:0;
}
.auth-family .login-form-card {
padding:0;
}
.auth-family .login-field {
margin-bottom:12px;
}
.auth-family .login-field label {
margin-bottom:4px;
}
.auth-family .login-form-meta {
margin:0 0 8px;gap:8px;flex-wrap:nowrap;
}
.auth-family .login-form-meta .form-check {
padding-left:0;gap:8px;
}
.auth-family .login-form-meta .form-check-label,
.auth-family .login-forgot-link {
display:inline-flex;align-items:center;min-height:44px;
}
.auth-family .login-support-note {
grid-template-columns:36px minmax(0,1fr);gap:10px;margin-top:12px;min-height:0;padding:8px 12px;border-radius:var(--workspace-radius-control);
}
.auth-family .login-support-icon {
width:36px;height:36px;font-size:1rem;
}
.auth-family .login-panel-copy {font-size:17px;}
.auth-family .login-field label {font-size:16px;}
.auth-family .login-input-wrap .form-control,
.auth-family .login-input-wrap .form-control::placeholder {font-size:17px;}
.auth-family .login-form-meta,
.auth-family .login-form-meta .form-check-label,
.auth-family .login-forgot-link {font-size:16px;}
.auth-family .login-submit {font-size:17px !important;}
.auth-family .login-support-note {font-size:16px;}
.auth-family .login-support-note strong {font-size:17px;}
.auth-family .login-support-content > span {font-size:16px;}
.auth-family .login-security {
flex:0 0 auto;width:100%;min-height:76px;margin:auto 0 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:center;border:0;background:linear-gradient(90deg,rgba(1,24,58,.45),rgba(1,29,70,.2)),url('../images/login/footer-wallpaper.png');background-repeat:no-repeat;background-size:cover;background-position:center;
}
.auth-family .login-security-icon {
width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(20,112,255,.2);color:#80baff;font-size:1rem;
}
.auth-family .login-security>div {
min-width:0;width:100%;
}
.auth-family .login-security-title {
margin:0 0 2px;color:#fff;font-weight:700;line-height:1.2;
}
.auth-family .login-security-copy {
width:100%;max-width:none;margin:0;color:rgba(255,255,255,.85);
}
}


/* High-gloss 3D informational buttons, inspired by the supplied reference. */
.auth-family .login-benefit:nth-child(1) .login-benefit-icon{--shine-top:#76d3ff;--face-top:#138dff;--face-mid:#0066f7;--face-bottom:#0043d5;--edge:#002d96;--glow:rgba(0,106,255,.32)}
.auth-family .login-benefit:nth-child(2) .login-benefit-icon{--shine-top:#8affb0;--face-top:#19d86d;--face-mid:#00b94c;--face-bottom:#008b37;--edge:#00642c;--glow:rgba(0,190,81,.3)}
.auth-family .login-benefit:nth-child(3) .login-benefit-icon{--shine-top:#ffe99c;--face-top:#ffbe27;--face-mid:#ff9700;--face-bottom:#e57700;--edge:#a95300;--glow:rgba(255,152,0,.31)}
.auth-family .login-benefit:nth-child(4) .login-benefit-icon{--shine-top:#e5a1ff;--face-top:#b948f7;--face-mid:#9524e4;--face-bottom:#6812b8;--edge:#470b82;--glow:rgba(158,38,231,.32)}
.auth-family .login-benefit .login-benefit-icon{
position:relative;isolation:isolate;overflow:hidden;border-radius:13px;
background:linear-gradient(180deg,var(--face-top) 0%,var(--face-mid) 54%,var(--face-bottom) 100%);
border:1px solid rgba(255,255,255,.62);
box-shadow:inset 0 2px 1px rgba(255,255,255,.7),inset 0 -4px 0 var(--edge),inset 0 -7px 10px rgba(0,0,0,.12),0 3px 0 rgba(0,10,38,.5),0 7px 14px var(--glow);
transform:none;
}
.auth-family .login-benefit .login-benefit-icon::before{
content:'';position:absolute;z-index:0;pointer-events:none;top:3px;left:8%;right:8%;height:43%;
border-radius:10px 10px 45% 45%;
background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.2) 60%,rgba(255,255,255,0));
}
.auth-family .login-benefit .login-benefit-icon::after{
content:'';position:absolute;pointer-events:none;left:12%;right:12%;bottom:9%;height:1px;
background:rgba(255,255,255,.27);
}
.auth-family .login-benefit .login-benefit-icon i{position:relative;z-index:1;color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.35)}
.auth-family .flow-purchases > i{--flow-top:#ff9494;--flow-mid:#f43d43;--flow-bottom:#d31626;--flow-edge:#950f1a}
.auth-family .flow-inventory > i{--flow-top:#7bd4ff;--flow-mid:#1689ff;--flow-bottom:#0050e5;--flow-edge:#00339c}
.auth-family .flow-recipes > i{--flow-top:#e7a2ff;--flow-mid:#a340f5;--flow-bottom:#7116cf;--flow-edge:#4e0c91}
.auth-family .flow-production > i{--flow-top:#8effb4;--flow-mid:#11d36b;--flow-bottom:#008c3c;--flow-edge:#00632b}
.auth-family .flow-costs > i{--flow-top:#ffe78d;--flow-mid:#ffad17;--flow-bottom:#ed7900;--flow-edge:#a45200}
.auth-family .login-flow-item > i{
position:relative;overflow:hidden;border-radius:12px;
background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.06) 39%,transparent 48%),linear-gradient(180deg,var(--flow-top),var(--flow-mid) 48%,var(--flow-bottom));
border:1px solid rgba(255,255,255,.62);
box-shadow:inset 0 2px 1px rgba(255,255,255,.72),inset 0 -4px 0 var(--flow-edge),0 3px 0 rgba(0,10,38,.48),0 7px 12px rgba(0,0,0,.22);
color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.3);
}

/* Informational icon sizes: desktop / tablet / compact tablet. */
@media (min-width:1200px) {
  .auth-family .login-benefit .login-benefit-icon {width:65px;height:65px;flex:0 0 65px}
  .auth-family .login-benefit {grid-template-columns:65px minmax(0,1fr)}
  .auth-family .login-flow-item > i {width:50px;height:50px}
}
@media (min-width:900px) and (max-width:1199.98px) {
  .auth-family .login-benefit .login-benefit-icon {width:50px;height:50px;flex:0 0 50px}
  .auth-family .login-benefit {grid-template-columns:50px minmax(0,1fr)}
  .auth-family .login-flow-item > i {width:40px;height:40px}
}
@media (min-width:768px) and (max-width:899.98px) {
  .auth-family .login-benefit .login-benefit-icon {width:45px;height:45px;flex:0 0 45px}
  .auth-family .login-benefit {grid-template-columns:45px minmax(0,1fr)}
  .auth-family .login-flow-item > i {width:35px;height:35px}
}

/* Keep the four benefit blocks aligned in a balanced two-column grid. */
@media (min-width:768px) {
  .auth-family .login-benefits {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:32px;
    row-gap:24px;
    align-items:stretch;
  }
  .auth-family .login-benefit {
    align-items:start;
    align-content:start;
    min-width:0;
  }
  .auth-family .login-benefit > div:last-child {
    min-width:0;
    padding-top:2px;
  }
  .auth-family .login-benefit-title {
    margin:0 0 5px;
    line-height:1.25;
  }
  .auth-family .login-benefit-copy {
    margin:0;
    line-height:1.42;
  }
  .auth-family .login-benefit:nth-child(odd)::after {
    right:-16px;
  }
}

/* Glossy raised sign-in button matching informational icon treatment. */
.auth-family .login-submit {
  position:relative;isolation:isolate;overflow:hidden;
  min-height:52px;border:1px solid rgba(172,224,255,.8);
  border-radius:13px;
  background:linear-gradient(180deg,#55c3ff 0%,#1688ff 23%,#0665ed 60%,#064ac7 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.68),inset 0 -4px 0 rgba(0,47,143,.7),0 4px 0 rgba(0,34,100,.4),0 10px 22px rgba(0,97,240,.28);
  text-shadow:0 1px 2px rgba(0,29,92,.38);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.auth-family .login-submit::before {
  content:'';position:absolute;pointer-events:none;z-index:0;
  top:3px;left:2%;right:2%;height:42%;border-radius:10px 10px 45% 45%;
  background:linear-gradient(180deg,rgba(255,255,255,.53),rgba(255,255,255,.04));
}
.auth-family .login-submit::after {
  content:'';position:absolute;pointer-events:none;z-index:0;inset:0;
  background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.34) 47%,transparent 64%);
  transform:translateX(-130%);transition:transform .65s ease;
}
.auth-family .login-submit > span {position:relative;z-index:1}
.auth-family .login-submit:hover:not(:disabled) {
  color:#fff;transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.75),inset 0 -4px 0 rgba(0,47,143,.7),0 6px 0 rgba(0,34,100,.35),0 16px 26px rgba(0,97,240,.35);
}
.auth-family .login-submit:hover:not(:disabled)::after {transform:translateX(130%)}
.auth-family .login-submit:active:not(:disabled) {
  transform:translateY(2px);
  box-shadow:inset 0 2px 3px rgba(0,35,110,.2),inset 0 -2px 0 rgba(0,47,143,.65),0 1px 0 rgba(0,34,100,.35),0 5px 12px rgba(0,97,240,.2);
}
.auth-family .login-submit:focus-visible {outline:3px solid #8bcaff;outline-offset:3px}
.auth-family .login-submit .submit-arrow {display:inline-flex;transition:transform .2s ease}
.auth-family .login-submit:hover:not(:disabled) .submit-arrow {transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
  .auth-family .login-submit,.auth-family .login-submit::after,.auth-family .login-submit .submit-arrow{transition:none}
  .auth-family .login-submit:hover:not(:disabled),.auth-family .login-submit:active:not(:disabled){transform:none}
}

/* Polished language selector; preserves native ES/EN form submission. */
.auth-family .login-language {
  gap:5px;padding:5px 8px 5px 6px;
  border:1px solid #dce7f9;border-radius:999px;
  background:linear-gradient(180deg,#fff 0%,#f3f7ff 100%);
  box-shadow:inset 0 1px 0 #fff,0 5px 16px rgba(19,61,133,.1);
}
.auth-family .login-language-icon {
  width:36px;height:36px;border-radius:50%;
  color:#1766d9;background:linear-gradient(180deg,#eef6ff,#e1edff);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9);
}
.auth-family .login-language form {gap:4px}
.auth-family .login-language button {
  min-width:43px;min-height:38px;padding:0 11px;
  border:1px solid transparent;border-radius:999px;
  color:#526b93;font-weight:800;font-size:13px;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.auth-family .login-language button.is-active {
  color:#fff;
  border-color:rgba(168,222,255,.85);
  background:linear-gradient(180deg,#64c6ff 0%,#1985ff 28%,#075ce9 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,49,157,.4),0 3px 8px rgba(12,102,234,.25);
  text-shadow:0 1px 1px rgba(0,40,115,.25);
}
.auth-family .login-language button:not(.is-active):hover {
  background:#e8f1ff;color:#0d58cc;transform:translateY(-1px);
}
.auth-family .login-language button:focus-visible {outline:3px solid #78b9ff;outline-offset:2px}
.auth-family .login-language-caret {padding:0 5px;color:#6c85ad;font-size:12px}
@media(prefers-reduced-motion:reduce){.auth-family .login-language button{transition:none}.auth-family .login-language button:not(.is-active):hover{transform:none}}

/* Gentle headset buzz: icon only, with rest intervals and reduced-motion support. */
.auth-family .login-support-icon i {
  display:inline-block;
  transform-origin:50% 55%;
  animation:auth-support-buzz 4.5s ease-in-out infinite;
}
@keyframes auth-support-buzz {
  0%,10%,23%,100% {transform:translateY(0) rotate(0)}
  12% {transform:translateY(-3px) rotate(-7deg)}
  14% {transform:translateY(2px) rotate(6deg)}
  16% {transform:translateY(-3px) rotate(-5deg)}
  18% {transform:translateY(1px) rotate(4deg)}
  20% {transform:translateY(-1px) rotate(-2deg)}
}
@media(prefers-reduced-motion:reduce){
  .auth-family .login-support-icon i {animation:none}
}

/* Security notice: shield aligned with the top of the title and description block. */
.auth-family .login-security {
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-items:start;
  column-gap:12px;
}
.auth-family .login-security-icon {
  grid-column:1;
  grid-row:1;
  width:40px;
  height:40px;
  flex:0 0 40px;
  align-self:start;
}
.auth-family .login-security > div {
  grid-column:2;
  grid-row:1;
  min-width:0;
}
@media(max-width:767.98px) {
  .auth-family .login-security {grid-template-columns:38px minmax(0,1fr);column-gap:11px}
  .auth-family .login-security-icon {width:38px;height:38px;flex-basis:38px}
}

/* Subtle directional cue for the operation flow arrows. */
.auth-family .login-flow-steps > .flow-arrow {
  display:inline-block;
  animation:arvix-flow-forward 2.2s ease-in-out infinite;
  will-change:transform;
}
.auth-family .login-flow-steps > .flow-arrow:nth-of-type(2) {animation-delay:.15s}
.auth-family .login-flow-steps > .flow-arrow:nth-of-type(3) {animation-delay:.3s}
.auth-family .login-flow-steps > .flow-arrow:nth-of-type(4) {animation-delay:.45s}
@keyframes arvix-flow-forward {
  0%,22%,65%,100% {transform:translateX(0)}
  38% {transform:translateX(5px)}
  50% {transform:translateX(2px)}
}
@media(prefers-reduced-motion:reduce) {
  .auth-family .login-flow-steps > .flow-arrow {animation:none;will-change:auto}
}

/* Portrait tablet only: approved layered composition, one scoped layout. */
@media (min-width:768px) and (max-width:1100px) and (orientation:portrait) {
  .login-page-shell.auth-family {
    padding:16px;min-height:100dvh;height:auto;overflow-y:auto;align-items:flex-start;
  }
  .auth-family .login-stage {
    display:block;position:relative;isolation:isolate;
    width:100%;max-width:1000px;
    min-height:max(960px,calc((100vw - 32px)*1.24));
    height:auto;max-height:none;margin:0 auto;
    overflow:hidden;border-radius:26px;
  }
  .auth-family .login-showcase {
    position:absolute;inset:0;display:block;
    width:100%;height:100%;min-height:0;
    padding:clamp(28px,3.8vw,46px);
    background-position:center,center top,12% 14%,center;
    background-size:cover,cover,auto,auto;
  }
  .auth-family .login-showcase-inner {
    display:block;position:relative;width:100%;height:100%;min-height:0;
  }
  .auth-family .login-brand-row {width:44%;margin:0 0 clamp(64px,8vw,95px)}
  .auth-family .login-brand-logo {width:100%;max-width:300px;max-height:90px}
  .auth-family .login-hero-title {
    width:38%;max-width:none;margin:0 0 22px;
    font-size:clamp(29px,3.7vw,42px);line-height:1.08;
  }
  .auth-family .login-hero-copy {
    width:38%;max-width:none;margin:0 0 30px;
    font-size:clamp(14px,1.7vw,18px);line-height:1.5;
  }
  .auth-family .login-benefits {
    display:grid;grid-template-columns:minmax(0,1fr);
    gap:clamp(18px,2.7vw,30px);width:38%;max-width:none;margin:0;
  }
  .auth-family .login-benefit,
  .auth-family .login-benefit:nth-child(odd) {
    display:grid;grid-template-columns:clamp(45px,5.3vw,60px) minmax(0,1fr);
    align-items:start;gap:clamp(10px,1.6vw,16px);
    padding:0;border:0;min-width:0;
  }
  .auth-family .login-benefit:nth-child(odd)::after {display:none}
  .auth-family .login-benefit .login-benefit-icon {
    width:clamp(45px,5.3vw,60px);height:clamp(45px,5.3vw,60px);
    flex-basis:clamp(45px,5.3vw,60px);
  }
  .auth-family .login-benefit-title {
    font-size:clamp(14px,1.65vw,18px);line-height:1.25;margin:0 0 5px;
  }
  .auth-family .login-benefit-copy {
    font-size:clamp(12px,1.55vw,16px);line-height:1.42;
  }
  .auth-family .login-flow-card {
    position:absolute;left:0;bottom:0;z-index:1;
    width:100%;max-width:none;margin:0;padding:12px 14px;
  }
  .auth-family .login-flow-title {font-size:clamp(15px,1.9vw,20px);margin-bottom:16px}
  .auth-family .login-flow-steps {
    display:grid;grid-template-columns:minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr);
    gap:4px;align-items:start;
  }
  .auth-family .login-flow-item {min-width:0;width:auto}
  .auth-family .login-flow-item > i {width:clamp(35px,4.8vw,50px);height:clamp(35px,4.8vw,50px)}
  .auth-family .login-flow-item small {font-size:clamp(11px,1.3vw,14px);white-space:normal}
  .auth-family .login-flow-steps .flow-arrow {margin-top:15px;font-size:13px}
  .auth-family .login-panel {
    position:absolute;z-index:3;top:15%;right:2%;left:auto;bottom:auto;
    display:block;align-self:auto;width:54%;min-width:0;
    height:auto;max-height:none;margin:0;padding:clamp(28px,3.6vw,42px);
    border-radius:26px;box-shadow:-15px 24px 55px rgba(0,10,40,.28);
  }
  .auth-family .login-panel-inner {width:100%;max-width:none;margin:0}
  .auth-family .login-language-wrap {margin-bottom:clamp(34px,4.5vw,54px)}
  .auth-family .login-panel-head,.auth-family .login-form-card {width:100%;max-width:none}
  .auth-family .login-panel-head {margin-bottom:26px}
  .auth-family .login-panel-title {font-size:clamp(26px,3.3vw,36px)}
  .auth-family .login-field {margin-bottom:18px}
  .auth-family .login-security {margin-top:24px}
}