.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 24px 16px;
  position: relative;
  background-color: #ffffff;
}

.main-content .div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.main-content .digital-banking {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--display-MD-semi-36px-font-family);
  font-weight: var(--display-MD-semi-36px-font-weight);
  color: #1b1b1d;
  font-size: var(--display-MD-semi-36px-font-size);
  letter-spacing: var(--display-MD-semi-36px-letter-spacing);
  line-height: var(--display-MD-semi-36px-line-height);
  font-style: var(--display-MD-semi-36px-font-style);
}

.main-content .supporting-text {
  position: relative;
  align-self: stretch;
  font-family: var(--text-LG-reg-18px-font-family);
  font-weight: var(--text-LG-reg-18px-font-weight);
  color: #384250;
  font-size: var(--text-LG-reg-18px-font-size);
  letter-spacing: var(--text-LG-reg-18px-letter-spacing);
  line-height: var(--text-LG-reg-18px-line-height);
  font-style: var(--text-LG-reg-18px-font-style);
}

.main-content .before-you-begin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #dce1ff;
  border-radius: 12px;
  border: 1px solid;
  border-color: #e5e7eb;
}

.main-content .container {
  align-items: center;
  display: flex;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.main-content .icon {
  position: relative;
  width: 24px;
  height: 24px;
}

.main-content .title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-top: -1.00px;
  font-family: var(--text-LG-reg-18px-font-family);
  font-weight: var(--text-LG-reg-18px-font-weight);
  color: #1b1b1d;
  font-size: var(--text-LG-reg-18px-font-size);
  letter-spacing: var(--text-LG-reg-18px-letter-spacing);
  line-height: var(--text-LG-reg-18px-line-height);
  font-style: var(--text-LG-reg-18px-font-style);
}

.main-content .description {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: "Neue Haas Grotesk Text Pro-Regular", Helvetica;
  font-weight: 400;
  color: #384250;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
}

.main-content .text-wrapper {
  font-family: var(--text-MD-reg-16px-font-family);
  font-weight: var(--text-MD-reg-16px-font-weight);
  color: #384250;
  font-size: var(--text-MD-reg-16px-font-size);
  letter-spacing: var(--text-MD-reg-16px-letter-spacing);
  line-height: var(--text-MD-reg-16px-line-height);
  font-style: var(--text-MD-reg-16px-font-style);
}

.main-content .span {
  font-family: var(--text-MD-semi-16px-font-family);
  font-weight: var(--text-MD-semi-16px-font-weight);
  font-style: var(--text-MD-semi-16px-font-style);
  letter-spacing: var(--text-MD-semi-16px-letter-spacing);
  line-height: var(--text-MD-semi-16px-line-height);
  font-size: var(--text-MD-semi-16px-font-size);
}

.main-content .instructions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.main-content .div-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.main-content .badges {
  display: inline-flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.main-content .label-layout-wrapper {
  display: inline-flex;
  align-items: flex-start;
  padding: 4px 8px 4px 4px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--variable-collection-color-3);
}

.main-content .label-layout {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0px 0px 0px 4px;
  position: relative;
  flex: 0 0 auto;
}

.main-content .label {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--DN-body-3-14pt-font-family);
  font-weight: var(--DN-body-3-14pt-font-weight);
  color: var(--new-primary-100);
  font-size: var(--DN-body-3-14pt-font-size);
  letter-spacing: var(--DN-body-3-14pt-letter-spacing);
  line-height: var(--DN-body-3-14pt-line-height);
  white-space: nowrap;
  font-style: var(--DN-body-3-14pt-font-style);
}

.main-content .div-3 {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  display: flex;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.main-content .text-wrapper-2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--display-SM-semi-30px-font-family);
  font-weight: var(--display-SM-semi-30px-font-weight);
  color: #1b1b1d;
  font-size: var(--display-SM-semi-30px-font-size);
  letter-spacing: var(--display-SM-semi-30px-letter-spacing);
  line-height: var(--display-SM-semi-30px-line-height);
  font-style: var(--display-SM-semi-30px-font-style);
}

.main-content .p {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: var(--text-MD-reg-16px-font-family);
  font-weight: var(--text-MD-reg-16px-font-weight);
  color: #384250;
  font-size: var(--text-MD-reg-16px-font-size);
  letter-spacing: var(--text-MD-reg-16px-letter-spacing);
  line-height: var(--text-MD-reg-16px-line-height);
  font-style: var(--text-MD-reg-16px-font-style);
}

.main-content .container-2 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #f7f6f7;
  border-radius: 4px;
}

.main-content .img {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}

.main-content .condition {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Neue Haas Grotesk Text Pro-Regular", Helvetica;
  font-weight: 400;
  color: #384250;
  font-size: 14px;
  letter-spacing: 0.14px;
  line-height: 20px;
}

.main-content .text-wrapper-3 {
  letter-spacing: var(--text-SM-reg-14px-letter-spacing);
  font-family: var(--text-SM-reg-14px-font-family);
  font-style: var(--text-SM-reg-14px-font-style);
  font-weight: var(--text-SM-reg-14px-font-weight);
  line-height: var(--text-SM-reg-14px-line-height);
  font-size: var(--text-SM-reg-14px-font-size);
}

