.pre-portal-container {
  padding-top: 2.4rem;
  padding-bottom: var(--padding-large);
}
.pre-portal-header {
  text-align: center;
  padding: 4rem 2rem 5rem;
  max-width: 90rem;
  margin: 0 auto;
}

.pre-portal-hero {
  padding-top: 4.8rem;
  padding-bottom: 5.6rem;
}
.pre-portal-title {
  font-family: var(--font-alaska);
  font-weight: var(--weight-medium);
  font-size: 4rem;
  line-height: 1.3;
  color: var(--color-secondary);
  margin: 0 0 1rem;
  letter-spacing: 0;
}

.pre-portal-lede,
.pre-portal-lede a.attribute-link {
  font-family: var(--font-arial);
  font-size: 1.3rem;
  line-height: 1.44;
  color: color-mix(in srgb, var(--color-secondary) 60%, transparent);
  max-width: 52rem;
  margin: 0 auto;
}
.pre-portal-cards {
  column-gap: 2rem;
  row-gap: 2rem;
  margin-bottom: 3.2rem;
}
.pre-portal-card .pre-portal-card-content a.btn.btn--full.btn--full-secondary {
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 0.4rem;
  margin-inline: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.pre-portal-card.card,
.pre-portal-card .pre-portal-card-heading,
.pre-portal-card .pre-portal-card-text,
.pre-portal-docs-surface .pre-portal-docs-intro,
.pre-portal-doc-line,
.pre-portal-docs-footer {
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}

.pre-portal-card.card {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 26.2rem;
  box-sizing: border-box;
  padding: 0.4rem;
  gap: 0 1.2rem;
  overflow: hidden;
  border: 1px solid var(--color-light-grey--2);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-light);
  background: linear-gradient(
    111.69deg,
    var(--color-light-grey--2-alpha) 6.74%,
    var(--color-white) 62.95%
  ) !important;
  background-color: var(--color-white) !important;
}
.pre-portal-card-content {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 3rem 1rem 3rem 3rem;
  gap: 2rem;
  min-height: 24rem;
  min-width: 0;
  background: transparent;
  text-align: start;
}
.pre-portal-card-image {
  position: relative;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 22rem;
  order: 2;
  border-radius: 2rem;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
}

.pre-portal-card-image--borrower {
  background-image: url("../images/pre_portal/img-pre-portal-borrower.e75c35472b6f.jpg");
}

.pre-portal-card-image--partner {
  background-image: url("../images/pre_portal/img-pre-portal-partner.1e6de8e9678a.png");
  background-size: cover;
  background-position: center;
}

.pre-portal-card-heading {
  font-family: var(--font-alaska);
  font-style: normal;
  font-weight: var(--weight-medium);
  font-size: 2.4rem;
  line-height: 1.46;
  letter-spacing: 0;
  color: var(--color-secondary);
  margin: 0;
}

.pre-portal-card-text {
  font-family: var(--font-arial);
  font-size: 1.6rem;
  line-height: 1.44;
  color: color-mix(in srgb, var(--color-secondary) 60%, transparent);
  margin: 0;
  flex: 0 0 auto;
}

.pre-portal-docs {
  margin-top: 3.2rem;
}

.pre-portal-docs-surface {
  border: 1px solid var(--color-light-grey--2);
  border-radius: var(--radius-default);
  background-color: var(--color-white);
  overflow: hidden;
  box-shadow: var(--shadow-light);
}

.pre-portal-docs-intro {
  margin: 0;
  padding: 1.6rem 1.8rem 0.8rem;
  font-family: var(--font-alaska);
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: var(--weight-normal);
  color: var(--color-secondary);
  background-color: var(--color-white);
}

.pre-portal-docs-intro .pre-portal-docs-intro-em {
  font-weight: var(--weight-bold);
}

.pre-portal-tabs {
  position: relative;
  z-index: 0;
  border-bottom: none;
  background-color: var(--color-white);
}

.pre-portal-tabs-scroll {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0;
  padding: 0 0.4rem;
  min-height: 4.4rem;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  background-color: var(--color-white);
}

.pre-portal-tabs-scroll::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.1rem;
  background: var(--color-light-grey--2);
  pointer-events: none;
}

.pre-portal-tab {
  position: relative;
  box-sizing: border-box;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.3rem;
  padding: 0 2.4rem;
  margin: 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-alaska);
  font-size: 1.2rem;
  line-height: 1.75;
  font-weight: var(--weight-normal);
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--color-text-complementary) 50%, transparent);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.2s, background 0.2s, background-color 0.2s, border-color 0.2s;
  white-space: nowrap;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

.pre-portal-tab-label {
  display: block;
  text-align: center;
}

.pre-portal-tab:hover {
  color: var(--color-secondary);
}

