/* =========================================================================
   Funding Xperts — Homepage components (v1.1)
   -------------------------------------------------------------------------
   Loaded ONLY on the front page (see fx_enqueue_assets() in functions.php),
   after tokens.css and style.css. Everything here is either a new component
   introduced by the homepage redesign, or a deliberate override of a
   style.css rule for the homepage only.

   Contents:
      1. Hero and qualifier
      2. Proof strip (kept, not currently rendered)
      5. Process steps
      6. Use-of-funds pills (kept, not currently rendered)
      7. Final CTA band
      8. Reduced motion
      9. Icon sizing
     10. Flagged hero eyebrow
     11. The Numbers / The Story panel
     12. Ways to fund your business
     13. Revisions, 3 September 2026

   Colour rule inherited from tokens.css: brand cyan is a FILL, never ink on
   white. Nothing in this file may set colour: var(--fx-color-brand-cyan) on
   a light background.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Hero + eligibility qualifier
   ------------------------------------------------------------------------- */
.fx-hero {
  background: linear-gradient(168deg, var(--fx-color-bg-alt) 0%, var(--fx-color-bg-tint) 100%);
  padding-block: var(--fx-space-xl) 3.6rem;
  border-bottom: 1px solid var(--fx-color-border);
}

.fx-hero__grid {
  display: grid;
  gap: var(--fx-space-lg);
  align-items: start;
}

@media (min-width: 900px) {
  .fx-hero__grid {
    grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
    gap: 3.25rem;
  }
}

.fx-hero__title {
  font-family: var(--fx-font-display);
  font-size: var(--fx-font-size-xlarge);
  font-weight: 700;
  letter-spacing: var(--fx-tracking-heading);
  line-height: var(--fx-line-height-heading);
  text-wrap: balance;
  margin-bottom: var(--fx-space-md);
}

/* Second clause of the headline, set in deep cyan on a pale ground.
   #0097E8 on #E8FAFB is 3.0:1 — acceptable for large display text only.
   Do NOT reuse this treatment at body size. */
.fx-hero__title em {
  font-style: normal;
  display: block;
  color: var(--fx-color-brand-cyan-deep);
}

.fx-hero__intro {
  font-size: var(--fx-font-size-medium);
  color: var(--fx-color-text-muted);
  max-width: 38ch;
  margin-bottom: var(--fx-space-md);
}

/* The three headline terms — the "what does it cost me / how fast" answer
   that every competitor puts directly under the hero CTA. */
.fx-terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fx-space-xs) 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--fx-space-md);
  font-size: var(--fx-font-size-small);
  font-weight: 500;
}

.fx-terms li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fx-terms svg { flex: none; }

.fx-hero__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ---- the qualifier card ---- */
.fx-qualifier {
  background: var(--fx-color-bg);
  border: 1px solid var(--fx-color-border);
  border-radius: var(--fx-radius-lg);
  box-shadow: var(--fx-shadow-md);
  overflow: hidden;
}

.fx-qualifier__head {
  padding: 1.25rem var(--fx-space-md) var(--fx-space-sm);
  border-bottom: 1px solid var(--fx-color-border);
}

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

.fx-qualifier__head p {
  font-size: var(--fx-font-size-small);
  color: var(--fx-color-text-muted);
  margin: 0;
}

.fx-qualifier__body {
  padding: 1.25rem var(--fx-space-md) var(--fx-space-md);
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

.fx-qualifier .fx-field { margin: 0; }

.fx-qualifier label.fx-qualifier__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.fx-qualifier__hint {
  font-weight: 400;
  color: var(--fx-color-text-faint);
  font-size: var(--fx-font-size-tiny);
}

/* Segmented radio control. The inputs stay in the DOM and keyboard-operable;
   only their painted box is replaced. Focus is mirrored onto the label. */
.fx-segmented {
  display: flex;
  gap: 0.5rem;
}

.fx-segmented input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.fx-segmented label {
  flex: 1;
  text-align: center;
  padding: 0.625rem 0.375rem;
  border: 1.5px solid var(--fx-color-border);
  border-radius: 7px;
  font-size: var(--fx-font-size-small);
  font-weight: 500;
  cursor: pointer;
  background: var(--fx-color-bg);
  margin: 0;
  transition: border-color var(--fx-transition-fast), background-color var(--fx-transition-fast);
}

.fx-segmented input:checked + label {
  border-color: var(--fx-color-brand-cyan-deep);
  background: var(--fx-color-bg-tint);
}

.fx-segmented input:focus-visible + label {
  outline: 3px solid var(--fx-color-focus-ring);
  outline-offset: 2px;
}

/* Two money fields on one row, stacking on a narrow panel.
   The inputs are bottom-aligned rather than top-aligned: "Average monthly
   turnover" wraps to two lines at panel widths where "Loan amount" does not,
   and top-aligning left one input sitting lower than the other. Pushing the
   input to the bottom of its own column keeps the two boxes level whatever
   the labels do. */
.fx-qualifier__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
  align-items: stretch;
}

.fx-qualifier__row > .fx-field {
  display: flex;
  flex-direction: column;
}

.fx-qualifier__row > .fx-field .fx-money {
  margin-top: auto;
}

@media (max-width: 420px) {
  .fx-qualifier__row { grid-template-columns: 1fr; }
}

.fx-money {
  position: relative;
  display: block;
}

/* The symbol is centred by sharing the input's box rather than by a magic
   offset. top/bottom:0 plus flex centring means it stays centred whatever
   the field height or line-height turns out to be, which the old
   translateY(-50%) did not. */
.fx-money__symbol {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fx-font-mono);
  font-size: 0.9375rem;
  color: var(--fx-color-text-faint);
  pointer-events: none;
}

.fx-money input {
  width: 100%;
  height: 46px;
  padding: 0 0.875rem 0 30px;
  font-family: var(--fx-font-mono);
  font-size: 0.9375rem;
  line-height: normal;
  border: 1.5px solid var(--fx-color-border);
  border-radius: 7px;
  background: var(--fx-color-bg);
  color: var(--fx-color-text);
}

.fx-money input:focus {
  border-color: var(--fx-color-brand-cyan-deep);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 151, 232, 0.16);
}

/* Result. Hidden until the form is submitted, then announced via aria-live. */
.fx-verdict {
  border-radius: var(--fx-radius-md);
  padding: 0.9375rem 1.0625rem;
  font-size: 0.90625rem;
  line-height: 1.5;
  display: none;
}

.fx-verdict.is-visible { display: block; }

.fx-verdict--yes {
  background: var(--fx-color-success-bg);
  border: 1px solid var(--fx-color-success-border);
  color: var(--fx-color-success-ink);
}

.fx-verdict--no {
  background: var(--fx-color-error-bg);
  border: 1px solid var(--fx-color-error-border);
  color: var(--fx-color-error-ink);
}

.fx-verdict b {
  display: block;
  font-family: var(--fx-font-display);
  font-size: 1.05rem;
  margin-bottom: 0.1875rem;
}

/* Now shows the amount the visitor asked for, not an invented range. */
.fx-verdict__range {
  font-family: var(--fx-font-mono);
  font-size: 1.28rem;
  color: var(--fx-color-brand-navy);
  display: block;
  margin: 0.5rem 0 0.125rem;
}

.fx-microcopy {
  font-size: 0.71875rem;
  color: var(--fx-color-text-faint);
  line-height: 1.5;
  margin: 0;
}

/* -------------------------------------------------------------------------
   2. Proof strip
   -------------------------------------------------------------------------
   TODO-PROOF: every figure in this strip is a placeholder. Real values are
   required for lender-panel size, total funded, and the borrower fee
   position. Brief §16 forbids inventing them, so they ship visibly marked.
   Remove the "placeholder" <i> once real numbers are supplied.
   ------------------------------------------------------------------------- */
.fx-proof {
  background: var(--fx-color-bg-dark);
  color: var(--fx-color-text-on-dark);
  padding-block: 1.625rem;
}

.fx-proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1.625rem;
}

.fx-proof dl { margin: 0; }

.fx-proof dt {
  font-family: var(--fx-font-mono);
  font-size: 0.65625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fx-color-label-on-dark);
  margin-bottom: 0.375rem;
}

.fx-proof dd {
  margin: 0;
  font-family: var(--fx-font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--fx-color-bg);
  letter-spacing: -0.02em;
  line-height: 1;
}

.fx-proof dd i {
  font-style: normal;
  color: var(--fx-color-brand-aqua);
  font-size: 0.62em;
}

/* -------------------------------------------------------------------------
   4. Platform / Open Banking band
   ------------------------------------------------------------------------- */
.fx-platform {
  background: var(--fx-color-bg-darker);
  padding-block: var(--fx-space-xl);
}

.fx-platform__grid {
  display: grid;
  gap: var(--fx-space-lg);
  align-items: center;
}

@media (min-width: 900px) {
  .fx-platform__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
    gap: 3.5rem;
  }
}

.fx-platform h2 {
  font-family: var(--fx-font-display);
  color: var(--fx-color-bg);
  margin-bottom: var(--fx-space-sm);
}

.fx-platform p {
  color: var(--fx-color-text-on-dark-muted);
  max-width: 52ch;
}

.fx-platform__assurances {
  list-style: none;
  padding: 0;
  margin: var(--fx-space-md) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
}

.fx-platform__assurances li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--fx-color-text-on-dark);
}

.fx-platform__assurances svg {
  flex: none;
  margin-top: 3px;
}

/* -------------------------------------------------------------------------
   5. Process steps
   -------------------------------------------------------------------------
   Numbered because this genuinely is a sequence — the order is the content.
   ------------------------------------------------------------------------- */
.fx-steps {
  counter-reset: fx-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.875rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.fx-steps li,
body.elementor-page .fx-steps > .e-con {
  counter-increment: fx-step;
  padding-top: 1.25rem;
  border-top: 2px solid var(--fx-color-brand-cyan);
}

.fx-steps li::before,
body.elementor-page .fx-steps > .e-con::before {
  content: "0" counter(fx-step);
  font-family: var(--fx-font-mono);
  font-size: var(--fx-font-size-tiny);
  color: var(--fx-color-brand-cyan-deep);
  display: block;
  margin-bottom: 0.5625rem;
  letter-spacing: 0.08em;
}

.fx-steps h3 {
  font-family: var(--fx-font-display);
  font-size: 1.16rem;
  letter-spacing: -0.012em;
  margin: 0 0 0.4375rem;
}

.fx-steps p {
  font-size: var(--fx-font-size-small);
  color: var(--fx-color-text-muted);
  margin: 0;
}

/* -------------------------------------------------------------------------
   6. Use-of-funds pills
   ------------------------------------------------------------------------- */
.fx-uses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-uses li {
  border: 1px solid var(--fx-color-border);
  background: var(--fx-color-bg);
  border-radius: var(--fx-radius-pill);
  padding: 0.5625rem 1.0625rem;
  font-size: var(--fx-font-size-small);
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   7. Final CTA band
   -------------------------------------------------------------------------
   Overrides the dark .fx-cta-band from style.css for the homepage: a cyan
   gradient with navy text (6.43:1 at the darkest stop, higher at the aqua
   end), which is the fill-not-ink rule applied at section scale.
   ------------------------------------------------------------------------- */
.fx-final {
  background: linear-gradient(120deg, var(--fx-color-brand-cyan) 0%, var(--fx-color-brand-aqua) 100%);
  padding-block: 4.125rem;
}

.fx-final__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--fx-space-lg);
  flex-wrap: wrap;
}

.fx-final h2 {
  font-family: var(--fx-font-display);
  color: var(--fx-color-brand-navy);
  max-width: 20ch;
  margin: 0;
}

.fx-final p {
  color: var(--fx-color-on-brand-muted);
  margin: 0.75rem 0 0;
  max-width: 42ch;
}

.fx-final__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Navy fill on the cyan band — the inverse of the usual pairing. */
.fx-btn--on-brand {
  background-color: var(--fx-color-brand-navy);
  color: var(--fx-color-bg);
  border-color: var(--fx-color-brand-navy);
}

.fx-btn--on-brand:hover {
  background-color: var(--fx-color-secondary-hover);
  color: var(--fx-color-bg);
}

.fx-btn--outline-on-brand {
  background-color: transparent;
  color: var(--fx-color-brand-navy);
  border-color: var(--fx-color-brand-navy);
}

.fx-btn--outline-on-brand:hover {
  background-color: rgba(255, 255, 255, 0.35);
  color: var(--fx-color-brand-navy);
}

/* -------------------------------------------------------------------------
   8. Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-product,
  .fx-segmented label {
    transition: none;
  }
  .fx-product:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   9. Icon sizing inside the new components
   -------------------------------------------------------------------------
   fx_icon() renders a 24x24 stroke glyph with the class .fx-icon; style.css
   gives it a default size for the card components. These are the sizes the
   homepage components need instead.
   ------------------------------------------------------------------------- */
/* Use-of-funds pills: small icon, then the label. */
.fx-uses li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.fx-uses__icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--fx-color-brand-cyan-deep);
}

/* fx_tick() badges are already sized by their width/height attributes; this
   only stops them being stretched by a flex parent. */
.fx-tick { flex: none; }

/* -------------------------------------------------------------------------
   10. Highlighted hero eyebrow
   -------------------------------------------------------------------------
   The standard .fx-eyebrow is a quiet mono label. On the hero it needs to
   carry weight, so it becomes a filled chip: pale aqua ground, navy ink.
   That is the fill-not-ink rule again, at label scale (navy on #E8FAFB is
   well above AA).
   ------------------------------------------------------------------------- */
.fx-eyebrow--flag {
  display: inline-block;
  background: var(--fx-color-bg-tint);
  border: 1px solid var(--fx-color-brand-aqua);
  color: var(--fx-color-brand-navy);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--fx-radius-pill);
  letter-spacing: 0.08em;
}

/* -------------------------------------------------------------------------
   11. The Numbers / The Story panel
   -------------------------------------------------------------------------
   Two columns making one argument: the figures a lender sees, beside the
   context that explains them. Sits on the dark band, so every colour here is
   an on-dark token.
   ------------------------------------------------------------------------- */
.fx-story {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--fx-color-border-on-dark);
  border-radius: var(--fx-radius-lg);
  padding: var(--fx-space-md);
}

.fx-story__grid {
  display: grid;
  gap: var(--fx-space-md);
}

@media (min-width: 620px) {
  .fx-story__grid { grid-template-columns: 1fr 1fr; }
}

.fx-story__col {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--fx-color-border-on-dark);
  border-radius: var(--fx-radius-md);
  padding: 1.125rem;
}

.fx-story__eyebrow {
  font-family: var(--fx-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fx-color-brand-aqua);
  margin: 0 0 0.25rem;
}

.fx-story__caption {
  font-size: 0.8125rem;
  color: var(--fx-color-text-on-dark-muted);
  margin: 0 0 1rem;
}

.fx-story__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* Hairline between rows rather than a box around each: five stacked cards
   would read as five separate objects, and this is one list. */
.fx-story__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0;
}

.fx-story__list > .fx-story__row:first-child,
.fx-story__list > li:first-child { border-top: 0; }

.fx-story__row dt {
  font-size: 0.875rem;
  color: var(--fx-color-text-on-dark);
  margin: 0;
}

.fx-story__row dd {
  margin: 0;
  font-family: var(--fx-font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fx-color-brand-aqua);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The Story column has no value cell, so its rows are two columns wide. */
.fx-story__row--story {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: flex-start;
}

.fx-story__row--story p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--fx-color-text-on-dark);
  line-height: 1.45;
  padding-top: 3px;
}

.fx-story__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}

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

/* Numbers column: outlined ring, brand aqua. */
.fx-story__icon--ring {
  border: 1.5px solid rgba(140, 234, 234, 0.45);
  color: var(--fx-color-brand-aqua);
}

/* Story column: solid discs, one hue per reason. These four are the only
   place in the theme that uses colour categorically rather than as brand, so
   they are deliberately muted enough to sit under the navy band without
   competing with the cyan. */
.fx-story__icon--disc { color: #ffffff; }
.fx-story__icon--plum  { background: #6D4AA8; }
.fx-story__icon--amber { background: #B5541A; }
.fx-story__icon--blue  { background: #2A62A8; }
.fx-story__icon--green { background: #3A7A44; }

@media (max-width: 619px) {
  .fx-story { padding: 1rem; }
}

/* =========================================================================
   12. "Ways to fund your business"
   -------------------------------------------------------------------------
   A dark band carrying four blocks: the pitch, the routing diagram, the five
   category cards, and the support panels. Structured so each block can be
   restyled without disturbing the others.
   ========================================================================= */
.fx-funding {
  background: var(--fx-color-bg-darker);
  padding-block: var(--fx-space-xl);
}

/* ---- 12a. Pitch and diagram, side by side ---- */
.fx-funding__top {
  display: grid;
  gap: var(--fx-space-lg);
  align-items: start;
  margin-bottom: var(--fx-space-lg);
}

@media (min-width: 980px) {
  .fx-funding__top {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 3rem;
  }
}

.fx-funding h2 {
  font-family: var(--fx-font-display);
  color: var(--fx-color-bg);
  font-size: clamp(1.72rem, 3.2vw, 2.6rem);
  margin-bottom: var(--fx-space-sm);
}

.fx-funding__intro {
  color: var(--fx-color-text-on-dark-muted);
  max-width: 46ch;
  margin-bottom: var(--fx-space-md);
}

.fx-tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--fx-color-border-on-dark);
  border-radius: var(--fx-radius-md);
  padding: 0.9375rem 1.25rem;
  margin: 0;
  font-size: 1.05rem;
  color: var(--fx-color-text-on-dark);
}

.fx-tagline strong {
  color: var(--fx-color-brand-aqua);
  font-weight: 500;
}

.fx-tagline__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--fx-radius-md);
  border: 1.5px solid rgba(140, 234, 234, 0.4);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--fx-color-brand-aqua);
}

.fx-tagline__icon .fx-icon { width: 19px; height: 19px; }

/* ---- 12b. Routing diagram ---- */
.fx-routing {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--fx-color-border-on-dark);
  border-radius: var(--fx-radius-lg);
  padding: var(--fx-space-md);
}

.fx-routing__flow {
  display: grid;
  gap: var(--fx-space-md);
  align-items: center;
  justify-items: center;
}

/* Five tracks on desktop: input, arrow, hub, fan, outcomes. The fan gets a
   fixed-width column so its viewBox maps predictably onto the gap. */
@media (min-width: 700px) {
  .fx-routing__flow {
    grid-template-columns: minmax(96px, 1fr) 28px minmax(120px, 1.15fr) 70px auto;
    gap: 0.5rem;
    justify-items: stretch;
  }
}

.fx-routing__stage {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.fx-routing__stage p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fx-color-text-on-dark-muted);
  max-width: 20ch;
}

.fx-routing__glyph {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1.5px solid rgba(140, 234, 234, 0.4);
  display: grid;
  place-items: center;
  color: var(--fx-color-brand-aqua);
}

.fx-routing__glyph .fx-icon { width: 26px; height: 26px; }

.fx-routing__arrow {
  /* Aqua, not brand cyan: every other glyph on this dark band is aqua, and
     the blanket "cyan is never ink" rule stays unbroken. */
  color: var(--fx-color-brand-aqua);
  display: grid;
  place-items: center;
}

.fx-routing__arrow .fx-icon { width: 26px; height: 26px; }

.fx-routing__hub { display: block; width: 108px; height: 108px; }
.fx-routing__hub svg { width: 100%; height: 100%; display: block; }

/* Decorative connectors, hidden on narrow screens where the diagram stacks
   and the curves would point nowhere. */
.fx-routing__fan { display: none; }

@media (min-width: 700px) {
  .fx-routing__fan {
    display: block;
    width: 70px;
    height: 260px;
    align-self: center;
  }
}

.fx-routing__outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.fx-routing__outcomes li {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  font-size: 0.875rem;
  color: var(--fx-color-text-on-dark);
}

@media (min-width: 700px) {
  .fx-routing__outcomes li { white-space: nowrap; }
}

.fx-routing__pip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 204, 231, 0.45);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--fx-color-brand-aqua);
}

.fx-routing__pip .fx-icon { width: 15px; height: 15px; }

.fx-routing__note {
  margin: var(--fx-space-md) 0 0;
  padding-top: var(--fx-space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-size: 0.875rem;
  color: var(--fx-color-brand-aqua);
}

/* ---- 12c. Category cards ---- */
.fx-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--fx-space-sm);
  margin-bottom: var(--fx-space-sm);
}

.fx-product {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--fx-color-border-on-dark);
  border-radius: var(--fx-radius-lg);
  padding: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}

.fx-product h3 {
  font-family: var(--fx-font-display);
  font-size: 1.06rem;
  letter-spacing: -0.012em;
  color: var(--fx-color-bg);
  margin: 0;
}

.fx-product p {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fx-color-text-on-dark-muted);
  margin: 0;
  flex: 1;
}

.fx-product__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--fx-color-bg);
  margin-bottom: 0.375rem;
}

.fx-product__icon .fx-icon { width: 24px; height: 24px; }

/* One hue per category. Muted enough to sit under the navy band without
   competing with the brand cyan, and distinct from one another at a glance. */
.fx-product__icon--blue  { background: #1D4E8F; }
.fx-product__icon--green { background: #1F6B4F; }
.fx-product__icon--plum  { background: #5B3E96; }
.fx-product__icon--gold  { background: #9A7415; }
.fx-product__icon--steel { background: #2E5C86; }

.fx-product__go {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fx-color-brand-aqua);
  text-decoration: none;
}

.fx-product__go .fx-icon { width: 16px; height: 16px; }
.fx-product__go:hover { color: var(--fx-color-bg); text-decoration: underline; }

/* ---- 12d. Support panels ---- */
.fx-support {
  display: grid;
  gap: var(--fx-space-md);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--fx-color-border-on-dark);
  border-radius: var(--fx-radius-lg);
  padding: var(--fx-space-md);
}

@media (min-width: 860px) {
  .fx-support { grid-template-columns: 1.5fr 1fr 1fr; }
  .fx-support__item + .fx-support__item {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: var(--fx-space-md);
  }
}

.fx-support__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.fx-support__item h3 {
  font-family: var(--fx-font-display);
  font-size: 1.02rem;
  color: var(--fx-color-bg);
  margin: 0 0 0.25rem;
}

.fx-support__item p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fx-color-text-on-dark-muted);
}

.fx-support__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(140, 234, 234, 0.4);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--fx-color-brand-aqua);
}

.fx-support__icon .fx-icon { width: 22px; height: 22px; }

/* The lead panel carries the question, so it gets a filled disc and a larger
   heading. The other two are supporting detail. */
.fx-support__item--lead .fx-support__icon {
  width: 62px;
  height: 62px;
  background: #14614F;
  border-color: transparent;
  color: var(--fx-color-bg);
}

.fx-support__item--lead .fx-support__icon .fx-icon { width: 28px; height: 28px; }
.fx-support__item--lead h3 { font-size: 1.24rem; }

/* =========================================================================
   13. Revisions, 3 September 2026
   ========================================================================= */

/* ---- 13a. Flagged eyebrow on a dark band ----
   The hero uses .fx-eyebrow--flag as a pale chip on a light ground. Inside a
   .fx-on-dark section the same modifier inverts: a translucent aqua ground
   with aqua text, plus a soft outer glow so it reads as lit rather than
   merely tinted. Two shadows, one tight and one wide, which is what gives the
   halo depth instead of a flat ring. */
.fx-on-dark .fx-eyebrow--flag {
  background: rgba(0, 204, 231, 0.10);
  border-color: rgba(140, 234, 234, 0.55);
  color: var(--fx-color-brand-aqua);
  box-shadow:
    0 0 0 4px rgba(0, 204, 231, 0.07),
    0 0 22px -2px rgba(0, 204, 231, 0.45);
}

/* ---- 13b. Assurances now carry a heading and a line of detail ---- */
.fx-platform__assurances li {
  align-items: flex-start;
  gap: 0.8125rem;
}

.fx-platform__assurances li > span {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.fx-platform__assurances strong {
  font-family: var(--fx-font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.008em;
  color: var(--fx-color-bg);
}

.fx-platform__assurances li > span > span {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fx-color-text-on-dark-muted);
}

/* ---- 13c. The Numbers and The Story, row for row ----
   The two columns hold four items each but the text in the right column wraps
   to two lines while the left column does not, so the rows drifted out of
   step. Both cards already stretch to the same height; giving each list four
   equal rows inside that height puts every row on the same baseline as its
   opposite number, whatever the copy does. */
.fx-story__col {
  display: flex;
  flex-direction: column;
}

.fx-story__list {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  align-content: stretch;
}

/* Rows are grid items now, so the flex-era rules need restating. */
.fx-story__row {
  align-content: center;
}

.fx-story__row--story {
  align-items: center;
}

.fx-story__row--story p {
  padding-top: 0;
}

/* ---- 13d. Routing diagram: connectors that track the list ----
   The fan was a fixed 260px tall while the outcome list is whatever five rows
   of text happen to measure, so the curves met the labels only by luck. The
   SVG now stretches to the row and scales its viewBox with it, which keeps
   each curve pointing at its own label at every width. */
@media (min-width: 700px) {
  .fx-routing__flow {
    align-items: stretch;
  }

  .fx-routing__fan {
    height: auto;
    align-self: stretch;
    min-height: 220px;
  }

  .fx-routing__stage {
    justify-content: center;
  }

  /* The outcome list sets the height of the row, so it must not also be
     vertically centred inside it, or the fan scales against dead space. */
  .fx-routing__outcomes {
    justify-content: space-between;
    height: 100%;
  }
}

/* =========================================================================
   14. Fixes, 4 September 2026 (1.8.1)
   ========================================================================= */

/* ---- 14a. Routing diagram: long outcome labels escaping the panel ----
   The five outcome labels were rendering past the right border of the
   .fx-routing card.

   Cause, and it took all three of these to go wrong together:

     1. The outcomes sit in an `auto` grid track, which sizes to max-content.
     2. .fx-routing__outcomes li was given `white-space: nowrap` at 700px and
        up, so a label could not wrap.
     3. A grid item's default `min-width` is auto, so the track could not be
        squeezed below that max-content width either.

   With "Asset & Equipment Finance" and "Revolving Credit Facilities" in the
   list, max-content exceeded the space the column had, and the grid overflowed
   its parent. body has overflow-x: hidden, so nothing scrolled: the text
   simply drew outside the card.

   Fixed in three parts, and the third is the one that matters:

     - the track widths give back roughly 35px, so the longest label still fits
       on one line at container width. This is tuning, and tuning alone would
       break again the moment a category was renamed.
     - the outcomes track and list are allowed to shrink, via minmax(0, auto)
       and min-width: 0.
     - nowrap is lifted, so a label that genuinely cannot fit wraps inside the
       panel instead of escaping it. Whatever the width and whatever the copy,
       the text now stays in the box.

   The fan is decorative and stretches (preserveAspectRatio="none"), so it is
   set to fill whatever its column is rather than carrying a second hard-coded
   width that has to be kept in step with the grid.
*/
@media (min-width: 700px) {
  .fx-routing__flow {
    grid-template-columns:
      minmax(84px, 0.9fr)   /* input stage; the glyph is 66px */
      28px                  /* arrow; the icon is 26px, do not shrink further */
      minmax(108px, 1fr)    /* hub; the dial is exactly 108px */
      58px                  /* connector fan */
      minmax(0, auto);      /* outcomes; may now shrink */
  }

  .fx-routing__fan {
    width: 100%;
  }

  .fx-routing__outcomes {
    min-width: 0;
  }

  /* The label, not the pip. The pip is flex: none and must keep its size. */
  .fx-routing__outcomes li > span:last-child {
    white-space: normal;
    min-width: 0;
    overflow-wrap: break-word;
  }
}

/* ---- 14b. The two columns of the top band now end level ----
   The pitch column (eyebrow, heading, intro, tagline strip) runs about 40px
   taller than the routing card beside it, so the "One application. Multiple
   funding possibilities." strip finished below the bottom of the card and the
   band looked untidy.

   .fx-funding__top sets `align-items: start`, which is what kept the card at
   its natural height instead of filling the row. Letting the row stretch is
   only half of it: .fx-routing is a plain block, so the extra height would
   have become dead space under the note rather than being used. Making it a
   flex column and letting the diagram absorb the difference puts the space
   where it reads as breathing room, and leaves the note sitting just above
   the bottom edge as before.

   Only at 980px and up, which is where the band is actually two columns. Below
   that it stacks and `align-items: start` is still what you want.

   Note this aligns the BOTTOM edges. If the pitch copy is ever shortened
   enough that the card becomes the taller of the two, the card keeps its own
   height and the tagline stays put rather than being pushed down the column
   to meet it: a strip floating a long way below the paragraph above it would
   look worse than the small mismatch it fixed.
*/
@media (min-width: 980px) {
  .fx-funding__top {
    align-items: stretch;
  }

  .fx-routing {
    display: flex;
    flex-direction: column;
  }

  .fx-routing__flow {
    flex: 1;
  }
}