/* ═══════════════════════════════════════════════════════════
   POPULAR BUSINESS BANKING COMPARISONS
   Business Banking category page, directly below Top Business Banks by
   Use Case. Added 2026-09-02.

   Design reference: documents/Popular-Business-Banking-Comparisons.png,
   sha256 0e74a7f24e8ed618cd22c0124327c6804972fe5c3e5ebb641a3ccb54e9156a1f.
   The PNG controls the CARD DESIGN. Its two-column artboard does NOT control
   the layout: the approved responsive behaviour is four-up from 1280.

   ⚠ EVERY SELECTOR IN THIS FILE IS .fp-pc-*. NOTHING IS SHARED.
   The Comparisons index card is FROZEN at v3.40.41 and the four comparison
   articles at v3.40.40. This component deliberately re-declares its footer
   rather than borrowing .fp-collection-card__footer, because that class is
   frozen and shared with the Buying Guides index. Duplication here is the
   point: it makes this component unable to move a frozen surface.

   ⚠ THE SECTION SHELL IS THE USE CASE SHELL, REUSED NOT INVENTED.
   Padding scale, h2 scale, grid gaps and the 64/80px major-section rhythm are
   the values .fp-uc already renders, measured on the live page rather than
   copied by eye:
     rhythm   hero -> Top 4 Picks           80.0px
              Top 4 Picks -> Use Case       80.0px   (64.0 below 640)
     padding  0 20px -> 0 24px @768 -> 0 32px @1440
     h2       28px -> 32 @768 -> 36 @1024, weight 700
   Verified: this grid is edge-aligned with the Use Case grid at every width,
   L and R deltas 0.0.
   ═══════════════════════════════════════════════════════════ */

.fp-pc {
    /* ⚠ ONE GOVERNED VALUE (v3.54.2). Was a 64px literal here and an 80px
       literal in a >=640 block. Both are now --fp-section-gap, which carries
       exactly those numbers and is shared with the homepage. Same rendered
       geometry; one place to change it. See base.css. */
    margin-top: var(--fp-section-gap);
    padding: 0 20px;
}

.fp-pc h2 {
    margin: 0;
    font-size: 28px;
    font-weight: var(--fp-weight-heading);   /* 700 */
    line-height: var(--fp-line-heading);     /* 1.20 */
    letter-spacing: var(--fp-tracking-heading);   /* -0.02em, as every other section H2 (v3.56.0; was subhead -0.01em) */
    color: var(--fp-color-navy);
}

.fp-pc__sub {
    margin: 8px 0 0;
    max-width: 760px;                        /* the Use Case measure */
    font-size: var(--fp-font-body-m);        /* 16px */
    font-weight: var(--fp-weight-body);
    line-height: var(--fp-line-body);
    color: var(--fp-color-gray-500);
}

.fp-pc__grid {
    display: grid;
    /* v3.57.143: minmax(0, 1fr), not 1fr. A bare 1fr track has an automatic minimum equal to the card's min-content width,
       so a provider row wider than the column (Chase / VS / Bank of America = 255.47px) widened the track past the
       viewport: 3px document overflow at 320. The track now always equals the column; the narrow-phone rule below lets
       the content fit inside it. */
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}


/* ── Card ────────────────────────────────────────────────
 * height:100% equalises the cards in a row; the footer's margin-top:auto then
 * anchors every footer to its card's bottom, so the date/CTA rows sit on ONE
 * baseline per row instead of following each description's depth. Both are
 * required — either alone leaves the footers ragged.
 *
 * The card is DELIBERATELY SHORTER than a Use Case card (~234px against ~332).
 * They are the same design family at the same width, not the same height:
 * this card carries less content and padding it out to match would be empty
 * space added for its own sake. */
.fp-pc-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: 24px;
    background-color: var(--fp-color-white);
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-card);
    box-shadow: var(--fp-shadow-card-level-1);
    box-sizing: border-box;
}


/* ── Provider row ────────────────────────────────────────
 * Placeholder / VS / placeholder, each provider named beneath its own mark.
 * This replaces the shared comparison illustration the index card uses: on a
 * category page the pairing itself is the information, and a generic
 * two-panel illustration repeated four times carries none. */
.fp-pc-card__providers {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    margin: 0 0 20px;
}

