@font-face {
    font-family: "Geist";
    src: url("../fonts/geist-regular.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Geist";
    src: url("../fonts/geist-medium.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 500 700;
}

@font-face {
    font-family: "Albert Sans";
    src: url("../fonts/albert-sans-regular.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 400 700;
}

body {
    min-height: 100vh;
    padding: 0;
    align-items: stretch;
    background: #08070a;
    color: #eeedee;
    font-family: "Geist", sans-serif;
}

.cancel-nav {
    width: calc(100% - 32px);
    max-width: 1240px;
    min-height: 68px;
    margin: 16px auto 0;
    padding: 10px 12px 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(12, 11, 14, 0.86);
}

.cancel-brand {
    display: inline-flex;
    align-items: center;
}

.cancel-brand img {
    width: 112px;
    height: auto;
    display: block;
}

.cancel-account-link {
    min-height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    color: #08070a;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.back-link {
    display: none;
}

.cancel-main {
    width: calc(100% - 32px);
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 0 80px;
}

.card#main-view {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(300px, 0.78fr) minmax(440px, 1.22fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    background: #0d0c0f;
}

.cancel-context,
.cancel-form-column {
    min-width: 0;
    padding: 38px;
}

.cancel-context {
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(13, 12, 15, 0.94) 0%, rgba(13, 12, 15, 0.68) 46%, rgba(13, 12, 15, 0.95) 100%),
        url("../images/Yes%20or%20no.png") center 66% / cover no-repeat;
}

.cancel-form-column {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.card#main-view .card-header {
    margin: 0;
    padding: 0 0 26px;
    border: 0;
}

.cancel-eyebrow {
    display: block;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.card#main-view .card-header h1 {
    max-width: 390px;
    margin: 0 0 14px;
    color: #fff;
    font-family: "Albert Sans", "Geist", sans-serif;
    font-size: clamp(40px, 4vw, 56px);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.card#main-view .card-header p {
    max-width: 340px;
    color: rgba(238, 237, 238, 0.48);
    font-size: 13px;
    line-height: 1.55;
}

.card#main-view .notice {
    min-height: 0;
    margin: 0 0 20px;
    padding: 0;
    align-self: start;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.notice-text,
.notice-text strong,
.notice-text a {
    font-family: "Geist", sans-serif;
    font-size: 12px;
}

.notice-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: rgba(238, 237, 238, 0.42);
}

.notice-text strong {
    color: rgba(238, 237, 238, 0.5);
    font-weight: 400;
}

.notice-text a {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 400;
    text-decoration: none;
}

.card#main-view .warning {
    margin: 0;
    padding: 18px;
    align-self: start;
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.warning-head {
    color: rgba(255, 255, 255, 0.78);
    font-family: "Geist", sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 8px;
}

.warning p,
.lose-item {
    color: rgba(238, 237, 238, 0.44);
    font-size: 12px;
}

.warning p {
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.55;
}

.warning p strong {
    color: rgba(255, 255, 255, 0.74) !important;
}

.source-gate {
    margin: 0;
    padding: 0 0 26px;
    border-left: 0;
}

.source-gate h2,
.divider-label {
    color: rgba(238, 237, 238, 0.42);
    font-family: "Geist", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.source-options {
    padding: 0;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.source-option {
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.025);
}

.source-option:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
}

.source-option.active {
    border-color: #fff;
    background: #fff;
    color: #08070a;
}

.source-option.active .source-option-title {
    color: #08070a;
}

.source-option-title {
    font-family: "Geist", sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: -0.02em;
}

.source-warning.visible {
    padding: 13px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.source-warning strong,
.source-warning a {
    margin: 0;
    color: rgba(238, 237, 238, 0.56);
    font-family: "Geist", sans-serif;
    font-size: 11px;
    font-weight: 400;
}

.source-warning a {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.8);
}

#cancel-form-shell {
    padding: 0;
    border-left: 0;
}

.divider-label {
    margin-bottom: 22px;
}

.field {
    margin-bottom: 18px;
}

.field-label {
    margin-bottom: 8px;
    color: rgba(238, 237, 238, 0.52);
    font-family: "Geist", sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.field-input {
    height: 50px;
    padding: 0 15px;
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    color: #fff;
    font-family: "Geist", sans-serif;
    font-size: 13px;
}

.field-input:focus {
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: none;
}

.field-hint,
.confirm-check span {
    color: rgba(238, 237, 238, 0.36);
    font-family: "Geist", sans-serif;
    font-size: 11px;
}

.confirm-check {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
}

.confirm-check span strong {
    color: rgba(255, 255, 255, 0.66);
}

.actions {
    margin-top: 24px;
    gap: 9px;
}

.btn-cancel,
.btn-back {
    min-height: 50px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-family: "Geist", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-transform: none;
}

.btn-cancel {
    background: #fff;
    color: #08070a;
}

.btn-cancel:hover {
    background: #ececec;
}

.btn-back {
    border-color: rgba(255, 255, 255, 0.09);
    color: rgba(238, 237, 238, 0.58);
}

.success-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 44px 46px 46px;
    text-align: left;
    border-color: rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    background: #0d0c0f;
}

.success-status {
    margin-bottom: 34px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.success-card .success-check {
    width: 26px;
    height: 26px;
    margin: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(169, 218, 184, 0.45);
    border-radius: 50%;
    background: rgba(116, 177, 136, 0.08);
    color: #a9dab8;
    font-family: "Geist", sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.success-card h2 {
    max-width: 580px;
    margin: 0 0 16px;
    color: #fff;
    font-family: "Albert Sans", "Geist", sans-serif;
    font-size: clamp(44px, 5vw, 62px);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: -0.065em;
}

.success-card .success-sub {
    max-width: 500px;
    margin: 0 0 32px;
    color: rgba(238, 237, 238, 0.48);
    font-family: "Geist", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
}

.success-access-card {
    margin-bottom: 20px;
    padding: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: transparent;
}

.success-access-card span {
    color: rgba(238, 237, 238, 0.42);
    font-size: 11px;
}

.success-access-card strong {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
}

.success-card .success-info {
    margin: 0 0 24px;
    padding: 4px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: transparent;
}

.success-card .success-info-row {
    min-height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.success-card .success-info-row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.success-card .si-label,
.success-card .si-value {
    font-family: "Geist", sans-serif;
    font-size: 12px;
}

.success-card .si-label {
    color: rgba(238, 237, 238, 0.4);
}

.success-card .si-value {
    max-width: 68%;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 400;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.success-card .success-note {
    max-width: 520px;
    margin: 0 0 28px;
    color: rgba(238, 237, 238, 0.36);
    font-family: "Geist", sans-serif;
    font-size: 11px;
    line-height: 1.55;
}

.success-back {
    min-height: 50px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    color: #08070a;
    font-family: "Geist", sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.success-back:hover {
    background: #ececec;
}

.cancel-toast {
    width: min(340px, calc(100vw - 32px));
    min-height: 78px;
    padding: 0;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 38px;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 16px;
    background: rgba(13, 12, 15, 0.54);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    transform: translateX(20px);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s ease;
}

.cancel-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.cancel-toast.hide {
    opacity: 0;
    transform: translateX(calc(100% + 42px));
    transition: opacity 0.22s ease, transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

.cancel-toast-icon,
.cancel-toast.error .cancel-toast-icon,
.cancel-toast.success .cancel-toast-icon {
    --toast-accent: #e9c86b;
    width: 62px;
    height: 100%;
    min-height: 78px;
    display: grid;
    place-items: center;
    border-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.022);
    color: var(--toast-accent);
}

.cancel-toast.error .cancel-toast-icon {
    --toast-accent: #efb08f;
    background: rgba(215, 121, 93, 0.045);
}

.cancel-toast.success .cancel-toast-icon {
    --toast-accent: #a8d9b8;
    background: rgba(115, 185, 138, 0.045);
}

.cancel-toast-icon span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--toast-accent) 72%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--toast-accent) 9%, transparent);
    color: var(--toast-accent);
    font-family: "Geist", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 18px color-mix(in srgb, var(--toast-accent) 18%, transparent);
}

.cancel-toast-text {
    min-width: 0;
    padding: 15px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cancel-toast-title {
    margin: 0 0 4px;
    color: rgba(255, 255, 255, 0.94);
    font-family: "Albert Sans", "Geist", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-transform: none;
}

.cancel-toast-message {
    color: rgba(255, 255, 255, 0.58);
    font-family: "Geist", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.cancel-toast-close {
    width: 30px;
    height: 30px;
    margin: auto 8px auto 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.36);
    font-family: "Geist", sans-serif;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.cancel-toast-close:hover,
.cancel-toast-close:focus-visible {
    outline: 0;
    background: rgba(255, 255, 255, 0.065);
    color: rgba(255, 255, 255, 0.86);
}

/* Three-step cancellation flow */
.card#main-view {
    grid-template-columns: minmax(300px, 0.82fr) minmax(480px, 1.18fr);
    min-height: 640px;
}

.cancel-visual-panel {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #111014;
}

.cancel-visual-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 8, 10, 0.015), rgba(8, 8, 10, 0.1));
}

