.ssc-checkout,
.ssc-checkout *,
.ssc-forgot-page,
.ssc-forgot-page * {
    box-sizing: border-box;
}

.ssc-checkout,
.ssc-forgot-page {
    --ssc-bg: #effaff;
    --ssc-ink: #102b3a;
    --ssc-muted: #6b7787;
    --ssc-blue: #0798cf;
    --ssc-orange: #ff8018;
    --ssc-green: #10b981;
    direction: rtl;
    min-height: 100vh;
    padding: 54px 24px 70px;
    background: var(--ssc-bg);
    color: var(--ssc-ink);
    font-family: "Cairo", Arial, sans-serif;
}

.ssc-steps {
    display: grid;
    grid-template-columns: repeat(5, 98px);
    align-items: start;
    justify-content: center;
    column-gap: 95px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 148px !important;
    padding: 0 !important;
    padding-inline: 0 !important;
    list-style: none;
    overflow: visible;
}

.ssc-steps li {
    position: relative;
    display: grid;
    place-items: center;
    width: 98px;
    min-width: 98px;
    color: var(--ssc-ink);
}

.ssc-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 21px;
    left: -95px;
    width: 100px;
    height: 4px;
    border-radius: 99px;
    background: #dce8ee;
    box-shadow: inset 0 1px 2px rgba(16, 43, 58, .14), 0 1px 0 rgba(255, 255, 255, .95);
}

.ssc-steps li.is-active:not(:last-child)::after {
    background: linear-gradient(90deg, #dce8ee 0 50%, var(--ssc-orange) 50% 100%);
    box-shadow: inset 0 1px 2px rgba(16, 43, 58, .08);
}

.ssc-steps li.is-complete:not(:last-child)::after {
    background: var(--ssc-orange);
    box-shadow: 0 3px 8px rgba(255, 128, 24, .20);
}

.ssc-steps span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--ssc-ink);
    font-weight: 900;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .10);
}

.ssc-steps li.is-active span {
    width: 48px;
    height: 48px;
    margin-top: -2px;
}

.ssc-steps strong {
    width: 100%;
    margin-top: 9px;
    color: var(--ssc-ink);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

.ssc-steps li.is-active span,
.ssc-steps li.is-complete span {
    background: var(--ssc-orange);
    color: #fff;
}

.ssc-steps li.is-active strong,
.ssc-steps li.is-complete strong {
    color: var(--ssc-orange);
}

.ssc-screen {
    display: none;
}

.ssc-screen.is-active {
    display: block;
}

.ssc-heading {
    max-width: 780px;
    margin: 0 auto 34px;
    text-align: center;
}

.ssc-heading span {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 7px 16px;
    border-radius: 999px;
    background: #c8eefc;
    color: var(--ssc-ink);
    font-size: 13px;
    font-weight: 800;
}

.ssc-heading h2 {
    margin: 0 0 8px;
    color: var(--ssc-ink);
    font-size: 34px;
    line-height: 1.25;
    font-weight: 900;
}

.ssc-heading p {
    margin: 0;
    color: var(--ssc-muted);
    font-size: 16px;
    line-height: 1.7;
}

.ssc-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 38px;
    max-width: 1040px;
    margin: 0 auto;
}

.ssc-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 512px;
    padding: 30px 38px 26px;
    border: 1px solid #dfe8ef;
    border-radius: 20px;
    background: #fff;
    text-align: right;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
}

.ssc-plan-card.is-featured {
    border-color: var(--ssc-blue);
    background: var(--ssc-blue);
    color: #fff;
    transform: translateY(-8px);
}

.ssc-plan-card.is-featured h3,
.ssc-plan-card.is-featured .ssc-price,
.ssc-plan-card.is-featured .ssc-price strong {
    color: #fff !important;
}

.ssc-plan-badge {
    position: absolute;
    top: -18px;
    right: 50%;
    padding: 7px 18px;
    border-radius: 999px;
    background: #ffd814;
    color: #111827;
    font-size: 12px;
    font-weight: 900;
    transform: translateX(50%);
}

.ssc-plan-card h3 {
    margin: 0 0 24px;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 900;
}

.ssc-price strong {
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
}

.ssc-plan-card small {
    color: inherit;
    opacity: .85;
}

.ssc-plan-card p {
    margin: 28px 0 12px;
    font-weight: 800;
}

.ssc-plan-card ul {
    display: grid;
    gap: 13px;
    align-content: start;
    min-height: 190px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ssc-plan-card li {
    position: relative;
    padding-right: 28px;
    line-height: 1.55;
}

.ssc-plan-card li::before {
    content: "✓";
    position: absolute;
    top: 1px;
    right: 0;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ssc-green);
    color: #fff;
    font-size: 12px;
}

.ssc-plan-card.is-featured li::before {
    background: #ffe21a;
    color: var(--ssc-blue);
}

.ssc-plan-card button,
.ssc-plan-link,
.ssc-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 34px;
    border: 0;
    border-radius: 10px;
    background: var(--ssc-orange);
    color: #fff !important;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 22px rgba(255, 128, 24, .28);
    text-decoration: none !important;
}

.ssc-plan-card button,
.ssc-plan-link {
    width: 100%;
    margin-top: auto;
}

.ssc-plan-card.is-featured button,
.ssc-plan-card.is-featured .ssc-plan-link {
    background: #fff;
    color: var(--ssc-blue) !important;
    box-shadow: none;
}

.ssc-plans-only {
    min-height: 0;
}

.ssc-checkout .ssc-primary:hover,
.ssc-checkout .ssc-primary:focus,
.ssc-checkout .ssc-primary:active,
.ssc-forgot-page .ssc-primary:hover,
.ssc-forgot-page .ssc-primary:focus,
.ssc-forgot-page .ssc-primary:active,
.ssc-checkout .ssc-plan-card button:hover,
.ssc-checkout .ssc-plan-link:hover,
.ssc-checkout .ssc-plan-link:focus,
.ssc-checkout .ssc-plan-link:active,
.ssc-checkout .ssc-plan-card button:focus,
.ssc-checkout .ssc-plan-card button:active {
    border-color: transparent !important;
    background: var(--ssc-orange) !important;
    color: #fff !important;
    box-shadow: 0 12px 22px rgba(255, 128, 24, .28) !important;
    filter: none !important;
    transform: none !important;
}

.ssc-checkout .ssc-plan-card.is-featured button:hover,
.ssc-checkout .ssc-plan-card.is-featured .ssc-plan-link:hover,
.ssc-checkout .ssc-plan-card.is-featured .ssc-plan-link:focus,
.ssc-checkout .ssc-plan-card.is-featured .ssc-plan-link:active,
.ssc-checkout .ssc-plan-card.is-featured button:focus,
.ssc-checkout .ssc-plan-card.is-featured button:active {
    background: #fff !important;
    color: var(--ssc-blue) !important;
    box-shadow: none !important;
}

.ssc-journey {
    width: min(1120px, 100%);
    margin: 92px auto 0;
    padding: 72px 44px 62px;
    border-radius: 42px;
    background: rgba(239, 250, 255, .52);
}

.ssc-journey-heading {
    margin-bottom: 42px;
    text-align: center;
}

.ssc-journey-heading h3 {
    margin: 0 0 8px;
    color: var(--ssc-ink);
    font-size: 30px;
    line-height: 1.25;
    font-weight: 900;
}

.ssc-journey-heading p {
    margin: 0;
    color: var(--ssc-muted);
    font-size: 15px;
    line-height: 1.7;
}

.ssc-journey-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ssc-journey-list li {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 14px;
    min-width: 0;
    text-align: center;
}

.ssc-journey-number {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ssc-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 5px 12px rgba(7, 152, 207, .20);
}

.ssc-journey-arrow {
    position: absolute;
    top: 12px;
    right: calc(100% - 12px);
    width: 76px;
    height: 4px;
    border-radius: 99px;
    background: #ffd91f;
}

.ssc-journey-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1px;
    width: 9px;
    height: 9px;
    border-left: 3px solid #ffd91f;
    border-bottom: 3px solid #ffd91f;
    transform: translateY(-50%) rotate(45deg);
}

.ssc-journey-list li:first-child .ssc-journey-arrow {
    display: block;
}

.ssc-journey-list li:last-child .ssc-journey-arrow {
    display: none;
}

.ssc-journey-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
    box-shadow: 0 15px 24px rgba(15, 23, 42, .08);
}

.ssc-journey-icon::after {
    content: "";
    position: absolute;
    inset: -2px -7px 2px 7px;
    z-index: -1;
    border: 2px solid var(--ssc-orange);
    border-radius: 50%;
    background: transparent;
}

.ssc-journey-list li.is-orange .ssc-journey-icon {
    background: var(--ssc-orange);
}

.ssc-journey-list li.is-blue .ssc-journey-icon {
    background: var(--ssc-blue);
}

.ssc-journey-list strong {
    color: var(--ssc-ink);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 900;
}

.ssc-form-card,
.ssc-auth-card,
.ssc-payment-card,
.ssc-summary,
.ssc-login-data {
    width: min(640px, 100%);
    margin: 0 auto;
    padding: 34px 36px;
    border: 1px solid #e1e8ee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 32px rgba(15, 23, 42, .15);
}

.ssc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.ssc-field {
    position: relative;
    margin: 0;
}

.ssc-field.wide {
    grid-column: 1 / -1;
}

.ssc-field label,
.ssc-upload label {
    display: block;
    margin-bottom: 8px;
    color: #344054;
    font-weight: 800;
    text-align: right;
}

.ssc-field input,
.ssc-upload input {
    width: 100%;
    min-height: 52px;
    padding: 0 48px 0 18px;
    border: 1px solid #e7ebef;
    border-radius: 14px;
    background: #f8fafc;
    color: var(--ssc-ink);
    font: inherit;
}

.ssc-field.has-error input {
    border-color: #f97316;
    background: #fff7ed;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .12);
}

.ssc-field-error {
    display: block;
    margin-top: 7px;
    color: #b42318;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 800;
    text-align: right;
}

.ssc-field input[type="password"],
.ssc-field input[type="text"][name*="password"] {
    padding-left: 50px;
}

.ssc-field-icon {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: var(--ssc-blue);
    pointer-events: none;
}

.ssc-field-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ssc-password-toggle {
    position: absolute;
    left: 14px;
    bottom: 13px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #98a2b3;
    cursor: pointer;
}

.ssc-password-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ssc-password-toggle.is-visible,
.ssc-password-toggle:hover,
.ssc-password-toggle:focus,
.ssc-password-toggle:active {
    background: transparent !important;
    color: var(--ssc-blue) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.ssc-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
}

.ssc-link {
    border: 0;
    background: transparent;
    color: var(--ssc-muted);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.ssc-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 22px;
}

.ssc-tabs button {
    min-height: 44px;
    border: 1px solid #dfe8ef;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.ssc-tabs button.is-active {
    border-color: var(--ssc-orange);
    background: var(--ssc-orange);
    color: #fff;
}

.ssc-checkout .ssc-tabs button:hover,
.ssc-checkout .ssc-tabs button:focus,
.ssc-checkout .ssc-tabs button:active {
    border-color: #dfe8ef !important;
    background: #fff !important;
    color: var(--ssc-ink) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.ssc-checkout .ssc-tabs button.is-active:hover,
.ssc-checkout .ssc-tabs button.is-active:focus,
.ssc-checkout .ssc-tabs button.is-active:active {
    border-color: var(--ssc-orange) !important;
    background: var(--ssc-orange) !important;
    color: #fff !important;
}

.ssc-auth-card form {
    display: grid;
    gap: 16px;
}

.ssc-auth-card form[hidden] {
    display: none !important;
}

.ssc-auth-switch {
    justify-self: center;
    min-height: 0;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--ssc-blue);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.ssc-auth-switch:hover,
.ssc-auth-switch:focus,
.ssc-auth-switch:active {
    background: transparent !important;
    color: var(--ssc-blue) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.ssc-auth-card a {
    color: var(--ssc-blue);
    font-weight: 800;
    text-decoration: none;
}

.is-wide {
    width: 100%;
}

.ssc-or {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    margin: 24px 0 16px;
    color: #98a2b3;
}

.ssc-or span {
    height: 1px;
    background: #e1e8ee;
}

.ssc-google {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto;
    border: 1px solid #dfe8ef;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.ssc-google-icon {
    width: 28px;
    height: 28px;
}

.ssc-checkout .ssc-google:hover,
.ssc-checkout .ssc-google:focus,
.ssc-checkout .ssc-google:active {
    border-color: #dfe8ef !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
    filter: none !important;
    transform: none !important;
}

.ssc-payment-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 560px);
    gap: 34px;
    justify-content: center;
    align-items: start;
}

.ssc-summary {
    width: 100%;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

.ssc-summary-plan {
    padding: 26px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0798cf, #0878ad);
    color: #fff;
}

.ssc-summary-plan small {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .78);
    font-weight: 700;
}

.ssc-summary-plan strong {
    display: block;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 900;
}

.ssc-summary-plan b {
    display: block;
    margin-top: 8px;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 900;
}

.ssc-summary-features {
    display: grid;
    gap: 11px;
    margin: 22px 0;
    padding: 0;
    list-style: none;
}

.ssc-summary-features li {
    position: relative;
    padding-right: 26px;
    color: #4b5563;
    font-weight: 700;
    line-height: 1.55;
}

.ssc-summary-features li::before {
    content: "✓";
    position: absolute;
    top: 1px;
    right: 0;
    color: #22c55e;
    font-weight: 900;
}

.ssc-summary-divider {
    height: 1px;
    margin: 8px 0 14px;
    background: #edf2f7;
}

.ssc-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid #edf2f7;
}

.ssc-summary-row:last-child {
    border-bottom: 0;
}

.ssc-summary-total {
    color: var(--ssc-orange);
    font-size: 20px;
    font-weight: 900;
}

.ssc-payment-card {
    width: 100%;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

.ssc-pay-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.ssc-pay-methods label {
    display: block;
    min-height: 96px;
    padding: 22px;
    border: 1px solid #dfe8ef;
    border-radius: 14px;
    background: #fff;
    font-weight: 900;
}

.ssc-transfer-box {
    margin: 18px 0;
    padding: 18px;
    border: 1px dashed #9fdff5;
    border-radius: 14px;
    background: #effaff;
}

.ssc-safe {
    display: block;
    margin-top: 18px;
    color: #7d8897;
    text-align: left;
}

.ssc-success {
    width: min(620px, 100%);
    margin: 0 auto;
}

.ssc-success-hero {
    position: relative;
    padding: 58px 36px 54px;
    border-radius: 24px;
    background: linear-gradient(135deg, #089782, #35c6bb);
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.ssc-success-hero::before,
.ssc-success-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
}

.ssc-success-hero::before {
    width: 160px;
    height: 160px;
    top: -46px;
    left: -32px;
}

.ssc-success-hero::after {
    width: 170px;
    height: 170px;
    right: -78px;
    bottom: -74px;
    background: rgba(2, 107, 93, .32);
}

.ssc-success-hero > span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: 32px;
    font-weight: 900;
}

.ssc-success-hero small,
.ssc-success-hero h2,
.ssc-success-hero p {
    position: relative;
    z-index: 1;
}

.ssc-success-hero small {
    display: inline-flex;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-weight: 900;
}

.ssc-success-hero h2 {
    margin: 14px 0 8px;
    font-size: 32px;
}

.ssc-login-data {
    width: 100%;
    margin-top: 28px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

.ssc-login-data-row {
    display: grid;
    grid-template-columns: 42px 48px 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    background: #f8fafc;
}

.ssc-login-data h3 {
    margin: 0 0 4px;
    font-size: 25px;
    font-weight: 900;
}

.ssc-login-data > p {
    margin: 0 0 22px;
    color: var(--ssc-muted);
    font-weight: 700;
}

.ssc-login-data-row + .ssc-login-data-row {
    margin-top: 12px;
}

.ssc-login-data-row small {
    display: block;
    margin-bottom: 3px;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 800;
}

.ssc-login-data-row strong {
    display: block;
    color: var(--ssc-ink);
    font-size: 14px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.ssc-copy,
.ssc-login-row-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.ssc-copy {
    border: 1px solid #e1e8ee;
    background: #fff;
    color: #667085;
    cursor: pointer;
}

.ssc-copy.is-copied {
    color: var(--ssc-green);
}

.ssc-copy svg,
.ssc-login-row-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ssc-login-row-icon {
    background: #e7f7ff;
    color: var(--ssc-blue);
}

.ssc-success .ssc-primary {
    margin-top: 26px;
}

.ssc-home-link {
    display: block;
    margin-top: 14px;
    color: var(--ssc-muted);
    text-align: center;
    font-weight: 800;
    text-decoration: none;
}

.ssc-alert {
    width: min(640px, 100%);
    margin: 0 auto 18px;
    padding: 14px 18px;
    border-radius: 12px;
    background: #fff2e8;
    color: #9a3412;
    text-align: center;
    font-weight: 800;
}

.ssc-alert.inline {
    margin-top: 16px;
}

.ssc-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 43, 58, .45);
}

.ssc-modal[hidden] {
    display: none;
}

.ssc-modal-box {
    position: relative;
    width: min(520px, 100%);
}

.ssc-modal-box > button {
    position: absolute;
    top: -16px;
    left: -16px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    font-size: 26px;
    cursor: pointer;
}

.ssc-forgot-page {
    display: grid;
    place-items: center;
}

@media (max-width: 900px) {
    .ssc-steps {
        grid-template-columns: repeat(5, 88px);
        column-gap: 34px;
        width: 100%;
        margin-bottom: 48px;
        justify-content: flex-start;
        padding: 0 0 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .ssc-steps li {
        width: 88px;
        min-width: 88px;
    }

    .ssc-steps li:not(:last-child)::after {
        left: -48px;
        width: 34px;
    }

    .ssc-plans,
    .ssc-payment-layout {
        grid-template-columns: 1fr;
    }

    .ssc-plan-card.is-featured {
        transform: none;
    }

    .ssc-plan-card {
        min-height: auto;
    }

    .ssc-journey {
        margin-top: 64px;
        padding: 48px 24px;
        border-radius: 28px;
    }

    .ssc-journey-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 22px;
    }

    .ssc-journey-list li:last-child {
        grid-column: 1 / -1;
    }

    .ssc-journey-arrow {
        display: none;
    }
}

@media (max-width: 640px) {
    .ssc-checkout,
    .ssc-forgot-page {
        padding: 28px 14px 48px;
    }

    .ssc-heading h2 {
        font-size: 28px;
    }

    .ssc-steps {
        grid-template-columns: repeat(5, 78px);
        column-gap: 18px;
        margin-bottom: 42px;
        padding: 0 0 8px;
    }

    .ssc-steps li {
        width: 78px;
        min-width: 78px;
    }

    .ssc-steps li:not(:last-child)::after {
        top: 18px;
        left: -31px;
        width: 20px;
        height: 3px;
    }

    .ssc-steps span {
        width: 38px;
        height: 38px;
    }

    .ssc-steps strong {
        font-size: 11px;
    }

    .ssc-journey {
        margin-top: 48px;
        padding: 38px 16px;
        border-radius: 22px;
    }

    .ssc-journey-heading {
        margin-bottom: 30px;
    }

    .ssc-journey-heading h3 {
        font-size: 25px;
    }

    .ssc-journey-list {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ssc-journey-list li:last-child {
        grid-column: auto;
    }

    .ssc-journey-icon {
        width: 104px;
        height: 104px;
        font-size: 28px;
    }

    .ssc-form-card,
    .ssc-auth-card,
    .ssc-payment-card,
    .ssc-summary,
    .ssc-login-data {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .ssc-form-grid,
    .ssc-pay-methods {
        grid-template-columns: 1fr;
    }

    .ssc-actions {
        flex-direction: column;
        align-items: stretch;
    }
}