.pre-portal-tab--active {
  z-index: 2;
  color: var(--color-secondary);
  font-weight: var(--weight-bold);
  background-color: var(--color-light-grey);
  background-image: none;
  border: 0.1rem solid var(--color-light-grey--2);
  border-bottom-color: var(--color-light-grey);
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  margin-bottom: -0.1rem;
  box-shadow: none;
}

.pre-portal-tab--active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1rem;
  height: 0.1rem;
  background-color: var(--color-light-grey);
}

.pre-portal-panels {
  background-color: var(--color-light-grey);
  border-radius: 0;
  padding: 0.3rem 0.4rem 0;
}

.pre-portal-panel {
  display: none;
  padding: 1.6rem 0.4rem 0.6rem;
}

.pre-portal-panel--active {
  display: block;
}

.pre-portal-doc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

.pre-portal-docs-surface .pre-portal-doc-list {
  gap: 1rem;
}

.pre-portal-doc-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0;
  border-radius: 1rem;
}

.pre-portal-doc-list li img,
.pre-portal-doc-list li .pre-portal-check {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  filter: none;
  align-self: center;
}

.pre-portal-docs-surface .pre-portal-doc-line {
  display: block;
}

.pre-portal-doc-line {
  flex: 1;
  min-width: 0;
  font-family: var(--font-arial);
  font-size: 1.3rem;
  font-weight: var(--weight-normal);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--color-secondary-light);
}

.pre-portal-doc-line strong {
  font-weight: var(--weight-medium);
}

.pre-portal-docs-surface .pre-portal-doc-line > strong + .pre-portal-doc-subtitle::before,
.pre-portal-doc-line > strong + .pre-portal-doc-subtitle::before {
  content: none;
}

.pre-portal-doc-subtitle {
  display: inline;
  font-family: var(--font-arial);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: var(--weight-normal);
  line-height: 1.47;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--color-text-complementary) 70%, transparent);
}

.pre-portal-docs-footer {
  margin: 0;
  padding: 1.2rem 1.8rem 1.6rem;
  font-family: var(--font-arial);
  font-size: 1.3rem;
  line-height: 1.6;
  font-weight: var(--weight-normal);
  text-align: left;
  color: var(--color-secondary);
  background-color: var(--color-light-grey);
  border-top: none;
  border-radius: 0 0 var(--radius-default) var(--radius-default);
}

.pre-portal-docs-footer .pre-portal-faq-hier,
.pre-portal-docs-footer .pre-portal-faq-hier:link,
.pre-portal-docs-footer .pre-portal-faq-hier:visited {
  color: var(--color-quaternary);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.12em;
}

@media (max-width: 56.25em) {
  .pre-portal-title {
    font-size: clamp(2.1rem, 6.8vw, 3.4rem);
    white-space: nowrap;
  }

  .pre-portal-lede,
  .pre-portal-lede a.attribute-link {
    font-size: clamp(1.2rem, 3.2vw, 1.4rem);
  }

  .pre-portal-card.card {
    grid-template-columns: 1fr;
    gap: 1.2rem 0;
    padding: 2rem;
    min-height: 0;
    background-color: var(--color-light-grey) !important;
  }

  .pre-portal-card-image {
    order: 1;
    min-height: 0;
    border-radius: 2rem;
  }

  .pre-portal-card-image--borrower {
    background-image: url("../images/pre_portal/pre-portal-borrower-mobile.da83d9df0161.png");
    aspect-ratio: 434 / 176;
  }

  .pre-portal-card-image--partner {
    background-image: url("../images/pre_portal/pre-portal-partner-mobile.db91c6c31cc4.png");
    background-size: cover;
    background-position: center;
    aspect-ratio: 434 / 146;
  }

  .pre-portal-card-content {
    order: 2;
    min-height: unset;
    padding: 0;
    gap: 2rem;
  }
}

@media (max-width: 43.75em) {
  .pre-portal-container.container {
    margin: 0 1.5rem;
  }

  .pre-portal-header {
    padding: 3rem 1.2rem 3.6rem;
  }

  .pre-portal-hero {
    padding-top: 3.2rem;
  }

  .pre-portal-cards {
    grid-template-columns: 1fr;
  }

  .pre-portal-panels {
    padding: 0.6rem 0.4rem 0.3rem;
  }
}

/* White tab rail, active tab merges with grey panel below. !important beats UA
   <button> backgrounds and any global form styles in this app. */
.pre-portal-docs-surface .pre-portal-tabs,
.pre-portal-docs-surface .pre-portal-tabs-scroll {
  background-color: var(--color-white) !important;
}

.pre-portal-docs-surface .pre-portal-tab:not(.pre-portal-tab--active) {
  background-color: transparent !important;
  background-image: none !important;
}

.pre-portal-docs-surface .pre-portal-tab--active {
  background-color: var(--color-light-grey) !important;
  background-image: none !important;
  border-bottom-color: var(--color-light-grey) !important;
}

.pre-portal-docs-surface .pre-portal-panels,
.pre-portal-docs-surface .pre-portal-docs-footer {
  background-color: var(--color-light-grey) !important;
}