/* EQUAL COLUMNS, SO THE VS SITS ON THE CARD'S CENTRE LINE.
 *
 * Each column used to be sized by its own provider name, which meant the
 * badge fell between two UNEQUAL columns and drifted off the card's axis.
 * Measured on the real page: Slash's name is 36.9px and Grasshopper's 87.2px,
 * putting the badge 15.58px left of centre at the desktop tier and 21.03px
 * left at one column. The stacks themselves were always fine - each name was
 * centred on its own logo to within 0.01px - it was the BADGE that wandered.
 *
 * flex:1 1 0 gives both columns an identical share of whatever is left after
 * the fixed 38px badge and the two gaps, so the badge lands exactly between
 * them: 113.0 / 113.0 at 1440, and 0.00px offset at all seven QA widths.
 *
 * min-width:0 is load-bearing, not decoration. The provider name is
 * white-space:nowrap; without this a column refuses to shrink below its
 * name's intrinsic width and forces the whole row - and the grid track -
 * wider than the card. That is exactly how the rejected four-up-at-1024
 * experiment overflowed the document to 1145px.
 *
 * The names are TEMPORARY identification labels for the placeholder logos,
 * not a second provider listing. When real logos land, the labels go and this
 * rule still holds the badge on centre. */
.fp-pc-card__provider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

/* A 56x40 ZONE, not a 56x40 image. The approved placeholder is a 48x48 SQUARE
   with its dashed border and LOGO lettering baked in; contain lands it at
   40x40 with its aspect intact. Filling the zone would mean stretching a
   square asset by 40% and visibly distorting both. Rejected by decision. */
.fp-pc-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 40px;
}

.fp-pc-card__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;                     /* aspect preserved, never stretched */
}

.fp-pc-card__provider-name {
    font-size: var(--fp-font-body-m);        /* 16px */
    font-weight: var(--fp-weight-label);     /* 600 */
    line-height: 1.3;
    color: var(--fp-color-navy);
    text-align: center;
    white-space: nowrap;
}

/* Core Blue, by decision. The PNG draws #6487E9, which is not a site token;
   the approved value is --fp-color-blue. */
.fp-pc-card__vs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin-top: 1px;                         /* optical centring on the 40px logo zone */
    border-radius: 50%;
    background-color: var(--fp-color-blue);
    color: var(--fp-color-white);
    font-size: 13px;
    font-weight: var(--fp-weight-heading);
    line-height: 1;
    letter-spacing: .02em;
}


/* ── Title and description ───────────────────────────────
 * The SHORT form, from the approved visual. The full article title is not
 * lost — it is carried in the link's aria-label.
 *
 * CENTRED, as of v3.40.44. It was left-aligned, which put it off the axis
 * every other element in the card sits on: the provider row is centred, the
 * VS badge is pinned to the centreline, and the footer is centred as a group.
 * Left alignment starts every title at the same x, so the offset grew as the
 * title got SHORTER - measured on the real page, Bluevine vs. Slash sat
 * 68.27px left of centre at 1440 and 144.27px left at 2048, while the longest
 * title sat 37.40px left. That variation is what read as lopsided.
 *
 * The DESCRIPTION stays left-aligned and is the only left-aligned element in
 * the card. That is deliberate: a title is a label and centres cleanly, a
 * two-line sentence does not. Do not "harmonise" them.
 *
 * All four titles set on ONE line at every width. The tightest fit is 1280,
 * where the longest title is 209.2px in a 248.0px interior - 38.8px spare. A
 * future pairing with a longer name could wrap to two lines; centring makes a
 * wrapped title read better, not worse, but it would add a line's height to
 * every card in that row. Re-measure if the set changes. */
.fp-pc-card__title {
    margin: 0;
    text-align: center;
    font-size: 20px;
    font-weight: var(--fp-weight-label);
    line-height: var(--fp-line-heading);
    letter-spacing: var(--fp-tracking-subhead);
    color: var(--fp-color-navy);
}

.fp-pc-card__desc {
    margin: 8px 0 0;
    font-size: var(--fp-font-body-m);
    font-weight: var(--fp-weight-body);
    line-height: var(--fp-line-body);
    color: var(--fp-color-gray-500);
}


/* ── Footer ──────────────────────────────────────────────
 * The PROVEN live comparison-card footer: 13px date, 14px CTA, 28px gap, the
 * pair centred as one group. NOT the ~19-20px footer drawn in the PNG — that
 * measures 335.4px intrinsic and cannot fit a four-up desktop row, where the
 * card interior is 248px at 1280. This treatment measures 220.3px and clears
 * it with 27.7px to spare. */
.fp-pc-card__footer {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 28px;
    margin-top: auto;                        /* anchor to the card bottom */
    padding-top: 24px;                       /* guaranteed description -> footer air */
}

