/* Rapid Funding Pros
   -------------------------------------------------------------------------
   The only dark site in the set, and the only one whose subject is time.

   Everything a visitor is asked to believe here is a duration, so durations
   are set in JetBrains Mono and given the brand's signal yellow, and nothing
   else on the page is allowed that colour. Space Grotesk does the talking.

   Two structural decisions carry the theme. The clock rail under the hero is
   a horizontal track with the four timings on it, which is the argument the
   whole brand makes, drawn once. And the application section is the only
   light thing on the site: on a page this dark, the eye goes there by itself,
   which is exactly where it is wanted. */

@font-face {
  font-family: "SpaceGrotesk";
  src: url("display.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono";
  src: url("mono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --void: #0a0e13;
  --panel: #121a24;
  --panel-2: #18222f;
  --line: #243040;
  --text: #bcc7d4;
  --dim: #7c8a9b;
  --white: #f1f6fb;
  --blue: #3b8cff;
  --blue-deep: #1565d8;
  --yellow: #ffd23f;

  --shell: 74rem;
  --measure: 58ch;

  --s--2: 0.6875rem;
  --s--1: 0.8125rem;
  --s-0: 1rem;
  --s-1: 1.125rem;
  --s-2: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --s-3: clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem);
  --s-4: clamp(2.2rem, 1.2rem + 4.4vw, 4rem);
}

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

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: "SpaceGrotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--s-0);
  line-height: 1.6;
  /* The sticky call bar sits over the foot of the page on small screens. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

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

h1,
h2,
h3 {
  font-family: "SpaceGrotesk", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--white);
  text-wrap: balance;
}
h1 {
  font-size: var(--s-4);
}
h2 {
  font-size: var(--s-3);
}
h3 {
  font-size: var(--s-1);
  letter-spacing: -0.02em;
}

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

/* Every duration, amount and rate on this site. Mono, tabular, yellow when
   it is a time and white when it is money. */
.mono {
  font-family: "JetBrainsMono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.time {
  color: var(--yellow);
}

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

.section {
  padding-block: clamp(3rem, 6.5vw, 5rem);
}
.section--panel {
  background: var(--panel);
}
.section--tight {
  padding-block: clamp(2rem, 4vw, 3rem);
}

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

.tag {
  display: inline-block;
  font-family: "JetBrainsMono", ui-monospace, monospace;
  font-size: var(--s--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.9rem;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 40;
  background: var(--white);
  color: var(--void);
  padding: 0.75rem 1rem;
}

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

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

.btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn--go {
  background: var(--blue);
  color: #04080d;
}
.btn--go:hover {
  background: #61a3ff;
}
.btn--lg {
  padding: 1rem 2.1rem;
  font-size: var(--s-1);
}
.btn--ghost {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover {
  box-shadow: inset 0 0 0 1px var(--blue);
  color: var(--blue);
}
.btn--dark {
  background: var(--void);
  color: var(--white);
}
.btn--dark:hover {
  background: var(--panel-2);
}

/* ---------- masthead: one instrument line ----------
   No strip of links. The bar states how fast this is, gives the number and
   the button, and puts the rest of the site behind one control. */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 14, 19, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.6rem;
}
.masthead__logo {
  display: block;
  flex: 0 0 auto;
}
.masthead__logo img {
  /* The mark is 1214x477, so it is wide for its height: 28px tall drew it
     71px wide, which read as an afterthought next to a pill button. */
  height: 42px;
  width: auto;
}

/* The claim, in the bar, in the colour this site reserves for time. */
.masthead__chip {
  margin-right: auto;
  font-size: var(--s--2);
  letter-spacing: 0.02em;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}
.masthead__chip b {
  font-weight: 700;
}
@media (max-width: 46rem) {
  .masthead__chip {
    display: none;
  }
  .masthead__logo {
    margin-right: auto;
  }
}

.masthead__tel {
  font-weight: 700;
  text-decoration: none;
  color: var(--white);
  font-size: var(--s--1);
  white-space: nowrap;
}
@media (max-width: 34rem) {
  .masthead__tel {
    display: none;
  }
}

/* The one control, and the panel it drops. */
.menu > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--s--1);
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu > summary:hover {
  border-color: var(--blue);
  color: var(--blue);
}
/* Three bars that become a cross when the panel is open. */
.menu > summary > span,
.menu > summary > span::before,
.menu > summary > span::after {
  display: block;
  width: 14px;
  height: 2px;
  background: currentColor;
  transition: translate 0.15s ease, rotate 0.15s ease, opacity 0.15s ease;
}
.menu > summary > span {
  position: relative;
}
.menu > summary > span::before,
.menu > summary > span::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu > summary > span::before {
  translate: 0 -5px;
}
.menu > summary > span::after {
  translate: 0 5px;
}
.menu[open] > summary > span {
  background: transparent;
}
.menu[open] > summary > span::before {
  translate: 0 0;
  rotate: 45deg;
}
.menu[open] > summary > span::after {
  translate: 0 0;
  rotate: -45deg;
}

.menu__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.menu__grid {
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 46rem) {
  .menu__grid {
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
  }
  /* Six options read better in two columns than in one tall list. */
  .menu__wide ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2.5rem;
  }
}
.menu__grid h2 {
  font-family: "JetBrainsMono", ui-monospace, monospace;
  font-size: var(--s--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.menu__grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu__grid a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.45rem 0;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
}
/* The figure goes to the right margin; the label stays put, so an entry with
   no figure does not get pushed across the column on its own. */
.menu__grid a > span:last-child:not(:first-child) {
  margin-left: auto;
  font-size: var(--s--2);
}
.menu__grid a:hover {
  color: var(--white);
}
.menu__grid a[aria-current] {
  color: var(--white);
}
.menu__grid a[aria-current] > span:first-child::before {
  content: "› ";
  color: var(--yellow);
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  background: var(--void);
}
.hero > * {
  grid-area: 1 / 1;
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
}
.hero::after {
  content: "";
  grid-area: 1 / 1;
  background: linear-gradient(
    180deg,
    rgba(10, 14, 19, 0.75) 0%,
    rgba(10, 14, 19, 0.6) 45%,
    rgba(10, 14, 19, 0.96) 100%
  );
}
.hero__inner {
  position: relative;
  z-index: 1;
  align-self: center;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
.hero h1 {
  max-width: 17ch;
}
.hero__sub {
  font-size: var(--s-1);
  color: var(--text);
  margin-top: 1.25rem;
  max-width: 46ch;
}
.hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* ---------- the clock rail: this site's signature ---------- */

.clock {
  background: var(--panel);
  border-block: 1px solid var(--line);
}
.clock__grid {
  list-style: none;
  /* margin-block, not margin: this element also carries the shell class,
     whose auto side margins are what hold it in the page gutter. A margin
     shorthand here resets them and the whole rail sits hard against the left
     edge of the screen. */
  margin-block: 0;
  /* padding-inline too: this is an <ol>, and the browser's own 40px indent on
     a list would push the rail that far inside the gutter every other section
     on the page lines up with. */
  padding-inline: 0;
  padding-block: clamp(2rem, 4vw, 2.75rem);
  display: grid;
  gap: 1.75rem;
}
.tick {
  position: relative;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
/* The node on the track. */
.tick::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yellow);
}
.tick--on::before {
  box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.18);
}
.tick__when {
  display: block;
  font-family: "JetBrainsMono", ui-monospace, monospace;
  font-size: var(--s-1);
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: -0.03em;
}
.tick h3 {
  margin-top: 0.4rem;
  font-size: var(--s-0);
}
.tick p {
  margin: 0.35rem 0 0;
  font-size: var(--s--1);
  color: var(--dim);
  max-width: 30ch;
}
@media (min-width: 46rem) {
  .clock__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .tick {
    padding-right: 1.5rem;
  }
}

