/* Lendera Funding.
 *
 * On the ADR-0011 skeleton -- `tools/sitegen/page.css` is the layout. What is
 * here is the palette, the one typeface, and one band the skeleton does not
 * have: the relay.
 *
 * PLUS JAKARTA SANS AND NOTHING ELSE. This is the one brand that ships a
 * single face; the headings are the same family at 800. The ink is a
 * near-black green and the ground is a warm stone.
 *
 * THE LOGO'S LIME DOES ONE JOB. #74bd00 is 2.3:1 against white, which is no
 * use for type anywhere, so it is the relay's number discs and the accent on
 * the dark application band and nothing else. Type that needs to be green is
 * #3f6900, 6.5:1 on white and 5.4:1 on the stone.
 */

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

:root {
  --ink: #101210;
  --ink-soft: #2a2d29;
  --text: #34382f;
  --muted: #61665c;

  --accent: #3f6900;
  --accent-deep: #2f4f00;
  --accent-wash: #eef7dc;
  --accent-line: #c9e39a;

  --good: #3f6900;
  --good-wash: #e6f3cc;
  --warn: #3f6900;

  --paper: #ffffff;
  --card: #ffffff;
  --tint: #f3f2ee;
  --rule: #e4e1d9;
  --rule-firm: #d0ccc1;

  --ask-ink: #aab1a4;
  --ask-accent: #74bd00;

  --shadow: 16, 18, 16;

  --display: "Jakarta", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --body: "Jakarta", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --display-weight: 800;
  --display-track: -0.03em;

  --shell: 1180px;
  --radius: 20px;
  --radius-sm: 12px;
}

/* ------------------------------------------------------------------ *
 * THE RELAY -- the one band this site has and the skeleton does not.
 *
 * The brand's whole argument is an auction: one application goes out, 85+
 * lenders see it, they compete, you take the best one. Four stages in a
 * line, joined by a rule, each with a lime disc -- read left to right as one
 * movement rather than as four features.
 * ------------------------------------------------------------------ */
.relay {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  counter-reset: relay;
  position: relative;
}

.relay::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: var(--accent-line);
}

.relay > li {
  counter-increment: relay;
  position: relative;
}

.relay > li::before {
  content: counter(relay);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #74bd00;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 18px;
  position: relative;
  box-shadow: 0 0 0 6px var(--paper);
}

.band--tint .relay > li::before {
  box-shadow: 0 0 0 6px var(--tint);
}

.relay h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 8px;
}

.relay p {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .relay {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .relay::before {
    top: 24px;
    bottom: 24px;
    left: 23px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .relay > li {
    padding-left: 70px;
  }

  .relay > li::before {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
  }
}

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #ffffff;
  --nav-ink: #101210;
  --nav-ink-soft: #61665c;
  --nav-rule: #e4e1d9;
  --nav-hover: #3f6900;
  --nav-panel: #ffffff;
  --nav-cta-bg: #101210;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--body);
  --nav-size: 0.9375rem;
  --nav-weight: 600;
  --nav-track: 0;
  --nav-case: none;

  --foot-bg: #101210;
  --foot-ink: #a3a89e;
  --foot-head: #ffffff;
  --foot-rule: #2a2d29;
  --foot-link: #ffffff;
}