/* Apex Lending Co.
   -------------------------------------------------------------------------
   The premium one, and it says so in its own words: premier, enterprise,
   priority treatment. So this is the only site in the set that leads with a
   very large high-contrast serif -- Instrument Serif over Manrope -- on warm
   stone rather than white, and the only one whose photographs have rounded
   corners rather than hard edges.

   The structural signature is the split. The hero, the promise band and every
   product page open as a two-column spread with type on one side and a
   photograph running to the edge of the screen on the other, which is the
   shape the live site already had and the thing worth keeping from it.

   Red is the brand's, off its own logo, and is reserved for the one button
   that matters. Steel blue does the secondary work. */

@font-face {
  font-family: "InstrumentSerif";
  src: url("display.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("text.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --paper: #fcfbf9;
  --stone: #efece5;
  --stone-2: #e0dbd0;
  --ink: #23253a;
  --slate: #33354e;
  --text: #3d4054;
  --muted: #71768c;
  --rule: #ddd8cd;
  --tan: #ccc0ae;
  --steel: #4d94ab;
  --red: #d12526;
  --red-deep: #a81c1d;

  --shell: 75rem;
  --measure: 60ch;

  --s--2: 0.75rem;
  --s--1: 0.875rem;
  --s-0: 1.0625rem;
  --s-1: 1.1875rem;
  --s-2: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  --s-3: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --s-4: clamp(2.8rem, 1.6rem + 5.2vw, 4.9rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--s-0);
  line-height: 1.65;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: "InstrumentSerif", "Times New Roman", Georgia, serif;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
h1 {
  font-size: var(--s-4);
}
h2 {
  font-size: var(--s-3);
}
h3 {
  font-size: var(--s-2);
  line-height: 1.12;
}

p {
  margin: 0 0 1em;
  max-width: var(--measure);
}

.num {
  font-variant-numeric: tabular-nums;
}

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

.section {
  padding-block: clamp(3.25rem, 7vw, 5.5rem);
}
.section--stone {
  background: var(--stone);
}
.section--tight {
  padding-block: clamp(2rem, 4vw, 3rem);
}

.lede {
  font-size: var(--s-1);
  color: var(--muted);
  max-width: 52ch;
  margin-top: 1rem;
}

/* Small caps label. Manrope, tracked, steel. */
.kicker {
  display: block;
  font-size: var(--s--2);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1rem;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 40;
  background: #fff;
  padding: 0.75rem 1rem;
  border: 2px solid var(--slate);
}

:where(a, button, iframe, input, summary):focus-visible {
  outline: 3px solid var(--steel);
  outline-offset: 3px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
}
.btn--go {
  background: var(--red);
  color: #fff;
}
.btn--go:hover {
  background: var(--red-deep);
}
.btn--lg {
  padding: 1rem 2rem;
  font-size: var(--s-1);
}
.btn--out {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--stone-2);
}
.btn--out:hover {
  box-shadow: inset 0 0 0 1.5px var(--slate);
}

/* ---------- masthead: one row, programs on a dropped panel ----------
   Not a strip of eleven links. The programs sit behind a single control, the
   way this site's own predecessor did it, which keeps the header to one line
   and the page starting where a landing page should. */

.masthead {
  background: var(--paper);
  border-bottom: 3px double var(--rule);
  position: relative;
  z-index: 10;
}
.masthead__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.75rem;
  padding-block: 1rem;
  flex-wrap: wrap;
}
.masthead__logo img {
  height: 38px;
  width: auto;
}
.masthead__tel {
  margin-left: auto;
  font-weight: 800;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--s--1);
  white-space: nowrap;
}

.topnav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem 1.5rem;
}
.topnav__list > li > a,
.menu > summary {
  display: block;
  padding-block: 0.35rem;
  color: var(--text);
  text-decoration: none;
  font-size: var(--s--1);
  font-weight: 600;
  white-space: nowrap;
}
.topnav__list > li > a:hover,
.menu > summary:hover {
  color: var(--red);
}
.topnav__list > li > a[aria-current],
.menu > summary[aria-current] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--red);
}

/* The dropdown. <details> carries the state; the arrow is the marker. */
.menu {
  position: relative;
}
.menu > summary {
  cursor: pointer;
  list-style: none;
  padding-right: 1rem;
  position: relative;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu > summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  translate: 0 -70%;
  rotate: 45deg;
}
.menu[open] > summary::after {
  translate: 0 -25%;
  rotate: 225deg;
}
.menu__panel {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1.25rem;
  z-index: 20;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  border-radius: 8px;
  box-shadow: 0 18px 40px -20px rgba(35, 37, 58, 0.45);
  padding: 0.75rem;
  width: min(92vw, 34rem);
}
.menu__panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}
.menu__panel a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
}
.menu__panel a:hover {
  background: var(--stone);
}
.menu__panel a[aria-current] {
  background: var(--stone);
  box-shadow: inset 2px 0 0 var(--red);
}
.menu__panel b {
  display: block;
  font-family: "InstrumentSerif", Georgia, serif;
  font-weight: 400;
  font-size: var(--s-1);
  color: var(--ink);
  line-height: 1.2;
}
.menu__panel span {
  display: block;
  font-size: var(--s--2);
  color: var(--muted);
  margin-top: 0.1rem;
}
@media (min-width: 46rem) {
  .menu__panel ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.15rem 0.5rem;
  }
}
@media (max-width: 45.99rem) {
  /* No room to overlay on a phone: the panel pushes the page instead. */
  .menu__panel {
    position: static;
    width: auto;
    box-shadow: none;
    margin-top: 0.6rem;
  }
}

