/* Shared sign-in, account recovery, and candidate access experience. */
.vf-auth-experience {
    --auth-ink: #202638;
    --auth-muted: #707789;
    --auth-border: #e7e9ee;
    --auth-red: var(--vf-primary, #d92028);
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding: 0 40px;
    background: #f8f9fc;
    color: var(--auth-ink);
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}
.vf-auth-experience *, .vf-auth-experience *::before, .vf-auth-experience *::after { box-sizing: border-box; }
.vf-auth-experience a { text-decoration: none; }
.vf-auth-experience button, .vf-auth-experience input { font: inherit; }
.vf-auth-experience a:focus-visible, .vf-auth-experience button:focus-visible { outline: 3px solid #ef9398; outline-offset: 4px; }
.vf-auth-header, .vf-auth-footer { width: 100%; max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.vf-auth-header { min-height: 100px; padding: 24px 0; }
.vf-auth-brand { display: flex; align-items: center; gap: 19px; min-width: 0; color: var(--auth-ink); font-size: 16px; font-weight: 800; letter-spacing: -.4px; }
.vf-auth-brand:hover { color: var(--auth-red); }
.vf-auth-brand img { display: block; width: 154px; max-height: 50px; object-fit: contain; }
.vf-auth-brand-divider { height: 27px; border-left: 1px solid #dfe2e8; }
.vf-auth-header-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; color: #555c6e; font-size: 12px; font-weight: 700; }
.vf-auth-header-link > i:first-child { color: var(--auth-red); font-size: 15px; }
.vf-auth-header-link > i:last-child { margin-left: 9px; font-size: 10px; }
.vf-auth-header-link:hover { color: var(--auth-red); }
.vf-auth-layout { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 1240px; margin: auto; padding: 12px; border: 1px solid #e8eaf0; border-radius: 26px; background: #fff; box-shadow: 0 20px 70px -42px #252b4652; }
.vf-auth-story { min-width: 0; display: flex; flex-direction: column; padding: 38px; border: 1px solid #f0e8e8; border-radius: 17px; background: #faf4f4; overflow: hidden; }
.vf-auth-story-kicker { display: inline-flex; align-items: center; gap: 9px; color: #b52530; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.vf-auth-story-kicker > span { width: 6px; height: 6px; background: var(--auth-red); border-radius: 50%; box-shadow: 0 0 0 4px #d920280c; }
.vf-auth-story h2 { margin: 24px 0 15px; color: #252938; font-size: clamp(30px, 3.25vw, 47px); font-weight: 800; line-height: 1.18; letter-spacing: -2px; }
.vf-auth-story-intro > p { max-width: 335px; margin: 0; color: #737180; font-size: 13px; line-height: 1.85; }
.vf-auth-story-image { position: relative; margin-top: 30px; overflow: hidden; border: 1px solid #ecdedf; border-radius: 13px; background: #fff; }
.vf-auth-story-image > img { display: block; width: 100%; aspect-ratio: 1.75; object-fit: cover; object-position: center; }
.vf-auth-image-note { display: flex; align-items: center; gap: 12px; padding: 16px 17px; background: #fff; }
.vf-auth-note-icon { flex: 0 0 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; background: #fff0f0; color: var(--auth-red); font-size: 16px; }
.vf-auth-image-note strong, .vf-auth-image-note small { display: block; }
.vf-auth-image-note strong { color: #343749; font-size: 11px; font-weight: 800; }
.vf-auth-image-note small { margin-top: 5px; color: #858390; font-size: 9px; line-height: 1.5; }
.vf-auth-story-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 27px; color: #89818b; font-size: 10px; }
.vf-auth-story-footer > span:first-child { color: #a92630; font-weight: 800; }
.vf-auth-story-footer i { margin-left: 5px; color: #be525c; }
.vf-auth-panel { align-self: center; min-width: 0; width: 100%; max-width: 485px; margin: 0 auto; padding: 37px 42px; }
.vf-auth-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 22px; }
.vf-auth-eyebrow { color: #7d8290; font-size: 10px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.vf-auth-panel-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 1px solid #f3dfe1; border-radius: 11px; background: #fff5f5; color: var(--auth-red); font-size: 15px; }
.vf-auth-panel h1 { margin: 0 0 11px; color: var(--auth-ink); font-size: clamp(27px, 2.4vw, 33px); font-weight: 800; line-height: 1.25; letter-spacing: -1.3px; }
.vf-auth-description { margin: 0 0 29px; color: var(--auth-muted); font-size: 12px; line-height: 1.9; }
.vf-auth-form { display: flex; flex-direction: column; gap: 19px; margin: 0; }
.vf-auth-field { min-width: 0; }
.vf-auth-field > label, .vf-auth-label-row > label { display: block; margin: 0 0 9px; color: #383e50; font-size: 11px; font-weight: 700; }
.vf-auth-label-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.vf-auth-label-row a { color: var(--auth-red); font-size: 10px; font-weight: 700; }
.vf-auth-label-row a:hover { text-decoration: underline; }
.vf-auth-input-wrap { position: relative; display: flex; align-items: center; }
.vf-auth-input { display: block; min-width: 0; width: 100%; min-height: 49px; padding: 13px 15px 13px 43px; border: 1px solid var(--auth-border); border-radius: 9px; background: #fcfcfd; color: var(--auth-ink); font-size: 12px !important; line-height: 1.65; outline: none; transition: border-color .18s, box-shadow .18s, background .18s; }
.vf-auth-input::placeholder { color: #969ba9; font-weight: 400; opacity: 1; }
.vf-auth-input:focus { border-color: #de777e; box-shadow: 0 0 0 3px #d9202810; background: #fff; }
.vf-auth-input[aria-invalid="true"] { border-color: #d45361; background: #fffafa; }
.vf-auth-input-icon { position: absolute; left: 16px; z-index: 1; color: #9b9fac; font-size: 12px; pointer-events: none; }
.vf-auth-input-wrap:focus-within > .vf-auth-input-icon { color: var(--auth-red); }
.vf-auth-input-password { padding-right: 48px; }
.vf-auth-password-toggle { position: absolute; top: 3px; right: 3px; bottom: 3px; width: 42px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #9298a6; font-size: 12px; cursor: pointer; }
.vf-auth-password-toggle:hover { color: var(--auth-red); background: #fff0f1; }
.vf-auth-error { margin: 7px 0 0; color: #b12635; font-size: 10px; line-height: 1.6; }
.vf-auth-checkbox { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: #757b8b; font-size: 11px; font-weight: 400; line-height: 1.7; cursor: pointer; }
.vf-auth-checkbox input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--auth-red); cursor: pointer; }
.vf-auth-checkbox input:focus-visible { outline: 3px solid #ef9398; outline-offset: 3px; }
.vf-auth-submit { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 49px; width: 100%; margin: 3px 0 0; padding: 14px 20px; border: 1px solid var(--auth-red); border-radius: 9px; background: var(--auth-red); box-shadow: 0 5px 13px #d920281a; color: #fff; font-size: 11px !important; font-weight: 800 !important; line-height: 1.55; cursor: pointer; transition: background .18s, box-shadow .18s, transform .18s; }
.vf-auth-submit i { font-size: 12px; }
.vf-auth-submit:hover { background: #ba1c26; border-color: #ba1c26; box-shadow: 0 7px 16px #d920282c; transform: translateY(-1px); }
.vf-auth-submit:disabled { cursor: wait; opacity: .72; transform: none; box-shadow: none; }
.vf-auth-divider { display: flex; align-items: center; gap: 13px; margin: 27px 0 19px; color: #a0a4b0; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.vf-auth-divider::before, .vf-auth-divider::after { content: ''; flex: 1; height: 1px; background: #edf0f4; }
.vf-auth-alternate { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--auth-border); border-radius: 10px; background: #fff; transition: border-color .18s, background .18s; }
.vf-auth-alternate:hover { border-color: #ebbdc1; background: #fffbfb; }
.vf-auth-alternate-icon { flex: 0 0 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; background: #f4f5f9; color: #697187; font-size: 13px; }
.vf-auth-alternate strong, .vf-auth-alternate small { display: block; }
.vf-auth-alternate strong { color: #424858; font-size: 10px; font-weight: 700; }
.vf-auth-alternate small { margin-top: 5px; color: #969baa; font-size: 9px; }
.vf-auth-alternate > i { margin-left: auto; color: #9b9fad; font-size: 10px; }
.vf-auth-help { margin: 28px 0 0; color: #969baa; font-size: 10px; text-align: center; }
.vf-auth-help a { margin-left: 3px; color: #646a7a; font-weight: 700; }
.vf-auth-help a:hover { color: var(--auth-red); }
.vf-auth-help i { margin-left: 3px; font-size: 8px; }
.vf-auth-footer { padding: 24px 0; color: #9297a5; font-size: 9px; line-height: 1.7; }
.vf-auth-footer a { color: #787f90; }
.vf-auth-footer a:hover { color: var(--auth-red); }
.vf-auth-notice, .vf-auth-info { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 13px 14px; border: 1px solid; border-radius: 9px; font-size: 11px; line-height: 1.75; }
.vf-auth-notice > i, .vf-auth-info > i { margin-top: 3px; font-size: 14px; }
.vf-auth-notice-error { background: #fff3f3; color: #b12635; border-color: #f4d8db; }
.vf-auth-notice-success { background: #f0faf5; color: #287356; border-color: #d3eadf; }
.vf-auth-info { background: #f8f9fc; color: #737c90; border-color: #e7eaf0; }
.vf-auth-info > i { color: var(--auth-red); }
.vf-auth-return { margin: 24px 0 0; text-align: center; color: var(--auth-muted); font-size: 11px; }
.vf-auth-return a { color: var(--auth-red); font-weight: 700; }
.vf-auth-back { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; margin-top: 15px; color: #747c8c; font-size: 10px; font-weight: 700; }
.vf-auth-back:hover { color: var(--auth-red); }
.vf-auth-steps { display: flex; align-items: center; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.vf-auth-steps li { flex: 1; display: flex; align-items: center; gap: 8px; color: #949aaa; font-size: 9px; font-weight: 700; }
.vf-auth-steps li + li::before { content: ''; flex: 1; height: 1px; margin-right: 3px; background: #e8eaf0; }
.vf-auth-step-number { flex: 0 0 23px; height: 23px; display: grid; place-items: center; border: 1px solid #e3e6ed; border-radius: 50%; color: #9ba1af; font-size: 9px; }
.vf-auth-steps li[aria-current="step"] { color: #b62b37; }
.vf-auth-steps li[aria-current="step"] .vf-auth-step-number { background: #fff0f1; border-color: #f2c8cc; color: #c12c37; }
.vf-auth-steps li.is-complete { color: #438a70; }
.vf-auth-steps li.is-complete .vf-auth-step-number { color: #438a70; border-color: #c8e8d9; background: #f0faf5; }
.vf-auth-field-hint { display: block; margin-top: 10px; color: #959ba9; font-size: 10px; line-height: 1.8; }
.vf-auth-exam-summary { margin: 0 0 23px; padding: 17px 18px; border: 1px solid #f0dadd; border-radius: 11px; background: #fff9f9; }
.vf-auth-exam-summary-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; font-size: 9px; }
.vf-auth-exam-summary-top > span:first-child { color: #338164; font-weight: 700; }
.vf-auth-exam-summary-top > span:last-child { color: #98909a; overflow-wrap: anywhere; }
.vf-auth-exam-summary h2 { margin: 0 0 12px; color: #424052; font-size: 15px; font-weight: 800; line-height: 1.5; letter-spacing: -.3px; overflow-wrap: anywhere; }
.vf-auth-exam-meta { display: flex; flex-wrap: wrap; gap: 9px 16px; color: #8b8391; font-size: 9px; }
.vf-auth-exam-meta i { margin-right: 4px; color: #b34c59; }
.vf-auth-declaration { padding: 14px; border: 1px solid #eceef3; border-radius: 9px; background: #fafbfd; }
.vf-auth-declaration .vf-auth-checkbox { font-size: 10px; line-height: 1.85; }
@media (min-width: 1440px) { .vf-auth-experience { padding: 0 70px; } .vf-auth-header { min-height: 125px; } .vf-auth-layout { min-height: 640px; } .vf-auth-story { padding: 43px; } .vf-auth-story-image { margin-top: 37px; } }
@media (max-width: 1100px) { .vf-auth-experience { padding: 0 24px; } .vf-auth-story { padding: 29px; } .vf-auth-panel { padding: 30px; } .vf-auth-story h2 { font-size: 35px; } }
@media (max-width: 800px) {
    .vf-auth-layout { max-width: 570px; grid-template-columns: 1fr; padding: 9px; border-radius: 22px; }
    .vf-auth-story { padding: 25px; border-radius: 14px; }
    .vf-auth-story h2 { margin: 13px 0 8px; font-size: 31px; letter-spacing: -1.1px; }
    .vf-auth-story h2 br { display: none; }
    .vf-auth-story-intro > p { max-width: 100%; font-size: 11px; }
    .vf-auth-story-image { margin-top: 20px; }
    .vf-auth-story-image > img { max-height: 185px; aspect-ratio: 2.6; }
    .vf-auth-image-note { padding: 12px 14px; }
    .vf-auth-story-footer { display: none; }
    .vf-auth-panel { max-width: 100%; padding: 30px 27px; }
    .vf-auth-panel h1 { font-size: 29px; }
    .vf-auth-header { min-height: 86px; }
    .vf-auth-brand { gap: 13px; font-size: 13px; }
    .vf-auth-brand img { width: 134px; }
    .vf-auth-header-link { font-size: 10px; gap: 7px; }
    .vf-auth-header-link > i:last-child { display: none; }
    .vf-auth-footer { justify-content: center; flex-wrap: wrap; gap: 5px 18px; text-align: center; }
}
@media (max-width: 480px) {
    .vf-auth-experience { padding: 0 14px; }
    .vf-auth-header { padding: 18px 3px; flex-wrap: wrap; gap: 7px; }
    .vf-auth-brand img { width: 119px; }
    .vf-auth-brand { font-size: 12px; gap: 10px; }
    .vf-auth-brand-divider { height: 23px; }
    .vf-auth-header-link { font-size: 9px; min-height: 32px; }
    .vf-auth-header-link > i:first-child { font-size: 11px; }
    .vf-auth-story { padding: 21px; }
    .vf-auth-story-kicker { font-size: 8px; letter-spacing: 1.2px; }
    .vf-auth-story h2 { font-size: 27px; }
    .vf-auth-story-image > img { aspect-ratio: 2.1; }
    .vf-auth-panel { padding: 26px 18px; }
    .vf-auth-input { font-size: 16px !important; padding-top: 11px; padding-bottom: 11px; }
    .vf-auth-input::placeholder { font-size: 12px; }
    .vf-auth-steps { gap: 5px; }
    .vf-auth-steps li { gap: 5px; font-size: 8px; }
    .vf-auth-eyebrow { font-size: 9px; }
    .vf-auth-footer { padding: 20px 7px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .vf-auth-experience *, .vf-auth-experience *::before, .vf-auth-experience *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Login portal — presentation follows the dark two-panel VFinEQz concept. */
.vf-login-experience {
    --login-red: var(--vf-primary, #d92028);
    --login-red-dark: var(--vf-primary-dark, #bd171e);
    --login-navy: var(--vf-workspace-bg, #0c1629);
    --auth-red: var(--login-red);
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 24px;
    padding: clamp(30px, 5vh, 70px) 24px 20px;
    overflow: hidden;
    color: #172238;
    background:
        radial-gradient(circle at 17% 36%, color-mix(in srgb, var(--login-red) 35%, transparent), transparent 28%),
        radial-gradient(circle at 88% 73%, color-mix(in srgb, var(--login-red) 25%, transparent), transparent 27%),
        var(--login-navy);
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}
.vf-login-experience::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .9) 82%, transparent 100%);
    pointer-events: none;
}
.vf-login-experience *, .vf-login-experience *::before, .vf-login-experience *::after { box-sizing: border-box; }
.vf-login-experience a { text-decoration: none; }
.vf-login-experience button, .vf-login-experience input { font: inherit; }
.vf-login-experience :is(a, button, input):focus-visible { outline: 3px solid rgba(239, 111, 118, .7); outline-offset: 3px; }
.vf-login-stage { display: grid; place-items: center; min-height: 0; }
.vf-login-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: min(1120px, 100%);
    min-height: min(650px, calc(100svh - 150px));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(2, 8, 20, .38);
    animation: vfLoginCardEnter .72s cubic-bezier(.2, .8, .2, 1) both;
}
.vf-login-showcase {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 54px 52px 50px;
    overflow: hidden;
    color: #fff;
    background-image:
        linear-gradient(145deg, rgba(97, 39, 49, .48), rgba(81, 36, 43, .35)),
        url('../../img/banner-01.jpeg');
    background-size: cover;
    background-position: center;
}
.vf-login-showcase::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(48, 22, 31, .08), rgba(48, 22, 31, .34));
    pointer-events: none;
}
.vf-login-company-logo {
    position: absolute;
    z-index: 1;
    top: 54px;
    left: 52px;
    width: 220px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 12px;
    background: rgba(61, 45, 50, .38);
    box-shadow: 0 10px 30px rgba(31, 14, 20, .16);
    animation: vfLoginContentEnter .58s cubic-bezier(.2, .8, .2, 1) .25s both;
}
.vf-login-company-logo img { display: block; width: 100%; height: auto; border-radius: 2px; }
.vf-login-showcase-content {
    position: relative;
    z-index: 1;
    align-self: flex-end;
    width: min(100%, 435px);
    text-shadow: 0 2px 12px rgba(30, 13, 18, .2);
    animation: vfLoginContentEnter .65s cubic-bezier(.2, .8, .2, 1) .32s both;
}
.vf-login-product-name { margin: 0 0 11px; font-size: clamp(31px, 3vw, 42px); font-weight: 750; line-height: 1.15; letter-spacing: -.045em; }
.vf-login-tagline { max-width: 430px; margin: 0 0 26px; color: rgba(255, 255, 255, .9); font-size: 15px; line-height: 1.65; }
.vf-login-benefits { display: grid; gap: 11px; }
.vf-login-benefit {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 11px 19px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.vf-login-benefit > span { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 9px; background: var(--login-red); color: #fff; font-size: 14px; text-shadow: none; }
.vf-login-benefit strong { color: #fff; font-size: 13px; font-weight: 550; line-height: 1.5; }
.vf-login-panel { display: grid; place-items: center; min-width: 0; padding: 34px 48px; background: #fff; }
.vf-login-panel-inner { width: min(100%, 470px); animation: vfLoginPanelEnter .65s cubic-bezier(.2, .8, .2, 1) .38s both; }
.vf-login-system-logo { display: block; width: 185px; height: auto; margin: 0 0 24px; }
.vf-login-panel h1 { margin: 0 0 10px; color: #111b30; font-size: clamp(29px, 2.6vw, 38px); font-weight: 800; line-height: 1.2; letter-spacing: -.04em; }
.vf-login-description { margin: 0 0 26px; color: #75829a; font-size: 14px; line-height: 1.7; }
.vf-login-form { gap: 16px; }
.vf-login-form .vf-auth-field > label, .vf-login-form .vf-auth-label-row > label { color: #37445b; font-size: 11px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.vf-login-form .vf-auth-label-row a { color: #a64751; font-size: 10px; }
.vf-login-form .vf-auth-input { min-height: 54px; padding-left: 48px; border-color: #dfe5ed; border-radius: 14px; background: #f8fafc; color: #1f2a3d; font-size: 13px !important; box-shadow: inset 0 1px 2px rgba(32, 47, 70, .03); }
.vf-login-form .vf-auth-input-icon { left: 18px; color: #a4b1c5; font-size: 14px; }
.vf-login-form .vf-auth-password-toggle { right: 7px; top: 7px; bottom: 7px; color: #9aabc2; }
.vf-login-form .vf-auth-checkbox { color: #58677d; font-size: 12px; }
.vf-login-form .vf-auth-checkbox input { width: 18px; height: 18px; margin-top: 1px; }
.vf-login-form .vf-auth-submit { min-height: 52px; margin-top: 3px; border-radius: 13px; background: linear-gradient(90deg, var(--login-red), var(--login-red-dark)); box-shadow: 0 13px 24px color-mix(in srgb, var(--login-red) 22%, transparent); font-size: 13px !important; letter-spacing: .02em; }
.vf-login-form .vf-auth-submit:hover { background: linear-gradient(90deg, var(--login-red-dark), color-mix(in srgb, var(--login-red-dark) 82%, black)); box-shadow: 0 15px 28px color-mix(in srgb, var(--login-red) 28%, transparent); }
.vf-login-exam-prompt { display: flex; align-items: center; gap: 12px; margin: 18px 0 11px; color: #9aa4b4; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.vf-login-exam-prompt::before, .vf-login-exam-prompt::after { content: ''; flex: 1; height: 1px; background: #e8ecf2; }
.vf-login-exam-link { display: flex; align-items: center; gap: 13px; min-height: 56px; padding: 9px 14px; border: 1px solid #edc9cd; border-radius: 13px; background: #fff7f8; transition: border-color .18s, background .18s, transform .18s; }
.vf-login-exam-link:hover { border-color: #df939a; background: #fff0f1; transform: translateY(-1px); }
.vf-login-exam-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 10px; background: var(--login-red); color: #fff; font-size: 14px; }
.vf-login-exam-link strong, .vf-login-exam-link small { display: block; }
.vf-login-exam-link strong { color: #303b50; font-size: 11px; font-weight: 800; }
.vf-login-exam-link small { margin-top: 4px; color: #858fa0; font-size: 9px; }
.vf-login-exam-link > i { margin-left: auto; color: #c4313d; font-size: 11px; }
.vf-login-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 23px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 12px 34px; border: 1px solid rgba(147, 162, 187, .18); border-radius: 999px; color: #a1adc0; background: rgba(8, 17, 34, .56); font-size: 12px; line-height: 1.6; animation: vfLoginFooterEnter .55s ease-out .68s both; }
.vf-login-footer a { color: #ee5359; font-weight: 700; }
.vf-login-footer a:hover { color: #fff; }
.vf-login-footer-dot { width: 3px; height: 3px; border-radius: 50%; background: #7f8ba0; }
.vf-exam-access-login { overflow-x: hidden; overflow-y: auto; }
.vf-exam-access-login .vf-login-card {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    width: min(1020px, 100%);
    min-height: min(590px, calc(100svh - 150px));
    border-radius: 26px;
}
.vf-exam-access-login .vf-login-showcase { padding: 42px 40px 38px; }
.vf-exam-access-login .vf-login-company-logo { top: 42px; left: 40px; width: 190px; }
.vf-exam-access-login .vf-login-product-name { margin-bottom: 8px; font-size: clamp(27px, 2.5vw, 34px); }
.vf-exam-access-login .vf-login-tagline { margin-bottom: 20px; font-size: 13px; line-height: 1.55; }
.vf-exam-access-login .vf-login-benefits { gap: 8px; }
.vf-exam-access-login .vf-login-benefit { min-height: 48px; padding: 8px 14px; border-radius: 13px; }
.vf-exam-access-login .vf-login-benefit > span { flex-basis: 31px; height: 31px; border-radius: 8px; font-size: 12px; }
.vf-exam-access-login .vf-login-benefit strong { font-size: 11px; }
.vf-exam-access-login .vf-login-panel { padding: 26px 36px; }
.vf-exam-access-login .vf-login-panel-inner { width: min(100%, 460px); }
.vf-exam-access-login .vf-login-system-logo { width: 160px; margin-bottom: 14px; }
.vf-exam-access-login .vf-login-panel h1 { margin-bottom: 7px; font-size: clamp(25px, 2.25vw, 31px); }
.vf-exam-access-eyebrow { display: block; margin-bottom: 8px; color: var(--login-red); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.vf-exam-access-login .vf-login-description { margin-bottom: 14px; font-size: 12px; }
.vf-exam-access-login .vf-auth-steps { margin-bottom: 15px; }
.vf-exam-access-login .vf-auth-step-number { flex-basis: 21px; height: 21px; }
.vf-exam-access-login .vf-auth-exam-summary { margin-bottom: 13px; padding: 13px 14px; }
.vf-exam-access-login .vf-auth-exam-summary-top { margin-bottom: 8px; }
.vf-exam-access-login .vf-auth-exam-summary h2 { margin-bottom: 8px; font-size: 13px; }
.vf-exam-access-login .vf-login-form { gap: 12px; }
.vf-exam-access-login .vf-login-form .vf-auth-field > label { margin-bottom: 6px; font-size: 10px; }
.vf-exam-access-login .vf-login-form .vf-auth-input { min-height: 47px; border-radius: 11px; }
.vf-exam-access-login .vf-login-form .vf-auth-submit { min-height: 47px; border-radius: 11px; font-size: 11px !important; }
.vf-exam-access-login .vf-auth-field-hint { margin-top: 6px; font-size: 9px; line-height: 1.55; }
.vf-exam-access-login .vf-auth-declaration { padding: 9px 11px; }
.vf-exam-access-login .vf-auth-declaration .vf-auth-checkbox { font-size: 9px; line-height: 1.65; }
.vf-exam-access-login .vf-auth-back { min-height: 34px; margin-top: 7px; }
.vf-exam-access-login .vf-auth-help { margin-top: 12px; }
.vf-exam-access-login .vf-login-exam-prompt { margin: 12px 0 8px; }
.vf-exam-access-login .vf-login-exam-link { min-height: 49px; padding: 7px 11px; border-radius: 11px; }
.vf-exam-access-login .vf-login-exam-icon { flex-basis: 33px; height: 33px; }
@keyframes vfLoginCardEnter {
    from { opacity: 0; transform: translateY(24px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vfLoginContentEnter {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes vfLoginPanelEnter {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes vfLoginFooterEnter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1100px) {
    .vf-login-card { min-height: 640px; }
    .vf-login-showcase { padding: 52px 42px 48px; }
    .vf-login-company-logo { top: 52px; left: 42px; width: 225px; }
    .vf-login-panel { padding: 42px; }
}
@media (max-width: 820px) {
    .vf-login-experience { overflow: visible; padding: 18px 14px; }
    .vf-login-card { grid-template-columns: 1fr; width: min(590px, 100%); min-height: 0; border-radius: 23px; }
    .vf-login-showcase { min-height: 420px; padding: 32px; background-position: center 40%; }
    .vf-login-company-logo { top: 30px; left: 30px; width: 205px; }
    .vf-login-showcase-content { margin-top: 115px; }
    .vf-login-product-name { font-size: 32px; }
    .vf-login-tagline { margin-bottom: 22px; font-size: 13px; }
    .vf-login-benefits { gap: 9px; }
    .vf-login-benefit { min-height: 53px; border-radius: 13px; }
    .vf-login-panel { padding: 43px 34px; }
    .vf-login-footer { border-radius: 18px; gap: 9px 16px; text-align: center; }
    .vf-exam-access-login .vf-login-card { grid-template-columns: 1fr; width: min(560px, 100%); min-height: 0; }
    .vf-exam-access-login .vf-login-showcase { min-height: 350px; padding: 28px; }
    .vf-exam-access-login .vf-login-company-logo { top: 27px; left: 27px; width: 180px; }
    .vf-exam-access-login .vf-login-showcase-content { margin-top: 92px; }
    .vf-exam-access-login .vf-login-panel { padding: 30px 27px; }
}
@media (max-width: 480px) {
    .vf-login-showcase { min-height: 390px; padding: 24px; }
    .vf-login-company-logo { top: 23px; left: 23px; width: 185px; }
    .vf-login-showcase-content { margin-top: 100px; }
    .vf-login-benefit { padding: 9px 12px; }
    .vf-login-benefit strong { font-size: 11px; }
    .vf-login-panel { padding: 35px 22px; }
    .vf-login-system-logo { width: 175px; margin-bottom: 24px; }
    .vf-login-description { margin-bottom: 28px; }
    .vf-login-form .vf-auth-input { font-size: 16px !important; }
    .vf-login-footer-dot { display: none; }
    .vf-exam-access-login .vf-login-showcase { min-height: 325px; padding: 22px; }
    .vf-exam-access-login .vf-login-company-logo { top: 21px; left: 21px; width: 165px; }
    .vf-exam-access-login .vf-login-showcase-content { margin-top: 82px; }
    .vf-exam-access-login .vf-login-panel { padding: 27px 19px; }
}
@media (prefers-reduced-motion: reduce) { .vf-login-experience *, .vf-login-experience *::before, .vf-login-experience *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }