/* =========================================================================
   Funding Xperts — Funding Solutions and About Us
   -------------------------------------------------------------------------
   Loaded on page-funding-solutions.php and page-about-us.php, after
   tokens.css, style.css and home.css. It depends on home.css for the
   components those two pages reuse: the hero type scale, .fx-eyebrow--flag,
   the .fx-product__icon--* tone discs, the .fx-proof figures band, the
   .fx-platform dark band and the .fx-final closing band.

   Was solutions.css until 1.8.0, when About Us was rebuilt from the same
   components and would otherwise have needed a near-identical second sheet.

   WHY THIS IS A SEPARATE FILE AND NOT A SECTION OF home.css
   home.css is loaded by the homepage. Keeping these rules out of it means the
   homepage's stylesheet is byte-for-byte what it was at 1.6.1, so no other
   page can change the homepage even by accident. That is worth one extra
   request on two pages.

   LAYOUT GLUE ONLY. Every colour, radius, shadow, font and space below is an
   existing token, and every component this page is built from already ships
   elsewhere in the theme. Nothing here introduces a new visual idea; it
   positions things the theme already owns.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------
   The first paragraph keeps .fx-hero__intro. The two after it are ordinary
   body copy held to a readable measure; three paragraphs at hero-intro size
   would be a wall of large text.
   ------------------------------------------------------------------------- */
.fx-solutions__lede {
  color: var(--fx-color-text-muted);
  max-width: 46ch;
  margin-bottom: var(--fx-space-sm);
}

/* -------------------------------------------------------------------------
   2. The jump list
   -------------------------------------------------------------------------
   Sits in the hero column the qualifier card occupies on the homepage, and
   borrows that card's chrome: white ground, hairline border, large radius,
   the deeper of the two shadows.
   ------------------------------------------------------------------------- */
.fx-jump {
  background: var(--fx-color-bg);
  border: 1px solid var(--fx-color-border);
  border-radius: var(--fx-radius-lg);
  box-shadow: var(--fx-shadow-md);
  padding: var(--fx-space-md);
}

.fx-jump__title {
  font-family: var(--fx-font-display);
  font-size: 1.2rem;
  letter-spacing: -0.012em;
  margin: 0 0 0.25rem;
}

.fx-jump__note {
  font-size: var(--fx-font-size-small);
  color: var(--fx-color-text-muted);
  margin: 0 0 var(--fx-space-sm);
}

.fx-jump__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fx-jump__list li + li {
  border-top: 1px solid var(--fx-color-border);
}

.fx-jump__list a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  color: var(--fx-color-link);
  text-decoration: none;
  font-weight: 500;
}

.fx-jump__list a:hover .fx-jump__label {
  text-decoration: underline;
}

.fx-jump__label { flex: 1; }

/* The tone discs from the homepage category cards, at list size. */
.fx-jump__pip {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--fx-color-bg);
}

.fx-jump__pip .fx-icon { width: 17px; height: 17px; }

.fx-jump__arrow {
  display: grid;
  place-items: center;
  color: var(--fx-color-brand-cyan-deep);
  flex: none;
  transition: transform var(--fx-transition-fast);
}

.fx-jump__arrow .fx-icon { width: 18px; height: 18px; }
.fx-jump__list a:hover .fx-jump__arrow { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   3. A funding family
   ------------------------------------------------------------------------- */
/* Five sections run in a row here, so they are tighter than a standalone
   .fx-section. The rhythm still reads as the site's, at page-of-sections pace
   rather than one-section-per-idea pace. */
.fx-solution {
  padding-block: 3.25rem;
}

.fx-solution__head {
  display: flex;
  align-items: center;
  gap: var(--fx-space-sm);
  margin-bottom: var(--fx-space-md);
}

@media (min-width: 700px) {
  .fx-solution__head {
    gap: var(--fx-space-md);
  }
}

.fx-solution__head h2 {
  margin: 0 0 0.2rem;
}

/* .fx-product__icon carries a bottom margin for the homepage card stack,
   which is wrong beside a heading. */
.fx-solution__disc {
  margin-bottom: 0;
}

.fx-solution__sub {
  margin: 0;
  font-size: var(--fx-font-size-medium);
  color: var(--fx-color-text-muted);
}

.fx-solution__intro {
  max-width: 68ch;
  margin-bottom: var(--fx-space-md);
}

.fx-solution__intro p:last-child { margin-bottom: 0; }

.fx-solution__lead {
  margin-top: var(--fx-space-sm);
  font-weight: 600;
  color: var(--fx-color-heading);
}

.fx-solution__products {
  margin-bottom: var(--fx-space-md);
}

.fx-solution__cta {
  margin: 0;
}

/* -------------------------------------------------------------------------
   4. About Us
   -------------------------------------------------------------------------
   The page uses the homepage's hero, proof strip, card grid, "whole story"
   dark band and closing band as they are. These four rules are the only
   additions: a measure for the hero column, body copy under the hero lead,
   and the qualifier line under the figures.
   ------------------------------------------------------------------------- */

/* A single-column hero, so the text needs a measure of its own. The homepage
   hero gets one from its two-column grid; this page has no second column
   because a "meet the team" panel is exactly what was not wanted here. */
.fx-about__lede {
  max-width: 46rem;
}

/* .fx-hero__intro is capped at 38ch for the narrow homepage column. In a
   46rem single column that reads as an arbitrary early wrap. */
.fx-about__lede .fx-hero__intro {
  max-width: none;
}

.fx-about__body {
  color: var(--fx-color-text-muted);
  margin-bottom: var(--fx-space-sm);
}

/* The qualifier under the three figures. Not decorative: a bare "100+
   lenders" invites the reading that all of them are open to any business,
   which is not true of a broker panel. */
.fx-proof__note {
  margin: var(--fx-space-md) 0 0;
  padding-top: var(--fx-space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 78ch;
  font-size: var(--fx-font-size-small);
  color: var(--fx-color-text-on-dark-muted);
}

/* -------------------------------------------------------------------------
   5. About Us: the "whole story" scenarios
   -------------------------------------------------------------------------
   The three scenarios reuse .fx-story from home.css wholesale. The homepage's
   version of that row carries a single line of prose; here each row has a
   short title as well, so the title needs to sit on its own line above it.
   That is the entire difference.
   ------------------------------------------------------------------------- */
.fx-about__story .fx-story__row--story p strong {
  display: block;
  font-family: var(--fx-font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.008em;
  color: var(--fx-color-bg);
  margin-bottom: 0.125rem;
}

/* home.css section 13c makes .fx-story__list a grid of FOUR equal rows, so
   that the homepage's Numbers and Story columns line up row for row. This
   panel has three rows and no opposite column to line up with, so that rule
   gives it a phantom fourth row and about 115px of dead space under the last
   scenario. Back to the plain stacked list section 11 defines. */
.fx-about__story .fx-story__list {
  display: flex;
  flex-direction: column;
  flex: none;
}