/* ---------- options, ranked by how fast they land ---------- */

.ranked {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.rank {
  display: grid;
  gap: 0.5rem 1.5rem;
  background: var(--panel);
  padding: 1.35rem 1.35rem;
  text-decoration: none;
  align-items: center;
}
.rank:hover {
  background: var(--panel-2);
}
.rank__n {
  font-family: "JetBrainsMono", ui-monospace, monospace;
  font-size: var(--s-2);
  font-weight: 700;
  color: #3d4d61;
  letter-spacing: -0.04em;
}
.rank:hover .rank__n {
  color: var(--blue);
}
.rank h3 {
  font-size: var(--s-2);
}
.rank__what {
  display: block;
  color: var(--dim);
  font-size: var(--s--1);
  margin-top: 0.2rem;
  max-width: 44ch;
}
.rank__figs {
  display: flex;
  gap: 1.75rem;
  margin: 0;
}
.rank__figs dt {
  font-family: "JetBrainsMono", ui-monospace, monospace;
  font-size: var(--s--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.rank__figs dd {
  margin: 0.25rem 0 0;
  font-family: "JetBrainsMono", ui-monospace, monospace;
  font-size: var(--s-0);
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.rank__figs .time dd,
.rank__figs dd.time {
  color: var(--yellow);
}
@media (min-width: 56rem) {
  .rank {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    padding: 1.25rem 1.5rem;
  }
  .rank__figs {
    justify-content: flex-end;
  }
  .rank__figs div {
    min-width: 8rem;
    text-align: right;
  }
}

/* ---------- the strip of figures ---------- */

.strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.strip > div {
  background: var(--void);
  padding: 1.35rem 1.25rem;
}
.strip b {
  display: block;
  font-family: "JetBrainsMono", ui-monospace, monospace;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.strip span {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--s--1);
  color: var(--dim);
  max-width: 20ch;
}
@media (min-width: 46rem) {
  .strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

.steps {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--blue);
  padding: 1.6rem;
}
.step__n {
  display: block;
  font-family: "JetBrainsMono", ui-monospace, monospace;
  font-size: var(--s--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.7rem;
}
.step h3 {
  font-size: var(--s-2);
}
.step p {
  margin: 0.6rem 0 0;
  font-size: var(--s--1);
  color: var(--dim);
}
@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.3rem;
  position: relative;
  margin-bottom: 0.35rem;
  color: var(--text);
}
.ticks li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 700;
}

/* ---------- band ---------- */

.band {
  display: grid;
  background: var(--void);
  border-block: 1px solid var(--line);
}
.band > * {
  grid-area: 1 / 1;
}
.band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.band::after {
  content: "";
  grid-area: 1 / 1;
  background: linear-gradient(90deg, rgba(10, 14, 19, 0.94) 10%, rgba(10, 14, 19, 0.3) 100%);
}
.band__inner {
  position: relative;
  z-index: 1;
  align-self: center;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.band h2 {
  max-width: 20ch;
}
.band p {
  margin: 1rem 0 0;
  color: var(--text);
}

/* ---------- the application: the one light thing here ---------- */

.apply {
  background: var(--white);
  color: #10151c;
  padding-block: clamp(3rem, 6.5vw, 4.5rem);
}
.apply h2,
.apply h3 {
  color: #0a0e13;
}
.apply .lede {
  color: #4b5666;
}
.apply .tag {
  color: var(--blue-deep);
}
.apply .ticks li {
  color: #34404f;
}
.apply .ticks li::before {
  color: var(--blue-deep);
}
.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 {
  border: 1px solid #d5dde7;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.formcard__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid #e3e9f0;
  font-family: "JetBrainsMono", ui-monospace, monospace;
  font-size: var(--s--2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5d6a7b;
}
.formcard iframe {
  display: block;
  border: 0;
  width: 100%;
}

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

.pagehead {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  background: var(--panel);
}
.specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 2rem 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.spec {
  background: var(--void);
  padding: 1rem 1.15rem;
}
.spec dt {
  font-family: "JetBrainsMono", ui-monospace, monospace;
  font-size: var(--s--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.spec dd {
  margin: 0.35rem 0 0;
  font-family: "JetBrainsMono", ui-monospace, monospace;
  font-size: var(--s-1);
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
@media (min-width: 52rem) {
  .specs {
    grid-template-columns: repeat(4, 1fr);
  }
}

.split {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 62rem) {
  .split {
    grid-template-columns: 1fr 20rem;
    gap: 3.5rem;
    align-items: start;
  }
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--yellow);
  padding: 1.5rem;
}
.panel h3 {
  font-size: var(--s-1);
}

.figure img {
  width: 100%;
  border: 1px solid var(--line);
}

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

/* ---------- the sticky call bar ---------- */

/* Only on small screens, where the masthead's Apply button scrolls away and
   the page is long. A site selling speed should not make anyone scroll back
   to the top to act on it. */
.callbar {
  display: none;
}
@media (max-width: 52rem) {
  .callbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .callbar a {
    padding: 0.9rem 1rem;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
    font-size: var(--s--1);
  }
  .callbar__call {
    background: var(--panel);
    color: var(--white);
  }
  .callbar__go {
    background: var(--blue);
    color: #04080d;
  }
  body {
    padding-bottom: 3.5rem;
  }
}

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

.foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.75rem, 5vw, 4rem);
  font-size: var(--s--1);
  color: var(--dim);
}
.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: repeat(4, 1fr);
  }
}
.foot h2 {
  font-family: "JetBrainsMono", ui-monospace, monospace;
  font-size: var(--s--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.9rem;
  font-weight: 700;
}
.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot li {
  margin-bottom: 0.45rem;
}
.foot a {
  text-decoration: none;
}
.foot a:hover {
  color: var(--white);
}
.foot p {
  max-width: 32ch;
}
.foot__legal {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  max-width: none;
  font-size: var(--s--2);
  color: #5f6c7c;
}