.fp-pc-card__updated {
    font-size: var(--fp-font-caption);       /* 13px */
    font-weight: var(--fp-weight-body);
    line-height: 1;
    color: var(--fp-color-gray-500);
    white-space: nowrap;
}

.fp-pc-card__cta {
    display: inline-flex;
    align-items: center;
    font-size: var(--fp-font-body-s);        /* 14px */
    font-weight: var(--fp-weight-medium);    /* 500 */
    line-height: 1;
    color: var(--fp-color-blue);
    text-decoration: none;
    white-space: nowrap;
}

.fp-pc-card__cta:hover {
    text-decoration: underline;
}

.fp-pc-card__cta:focus-visible {
    outline: var(--fp-focus-ring-width) solid var(--fp-focus-ring-color);
    outline-offset: var(--fp-focus-ring-offset);
}

.fp-pc-card__cta .fp-cta-arrow {
    margin-left: var(--fp-cta-arrow-gap);    /* 4px */
}


/* ── Responsive tiers ────────────────────────────────────
 * 640  two-up and the desktop section rhythm
 * 768  the wider page gutter and the 32px h2
 * 1024 the 36px h2 — matching Use Case, even though the GRID stays two-up
 * 1280 FOUR-UP and the compact card
 * 1440 the widest page gutter
 *
 * ⚠ WHY FOUR-UP STARTS AT 1280 AND NOT 1024.
 * Measured, not assumed. At 1024 four tracks would be 226px, a 184px card
 * interior. Both footer halves are white-space:nowrap, so the track is forced
 * past its share: tracks rendered 262.25/262.25/262.25/262.547 — not equal —
 * and the document overflowed to 1145px against a 1024 viewport. At 1280 the
 * tracks are 290px and everything clears. Use Case above goes four-up at 1024;
 * this section deliberately does not, and that difference is the fix, not an
 * oversight. */

/* v3.57.143 - below 360px the card interior (232px at 320) is narrower than the longest provider row (255.47px), so a
   provider name may wrap inside its own column ("Bank of / America"). Each column stays flex 1 1 0 with min-width:0,
   so the VS badge stays on the card's centre line. 360px and wider: unchanged, names stay on one line. */
@media (max-width: 359.98px) {
    .fp-pc-card__provider-name {
        white-space: normal;
    }
}

@media (min-width: 640px) {
    .fp-pc__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (min-width: 768px) {
    .fp-pc {
        padding: 0 24px;
    }
    .fp-pc h2 {
        font-size: 32px;
    }
}

@media (min-width: 1024px) {
    .fp-pc h2 {
        font-size: var(--fp-font-h2);        /* 36px */
    }
}

@media (min-width: 1280px) {
    .fp-pc__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
    .fp-pc-card {
        padding: 20px;
    }
    .fp-pc-card__providers {
        gap: 10px;
        margin-bottom: 16px;
    }
    .fp-pc-card__provider-name {
        font-size: var(--fp-font-body-s);    /* 14px */
    }
    .fp-pc-card__title {
        font-size: 18px;
    }
    .fp-pc-card__desc {
        font-size: var(--fp-font-body-s);
    }
    .fp-pc-card__footer {
        padding-top: 20px;
    }
}

@media (min-width: 1440px) {
    .fp-pc {
        padding: 0 32px;
    }
}

/* ── Section-heading colour governance (v3.40.65) ──────────────────────────
   Category-page convention: NAVY = category/context phrase, GREEN DARK =
   section-purpose phrase. The green is the existing Top 4 Picks authority,
   .tp h2 .g in top-picks.css:24 - Green Dark, palette v1.1. Not a new value
   and not inferred from any other component.

   COLOUR ONLY. The span sets colour and nothing else, so font-size, weight,
   line-height, letter-spacing and margins are all inherited. Verified at 1440
   and 390: line counts and every section height are unchanged. */
.fp-pc h2 .g{color:#338E39}
/* v3.57.145 (P21, owner instruction 2026-10-28): this text action keeps Core Blue in every interactive state. GeneratePress's inline `a:hover, a:focus, a:active { color: var(--contrast) }`
   (#222222, (0,1,1), loaded after this file) won these states. Colour only - size, weight, underline, focus ring and destination unchanged. */
a.fp-pc-card__cta:hover,
a.fp-pc-card__cta:focus,
a.fp-pc-card__cta:focus-visible,
a.fp-pc-card__cta:active { color: var(--fp-color-blue); }