.do56-homepage-header,
.registration-experience-page { font-family: var(--font-sans); }

.registration-experience-page {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px) 56px;
}

.registration-experience,
.onboarding-editor,
.status-experience {
    --registration-blue: var(--do56-info-blue);
    --registration-blue-hover: color-mix(in srgb, var(--registration-blue), black 15%);
    --registration-blue-soft: color-mix(in srgb, var(--registration-blue) 5%, white);
    --registration-control-radius: 8px;
}

.registration-experience {
    display: grid;
    grid-template-columns: minmax(0, 31fr) minmax(0, 69fr);
    overflow: hidden;
    min-height: 760px;
    border: 1px solid #d9e1ea;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 46px rgb(15 38 61 / 10%);
}

.registration-experience__rail {
    min-width: 0;
    padding: clamp(28px, 3.4vw, 48px);
    color: #fff;
    background: var(--registration-blue);
}

.registration-experience__rail .do56-shared-wordmark {
    display: inline-grid;
    gap: 6px;
    margin-bottom: 32px;
}

.registration-experience__rail .do56-shared-wordmark strong { font-size: 1.875rem; }
.registration-experience__rail .do56-shared-wordmark span { font-size: 1rem; }

.registration-experience__role {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .08em;
}

.registration-experience__rail h1,
.registration-experience__rail .registration-experience__rail-title {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    font-weight: 800;
    line-height: 1.25;
}

.registration-experience__rail > p:not([class]) { margin: 0; line-height: 1.75; }

.registration-experience__steps {
    display: grid;
    gap: 22px;
    margin: 40px 0;
    padding: 0;
    list-style: none;
}

.registration-experience__steps li {
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: 12px;
    color: #fff;
}