/* ---------- the split: this site's shape ---------- */

.split {
  display: grid;
  align-items: stretch;
}
.split__text {
  background: var(--stone);
  padding: clamp(2.25rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split__text > * {
  width: min(100%, 34rem);
  margin-inline: 0;
}
.split__img {
  min-height: 15rem;
}
.split__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 58rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    min-height: 34rem;
  }
  /* The text column stops at the page gutter; the picture runs off the edge. */
  .split__text {
    padding-left: max(1.25rem, calc((100vw - var(--shell)) / 2));
    padding-right: clamp(2rem, 4vw, 3.5rem);
    align-items: flex-end;
  }
  .split--flip .split__text {
    order: 2;
    padding-left: clamp(2rem, 4vw, 3.5rem);
    padding-right: max(1.25rem, calc((100vw - var(--shell)) / 2));
    align-items: flex-start;
  }
}
.hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* ---------- the figures ---------- */

.figures {
  background: var(--slate);
  color: #e6e7ee;
}
.figures__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border-block: 1px solid rgba(255, 255, 255, 0.14);
}
.figures__grid > div {
  background: var(--slate);
  padding: 1.5rem 1.25rem;
}
.figures b {
  display: block;
  font-family: "InstrumentSerif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  line-height: 1;
  color: #fff;
}
.figures span {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--s--1);
  color: #b6b9c9;
  max-width: 20ch;
}
@media (min-width: 52rem) {
  .figures__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- the programs ---------- */

.programs {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.programs > li {
  border-bottom: 1px solid var(--rule);
}
.program {
  display: grid;
  gap: 0.5rem 2.5rem;
  padding: 1.75rem 0;
  text-decoration: none;
}
.program:hover .program__name {
  color: var(--red);
}
.program__n {
  font-family: "InstrumentSerif", Georgia, serif;
  font-size: var(--s-2);
  color: var(--tan);
  line-height: 1;
}
.program__name {
  font-family: "InstrumentSerif", Georgia, serif;
  font-size: var(--s-2);
  color: var(--ink);
  line-height: 1.1;
  display: block;
}
.program p {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: var(--s--1);
  max-width: 46ch;
}
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  padding: 0;
}
.chips li {
  font-size: var(--s--2);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--slate);
  background: var(--stone);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}
@media (min-width: 58rem) {
  .program {
    grid-template-columns: 3rem minmax(0, 22rem) minmax(0, 24rem);
    align-items: start;
    justify-content: space-between;
  }
  .chips {
    margin-top: 0.15rem;
  }
}

/* ---------- steps ---------- */

.steps {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2.5rem;
}
.step {
  border-top: 3px double var(--rule);
  padding-top: 1.25rem;
}
.step__n {
  display: block;
  font-family: "InstrumentSerif", Georgia, serif;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--tan);
  margin-bottom: 0.6rem;
}
.step p {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: var(--s--1);
}
@media (min-width: 56rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ticks {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  font-size: var(--s--1);
}
.ticks li {
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: 0.4rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  border: 2px solid var(--steel);
}

/* ---------- the two-by-two panels ---------- */

.pairs {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 2.5rem;
}
.pairs > div {
  background: var(--paper);
  padding: 1.5rem;
}
.pairs h3 {
  font-size: var(--s-1);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pairs p {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: var(--s--1);
  max-width: 34ch;
}
@media (min-width: 46rem) {
  .pairs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- product page lists ---------- */

.cols {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
.col h3 {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: var(--s--1);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1rem;
}
.col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--s--1);
}
.col li {
  padding: 0.5rem 0;
  border-bottom: 1px dotted var(--rule);
}
@media (min-width: 52rem) {
  .cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- the questions ---------- */

.faq {
  margin-top: 2.5rem;
  border-top: 1px solid var(--rule);
  max-width: 54rem;
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-weight: 700;
  color: var(--ink);
  font-size: var(--s-1);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  translate: 0 -50%;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--steel);
  line-height: 1;
}
.faq details[open] summary::after {
  content: "−";
}
.faq p {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: var(--s--1);
  max-width: 62ch;
}

/* ---------- the application ---------- */

.applygrid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 62rem) {
  .applygrid {
    grid-template-columns: 1fr minmax(24rem, 29rem);
    gap: 3.5rem;
    align-items: start;
  }
}
.formcard {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}
.formcard__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--s--2);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.formcard iframe {
  display: block;
  border: 0;
  width: 100%;
}

/* ---------- interior pages ---------- */

.pagehead {
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-bottom: 3px double var(--rule);
}

.figure img {
  border-radius: 10px;
}

.terms {
  background: var(--stone);
  border-radius: 10px;
  padding: clamp(1.25rem, 3vw, 2rem);
  max-width: 72ch;
}
.terms p {
  margin: 0;
  max-width: none;
  font-size: var(--s--1);
  line-height: 1.75;
}

/* ---------- footer ---------- */

.foot {
  background: var(--ink);
  color: #b9bcca;
  padding-block: clamp(2.75rem, 5vw, 4rem);
  font-size: var(--s--1);
}
.foot__cols {
  display: grid;
  gap: 2rem;
}
@media (min-width: 46rem) {
  .foot__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 68rem) {
  .foot__cols {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}
.foot h2 {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: var(--s--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 0.9rem;
  font-weight: 800;
}
.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot li {
  margin-bottom: 0.45rem;
}
.foot a {
  text-decoration: none;
}
.foot a:hover {
  color: #fff;
  text-decoration: underline;
}
.foot p {
  color: #a7abbb;
  max-width: 34ch;
}
.foot__legal {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  max-width: none;
  font-size: var(--s--2);
  color: #8b8fa1;
}