.main-content .text-wrapper-4 {
  font-family: var(--text-SM-semi-14px-font-family);
  font-weight: var(--text-SM-semi-14px-font-weight);
  letter-spacing: var(--text-SM-semi-14px-letter-spacing);
  font-style: var(--text-SM-semi-14px-font-style);
  line-height: var(--text-SM-semi-14px-line-height);
  font-size: var(--text-SM-semi-14px-font-size);
}

.main-content .text-wrapper-5 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-top: -1.00px;
  font-family: var(--text-SM-reg-14px-font-family);
  font-weight: var(--text-SM-reg-14px-font-weight);
  color: #384250;
  font-size: var(--text-SM-reg-14px-font-size);
  letter-spacing: var(--text-SM-reg-14px-letter-spacing);
  line-height: var(--text-SM-reg-14px-line-height);
  font-style: var(--text-SM-reg-14px-font-style);
}

.main-content .image {
  position: relative;
  width: 343px;
  height: 161px;
  aspect-ratio: 2.13;
  object-fit: cover;
}

.main-content .image-2 {
  position: relative;
  width: 343px;
  height: 237px;
  aspect-ratio: 1.45;
  object-fit: cover;
}

.main-content .enter-todays-date {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-family: "Neue Haas Grotesk Text Pro-Medium", Helvetica;
  font-weight: 400;
  color: #384250;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
}

.main-content .text-wrapper-6 {
  font-family: var(--text-MD-reg-16px-font-family);
  font-style: var(--text-MD-reg-16px-font-style);
  font-weight: var(--text-MD-reg-16px-font-weight);
  letter-spacing: var(--text-MD-reg-16px-letter-spacing);
  line-height: var(--text-MD-reg-16px-line-height);
  font-size: var(--text-MD-reg-16px-font-size);
}

.main-content .flexcontainer {
  display: flex;
  flex-direction: column;
  height: 112px;
  align-items: flex-start;
  gap: 16px;
}

.main-content .frame {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.main-content .text-wrapper-7 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--text-MD-semi-16px-font-family);
  font-weight: var(--text-MD-semi-16px-font-weight);
  color: #384250;
  font-size: var(--text-MD-semi-16px-font-size);
  letter-spacing: var(--text-MD-semi-16px-letter-spacing);
  line-height: var(--text-MD-semi-16px-line-height);
  font-style: var(--text-MD-semi-16px-font-style);
}

.main-content .div-wrapper {
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0px 0px 0px 16px;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.main-content .please-call-customer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-top: -1.00px;
  font-family: var(--text-SM-reg-14px-font-family);
  font-weight: var(--text-SM-reg-14px-font-weight);
  color: transparent;
  font-size: var(--text-SM-reg-14px-font-size);
  letter-spacing: var(--text-SM-reg-14px-letter-spacing);
  line-height: var(--text-SM-reg-14px-line-height);
  font-style: var(--text-SM-reg-14px-font-style);
}

.main-content .text-wrapper-8 {
  color: #384250;
  letter-spacing: var(--text-SM-reg-14px-letter-spacing);
  font-family: var(--text-SM-reg-14px-font-family);
  font-style: var(--text-SM-reg-14px-font-style);
  font-weight: var(--text-SM-reg-14px-font-weight);
  line-height: var(--text-SM-reg-14px-line-height);
  font-size: var(--text-SM-reg-14px-font-size);
}

.main-content .text-wrapper-9 {
  color: #1a73e8;
  letter-spacing: var(--text-SM-reg-14px-letter-spacing);
  font-family: var(--text-SM-reg-14px-font-family);
  font-style: var(--text-SM-reg-14px-font-style);
  font-weight: var(--text-SM-reg-14px-font-weight);
  line-height: var(--text-SM-reg-14px-line-height);
  font-size: var(--text-SM-reg-14px-font-size);
}


/* === Overrides to fix alignment and inline breaks (added by ChatGPT) === */
.main-content, .main-content * { text-align: left; }

/* Make paragraph-like containers left-aligned and not center-flexed */
.main-content p,
.main-content .description,
.main-content .p,
.main-content .text-wrapper-5,
.main-content .text-wrapper-7,
.main-content .enter-todays-date,
.main-content .condition {
  display: block !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Keep step titles and headings left */
.main-content .digital-banking,
.main-content .supporting-text,
.main-content .text-wrapper-2 {
  text-align: left !important;
}

/* If any inline spans were forced to block elsewhere */
.main-content p span { display: inline; }


/* === Additional fixes: ensure 'Before you begin' and 'Frequently asked questions' are left aligned === */
.main-content .title,
.main-content .text-wrapper-2:first-of-type {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  display: block !important;
}


/* === Additional fix: Make specified headings bold === */
.main-content .digital-banking,
.main-content .text-wrapper-2,
.main-content .text-wrapper-2:first-of-type {
  font-weight: 700 !important;
}


/* === Adjustment: Make key headings semi-bold (font-weight: 600) === */
.main-content .digital-banking,
.main-content .text-wrapper-2,
.main-content .text-wrapper-2:first-of-type {
  font-weight: 600 !important;
}