/* First Choice Business Funding.
 *
 * On the ADR-0011 skeleton -- `tools/sitegen/page.css` is the layout. What is
 * here is the palette, the two typefaces, and the comparison band.
 *
 * YOUNG SERIF OVER ATKINSON HYPERLEGIBLE. A soft, bookish display serif for
 * the heads, because the voice is editorial rather than urgent, and for the
 * running text the face drawn by the Braille Institute to be read without
 * effort, because this site asks people to read small print.
 *
 * Young Serif has ONE weight. It is declared across 400-700 below so that
 * the places the skeleton and the chrome ask for 700 get the real drawing
 * rather than a smeared synthetic bold, and --display-weight is 400.
 * Atkinson Hyperlegible is static, so its regular and bold are two files.
 *
 * ROYAL BLUE ON WHITE, a cool pale tint, and gold that only ever marks. The
 * accent #1d4ed8 is 6.7:1 on white and 6.2:1 on the tint, so it can carry
 * the eyebrows and links. The gold, #d4a017, is 2.3:1 on white and is never
 * type on paper: it is the rule before every eyebrow, the numerals' rule in
 * the comparison band, and nothing else.
 */

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

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

@font-face {
  font-family: "Atkinson";
  src: url("text-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #0f172a;
  --ink-soft: #1e293b;
  --text: #334155;
  --muted: #526075;

  --accent: #1d4ed8;
  --accent-deep: #1e3a8a;
  --accent-wash: #e8eefc;
  --accent-line: #c3d2f6;

  --good: #1d4ed8;
  --good-wash: #e3ebfd;
  --warn: #1e3a8a;

  --paper: #ffffff;
  --card: #ffffff;
  --tint: #f1f5fb;
  --rule: #dce4ef;
  --rule-firm: #b9c5d7;

  --ask-ink: #b4c0d3;
  --ask-accent: #9db8f6;

  --shadow: 15, 23, 42;

  --display: "YoungSerif", Georgia, "Times New Roman", serif;
  --body: "Atkinson", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* One weight, and a round serif: barely tracked. */
  --display-weight: 400;
  --display-track: -0.012em;

  /* Sentence-case eyebrows, lightly tracked: a heading over a column, not a
     label on a crate. */
  --eyebrow-case: none;
  --eyebrow-track: 0.02em;
  --eyebrow-weight: 700;

  --shell: 1180px;
  --radius: 10px;
  --radius-sm: 8px;
}

/* The gold mark: the short rule before every eyebrow, on paper and on the
   ink alike. A mark, never a letter. */
.eyebrow::before,
.ask .eyebrow::before {
  background: #d4a017;
}

/* ------------------------------------------------------------------ *
 * HOW TO CHOOSE BETWEEN OFFERS -- the one band this site has and the
 * skeleton does not.
 *
 * The brand's name is its argument: the offer you take should be the one you
 * chose. So directly under the application sits a comparison sheet -- the
 * four things to line offers up on and the question each one answers --
 * beside the one plate on the site that shows the choosing itself. It is
 * labelled as an illustration and carries no figures, because an example
 * rate is still a rate printed on a page.
 * ------------------------------------------------------------------ */
.choose {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap);
  align-items: start;
}

.choose__side .shot {
  margin: 28px 0 0;
}

.choose__sheet {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(var(--shadow), 0.07);
  overflow: hidden;
}

.choose__label {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 16px 26px;
  background: var(--tint);
  border-bottom: 1px solid var(--rule);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.choose__label span:last-child {
  font-weight: 400;
  color: var(--muted);
}

.choose__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: line;
}

.choose__lines li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 18px;
  padding: 24px 26px;
  border-bottom: 1px solid var(--rule);
  counter-increment: line;
}

.choose__lines li::before {
  content: counter(line);
  grid-row: span 3;
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 3px solid #d4a017;
  align-self: start;
  text-align: center;
}

.choose__term {
  margin: 0;
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ink);
}

.choose__ask {
  margin: 0;
  font-weight: 700;
  color: var(--accent-deep);
}

.choose__say {
  margin: 4px 0 0;
  color: var(--text);
}

.choose__note {
  margin: 0;
  padding: 16px 26px 20px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

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

@media (max-width: 520px) {
  .choose__label,
  .choose__lines li,
  .choose__note {
    padding-inline: 18px;
  }
  .choose__lines li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 4px 14px;
  }
  .choose__lines li::before {
    font-size: 1.5rem;
  }
}

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #ffffff;
  --nav-ink: #0f172a;
  --nav-ink-soft: #526075;
  --nav-rule: #dce4ef;
  --nav-hover: #1d4ed8;
  --nav-panel: #ffffff;
  --nav-cta-bg: #1d4ed8;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--body);
  --nav-size: 0.95rem;
  --nav-weight: 700;
  --nav-track: 0;
  --nav-case: none;

  --foot-bg: #0f172a;
  --foot-ink: #aab5c7;
  --foot-head: #ffffff;
  --foot-rule: #25324a;
  --foot-link: #ffffff;
}

/* The name is the wordmark until there is a logo, and it is set in the
   display face rather than the bar's. */
.sitehead__name,
.sitefoot__name {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
}

/* The front door and the application page open with the form, and on a
   phone the form comes first. */
@media (max-width: 760px) {
  .head--form {
    padding-top: 18px;
  }
  .head--form .frame {
    padding: 6px;
  }
}

/* The legal pages: numbered heads inside the prose, set smaller than a
   band's h2 so a long document reads as one document. */
.legal h2 {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--ink);
  margin: 2em 0 0.5em;
}
.legal ul {
  padding-left: 1.2em;
}
.legal li {
  margin-bottom: 0.5em;
}