.registration-experience__steps span {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.registration-experience__steps strong { color: inherit; font-size: 15px; }
.registration-experience__steps small { margin-top: 4px; color: inherit; }
.registration-experience__steps .is-current { color: #fff; }
.registration-experience__steps .is-current span { border-color: #fff; background: #fff; color: var(--registration-blue); }
.registration-experience__rail .registration-experience__back { color: #fff; font-weight: 700; }

.registration-experience__content { min-width: 0; padding: clamp(24px, 3.4vw, 48px); }
.registration-experience__heading { margin-bottom: 24px; }
.registration-experience__heading h2 { margin: 5px 0 8px; font-size: 27px; color: #10263d; }
.registration-experience__heading p { margin: 0; color: #5b6c7f; }

.registration-experience__form { display: grid; gap: 24px; }
.registration-experience__form fieldset { min-width: 0; margin: 0; padding: 22px; border: 1px solid #dce4ec; border-radius: 13px; }
.registration-experience__form legend { padding: 0 8px; color: #14344f; font-size: 16px; font-weight: 850; }

.registration-row { display: grid; gap: 16px; align-items: start; }
.registration-row + .registration-row { margin-top: 16px; }
.registration-row--35-65 { grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); }
.registration-row--40-60 { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
.registration-row--50-50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.registration-field { min-width: 0; }

.registration-field label {
    display: block;
    margin-bottom: 7px;
    color: #24384c;
    font-size: 13px;
    font-weight: 750;
}

.registration-field label > span:last-child { color: #a23a32; font-size: 11px; }
.registration-field input,
.registration-field select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid #b9c5d1;
    border-radius: var(--registration-control-radius);
    background: #fff;
    padding: 9px 11px;
    color: #14283d;
}

.registration-experience :where(a, button, input, select):focus-visible,
.button.registration-primary:focus-visible {
    outline: 2px solid var(--registration-blue);
    outline-offset: 2px;
}
.registration-experience__rail a:focus-visible { outline-color: #fff; }
.registration-experience input:not([aria-invalid="true"]):focus,
.registration-experience select:not([aria-invalid="true"]):focus { border-color: var(--registration-blue); }
.registration-experience__content a:not(.registration-primary) { color: var(--registration-blue); }

.button.registration-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--registration-control-radius);
    padding: 10px 16px;
    background: var(--registration-blue);
    color: #fff;
    font-size: .875rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}
.button.registration-primary:hover:not(:disabled) { background: var(--registration-blue-hover); }
.button.registration-primary:disabled { cursor: not-allowed; opacity: .55; }

.registration-country-segments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
}

.registration-country-segments > div > label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    margin: 0;
    border: 1px solid #b9c5d1;
    border-radius: 8px;
    padding: 6px;
    color: #294157;
    text-align: center;
    cursor: pointer;
}

.registration-country-segments input { width: auto; min-height: 0; margin-right: 5px; accent-color: var(--registration-blue); }
.registration-phone,
.registration-inline-action,
.registration-password { display: flex; align-items: stretch; }
.registration-phone > span { display: grid; place-items: center; min-width: 58px; border: 1px solid #b9c5d1; border-right: 0; border-radius: 8px 0 0 8px; background: #f2f6f9; color: #3d546a; font-weight: 800; }
.registration-phone input { border-radius: 0 8px 8px 0; }
.registration-inline-action input,
.registration-password input { border-radius: 8px 0 0 8px; }
.registration-inline-action .registration-primary {
    flex: 0 0 auto;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}
.registration-password button { flex: 0 0 auto; border: 0; border-radius: 0 8px 8px 0; padding: 0 14px; background: var(--registration-blue-soft); color: var(--registration-blue); font-weight: 750; cursor: pointer; }
.registration-field--passwords { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.registration-hint { margin: 6px 0 0; color: #6b7b8e; font-size: 12px; }
.form-alert { margin: 6px 0 0; color: #a1362f; font-size: 12px; font-weight: 700; }
.registration-experience__submit { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.registration-experience__submit p { margin: 0; color: #617286; font-size: 13px; }
.registration-experience__submit .button { min-width: 180px; }

@media (max-width: 1050px) {
    .registration-field--passwords { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .registration-experience-page { padding: 20px 14px 32px; }
    .registration-experience { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 14px; }
    .registration-experience__rail { padding: 24px 20px; }
    .registration-experience__rail .do56-shared-wordmark { margin-bottom: 22px; }
    .registration-experience__steps { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 30px 0 12px; }
    .registration-experience__steps li { grid-template-columns: 1fr; gap: 5px; }
    .registration-experience__steps span { grid-row: auto; width: 32px; height: 32px; }
    .registration-experience__steps small { display: none; }
    .registration-experience__content { padding: 28px 18px 36px; }
    .registration-experience__form fieldset { padding: 18px 14px; }
    .registration-row--35-65,
    .registration-row--40-60,
    .registration-row--50-50 { grid-template-columns: 1fr; }
    .registration-field--passwords { grid-template-columns: 1fr; }
    .registration-experience__submit { align-items: stretch; flex-direction: column; }
    .registration-experience__submit .button { width: 100%; }
}

.status-experience { max-width: 1080px; margin: 0 auto; }
.status-experience__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.status-experience__heading h1 { margin: 4px 0 8px; }
.status-experience__heading p { margin: 0; color: #617286; }
.status-experience__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0; padding: 0; list-style: none; }
.status-experience__steps li { display: flex; align-items: center; gap: 10px; border-top: 3px solid #ccd6df; padding: 12px 4px; color: #718195; }
.status-experience__steps span { font-size: 12px; font-weight: 900; }
.status-experience__steps .is-complete { border-color: #3e9d82; color: #286b5a; }
.status-experience__steps .is-current { border-color: #168f98; color: #0f5960; }
.status-experience__company { display: grid; grid-template-columns: 2fr 1fr 1.4fr 2fr; gap: 1px; overflow: hidden; border: 1px solid #dbe3eb; border-radius: 10px; background: #dbe3eb; }
.status-experience__company div { min-width: 0; padding: 13px; background: #f8fafc; }
.status-experience__company dt { color: #6b7b8e; font-size: 12px; }
.status-experience__company dd { overflow-wrap: anywhere; margin: 4px 0 0; color: #1a3045; font-weight: 750; }
.status-experience__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 24px 0; }
.status-experience__card { border: 1px solid #dce4ec; border-left: 5px solid #8c9daf; border-radius: 11px; padding: 20px; }
.status-experience__card--success { border-left-color: #2f9b77; }
.status-experience__card--pending { border-left-color: #cf8b28; }
.status-experience__card--blocked { border-left-color: #b44b43; }
.status-experience__card > p:first-child { margin: 0; color: #6b7b8e; font-size: 12px; font-weight: 800; }
.status-experience__card h2 { margin: 7px 0 10px; font-size: 21px; }
.status-experience__card small { display: block; color: #617286; line-height: 1.6; }
.status-experience__progress { border-radius: 10px; padding: 16px 18px; background: #f1f6f8; }
.status-experience__progress h2 { margin: 0 0 6px; font-size: 17px; }
.status-experience__progress p { margin: 0; }
.status-experience__action { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.status-experience__action p { margin: 0; color: #617286; }
.identity-snapshot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #dce4ec; border-radius: 10px; background: #dce4ec; }
.identity-snapshot-grid div { padding: 12px 14px; background: #f8fafc; }
.identity-snapshot-grid dt { color: #697b8e; font-size: 12px; }
.identity-snapshot-grid dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #1c344a; font-weight: 750; }
.compact-segment-control .compact-segments { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.compact-segment-control .compact-segments > div { flex: 0 1 auto; min-width: 0; }
.compact-segment-control .compact-segments > div > label { display: flex; align-items: center; min-height: 38px; margin: 0; border: 1px solid #bdc9d4; border-radius: 8px; padding: 7px 11px; color: #294157; line-height: 1.15; white-space: nowrap; cursor: pointer; }
.onboarding-editor .compact-segment-control input[type="radio"] { flex: 0 0 16px; width: 16px; min-width: 16px; max-width: 16px; height: 16px; min-height: 16px; max-height: 16px; margin: 0 6px 0 0; padding: 0; accent-color: #087b83; }
.evidence-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.evidence-upload-card { border: 1px solid #dce4ec; border-radius: 11px; padding: 16px; background: #fff; }
.evidence-upload-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.evidence-upload-card h3 { margin: 0; font-size: 16px; }
.evidence-upload-card form { display: grid; gap: 10px; margin-top: 12px; }
.evidence-upload-card input[type="file"] { display: block; width: 100%; margin-top: 6px; }

@media (max-width: 720px) {
    .status-experience__heading { flex-direction: column; }
    .status-experience__company,
    .status-experience__cards,
    .identity-snapshot-grid,
    .evidence-card-grid { grid-template-columns: 1fr; }
    .status-experience__action { align-items: stretch; flex-direction: column; }
}

.registration-country-segments > div { min-width: 0; }
.registration-country-segments > div > label {
    position: relative;
    min-height: 58px;
    height: 100%;
    line-height: 1.35;
    overflow-wrap: normal;
}
.registration-country-segments input { position: absolute; opacity: 0; }
.registration-country-segments label:has(input:checked) { border-color: var(--registration-blue); background: var(--registration-blue-soft); color: var(--registration-blue); }
.registration-country-segments label:has(input:focus-visible) { outline: 2px solid var(--registration-blue); outline-offset: 1px; }

.registration-area-picker { position: relative; }
.registration-area-picker [role="listbox"] {
    position: absolute;
    z-index: 2;
    inset: calc(100% + 3px) 0 auto;
    max-height: 15rem;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    border: 1px solid #b9c5d1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgb(15 38 61 / 16%);
    list-style: none;
}
.registration-area-picker [role="listbox"] li { padding: 8px 10px; border-radius: 5px; }
.registration-area-picker [role="option"] { cursor: pointer; }
.registration-area-picker [role="option"]:is(:hover, .is-active, [aria-selected="true"]) { background: var(--registration-blue-soft); color: var(--registration-blue); }

.registration-experience--entry { grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); min-height: 440px; }
.registration-experience--entry .registration-experience__rail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.registration-entry-choices { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.registration-entry-choices article {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(16px, 2.2vw, 28px);
    border: 1px solid #dce4ec;
    border-radius: 12px;
    background: #f8fafc;
}
.registration-entry-choices h3 { margin: 0; color: #10263d; font-size: 1.125rem; }
.registration-entry-choices ul { margin: 12px 0 20px; padding-inline-start: 1.15rem; color: #405365; line-height: 1.7; }
.registration-entry-choices li + li { margin-top: 4px; }
.registration-entry-choices li::marker { color: var(--registration-blue); }
.registration-entry-choices .registration-primary { margin-top: auto; align-self: flex-start; }
.registration-entry-signin { margin: 24px 0 0; }

.registration-experience--login .auth-card.s08-login {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: clamp(24px, 3.4vw, 48px);
    box-shadow: none;
}
.registration-experience--login .s08-login > * { max-width: 29rem; margin-inline: auto; }
.registration-experience--login .s08-login form .registration-primary { width: 100%; }
.registration-experience--login .s08-login-modes button[aria-selected="true"] {
    border-bottom-color: var(--registration-blue);
    color: var(--registration-blue);
}
.registration-experience--login .s08-login .button.secondary { color: var(--registration-blue); line-height: 1.35; }
.registration-experience--login .s08-login a:not(.button) { color: var(--registration-blue); }
.registration-experience--login .alert { background: #fff1f0; border-color: #f4b9b5; color: #962d26; }

@media (max-width: 720px) {
    .registration-entry-choices,
    .registration-experience--entry { grid-template-columns: minmax(0, 1fr); }
    .registration-experience--entry { min-height: 0; }
    .registration-experience--login .auth-card.s08-login { padding: 24px 20px; }
}