.cancel-visual-panel img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 66%;
    filter: brightness(0.94) saturate(0.88) contrast(1.02);
}

.cancel-flow {
    min-width: 0;
    padding: 38px 40px 40px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.flow-progress {
    margin-bottom: 48px;
    display: grid;
    grid-template-columns: auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.progress-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(238, 237, 238, 0.3);
}

.progress-item b {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 500;
}

.progress-item em {
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.progress-item.active,
.progress-item.complete {
    color: rgba(255, 255, 255, 0.86);
}

.progress-item.active b {
    border-color: #fff;
    background: #fff;
    color: #08070a;
}

.progress-item.complete b {
    border-color: rgba(255, 255, 255, 0.7);
}

.progress-line {
    height: 1px;
    background: rgba(255, 255, 255, 0.09);
}

.cancel-step {
    display: none;
}

.cancel-step.active {
    min-height: 490px;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.step-heading {
    margin-bottom: 32px;
}

.step-heading .cancel-eyebrow {
    margin-bottom: 15px;
}

.step-heading h1 {
    max-width: 520px;
    margin: 0 0 14px;
    color: #fff;
    font-family: "Albert Sans", "Geist", sans-serif;
    font-size: clamp(38px, 4vw, 52px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.step-heading p {
    max-width: 450px;
    margin: 0;
    color: rgba(238, 237, 238, 0.48);
    font-size: 13px;
    line-height: 1.55;
}

.cancel-step .source-options {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cancel-step .source-option {
    min-height: 60px;
    padding: 0 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.018);
}

.cancel-step .source-option.active {
    border-color: #fff;
    background: #fff;
    color: #08070a;
}

.cancel-step .source-option-copy {
    display: none;
}

.cancel-step .source-option-title {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.025em;
}

.cancel-step .source-warning.visible {
    margin-top: 12px;
    padding: 14px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cancel-step .source-warning span,
.cancel-step .source-warning a {
    color: rgba(238, 237, 238, 0.5);
    font-size: 11px;
    font-weight: 400;
    text-decoration: none;
}

.cancel-step .source-warning a {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.82);
}

.step-actions {
    margin-top: auto;
    padding-top: 28px;
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 10px;
}

.step-actions.single-action {
    grid-template-columns: 1fr;
}

.flow-button,
.retention-button {
    min-height: 50px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: "Geist", sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.flow-button.primary,
.retention-button {
    background: #fff;
    color: #08070a;
}

.flow-button.secondary {
    border-color: rgba(255, 255, 255, 0.1);
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
}

.flow-button.destructive {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.86);
}

.flow-button:disabled {
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.28);
}

.cancel-step .field {
    margin-bottom: 17px;
}

.retention-card {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
}

.retention-label {
    display: block;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.retention-card h2 {
    margin: 0 0 8px;
    color: #fff;
    font-family: "Albert Sans", "Geist", sans-serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.04em;
}

.retention-card p {
    max-width: 430px;
    margin: 0 0 20px;
    color: rgba(238, 237, 238, 0.46);
    font-size: 12px;
    line-height: 1.55;
}

.retention-button {
    min-height: 44px;
    padding-inline: 20px;
}

.final-confirm {
    margin-top: 20px;
}

body.embedded-mode {
    display: block;
    padding: 18px;
    background: #08080a;
}

body.embedded-mode .cancel-nav,
body.embedded-mode dream-footer {
    display: none;
}

body.embedded-mode .cancel-main {
    width: 100%;
    margin: 0;
    padding: 0;
}

body.embedded-mode .card#main-view {
    display: block;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.embedded-mode .cancel-visual-panel {
    display: none;
}

body.embedded-mode .cancel-flow {
    padding: 16px 14px;
    border-left: 0;
}

body.embedded-mode .flow-progress {
    margin-bottom: 34px;
}

body.embedded-mode .cancel-step.active {
    min-height: 500px;
}

body.embedded-mode .success-card {
    max-width: none;
    padding: 26px 14px;
    border: 0;
    background: transparent;
}

body.embedded-mode .cancel-context,
body.embedded-mode .cancel-form-column {
    padding: 18px 14px;
    border-left: 0;
}

body.embedded-mode .card#main-view .card-header,
body.embedded-mode .source-gate,
body.embedded-mode #cancel-form-shell {
    padding-inline: 0;
    border-left: 0;
}

body.embedded-mode .card#main-view .card-header {
    padding-top: 0;
}

body.embedded-mode .card#main-view .card-header h1 {
    font-size: 42px;
}

body.embedded-mode .card#main-view .notice,
body.embedded-mode .card#main-view .warning {
    margin-inline: 0;
}

body.embedded-mode .cancel-context {
    background: transparent;
}

@media (max-width: 860px) {
    .cancel-main {
        padding-top: 56px;
    }

    .card#main-view {
        max-width: 640px;
        margin: 0 auto;
        display: block;
        min-height: 0;
    }

    .cancel-visual-panel {
        height: 230px;
    }

    .cancel-flow {
        padding: 34px 32px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-left: 0;
    }

    .cancel-form-column {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .cancel-context,
    .cancel-form-column {
        padding: 32px;
    }

}

@media (max-width: 560px) {
    .cancel-nav,
    .cancel-main {
        width: calc(100% - 24px);
    }

    .cancel-nav {
        min-height: 62px;
        margin-top: 12px;
    }

    .cancel-brand img {
        width: 96px;
    }

    .cancel-account-link {
        min-height: 40px;
        padding-inline: 14px;
        font-size: 12px;
    }

    .cancel-main {
        padding: 40px 0 72px;
    }

    .success-card {
        padding: 32px 22px;
    }

    .success-card h2 {
        font-size: 42px;
    }

    .success-access-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .cancel-visual-panel {
        height: 180px;
    }

    .cancel-flow {
        padding: 28px 22px;
    }

    .flow-progress {
        margin-bottom: 36px;
    }

    .progress-item em {
        display: none;
    }

    .step-heading h1 {
        font-size: 40px;
    }

    .cancel-step .source-options,
    .step-actions {
        grid-template-columns: 1fr;
    }

    .step-actions .primary,
    .step-actions .destructive {
        order: -1;
    }

    .cancel-context,
    .cancel-form-column {
        padding: 26px 22px;
    }

    .card#main-view .card-header h1 {
        font-size: 44px;
    }


    .source-options {
        grid-template-columns: 1fr;
    }

    .cancel-toast {
        right: 16px;
        bottom: 16px;
        left: 16px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}