/* ═══════════════════════════════════════════════════════════
   FINANCEPROSPECTOR ARTICLE — v4.0
   Rebuilt from zero on the approved visual foundation.

   AUTHORITY
     Design system  — typography, colour, radii, spacing, container
                      (assets/css/base.css + frozen components)
     Visual master  — composition and proportion only
                      (previews/business.banking.article.template.png)

   NO ARTICLE-SPECIFIC COLOURS. Every value is a production token or
   the approved category tint. The five invented hexes from the rejected
   implementation are gone.

   CONTAINER: the frozen homepage system — 1500px max, 32/24/20 gutters —
   so the article sits on the same grid as every other FinanceProspector
   section. That exceeds GeneratePress's 1200px #page cap, so the wrapper
   is released for this template only.
   ═══════════════════════════════════════════════════════════ */

.page-template-article #page.grid-container {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.fp-article-main { flex: 1 1 100%; min-width: 0; }

/* NO font-family declaration.
 *
 * Measured on live staging: 'Inter' is NOT installed or loaded - a canvas
 * probe renders it identically to a nonexistent face (557.66px) while
 * system-ui measures 588.18px. Every frozen CONTENT component - Resource
 * Center heading, card title, card description, nav, footer heading, footer
 * links - computes to the body stack:
 *   -apple-system, system-ui, "system-ui", "Segoe UI", Helvetica, Arial,
 *   sans-serif, emoji…
 * Only the homepage hero declares Inter-first, and it too renders through
 * that fallback.
 *
 * Declaring anything here produced a stack the rest of the site does not use.
 * The article now INHERITS the production body stack, exactly as the frozen
 * content components do. No new font is loaded and no third stack exists. */
.fp-article {
    background-color: var(--fp-color-white);
    padding-bottom: var(--fp-space-xxl);
}

.fp-article__container {
    /* ONE editorial canvas. An article is not the homepage: 1200px centred
       gives ~120px of true page margin each side at 1440. Every article
       element aligns to this axis. */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--fp-margin-mobile);       /* 20px */
    box-sizing: border-box;
}

/* ── HERO ─────────────────────────────────────────────────
 * One bordered, rounded, tinted container around copy AND artwork.
 * No shadow: no approved FinanceProspector hero container uses one. */
/* SELECTOR REPAIR v3.16.4 - the hero rules below target
   .fp-article__hero, but page-templates/article.php wraps the hero in
   .fp-article__hero-band. That class has NEVER appeared in the template
   (verified with git log -S across all history), so every hero rule -
   the two-column grid, the tint, the padding - matched nothing in
   production. The image fell back to max-width:100% of the full 1200px
   container and rendered 1200x669.7 instead of the approved 385.6x215.2.
   Invisible until v3.16.3 because the article fatalled before the body
   rendered, and before that the inverted conditional suppressed it.
   Fix is ADDITIVE: .fp-article__hero-band added to each selector, so the
   approved preview harness (which uses .fp-article__hero) still matches.
   No declaration changed. No markup changed. */
.fp-article__hero,
.fp-article__hero-band {
    margin-top: var(--fp-space-s);
    /* Vertical rhythm tightened one token, --fp-space-m -> --fp-space-s, to
       reduce the overall hero height. Horizontal padding is unchanged. Token
       swap, not a magic number. */
    padding: var(--fp-space-s) var(--fp-space-m);
    /* WHITE, not the former rgba(37,99,235,.06) Business Banking tint.
       The tint was doing the container's job: it read as the hero's edge,
       which is why the 1px gray-200 border below was invisible against it.
       On white that border carries the container on its own, matching
       .fp-editorial-card, .fp-category-hero and the collection cards —
       same 1px, same --fp-color-gray-200, same --fp-radius-card. */
    background-color: var(--fp-color-white);
    /* compact editorial hero: tight vertical rhythm inside the container */
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-card);
    box-sizing: border-box;
}

.fp-article__pill.fp-resource-card__badge {
    /* v3.56.8: inline-flex, not inline-block. Both sit on the copy's line by
       baseline, but an inline-block uses its LAST line's baseline and an
       inline-flex its FIRST, so a pill that wraps to two lines (Best Online
       at 360-363px) no longer jumps 4px higher than a one-line pill - the
       band -> label distance stays the same. One-line pills do not move. */
    display: inline-flex;
    align-self: auto;
    margin: 0 0 12px;
    background-color: var(--fp-color-white);
}

.fp-article__h1 {
    margin: 0;
    font-size: 30px;                          /* 36px at desktop */
    font-weight: var(--fp-weight-heading);
    line-height: var(--fp-line-heading);      /* 1.20 */
    letter-spacing: var(--fp-tracking-heading);
    color: var(--fp-color-navy);
}

.fp-article__dek {
    margin: 10px 0 0;
    font-size: var(--fp-font-body-m);         /* Body L at desktop */
    font-weight: var(--fp-weight-body);
    line-height: var(--fp-line-body);
    color: var(--fp-color-gray-500);
    max-width: 52ch;
}

.fp-article__meta {
    display: flex;
    align-items: center;
    gap: var(--fp-space-xs);
    margin: 14px 0 0;
    font-size: var(--fp-font-body-s);
    color: var(--fp-color-gray-500);
}
.fp-article__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex: 0 0 28px;
    border-radius: 999px;
    background-color: var(--fp-color-navy);
    color: var(--fp-color-white);
    font-size: 10px; font-weight: var(--fp-weight-heading);
}
.fp-article__meta-sep { color: var(--fp-color-gray-300); }

/* Transparent artwork directly on the tint — no card, no border, no plate. */
.fp-article__hero-figure { margin: var(--fp-space-m) 0 0; }
.fp-article__hero-img {
    display: block; width: 100%; height: auto;
    max-width: 340px; margin: 0 auto;
}

/* ── PROVIDER MODULE ──────────────────────────────────────
 * One light editorial strip, not four product cards. */
.fp-providers {
    /* Compact editorial recommendation strip, centred and deliberately
       narrower than the full 1500px canvas. */
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--fp-space-m);
    background-color: var(--fp-color-white);
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-card);
    box-sizing: border-box;
}
.fp-providers__heading {
    margin: 0;
    padding: 14px var(--fp-space-m) 12px;
    font-size: var(--fp-font-body-l);         /* 18px */
    font-weight: var(--fp-weight-heading);
    line-height: var(--fp-line-heading);
    letter-spacing: var(--fp-tracking-subhead);
    color: var(--fp-color-navy);
}
.fp-providers__list { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.fp-providers__item {
    display: flex; flex-direction: column; align-items: center;
    gap: 5px;
    padding: 14px var(--fp-space-s) 16px;
    text-align: center;
    border-top: 1px solid var(--fp-color-gray-200);
}
/* No frame, no radius, no shadow around the placeholder: the missing-logo
   state must not become a visual element. */
.fp-providers__logo img { display: block; width: 34px; height: 34px; opacity: .5; }
.fp-providers__name {
    font-size: var(--fp-font-body-m);         /* 16px */
    font-weight: var(--fp-weight-label);
    line-height: 1.3;
    color: var(--fp-color-navy);
}
.fp-providers__score { display: flex; flex-direction: column; align-items: center; gap: 0; }
.fp-providers__score-value {
    font-size: var(--fp-font-body-m);
    font-weight: var(--fp-weight-heading);
    /* Canonical score colour; see the rule in editors-picks.css. Supersedes navy.
       .fp-providers__score-denom inherits, so /10 follows. */
    color: var(--fp-color-green);   /* v3.57.140 (owner, 2026-10-26): FinanceProspector score colour Core Green #42B649. Was --fp-color-score-text #15803D */
}
.fp-providers__score-denom { font: inherit; color: inherit; }
.fp-providers__score-label {
    font-size: var(--fp-font-caption);
    letter-spacing: var(--fp-tracking-caption);
    color: var(--fp-color-gray-500);
}
/* v3.57.112 - the reviewed plan under a provider's name, printed only where a module asks for it (How To guide).
   The score label's existing caption typography, on its own line. */
.fp-providers__plan {
    display: block;
    font-size: var(--fp-font-caption);
    font-weight: var(--fp-weight-body);
    letter-spacing: var(--fp-tracking-caption);
    line-height: 1.3;
    color: var(--fp-color-gray-500);
}
.fp-providers__score-pending {
    font-size: var(--fp-font-body-s);
    color: var(--fp-color-gray-500);
    font-style: italic;
}
.fp-providers__cta {
    display: inline-flex; align-items: center;
    font-size: var(--fp-font-body-s);
    font-weight: var(--fp-weight-medium);
    line-height: 1;
    color: var(--fp-color-blue);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--fp-button-transition, 150ms) ease;
}
.fp-providers__cta .fp-cta-arrow { margin-left: var(--fp-cta-arrow-gap); }
/* Hover underline is an INTERACTIVE affordance, so it is scoped to the anchor
   form. When no destination is verified the same class renders on a <span>
   (see template-parts/article-providers.php); a hover underline there would
   advertise a link that does not exist. Element-qualified at (0,1,1) so the
   anchor's appearance is bit-for-bit unchanged. */
a.fp-providers__cta:hover { text-decoration: underline; }

/* ── BODY ─────────────────────────────────────────────────*/
.fp-article__layout { margin-top: var(--fp-space-l); }
.fp-article__main { min-width: 0; }

.fp-article__section { margin-top: 40px; }   /* major section break */

.fp-article__h2 {
    margin: 0 0 11px;                         /* heading -> first paragraph */
    font-size: 24px;                          /* 28px at desktop */
    font-weight: var(--fp-weight-heading);
    line-height: var(--fp-line-heading);
    letter-spacing: var(--fp-tracking-heading);
    color: var(--fp-color-navy);
    scroll-margin-top: var(--fp-space-m);
}

/* Prose keeps a controlled line length while the canvas around it stays wide.
   820px at 16px is roughly 88 characters - still comfortable editorial
   measure, and it stops the wide canvas reading as empty margin. */
.fp-article__section > p,
.fp-article__section > ul,
.fp-article__tail > p,
.fp-article__tail > ul {
    max-width: 820px;
}

.fp-article__section p, .fp-article__tail p {
    margin: 0 0 13px;                         /* related paragraphs group */
    font-size: 17px;
    font-weight: var(--fp-weight-body);
    line-height: 1.62;                        /* comfortable editorial measure */
    color: var(--fp-color-gray-500);
}
.fp-article__section p:last-child, .fp-article__tail p:last-child { margin-bottom: 0; }
.fp-article strong { font-weight: var(--fp-weight-label); color: var(--fp-color-navy); }

/* Tip / Decision Rule / Shortlist rule read as PROSE, not as boxes. The bold
   navy lead-in already marks them; a card would add a designed element the
   article does not need. */
.fp-article__note { max-width: 820px; }

/* ── QUICK ANSWER — category tint, matching the hero ──────*/
.fp-article__quick {
    margin: 0 0 24px;
    padding: 12px 16px;                       /* answer callout, not a module */
    background-color: rgba(37, 99, 235, 0.06);
    border-radius: var(--fp-radius-button);
    box-sizing: border-box;
    max-width: var(--fp-container-reading);
}
.fp-article__quick-heading {
    margin: 0 0 4px;
    font-size: var(--fp-font-body-m);         /* 16px — a label, not a section head */
    font-weight: var(--fp-weight-label);
    line-height: 1.3;
    color: var(--fp-color-blue);
}
.fp-article__quick p {
    margin: 0;
    font-size: var(--fp-font-body-m);
    line-height: var(--fp-line-body);
    color: var(--fp-color-gray-600);
}

/* ── LISTS / CHECKLIST ────────────────────────────────────*/
/* Semantic <ul> retained. Marker is a small filled SQUARE in the approved
   Business Banking blue - native list-style, so alignment with the first line
   of copy is handled by the browser and no pseudo-element is required. */
.fp-article__list {
    margin: 0 0 var(--fp-space-s);
    padding-left: 20px;
    list-style: square;
    max-width: 820px;
}
.fp-article__list li {
    margin-bottom: 4px;
    font-size: 17px;
    line-height: 1.62;
    color: var(--fp-color-gray-500);
}
.fp-article__list li::marker {
    color: var(--fp-color-blue);
    font-size: .85em;
}
/* ── ORDERED LIST — the counterpart .fp-article__list never had ───────────
   Added v3.40.70 with the Business Bank Account migration. The article system
   had no ordered-list rule because the master article contains no <ol>, so a
   migrated ordered list fell through to browser defaults exactly as the
   guides' unclassed <ul>s did - the defect the migration exists to fix.

   Every value is COPIED from .fp-article__list above: same margin, same 20px
   indent, same 17px/1.62, same grey, same 4px item spacing, same 820px
   measure, same blue marker. Only the marker type differs.

   ⚠ NUMERALS STAY FULL SIZE. .fp-article__list shrinks its marker to .85em
   because a square bullet is optically heavy; a numeral is not, and shrinking
   it makes the sequence read weak against 17px copy. Approved 2026-09-06 -
   do NOT "align" this with the bullet rule. */
.fp-article__olist {
    margin: 0 0 var(--fp-space-s);
    padding-left: 20px;
    list-style: decimal;
    max-width: 820px;
}
.fp-article__olist li {
    margin-bottom: 4px;
    font-size: 17px;
    line-height: 1.62;
    color: var(--fp-color-gray-500);
}
.fp-article__olist li::marker {
    color: var(--fp-color-blue);
    font-weight: var(--fp-weight-label);
}

/* Checklist only: these items genuinely function as a checklist, so they take
   a restrained checkmark instead of the square marker. Not used anywhere else
   in the article. */
.fp-article__checklist {
    margin: 0 0 var(--fp-space-s);
    padding: 0;
    list-style: none;
    max-width: 820px;
}
.fp-article__checklist li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 4px;
    font-size: 17px;
    line-height: 1.62;
    color: var(--fp-color-gray-500);
}
.fp-article__checklist li::before {
    content: "\2713";                         /* ✓ */
    position: absolute;
    left: 0;
    top: 0;
    line-height: var(--fp-line-body);
    font-size: 13px;
    color: var(--fp-color-blue);
}

/* ── TABLES ───────────────────────────────────────────────*/
/* ── MOBILE SCROLL AFFORDANCE (2026-09-18) ────────────────
   The wrapper scrolls correctly at mobile, but nothing told the reader that
   more columns exist to the right. assets/js/article-tables.js inserts this
   line immediately above a wrapper ONLY when that wrapper actually overflows
   and only below 768px, so a table that fits never gets one.

   Instructional fine print, not a callout: the canonical 14px note size and
   gray-500, no panel, no icon, no animation, no overlay. The table itself,
   its columns, its native scrolling and its keyboard focus are untouched.
   JavaScript is used only to DETECT overflow - CSS cannot query it - and with
   JavaScript off no line is inserted and the tables still scroll natively. */
/* ⚠ ELEMENT-QUALIFIED. `.fp-article__section p` is (0,1,1) and beat a plain
   class at (0,1,0), so the line first rendered at 17px body size instead of the
   canonical 14px note size - the same trap article.css already documents for
   .fp-article__footnote. */
.fp-article__table-hint,
.fp-article__section p.fp-article__table-hint {
    margin: 0 0 8px;
    font-size: var(--fp-font-body-s);              /* 14px */
    line-height: 1.55;
    color: var(--fp-color-gray-500);
}
/* Desktop never shows it. Tables do not overflow at desktop widths anyway, so
   this is a guard rather than the mechanism; the mechanism is actual overflow. */
@media (min-width: 1024px) {
    .fp-article__table-hint { display: none; }
}

.fp-article__table-wrap {
    margin: 0 0 var(--fp-space-s);
    /* The wrapper scrolls, never the page. A thin scrollbar plus the visibly
       clipped final column is the affordance - no instruction box, no overlay. */
    overflow-x: auto;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-button);   /* same radius as the FAQ */
}
.fp-article__table {
    width: 100%; min-width: 460px; border-collapse: collapse;
    font-size: 16px; line-height: 1.5;
    color: var(--fp-color-gray-500);
}
.fp-article__table thead th {
    background-color: var(--fp-color-gray-50);
    color: var(--fp-color-navy);
    font-size: 17px;
    font-weight: var(--fp-weight-heading);    /* 700 */
    line-height: 1.4;
    text-align: left; white-space: nowrap;
    /* Tables carry no interactive target, so vertical padding drops from 12px
       to 8px - a real reduction rather than a cosmetic one. Horizontal padding,
       type size, column widths, borders and radius are unchanged. */
    /* 8px vertical. Row height is content-driven - no fixed height and no
       min-height. Compact editorial table, not a data grid. */
    padding: 8px 16px;
    border-bottom: 1px solid var(--fp-color-gray-200);
}
.fp-article__table tbody th, .fp-article__table tbody td {
    padding: 8px 16px;
    border-bottom: 1px solid var(--fp-color-gray-200);
    text-align: left; vertical-align: top;
}
.fp-article__table tbody th { font-weight: var(--fp-weight-label); color: var(--fp-color-navy); }
.fp-article__table tbody tr:last-child th, .fp-article__table tbody tr:last-child td { border-bottom: 0; }
.fp-article__table--numbered td:first-child { width: 1%; white-space: nowrap; }

/* ── ON THIS PAGE ─────────────────────────────────────────*/
.fp-article__toc {
    padding: 14px 16px;                       /* content-driven, not a product card */
    background-color: var(--fp-color-gray-50);
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-button);
    box-sizing: border-box;
}
.fp-article__toc-heading {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: var(--fp-weight-label);
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--fp-color-navy);
}
.fp-article__toc-list { margin: 0; padding: 0; list-style: none; }
.fp-article__toc-item + .fp-article__toc-item { margin-top: 8px; }
.fp-article__toc-link {
    font-size: var(--fp-font-body-s);
    line-height: 1.45;
    color: var(--fp-color-blue);
    text-decoration: none;
}
.fp-article__toc-link:hover { text-decoration: underline; }

/* ── FAQ ──────────────────────────────────────────────────*/
.fp-faq { border: 1px solid var(--fp-color-gray-200); border-radius: var(--fp-radius-button); overflow: hidden; }
.fp-faq__item + .fp-faq__item { border-top: 1px solid var(--fp-color-gray-200); }
.fp-faq__summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--fp-space-s);
    /* 12.5px lands the row at 48px: 22.9px of question text + 25px padding.
       This row is the click target, and ch8 sets a 48x48 minimum, so it does
       NOT go below 48 even though the tables can. */
    padding: 12px 16px;
    cursor: pointer; list-style: none;
}
.fp-faq__summary::-webkit-details-marker { display: none; }
.fp-faq__summary::marker { content: ""; }
.fp-faq__question {
    margin: 0;
    /* Semantically still an H3; visually a control label. It must be
       scannable without competing with the 28px article H2s. */
    /* 17px / 600 at EVERY width, including tablet and mobile - readability
       matters most on small screens, so this does not step down. Questions
       wrap naturally; a two-line mobile row is expected. */
    font-size: 17px;
    font-weight: var(--fp-weight-label);      /* 600, not 700 */
    line-height: 1.4;
    color: var(--fp-color-navy);
}
/* Small disclosure indicator, not an icon. Uses the SAME approved asset and
   mask technique as the frozen header chevron, so the rendered size is exact
   rather than a rotated border square whose visual box is w x root-2. The whole
   <summary> row remains the click target, so the mark can stay small. */
.fp-faq__chevron {
    flex: 0 0 auto;
    width: 11px;                              /* FROZEN — optical size approved
                                                 2026-08-17. Do not resize. */
    height: 7px;
    background-color: var(--fp-color-navy);
    -webkit-mask-image: url('../../images/icons/chevron-down.svg');
            mask-image: url('../../images/icons/chevron-down.svg');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    transition: transform 150ms ease;
}
.fp-faq__item[open] .fp-faq__chevron { transform: rotate(180deg); }
.fp-faq__answer { padding: 0 16px 13px; }
.fp-faq__answer p {
    margin: 0;
    font-size: 17px;
    font-weight: var(--fp-weight-body);       /* 400 */
    line-height: 1.62;
    color: var(--fp-color-gray-500);
}

/* ── GLOSSARY (reusable article component) ────────────────
 * Shares the FAQ's disclosure language deliberately: same border, same
 * radius, same 12/16 summary padding, same frozen 11x7 chevron asset and
 * the same 150ms rotation. An article should read as having ONE collapse
 * behaviour, not two competing ones.
 *
 * NO NEW TOKENS. Every colour, radius, weight and space below already
 * exists in base.css. No new type sizes and no new colours are introduced.
 *
 * The term/definition pair is laid out with the <dl> itself rather than
 * wrapper divs, so the semantics and the layout are the same structure.
 * Desktop puts the term in a fixed first column; below 640 it stacks, which
 * is the only responsive change - definitions must never be squeezed into a
 * narrow second column on a phone.
 * ──────────────────────────────────────────────────────── */

.fp-glossary {
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-button);
    overflow: hidden;
}

.fp-glossary__summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--fp-space-s);
    padding: 12px 16px;                       /* matches .fp-faq__summary */
    cursor: pointer; list-style: none;
}
.fp-glossary__summary::-webkit-details-marker { display: none; }
.fp-glossary__summary::marker { content: ""; }

/* Visually the FAQ question label, semantically NOT a heading - the section
   already has its H2 and the terms below are <dt>, so nothing here should
   enter the outline. */
.fp-glossary__label {
    font-size: 17px;
    font-weight: var(--fp-weight-label);      /* 600 */
    line-height: 1.4;
    color: var(--fp-color-navy);
}

.fp-glossary[open] .fp-faq__chevron { transform: rotate(180deg); }

.fp-glossary__list {
    margin: 0;
    padding: 0 16px 13px;                     /* matches .fp-faq__answer */
    border-top: 1px solid var(--fp-color-gray-200);
    padding-top: 13px;
}

.fp-glossary__term {
    margin: 0;
    font-size: 17px;
    font-weight: var(--fp-weight-label);      /* 600 */
    line-height: 1.62;
    color: var(--fp-color-navy);
}

.fp-glossary__def {
    margin: 0 0 var(--fp-space-s);
    font-size: 17px;
    font-weight: var(--fp-weight-body);       /* 400 */
    line-height: 1.62;
    color: var(--fp-color-gray-500);
}
.fp-glossary__def:last-child { margin-bottom: 0; }

/* A term links only when its entry declares a url. Inherits the article's
   link treatment; no bespoke colour. */
.fp-glossary__term-link { color: var(--fp-color-blue); text-decoration: none; }
.fp-glossary__term-link:hover { text-decoration: underline; }

/* Two-column term/definition from 640 up. The term column is sized so the
   longest expected term wraps rather than pushing the definition narrow. */
@media (min-width: 640px) {
    .fp-glossary__list {
        display: grid;
        grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
        column-gap: var(--fp-space-m);
        row-gap: var(--fp-space-s);
    }
    .fp-glossary__term { grid-column: 1; }
    .fp-glossary__def  { grid-column: 2; margin-bottom: 0; }
}

/* ── BOTTOM LINE / TAIL ───────────────────────────────────*/
.fp-article__bottomline p { max-width: 820px; }
/* END MATTER. Semantically still an H2; visually subordinate so it reads as
   supporting material rather than another primary section. */
.fp-article__tail { margin-top: var(--fp-space-l); }
.fp-article__section--sources .fp-article__h2 {
    font-size: 21px;
    letter-spacing: var(--fp-tracking-subhead);
}
.fp-article__section--sources .fp-article__list li,
.fp-article__section--sources .fp-article__olist li,
.fp-article__section--sources p {
    font-size: 15px;
    line-height: 1.6;
}
/* Compound selector: `.fp-article__section p` is (0,1,1) and would otherwise
   force weight 400 here. */
.fp-article__section--sources p.fp-article__standards {
    font-size: var(--fp-font-body-s);
    font-weight: var(--fp-weight-label);      /* 600 */
    color: var(--fp-color-navy);
}

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

/* ═══ TABLET 640+ ═══ */
@media (min-width: 640px) {
    .fp-article__container { padding: 0 var(--fp-margin-tablet); }   /* 24px */
    .fp-article__hero,
    .fp-article__hero-band { padding: var(--fp-space-s) var(--fp-space-l); }
    .fp-article__h1 { font-size: 34px; }
    /* 2 x 2 from 640 up to the four-across threshold. */
    .fp-providers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fp-providers__item:nth-child(odd) { border-right: 1px solid var(--fp-color-gray-200); }
}

/* ═══ DESKTOP 1024+ ═══ */
@media (min-width: 1024px) {
    .fp-article__container { padding: 0 var(--fp-margin-desktop); }  /* 32px */

    .fp-article__hero,

    .fp-article__hero-band {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 34%;
        align-items: center;
        gap: var(--fp-space-l);
        padding: var(--fp-space-s) var(--fp-space-l);
        max-width: none;
    }
    .fp-article__hero-figure { margin: 0; }
    .fp-article__hero-img    { max-width: 100%; }

    /* THE DECK'S 52ch MEASURE CAP IS RELEASED IN THE TWO-COLUMN HERO ONLY.
       The grid already narrows the copy to one column - 716.4px at 1440, about
       63ch - so the cap was a SECOND constraint on top of the column and it was
       the binding one: it held the deck at 588.6px and forced a fifth line.
       Removing it lets the column govern, the deck sets in four lines, and the
       hero loses 29.7px with NOT ONE WORD OF COPY CHANGED. 63ch stays inside
       the comfortable 45-75ch measure. The cap is untouched below 1024px,
       where the column is narrow enough that it never binds. */
    .fp-article__dek { max-width: none; }

    /* APPROVED DESKTOP TYPE — locked at commit 7984827. */
    .fp-article__h1 { font-size: 42px; line-height: 1.15; }
    .fp-article__h2 { font-size: 32px; font-weight: var(--fp-weight-heading); }
    .fp-article__dek { font-size: var(--fp-font-body-l); }
    .fp-article__section--sources .fp-article__h2 { font-size: 21px; }

    .fp-article__main { min-width: 0; }
}


/* ═══════════════════════════════════════════════════════════
   TWO-COLUMN COMPOSITION — 1280px and up
   ═══════════════════════════════════════════════════════════
   The approved composition needs 820 + 40 + 280 = 1140px plus page margin.
   It previously started at 1024, where the container is only 960px wide -
   60px of horizontal overflow. It now starts at 1280, the first width whose
   canvas (a full 1200) can hold it. The approved 1440 baseline is unchanged.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

    .fp-article__container { padding: 0; }    /* canvas is exactly 1200 */

    /* Four across only where the module has room to stay polished. Below this
       it is 2x2, then a single column. The cells themselves are unchanged. */
    .fp-providers__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .fp-providers__item { border-top: 0; border-right: 1px solid var(--fp-color-gray-200); }
    .fp-providers__item:last-child { border-right: 0; }

    .fp-article__layout {
        display: grid;
        grid-template-columns: 820px 280px;
        column-gap: 40px;
        justify-content: center;
        align-items: start;
        margin: var(--fp-space-l) auto 0;
    }
    .fp-article__main  { grid-column: 1; grid-row: 1; }
    .fp-article__aside { grid-column: 2; grid-row: 1; width: 280px; margin: 0; }

    /* ⚠ .fp-glossary ADDED v3.40.69 — SIZING PARITY, NOT A NEW TREATMENT.
       The FAQ has spanned the full 1140px layout track here since this rule
       was written; the Glossary never had a width rule at all, so it stayed in
       the 820px main column. Measured on the live How to Choose article at
       1440: FAQ L150 R1290 W1140, Glossary L150 R970 W820 - the same bordered
       component family at two different widths, 320px apart, on one page.
       The Glossary now takes the FAQ's width, so the pair always matches.
       The comparison release block below cancels this for the FROZEN
       comparison articles exactly as it already cancels it for the FAQ, so
       none of them moves. */
    .fp-article__table-wrap,
    .fp-faq,
    .fp-glossary { width: 1140px; max-width: 1140px; }

    /* ⚠ PROVISIONAL - NOT APPROVED DESIGN. How to Open a Business Bank Account.
       The 1140px track above assumes no full-width table occurs while the On
       This Page rail is still on screen; on every frozen article the first one
       sits well below it (live /business-bank-account/: rail ends y2160, first
       1140px table starts y3261). This article's canonical section order puts
       "Requirements by Business Type" at y1742-2199 against a rail ending at
       y2088, so 346px of the table renders straight through the rail - a
       reproducible collision at every width >=1280.

       Section order is frozen canonical copy and cannot move, so THAT ONE TABLE
       is held to the 820px main column. It is the only element on the page that
       collides: the other two tables (y5240 and y8627), the FAQ and the Glossary
       all sit far below the rail and keep the 1140px family width. Nothing
       outside this slug is affected. The site owner has not yet ruled on the
       treatment - see the visual-QA report. */
    .fp-article--slug-how-to-open-a-business-bank-account
    #requirements-by-business-type .fp-article__table-wrap {
        width: auto;
        max-width: 100%;
    }
    /* ⚠ AND IT MUST FIT, NOT CLIP. Held to 818px the table's natural width was
       845px, so its fourth column clipped - and article-tables.js suppresses the
       "Swipe to see more" hint at >=1024px by design, leaving no way to reach it.
       The existing .fp-article__table--wrap-head modifier (extended to this slug
       above) lets the header cells wrap instead of forcing nowrap min-content:
       measured 818px scroll against an 818px column, all four columns present,
       header two lines. No clipping, no desktop scroll, no new component and no
       change to the shared JS breakpoint. */

    .fp-faq__answer p  { max-width: 820px; }
    .fp-article__quick { max-width: 820px; }
}


/* ═══════════════════════════════════════════════════════════
   SINGLE FLOW — below 1280
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1279.98px) {

    .fp-article__layout { display: flex; flex-direction: column; }

    /* The contents card leaves the rail and sits in the article flow, above
       the body where a table of contents is actually useful. Compact
       treatment kept; external margin keeps it clear of adjacent content. */
    .fp-article__aside {
        order: -1;
        width: auto;
        margin: 0 0 var(--fp-space-m);
    }

    /* Nothing sits at an orphan width in single flow. */
    .fp-article__quick,
    .fp-article__table-wrap,
    .fp-faq,
    .fp-glossary,                             /* v3.40.69 - released with the FAQ */
    .fp-article__olist,                       /* v3.40.70 */
    .fp-faq__answer p { max-width: none; width: auto; }
}


/* ═══════════════════════════════════════════════════════════
   TABLET TYPE — 640 to 1023
   ═══════════════════════════════════════════════════════════
   Steps down from the desktop scale only as far as the narrower measure
   needs. Body stays 17px throughout; only the display sizes move. */
/* ── CHECKING HERO SCALE — RENDERED-ARTWORK PARITY WITH FROZEN BBA ──────────
   Approved 2026-09-18.

   ⚠ THE ELEMENT BOX IS NOT THE ARTWORK. Both heroes give the <img> the same
   width (100% of the figure), so measuring the element said they matched. They
   did not: the frozen BBA illustration sits in a viewBox with ~76px of internal
   transparent padding per side, while the Checking illustration nearly fills
   its own viewBox. Measured VISIBLE ink at 1440 was BBA 234x236 against
   Checking 370x290 -- 1.94x the area -- and at 768 BBA 136x138 against
   Checking 200x156, 1.66x.

   The illustration is NOT changed: no geometry, line weight, colour or
   composition. Only its display scale, so the two Best Of heroes carry the
   same optical weight. Scaled to equal rendered AREA rather than equal width,
   because the two illustrations have different aspect ratios (BBA 0.99,
   Checking 1.24) and area is the honest proxy for optical size.

   Scoped to the slug class the theme already emits; the shared Best Of hero
   rules are untouched and no frozen article moves. 390 is deliberately NOT
   included -- the mobile readability exception below governs there. */
.fp-article--slug-best-business-checking-accounts .fp-article__hero-img {
    max-width: 277px;          /* >=1024: rendered ink ~265x208 vs BBA 234x236 */
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    .fp-article--slug-best-business-checking-accounts .fp-article__hero-img {
        max-width: 161px;      /* rendered ink ~155x121 vs BBA 136x138 */
    }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
    .fp-article__h1 { font-size: 36px; }
    .fp-article__h2 { font-size: 28px; }
    /* HEIGHT PARITY, NOT WIDTH PARITY - the rule already frozen for the
       collection heroes. The approved artwork is 1.339:1 where the
       superseded drawing was 1.792:1, so keeping max-width: 300px would
       add 56.6px of hero height here and push the hero back past the
       height this revision just removed. Constraining the HEIGHT to what
       the old artwork occupied keeps the vertical budget identical and
       lets the image keep its own aspect ratio.

       width: auto IS LOAD-BEARING. The base rule sets width: 100%, which
       is a DEFINITE width - max-height then clamps the height without
       recomputing the width, and the artwork renders squashed (measured
       3.906:1 against a native 1.339:1). Releasing the width lets the
       intrinsic ratio drive both axes and max-height do the constraining. */
    .fp-article__hero-img { width: auto; max-width: 100%; max-height: 167.44px; }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE — below 640
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 639.98px) {
    .fp-article__h1 { font-size: 32px; }
    .fp-article__h2 { font-size: 24px; }

    /* The hero ran to ~680px tall on a phone because the artwork held 340px.
       Tightened so the reader reaches the providers and the article sooner;
       border, radius and Guide treatment are unchanged. The blue tint this note
       once also listed as unchanged is gone site-wide - the hero interior is
       white; see the base rule.

       VERTICAL PADDING ONLY, 20 -> 16. The 20px HORIZONTAL value is deliberately
       kept: narrowing the copy at this width adds wrapped lines and makes the
       hero TALLER, the opposite of the intent. Measured at 375. */
    .fp-article__hero,
    .fp-article__hero-band { padding: 16px 20px; }
    .fp-article__hero-figure { margin-top: 18px; }
    .fp-article__hero-img { width: auto; max-width: 100%; max-height: 139.53px; }   /* height parity - see the 640-1023 note */

    /* ⚠ CHECKING ONLY — approved 2026-09-18. The shared 139.53px cap above is
       frozen and Best Business Bank Accounts depends on it; it is NOT changed.
       The Checking artwork carries three labelled concepts, and at 139.53px its
       in-artwork labels rendered 4.91px. The hero figure is 308px wide while the
       artwork was only 173px, so the artwork was height-constrained with 135px
       of unused width: this raises the cap WITHOUT touching geometry, aspect
       ratio, the hero shell, H1, dek or byline.

       Measured at 390: artwork 267x215, label glyph 7.57px (+54%), hero 707px,
       left/right clearance 41.5px, no clipping or overflow. 707px is deliberately
       just inside the frozen BBA mobile hero's 712px, so this is not an unusually
       tall Best Of hero. 248px was rejected as too dominant at 740px.

       Scoped to the slug class the theme already emits, so no other article --
       and in particular no frozen article -- is affected. */
    .fp-article--slug-best-business-checking-accounts .fp-article__hero-img {
        max-height: 215px;
    }

    .fp-providers__heading { padding: 16px 16px 10px; }
    .fp-providers__item { padding: 14px 12px 16px; }
}

@media (prefers-reduced-motion: reduce) { .fp-faq__chevron { transition: none; } }


/* ==========================================================================
   COMPARISON ARTICLE — additive only
   ==========================================================================
   Everything below is new and scoped to classes that exist only on comparison
   articles, plus three generic article classes the comparison is the first
   article to use (h3, footnote, table caption). Nothing here changes a
   selector the Business Banking Buying Guide matches, so its rendering is
   byte-identical.
   ========================================================================== */

/* The comparison is the first article with a third-level heading. Sized
   between .fp-article__h2 and body copy so the hierarchy reads correctly for
   both a reader and a parser. */
.fp-article__h3 {
    margin: 26px 0 9px;
    font-size: 19px;
    font-weight: var(--fp-weight-heading);
    line-height: var(--fp-line-heading);
    letter-spacing: var(--fp-tracking-heading);
    color: var(--fp-color-navy);
    scroll-margin-top: var(--fp-space-m);
}

/* Qualifiers, table footnotes and the publication note. Smaller and quieter
   than body copy, but deliberately NOT hidden or greyed to the point of being
   unreadable — these carry the legal qualifications.

   .fp-article__table-note is the same fine print carrying a different semantic:
   copy whose purpose is to explain, qualify, source, date, define or document
   the assumptions behind a TABLE. One declaration, so a table note renders
   identically wherever it appears (2026-09-18). */
.fp-article__footnote,
.fp-article__table-note {
    margin: 8px 0 0;
    font-size: var(--fp-font-body-s);         /* 14px */
    line-height: 1.55;
    color: var(--fp-color-gray-500);
}
:is(.fp-article__footnote, .fp-article__table-note)
+ :is(.fp-article__footnote, .fp-article__table-note) { margin-top: 5px; }

/* Table captions are for assistive technology. The visible heading above each
   table already names it, so a visible caption would duplicate it. Same
   visually-hidden technique the ratings table already uses for its header row. */
.fp-article__table-caption {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   COMPARISON TABLES — equal prominence, no winner colour
   --------------------------------------------------------------------------
   The two provider columns are sized identically and styled identically. There
   is deliberately no highlight, tint, border or weight that would mark one
   column as the winner: the article's editorial position is that there is no
   overall winner, and the table must not contradict it.
   -------------------------------------------------------------------------- */
.fp-article__table--compare {
    table-layout: fixed;
    /* v3.56.13: 552px, not the shared 460px, as the scroll minimum. The label
       column is 34%, and at 460px it left 124px for text: "FinanceProspector"
       (146.4px at 16/600) broke mid-word on phones. 34% of 552px leaves
       155.7px. The column proportions and the horizontal scroll are
       unchanged; wider screens never reach this minimum. */
    min-width: 552px;
}
.fp-article__table--compare th:first-child,
.fp-article__table--compare td:first-child {
    width: 34%;
}
.fp-article__table--compare thead th + th {
    width: 33%;
}
/* Both provider headers, identical treatment. */
.fp-article__table--compare thead th + th {
    color: var(--fp-color-navy);
}
/* Two-column variant (priority -> pick) needs a wider first column. */
.fp-article__table--picks th:first-child,
.fp-article__table--picks td:first-child {
    width: 55%;
}

/* The composite score row. Emphasised because it is a total, not because
   either side wins it — both cells read 9.2. */
.fp-article__table-total th,
.fp-article__table-total td {
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-navy);
    border-top: 1px solid var(--fp-color-gray-200);
}
/* Only the two overall-score CELLS take the canonical score colour. The row's
   <th> is the label and stays navy; every dimension row above is unchanged. */
.fp-article__table-total td { color: var(--fp-color-green); }   /* v3.57.140 (owner, 2026-10-26): FinanceProspector score colour Core Green #42B649. Was --fp-color-score-text */

/* At a Glance — the FinanceProspector Score row only. Same rule; the row is
   identified by a narrowly scoped class so no other row is affected. */
.fp-article__table-fpscore td { color: var(--fp-color-green); }   /* v3.57.140 (owner, 2026-10-26): FinanceProspector score colour Core Green #42B649. Was --fp-color-score-text */

/* --------------------------------------------------------------------------
   SECTION WINNER — only where the supplied copy names one
   -------------------------------------------------------------------------- */
.fp-compare__winner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: var(--fp-font-body-m);
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-navy);
}
.fp-compare__winner-label {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-pill);
    background-color: var(--fp-color-gray-50);
    font-size: 11px;
    font-weight: var(--fp-weight-label);
    letter-spacing: var(--fp-tracking-caption);
    text-transform: uppercase;
    color: var(--fp-color-gray-500);
}

/* The per-section score line that closes each dimension. */
.fp-compare__scoreline {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--fp-color-gray-200);
    font-size: var(--fp-font-body-s);
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-gray-500);
}

/* The two short rhetorical questions in Cash Deposits. */
.fp-compare__aside {
    margin: 10px 0;
    padding-left: 14px;
    border-left: 2px solid var(--fp-color-gray-200);
    color: var(--fp-color-navy);
    font-weight: var(--fp-weight-label);
}

/* --------------------------------------------------------------------------
   VERDICT — two equal panels, no winner treatment
   --------------------------------------------------------------------------
   Identical markup, identical styling, equal track widths. Neither panel is
   ordered, coloured or sized to read as the winner.
   -------------------------------------------------------------------------- */
.fp-compare__verdict {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.fp-compare__verdict-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-card);
    background-color: var(--fp-color-white);
}
.fp-compare__verdict-name {
    font-size: var(--fp-font-body-m);
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-navy);
}
.fp-compare__verdict-score {
    font-size: 22px;
    font-weight: var(--fp-weight-heading);
    /* Canonical score colour. The /10 denominator keeps its approved
       subordinate grey — it is a unit, not the score value. */
    color: var(--fp-color-green);   /* v3.57.140 (owner, 2026-10-26): FinanceProspector score colour Core Green #42B649. Was --fp-color-score-text */
    white-space: nowrap;
}
.fp-compare__verdict-denom {
    font-size: var(--fp-font-body-s);
    font-weight: var(--fp-weight-body);
    color: var(--fp-color-gray-500);
}



@media (min-width: 640px) {
    .fp-compare__verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   TWO-PROVIDER MODULE
   --------------------------------------------------------------------------
   The shared module goes 1 -> 2 -> 4 columns. A two-provider comparison must
   STOP at two: the 4-track rule would leave half the row empty and shrink both
   cards to a quarter width for no reason.
   Only the >=1280 track count is overridden. Card padding, borders, typography,
   logo, score and CTA are the shared visual system, untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
    .fp-providers--count-2 .fp-providers__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   COMPARISON HERO — keep the family's compact height
   --------------------------------------------------------------------------
   The approved comparison artwork is SQUARE. Left uncapped it renders 385.55
   tall in the 385.55 figure column at >=1024 and drives the hero to 419.55 —
   88px taller than the frozen Business Banking hero, for no editorial reason.

   Capped at 287.88px: the illustration height frozen for that hero, so the two
   article heroes present at the same scale. SCALE ONLY — the aspect ratio is
   untouched and the artwork is never cropped. Below 1024 the hero stacks and
   the shared height-parity caps already apply.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .fp-article__hero-band--comparison .fp-article__hero-img {
        width: auto;
        max-width: 100%;
        max-height: 287.88px;
    }
}


/* ==========================================================================
   COMPARISON — layout containment and result treatments
   ==========================================================================
   Scoped to .fp-article--comparison throughout. Nothing here can reach the
   frozen Business Banking Buying Guide, which matches none of these selectors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLE / TOC OVERLAP — structural cause and correction
   --------------------------------------------------------------------------
   CAUSE, measured. At >=1280 .fp-article__layout is a two-track grid,
   `820px 280px` with a 40px gap, and .fp-article__main occupies track 1. The
   shared rule then forces `.fp-article__table-wrap` and `.fp-faq` to
   `width: 1140px` — 820 + 40 + 280 — so they deliberately break out of the
   main column and span the whole layout INCLUDING the aside track. Because
   main and aside share the same grid row, that 1140px child renders straight
   under the Table of Contents.

   It is not a rounding artefact or a stray margin: the widths are declared.
   Measured on the live Buying Guide as well — wrap right edge 1290, aside left
   edge 1010, a 280px overlap on both articles.

   CORRECTION. The comparison keeps its content inside its own column: the wrap
   is released back to the main column's width. The table still uses the full
   820px available and the TOC is never covered.

   ⚠ THE SAME DEFECT REMAINS ON THE FROZEN BUYING GUIDE. Correcting it there
   means changing a frozen page's table and FAQ width from 1140 to 820, which is
   a visible design change and needs its own approval. It is deliberately NOT
   done here. */
@media (min-width: 1280px) {
    .fp-article--comparison .fp-article__table-wrap,
    .fp-article--comparison .fp-faq,
    .fp-article--comparison .fp-glossary {    /* v3.40.69 - see below */
        width: auto;
        max-width: 100%;
    }

    /* ⚠ .fp-glossary IS LISTED HERE SO THE FOUR FROZEN COMPARISONS DO NOT MOVE.
       Their glossaries already sit at the main column's 820px and their FAQs
       are already released to the same width, so the pair matches on those
       pages today. Adding .fp-glossary to the 1140px rule above without also
       adding it here would have widened four frozen articles by 320px. */
}

/* --------------------------------------------------------------------------
   DIMENSION WINNER — a content-width chip, not a bar
   --------------------------------------------------------------------------
   The H2 already reads "Product & Features: Bluevine Wins", so this is only a
   visual confirmation of the result and the two scores. It is therefore sized
   to its content: inline-flex, intrinsic width, never the article column.

   Replaced a full-width grey bar with a long blue left rule. Green border and
   green WINNER label; provider names navy; the winning score bold navy, the
   other in normal grey so both stay readable. White ground, small radius.
   -------------------------------------------------------------------------- */
.fp-compare__win {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    width: auto;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 6px 12px;
    border: 1px solid var(--fp-color-green);
    border-radius: var(--fp-radius-pill);
    background-color: var(--fp-color-white);
}
.fp-compare__win-label {
    font-size: 11.5px;
    font-weight: var(--fp-weight-label);
    letter-spacing: var(--fp-tracking-caption);
    text-transform: uppercase;
    /* The accessible green: brand --fp-color-green is 2.62:1 on white and
       fails AA as text. --fp-color-score-text is 5.02:1 and is the token the
       design system already uses for green type. The BORDER keeps the brand
       green, where contrast rules do not apply. */
    color: var(--fp-color-score-text);
    white-space: nowrap;
}
.fp-compare__win-scores {
    font-size: var(--fp-font-body-s);
    color: var(--fp-color-gray-500);
    font-variant-numeric: tabular-nums;
}
/* The winning score carries the same accessible green as the WINNER label, so
   the result reads in one colour. --fp-color-score-text (#15803D, 5.02:1 on
   white) is the design system's existing green for type; brand --fp-color-green
   is 2.62:1 and fails AA as text. The losing score stays neutral grey. */
.fp-compare__win-scores b {
    font-weight: var(--fp-weight-heading);
    color: var(--fp-color-green);   /* v3.57.140 (owner, 2026-10-26): FinanceProspector score colour Core Green #42B649. Was --fp-color-score-text */
}
.fp-compare__win-sep { color: var(--fp-color-gray-200); padding: 0 1px; }

/* Neutral dimension: label only, no scores, neutral border. */
.fp-compare__win--neutral { border-color: var(--fp-color-gray-200); }
.fp-compare__win--neutral .fp-compare__win-label { color: var(--fp-color-gray-500); }


/* ── CATEGORY VERDICT ROW — COMPARISON MASTER (v3.50.6) ──
   Seven consecutive dimensions each carried a bordered green pill under their
   H2. Individually fine; in sequence it made the middle of the article read as
   seven identical components rather than seven analyses, and the repetition was
   worst on mobile. The pill CHROME is retired and the row becomes compact
   metadata directly beneath the heading.

   ⚠ MARKUP AND DATA ARE UNCHANGED. Same <p class="fp-compare__win">, same
   label, same scores, same existing middot between the two providers' scores.
   Only border, background, radius, padding and margins change. The winning
   provider keeps --fp-color-score-text (#15803D, 5.02:1, AA); the losing score
   stays neutral grey; the no-winner state carries no green at all.
   Scoped to the comparison master's framework, so nothing else can inherit it. */
.fp-article--editorial.fp-article--comparison .fp-compare__win {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin: -2px 0 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
/* No winner: the border used to be the only signal that this dimension was a
   tie. With the border gone the label must carry it, so it takes the neutral
   grey outright rather than inheriting the winner green. */
.fp-article--editorial.fp-article--comparison .fp-compare__win--neutral .fp-compare__win-label {
    color: var(--fp-color-gray-500);
}
/* 12px floor on the label. At 11.5px uppercase it sat at the edge of comfortable
   reading on a 390 viewport. Raising ONLY the label - not the row - keeps the
   weight we removed with the pill chrome from creeping back. The scores beside
   it are --fp-font-body-s (14px) and already clear the floor, so they are
   untouched. No border, background, padding or spacing change. */
.fp-article--editorial.fp-article--comparison .fp-compare__win-label {
    font-size: 12px;
}


/* --------------------------------------------------------------------------
   PROS & CONS — comparison articles only
   --------------------------------------------------------------------------
   Two providers, each with a pros column and a cons column. Deliberately NOT
   another full comparison table: this is a scannable summary of the analysis
   above it, so it uses lists and a hairline divider rather than table chrome.
   Pros and cons carry the same weight — no colour scoring one side.
   -------------------------------------------------------------------------- */
.fp-proscons { margin: 0 0 6px; }
.fp-proscons__provider + .fp-proscons__provider {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--fp-color-gray-200);
}
.fp-proscons__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.fp-proscons__label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: var(--fp-weight-label);
    letter-spacing: var(--fp-tracking-caption);
    text-transform: uppercase;
    color: var(--fp-color-gray-500);
}
.fp-proscons__list { margin: 0; padding-left: 20px; }
.fp-proscons__list li { margin: 0 0 7px; line-height: 1.55; }
.fp-proscons__list li:last-child { margin-bottom: 0; }
.fp-proscons__col--pro  .fp-proscons__list li::marker { color: var(--fp-color-green); }
.fp-proscons__col--con  .fp-proscons__list li::marker { color: var(--fp-color-gray-500); }

/* ── PROS / CONS LABELS — TITLE CASE ON BEST OF (v3.50.11) ──
   The shared label rule uppercases via text-transform, which reads correctly in
   the comparison articles' two-provider layout but is visually louder than the
   surrounding review hierarchy when the component carries ONE provider's Pros
   and Cons seven times in a row. Scoped to the best-of variant so the four
   comparison articles are untouched; the markup is already title case.
   Capitalisation only — family, weight, tracking, colour, layout, markers and
   responsive behaviour are unchanged. */
.fp-article--best-of .fp-proscons__label { text-transform: none; }

/* ── Best Of Pros/Cons markers — FINAL STANDARD ───────────
 * Pros = blue square, Cons = dark square, both at the marker size the
 * component already uses.
 *
 * ⚠ SCOPED TO THE BEST OF VARIANT ON PURPOSE. The base
 *   .fp-proscons__col--pro/--con ::marker colour rules above are GLOBAL and
 *   are also read by the four approved comparison articles, which are not
 *   authorised to change. .fp-article--best-of selects exactly the three Best
 *   Of articles (Business Bank Accounts, Business Checking Accounts, Online
 *   Business Bank Accounts); the comparisons carry .fp-article--comparison
 *   and keep the green/gray discs they were approved with.
 *
 * ⚠ GEOMETRY IS UNCHANGED. 'square' fills the SAME 5x5 marker box that
 *   'disc' already occupies at the component's 17px/1.55 type, at the same
 *   x-position inside the existing 20px padding-left. Measured, not assumed:
 *   disc = 5x5 box / 13 solid px, square = 5x5 box / 25 solid px, both at
 *   x=23. No change to indentation, bullet-to-text spacing, line spacing,
 *   column gap or any responsive behaviour.
 *
 * ⚠ GOVERNED TOKENS ONLY. --fp-color-blue (#2563EB) is the site's existing
 *   blue. --fp-color-gray-700 (#374151) is the darkest governed neutral,
 *   named "high emphasis" in base.css; the palette declares no pure black, so
 *   this is the governed dark-text value rather than an invented #000.
 */
.fp-article--best-of .fp-proscons__list { list-style-type: square; }
.fp-article--best-of .fp-proscons__col--pro .fp-proscons__list li::marker { color: var(--fp-color-blue); }
.fp-article--best-of .fp-proscons__col--con .fp-proscons__list li::marker { color: var(--fp-color-gray-700); }

/* The fact-check line reads as a record, not body prose. */
.fp-article__factcheck {
    margin: 18px 0 6px;
    font-size: var(--fp-font-body-s);
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-navy);
}

@media (min-width: 768px) {
    .fp-proscons__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}


/* ── Editorial References & Sources — citation links ──────
 * The Sources list previously held no links at all, and the theme declares no
 * global anchor colour, so resolving citations need a treatment. SCOPED TO THIS
 * SECTION so no other surface gains a link style.
 *
 * --fp-color-blue #2563EB is the existing site link colour (the same value the
 * On This Page component already uses). Underlined, because a citation inside
 * running list text has no other affordance.
 *
 * FONT, SIZE, LINE HEIGHT, SPACING AND LAYOUT ARE UNTOUCHED: the list item's
 * own 15px / 1.6 rule above still governs. Only colour and underline are set.
 *
 * These are EDITORIAL CITATIONS, not affiliate links: same tab, no target and
 * no rel attribute. */
/* ⚠ BOTH LIST CLASSES. These three rules were written for .fp-article__list
   only, because the master's sources are an unordered list and carry no links
   at all - so nothing exercised them until an ordered, linked source list
   arrived with the Business Bank Account migration. Without .fp-article__olist
   here, eleven source links fell through to the default article link treatment
   instead of the governed end-matter one. Same omission as the font-size step
   below, found the same way: by looking at what the selector actually matches
   rather than at what it was meant to cover. */
/* ⚠ THE UNORDERED RULE IS LEFT EXACTLY AS IT WAS. Four FROZEN comparison
   articles render 10-22 links inside their sources through
   `.fp-article__section--sources .fp-article__list a`, so removing the
   underline there would restyle four frozen pages. Only the ORDERED
   end-matter list - which today is Business Bank Account alone - takes the
   quieter treatment approved 2026-09-06. */
.fp-article__section--sources .fp-article__list a {
    color: var(--fp-color-blue);
    text-decoration: underline;
}
.fp-article__section--sources .fp-article__list a:visited { color: var(--fp-color-blue); }
.fp-article__section--sources .fp-article__list a:hover { text-decoration: none; }

/* Ordered end matter: blue, NO underline at rest, underline on hover so the
   affordance is still there when the reader goes looking for it. The section
   should read as a quiet reference list, not as a block of link decoration. */
.fp-article__section--sources .fp-article__olist a {
    color: var(--fp-color-blue);
    text-decoration: none;
}
.fp-article__section--sources .fp-article__olist a:visited { color: var(--fp-color-blue); }
.fp-article__section--sources .fp-article__olist a:hover { text-decoration: underline; }

/* ⚠ END-MATTER MARKER RESTRAINT. .fp-article__olist paints its numerals blue
   at label weight, which is right in the body where a numbered sequence is the
   point. In end matter it is not: eleven bold blue numerals beside eleven blue
   links made the sources block compete with the article. Here the numeral steps
   back to body grey at normal weight so the LINKS carry the colour.
   ⚠ THE BODY ORDERED LIST IS NOT CHANGED - it keeps the approved full-size
   blue numeral. This rule is scoped to --sources only. */
.fp-article__section--sources .fp-article__olist li::marker {
    color: var(--fp-color-gray-500);
    font-weight: var(--fp-weight-body);
}

/* ── Byline link ──────────────────────────────────────────
 * The author's name inside the meta row. Treatment is the article's existing
 * inline text link, copied from .fp-glossary__term-link in this same file:
 * blue, no underline at rest, underline on hover. :visited is declared
 * explicitly because GeneratePress would otherwise paint it its own colour,
 * and :focus-visible matches the site's focus ring.
 *
 * NOTHING ELSE IN THE ROW CHANGES. .fp-article__meta keeps its 14px size,
 * gray-500 colour, flex layout, gap, separator and <time>; only the name
 * inside the existing .fp-article__byline span becomes a link. A record with
 * no author renders that span's plain text and matches none of this. */
.fp-article__byline-link { color: var(--fp-color-blue); text-decoration: none; }
.fp-article__byline-link:visited { color: var(--fp-color-blue); }
.fp-article__byline-link:hover { text-decoration: underline; }
.fp-article__byline-link:focus-visible {
    outline: 2px solid var(--fp-color-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Scoring-transparency line ────────────────────────────
 * Sits directly beneath the FIRST provider module. Body treatment is the
 * existing .fp-article__footnote (14px / 1.55 / gray-500), whose own docblock
 * describes it as the qualifier voice - the correct register for a disclosure.
 * Only the alignment is new: max-width matches .fp-providers' 1080px and the
 * auto margins put its left edge on the module's left edge.
 *
 * The link is the site's CANONICAL Text CTA, not a third variant: 14px/500
 * blue with the shared arrow gap, identical to .fp-editorial-card__methodology
 * on the homepage and .fp-category-hero__methodology on every category hero
 * (Bible ch.54.9). Colour states are declared for the same GeneratePress
 * reason those two blocks declare them. */
.fp-article__methodology {
    max-width: 1080px;
    margin: 10px auto 0;
}
.fp-article__methodology a {
    display: inline-flex;
    align-items: center;
    font-size: var(--fp-font-body-s);          /* 14px */
    font-weight: var(--fp-weight-medium);
    color: var(--fp-color-blue);
    text-decoration: none;
    transition: var(--fp-button-transition);
}
.fp-article__methodology a .fp-cta-arrow { margin-left: var(--fp-cta-arrow-gap); }
.fp-article__methodology a:hover { color: var(--fp-color-blue); text-decoration: underline; }
.fp-article__methodology a:visited { color: var(--fp-color-blue); }
.fp-article__methodology a:active { color: var(--fp-color-blue-pressed); }
.fp-article__methodology a:focus-visible {
    outline: 2px solid var(--fp-color-blue);
    outline-offset: 3px;
    border-radius: 2px;
}


/* ═══════════════════════════════════════════════════════════
   OPENING HIERARCHY v2 — QUICK ANSWER AS A MAJOR ARTICLE MODULE
   v3.40.81 · informational / resource articles only
   ═══════════════════════════════════════════════════════════

   The Quick Answer is promoted from a prose callout inside the reading
   column to a major article module sitting between the hero and the first
   Top Providers strip. Three surfaces now share ONE horizontal system:

       .fp-article__quick   L 180  R 1260  W 1080   @1440
       .fp-providers        L 180  R 1260  W 1080   @1440
       .fp-article__methodology                     same

   ⚠ EVERY VALUE BELOW IS LIFTED FROM AN EXISTING DECLARATION. Nothing here
     is a new number:
       1080px + auto side margins ....... .fp-providers
       margin-top --fp-space-m (24px) ... .fp-providers
       inset --fp-space-m (24px) ........ .fp-providers__heading
       inset --fp-space-s (16px) <640 ... .fp-providers__heading's own @media
       inner measure 820px at >=1280 .... .fp-article__quick's OWN rule at
                                          L690, moved from the block to its
                                          children at the same breakpoint

   ⚠ 820px, NOT 788px. Today's rendered text is 788px (820 outer - 2x16px
     padding). The inner cap is deliberately the established 820px article
     value rather than a reverse-engineered 788px; the resulting ~103-106
     character measure was measured and accepted. Do not "correct" it to 788.

   ⚠ VERTICAL PADDING IS UNCHANGED AT 12px. Only the horizontal inset moved,
     16px -> 24px. The component's height is byte-for-byte what it was at
     every governed width. Do not add vertical padding to "balance" the wider
     inset - the compact character is the approved one.

   ⚠ SCOPED AWAY FROM THE FROZEN COMPARISONS. :not(.fp-article--comparison)
     is load-bearing, not defensive tidiness: all four comparison records
     declare 'variant' => 'comparison', they keep the Quick Answer INSIDE
     .fp-article__main, and an unscoped rule here would give them a 24px top
     margin they have never had. The PHP gate keeps their DOM unchanged; this
     selector keeps their CSS unchanged.

   ⚠ :not(.fp-article--slug-business-bank-account) ADDED v3.40.83, AND IT IS
     LOAD-BEARING. Business Bank Account has its own Quick Answer geometry in
     the block at the end of this file. At v3.40.82 that block tried to WIN
     against these rules and lost: the BBA selector was (0,2,0) and this one
     is (0,3,0), because :not() contributes its argument's specificity. The
     BBA rules silently never applied and shipped to staging. The fix is not
     a bigger selector - it is removing BBA from this scope so the two rule
     sets never both match. Do not delete this :not() to "simplify"; doing so
     re-creates a cascade race that a reader cannot see.
     Business Checking Account and How to Choose still match here, unchanged.

   ⚠ :not(.fp-article--best-of) ADDED v3.42.0 FOR THE SAME REASON. Best Of has
     its own hero-width Quick Verdict in the Best Of block at the end of this
     file; excluding it here keeps the two rule sets mutually exclusive rather
     than racing on specificity. No other article matches .fp-article--best-of. */

.fp-article:not(.fp-article--comparison):not(.fp-article--slug-business-bank-account):not(.fp-article--editorial) .fp-article__quick {
    max-width: 1080px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--fp-space-m);             /* 24px — hero -> answer */
    margin-bottom: var(--fp-space-m);          /* 24px — answer -> providers */
    padding-left: var(--fp-space-m);           /* 24px module inset */
    padding-right: var(--fp-space-m);
}

/* Mobile inset matches .fp-providers__heading's own <640 value. */
@media (max-width: 639.98px) {
    .fp-article:not(.fp-article--comparison):not(.fp-article--slug-business-bank-account):not(.fp-article--editorial) .fp-article__quick {
        padding-left: var(--fp-space-s);       /* 16px */
        padding-right: var(--fp-space-s);
    }
}

/* Inner editorial measure. LEFT-ALIGNED, never centred: the label and the
   answer share the module's left inset and the surplus becomes right-hand
   breathing room (236px at 1440). No auto margins here — that is the whole
   point. Gated to >=1280, the breakpoint this value already lived at, so
   below it the copy uses the available responsive width with no cap. */
@media (min-width: 1280px) {
    .fp-article:not(.fp-article--comparison):not(.fp-article--slug-business-bank-account):not(.fp-article--editorial) .fp-article__quick > .fp-article__quick-heading,
    .fp-article:not(.fp-article--comparison):not(.fp-article--slug-business-bank-account):not(.fp-article--editorial) .fp-article__quick > p {
        max-width: 820px;
    }
}


/* ═══════════════════════════════════════════════════════════
   BUSINESS BANK ACCOUNT — ARTICLE MASTER REFINEMENTS
   v3.40.83 · SCOPED TO ONE ARTICLE ON PURPOSE
   ═══════════════════════════════════════════════════════════

   ⚠ NO CASCADE RACE. Every rule below is scoped to
     .fp-article--slug-business-bank-account, and the v3.40.81 Quick Answer
     block above now carries :not(.fp-article--slug-business-bank-account).
     The two sets are mutually exclusive by selector, so nothing here depends
     on specificity or source order to take effect. That is deliberate:
     v3.40.82 relied on out-specifying and lost silently.

   ⚠ SCOPED BECAUSE BBA IS BEING FINISHED FIRST. It becomes the master the
     remaining informational articles are REBUILT from. Until that promotion
     is approved, none of this may reach Business Checking Account or How to
     Choose. The four FROZEN comparisons are excluded twice over - by this
     slug scope and by the variant gate in page-templates/article.php.       */


/* ── QUICK ANSWER AT HERO WIDTH ────────────────────────────
   ⚠ NOT A NEW WIDTH. .fp-article__hero-band declares no width of its own and
     .fp-article__feature has no rule at all: the hero is simply a block child
     of .fp-article__container. Hero width is reached by REMOVING the Quick
     Answer's max-width, never by setting a number.
        1440  hero L120 R1320 W1200   quick L120 R1320 W1200
         390  hero L20  R370  W350    quick L20  R370  W350
   ⚠ THE INSETS ARE THE HERO BAND'S OWN - --fp-space-l (32px) at >=640 and
     --fp-margin-mobile (20px) below - which lands the answer text 1px inside
     the hero H1, the 1px being the hero card's border. Vertical padding stays
     at the shipped 12px: wider and more useful, not taller.                */
.fp-article--slug-business-bank-account .fp-article__quick {
    max-width: none;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    margin-top: var(--fp-space-m);             /* 24px — hero -> answer */
    margin-bottom: var(--fp-space-m);          /* 24px — answer -> providers */
    padding-left: var(--fp-space-l);           /* 32px, the hero's own inset */
    padding-right: var(--fp-space-l);
}

/* ⚠ NO INNER MEASURE, AT ANY WIDTH. Text width is exactly
   outer − left padding − right padding: 1136px at 1440, 310px at 390. The
   820px cap is gone by decision (2026-09-08) with the ~147 character line
   measured and accepted - this is a three-sentence answer component, not
   long-form prose. Do not reintroduce a prose column here.                 */
.fp-article--slug-business-bank-account .fp-article__quick > .fp-article__quick-heading,
.fp-article--slug-business-bank-account .fp-article__quick > p {
    max-width: none;
}

@media (max-width: 639.98px) {
    .fp-article--slug-business-bank-account .fp-article__quick {
        padding-left: var(--fp-margin-mobile); /* 20px, the hero's own inset */
        padding-right: var(--fp-margin-mobile);
    }
}


/* ── TABLE TAKEAWAY ────────────────────────────────────────
   The sentence closing a table already OWNED its section; the defect was
   width - a 1140px table over an 820px paragraph read as an orphan. The
   takeaway now takes the table wrapper's OWN governed 1140px.
   ⚠ NO NEW SPACING: the 16px gap above is .fp-article__table-wrap's own
     bottom margin, left alone rather than overridden.
   ⚠ ELEMENT-QUALIFIED ON PURPOSE: `.fp-article__section > p` is (0,1,1) and
     its max-width:820px is the thing being released; a plain class at (0,1,0)
     loses to it. Measured NO before this qualifier, YES after.
   ⚠ NOTHING BELOW 1280 - there the wrapper is auto-width and the paragraph
     already matches it.                                                     */
@media (min-width: 1280px) {
    .fp-article--slug-business-bank-account .fp-article__section > p.fp-article__table-takeaway {
        width: 1140px;
        max-width: 1140px;
    }
}


/* ── END-MATTER EDITORIAL NOTE ─────────────────────────────
   Subordinate transparency copy, not fine print. 15px/1.6 is the compact
   end-matter step the References purpose sentence already uses; the 13px
   paragraph gap is .fp-article__section p's own bottom margin; the 40px above
   is .fp-article__section's own rhythm, so the closing 64px to the footer is
   untouched.
   ⚠ .fp-guide-editorial-note LEAVES THIS ARTICLE. It was an
     Informational-Guide class whose stylesheet is not enqueued on article
     pages, so its 10px type, border and 7% margins never applied - it had
     been rendering as plain 17px article prose.                             */
.fp-article--slug-business-bank-account .fp-article__endnote {
    margin-top: 40px;
}
.fp-article--slug-business-bank-account .fp-article__endnote p {
    max-width: 820px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--fp-color-gray-500);
    margin: 0 0 13px;
}
.fp-article--slug-business-bank-account .fp-article__endnote p:last-child {
    margin-bottom: 0;
}


/* ── ANCHOR LANDING AFTER THE DUPLICATE-ID FIX ─────────────
   Nineteen ids were declared twice, once on the <section> and again on its
   <h2>. The section keeps the id and the heading's copy is dropped, matching
   what #quick-answer, #bottom-line and #sources already do. scroll-margin-top
   moves with the target so the landing position is unchanged.               */
.fp-article--slug-business-bank-account .fp-article__section {
    scroll-margin-top: var(--fp-space-m);
}


/* ═══════════════════════════════════════════════════════════
   BEST OF — commercial article variant
   v3.40.85 · scoped to .fp-article--best-of
   ═══════════════════════════════════════════════════════════

   ⚠ A VARIANT, NOT A NEW SYSTEM. Emitted by the record's
     'variant' => 'best-of', exactly the mechanism the four FROZEN comparison
     articles already use. Every rule below is scoped to that class, so no
     informational article and no comparison article can be reached by it.

   ⚠ IT DOES NOT REDEFINE THE ARTICLE FAMILY. Hero, Quick Verdict, provider
     module, methodology line, TOC rail, FAQ, Glossary, tables and end-matter
     all keep their shared treatment. Only the two things a commercial page
     genuinely adds are defined here: an inert CTA, and a table takeaway that
     matches its table.                                                      */


/* ── INERT PROVIDER CTA ────────────────────────────────────
   The launch rule is that no provider destination exists yet: no placeholder
   fragment, no invented URL, no affiliate link. So the CTA is a <span>.

   ⚠ THIS IS A DELIBERATE COPY OF .fp-providers__cta, NOT A NEW TREATMENT.
     Identical declarations, so the Top Picks table and the deep-dive CTA read
     exactly like the provider module's own CTA - which is itself already a
     <span> here, because article-providers.php emits one whenever a record
     carries no provider_url. All three CTA locations therefore match.

   ⚠ NO :hover, NO CURSOR CHANGE, NO FOCUS STYLE. It is not interactive and
     must not advertise itself as interactive. When real destinations are
     activated after launch these become <a> elements and inherit the shared
     link states; nothing here needs to be undone first.                     */
.fp-article--best-of .fp-bestof__cta {
    display: inline-flex;
    align-items: center;
    font-size: var(--fp-font-body-s);
    font-weight: var(--fp-weight-medium);
    line-height: 1;
    color: var(--fp-color-blue);
    text-decoration: none;
    white-space: nowrap;
}
.fp-article--best-of .fp-bestof__cta .fp-cta-arrow {
    margin-left: var(--fp-cta-arrow-gap);
}

/* The deep-dive CTA sits on its own line under "Who should choose …?".
   --fp-space-s above it, and its own bottom margin cleared so the following
   H3 keeps the section's normal heading rhythm. */
.fp-article--best-of .fp-bestof__cta-row {
    margin: var(--fp-space-s) 0 0;
}


/* ── TABLES STAY IN THE READING COLUMN ─────────────────────
   ⚠ THIS CANCELS THE SHARED 1140px BREAKOUT, AND IT IS A BUG FIX, NOT TASTE.

   At >=1280 the family lets .fp-article__table-wrap, .fp-faq and .fp-glossary
   break out to 1140px (820 main + 40 gap + 280 rail) so a wide table can use
   the whole canvas. That works on the informational articles because they OPEN
   WITH PROSE - their first table falls below the On This Page rail, so the
   breakout passes through empty space.

   A Best Of article opens with tables. Measured on this page's own markup, the
   Top Picks and Category Winners wrappers land at T=825-1031 and T=1164-1369
   while the rail occupies T=735-1262, and a 1140px block ends exactly on the
   rail's right edge. Result: two tables rendered UNDERNEATH the contents list
   at 2048, 1920, 1440 and 1280. Four widths, both tables, every time.

   The rail is not the thing to change - it is shared and frozen. So for this
   variant the wrappers stay inside the 820px reading column and scroll
   internally when a table is wider, which is exactly what the wrapper was
   built to do ("the wrapper scrolls, never the page"). Nothing overlaps at any
   width, and the takeaway then matches its table at 820px through the shared
   .fp-article__section > p rule, so no width rule is needed for it here.

   ⚠ .fp-faq AND .fp-glossary KEEP THEIR BREAKOUT. They sit far below the rail
     on this page and were measured clear at every width, so they stay
     identical to the rest of the family.                                    */
@media (min-width: 1280px) {
    .fp-article--editorial .fp-article__table-wrap {
        width: auto;
        max-width: 100%;
    }
}

/* The sentence that closes a table tracks that table at EVERY width, by
   releasing the shared 820px prose cap rather than setting a width of its own.
   The wrapper is auto here, so "match the table" and "fill the column" are the
   same instruction and no number is introduced.

   ⚠ MEASURED, NOT ASSUMED. Without this the takeaway is 820px under a 944px
     table at 1024 - the same table-over-narrower-sentence discontinuity the
     Business Bank Account audit identified, just 124px instead of 320px.
   ⚠ ELEMENT-QUALIFIED: `.fp-article__section > p` is (0,1,1) and a plain class
     at (0,1,0) loses to it.                                                 */
.fp-article--editorial .fp-article__section > p.fp-article__table-takeaway {
    max-width: none;
}


/* ── END-MATTER EDITORIAL NOTE ─────────────────────────────
   The same subordinate transparency treatment the Business Bank Account
   master uses - 15px/1.6, 13px paragraph gap, 40px above - declared again
   under this variant's scope rather than widened to the whole family. When
   Best Of and the informational master are both approved to share it, the two
   blocks collapse into one; until then neither reaches the other.           */
.fp-article--editorial .fp-article__endnote {
    margin-top: 40px;
}
.fp-article--editorial .fp-article__endnote p {
    max-width: 820px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--fp-color-gray-500);
    margin: 0 0 13px;
}
.fp-article--editorial .fp-article__endnote p:last-child {
    margin-bottom: 0;
}


/* ── ANCHOR LANDING ────────────────────────────────────────
   Sections own their ids and headings do not repeat them, so scroll-margin
   belongs on the section, matching the Business Bank Account master.        */
.fp-article--editorial .fp-article__section {
    scroll-margin-top: var(--fp-space-m);
}


/* ── HERO-WIDTH NORMALIZATION ──────────────────────────────
   v3.42.0 · scoped to .fp-article--best-of

   ⚠ WHAT WAS WRONG. Below 1280 every block is already a full-width child of
     .fp-article__container, so the page is one width and nothing here applies
     there. From 1280 the page had THREE outer widths, measured at 1440:
        hero                         L120  R1320  W1200
        Quick Verdict, provider x2   L180  R1260  W1080   (max-width: 1080px)
        article grid 820+40+280      L150  R1290  W1140   (justify-content: center)
     The narrowing was inherited, not designed for this page: 1080 is the
     informational family's module width and 820px is a TRACK, not a section.

   ⚠ THE FIX IS TO LET THE HERO'S BOX GOVERN, NOT TO ADD A NUMBER. The hero
     declares no width - it is the container's content box - so every rule
     below REMOVES a cap or turns a fixed track into 1fr. No width, padding,
     spacing, colour or type value is introduced.

   ⚠ INTERNAL MEASURE IS KEPT WHERE IT IS LEGITIMATE. Prose paragraphs and
     lists keep their shared 820px reading measure inside the wider sections;
     the provider cells, table cells, FAQ rows and the rail are unchanged.   */

/* Quick Verdict at hero width. Horizontal padding stays the value it already
   rendered with (24px, 16px below 640) and vertical padding stays the base
   12px: same component, wider box. Margins are the ones it already had. */
.fp-article--editorial:not(.fp-article--comparison) .fp-article__quick {
    max-width: none;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    margin-top: var(--fp-space-m);             /* 24px — hero -> answer */
    margin-bottom: var(--fp-space-m);          /* 24px — answer -> providers */
    padding-left: var(--fp-space-m);           /* 24px, unchanged */
    padding-right: var(--fp-space-m);
}
@media (max-width: 639.98px) {
    .fp-article--editorial:not(.fp-article--comparison) .fp-article__quick {
        padding-left: var(--fp-space-s);       /* 16px, unchanged */
        padding-right: var(--fp-space-s);
    }
}

/* ⚠ THE QUICK VERDICT TEXT CONSTRAINT. From 1280 the shared block capped the
   label and answer at 820px inside a 1080px box - 236px of dead space on the
   right at 1440. The copy now runs the full interior: outer width minus the
   24px insets, the same rule the Business Bank Account master adopted. It is
   a short answer component, not long-form prose. */
.fp-article--editorial:not(.fp-article--comparison) .fp-article__quick > .fp-article__quick-heading,
.fp-article--editorial:not(.fp-article--comparison) .fp-article__quick > p {
    max-width: none;
}

/* ── COMPARISON QUICK VERDICT — CANONICAL TRACK (v3.50.6) ──
   The 820px desktop width was inherited from the old 820px .fp-article__main
   column, which the editorial framework replaced with a centred 1000px track.
   With Quick now emitted BEFORE .fp-article__layout it sat in the 1200px
   container at 820px/x120, between a 1080px score module and the 1000px track -
   three left edges in the first 900px of the page. It takes the editorial track
   instead, so the opening reads 1080 -> 1000 -> 1000 -> 1000.

   ⚠ GATED TO >=1280, where the track exists. Below it the layout is a single
   full-width column and Quick already uses the available width (720 / 350),
   which is unchanged. Geometry only - no copy, colour, padding or type change. */
@media (min-width: 1280px) {
    .fp-article--editorial.fp-article--comparison .fp-article__quick {
        width: 1000px;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Both provider module placements take the hero's width. Cells stay four over
   three and simply share the extra width; nothing inside the module changes. */
.fp-article--best-of .fp-providers,
.fp-article--providers .fp-providers {
    max-width: none;
}

@media (min-width: 1280px) {
    /* The 820px track becomes the remainder of the canvas once the unchanged
       280px rail and 40px gap are taken: 880px at a 1200px canvas. The grid
       now spans the hero's full box, so the main column starts on the hero's
       left edge and the rail ends on its right edge. */
    .fp-article--editorial .fp-article__layout {
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    /* The closing layout (FAQ, Glossary, The Bottom Line) has no rail, so its
       single column spans both tracks instead of stopping short of the right
       edge where the rail would be. */
    .fp-article--editorial .fp-article__layout > .fp-article__main:only-child {
        grid-column: 1 / -1;
    }

    /* ⚠ BUT THE MID-ARTICLE CONTINUATION LAYOUT IS NOT A CLOSING LAYOUT.
       A record declaring 'providers_after_compare' splits the body so the first
       Top Providers module can sit at container width between the two halves.
       That second layout has no rail either, so it matched the rule above and
       silently widened the reading track from 880px to 1200px for everything
       from the Decision Framework onward - most of the article. It carries body
       copy, not the closing blocks, so it keeps the column the article opened
       with. Scoped to the modifier, so the closing layout and every frozen
       article are untouched. */
    .fp-article--best-of .fp-article__layout--continued > .fp-article__main:only-child {
        grid-column: 1 / 2;
    }

    /* The shared 1140px FAQ/Glossary width was sized to the old centred grid.
       Released, they fill that full-width column - the hero's width. */
    .fp-article--editorial .fp-faq,
    .fp-article--editorial .fp-glossary {
        width: auto;
        max-width: none;
    }
}


/* ── SEVEN-PROVIDER MODULE — FOUR OVER THREE, CENTRED ──────
   v3.41.4 · scoped to .fp-providers--count-7

   ⚠ ONE COMPONENT, NOT THREE FLOATING CARDS. Everything below places cells and
     cancels borders. Card padding, typography, logo, score, label, CTA,
     vertical spacing, cell height, colours and the module's own outer border
     and radius are the shared visual system, untouched. No width, no colour,
     no size, no new class.

   ⚠ WHAT WAS WRONG. At >=1280 the shared module is four equal columns, so
     seven records rendered as four across and then three LEFT-ALIGNED into
     columns 1-3 with an empty fourth position - the lower row read as a
     truncated grid rather than a row of its own.

   ⚠ HOW IT IS CENTRED, WITHOUT CHANGING CELL WIDTH. The track count doubles to
     EIGHT and every cell spans TWO of them, so a cell is still exactly a
     quarter of the module and row 1 is unchanged to the pixel: 1-2, 3-4, 5-6,
     7-8. Cell 5 then starts at track 2, so the lower row occupies tracks 2-7 -
     three equal cells with exactly one track of whitespace on each side.
     Cells 6 and 7 follow it by ordinary auto-placement.

   ⚠ THE ROW DIVIDER IS DRAWN BY ROW 1'S BOTTOM EDGE, and that is the reason it
     is complete. Row 2 is 6 tracks wide, so a border-top on its cells would
     stop short at both ends and leave the divider 3/4 drawn. Row 1 spans all
     eight tracks, so its border-bottom crosses the full module width. Row 2
     keeps the family's `border-top: 0`, so nothing doubles.

   ⚠ THE VERTICAL DIVIDERS NEED NO NEW RULE. Cells 5 and 6 already take
     `border-right` from the shared >=1280 rule and cell 7 is `:last-child`, so
     the lower row is divided between adjacent cells and draws nothing against
     the whitespace. Cell 4 sits on the module's own border, so its
     `border-right` is cancelled rather than doubling it.                    */
@media (min-width: 640px) and (max-width: 1279px) {
    /* Two across here. Odd AND last: the lone 7th cell has nothing to its
       right, so the two-column rule's divider would point into empty space. */
    .fp-providers--count-7 .fp-providers__item:last-child { border-right: 0; }
}
@media (min-width: 1280px) {
    /* Eight tracks, two per cell: the quarter-width cell is unchanged. */
    .fp-providers--count-7 .fp-providers__list {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .fp-providers--count-7 .fp-providers__item { grid-column: span 2; }

    /* The only placement in the block. Row 2 starts one track in, so its three
       cells sit on tracks 2-7 with equal whitespace either side. */
    .fp-providers--count-7 .fp-providers__item:nth-child(5) {
        grid-column: 2 / span 2;
    }

    /* Full-width row divider - see the note above on why it is row 1's. */
    .fp-providers--count-7 .fp-providers__item:nth-child(-n+4) {
        border-bottom: 1px solid var(--fp-color-gray-200);
    }

    /* Cell 4 ends row 1 on the module's own border. */
    .fp-providers--count-7 .fp-providers__item:nth-child(4) { border-right: 0; }
}


/* ═══════════════════════════════════════════════════════════
   BEST OF — v3.42.0 FINAL VISUAL CORRECTIONS
   Scoped to .fp-article--best-of (Best Business Bank Accounts only).
   ═══════════════════════════════════════════════════════════ */

/* ── TABLE COLUMN HEADINGS, CENTRED ────────────────────────
   Every data table on the page centres its header labels. Body cells keep the
   shared left alignment - only the headings move. Copy, column order, widths,
   borders and the wrapper's horizontal scroll are untouched.
   (0,2,2) beats the shared `.fp-article__table thead th` at (0,1,2).       */
.fp-article--editorial .fp-article__table thead th {
    text-align: center;
}


/* ── TOP BUSINESS BANK ACCOUNT PROVIDERS — COMPACT HORIZONTAL CARDS ──
   v3.42.1 final: seven individual cards, each a logo box on the left and one
   left-aligned text column on the right (name, score, "FP Score", Visit link),
   the site owner's approved reference. The module keeps its hero-width box,
   border, radius and heading; only the card interior and card width change.

       >=1024   four cards, then three of the SAME width, centred
       640-1023 two across, provider order kept, the lone seventh centred
       <640     one card per row, full width

   ⚠ CARD WIDTH IS CONTENT-DERIVED, NOT A GUESS. The widest text line on the
     page is "Visit Bank of America ->" at 160.2px (14px / 500, measured). One
     card is border 2 + padding 28 + logo box 52 + gap 14 + that line = 256.2,
     so the card is capped at 258px and never wider. Below the cap the old
     share-of-the-row basis still applies, so nothing can overflow.
     At 1440: 258px cards (were 275.5px centred stacks, 155.7px tall).

   ⚠ 1024-1279 IS THE ONE VARIANT. There the row share is 215.5px, too narrow
     for the widest Visit line beside the logo, so the Visit link takes the
     card's full inner width on its own row under the logo and text, and the
     logo box and inset step down (44px, 12px) so no name wraps. Every card at
     that width uses the same arrangement, so all seven stay identical.

   ⚠ HOW ROW 2 STAYS THE SAME WIDTH AND CENTRED. The list is a wrapping flex
     row with `justify-content: center`; every card has the same fixed basis,
     so row 2 cannot stretch and centring puts equal space either side.

   ⚠ EXISTING VALUES ONLY. Borders gray-200, --fp-radius-card on the card and
     --fp-radius-button on the logo box, --fp-space-s gap. Card type - navy
     name, green score, muted label, blue link - is the module's own, unchanged.
     No shadow, no tint, no badge.

   ⚠ WHY (0,3,0) AND LAST. The shared module draws cell dividers at
     (0,1,0)-(0,2,0) and the v3.41.4 count-7 block at (0,3,0) earlier in this
     file. Equal specificity later in source wins without !important.        */
.fp-article--best-of .fp-providers .fp-providers__list,
.fp-article--providers .fp-providers .fp-providers__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--fp-space-s);                        /* 16px */
    padding: 0 var(--fp-space-m) var(--fp-space-m); /* the heading's 24px inset */
    box-sizing: border-box;
}
.fp-article--best-of .fp-providers .fp-providers__item,
.fp-article--providers .fp-providers .fp-providers__item {
    flex: 0 0 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-content: center;
    justify-items: start;
    padding: 14px;
    text-align: left;
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-card);
    background-color: var(--fp-color-white);
}
.fp-article--best-of .fp-providers .fp-providers__logo,
.fp-article--providers .fp-providers .fp-providers__logo {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    box-sizing: border-box;
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-button);
    background-color: var(--fp-color-white);
}
.fp-article--best-of .fp-providers .fp-providers__logo img,
.fp-article--providers .fp-providers .fp-providers__logo img {
    width: 28px;
    height: 28px;
}
.fp-article--best-of .fp-providers .fp-providers__name,
.fp-article--providers .fp-providers .fp-providers__name { grid-column: 2; grid-row: 1; }
.fp-article--best-of .fp-providers .fp-providers__score,
.fp-article--providers .fp-providers .fp-providers__score {
    grid-column: 2;
    grid-row: 2;
    align-items: flex-start;
}
.fp-article--best-of .fp-providers .fp-providers__score-value,
.fp-article--providers .fp-providers .fp-providers__score-value { line-height: 1.3; }
.fp-article--best-of .fp-providers .fp-providers__score-label,
.fp-article--providers .fp-providers .fp-providers__score-label { line-height: 1.3; }
.fp-article--best-of .fp-providers .fp-providers__cta,
.fp-article--providers .fp-providers .fp-providers__cta {
    grid-column: 2;
    grid-row: 3;
    margin-top: var(--fp-space-xxs);               /* 4px */
}

@media (max-width: 639.98px) {
    .fp-article--best-of .fp-providers .fp-providers__list,
    .fp-article--providers .fp-providers .fp-providers__list {
        padding: 0 var(--fp-space-s) var(--fp-space-s); /* the heading's 16px inset */
    }
}
@media (min-width: 640px) {
    .fp-article--best-of .fp-providers .fp-providers__item,
    .fp-article--providers .fp-providers .fp-providers__item {
        flex-basis: min(258px, calc((100% - var(--fp-space-s)) / 2));
    }
}
@media (min-width: 1024px) {
    .fp-article--best-of .fp-providers .fp-providers__item,
    .fp-article--providers .fp-providers .fp-providers__item {
        flex-basis: min(258px, calc((100% - 3 * var(--fp-space-s)) / 4));
    }
}
/* THE HEADING STARTS WHERE THE CARDS START, as in the reference. The card
   group is centred and at most N x 258 + gaps wide, so its left edge inside the
   module is max(the 24px inset, half the leftover width). Percentage padding
   resolves against the module's content box, the same width the list sits in.
   Where the group fills the row this is simply the heading's own 24px. */
@media (min-width: 640px) {
    .fp-article--best-of .fp-providers .fp-providers__heading,
    .fp-article--providers .fp-providers .fp-providers__heading {
        padding-left: max(var(--fp-space-m), calc((100% - 2 * 258px - var(--fp-space-s)) / 2));
        padding-right: max(var(--fp-space-m), calc((100% - 2 * 258px - var(--fp-space-s)) / 2));
    }
}
@media (min-width: 1024px) {
    .fp-article--best-of .fp-providers .fp-providers__heading,
    .fp-article--providers .fp-providers .fp-providers__heading {
        padding-left: max(var(--fp-space-m), calc((100% - 4 * 258px - 3 * var(--fp-space-s)) / 2));
        padding-right: max(var(--fp-space-m), calc((100% - 4 * 258px - 3 * var(--fp-space-s)) / 2));
    }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    /* 215.5px cards: border 2 + padding 24 + logo 44 + gap 12 leaves 133.5px,
       enough for the widest name ("Bank of America", 127.5px) on one line. */
    .fp-article--best-of .fp-providers .fp-providers__item,
    .fp-article--providers .fp-providers .fp-providers__item {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 12px;
        padding: 12px;
    }
    .fp-article--best-of .fp-providers .fp-providers__logo,
    .fp-article--providers .fp-providers .fp-providers__logo {
        grid-row: 1 / span 2;
        width: 44px;
        height: 44px;
    }
    .fp-article--best-of .fp-providers .fp-providers__cta,
    .fp-article--providers .fp-providers .fp-providers__cta {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: var(--fp-space-xs);            /* 8px */
    }
}

/* v3.56.13 - ARTICLE TOP PROVIDER CARDS: CENTRED TEXT COLUMN.
   Every instance of the logo-left article module (Best Of articles and the
   How-to guide, each placement on the page) centres everything to the right
   of the logo - name, score, "FinanceProspector Score" and the Visit link -
   within that text column, as the /providers/ cards do. The logo stays on
   the left at its existing size; card and module dimensions are unchanged.

   The Visit link stays in the text column at every width (the 1024-1279
   compact tier had moved it onto a full-width row) and may wrap. Where the
   column is narrower than the longest link ("Visit Bank of America ->",
   160px) or the label (155.4px) - 1024 to ~1170px, and the How-to guide's
   226px cards from 1280 - each wraps between words onto a second centred
   line instead of crossing the card border. display: block keeps the arrow
   attached to the last word. /providers/ has its own rules and is
   excluded. */
.fp-article--best-of .fp-providers .fp-providers__name,
.fp-article--providers:not(.fp-pi__providers) .fp-providers .fp-providers__name,
.fp-article--best-of .fp-providers .fp-providers__cta,
.fp-article--providers:not(.fp-pi__providers) .fp-providers .fp-providers__cta {
    justify-self: center;
    text-align: center;
}
.fp-article--best-of .fp-providers .fp-providers__score,
.fp-article--providers:not(.fp-pi__providers) .fp-providers .fp-providers__score {
    justify-self: center;
    align-items: center;
    text-align: center;
}
.fp-article--best-of .fp-providers .fp-providers__cta,
.fp-article--providers:not(.fp-pi__providers) .fp-providers .fp-providers__cta {
    display: block;
    grid-column: 2;
    white-space: normal;
}
.fp-providers__cta-end { white-space: nowrap; }   /* last word + arrow stay together */
/* Row alignment. Cards in a row stretch to the tallest card, and the base
   align-content: center then set a one-line card's name lower than a wrapped
   neighbour's. The trailing 1fr track takes the spare height, so name, score
   and label start at the same y in every card of a row, and the logo, which
   spans all three tracks, stays centred on the full card height. */
.fp-article--best-of .fp-providers .fp-providers__item,
.fp-article--providers:not(.fp-pi__providers) .fp-providers .fp-providers__item {
    grid-template-rows: auto auto 1fr;
}
.fp-article--best-of .fp-providers .fp-providers__logo,
.fp-article--providers:not(.fp-pi__providers) .fp-providers .fp-providers__logo {
    grid-row: 1 / span 3;
}
.fp-article--best-of .fp-providers .fp-providers__cta,
.fp-article--providers:not(.fp-pi__providers) .fp-providers .fp-providers__cta {
    align-self: start;
}


/* ── FINE PRINT: FOOTNOTE SPECIFICITY REPAIR (v3.42.1) ─────
   .fp-article__footnote declares 14px / 1.55 at (0,1,0). Inside a section it
   lost to `.fp-article__section p` (17px / 1.62) at (0,1,1), so all nine
   footnotes on this page, the eight-dimension snapshots and the methodology
   line among them, rendered at body size, and the methodology sentence sat at
   17px beside its own 14px link. This restates the component's OWN values at
   a specificity that wins; no size is introduced. Spacing is unchanged. */
/* ── QUICK VERDICT: SEPARATE ADJACENT PARAGRAPHS (2026-09-18) ──
   A Quick Verdict carrying two paragraphs rendered them with a 0px gap, so the
   second ran straight on from the first. .fp-article__quick p declares no
   margin because every Quick Verdict on the site had exactly one paragraph
   until now.

   ⚠ CONTAINMENT. `p + p` requires a SECOND paragraph inside the block. The
     frozen Best Business Bank Accounts Quick Verdict has one, so this selector
     cannot match there and that page cannot move. Scoped to --best-of as well,
     so no other article family is reachable either. Proven at 1440/768/390.
   Spacing only; no size, colour or wording changes. */
.fp-article--editorial:not(.fp-article--comparison) .fp-article__quick p + p {
    margin-top: var(--fp-space-s);
}

.fp-article--editorial .fp-article__section p.fp-article__footnote{
    font-size: var(--fp-font-body-s);              /* 14px */
    font-weight: var(--fp-weight-body);
    line-height: 1.55;
}

/* ── TABLE COLUMN HEADINGS — 16 / 600 (v3.42.1) ────────────
   Were 17px / 700: larger and heavier than the 16px / 400 cells they label,
   and 17px is not a token. Now the body-m size at label weight; the gray-50
   band and navy colour still distinguish them. Centring and line height are
   unchanged; body cells, row headers and scrolling are untouched. */
.fp-article--editorial .fp-article__table thead th {
    font-size: var(--fp-font-body-m);              /* 16px */
    font-weight: var(--fp-weight-label);           /* 600 */
}


/* ── REFERENCES: "TITLE — SOURCE", SOURCE NAME LINKED (v3.42.1) ──
   One line per cited page. The title and dash are plain text at the list's
   own 15px / 1.6; only the source name is a link. Treatment is the established
   quiet end-matter link Business Bank Account uses - blue, no underline at
   rest, underline on hover - so 22 repeated source names read as attribution,
   not as a column of underlines. A source name never splits across lines
   ("Bank" / "of America"). Supersedes the [1] [2] citation-marker rules.
   2026-09-16 REFERENCES REBUILD: the descriptive TITLE is now the link, and
   titles such as "Additional Banking Services and Fees for Business Accounts
   — Effective June 14, 2026" must wrap at 390px, so the former nowrap is
   removed. Colour, weight, underline-on-hover and focus ring are unchanged.
   (0,4,1) beats the shared underlined `.fp-article__section--sources
   .fp-article__list a` at (0,2,1); the frozen comparison articles use no
   .fp-article__source-link and are untouched.
   2026-09-21 v3.50.4: the `.fp-article--best-of` scope is REMOVED. References
   are now ONE canonical architecture for every Business Banking article
   (REFERENCES-STANDARD v1.1 §0), and the How-To carries no best-of variant
   class, so the variant scope silently left it on the shared underlined rule.
   Specificity drops to (0,3,1), which still beats that shared rule at (0,2,1).
   Blast radius is nil beyond the four articles: the five other templates with a
   sources section carry no .fp-article__source-link at all. */
.fp-article__section--sources .fp-article__list a.fp-article__source-link {
    color: var(--fp-color-blue);
    font-weight: var(--fp-weight-medium);
    text-decoration: none;
}
.fp-article__section--sources .fp-article__list a.fp-article__source-link:visited {
    color: var(--fp-color-blue);
}
.fp-article__section--sources .fp-article__list a.fp-article__source-link:hover {
    text-decoration: underline;
}
.fp-article__section--sources .fp-article__list a.fp-article__source-link:focus-visible {
    outline: var(--fp-focus-ring-width) solid var(--fp-focus-ring-color);
    outline-offset: var(--fp-focus-ring-offset);
    border-radius: 2px;
}


/* ── TABLE SUPPORTING TEXT — 14 / 400 / 1.55 (v3.42.1) ─────
   The shared supporting-table pattern: every line of fine print under a data
   table - the community-ratings note and the methodology line (footnotes,
   above) and the takeaway sentence - sets at the same 14px / 400 / 1.55.
   The takeaway was 17px body size through `.fp-article__section p` at (0,1,1),
   so under the Top Picks table it sat between two 14px lines at 17px. Wording,
   spacing, width and colour are unchanged; the methodology LINK keeps its own
   14px / 500.

   ⚠ SUPERSEDED 2026-09-18 — TABLE-SUPPORTING COPY IS FINE PRINT, ALWAYS.
   The v3.42.4 rule keyed on ADJACENCY (a takeaway that happened to follow the
   table or another footnote) and then needed :not(#feature-comparisons) to
   exclude one section that had drifted. That made identical copy render at
   14px under Top Picks and 17px under Feature Comparisons, and it would break
   again the next time a paragraph moved.

   The canonical rule is semantic, not positional: copy whose primary purpose
   is to explain, qualify, source, date, define or document the assumptions
   behind a table is fine print wherever it sits. It carries one of three
   classes and renders the same in every section - no adjacency, no section
   exception. This also supersedes the 2026-09-16 decision to leave
   .fp-article__research-note at body size; the left rule stays, the size does
   not. Substantive copy near a table (FinanceProspector finding:, Key Research
   Finding:, scenario setup and analysis) carries none of these classes and is
   untouched at 17px / 400 / 1.62.

   Specificity (0,3,1) beats the (0,1,1) section rule. */
.fp-article--best-of .fp-article__section :is(
    p.fp-article__table-note,
    p.fp-article__table-takeaway,
    p.fp-article__research-note
) {
    font-size: var(--fp-font-body-s);              /* 14px */
    font-weight: var(--fp-weight-body);
    line-height: 1.55;
}


/* ── FP SCORE NUMBER = THE HOMEPAGE TREATMENT (v3.42.1) ────
   Canonical rule: the numeric FinanceProspector Editorial Score renders the way
   the homepage Editor's Picks card renders it, everywhere. Measured on the live
   homepage (.fp-pick-card__score-number / __score-denominator, editors-picks.css):

       number       14px / 700 / line-height normal / --fp-color-score-text
       denominator  13px (--fp-font-caption) / 400 / --fp-color-score-text

   This module was 16px/700 for both parts. Only the NUMBER and its /10 move:
   the provider name (16/600 navy), the "FP Score" label (13px muted) and the
   Visit link (14/500 blue) keep their own places in the hierarchy. */
.fp-article--best-of .fp-providers .fp-providers__score-value,
.fp-article--providers .fp-providers .fp-providers__score-value {
    font-size: 14px;
    font-weight: var(--fp-weight-heading);         /* 700 */
    line-height: normal;
}
.fp-article--best-of .fp-providers .fp-providers__score-denom,
.fp-article--providers .fp-providers .fp-providers__score-denom {
    font-size: var(--fp-font-caption);             /* 13px */
    font-weight: var(--fp-weight-body);            /* 400 */
}


/* ── DEK WRAPPING (v3.42.1) ────────────────────────────────
   The approved dek is frozen copy, and at 390 its last line was the single word
   "needs." (10 lines, nine of them full). `text-wrap: pretty` lets the browser
   balance only the LAST lines, so no short final line is left; it changes no
   size, weight, line height, width or hierarchy, and where it is unsupported
   the dek simply wraps as before. Scoped to this article variant's dek. */
.fp-article--editorial .fp-article__dek {
    text-wrap: pretty;
}


/* ── HEADING SCALE (v3.42.1) ───────────────────────────────
   One systematic scale for this article. Semantics are unchanged: every
   element keeps its tag, id and order; only size and line height move.

     tier                      element(s)                            >=640       <640
     H1                        .fp-article__h1                       unchanged
     major H2                  .fp-article__h2                       28/700/1.25 24/700/1.3
     provider-review heading   .fp-article__h2--review (7, still h2) 22/700/1.3  20/700/1.3
     other H3                  .fp-article__h3                       20/700/1.3  18/700/1.35
     end-matter H2             Editorial References & Sources        20/700/1.3  18/700/1.35
     component heading         .fp-providers__heading (700),         18/1.3      17/1.3
                               .fp-faq__question (600)               18/1.4      17/1.4
                               .fp-glossary__label (600, the FAQ
                                 trigger's twin; not a heading)      18/1.4      17/1.4
                               .fp-article__quick-heading (600)      18/1.3      17/1.3

     NOT IN THE SCALE, deliberately: "On This Page" (.fp-article__toc-heading,
     12px uppercase navigation eyebrow) and the hero pill badge (11px).

   ⚠ 640 IS THE DESKTOP/MOBILE LINE, the article's own type breakpoint: the
     tablet band already set H2 at 28px. The 32px desktop H2 is retired here.
   ⚠ END MATTER STAYS SUBORDINATE. The References heading was deliberately
     smaller than a major H2 (21px); it takes the H3 tier rather than 28px.
   ⚠ Letter-spacing, colour, margins and body copy are untouched.            */
.fp-article--editorial .fp-article__h2 {
    font-size: 28px;
    line-height: 1.25;
}
.fp-article--best-of .fp-article__h2.fp-article__h2--review {
    font-size: 22px;
    line-height: 1.3;
}
.fp-article--editorial .fp-article__h3 {
    font-size: 20px;
    line-height: 1.3;
}
/* 2026-09-21 v3.50.4: the References H2 is split out of the grouped rule above
   and UNSCOPED, so every article using the shared References component gets the
   same 20px / 1.3 end-matter heading. Previously the component rule at ~line 603
   left 21px to any article without the best-of variant class. Same specificity
   (0,2,0) as that rule, declared later, so it wins. `.fp-article--best-of
   .fp-article__h3` is a different component and keeps its variant scope. */
.fp-article__section--sources .fp-article__h2 {
    font-size: 20px;
    line-height: 1.3;
}
.fp-article--best-of .fp-providers .fp-providers__heading,
.fp-article--providers .fp-providers .fp-providers__heading {
    font-size: var(--fp-font-body-l);              /* 18px */
    line-height: 1.3;
}
.fp-article--editorial .fp-faq .fp-faq__question,
.fp-article--editorial .fp-glossary .fp-glossary__label,
.fp-article--editorial .fp-article__quick > .fp-article__quick-heading {
    font-size: var(--fp-font-body-l);              /* 18px */
}

@media (max-width: 639.98px) {
    .fp-article--editorial .fp-article__h2 {
        font-size: 24px;
        line-height: 1.3;
    }
    .fp-article--best-of .fp-article__h2.fp-article__h2--review {
        font-size: 20px;
        line-height: 1.3;
    }
    .fp-article--editorial .fp-article__h3 {
        font-size: 18px;
        line-height: 1.35;
    }
    /* unscoped with the desktop rule above, so the narrow-width References H2
       is also consistent across every article using the component. */
    .fp-article__section--sources .fp-article__h2 {
        font-size: 18px;
        line-height: 1.35;
    }
    .fp-article--best-of .fp-providers .fp-providers__heading,
    .fp-article--providers .fp-providers .fp-providers__heading,
    .fp-article--editorial .fp-faq .fp-faq__question,
    .fp-article--editorial .fp-glossary .fp-glossary__label,
    .fp-article--editorial .fp-article__quick > .fp-article__quick-heading {
        font-size: 17px;
    }
}


/* ── SCROLLABLE TABLE REGIONS: VISIBLE KEYBOARD FOCUS (v3.42.1) ──
   The seven table wrappers are focusable regions so a keyboard user can scroll
   them (see the body template). They take the site's own focus ring, inset so
   the card's clipped edge cannot hide it. */
.fp-article--editorial .fp-article__table-wrap:focus-visible {
    outline: var(--fp-focus-ring-width) solid var(--fp-focus-ring-color);
    outline-offset: calc(-1 * var(--fp-focus-ring-width));
}


/* ── ON THIS PAGE: DESKTOP TOP ALIGNMENT (v3.42.3) ──────────
   CAUSE, measured on installed v3.42.2 at 1440 and 2048. At >=1280 the main
   column and the aside share grid row 1 and both start at y 1073.73. The first
   main-column child is a section, and `.fp-article__section { margin-top: 40px }`
   applies INSIDE the grid item (a grid item is its own formatting context, so
   the margin cannot collapse out of it). The H2 therefore sat 40px below the
   top of the On This Page card.

   The aside takes the SAME 40px section break, so the card's outer top edge
   lands on the top of the first H2's text box (delta 0.00px). Nothing in the
   main column moves, and the card's padding, type, spacing and width are
   untouched. Below 1280 the card stacks above the article (order:-1) and this
   rule does not apply. The card is not sticky, and this does not make it so. */
@media (min-width: 1280px) {
    .fp-article--editorial .fp-article__layout > .fp-article__aside {
        margin-top: 40px;
    }
}


/* ── BODY-COPY FINAL LINES (v3.42.3) ───────────────────────
   `text-wrap: pretty` - the approach the dek already uses - lets the browser
   re-break only a paragraph's last lines so a one- or two-word final line is
   avoided. Measured: no paragraph changes its line count at 1440, 768 or 390;
   size, weight, line height, letter spacing, width and wording are unchanged.
   Normal uneven two-line paragraphs are left as they are, deliberately:
   `text-wrap: balance` was tested and rejected. */
.fp-article--editorial .fp-article__section p {
    text-wrap: pretty;
}



/* ── ORIGINAL RESEARCH: EYEBROW AND H4 (2026-09-16) ─────────
   The research section (#original-research) opens with a plain-text eyebrow
   above its single H2 and uses two H4s (missing-data treatment, limitations).
   Neither element existed in the article, so both RESTATE EXISTING VALUES
   rather than introduce new ones:
     eyebrow  = the On This Page label (.fp-article__toc-heading): 12px / 600
                uppercase, .07em tracking, navy, 10px below. Scoped to beat the
                (0,1,1) section paragraph rule.
     H4       = the Best Of component-heading tier (heading-scale table above:
                18/700/1.3 at >=640, 17px below) with the H3's own spacing.
   Not a heading, badge or new component; no colour, font or size is added. */
.fp-article--editorial .fp-article__section p.fp-article__eyebrow{
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: var(--fp-weight-label);
    line-height: 1.4;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fp-color-navy);
}
/* 2026-09-21 v3.50.4: `.fp-article--best-of` scope REMOVED, same reason as the
   source-link rules above. Without it the How-To's References group headings
   fell through to the theme's generic h3 - 29px / 400 / #222 against this
   rule's 18px / 700 / navy - which also produced the looser group spacing that
   read as a separate "bullet typography" defect. .fp-article__h4 is used ONLY
   by the four Business Banking articles, and the three Best Of articles compute
   identically with or without the prefix. */
.fp-article__h4 {
    margin: 26px 0 9px;
    font-size: var(--fp-font-body-l);              /* 18px */
    font-weight: var(--fp-weight-heading);
    line-height: 1.3;
    letter-spacing: var(--fp-tracking-heading);
    color: var(--fp-color-navy);
    scroll-margin-top: var(--fp-space-m);
}
@media (max-width: 639.98px) {
    .fp-article__h4 {
        font-size: 17px;
    }
}

/* ── RESEARCH TABLES: WRAPPING COLUMN HEADINGS (2026-09-16) ──
   The shared `thead th { white-space: nowrap }` suits short headings. The
   research tables' descriptive headings ("Assumed Eligible Cash Back", "Net
   Modeled Annual Value") held the $50K table at 1011px inside an 878px
   column, so the net value sat off-screen at desktop. This modifier only lets
   those headings wrap; type, colour, padding, borders, centring and the
   wrapper's keyboard-scrollable behaviour on narrow screens are unchanged.
   (0,3,2) beats the shared (0,1,2) heading rule. */
.fp-article--editorial .fp-article__table.fp-article__table--wrap-head thead th{
    white-space: normal;
}

/* ── TOP PROVIDERS MODULE IN THE BODY: FULL CANVAS WIDTH (2026-09-16) ──
   Best Business Bank Accounts renders its first provider module after Feature
   Comparisons (record key 'providers_top_in_body'), which puts it inside
   .fp-article__main. At >=1280 that track is 880px, but the module has always
   been the full 1200px canvas (main 880 + 40 gap + 280 rail). It keeps that
   width by extending over the rail track, which is empty at this depth: the On
   This Page card ends well above Feature Comparisons (measured; asserted in QA).
   Nothing inside the component changes. Below 1280 the main column already is
   the full canvas, so no rule applies. */
@media (min-width: 1280px) {
    .fp-article--best-of .fp-article__main > .fp-providers {
        width: calc(100% + 320px);
        max-width: none;
    }
}

/* ── PEER HEADINGS USE THE SQUARE MARKER, NOT ORDINALS (2026-09-16) ──
   Restores the approved pre-packaging treatment for peer H3s, now used by the
   three What Changed developments. Numbering is reserved for real sequence or
   ranking. The marker is the SAME one .fp-article__list li uses (square, blue,
   0.85 x 17px) - not enlarged to the heading's size - and the element stays an H3. */
.fp-article--editorial .fp-article__h3.fp-article__h3--bullet {
    display: list-item;
    list-style: square inside;
}
.fp-article--editorial .fp-article__h3.fp-article__h3--bullet::marker {
    color: var(--fp-color-blue);
    font-size: calc(17px * .85);
}

/* ── RESEARCH EXPLANATORY NOTES: LEFT RULE (2026-09-16) ──
   "How to read this", "Why Grasshopper is shown as a range" and the Found Pro
   exclusion are set apart from the table above and the FinanceProspector
   finding below with the existing restrained left rule used by .fp-compare__aside
   (2px gray-200, 14px inset).
   ⚠ 2026-09-18: these are table-supporting notes, so their SIZE now comes from
   the fine-print rule above (14px / 1.55). The left rule is what still sets
   them apart from the finding below; only the type size changed. */
.fp-article--editorial .fp-article__section p.fp-article__research-note {
    padding-left: 14px;
    border-left: 2px solid var(--fp-color-gray-200);
}


/* ── DESKTOP ARTICLE GEOMETRY: 1,000px CENTRED TRACK ───────
   v3.45.0 · promoted to .fp-article--best-of in v3.46.0

   ⚠ SLUG-SCOPED TO BEST BUSINESS CHECKING ACCOUNTS UNTIL v3.46.0, because the
     only other article carrying the modifier - Best Business Bank Accounts -
     was frozen. It was unfrozen for the parity pass, so one rule set now
     serves both and later Best Of articles inherit it. Promotion was proved
     inert for Checking BEFORE it was made: with the variant-scoped rules
     applied, the page rendered pixel-identical at 1440, 768 and 390 - zero
     changed pixels, page heights 19,226 / 23,073 / 35,028 unchanged - because
     the declarations are the ones it already carried.

   CAUSE, measured on installed v3.44.1 at 1440. The >=1280 grid puts an 880px
   reading track beside a 280px rail inside the 1200px container, so the body
   sat at left 120 / right 440 - 320px off centre - while
   `.fp-article__section > p { max-width: 820px }` already capped the prose.
   Widening the track therefore could not change reading measure at all
   (100.8 characters per line at 880, 1,000 and 1,080 alike, 277 prose lines in
   every case); it only reached the tables, which were the components actually
   constrained. The fix is to centre the track and let the tables have it, NOT
   to raise the prose cap: 940px gives 116.2 characters and 1,020px gives 125.8,
   both past a comfortable measure.

   MECHANISM REUSED, NOT INVENTED. The single-flow block at max-width 1279.98px
   already moves the contents card out of the rail and into article flow above
   the body. These rules apply that same authored behaviour above 1280 inside a
   centred 1,000px column, so desktop and the existing responsive treatment
   agree instead of diverging. Measured at 1440: body 1000px, margins 220/220,
   all six principal tables 998px inside their 1,000px wrappers, FAQ and
   Glossary 1,000px, nothing clipped, nothing at an orphan width, page 479px
   shorter. Hero, Quick Verdict and both provider modules keep 1200px. 768 and
   390 are pixel-identical to the installed theme - this block is fenced. */
@media (min-width: 1280px) {

    .fp-article--editorial .fp-article__layout {
        display: flex;
        flex-direction: column;
        /* ⚠ LOAD-BEARING. The >=1280 grid rule sets `align-items: start`,
           which on a flex column is a CROSS-AXIS value: the contents card
           shrink-wraps to its content - 398px measured - instead of taking the
           track, which is the stranded box this change exists to remove. */
        align-items: stretch;
        width: 1000px;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .fp-article--editorial .fp-article__layout > .fp-article__main {
        width: 100%;
    }

    /* The contents card leaves the rail and sits above the body, exactly as it
       already does below 1280. The margin shorthand also cancels the 40px
       top margin the rail carries for its own top-alignment rule, which has
       nothing to align to once the card is no longer beside the first H2. */
    .fp-article--editorial .fp-article__layout > .fp-article__aside {
        order: -1;
        width: auto;
        margin: 0 0 var(--fp-space-m);
    }

    /* Two columns at the governed track. Column flow keeps document order -
       column one runs Top Picks to Original Research, column two How to Choose
       to Editorial References & Sources - and every one of the 14 entries stays
       on a single line at 1440. Three columns was measured and rejected: it
       breaks three entries onto two lines. The row rhythm moves from the
       adjacent-sibling margin to padding so both column tops align. */
    .fp-article--editorial .fp-article__toc-list {
        columns: 2;
        column-gap: 40px;
    }
    .fp-article--editorial .fp-article__toc-item {
        break-inside: avoid;
        padding-bottom: 8px;
    }
    .fp-article--editorial .fp-article__toc-item + .fp-article__toc-item {
        margin-top: 0;
    }

    /* ⚠ THE TAIL IS NOT IN A LAYOUT. References & Sources and the editorial
       note sit in .fp-article__reading.fp-article__tail, a direct child of the
       container, so they take the container's 1200px and their 820px-capped
       prose starts on the container's left edge. That was flush with the body
       while the body also started there (both at left 120 at 1440); once the
       body is a centred 1000px track at left 220 the tail would hang 100px to
       its left - the end of the article stepping out of line with everything
       above it. It takes the same track instead. Measured, not assumed. */
    .fp-article--editorial .fp-article__tail {
        width: 1000px;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ── FINANCEPROSPECTOR FINDING: SUBORDINATE EDITORIAL SIZE ──
   v3.45.1 · promoted to .fp-article--best-of in v3.46.0

   CAUSE, measured on installed v3.44.1 at 1440. Every proprietary finding
   statement rendered at 17px/27.54px - byte-identical to ordinary body copy -
   so a finding carried exactly the same visual weight as the prose around it
   and read as a competing tier against the 28px H2 above it. They are now one
   step down: 16px at 1.6 (25.6px), which is inside the approved 1.55-1.6 band
   and keeps the 13px paragraph gap intact.

   ⚠ BOTH PROPRIETARY LABELS, v3.45.2. The class is carried by the four
     "FinanceProspector finding:" statements AND by the single
     "Key Research Finding:" statement that opens Original Research. That one
     sat at body size beside findings that had already been stepped down, which
     left the loudest statement in the section as the only one untreated.

   ⚠ TYPE ONLY. No background, border, padding, panel, icon, badge or callout
     is introduced - the finding stays a paragraph. The label keeps its navy
     and the body keeps gray-500; only the label's weight moves, from
     --fp-weight-label (600) to --fp-weight-heading (700), which is the bold
     the approved treatment calls for. Width and alignment are untouched: the
     findings sit in the governed 820px measure, flush with their section.

   ⚠ SHARED FROM v3.46.0. Best Business Bank Accounts carries the same five
     statements - one `Key Research Finding:` and four `FinanceProspector
     finding:` - and its paragraphs gain the same class in this release, so the
     two articles share one rule rather than correcting it per article. Later
     Best Of articles inherit it. */
.fp-article--editorial .fp-article__section p.fp-article__finding {
    font-size: 16px;
    line-height: 1.6;
}
.fp-article--editorial .fp-article__section p.fp-article__finding > strong{
    font-weight: var(--fp-weight-heading);
}


/* ── v3.56.14 · HOW TO OPEN: TOP PROVIDER MODULES AT CONTAINER WIDTH ──
   Best Business Bank Accounts places its modules directly in the 1200px
   article container. How to Open places both of its modules inside
   .fp-article__main, which from 1280 sits in the centred 1000px editorial
   track (the >=1280 block above). That made its cards 225.5px instead of
   258px, so the score label and the longer Visit links wrapped and the cards
   grew. Below 1280 the track IS the container and the two pages already
   match (350 / 720 / 960px modules at 390 / 768 / 1024).

   From 1280 the container is always exactly 1200px, so each module extends
   symmetrically out of the 1000px track by half the difference on each side:
   the same 1200px box, 258px cards, heading inset and layout as Best Business
   Bank Accounts. Only the two module sections move; the reading track, and
   everything else in it, keeps 1000px. Scoped to the How to Open slug and to
   modules that are direct children of the main column. */
@media (min-width: 1280px) {
    .fp-article--slug-how-to-open-a-business-bank-account .fp-article__main > .fp-providers {
        width: 1200px;
        max-width: none;
        margin-left: calc((100% - 1200px) / 2);
        margin-right: calc((100% - 1200px) / 2);
    }
}


/* ── v3.57.0 · PROVIDER REVIEW (revised v3.57.29) ───────────────────────────
   The first provider review (Slash Free) and the pattern for the rest.
   A review is an ordinary article record that also declares 'review' => true,
   which adds .fp-article--review. Everything below is scoped to that class or
   to an element only a review emits, so no existing article is restyled.

   Reused as-is from the article system: the hero band, the Quick Verdict
   card, the contents list, article tables and their wrapper, the pros-and-cons
   grid, the FAQ and Glossary accordions and the Sources section.

   New, because nothing existing fits:
     1. a text-only hero - artwork is on hold, so the band has one column;
     2. review tables that stack on phones instead of scrolling sideways;
     3. the image figure - complete screenshot panels, side by side on
        desktop and stacked on phones, a caption, and a
        link to the provider page pictured;
     4. the provider text link used in the Quick Verdict and the closing line;
     5. the in-section source line;
     6. one dropdown per glossary term (the FAQ accordion, reused);
     7. the provider's legal disclosures as a numbered list. */

.fp-article__hero-kicker {
    margin: 8px 0 0;
    font-size: var(--fp-font-body-s);
    font-weight: var(--fp-weight-label);
    line-height: 1.4;
    color: var(--fp-color-navy);
}
.fp-article__hero-band--text .fp-article__hero-copy {
    max-width: 920px;
}
.fp-article__hero-band--text .fp-article__dek {
    max-width: none;
}
.fp-article--review .fp-article__dek.fp-article__hero-note {
    font-size: var(--fp-font-body-m);
}
/* The full review title is long. On phones it is set one step smaller than
   the family's 32px so it reads in four lines rather than five, with the
   line breaks balanced. From 640px the family's own sizes apply. */
@media (max-width: 639.98px) {
    .fp-article--review .fp-article__h1 {
        font-size: 28px;
        line-height: 1.2;
        text-wrap: balance;
    }
}
@media (min-width: 1024px) {
    .fp-article__hero-band--text {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 1b · Hero provider block (v3.57.5). A review that declares 'review_provider'
   keeps the article family's two-column hero - the same grid, gap and padding
   as a hero with artwork - with the provider block where the illustration
   would be: a white tile holding the logo, and the provider link beneath it.
   From 640px the block sits to the right of the copy; on phones it stacks
   below the copy, left-aligned with it. */
.fp-review-provider {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: var(--fp-space-s);
}
/* The tile: 120px on phones, 160px from 640px. The corner radius and the
   placeholder inside it keep the proportions of the supplied reference. */
.fp-review-provider__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background-color: var(--fp-color-white);
    border: 1px solid var(--fp-color-gray-200);
    border-radius: 22px;
    box-sizing: border-box;
}
/* A real logo keeps its own proportions inside the tile. */
.fp-review-provider__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 88px;
    max-height: 88px;
}
/* The approved temporary placeholder: the dashed square. */
.fp-review-provider__logo--placeholder .fp-review-provider__img {
    width: 68px;
    height: 68px;
    max-width: none;
    max-height: none;
}
@media (min-width: 640px) {
    .fp-review-provider__logo {
        width: 160px;
        height: 160px;
        border-radius: 28px;
    }
    .fp-review-provider__img {
        max-width: 116px;
        max-height: 116px;
    }
    .fp-review-provider__logo--placeholder .fp-review-provider__img {
        width: 92px;
        height: 92px;
    }
}
/* v3.57.18 - A SHORTER HERO BELOW 1024px, BY LAYOUT ONLY. No type size
   changes. Below 1024px the copy wrapper is dissolved (display: contents) so
   its children and the provider block share one grid, which lets the title use
   the full width and lets the logo sit beside text instead of under all of it.
   `dense` packing places the provider block in the first free cell of its
   column, so no row number is written here and a review with fewer hero lines
   still lays out correctly. */
@media (max-width: 1023.98px) {
    .fp-article__hero-band--provider {
        display: grid;
        grid-auto-flow: row dense;
        align-items: start;
    }
    .fp-article__hero-band--provider .fp-article__hero-copy {
        display: contents;
    }
    .fp-article__hero-band--provider .fp-article__pill {
        justify-self: start;
    }
}
/* Tablet: label, title and plan line run the full width (the title sets in two
   lines instead of three); the introduction and byline sit to the left of the
   logo block. */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .fp-article__hero-band--provider {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--fp-space-m);
    }
    .fp-article__hero-band--provider .fp-article__hero-copy > * {
        grid-column: 1;
    }
    .fp-article__hero-band--provider .fp-article__hero-copy > .fp-article__pill,
    .fp-article__hero-band--provider .fp-article__hero-copy > .fp-article__h1,
    .fp-article__hero-band--provider .fp-article__hero-copy > .fp-article__hero-kicker {
        grid-column: 1 / -1;
    }
    .fp-article__hero-band--provider .fp-review-provider {
        display: flex;
        grid-column: 2;
        grid-row: span 3;
        align-self: center;
        margin-top: 10px;
    }
}
/* Phones (v3.57.20): one column. The byline takes a full-width row of its own
   - name, profile link beneath it, then the evidence date - and the logo
   block follows it, left-aligned with the copy. The
   v3.57.18 arrangement, which set the byline in a narrow column beside the
   logo, is withdrawn. */
@media (max-width: 639.98px) {
    .fp-article__hero-band--provider {
        grid-template-columns: minmax(0, 1fr);
    }
    .fp-article__hero-band--provider .fp-article__hero-copy > .fp-article__meta {
        margin-top: 4px;
    }
    /* v3.57.25: the profile link is under the name at every phone width, and
       the provider link is under the logo tile (the v3.57.20 inline profile
       link and the v3.57.21 side-by-side provider row are withdrawn). */
    .fp-article__hero-band--provider .fp-review-provider {
        justify-self: start;
        margin-top: 10px;
    }
}
@media (min-width: 1024px) {
    /* The family's own column split, so the copy column is the width it is on
       every article with artwork. */
    .fp-article__hero-band--provider {
        grid-template-columns: minmax(0, 1fr) 34%;
    }
    .fp-review-provider {
        display: flex;
        margin-top: 0;
        justify-self: center;
    }
}

/* The profile link beneath a 'byline_person' name: a block inside the byline
   element, so it sits directly under the name at every width. The link is the
   site's existing .fp-article__byline-link. The row aligns to its first line
   so the date stays level with the name. */
.fp-article__byline-profile {
    display: block;
    margin-top: 2px;
}
.fp-article--review .fp-article__meta {
    align-items: flex-start;
}
/* Below 768px the labelled date does not reliably fit beside the name (from
   640px the logo block narrows the copy column), so it always takes its own
   line and the separator dot, which would be left hanging at the end of the
   name's line, is not shown. From 768px the row is unchanged. */
@media (max-width: 767.98px) {
    .fp-article--review .fp-article__meta-sep {
        display: none;
    }
    .fp-article--review .fp-article__updated {
        flex-basis: 100%;
    }
}

/* A labelled date is longer than a bare one: let the byline row wrap on phones. */
.fp-article--review .fp-article__meta {
    flex-wrap: wrap;
}

/* 1c · On This Page, provider review only (v3.57.8). The card uses the width
   it has: one column on phones, two from 640px, four from 1024px. Entries
   flow down each column and then across, so the reading order is the page
   order. Padding and the gap between entries are tighter than the family's;
   each link is a full-width block 26px tall, so the tap target is the whole
   row. Height is set by content only. Fonts and colours are the family's. */
.fp-article--review .fp-article__toc {
    padding: 10px 16px;
    height: auto;
    min-height: 0;
}
.fp-article--review .fp-article__toc .fp-article__toc-heading {
    margin-bottom: 6px;
}
.fp-article--review .fp-article__toc .fp-article__toc-list {
    columns: 1;
    column-gap: 32px;
}
.fp-article--review .fp-article__toc .fp-article__toc-item,
.fp-article--review .fp-article__toc .fp-article__toc-item + .fp-article__toc-item {
    margin: 0;
    padding: 0;
    break-inside: avoid;
}
.fp-article--review .fp-article__toc .fp-article__toc-link {
    display: block;
    padding: 3px 0;
}
@media (min-width: 640px) {
    .fp-article--review .fp-article__toc .fp-article__toc-list {
        columns: 2;
    }
}
@media (min-width: 1024px) {
    .fp-article--review .fp-article__toc .fp-article__toc-list {
        columns: 4;
    }
}

/* The first body section sits directly under the contents list. */
.fp-article--review .fp-article__main > .fp-article__section:first-child {
    margin-top: 0;
}

/* 4 · Provider text link. The same blue text-with-arrow treatment the Best Of
   tables use for "Visit <provider>" (Core Blue, --fp-color-blue). */
.fp-review__cta {
    display: inline-flex;
    align-items: center;
    font-size: var(--fp-font-body-m);
    font-weight: var(--fp-weight-label);
    line-height: 1.3;
    color: var(--fp-color-blue);
    text-decoration: none;
    white-space: nowrap;
}
.fp-review__cta .fp-cta-arrow {
    margin-left: var(--fp-cta-arrow-gap);
}
a.fp-review__cta:hover {
    text-decoration: underline;
}
a.fp-review__cta:focus-visible,
.fp-review__link:focus-visible,
.fp-review-figure__zoom:focus-visible {
    outline: var(--fp-focus-ring-width) solid var(--fp-focus-ring-color);
    outline-offset: var(--fp-focus-ring-offset);
    border-radius: 2px;
}
.fp-article--review .fp-review__link {
    color: var(--fp-color-blue);
    font-weight: var(--fp-weight-medium);
    text-decoration: none;
}
.fp-article--review .fp-review__link:hover {
    text-decoration: underline;
}
.fp-article--review .fp-review__closing {
    margin-top: var(--fp-space-m);
}
/* v3.57.72 - the unlinked first sentence of the closing line ("Ready to explore
   [Provider]?") is Palette v1.1 Core Green, by the owner's explicit choice. Core
   Green is about 2.62:1 on white: this is a recorded contrast limitation, not a
   passing text contrast. The rule is scoped to that one span, so the link beside
   it keeps Core Blue and no other text changes colour. */
.fp-article--review .fp-review__closing-prompt {
    color: var(--fp-color-green);
}

/* Pros and cons: the Best Of presentation of the shared grid, rule for rule
   (the three .fp-article--best-of declarations, repeated for a review). Size,
   weight and colour are the shared component's own and are not restated. */
.fp-article--review .fp-proscons__label {
    text-transform: none;
}
.fp-article--review .fp-proscons__list {
    list-style-type: square;
}
.fp-article--review .fp-proscons__col--pro .fp-proscons__list li::marker {
    color: var(--fp-color-blue);
}
.fp-article--review .fp-proscons__col--con .fp-proscons__list li::marker {
    color: var(--fp-color-gray-700);
}

/* 2 · Review tables. */
.fp-article--review .fp-article__table {
    width: 100%;
    /* The parent theme gives every table a 1.5em bottom margin, which shows as an
       empty band inside the bordered wrapper. A review's tables sit flush. */
    margin: 0;
}
/* Score numbers take the homepage score styling exactly - the Editor's Picks
   score number (.fp-pick-card__score-number): 14px, weight 700, #15803D via
   --fp-color-score-text, at every width. Table headings and other cell text
   keep the table's own 16px. */
.fp-review-score__value {
    font-size: 14px;
    font-weight: var(--fp-weight-heading);
    color: var(--fp-color-green);   /* v3.57.140 (owner, 2026-10-26): FinanceProspector score colour Core Green #42B649. Was --fp-color-score-text */
}
/* Column proportions, from the tablet breakpoint up (phones stack instead). */
@media (min-width: 640px) {
    .fp-article--review .fp-review__table--facts tbody th {
        width: 32%;
    }
    .fp-article--review .fp-review__table--scores tbody th {
        width: 38%;
    }
    .fp-article--review .fp-review__table--scores tbody td:nth-child(2) {   /* v3.57.134 r2: the plans tables no longer have a score column (Work r2 D5) */
        width: 16%;
        text-align: center;
    }
    .fp-article--review .fp-review__table--plans tbody th {
        width: 56%;
    }
}
/* On phones every review table stacks: one block per row, the row heading
   first, then each cell with its column name. Nothing scrolls sideways, so no
   fee, condition or score is hidden off-screen. The tables keep explicit ARIA
   table roles in their markup, because changing `display` would otherwise drop
   the table semantics. */
@media (max-width: 639.98px) {
    .fp-article--review .fp-review__table,
    .fp-article--review .fp-review__table tbody,
    .fp-article--review .fp-review__table tr,
    .fp-article--review .fp-review__table tbody th,
    .fp-article--review .fp-review__table tbody td {
        display: block;
        width: auto;
        min-width: 0;
    }
    .fp-article--review .fp-review__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .fp-article--review .fp-review__table tbody tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--fp-color-gray-200);
    }
    .fp-article--review .fp-review__table tbody tr:last-child {
        border-bottom: 0;
    }
    .fp-article--review .fp-review__table tbody th,
    .fp-article--review .fp-review__table tbody td {
        padding: 0;
        border: 0;
    }
    .fp-article--review .fp-review__table tbody td {
        margin-top: 6px;
    }
    .fp-article--review .fp-review__table tbody td::before {
        content: attr(data-label) ": ";
        font-weight: var(--fp-weight-label);
        color: var(--fp-color-navy);
    }
    /* A two-column fact table needs no column name on its only value. */
    .fp-article--review .fp-review__table--facts tbody td::before {
        content: none;
    }
}

/* 3 · Image figure. Two arrangements, both built from complete panels:
     set   - the panels sit side by side from 640px, each as wide as its own
             proportions require so the row has a single height, and stack
             on phones;
     split - one complete image from 640px; on phones, complete panels
             cropped from it, stacked.
   The figure is centred and capped at a width chosen per image so its
   lettering is readable at the size shown. Nothing scrolls sideways.
   width/height attributes reserve each box before the image loads. */
.fp-review-figure {
    margin: var(--fp-space-m) auto var(--fp-space-s);
    max-width: 900px;
}
.fp-review-figure--cards {
    max-width: none;
}
/* Tablet: three panels across a 720px column leave their lettering at about
   10px, so the card panels stack, centred, at a width that sets it near 17px.
   v3.57.20: the two complete pricing cards stack the same way below 900px,
   where side by side their rows would set under 11px. */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .fp-review-figure--cards {
        max-width: 440px;
    }
    .fp-review-figure--set.fp-review-figure--cards .fp-review-figure__panels {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .fp-review-figure--set.fp-review-figure--cards .fp-review-figure__img {
        flex: none;
        width: 100%;
    }
}
@media (min-width: 640px) and (max-width: 899.98px) {
    .fp-review-figure--pricing {
        max-width: 480px;
    }
    .fp-review-figure--set.fp-review-figure--pricing .fp-review-figure__panels {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .fp-review-figure--set.fp-review-figure--pricing .fp-review-figure__img {
        flex: none;
        width: 100%;
    }
}
.fp-review-figure__img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-button);
    box-sizing: border-box;
}
.fp-review-figure__panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
.fp-review-figure--split .fp-review-figure__full {
    display: none;
}
@media (min-width: 640px) {
    .fp-review-figure--set .fp-review-figure__panels {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }
    /* --fp-ar is the panel's width divided by its height (set in the markup). */
    .fp-review-figure--set .fp-review-figure__img {
        flex: var(--fp-ar, 1) 1 0;
        min-width: 0;
        width: auto;
    }
    .fp-review-figure--split .fp-review-figure__full {
        display: block;
    }
    .fp-review-figure--split .fp-review-figure__panels,
    .fp-review-figure__link {
        display: none;
    }
}
/* v3.57.21: Quick Verdict on a provider review - an average line, a paragraph,
   one list item per scored dimension, and a closing line. Type size, weight
   and colour are the Quick Verdict paragraph's own; only spacing and the list
   marker (the article list's square) are set here. */
/* v3.57.29: the linked words in the average line keep the line's own weight. */
.fp-article--review .fp-article__quick .fp-review-verdict__average .fp-review__link {
    font-weight: inherit;
}
/* v3.57.24: the best-for paragraph leads; the average follows it. */
.fp-article--review .fp-article__quick p + .fp-review-verdict__average {
    margin-top: 8px;
}
.fp-article--review .fp-article__quick .fp-review-verdict__scores {
    margin: 8px 0 0;
    padding-left: 20px;
    list-style: square;
}
.fp-article--review .fp-article__quick .fp-review-verdict__scores li {
    margin: 0 0 4px;
    font-size: var(--fp-font-body-m);
    line-height: var(--fp-line-body);
    color: var(--fp-color-gray-600);
}
.fp-article--review .fp-article__quick .fp-review-verdict__scores li::marker {
    color: var(--fp-color-blue);
}
/* v3.57.21: a note directly beneath a figure, about what the figure pictures. */
.fp-article--review .fp-article__section p.fp-review__figure-note {
    max-width: 900px;
    margin: 0 auto var(--fp-space-m);
    font-size: var(--fp-font-body-m);
    line-height: 1.5;
}
/* Phones only: a text link standing in for a panel too long to read there. */
.fp-article--review .fp-article__section p.fp-review-figure__link {
    margin: 10px 0 0;
    font-size: var(--fp-font-body-m);
    line-height: 1.5;
    max-width: none;
}
.fp-review-figure__caption {
    margin-top: 8px;
    font-size: var(--fp-font-body-s);
    line-height: 1.55;
    color: var(--fp-color-gray-500);
}
.fp-review-figure__zoom {
    display: inline-block;
    margin-left: 2px;
    color: var(--fp-color-blue);
    font-weight: var(--fp-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}
.fp-review-figure__zoom:hover {
    text-decoration: underline;
}

/* 6 · Glossary: one dropdown per term. The markup is the FAQ accordion, so
   the control, chevron and type come from .fp-faq unchanged. Only the gap
   between the definition and its second paragraph is new. */
.fp-glossary-terms .fp-faq__answer p + p {
    margin-top: 8px;
}
.fp-glossary-terms .fp-faq__answer strong {
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-navy);
}
.fp-glossary-terms .fp-faq__item {
    scroll-margin-top: var(--fp-space-m);
}
/* Keyboard focus on a dropdown control. .fp-faq clips its overflow for the
   rounded corners, so the ring is drawn inside the row. */
.fp-article--review .fp-faq__summary:focus-visible {
    outline: var(--fp-focus-ring-width) solid var(--fp-focus-ring-color);
    outline-offset: -3px;
    border-radius: var(--fp-radius-button);
}

/* 7 · Legal disclosures: the provider's own numbered notes, as text. */
.fp-article--review .fp-review__legal li {
    margin-bottom: 10px;
}
.fp-article--review .fp-review__legal li::marker {
    color: var(--fp-color-navy);
    font-weight: var(--fp-weight-label);
}
/* A lead-in label inside a review list. */
.fp-article--review .fp-article__list li strong,
.fp-article--review .fp-review__legal li strong {
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-navy);
}

/* Glossary: the optional second line per term. */
.fp-glossary__why {
    margin-top: calc(-1 * var(--fp-space-s) + 6px);
}

/* 5 · In-section source line. */
.fp-article--review .fp-article__section p.fp-review__sources {
    margin: 0 0 12px;
    max-width: none;
}
.fp-review__sources-label {
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-navy);
}
.fp-review__sources a.fp-article__source-link {
    color: var(--fp-color-blue);
    font-weight: var(--fp-weight-medium);
    text-decoration: none;
}
.fp-review__sources a.fp-article__source-link:visited {
    color: var(--fp-color-blue);
}
.fp-review__sources a.fp-article__source-link:hover {
    text-decoration: underline;
}
.fp-review__sources a.fp-article__source-link:focus-visible {
    outline: var(--fp-focus-ring-width) solid var(--fp-focus-ring-color);
    outline-offset: var(--fp-focus-ring-offset);
    border-radius: 2px;
}
/* A source list item is the target of an in-section "Source" link. */
.fp-article--review .fp-article__section--sources li[id] {
    scroll-margin-top: var(--fp-space-m);
}

/* ── v3.57.30 · PROVIDER REVIEW: additions for the Bluevine review ─────────
   Review-only classes; no existing rule is edited, so the Slash review and
   every other article render as before.
   1. Score written with its denominator ("9.3/10"): the numeral keeps the
      review score style (14px 700 green); "/10" follows the site's score
      denominator (13px 400, same colour).
   2. A single complete screenshot: shown whole at the column width, never
      cropped, proportions fixed by its width/height attributes. The supplied
      images carry their own rounded frame and shadow, so the figure adds no
      border. The image links to its own full-size file. */
.fp-review-score__denom {
    font-size: 13px;
    font-weight: 400;
    color: var(--fp-color-green);   /* v3.57.140 (owner, 2026-10-26): FinanceProspector score colour Core Green #42B649. Was --fp-color-score-text */
}
.fp-review-figure--shot {
    max-width: 900px;
}
.fp-review-figure--shot .fp-review-figure__open {
    display: block;
}
.fp-review-figure--shot .fp-review-figure__img {
    border: 0;
    border-radius: 0;
}
.fp-review-figure--shot .fp-review-figure__open:focus-visible {
    outline: var(--fp-focus-ring-width) solid var(--fp-focus-ring-color);
    outline-offset: var(--fp-focus-ring-offset);
}

/* ── v3.57.32 · PROVIDER REVIEW: community ratings on the Bluevine review ──
   Review-only classes; no existing rule is edited. The numeral and its
   denominator follow the site's score typography (14px 700 / 13px 400) in
   navy, the community-rating colour; the stars are the governed FP Star row
   from base.css (.fp-stars--navy), unchanged. */
.fp-review-rating {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 var(--fp-space-xs);
}
.fp-review-rating__value {
    font-size: 14px;
    font-weight: var(--fp-weight-heading);
    color: var(--fp-color-navy);
}
.fp-review-rating__denom {
    margin-left: -8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--fp-color-navy);
}
.fp-review-rating .fp-stars {
    vertical-align: 0;
}
@media (min-width: 640px) {
    .fp-article--review .fp-review__table--ratings tbody th {
        width: 32%;
    }
}

/* ── v3.57.41 · PROVIDER REVIEW: additions for the Found review ────────────
   Review-only classes; no existing rule is edited.
   1. Quick Verdict without an average line: the closing sentence after the
      score list takes the same 8px gap the list takes above it.
   2. The Found screenshots are plain rectangular captures with a white
      interface and no frame of their own, so on a white page their edge is
      invisible. A 1px hairline (the review table border colour) is drawn
      around the image's link wrapper, outside the image, so the complete
      image keeps its exact proportions and square corners. */
.fp-article--review .fp-article__quick .fp-review-verdict__scores + .fp-review-verdict__note {
    margin-top: 8px;
}
.fp-review-figure--shot.fp-review-figure--framed .fp-review-figure__open {
    border: 1px solid var(--fp-color-gray-200);
}
/* v3.57.59 - a tall, phone-width capture is shown at its own size (786px wide
   at 2x = 393px) instead of being enlarged to the 900px figure width. Used by
   the Novo invoice image only. */
.fp-review-figure--shot.fp-review-figure--portrait {
    max-width: 393px;
}

/* v3.57.67 - the Grasshopper-only byline rules that stood here (v3.57.47) are
   removed. They gave its long evidence line a row of its own; the review now
   prints a short editorial date and follows the shared review rules. */

/* v3.57.67 - PHONES, EVERY ARTICLE THAT IS NOT A PROVIDER REVIEW (best-of,
   how-to, comparisons). Below 480px the labelled date does not fit beside the
   byline, so it takes its own line beneath it and the separator dot, which
   would hang at the end of the byline's line, is not shown. Provider reviews
   keep their own rules above. */
@media (max-width: 479.98px) {
    .fp-article:not(.fp-article--review) .fp-article__meta {
        flex-wrap: wrap;
    }
    .fp-article:not(.fp-article--review) .fp-article__meta-sep {
        display: none;
    }
    .fp-article:not(.fp-article--review) .fp-article__updated {
        flex-basis: 100%;
    }
}

/* ── v3.57.69 · PROVIDER REVIEWS: the caption's "View ..." link follows the caption ──
   The v3.57.48 rule that put this link on a line of its own is withdrawn. On
   every provider review the link now follows the caption text on the same
   line where there is room and moves to the next line where there is not. It
   stays in one piece unless it is wider than the caption itself, in which case
   it may break, so it cannot overflow a narrow screen. Destination, type,
   colour and focus ring are unchanged. */
.fp-article--review .fp-review-figure__zoom {
    max-width: 100%;
    white-space: normal;
}

/* v3.57.56 - EQUAL CARDS IN EVERY PROVIDER MODULE. A card whose score is pending carries the invisible stand-ins
   introduced for /providers/ in v3.57.36, so it reserves exactly the space of a score and its label and stays the
   same height as its neighbours. "Score pending" is centred over that space. The stand-ins are hidden from
   assistive technology and cannot be focused. */
.fp-providers .fp-providers__ghost { visibility: hidden; pointer-events: none; user-select: none; }
.fp-providers .fp-providers__score--pending { position: relative; }
.fp-providers .fp-providers__score--pending .fp-providers__score-pending { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }


/* v3.57.76 - SECTION ACCORDION (opt-in per record: 'section_accordions'). The section's H2 is the <summary>, with the
   FAQ's frozen chevron; the summary row is the control. Collapsed below 768px and expanded from 768px by
   template-parts/article-section-accordions.php. The H2 keeps its own type; its bottom margin moves to the open summary
   so the chevron centres on the heading line. New classes only - no existing selector changes. */
.fp-section-acc__summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--fp-space-s);
    cursor: pointer; list-style: none;
}
.fp-section-acc__summary::-webkit-details-marker { display: none; }
.fp-section-acc__summary::marker { content: ""; }
.fp-section-acc__summary > .fp-article__h2 { margin: 0; }
.fp-section-acc__details[open] > .fp-section-acc__summary { margin-bottom: 11px; }
.fp-section-acc__details[open] > .fp-section-acc__summary > .fp-faq__chevron { transform: rotate(180deg); }
.fp-section-acc__summary:focus-visible {
    outline: var(--fp-focus-ring-width) solid var(--fp-focus-ring-color);
    outline-offset: 2px;
    border-radius: var(--fp-radius-button);
}
.fp-section-acc { scroll-margin-top: var(--fp-space-m); }
.fp-article--review .fp-glossary__summary:focus-visible {
    outline: var(--fp-focus-ring-width) solid var(--fp-focus-ring-color);
    outline-offset: -3px;
    border-radius: var(--fp-radius-button);
}

/* v3.57.80 - an inline text link that ends with the CTA arrow (Mercury eligibility link). Same arrow element and gap as the
   bottom CTA; the last word and the arrow are kept together so the arrow never wraps onto a line by itself. */
.fp-review__link .fp-cta-arrow { margin-left: var(--fp-cta-arrow-gap); }
.fp-review__link-tail { white-space: nowrap; }

/* v3.57.82 - Mercury closing prompt (owner, 2026-10-15; supersedes the v3.57.81 navy prompt): palette v1.1 Dark Green #338E39 at
   19px / 700, so it is LARGE BOLD text (>= 18.67px bold) and its 4.14:1 contrast on white meets the 3:1 requirement. The adjacent
   link stays Core Blue. Modifier class: the other reviews keep their prompt treatment. */
.fp-review__closing .fp-review__closing-prompt.fp-review__closing-prompt--strong {
    color: var(--fp-color-hero-heading);   /* #338E39, palette v1.1 Dark Green */
    font-size: 19px;
    font-weight: 700;
}

/* v3.57.83 - Mercury link typography (owner, 2026-10-15). Article-body links stay 17px / 500 on the paragraph line height and
   image-caption links 14px / 500 (both already so); the two CTAs step up: hero "Visit Mercury ->" 17px / 600 and the closing
   "Get started with Mercury ->" 19px / 600 beside the 19px / 700 Dark Green prompt. Colour, arrows, destinations and focus styling
   unchanged. Scoped to the Mercury article only. */
.fp-article--slug-mercury .fp-review-provider .fp-review__cta,
.fp-article--slug-slash .fp-review-provider .fp-review__cta,
.fp-article--slug-bluevine .fp-review-provider .fp-review__cta,
.fp-article--slug-grasshopper .fp-review-provider .fp-review__cta,
.fp-article--slug-novo .fp-review-provider .fp-review__cta,
.fp-article--slug-found .fp-review-provider .fp-review__cta,
.fp-article--slug-rho .fp-review-provider .fp-review__cta,
.fp-article--slug-lili .fp-review-provider .fp-review__cta,
.fp-article--slug-bank-of-america .fp-review-provider .fp-review__cta,
.fp-article--slug-chase .fp-review-provider .fp-review__cta { font-size: 17px; font-weight: 600; }   /* v3.57.84: + Slash; v3.57.91: + Bluevine */
.fp-article--slug-mercury .fp-review__closing .fp-review__cta,
.fp-article--slug-slash .fp-review__closing .fp-review__cta,
.fp-article--slug-bluevine .fp-review__closing .fp-review__cta,
.fp-article--slug-grasshopper .fp-review__closing .fp-review__cta,
.fp-article--slug-novo .fp-review__closing .fp-review__cta,
.fp-article--slug-found .fp-review__closing .fp-review__cta,
.fp-article--slug-rho .fp-review__closing .fp-review__cta,
.fp-article--slug-lili .fp-review__closing .fp-review__cta,
.fp-article--slug-bank-of-america .fp-review__closing .fp-review__cta,
.fp-article--slug-chase .fp-review__closing .fp-review__cta { font-size: 19px; font-weight: 600; }
/* v3.57.152 (B01, Work 2026-10-29) - Bank of America's closing CTA wraps instead of overflowing (320px, 400% zoom, increased
   text spacing). The shared .fp-review__cta is an unbreakable inline-flex box; here it becomes ordinary inline text that wraps at
   its spaces. No space separates "America" from the arrow span, so the arrow stays with the final word. Size, weight, colour,
   hover underline, focus ring, wording and destination are unchanged; nothing is shrunk or clipped. Scoped to this one link. */
.fp-article--slug-bank-of-america .fp-review__closing .fp-review__cta {
    display: inline;
    white-space: normal;
}

/* v3.57.84 - Slash (owner copy sheet 2026-10-15): border-only image containers as on Mercury - the 1px #E5E7EB frame, square, no
   radius, background or padding. (v3.57.86: the v3.57.84 Slash-only 500-weight step-marker rule is removed; Slash's numbered
   steps now use the shared .fp-article__olist marker - 17px Core Blue, weight 600 - exactly as on Mercury, per Work.) */
.fp-article--slug-slash .fp-review-figure__img,
.fp-article--slug-bluevine .fp-review-figure__img,
.fp-article--slug-novo .fp-review-figure__img,
.fp-article--slug-found .fp-review-figure__img,
.fp-article--slug-rho .fp-review-figure__img,
.fp-article--slug-lili .fp-review-figure__img { border-radius: 0; background: none; }
/* v3.57.107 - Rho (owner, R4 handoff): Bill Pay, Treasury and Capital display at most 600px wide on desktop, centred, proportional; narrower screens fit the column. Display size only; the image files are not cropped. */
.fp-article--slug-rho #figure-bill-pay,
.fp-article--slug-rho #figure-treasury,
.fp-article--slug-rho #figure-capital { max-width: 600px; }
/* v3.57.108 - Lili (owner, 2026-10-17): the Savings Account and Line of Credit figures display at most 300px wide, centred, proportional; narrower screens fit the column. Display size only; the image files are not cropped. */
.fp-article--slug-lili #figure-savings-account,
.fp-article--slug-lili #figure-line-of-credit { max-width: 300px; }

/* v3.57.86 - Feature Scores (Work, 2026-10-15): 24px (--fp-space-m) between the final explanatory paragraph box and the score
   table on Mercury and Slash. The paragraph's own bottom margin is zeroed at this one transition so the gap is not additive;
   ordinary paragraph spacing and every other article table are unchanged. */
.fp-article--slug-mercury #financeprospector-feature-scores > p:has(+ .fp-article__table-wrap),
.fp-article--slug-slash #dimension-scores > p:has(+ .fp-article__table-wrap),
.fp-article--slug-bluevine #dimension-scores > p:has(+ .fp-article__table-wrap),
.fp-article--slug-grasshopper #feature-scores > p:has(+ .fp-article__table-wrap),
.fp-article--slug-novo #feature-scores > p:has(+ .fp-article__table-wrap),
.fp-article--slug-found #feature-scores > p:has(+ .fp-article__table-wrap),
.fp-article--slug-rho #feature-scores > p:has(+ .fp-article__table-wrap),
.fp-article--slug-lili #feature-scores > p:has(+ .fp-article__table-wrap),
.fp-article--slug-bank-of-america #feature-scores > p:has(+ .fp-article__table-wrap),
.fp-article--slug-chase #feature-scores > p:has(+ .fp-article__table-wrap) { margin-bottom: 0; }
.fp-article--slug-mercury #financeprospector-feature-scores > p + .fp-article__table-wrap,
.fp-article--slug-slash #dimension-scores > p + .fp-article__table-wrap,
.fp-article--slug-bluevine #dimension-scores > p + .fp-article__table-wrap,
.fp-article--slug-grasshopper #feature-scores > p + .fp-article__table-wrap,
.fp-article--slug-novo #feature-scores > p + .fp-article__table-wrap,
.fp-article--slug-found #feature-scores > p + .fp-article__table-wrap,
.fp-article--slug-rho #feature-scores > p + .fp-article__table-wrap,
.fp-article--slug-lili #feature-scores > p + .fp-article__table-wrap,
.fp-article--slug-bank-of-america #feature-scores > p + .fp-article__table-wrap,
.fp-article--slug-chase #feature-scores > p + .fp-article__table-wrap { margin-top: var(--fp-space-m); }


/* ══════════════════════════════════════════════════════════════════════════
   v3.57.112 · HOW TO OPEN A BUSINESS BANK ACCOUNT — APPROVED LAYOUT MOCKUP
   Work's mockup (qa/work-drafts/2026-10-17-how-to-open-business-bank-account/
   How-To-Copy-and-Layout-Review.html, d929d84), owner-approved 2026-10-18; it
   supersedes the earlier "keep current contents placement" direction.
   SCOPED TO THIS ARTICLE ONLY. Existing tokens, type scale and components.
   - Quick Answer + checklist: plain article content (the editorial H2 tier),
     at the top of the article column (record opt-in 'quick_in_main').
   - FinanceProspector's Takes: a green left-rule callout with an H3 title.
   - >=1280: two columns - a 225px sticky On This Page sidebar on the left
     (green left rule, navy links) and the article on the right; Sources and
     the Editorial Note align with the article column; provider cards four
     across, stacked and centred, as drawn in the mockup.
   - <1280: the theme's existing single flow - contents above the article.
   ══════════════════════════════════════════════════════════════════════════ */
.fp-article--editorial.fp-article--slug-how-to-open-a-business-bank-account .fp-article__quick {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    margin: 0 0 var(--fp-space-l);
}
.fp-article--slug-how-to-open-a-business-bank-account .fp-article__quick > .fp-article__quick-heading {
    margin: 0 0 11px;
    font-size: 28px;
    font-weight: var(--fp-weight-heading);
    line-height: 1.25;
    letter-spacing: var(--fp-tracking-heading);
    color: var(--fp-color-navy);
}
.fp-article--slug-how-to-open-a-business-bank-account .fp-article__quick p {
    margin: 0 0 13px;
    font-size: 17px;
    line-height: 1.62;
    color: var(--fp-color-gray-500);
}
.fp-article--slug-how-to-open-a-business-bank-account .fp-article__quick .fp-article__list {
    margin: 0 0 13px;
}
.fp-article--slug-how-to-open-a-business-bank-account .fp-article__quick .fp-article__list li {
    font-size: 17px;
    line-height: 1.62;
}
/* Contents links navy at every width, as in the mockup (outside the desktop query, so the theme's link colour
   transition cannot animate them when the layout reflows). */
.fp-article--slug-how-to-open-a-business-bank-account .fp-article__toc-link,
.fp-article--slug-how-to-open-a-business-bank-account .fp-article__toc-link:visited {
    color: var(--fp-color-navy);
}
/* r6 (Work QA r5): each contents link is clickable across its whole box. As an inline link, "Applications and Special
   Cases" wraps into two separate line boxes, and a click between them (the centre of its box) hit nothing. The link's
   own ::after covers its list item (a "stretched link"), so a click anywhere in the item lands on the link, while the
   link stays inline: text, wrapping, spacing and focus ring are exactly as approved (inline-block changed the wrapped
   link's line spacing, because the item's 17px strut, not the link's smaller type, sets that spacing). */
.fp-article--slug-how-to-open-a-business-bank-account .fp-article__toc-item {
    position: relative;
}
.fp-article--slug-how-to-open-a-business-bank-account .fp-article__toc-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
/* r6 (Work QA r5): phones stack the six tables, as the provider reviews do - one block per row, the row heading first, then
   each cell under its column name (data-label in the markup, which also keeps explicit ARIA table roles because changing
   `display` would otherwise drop table semantics). Nothing scrolls sideways; type stays the table's 16px. Tablet and
   desktop tables are unchanged. */
@media (max-width: 639.98px) {
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table,
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table tbody,
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table tr,
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table tbody th,
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table tbody td {
        display: block;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table {
        margin: 0;
    }
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table tbody tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--fp-color-gray-200);
    }
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table tbody tr:last-child {
        border-bottom: 0;
    }
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table tbody th,
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table tbody td {
        padding: 0;
        border: 0;
    }
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table tbody td {
        margin-top: 6px;
    }
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table tbody th::before,
    .fp-article--slug-how-to-open-a-business-bank-account .fp-howto-table tbody td::before {
        content: attr(data-label) ": ";
        font-weight: var(--fp-weight-label);
        color: var(--fp-color-navy);
    }
}
/* r5: an explanatory paragraph directly below a provider module gets the same 16px gap as one below a table
   (.fp-article__table-wrap margin-bottom); the shared module has no bottom margin. */
.fp-article--slug-how-to-open-a-business-bank-account .fp-article__main .fp-providers + p {
    margin-top: var(--fp-space-s);
}
.fp-article--slug-how-to-open-a-business-bank-account .fp-howto-take {
    margin: 30px 0;
    padding: 6px 0 6px 22px;
    border-left: 4px solid var(--fp-color-green);
    max-width: 820px;
}
.fp-article--slug-how-to-open-a-business-bank-account .fp-howto-take .fp-article__h3 {
    margin: 0 0 8px;
}
.fp-article--slug-how-to-open-a-business-bank-account .fp-howto-take p {
    margin: 0;
}
@media (max-width: 639.98px) {
    .fp-article--editorial.fp-article--slug-how-to-open-a-business-bank-account .fp-article__quick { padding: 0; }
    .fp-article--slug-how-to-open-a-business-bank-account .fp-article__quick > .fp-article__quick-heading {
        font-size: 24px;
        line-height: 1.3;
    }
}
@media (min-width: 1280px) {
    .fp-article--editorial.fp-article--slug-how-to-open-a-business-bank-account .fp-article__layout {
        display: grid;
        grid-template-columns: 225px minmax(0, 1fr);
        column-gap: 55px;
        align-items: start;
        width: 1200px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    .fp-article--editorial.fp-article--slug-how-to-open-a-business-bank-account .fp-article__layout > .fp-article__aside {
        grid-column: 1;
        grid-row: 1;
        order: 0;
        width: auto;
        margin: 0;
        position: sticky;
        top: var(--fp-space-m);
        align-self: start;
    }
    .fp-article--editorial.fp-article--slug-how-to-open-a-business-bank-account .fp-article__layout > .fp-article__main {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-how-to-open-a-business-bank-account .fp-article__toc {
        padding: 0 0 0 18px;
        background-color: transparent;
        border: 0;
        border-left: 3px solid var(--fp-color-green);
        border-radius: 0;
    }
    .fp-article--slug-how-to-open-a-business-bank-account .fp-article__toc-heading {
        margin: 0 0 4px;
        font-size: 17px;
        font-weight: var(--fp-weight-heading);
        letter-spacing: 0;
        text-transform: none;
        color: var(--fp-color-gray-600);
    }
    .fp-article--editorial.fp-article--slug-how-to-open-a-business-bank-account .fp-article__toc-list { columns: auto; }
    .fp-article--editorial.fp-article--slug-how-to-open-a-business-bank-account .fp-article__toc-item,
    .fp-article--editorial.fp-article--slug-how-to-open-a-business-bank-account .fp-article__toc-item + .fp-article__toc-item {
        margin-top: 14px;
        padding-bottom: 0;
    }
    .fp-article--slug-how-to-open-a-business-bank-account .fp-article__table-wrap,
    .fp-article--slug-how-to-open-a-business-bank-account .fp-faq,
    .fp-article--slug-how-to-open-a-business-bank-account .fp-glossary {
        width: auto;
        max-width: 100%;
    }
    /* The v3.56.14 container-width module rule is superseded on this page: the modules sit in the article column. */
    .fp-article--slug-how-to-open-a-business-bank-account .fp-article__main > .fp-providers {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .fp-article--providers.fp-article--slug-how-to-open-a-business-bank-account .fp-providers .fp-providers__item {
        flex-basis: calc((100% - 3 * var(--fp-space-s)) / 4);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        justify-items: stretch;
        text-align: center;
        align-content: start;
    }
    .fp-article--providers.fp-article--slug-how-to-open-a-business-bank-account .fp-providers .fp-providers__logo { grid-column: 1; grid-row: 1; justify-self: center; margin-bottom: var(--fp-space-xxs); }
    .fp-article--providers.fp-article--slug-how-to-open-a-business-bank-account .fp-providers .fp-providers__name { grid-column: 1; grid-row: 2; }
    .fp-article--providers.fp-article--slug-how-to-open-a-business-bank-account .fp-providers .fp-providers__score { grid-column: 1; grid-row: 3; align-items: center; }
    .fp-article--providers.fp-article--slug-how-to-open-a-business-bank-account .fp-providers .fp-providers__cta { grid-column: 1; grid-row: 4; justify-self: center; }
    .fp-article--providers.fp-article--slug-how-to-open-a-business-bank-account .fp-providers .fp-providers__heading { padding-left: var(--fp-space-m); padding-right: var(--fp-space-m); }
    .fp-article--editorial.fp-article--slug-how-to-open-a-business-bank-account .fp-article__tail {
        width: 1200px;
        max-width: 1200px;
        padding-left: 280px;
        box-sizing: border-box;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   v3.57.113 · HOW TO — STICKY SIDEBAR CLEARS THE WORDPRESS ADMIN TOOLBAR
   (Work post-install QA). When the toolbar shows (body.admin-bar, signed-in
   users) it is fixed to the top of the viewport, 32px tall from 783px. The
   sticky On This Page sidebar (>=1280px) keeps its existing 24px clearance
   BELOW the toolbar instead of sitting under it. Anchor jumps need no rule:
   WordPress already offsets them by the toolbar height (html
   scroll-padding-top). Signed-out pages have no .admin-bar and are unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
    .admin-bar .fp-article--editorial.fp-article--slug-how-to-open-a-business-bank-account .fp-article__layout > .fp-article__aside {
        top: calc(var(--fp-space-m) + 32px);
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   v3.57.114 · BEST BUSINESS BANK ACCOUNTS — THE APPROVED GUIDE LAYOUT
   The How To article's approved layout (v3.57.112 r6 + the v3.57.113 admin-toolbar offset), applied to this article
   (OWNER-REVIEW-AND-LAYOUT-R6.md: "Use the current guide sidebar and the installed toolbar offset fix"). Generated from the
   How To rules with only the slug class changed; the How To rules above are untouched. Rules for provider-card modules
   are inert here (this article renders none).
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   v3.57.112 · HOW TO OPEN A BUSINESS BANK ACCOUNT — APPROVED LAYOUT MOCKUP
   Work's mockup (qa/work-drafts/2026-10-17-how-to-open-business-bank-account/
   How-To-Copy-and-Layout-Review.html, d929d84), owner-approved 2026-10-18; it
   supersedes the earlier "keep current contents placement" direction.
   SCOPED TO THIS ARTICLE ONLY. Existing tokens, type scale and components.
   - Quick Answer + checklist: plain article content (the editorial H2 tier),
     at the top of the article column (record opt-in 'quick_in_main').
   - FinanceProspector's Takes: a green left-rule callout with an H3 title.
   - >=1280: two columns - a 225px sticky On This Page sidebar on the left
     (green left rule, navy links) and the article on the right; Sources and
     the Editorial Note align with the article column; provider cards four
     across, stacked and centred, as drawn in the mockup.
   - <1280: the theme's existing single flow - contents above the article.
   ══════════════════════════════════════════════════════════════════════════ */
.fp-article--editorial.fp-article--slug-best-business-bank-accounts .fp-article__quick {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    margin: 0 0 var(--fp-space-l);
}
.fp-article--slug-best-business-bank-accounts .fp-article__quick > .fp-article__quick-heading {
    margin: 0 0 11px;
    font-size: 28px;
    font-weight: var(--fp-weight-heading);
    line-height: 1.25;
    letter-spacing: var(--fp-tracking-heading);
    color: var(--fp-color-navy);
}
.fp-article--slug-best-business-bank-accounts .fp-article__quick p {
    margin: 0 0 13px;
    font-size: 17px;
    line-height: 1.62;
    color: var(--fp-color-gray-500);
}
.fp-article--slug-best-business-bank-accounts .fp-article__quick .fp-article__list {
    margin: 0 0 13px;
}
.fp-article--slug-best-business-bank-accounts .fp-article__quick .fp-article__list li {
    font-size: 17px;
    line-height: 1.62;
}
/* Contents links navy at every width, as in the mockup (outside the desktop query, so the theme's link colour
   transition cannot animate them when the layout reflows). */
.fp-article--slug-best-business-bank-accounts .fp-article__toc-link,
.fp-article--slug-best-business-bank-accounts .fp-article__toc-link:visited {
    color: var(--fp-color-navy);
}
/* r6 (Work QA r5): each contents link is clickable across its whole box. As an inline link, "Applications and Special
   Cases" wraps into two separate line boxes, and a click between them (the centre of its box) hit nothing. The link's
   own ::after covers its list item (a "stretched link"), so a click anywhere in the item lands on the link, while the
   link stays inline: text, wrapping, spacing and focus ring are exactly as approved (inline-block changed the wrapped
   link's line spacing, because the item's 17px strut, not the link's smaller type, sets that spacing). */
.fp-article--slug-best-business-bank-accounts .fp-article__toc-item {
    position: relative;
}
.fp-article--slug-best-business-bank-accounts .fp-article__toc-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
/* r6 (Work QA r5): phones stack the six tables, as the provider reviews do - one block per row, the row heading first, then
   each cell under its column name (data-label in the markup, which also keeps explicit ARIA table roles because changing
   `display` would otherwise drop table semantics). Nothing scrolls sideways; type stays the table's 16px. Tablet and
   desktop tables are unchanged. */
@media (max-width: 639.98px) {
    .fp-article--slug-best-business-bank-accounts .fp-howto-table,
    .fp-article--slug-best-business-bank-accounts .fp-howto-table tbody,
    .fp-article--slug-best-business-bank-accounts .fp-howto-table tr,
    .fp-article--slug-best-business-bank-accounts .fp-howto-table tbody th,
    .fp-article--slug-best-business-bank-accounts .fp-howto-table tbody td {
        display: block;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-best-business-bank-accounts .fp-howto-table {
        margin: 0;
    }
    .fp-article--slug-best-business-bank-accounts .fp-howto-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .fp-article--slug-best-business-bank-accounts .fp-howto-table tbody tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--fp-color-gray-200);
    }
    .fp-article--slug-best-business-bank-accounts .fp-howto-table tbody tr:last-child {
        border-bottom: 0;
    }
    .fp-article--slug-best-business-bank-accounts .fp-howto-table tbody th,
    .fp-article--slug-best-business-bank-accounts .fp-howto-table tbody td {
        padding: 0;
        border: 0;
    }
    .fp-article--slug-best-business-bank-accounts .fp-howto-table tbody td {
        margin-top: 6px;
    }
    .fp-article--slug-best-business-bank-accounts .fp-howto-table tbody th::before,
    .fp-article--slug-best-business-bank-accounts .fp-howto-table tbody td::before {
        content: attr(data-label) ": ";
        font-weight: var(--fp-weight-label);
        color: var(--fp-color-navy);
    }
}
/* r5: an explanatory paragraph directly below a provider module gets the same 16px gap as one below a table
   (.fp-article__table-wrap margin-bottom); the shared module has no bottom margin. */
.fp-article--slug-best-business-bank-accounts .fp-article__main .fp-providers + p {
    margin-top: var(--fp-space-s);
}
.fp-article--slug-best-business-bank-accounts .fp-howto-take {
    margin: 30px 0;
    padding: 6px 0 6px 22px;
    border-left: 4px solid var(--fp-color-green);
    max-width: 820px;
}
.fp-article--slug-best-business-bank-accounts .fp-howto-take .fp-article__h3 {
    margin: 0 0 8px;
}
.fp-article--slug-best-business-bank-accounts .fp-howto-take p {
    margin: 0;
}
@media (max-width: 639.98px) {
    .fp-article--editorial.fp-article--slug-best-business-bank-accounts .fp-article__quick { padding: 0; }
    .fp-article--slug-best-business-bank-accounts .fp-article__quick > .fp-article__quick-heading {
        font-size: 24px;
        line-height: 1.3;
    }
}
@media (min-width: 1280px) {
    .fp-article--editorial.fp-article--slug-best-business-bank-accounts .fp-article__layout {
        display: grid;
        grid-template-columns: 225px minmax(0, 1fr);
        column-gap: 55px;
        align-items: start;
        width: 1200px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    .fp-article--editorial.fp-article--slug-best-business-bank-accounts .fp-article__layout > .fp-article__aside {
        grid-column: 1;
        grid-row: 1;
        order: 0;
        width: auto;
        margin: 0;
        position: sticky;
        top: var(--fp-space-m);
        align-self: start;
    }
    .fp-article--editorial.fp-article--slug-best-business-bank-accounts .fp-article__layout > .fp-article__main {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-best-business-bank-accounts .fp-article__toc {
        padding: 0 0 0 18px;
        background-color: transparent;
        border: 0;
        border-left: 3px solid var(--fp-color-green);
        border-radius: 0;
    }
    .fp-article--slug-best-business-bank-accounts .fp-article__toc-heading {
        margin: 0 0 4px;
        font-size: 17px;
        font-weight: var(--fp-weight-heading);
        letter-spacing: 0;
        text-transform: none;
        color: var(--fp-color-gray-600);
    }
    .fp-article--editorial.fp-article--slug-best-business-bank-accounts .fp-article__toc-list { columns: auto; }
    .fp-article--editorial.fp-article--slug-best-business-bank-accounts .fp-article__toc-item,
    .fp-article--editorial.fp-article--slug-best-business-bank-accounts .fp-article__toc-item + .fp-article__toc-item {
        margin-top: 14px;
        padding-bottom: 0;
    }
    .fp-article--slug-best-business-bank-accounts .fp-article__table-wrap,
    .fp-article--slug-best-business-bank-accounts .fp-faq,
    .fp-article--slug-best-business-bank-accounts .fp-glossary {
        width: auto;
        max-width: 100%;
    }
    /* The v3.56.14 container-width module rule is superseded on this page: the modules sit in the article column. */
    .fp-article--slug-best-business-bank-accounts .fp-article__main > .fp-providers {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .fp-article--providers.fp-article--slug-best-business-bank-accounts .fp-providers .fp-providers__item {
        flex-basis: calc((100% - 3 * var(--fp-space-s)) / 4);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        justify-items: stretch;
        text-align: center;
        align-content: start;
    }
    .fp-article--providers.fp-article--slug-best-business-bank-accounts .fp-providers .fp-providers__logo { grid-column: 1; grid-row: 1; justify-self: center; margin-bottom: var(--fp-space-xxs); }
    .fp-article--providers.fp-article--slug-best-business-bank-accounts .fp-providers .fp-providers__name { grid-column: 1; grid-row: 2; }
    .fp-article--providers.fp-article--slug-best-business-bank-accounts .fp-providers .fp-providers__score { grid-column: 1; grid-row: 3; align-items: center; }
    .fp-article--providers.fp-article--slug-best-business-bank-accounts .fp-providers .fp-providers__cta { grid-column: 1; grid-row: 4; justify-self: center; }
    .fp-article--providers.fp-article--slug-best-business-bank-accounts .fp-providers .fp-providers__heading { padding-left: var(--fp-space-m); padding-right: var(--fp-space-m); }
    .fp-article--editorial.fp-article--slug-best-business-bank-accounts .fp-article__tail {
        width: 1200px;
        max-width: 1200px;
        padding-left: 280px;
        box-sizing: border-box;
    }
}
/* ══════════════════════════════════════════════════════════════════════════
   v3.57.113 · HOW TO — STICKY SIDEBAR CLEARS THE WORDPRESS ADMIN TOOLBAR
   (Work post-install QA). When the toolbar shows (body.admin-bar, signed-in
   users) it is fixed to the top of the viewport, 32px tall from 783px. The
   sticky On This Page sidebar (>=1280px) keeps its existing 24px clearance
   BELOW the toolbar instead of sitting under it. Anchor jumps need no rule:
   WordPress already offsets them by the toolbar height (html
   scroll-padding-top). Signed-out pages have no .admin-bar and are unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
    .admin-bar .fp-article--editorial.fp-article--slug-best-business-bank-accounts .fp-article__layout > .fp-article__aside {
        top: calc(var(--fp-space-m) + 32px);
    }
}

/* v3.57.114 - Best Business Bank Accounts: each provider profile ends with Read [Provider] Review · Visit [Provider] →
   (owner amendment). Two text links on one line, wrapping naturally on phones; type is not reduced. */
.fp-article--slug-best-business-bank-accounts .fp-bb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 8px;
    margin: var(--fp-space-s) 0 var(--fp-space-l);
}
.fp-article--slug-best-business-bank-accounts .fp-bb-actions a {
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-blue);
    text-decoration: none;
}
.fp-article--slug-best-business-bank-accounts .fp-bb-actions a:hover { text-decoration: underline; }
/* r4: stays blue while focused (the parent theme's default link focus colour would otherwise turn it #222). */
.fp-article--slug-best-business-bank-accounts .fp-bb-actions a:focus,
.fp-article--slug-best-business-bank-accounts .fp-bb-actions a:focus-visible { color: var(--fp-color-blue); }
.fp-article--slug-best-business-bank-accounts .fp-bb-actions__sep { color: var(--fp-color-gray-500); }
.fp-article--slug-best-business-bank-accounts .fp-bb-actions .fp-cta-arrow { margin-left: var(--fp-cta-arrow-gap); }
.fp-article--slug-best-business-bank-accounts .fp-bb-profile__title { scroll-margin-top: var(--fp-space-m); }

/* ══════════════════════════════════════════════════════════════════════════
   v3.57.115 · TEN-PROVIDER MODULE WITH READ REVIEW + VISIT (.fp-bb-module)
   Business Banking below the hero and Best Business Bank Accounts before the FAQs. The card treatment is the /providers/
   module's (providers-index.css, which loads on that route only), restated for these two wrappers: a Read Review row between
   the score label and the Visit link (6px / 4px), logo spanning all four rows, the text column centred, every score label
   reserving two lines from 640px so the buttons align across a row. Card, type, button (.fp-cta--primary, base.css) and link
   sizes are the shared module's own - nothing is enlarged. Focused Visit text stays blue.
   ══════════════════════════════════════════════════════════════════════════ */
.fp-article--providers.fp-bb-module .fp-providers.fp-providers--reviews .fp-providers__item{grid-template-rows:auto auto auto auto}
.fp-article--providers.fp-bb-module .fp-providers.fp-providers--reviews .fp-providers__logo{grid-row:1 / span 4}
.fp-article--providers.fp-bb-module .fp-providers.fp-providers--reviews .fp-providers__review{grid-column:2;grid-row:3;margin-top:6px}
.fp-article--providers.fp-bb-module .fp-providers.fp-providers--reviews .fp-providers__cta{grid-column:2;grid-row:4;margin-top:4px}
.fp-article--providers.fp-bb-module .fp-providers.fp-providers--reviews .fp-providers__name,
.fp-article--providers.fp-bb-module .fp-providers.fp-providers--reviews .fp-providers__score,
.fp-article--providers.fp-bb-module .fp-providers.fp-providers--reviews .fp-providers__review,
.fp-article--providers.fp-bb-module .fp-providers.fp-providers--reviews .fp-providers__cta{justify-self:center;text-align:center}
.fp-article--providers.fp-bb-module .fp-providers.fp-providers--reviews .fp-providers__score{align-items:center}
.fp-article--providers.fp-bb-module .fp-providers .fp-providers__cta:focus,
.fp-article--providers.fp-bb-module .fp-providers .fp-providers__cta:focus-visible{color:var(--fp-color-blue)}
/* r2: the Read Review button keeps its white text while focused (the parent theme's #222 link-focus colour would sit on blue). */
.fp-article--providers.fp-bb-module .fp-providers a.fp-providers__review:focus,
.fp-article--providers.fp-bb-module .fp-providers a.fp-providers__review:focus-visible{color:var(--fp-color-white)}
@media (min-width:640px){
  .fp-article--providers.fp-bb-module .fp-providers.fp-providers--reviews .fp-providers__score-label{min-height:2.6em} }
/* Category (container width): the /providers/ rows - 5 across from 1300px - with the compact card (44px logo, 8px gap and
   padding) from 1024px: this module keeps its frame and heading inset, so its cards are narrower than 258px even at 1440
   (r3: "Visit Bank of America ->" wrapped there), and the compact card keeps the 144px button and every Visit link on one line. */
@media (min-width:1300px){
  .fp-article--providers.fp-bb-module--category .fp-providers .fp-providers__item{flex-basis:min(258px, calc((100% - 4 * var(--fp-space-s)) / 5))}
  .fp-article--providers.fp-bb-module--category .fp-providers .fp-providers__heading{padding-left:max(var(--fp-space-m), calc((100% - 5 * 258px - 4 * var(--fp-space-s)) / 2));padding-right:max(var(--fp-space-m), calc((100% - 5 * 258px - 4 * var(--fp-space-s)) / 2))} }
@media (min-width:1024px){
  .fp-article--providers.fp-bb-module--category .fp-providers.fp-providers--reviews .fp-providers__item{grid-template-columns:44px minmax(0, 1fr);column-gap:8px;padding:8px}
  .fp-article--providers.fp-bb-module--category .fp-providers.fp-providers--reviews .fp-providers__logo{width:44px;height:44px} }
/* Best article (article column): three 258px cards across from 1024px - four would leave the text column narrower than
   the 144px button. */
@media (min-width:1024px){
  .fp-article--providers.fp-bb-module--article .fp-providers .fp-providers__item{flex-basis:min(258px, calc((100% - 2 * var(--fp-space-s)) / 3))}
  .fp-article--providers.fp-bb-module--article .fp-providers .fp-providers__heading{padding-left:max(var(--fp-space-m), calc((100% - 3 * 258px - 2 * var(--fp-space-s)) / 2));padding-right:max(var(--fp-space-m), calc((100% - 3 * 258px - 2 * var(--fp-space-s)) / 2))} }
.fp-bb-module--article{margin:var(--fp-space-l) 0}

/* ══════════════════════════════════════════════════════════════════════════
   v3.57.119 · CHASE VS. BANK OF AMERICA — THE APPROVED GUIDE LAYOUT
   A copy of the Best Business Bank Accounts block below with only the slug class changed (the brief: current approved
   article typography and components, left contents rail). Provider-card and action-link rules are inert here.
   The How To article's approved layout (v3.57.112 r6 + the v3.57.113 admin-toolbar offset), applied to this article
   (OWNER-REVIEW-AND-LAYOUT-R6.md: "Use the current guide sidebar and the installed toolbar offset fix"). Generated from the
   How To rules with only the slug class changed; the How To rules above are untouched. Rules for provider-card modules
   are inert here (this article renders none).
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   v3.57.112 · HOW TO OPEN A BUSINESS BANK ACCOUNT — APPROVED LAYOUT MOCKUP
   Work's mockup (qa/work-drafts/2026-10-17-how-to-open-business-bank-account/
   How-To-Copy-and-Layout-Review.html, d929d84), owner-approved 2026-10-18; it
   supersedes the earlier "keep current contents placement" direction.
   SCOPED TO THIS ARTICLE ONLY. Existing tokens, type scale and components.
   - Quick Answer + checklist: plain article content (the editorial H2 tier),
     at the top of the article column (record opt-in 'quick_in_main').
   - FinanceProspector's Takes: a green left-rule callout with an H3 title.
   - >=1280: two columns - a 225px sticky On This Page sidebar on the left
     (green left rule, navy links) and the article on the right; Sources and
     the Editorial Note align with the article column; provider cards four
     across, stacked and centred, as drawn in the mockup.
   - <1280: the theme's existing single flow - contents above the article.
   ══════════════════════════════════════════════════════════════════════════ */
.fp-article--editorial.fp-article--slug-chase-vs-bank-of-america .fp-article__quick {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    margin: 0 0 var(--fp-space-l);
}
.fp-article--slug-chase-vs-bank-of-america .fp-article__quick > .fp-article__quick-heading {
    margin: 0 0 11px;
    font-size: 28px;
    font-weight: var(--fp-weight-heading);
    line-height: 1.25;
    letter-spacing: var(--fp-tracking-heading);
    color: var(--fp-color-navy);
}
.fp-article--slug-chase-vs-bank-of-america .fp-article__quick p {
    margin: 0 0 13px;
    font-size: 17px;
    line-height: 1.62;
    color: var(--fp-color-gray-500);
}
.fp-article--slug-chase-vs-bank-of-america .fp-article__quick .fp-article__list {
    margin: 0 0 13px;
}
.fp-article--slug-chase-vs-bank-of-america .fp-article__quick .fp-article__list li {
    font-size: 17px;
    line-height: 1.62;
}
/* Contents links navy at every width, as in the mockup (outside the desktop query, so the theme's link colour
   transition cannot animate them when the layout reflows). */
.fp-article--slug-chase-vs-bank-of-america .fp-article__toc-link,
.fp-article--slug-chase-vs-bank-of-america .fp-article__toc-link:visited {
    color: var(--fp-color-navy);
}
/* r6 (Work QA r5): each contents link is clickable across its whole box. As an inline link, "Applications and Special
   Cases" wraps into two separate line boxes, and a click between them (the centre of its box) hit nothing. The link's
   own ::after covers its list item (a "stretched link"), so a click anywhere in the item lands on the link, while the
   link stays inline: text, wrapping, spacing and focus ring are exactly as approved (inline-block changed the wrapped
   link's line spacing, because the item's 17px strut, not the link's smaller type, sets that spacing). */
.fp-article--slug-chase-vs-bank-of-america .fp-article__toc-item {
    position: relative;
}
.fp-article--slug-chase-vs-bank-of-america .fp-article__toc-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
/* r6 (Work QA r5): phones stack the six tables, as the provider reviews do - one block per row, the row heading first, then
   each cell under its column name (data-label in the markup, which also keeps explicit ARIA table roles because changing
   `display` would otherwise drop table semantics). Nothing scrolls sideways; type stays the table's 16px. Tablet and
   desktop tables are unchanged. */
@media (max-width: 639.98px) {
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table,
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table tbody,
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table tr,
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table tbody th,
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table tbody td {
        display: block;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table {
        margin: 0;
    }
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table tbody tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--fp-color-gray-200);
    }
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table tbody tr:last-child {
        border-bottom: 0;
    }
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table tbody th,
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table tbody td {
        padding: 0;
        border: 0;
    }
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table tbody td {
        margin-top: 6px;
    }
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table tbody th::before,
    .fp-article--slug-chase-vs-bank-of-america .fp-howto-table tbody td::before {
        content: attr(data-label) ": ";
        font-weight: var(--fp-weight-label);
        color: var(--fp-color-navy);
    }
}
/* r5: an explanatory paragraph directly below a provider module gets the same 16px gap as one below a table
   (.fp-article__table-wrap margin-bottom); the shared module has no bottom margin. */
.fp-article--slug-chase-vs-bank-of-america .fp-article__main .fp-providers + p {
    margin-top: var(--fp-space-s);
}
.fp-article--slug-chase-vs-bank-of-america .fp-howto-take {
    margin: 30px 0;
    padding: 6px 0 6px 22px;
    border-left: 4px solid var(--fp-color-green);
    max-width: 820px;
}
.fp-article--slug-chase-vs-bank-of-america .fp-howto-take .fp-article__h3 {
    margin: 0 0 8px;
}
.fp-article--slug-chase-vs-bank-of-america .fp-howto-take p {
    margin: 0;
}
@media (max-width: 639.98px) {
    .fp-article--editorial.fp-article--slug-chase-vs-bank-of-america .fp-article__quick { padding: 0; }
    .fp-article--slug-chase-vs-bank-of-america .fp-article__quick > .fp-article__quick-heading {
        font-size: 24px;
        line-height: 1.3;
    }
}
@media (min-width: 1280px) {
    .fp-article--editorial.fp-article--slug-chase-vs-bank-of-america .fp-article__layout {
        display: grid;
        grid-template-columns: 225px minmax(0, 1fr);
        column-gap: 55px;
        align-items: start;
        width: 1200px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    .fp-article--editorial.fp-article--slug-chase-vs-bank-of-america .fp-article__layout > .fp-article__aside {
        grid-column: 1;
        grid-row: 1;
        order: 0;
        width: auto;
        margin: 0;
        position: sticky;
        top: var(--fp-space-m);
        align-self: start;
    }
    .fp-article--editorial.fp-article--slug-chase-vs-bank-of-america .fp-article__layout > .fp-article__main {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-chase-vs-bank-of-america .fp-article__toc {
        padding: 0 0 0 18px;
        background-color: transparent;
        border: 0;
        border-left: 3px solid var(--fp-color-green);
        border-radius: 0;
    }
    .fp-article--slug-chase-vs-bank-of-america .fp-article__toc-heading {
        margin: 0 0 4px;
        font-size: 17px;
        font-weight: var(--fp-weight-heading);
        letter-spacing: 0;
        text-transform: none;
        color: var(--fp-color-gray-600);
    }
    .fp-article--editorial.fp-article--slug-chase-vs-bank-of-america .fp-article__toc-list { columns: auto; }
    .fp-article--editorial.fp-article--slug-chase-vs-bank-of-america .fp-article__toc-item,
    .fp-article--editorial.fp-article--slug-chase-vs-bank-of-america .fp-article__toc-item + .fp-article__toc-item {
        margin-top: 14px;
        padding-bottom: 0;
    }
    .fp-article--slug-chase-vs-bank-of-america .fp-article__table-wrap,
    .fp-article--slug-chase-vs-bank-of-america .fp-faq,
    .fp-article--slug-chase-vs-bank-of-america .fp-glossary {
        width: auto;
        max-width: 100%;
    }
    /* The v3.56.14 container-width module rule is superseded on this page: the modules sit in the article column. */
    .fp-article--slug-chase-vs-bank-of-america .fp-article__main > .fp-providers {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .fp-article--providers.fp-article--slug-chase-vs-bank-of-america .fp-providers .fp-providers__item {
        flex-basis: calc((100% - 3 * var(--fp-space-s)) / 4);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        justify-items: stretch;
        text-align: center;
        align-content: start;
    }
    .fp-article--providers.fp-article--slug-chase-vs-bank-of-america .fp-providers .fp-providers__logo { grid-column: 1; grid-row: 1; justify-self: center; margin-bottom: var(--fp-space-xxs); }
    .fp-article--providers.fp-article--slug-chase-vs-bank-of-america .fp-providers .fp-providers__name { grid-column: 1; grid-row: 2; }
    .fp-article--providers.fp-article--slug-chase-vs-bank-of-america .fp-providers .fp-providers__score { grid-column: 1; grid-row: 3; align-items: center; }
    .fp-article--providers.fp-article--slug-chase-vs-bank-of-america .fp-providers .fp-providers__cta { grid-column: 1; grid-row: 4; justify-self: center; }
    .fp-article--providers.fp-article--slug-chase-vs-bank-of-america .fp-providers .fp-providers__heading { padding-left: var(--fp-space-m); padding-right: var(--fp-space-m); }
    .fp-article--editorial.fp-article--slug-chase-vs-bank-of-america .fp-article__tail {
        width: 1200px;
        max-width: 1200px;
        padding-left: 280px;
        box-sizing: border-box;
    }
}
/* ══════════════════════════════════════════════════════════════════════════
   v3.57.113 · HOW TO — STICKY SIDEBAR CLEARS THE WORDPRESS ADMIN TOOLBAR
   (Work post-install QA). When the toolbar shows (body.admin-bar, signed-in
   users) it is fixed to the top of the viewport, 32px tall from 783px. The
   sticky On This Page sidebar (>=1280px) keeps its existing 24px clearance
   BELOW the toolbar instead of sitting under it. Anchor jumps need no rule:
   WordPress already offsets them by the toolbar height (html
   scroll-padding-top). Signed-out pages have no .admin-bar and are unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
    .admin-bar .fp-article--editorial.fp-article--slug-chase-vs-bank-of-america .fp-article__layout > .fp-article__aside {
        top: calc(var(--fp-space-m) + 32px);
    }
}

/* v3.57.114 - Best Business Bank Accounts: each provider profile ends with Read [Provider] Review · Visit [Provider] →
   (owner amendment). Two text links on one line, wrapping naturally on phones; type is not reduced. */
.fp-article--slug-chase-vs-bank-of-america .fp-bb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 8px;
    margin: var(--fp-space-s) 0 var(--fp-space-l);
}
.fp-article--slug-chase-vs-bank-of-america .fp-bb-actions a {
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-blue);
    text-decoration: none;
}
.fp-article--slug-chase-vs-bank-of-america .fp-bb-actions a:hover { text-decoration: underline; }
/* r4: stays blue while focused (the parent theme's default link focus colour would otherwise turn it #222). */
.fp-article--slug-chase-vs-bank-of-america .fp-bb-actions a:focus,
.fp-article--slug-chase-vs-bank-of-america .fp-bb-actions a:focus-visible { color: var(--fp-color-blue); }
.fp-article--slug-chase-vs-bank-of-america .fp-bb-actions__sep { color: var(--fp-color-gray-500); }
.fp-article--slug-chase-vs-bank-of-america .fp-bb-actions .fp-cta-arrow { margin-left: var(--fp-cta-arrow-gap); }
.fp-article--slug-chase-vs-bank-of-america .fp-bb-profile__title { scroll-margin-top: var(--fp-space-m); }

/* v3.57.119 - this article's contents list has 16 entries (one per approved section), taller than a desktop viewport. The
   sticky rail therefore scrolls within the viewport from 1280px so every link stays reachable (QA r1: at 1440 x 900 the last two
   links sat below the screen edge). Scoped to this article; the How To and Best rails are unchanged. */
@media (min-width: 1280px) {
    .fp-article--editorial.fp-article--slug-chase-vs-bank-of-america .fp-article__layout > .fp-article__aside {
        max-height: calc(100vh - 2 * var(--fp-space-m));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 3px 4px 3px 3px;   /* room for the 2px focus ring inside the scroll box ... */
        margin: -3px -4px -3px -3px; /* ... offset, so the links sit exactly where the Best rail's do */
    }
    .admin-bar .fp-article--editorial.fp-article--slug-chase-vs-bank-of-america .fp-article__layout > .fp-article__aside {
        max-height: calc(100vh - 2 * var(--fp-space-m) - 32px);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.57.120 · BLUEVINE VS. NOVO — THE APPROVED COMPARISON LAYOUT
   A copy of the Chase vs. Bank of America block above (itself the Best guide layout) with only the slug class changed.
   A copy of the Best Business Bank Accounts block below with only the slug class changed (the brief: current approved
   article typography and components, left contents rail). Provider-card and action-link rules are inert here.
   The How To article's approved layout (v3.57.112 r6 + the v3.57.113 admin-toolbar offset), applied to this article
   (OWNER-REVIEW-AND-LAYOUT-R6.md: "Use the current guide sidebar and the installed toolbar offset fix"). Generated from the
   How To rules with only the slug class changed; the How To rules above are untouched. Rules for provider-card modules
   are inert here (this article renders none).
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   v3.57.112 · HOW TO OPEN A BUSINESS BANK ACCOUNT — APPROVED LAYOUT MOCKUP
   Work's mockup (qa/work-drafts/2026-10-17-how-to-open-business-bank-account/
   How-To-Copy-and-Layout-Review.html, d929d84), owner-approved 2026-10-18; it
   supersedes the earlier "keep current contents placement" direction.
   SCOPED TO THIS ARTICLE ONLY. Existing tokens, type scale and components.
   - Quick Answer + checklist: plain article content (the editorial H2 tier),
     at the top of the article column (record opt-in 'quick_in_main').
   - FinanceProspector's Takes: a green left-rule callout with an H3 title.
   - >=1280: two columns - a 225px sticky On This Page sidebar on the left
     (green left rule, navy links) and the article on the right; Sources and
     the Editorial Note align with the article column; provider cards four
     across, stacked and centred, as drawn in the mockup.
   - <1280: the theme's existing single flow - contents above the article.
   ══════════════════════════════════════════════════════════════════════════ */
.fp-article--editorial.fp-article--slug-bluevine-vs-novo .fp-article__quick {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    margin: 0 0 var(--fp-space-l);
}
.fp-article--slug-bluevine-vs-novo .fp-article__quick > .fp-article__quick-heading {
    margin: 0 0 11px;
    font-size: 28px;
    font-weight: var(--fp-weight-heading);
    line-height: 1.25;
    letter-spacing: var(--fp-tracking-heading);
    color: var(--fp-color-navy);
}
.fp-article--slug-bluevine-vs-novo .fp-article__quick p {
    margin: 0 0 13px;
    font-size: 17px;
    line-height: 1.62;
    color: var(--fp-color-gray-500);
}
.fp-article--slug-bluevine-vs-novo .fp-article__quick .fp-article__list {
    margin: 0 0 13px;
}
.fp-article--slug-bluevine-vs-novo .fp-article__quick .fp-article__list li {
    font-size: 17px;
    line-height: 1.62;
}
/* Contents links navy at every width, as in the mockup (outside the desktop query, so the theme's link colour
   transition cannot animate them when the layout reflows). */
.fp-article--slug-bluevine-vs-novo .fp-article__toc-link,
.fp-article--slug-bluevine-vs-novo .fp-article__toc-link:visited {
    color: var(--fp-color-navy);
}
/* r6 (Work QA r5): each contents link is clickable across its whole box. As an inline link, "Applications and Special
   Cases" wraps into two separate line boxes, and a click between them (the centre of its box) hit nothing. The link's
   own ::after covers its list item (a "stretched link"), so a click anywhere in the item lands on the link, while the
   link stays inline: text, wrapping, spacing and focus ring are exactly as approved (inline-block changed the wrapped
   link's line spacing, because the item's 17px strut, not the link's smaller type, sets that spacing). */
.fp-article--slug-bluevine-vs-novo .fp-article__toc-item {
    position: relative;
}
.fp-article--slug-bluevine-vs-novo .fp-article__toc-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
/* r6 (Work QA r5): phones stack the six tables, as the provider reviews do - one block per row, the row heading first, then
   each cell under its column name (data-label in the markup, which also keeps explicit ARIA table roles because changing
   `display` would otherwise drop table semantics). Nothing scrolls sideways; type stays the table's 16px. Tablet and
   desktop tables are unchanged. */
@media (max-width: 639.98px) {
    .fp-article--slug-bluevine-vs-novo .fp-howto-table,
    .fp-article--slug-bluevine-vs-novo .fp-howto-table tbody,
    .fp-article--slug-bluevine-vs-novo .fp-howto-table tr,
    .fp-article--slug-bluevine-vs-novo .fp-howto-table tbody th,
    .fp-article--slug-bluevine-vs-novo .fp-howto-table tbody td {
        display: block;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-bluevine-vs-novo .fp-howto-table {
        margin: 0;
    }
    .fp-article--slug-bluevine-vs-novo .fp-howto-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .fp-article--slug-bluevine-vs-novo .fp-howto-table tbody tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--fp-color-gray-200);
    }
    .fp-article--slug-bluevine-vs-novo .fp-howto-table tbody tr:last-child {
        border-bottom: 0;
    }
    .fp-article--slug-bluevine-vs-novo .fp-howto-table tbody th,
    .fp-article--slug-bluevine-vs-novo .fp-howto-table tbody td {
        padding: 0;
        border: 0;
    }
    .fp-article--slug-bluevine-vs-novo .fp-howto-table tbody td {
        margin-top: 6px;
    }
    .fp-article--slug-bluevine-vs-novo .fp-howto-table tbody th::before,
    .fp-article--slug-bluevine-vs-novo .fp-howto-table tbody td::before {
        content: attr(data-label) ": ";
        font-weight: var(--fp-weight-label);
        color: var(--fp-color-navy);
    }
}
/* r5: an explanatory paragraph directly below a provider module gets the same 16px gap as one below a table
   (.fp-article__table-wrap margin-bottom); the shared module has no bottom margin. */
.fp-article--slug-bluevine-vs-novo .fp-article__main .fp-providers + p {
    margin-top: var(--fp-space-s);
}
.fp-article--slug-bluevine-vs-novo .fp-howto-take {
    margin: 30px 0;
    padding: 6px 0 6px 22px;
    border-left: 4px solid var(--fp-color-green);
    max-width: 820px;
}
.fp-article--slug-bluevine-vs-novo .fp-howto-take .fp-article__h3 {
    margin: 0 0 8px;
}
.fp-article--slug-bluevine-vs-novo .fp-howto-take p {
    margin: 0;
}
@media (max-width: 639.98px) {
    .fp-article--editorial.fp-article--slug-bluevine-vs-novo .fp-article__quick { padding: 0; }
    .fp-article--slug-bluevine-vs-novo .fp-article__quick > .fp-article__quick-heading {
        font-size: 24px;
        line-height: 1.3;
    }
}
@media (min-width: 1280px) {
    .fp-article--editorial.fp-article--slug-bluevine-vs-novo .fp-article__layout {
        display: grid;
        grid-template-columns: 225px minmax(0, 1fr);
        column-gap: 55px;
        align-items: start;
        width: 1200px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    .fp-article--editorial.fp-article--slug-bluevine-vs-novo .fp-article__layout > .fp-article__aside {
        grid-column: 1;
        grid-row: 1;
        order: 0;
        width: auto;
        margin: 0;
        position: sticky;
        top: var(--fp-space-m);
        align-self: start;
    }
    .fp-article--editorial.fp-article--slug-bluevine-vs-novo .fp-article__layout > .fp-article__main {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-bluevine-vs-novo .fp-article__toc {
        padding: 0 0 0 18px;
        background-color: transparent;
        border: 0;
        border-left: 3px solid var(--fp-color-green);
        border-radius: 0;
    }
    .fp-article--slug-bluevine-vs-novo .fp-article__toc-heading {
        margin: 0 0 4px;
        font-size: 17px;
        font-weight: var(--fp-weight-heading);
        letter-spacing: 0;
        text-transform: none;
        color: var(--fp-color-gray-600);
    }
    .fp-article--editorial.fp-article--slug-bluevine-vs-novo .fp-article__toc-list { columns: auto; }
    .fp-article--editorial.fp-article--slug-bluevine-vs-novo .fp-article__toc-item,
    .fp-article--editorial.fp-article--slug-bluevine-vs-novo .fp-article__toc-item + .fp-article__toc-item {
        margin-top: 14px;
        padding-bottom: 0;
    }
    .fp-article--slug-bluevine-vs-novo .fp-article__table-wrap,
    .fp-article--slug-bluevine-vs-novo .fp-faq,
    .fp-article--slug-bluevine-vs-novo .fp-glossary {
        width: auto;
        max-width: 100%;
    }
    /* The v3.56.14 container-width module rule is superseded on this page: the modules sit in the article column. */
    .fp-article--slug-bluevine-vs-novo .fp-article__main > .fp-providers {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .fp-article--providers.fp-article--slug-bluevine-vs-novo .fp-providers .fp-providers__item {
        flex-basis: calc((100% - 3 * var(--fp-space-s)) / 4);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        justify-items: stretch;
        text-align: center;
        align-content: start;
    }
    .fp-article--providers.fp-article--slug-bluevine-vs-novo .fp-providers .fp-providers__logo { grid-column: 1; grid-row: 1; justify-self: center; margin-bottom: var(--fp-space-xxs); }
    .fp-article--providers.fp-article--slug-bluevine-vs-novo .fp-providers .fp-providers__name { grid-column: 1; grid-row: 2; }
    .fp-article--providers.fp-article--slug-bluevine-vs-novo .fp-providers .fp-providers__score { grid-column: 1; grid-row: 3; align-items: center; }
    .fp-article--providers.fp-article--slug-bluevine-vs-novo .fp-providers .fp-providers__cta { grid-column: 1; grid-row: 4; justify-self: center; }
    .fp-article--providers.fp-article--slug-bluevine-vs-novo .fp-providers .fp-providers__heading { padding-left: var(--fp-space-m); padding-right: var(--fp-space-m); }
    .fp-article--editorial.fp-article--slug-bluevine-vs-novo .fp-article__tail {
        width: 1200px;
        max-width: 1200px;
        padding-left: 280px;
        box-sizing: border-box;
    }
}
/* ══════════════════════════════════════════════════════════════════════════
   v3.57.113 · HOW TO — STICKY SIDEBAR CLEARS THE WORDPRESS ADMIN TOOLBAR
   (Work post-install QA). When the toolbar shows (body.admin-bar, signed-in
   users) it is fixed to the top of the viewport, 32px tall from 783px. The
   sticky On This Page sidebar (>=1280px) keeps its existing 24px clearance
   BELOW the toolbar instead of sitting under it. Anchor jumps need no rule:
   WordPress already offsets them by the toolbar height (html
   scroll-padding-top). Signed-out pages have no .admin-bar and are unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
    .admin-bar .fp-article--editorial.fp-article--slug-bluevine-vs-novo .fp-article__layout > .fp-article__aside {
        top: calc(var(--fp-space-m) + 32px);
    }
}

/* v3.57.114 - Best Business Bank Accounts: each provider profile ends with Read [Provider] Review · Visit [Provider] →
   (owner amendment). Two text links on one line, wrapping naturally on phones; type is not reduced. */
.fp-article--slug-bluevine-vs-novo .fp-bb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 8px;
    margin: var(--fp-space-s) 0 var(--fp-space-l);
}
.fp-article--slug-bluevine-vs-novo .fp-bb-actions a {
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-blue);
    text-decoration: none;
}
.fp-article--slug-bluevine-vs-novo .fp-bb-actions a:hover { text-decoration: underline; }
/* r4: stays blue while focused (the parent theme's default link focus colour would otherwise turn it #222). */
.fp-article--slug-bluevine-vs-novo .fp-bb-actions a:focus,
.fp-article--slug-bluevine-vs-novo .fp-bb-actions a:focus-visible { color: var(--fp-color-blue); }
.fp-article--slug-bluevine-vs-novo .fp-bb-actions__sep { color: var(--fp-color-gray-500); }
.fp-article--slug-bluevine-vs-novo .fp-bb-actions .fp-cta-arrow { margin-left: var(--fp-cta-arrow-gap); }
.fp-article--slug-bluevine-vs-novo .fp-bb-profile__title { scroll-margin-top: var(--fp-space-m); }

/* v3.57.119 - this article's contents list has 16 entries (one per approved section), taller than a desktop viewport. The
   sticky rail therefore scrolls within the viewport from 1280px so every link stays reachable (QA r1: at 1440 x 900 the last two
   links sat below the screen edge). Scoped to this article; the How To and Best rails are unchanged. */
@media (min-width: 1280px) {
    .fp-article--editorial.fp-article--slug-bluevine-vs-novo .fp-article__layout > .fp-article__aside {
        max-height: calc(100vh - 2 * var(--fp-space-m));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 3px 4px 3px 3px;   /* room for the 2px focus ring inside the scroll box ... */
        margin: -3px -4px -3px -3px; /* ... offset, so the links sit exactly where the Best rail's do */
    }
    .admin-bar .fp-article--editorial.fp-article--slug-bluevine-vs-novo .fp-article__layout > .fp-article__aside {
        max-height: calc(100vh - 2 * var(--fp-space-m) - 32px);
    }
}

/* v3.57.120 r2 (Work febe470) - Bluevine vs. Novo Quick Summary actions on phones: the decorative "·" is hidden below 640px and the
   two actions keep a clear 24px gap whether they share a line or wrap, so no separator is stranded at a line end. Type, links,
   arrows and focus are unchanged; this article only. */
@media (max-width: 639.98px) {
    .fp-article--slug-bluevine-vs-novo .fp-bb-actions__sep { display: none; }
    .fp-article--slug-bluevine-vs-novo .fp-bb-actions { column-gap: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.57.123 · MERCURY VS. NOVO — THE APPROVED COMPARISON LAYOUT
   A copy of the Bluevine vs. Novo block above (with its r2 phone separator rule) with only the slug class changed.
   A copy of the Chase vs. Bank of America block above (itself the Best guide layout) with only the slug class changed.
   A copy of the Best Business Bank Accounts block below with only the slug class changed (the brief: current approved
   article typography and components, left contents rail). Provider-card and action-link rules are inert here.
   The How To article's approved layout (v3.57.112 r6 + the v3.57.113 admin-toolbar offset), applied to this article
   (OWNER-REVIEW-AND-LAYOUT-R6.md: "Use the current guide sidebar and the installed toolbar offset fix"). Generated from the
   How To rules with only the slug class changed; the How To rules above are untouched. Rules for provider-card modules
   are inert here (this article renders none).
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   v3.57.112 · HOW TO OPEN A BUSINESS BANK ACCOUNT — APPROVED LAYOUT MOCKUP
   Work's mockup (qa/work-drafts/2026-10-17-how-to-open-business-bank-account/
   How-To-Copy-and-Layout-Review.html, d929d84), owner-approved 2026-10-18; it
   supersedes the earlier "keep current contents placement" direction.
   SCOPED TO THIS ARTICLE ONLY. Existing tokens, type scale and components.
   - Quick Answer + checklist: plain article content (the editorial H2 tier),
     at the top of the article column (record opt-in 'quick_in_main').
   - FinanceProspector's Takes: a green left-rule callout with an H3 title.
   - >=1280: two columns - a 225px sticky On This Page sidebar on the left
     (green left rule, navy links) and the article on the right; Sources and
     the Editorial Note align with the article column; provider cards four
     across, stacked and centred, as drawn in the mockup.
   - <1280: the theme's existing single flow - contents above the article.
   ══════════════════════════════════════════════════════════════════════════ */
.fp-article--editorial.fp-article--slug-mercury-vs-novo .fp-article__quick {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    margin: 0 0 var(--fp-space-l);
}
.fp-article--slug-mercury-vs-novo .fp-article__quick > .fp-article__quick-heading {
    margin: 0 0 11px;
    font-size: 28px;
    font-weight: var(--fp-weight-heading);
    line-height: 1.25;
    letter-spacing: var(--fp-tracking-heading);
    color: var(--fp-color-navy);
}
.fp-article--slug-mercury-vs-novo .fp-article__quick p {
    margin: 0 0 13px;
    font-size: 17px;
    line-height: 1.62;
    color: var(--fp-color-gray-500);
}
.fp-article--slug-mercury-vs-novo .fp-article__quick .fp-article__list {
    margin: 0 0 13px;
}
.fp-article--slug-mercury-vs-novo .fp-article__quick .fp-article__list li {
    font-size: 17px;
    line-height: 1.62;
}
/* Contents links navy at every width, as in the mockup (outside the desktop query, so the theme's link colour
   transition cannot animate them when the layout reflows). */
.fp-article--slug-mercury-vs-novo .fp-article__toc-link,
.fp-article--slug-mercury-vs-novo .fp-article__toc-link:visited {
    color: var(--fp-color-navy);
}
/* r6 (Work QA r5): each contents link is clickable across its whole box. As an inline link, "Applications and Special
   Cases" wraps into two separate line boxes, and a click between them (the centre of its box) hit nothing. The link's
   own ::after covers its list item (a "stretched link"), so a click anywhere in the item lands on the link, while the
   link stays inline: text, wrapping, spacing and focus ring are exactly as approved (inline-block changed the wrapped
   link's line spacing, because the item's 17px strut, not the link's smaller type, sets that spacing). */
.fp-article--slug-mercury-vs-novo .fp-article__toc-item {
    position: relative;
}
.fp-article--slug-mercury-vs-novo .fp-article__toc-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
/* r6 (Work QA r5): phones stack the six tables, as the provider reviews do - one block per row, the row heading first, then
   each cell under its column name (data-label in the markup, which also keeps explicit ARIA table roles because changing
   `display` would otherwise drop table semantics). Nothing scrolls sideways; type stays the table's 16px. Tablet and
   desktop tables are unchanged. */
@media (max-width: 639.98px) {
    .fp-article--slug-mercury-vs-novo .fp-howto-table,
    .fp-article--slug-mercury-vs-novo .fp-howto-table tbody,
    .fp-article--slug-mercury-vs-novo .fp-howto-table tr,
    .fp-article--slug-mercury-vs-novo .fp-howto-table tbody th,
    .fp-article--slug-mercury-vs-novo .fp-howto-table tbody td {
        display: block;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-mercury-vs-novo .fp-howto-table {
        margin: 0;
    }
    .fp-article--slug-mercury-vs-novo .fp-howto-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .fp-article--slug-mercury-vs-novo .fp-howto-table tbody tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--fp-color-gray-200);
    }
    .fp-article--slug-mercury-vs-novo .fp-howto-table tbody tr:last-child {
        border-bottom: 0;
    }
    .fp-article--slug-mercury-vs-novo .fp-howto-table tbody th,
    .fp-article--slug-mercury-vs-novo .fp-howto-table tbody td {
        padding: 0;
        border: 0;
    }
    .fp-article--slug-mercury-vs-novo .fp-howto-table tbody td {
        margin-top: 6px;
    }
    .fp-article--slug-mercury-vs-novo .fp-howto-table tbody th::before,
    .fp-article--slug-mercury-vs-novo .fp-howto-table tbody td::before {
        content: attr(data-label) ": ";
        font-weight: var(--fp-weight-label);
        color: var(--fp-color-navy);
    }
}
/* r5: an explanatory paragraph directly below a provider module gets the same 16px gap as one below a table
   (.fp-article__table-wrap margin-bottom); the shared module has no bottom margin. */
.fp-article--slug-mercury-vs-novo .fp-article__main .fp-providers + p {
    margin-top: var(--fp-space-s);
}
.fp-article--slug-mercury-vs-novo .fp-howto-take {
    margin: 30px 0;
    padding: 6px 0 6px 22px;
    border-left: 4px solid var(--fp-color-green);
    max-width: 820px;
}
.fp-article--slug-mercury-vs-novo .fp-howto-take .fp-article__h3 {
    margin: 0 0 8px;
}
.fp-article--slug-mercury-vs-novo .fp-howto-take p {
    margin: 0;
}
@media (max-width: 639.98px) {
    .fp-article--editorial.fp-article--slug-mercury-vs-novo .fp-article__quick { padding: 0; }
    .fp-article--slug-mercury-vs-novo .fp-article__quick > .fp-article__quick-heading {
        font-size: 24px;
        line-height: 1.3;
    }
}
@media (min-width: 1280px) {
    .fp-article--editorial.fp-article--slug-mercury-vs-novo .fp-article__layout {
        display: grid;
        grid-template-columns: 225px minmax(0, 1fr);
        column-gap: 55px;
        align-items: start;
        width: 1200px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    .fp-article--editorial.fp-article--slug-mercury-vs-novo .fp-article__layout > .fp-article__aside {
        grid-column: 1;
        grid-row: 1;
        order: 0;
        width: auto;
        margin: 0;
        position: sticky;
        top: var(--fp-space-m);
        align-self: start;
    }
    .fp-article--editorial.fp-article--slug-mercury-vs-novo .fp-article__layout > .fp-article__main {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-mercury-vs-novo .fp-article__toc {
        padding: 0 0 0 18px;
        background-color: transparent;
        border: 0;
        border-left: 3px solid var(--fp-color-green);
        border-radius: 0;
    }
    .fp-article--slug-mercury-vs-novo .fp-article__toc-heading {
        margin: 0 0 4px;
        font-size: 17px;
        font-weight: var(--fp-weight-heading);
        letter-spacing: 0;
        text-transform: none;
        color: var(--fp-color-gray-600);
    }
    .fp-article--editorial.fp-article--slug-mercury-vs-novo .fp-article__toc-list { columns: auto; }
    .fp-article--editorial.fp-article--slug-mercury-vs-novo .fp-article__toc-item,
    .fp-article--editorial.fp-article--slug-mercury-vs-novo .fp-article__toc-item + .fp-article__toc-item {
        margin-top: 14px;
        padding-bottom: 0;
    }
    .fp-article--slug-mercury-vs-novo .fp-article__table-wrap,
    .fp-article--slug-mercury-vs-novo .fp-faq,
    .fp-article--slug-mercury-vs-novo .fp-glossary {
        width: auto;
        max-width: 100%;
    }
    /* The v3.56.14 container-width module rule is superseded on this page: the modules sit in the article column. */
    .fp-article--slug-mercury-vs-novo .fp-article__main > .fp-providers {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .fp-article--providers.fp-article--slug-mercury-vs-novo .fp-providers .fp-providers__item {
        flex-basis: calc((100% - 3 * var(--fp-space-s)) / 4);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        justify-items: stretch;
        text-align: center;
        align-content: start;
    }
    .fp-article--providers.fp-article--slug-mercury-vs-novo .fp-providers .fp-providers__logo { grid-column: 1; grid-row: 1; justify-self: center; margin-bottom: var(--fp-space-xxs); }
    .fp-article--providers.fp-article--slug-mercury-vs-novo .fp-providers .fp-providers__name { grid-column: 1; grid-row: 2; }
    .fp-article--providers.fp-article--slug-mercury-vs-novo .fp-providers .fp-providers__score { grid-column: 1; grid-row: 3; align-items: center; }
    .fp-article--providers.fp-article--slug-mercury-vs-novo .fp-providers .fp-providers__cta { grid-column: 1; grid-row: 4; justify-self: center; }
    .fp-article--providers.fp-article--slug-mercury-vs-novo .fp-providers .fp-providers__heading { padding-left: var(--fp-space-m); padding-right: var(--fp-space-m); }
    .fp-article--editorial.fp-article--slug-mercury-vs-novo .fp-article__tail {
        width: 1200px;
        max-width: 1200px;
        padding-left: 280px;
        box-sizing: border-box;
    }
}
/* ══════════════════════════════════════════════════════════════════════════
   v3.57.113 · HOW TO — STICKY SIDEBAR CLEARS THE WORDPRESS ADMIN TOOLBAR
   (Work post-install QA). When the toolbar shows (body.admin-bar, signed-in
   users) it is fixed to the top of the viewport, 32px tall from 783px. The
   sticky On This Page sidebar (>=1280px) keeps its existing 24px clearance
   BELOW the toolbar instead of sitting under it. Anchor jumps need no rule:
   WordPress already offsets them by the toolbar height (html
   scroll-padding-top). Signed-out pages have no .admin-bar and are unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
    .admin-bar .fp-article--editorial.fp-article--slug-mercury-vs-novo .fp-article__layout > .fp-article__aside {
        top: calc(var(--fp-space-m) + 32px);
    }
}

/* v3.57.114 - Best Business Bank Accounts: each provider profile ends with Read [Provider] Review · Visit [Provider] →
   (owner amendment). Two text links on one line, wrapping naturally on phones; type is not reduced. */
.fp-article--slug-mercury-vs-novo .fp-bb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 8px;
    margin: var(--fp-space-s) 0 var(--fp-space-l);
}
.fp-article--slug-mercury-vs-novo .fp-bb-actions a {
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-blue);
    text-decoration: none;
}
.fp-article--slug-mercury-vs-novo .fp-bb-actions a:hover { text-decoration: underline; }
/* r4: stays blue while focused (the parent theme's default link focus colour would otherwise turn it #222). */
.fp-article--slug-mercury-vs-novo .fp-bb-actions a:focus,
.fp-article--slug-mercury-vs-novo .fp-bb-actions a:focus-visible { color: var(--fp-color-blue); }
.fp-article--slug-mercury-vs-novo .fp-bb-actions__sep { color: var(--fp-color-gray-500); }
.fp-article--slug-mercury-vs-novo .fp-bb-actions .fp-cta-arrow { margin-left: var(--fp-cta-arrow-gap); }
.fp-article--slug-mercury-vs-novo .fp-bb-profile__title { scroll-margin-top: var(--fp-space-m); }

/* v3.57.119 - this article's contents list has 16 entries (one per approved section), taller than a desktop viewport. The
   sticky rail therefore scrolls within the viewport from 1280px so every link stays reachable (QA r1: at 1440 x 900 the last two
   links sat below the screen edge). Scoped to this article; the How To and Best rails are unchanged. */
@media (min-width: 1280px) {
    .fp-article--editorial.fp-article--slug-mercury-vs-novo .fp-article__layout > .fp-article__aside {
        max-height: calc(100vh - 2 * var(--fp-space-m));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 3px 4px 3px 3px;   /* room for the 2px focus ring inside the scroll box ... */
        margin: -3px -4px -3px -3px; /* ... offset, so the links sit exactly where the Best rail's do */
    }
    .admin-bar .fp-article--editorial.fp-article--slug-mercury-vs-novo .fp-article__layout > .fp-article__aside {
        max-height: calc(100vh - 2 * var(--fp-space-m) - 32px);
    }
}

/* v3.57.123 - Mercury vs. Novo Quick Summary actions on phones (the established v3.57.120 r2 treatment): the decorative "·" is hidden below 640px and the
   two actions keep a clear 24px gap whether they share a line or wrap, so no separator is stranded at a line end. Type, links,
   arrows and focus are unchanged; this article only. */
@media (max-width: 639.98px) {
    .fp-article--slug-mercury-vs-novo .fp-bb-actions__sep { display: none; }
    .fp-article--slug-mercury-vs-novo .fp-bb-actions { column-gap: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.57.123 r2 · COMPARISON ARTICLES — HERO VISIT LINKS AND PROVIDER-CARD PAIRS (owner amendments, 2026-10-20)
   Rendered only for records with 'comparison_pair' (template-parts/comparison-hero-visits.php, comparison-pair-cards.php).
   HERO. The two Visit links, directly beneath the illustration (r3: the standalone compensation sentence that preceded them is
   removed, with its rule). From 1024 the row is exactly as wide as the rendered illustration (at most 385.55px: its 287.88px height cap; narrower
   when the column is) and split 8.333 / 41.667 / 41.667 / 8.333%, so each link is centred on its panel (panel centres at 350 and
   850 of the 1200-unit artwork = 29.17% and 70.83%). Below 1024 the illustration is only 224.25px (640-1023) or 186.87px (<640)
   wide - its panel centres 47px / 39px either side of the middle, too close for two links - so the row is up to 350px wide,
   centred on the illustration, and each link is centred in its own half: left link under the left panel's side, right under
   the right's, never overlapping (QA r2 found "Visit Bluevine" and "Visit Grasshopper" colliding in the panel-width row at 390).
   Links use the established Visit treatment (17/600 blue, arrow); a long name wraps between words inside its column, arrow kept
   with the last word. Focused text stays blue.
   PAIRS. The Best article's Read Review card module (.fp-bb-module) without its outer frame: no border, tint, radius or heading;
   the cards keep their own borders and the established 258px width, centred, two across from 640px and stacked (centred, not
   stretched) below.
   ══════════════════════════════════════════════════════════════════════════ */
.fp-cmp-hero__visits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--fp-space-s);
    width: min(100%, 350px);
    margin: var(--fp-space-xs) auto 0;
}
.fp-cmp-hero__visit {
    grid-row: 1;
    justify-self: center;
    text-align: center;
    font-size: 17px;
    font-weight: var(--fp-weight-label);
    line-height: 1.4;
    color: var(--fp-color-blue);
    text-decoration: none;
}
.fp-cmp-hero__visit--left { grid-column: 1; }
.fp-cmp-hero__visit--right { grid-column: 2; }
.fp-cmp-hero__visit:hover { text-decoration: underline; }
.fp-cmp-hero__visit:focus,
.fp-cmp-hero__visit:focus-visible { color: var(--fp-color-blue); }
.fp-cmp-hero__visit-end { white-space: nowrap; }
.fp-cmp-hero__visit .fp-cta-arrow { margin-left: var(--fp-cta-arrow-gap); }
@media (min-width: 1024px) {
    .fp-cmp-hero__visits { grid-template-columns: 8.3333% 41.6667% 41.6667% 8.3333%; column-gap: 0; width: min(100%, 385.55px); }
    .fp-cmp-hero__visit--left { grid-column: 2; }
    .fp-cmp-hero__visit--right { grid-column: 3; }
}

.fp-cmp-pair .fp-providers {
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.fp-cmp-pair.fp-article--providers .fp-providers .fp-providers__list { padding: 0; }
.fp-cmp-pair.fp-article--providers .fp-providers .fp-providers__item { flex-basis: min(258px, 100%); }
@media (min-width: 640px) {
    .fp-cmp-pair.fp-article--providers .fp-providers .fp-providers__item { flex-basis: min(258px, calc((100% - var(--fp-space-s)) / 2)); }
}


/* ══════════════════════════════════════════════════════════════════════════
   v3.57.126 · BEST BUSINESS CHECKING ACCOUNTS — THE APPROVED GUIDE LAYOUT
   A copy of the Best Business Bank Accounts block (itself the How To layout + toolbar offset) with only the slug class changed.
   The How To article's approved layout (v3.57.112 r6 + the v3.57.113 admin-toolbar offset), applied to this article
   (OWNER-REVIEW-AND-LAYOUT-R6.md: "Use the current guide sidebar and the installed toolbar offset fix"). Generated from the
   How To rules with only the slug class changed; the How To rules above are untouched. Rules for provider-card modules
   are inert here (this article renders none).
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   v3.57.112 · HOW TO OPEN A BUSINESS BANK ACCOUNT — APPROVED LAYOUT MOCKUP
   Work's mockup (qa/work-drafts/2026-10-17-how-to-open-business-bank-account/
   How-To-Copy-and-Layout-Review.html, d929d84), owner-approved 2026-10-18; it
   supersedes the earlier "keep current contents placement" direction.
   SCOPED TO THIS ARTICLE ONLY. Existing tokens, type scale and components.
   - Quick Answer + checklist: plain article content (the editorial H2 tier),
     at the top of the article column (record opt-in 'quick_in_main').
   - FinanceProspector's Takes: a green left-rule callout with an H3 title.
   - >=1280: two columns - a 225px sticky On This Page sidebar on the left
     (green left rule, navy links) and the article on the right; Sources and
     the Editorial Note align with the article column; provider cards four
     across, stacked and centred, as drawn in the mockup.
   - <1280: the theme's existing single flow - contents above the article.
   ══════════════════════════════════════════════════════════════════════════ */
.fp-article--editorial.fp-article--slug-best-business-checking-accounts .fp-article__quick {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    margin: 0 0 var(--fp-space-l);
}
.fp-article--slug-best-business-checking-accounts .fp-article__quick > .fp-article__quick-heading {
    margin: 0 0 11px;
    font-size: 28px;
    font-weight: var(--fp-weight-heading);
    line-height: 1.25;
    letter-spacing: var(--fp-tracking-heading);
    color: var(--fp-color-navy);
}
.fp-article--slug-best-business-checking-accounts .fp-article__quick p {
    margin: 0 0 13px;
    font-size: 17px;
    line-height: 1.62;
    color: var(--fp-color-gray-500);
}
.fp-article--slug-best-business-checking-accounts .fp-article__quick .fp-article__list {
    margin: 0 0 13px;
}
.fp-article--slug-best-business-checking-accounts .fp-article__quick .fp-article__list li {
    font-size: 17px;
    line-height: 1.62;
}
/* Contents links navy at every width, as in the mockup (outside the desktop query, so the theme's link colour
   transition cannot animate them when the layout reflows). */
.fp-article--slug-best-business-checking-accounts .fp-article__toc-link,
.fp-article--slug-best-business-checking-accounts .fp-article__toc-link:visited {
    color: var(--fp-color-navy);
}
/* r6 (Work QA r5): each contents link is clickable across its whole box. As an inline link, "Applications and Special
   Cases" wraps into two separate line boxes, and a click between them (the centre of its box) hit nothing. The link's
   own ::after covers its list item (a "stretched link"), so a click anywhere in the item lands on the link, while the
   link stays inline: text, wrapping, spacing and focus ring are exactly as approved (inline-block changed the wrapped
   link's line spacing, because the item's 17px strut, not the link's smaller type, sets that spacing). */
.fp-article--slug-best-business-checking-accounts .fp-article__toc-item {
    position: relative;
}
.fp-article--slug-best-business-checking-accounts .fp-article__toc-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
/* r6 (Work QA r5): phones stack the six tables, as the provider reviews do - one block per row, the row heading first, then
   each cell under its column name (data-label in the markup, which also keeps explicit ARIA table roles because changing
   `display` would otherwise drop table semantics). Nothing scrolls sideways; type stays the table's 16px. Tablet and
   desktop tables are unchanged. */
@media (max-width: 639.98px) {
    .fp-article--slug-best-business-checking-accounts .fp-howto-table,
    .fp-article--slug-best-business-checking-accounts .fp-howto-table tbody,
    .fp-article--slug-best-business-checking-accounts .fp-howto-table tr,
    .fp-article--slug-best-business-checking-accounts .fp-howto-table tbody th,
    .fp-article--slug-best-business-checking-accounts .fp-howto-table tbody td {
        display: block;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-best-business-checking-accounts .fp-howto-table {
        margin: 0;
    }
    .fp-article--slug-best-business-checking-accounts .fp-howto-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .fp-article--slug-best-business-checking-accounts .fp-howto-table tbody tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--fp-color-gray-200);
    }
    .fp-article--slug-best-business-checking-accounts .fp-howto-table tbody tr:last-child {
        border-bottom: 0;
    }
    .fp-article--slug-best-business-checking-accounts .fp-howto-table tbody th,
    .fp-article--slug-best-business-checking-accounts .fp-howto-table tbody td {
        padding: 0;
        border: 0;
    }
    .fp-article--slug-best-business-checking-accounts .fp-howto-table tbody td {
        margin-top: 6px;
    }
    .fp-article--slug-best-business-checking-accounts .fp-howto-table tbody th::before,
    .fp-article--slug-best-business-checking-accounts .fp-howto-table tbody td::before {
        content: attr(data-label) ": ";
        font-weight: var(--fp-weight-label);
        color: var(--fp-color-navy);
    }
}
/* r5: an explanatory paragraph directly below a provider module gets the same 16px gap as one below a table
   (.fp-article__table-wrap margin-bottom); the shared module has no bottom margin. */
.fp-article--slug-best-business-checking-accounts .fp-article__main .fp-providers + p {
    margin-top: var(--fp-space-s);
}
.fp-article--slug-best-business-checking-accounts .fp-howto-take {
    margin: 30px 0;
    padding: 6px 0 6px 22px;
    border-left: 4px solid var(--fp-color-green);
    max-width: 820px;
}
.fp-article--slug-best-business-checking-accounts .fp-howto-take .fp-article__h3 {
    margin: 0 0 8px;
}
.fp-article--slug-best-business-checking-accounts .fp-howto-take p {
    margin: 0;
}
@media (max-width: 639.98px) {
    .fp-article--editorial.fp-article--slug-best-business-checking-accounts .fp-article__quick { padding: 0; }
    .fp-article--slug-best-business-checking-accounts .fp-article__quick > .fp-article__quick-heading {
        font-size: 24px;
        line-height: 1.3;
    }
}
@media (min-width: 1280px) {
    .fp-article--editorial.fp-article--slug-best-business-checking-accounts .fp-article__layout {
        display: grid;
        grid-template-columns: 225px minmax(0, 1fr);
        column-gap: 55px;
        align-items: start;
        width: 1200px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    .fp-article--editorial.fp-article--slug-best-business-checking-accounts .fp-article__layout > .fp-article__aside {
        grid-column: 1;
        grid-row: 1;
        order: 0;
        width: auto;
        margin: 0;
        position: sticky;
        top: var(--fp-space-m);
        align-self: start;
    }
    .fp-article--editorial.fp-article--slug-best-business-checking-accounts .fp-article__layout > .fp-article__main {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-best-business-checking-accounts .fp-article__toc {
        padding: 0 0 0 18px;
        background-color: transparent;
        border: 0;
        border-left: 3px solid var(--fp-color-green);
        border-radius: 0;
    }
    .fp-article--slug-best-business-checking-accounts .fp-article__toc-heading {
        margin: 0 0 4px;
        font-size: 17px;
        font-weight: var(--fp-weight-heading);
        letter-spacing: 0;
        text-transform: none;
        color: var(--fp-color-gray-600);
    }
    .fp-article--editorial.fp-article--slug-best-business-checking-accounts .fp-article__toc-list { columns: auto; }
    .fp-article--editorial.fp-article--slug-best-business-checking-accounts .fp-article__toc-item,
    .fp-article--editorial.fp-article--slug-best-business-checking-accounts .fp-article__toc-item + .fp-article__toc-item {
        margin-top: 14px;
        padding-bottom: 0;
    }
    .fp-article--slug-best-business-checking-accounts .fp-article__table-wrap,
    .fp-article--slug-best-business-checking-accounts .fp-faq,
    .fp-article--slug-best-business-checking-accounts .fp-glossary {
        width: auto;
        max-width: 100%;
    }
    /* The v3.56.14 container-width module rule is superseded on this page: the modules sit in the article column. */
    .fp-article--slug-best-business-checking-accounts .fp-article__main > .fp-providers {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .fp-article--providers.fp-article--slug-best-business-checking-accounts .fp-providers .fp-providers__item {
        flex-basis: calc((100% - 3 * var(--fp-space-s)) / 4);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        justify-items: stretch;
        text-align: center;
        align-content: start;
    }
    .fp-article--providers.fp-article--slug-best-business-checking-accounts .fp-providers .fp-providers__logo { grid-column: 1; grid-row: 1; justify-self: center; margin-bottom: var(--fp-space-xxs); }
    .fp-article--providers.fp-article--slug-best-business-checking-accounts .fp-providers .fp-providers__name { grid-column: 1; grid-row: 2; }
    .fp-article--providers.fp-article--slug-best-business-checking-accounts .fp-providers .fp-providers__score { grid-column: 1; grid-row: 3; align-items: center; }
    .fp-article--providers.fp-article--slug-best-business-checking-accounts .fp-providers .fp-providers__cta { grid-column: 1; grid-row: 4; justify-self: center; }
    .fp-article--providers.fp-article--slug-best-business-checking-accounts .fp-providers .fp-providers__heading { padding-left: var(--fp-space-m); padding-right: var(--fp-space-m); }
    .fp-article--editorial.fp-article--slug-best-business-checking-accounts .fp-article__tail {
        width: 1200px;
        max-width: 1200px;
        padding-left: 280px;
        box-sizing: border-box;
    }
}
/* ══════════════════════════════════════════════════════════════════════════
   v3.57.113 · HOW TO — STICKY SIDEBAR CLEARS THE WORDPRESS ADMIN TOOLBAR
   (Work post-install QA). When the toolbar shows (body.admin-bar, signed-in
   users) it is fixed to the top of the viewport, 32px tall from 783px. The
   sticky On This Page sidebar (>=1280px) keeps its existing 24px clearance
   BELOW the toolbar instead of sitting under it. Anchor jumps need no rule:
   WordPress already offsets them by the toolbar height (html
   scroll-padding-top). Signed-out pages have no .admin-bar and are unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
    .admin-bar .fp-article--editorial.fp-article--slug-best-business-checking-accounts .fp-article__layout > .fp-article__aside {
        top: calc(var(--fp-space-m) + 32px);
    }
}

/* v3.57.126 r2 - the approved filled BEST OF badge on an article hero pill (Best Business Checking Accounts; no other article
   declares the best-of pill type): the resource card's filled Best Of treatment (resource-center.css), white on Core Navy. The
   pill's shape, size, type and uppercase label are the shared .fp-article__pill / .fp-resource-card__badge rules. */
.fp-article__pill.fp-resource-card__badge--best-of { color: var(--fp-color-white); background-color: var(--fp-color-navy); border-color: var(--fp-color-navy); }

/* v3.57.126 r2 - Best Business Checking Accounts: each provider profile ends with "Visit [Provider] ->" (owner amendment cabfe93),
   the Best Business Bank Accounts action-link treatment (same values): 600 blue text link with arrow, blue while focused, 16px
   above and 32px below - which also sets one consistent gap before every next provider heading. */
.fp-article--slug-best-business-checking-accounts .fp-bb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 8px;
    margin: var(--fp-space-s) 0 var(--fp-space-l);
}
.fp-article--slug-best-business-checking-accounts .fp-bb-actions a {
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-blue);
    text-decoration: none;
}
.fp-article--slug-best-business-checking-accounts .fp-bb-actions a:hover { text-decoration: underline; }
.fp-article--slug-best-business-checking-accounts .fp-bb-actions a:focus,
.fp-article--slug-best-business-checking-accounts .fp-bb-actions a:focus-visible { color: var(--fp-color-blue); }
.fp-article--slug-best-business-checking-accounts .fp-bb-actions .fp-cta-arrow { margin-left: var(--fp-cta-arrow-gap); }


/* ══════════════════════════════════════════════════════════════════════════
   v3.57.127 · BEST ONLINE BUSINESS BANK ACCOUNTS — THE APPROVED GUIDE LAYOUT
   A copy of the Best Business Bank Accounts block (the How To layout + toolbar offset) with only the slug class changed.
   The How To article's approved layout (v3.57.112 r6 + the v3.57.113 admin-toolbar offset), applied to this article
   (OWNER-REVIEW-AND-LAYOUT-R6.md: "Use the current guide sidebar and the installed toolbar offset fix"). Generated from the
   How To rules with only the slug class changed; the How To rules above are untouched. Rules for provider-card modules
   are inert here (this article renders none).
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   v3.57.112 · HOW TO OPEN A BUSINESS BANK ACCOUNT — APPROVED LAYOUT MOCKUP
   Work's mockup (qa/work-drafts/2026-10-17-how-to-open-business-bank-account/
   How-To-Copy-and-Layout-Review.html, d929d84), owner-approved 2026-10-18; it
   supersedes the earlier "keep current contents placement" direction.
   SCOPED TO THIS ARTICLE ONLY. Existing tokens, type scale and components.
   - Quick Answer + checklist: plain article content (the editorial H2 tier),
     at the top of the article column (record opt-in 'quick_in_main').
   - FinanceProspector's Takes: a green left-rule callout with an H3 title.
   - >=1280: two columns - a 225px sticky On This Page sidebar on the left
     (green left rule, navy links) and the article on the right; Sources and
     the Editorial Note align with the article column; provider cards four
     across, stacked and centred, as drawn in the mockup.
   - <1280: the theme's existing single flow - contents above the article.
   ══════════════════════════════════════════════════════════════════════════ */
.fp-article--editorial.fp-article--slug-best-online-business-bank-accounts .fp-article__quick {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    margin: 0 0 var(--fp-space-l);
}
.fp-article--slug-best-online-business-bank-accounts .fp-article__quick > .fp-article__quick-heading {
    margin: 0 0 11px;
    font-size: 28px;
    font-weight: var(--fp-weight-heading);
    line-height: 1.25;
    letter-spacing: var(--fp-tracking-heading);
    color: var(--fp-color-navy);
}
.fp-article--slug-best-online-business-bank-accounts .fp-article__quick p {
    margin: 0 0 13px;
    font-size: 17px;
    line-height: 1.62;
    color: var(--fp-color-gray-500);
}
.fp-article--slug-best-online-business-bank-accounts .fp-article__quick .fp-article__list {
    margin: 0 0 13px;
}
.fp-article--slug-best-online-business-bank-accounts .fp-article__quick .fp-article__list li {
    font-size: 17px;
    line-height: 1.62;
}
/* Contents links navy at every width, as in the mockup (outside the desktop query, so the theme's link colour
   transition cannot animate them when the layout reflows). */
.fp-article--slug-best-online-business-bank-accounts .fp-article__toc-link,
.fp-article--slug-best-online-business-bank-accounts .fp-article__toc-link:visited {
    color: var(--fp-color-navy);
}
/* r6 (Work QA r5): each contents link is clickable across its whole box. As an inline link, "Applications and Special
   Cases" wraps into two separate line boxes, and a click between them (the centre of its box) hit nothing. The link's
   own ::after covers its list item (a "stretched link"), so a click anywhere in the item lands on the link, while the
   link stays inline: text, wrapping, spacing and focus ring are exactly as approved (inline-block changed the wrapped
   link's line spacing, because the item's 17px strut, not the link's smaller type, sets that spacing). */
.fp-article--slug-best-online-business-bank-accounts .fp-article__toc-item {
    position: relative;
}
.fp-article--slug-best-online-business-bank-accounts .fp-article__toc-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
/* r6 (Work QA r5): phones stack the six tables, as the provider reviews do - one block per row, the row heading first, then
   each cell under its column name (data-label in the markup, which also keeps explicit ARIA table roles because changing
   `display` would otherwise drop table semantics). Nothing scrolls sideways; type stays the table's 16px. Tablet and
   desktop tables are unchanged. */
@media (max-width: 639.98px) {
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table,
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table tbody,
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table tr,
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table tbody th,
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table tbody td {
        display: block;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table {
        margin: 0;
    }
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table tbody tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--fp-color-gray-200);
    }
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table tbody tr:last-child {
        border-bottom: 0;
    }
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table tbody th,
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table tbody td {
        padding: 0;
        border: 0;
    }
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table tbody td {
        margin-top: 6px;
    }
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table tbody th::before,
    .fp-article--slug-best-online-business-bank-accounts .fp-howto-table tbody td::before {
        content: attr(data-label) ": ";
        font-weight: var(--fp-weight-label);
        color: var(--fp-color-navy);
    }
}
/* r5: an explanatory paragraph directly below a provider module gets the same 16px gap as one below a table
   (.fp-article__table-wrap margin-bottom); the shared module has no bottom margin. */
.fp-article--slug-best-online-business-bank-accounts .fp-article__main .fp-providers + p {
    margin-top: var(--fp-space-s);
}
.fp-article--slug-best-online-business-bank-accounts .fp-howto-take {
    margin: 30px 0;
    padding: 6px 0 6px 22px;
    border-left: 4px solid var(--fp-color-green);
    max-width: 820px;
}
.fp-article--slug-best-online-business-bank-accounts .fp-howto-take .fp-article__h3 {
    margin: 0 0 8px;
}
.fp-article--slug-best-online-business-bank-accounts .fp-howto-take p {
    margin: 0;
}
@media (max-width: 639.98px) {
    .fp-article--editorial.fp-article--slug-best-online-business-bank-accounts .fp-article__quick { padding: 0; }
    .fp-article--slug-best-online-business-bank-accounts .fp-article__quick > .fp-article__quick-heading {
        font-size: 24px;
        line-height: 1.3;
    }
}
@media (min-width: 1280px) {
    .fp-article--editorial.fp-article--slug-best-online-business-bank-accounts .fp-article__layout {
        display: grid;
        grid-template-columns: 225px minmax(0, 1fr);
        column-gap: 55px;
        align-items: start;
        width: 1200px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    .fp-article--editorial.fp-article--slug-best-online-business-bank-accounts .fp-article__layout > .fp-article__aside {
        grid-column: 1;
        grid-row: 1;
        order: 0;
        width: auto;
        margin: 0;
        position: sticky;
        top: var(--fp-space-m);
        align-self: start;
    }
    .fp-article--editorial.fp-article--slug-best-online-business-bank-accounts .fp-article__layout > .fp-article__main {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-width: 0;
    }
    .fp-article--slug-best-online-business-bank-accounts .fp-article__toc {
        padding: 0 0 0 18px;
        background-color: transparent;
        border: 0;
        border-left: 3px solid var(--fp-color-green);
        border-radius: 0;
    }
    .fp-article--slug-best-online-business-bank-accounts .fp-article__toc-heading {
        margin: 0 0 4px;
        font-size: 17px;
        font-weight: var(--fp-weight-heading);
        letter-spacing: 0;
        text-transform: none;
        color: var(--fp-color-gray-600);
    }
    .fp-article--editorial.fp-article--slug-best-online-business-bank-accounts .fp-article__toc-list { columns: auto; }
    .fp-article--editorial.fp-article--slug-best-online-business-bank-accounts .fp-article__toc-item,
    .fp-article--editorial.fp-article--slug-best-online-business-bank-accounts .fp-article__toc-item + .fp-article__toc-item {
        margin-top: 14px;
        padding-bottom: 0;
    }
    .fp-article--slug-best-online-business-bank-accounts .fp-article__table-wrap,
    .fp-article--slug-best-online-business-bank-accounts .fp-faq,
    .fp-article--slug-best-online-business-bank-accounts .fp-glossary {
        width: auto;
        max-width: 100%;
    }
    /* The v3.56.14 container-width module rule is superseded on this page: the modules sit in the article column. */
    .fp-article--slug-best-online-business-bank-accounts .fp-article__main > .fp-providers {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .fp-article--providers.fp-article--slug-best-online-business-bank-accounts .fp-providers .fp-providers__item {
        flex-basis: calc((100% - 3 * var(--fp-space-s)) / 4);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        justify-items: stretch;
        text-align: center;
        align-content: start;
    }
    .fp-article--providers.fp-article--slug-best-online-business-bank-accounts .fp-providers .fp-providers__logo { grid-column: 1; grid-row: 1; justify-self: center; margin-bottom: var(--fp-space-xxs); }
    .fp-article--providers.fp-article--slug-best-online-business-bank-accounts .fp-providers .fp-providers__name { grid-column: 1; grid-row: 2; }
    .fp-article--providers.fp-article--slug-best-online-business-bank-accounts .fp-providers .fp-providers__score { grid-column: 1; grid-row: 3; align-items: center; }
    .fp-article--providers.fp-article--slug-best-online-business-bank-accounts .fp-providers .fp-providers__cta { grid-column: 1; grid-row: 4; justify-self: center; }
    .fp-article--providers.fp-article--slug-best-online-business-bank-accounts .fp-providers .fp-providers__heading { padding-left: var(--fp-space-m); padding-right: var(--fp-space-m); }
    .fp-article--editorial.fp-article--slug-best-online-business-bank-accounts .fp-article__tail {
        width: 1200px;
        max-width: 1200px;
        padding-left: 280px;
        box-sizing: border-box;
    }
}
/* ══════════════════════════════════════════════════════════════════════════
   v3.57.113 · HOW TO — STICKY SIDEBAR CLEARS THE WORDPRESS ADMIN TOOLBAR
   (Work post-install QA). When the toolbar shows (body.admin-bar, signed-in
   users) it is fixed to the top of the viewport, 32px tall from 783px. The
   sticky On This Page sidebar (>=1280px) keeps its existing 24px clearance
   BELOW the toolbar instead of sitting under it. Anchor jumps need no rule:
   WordPress already offsets them by the toolbar height (html
   scroll-padding-top). Signed-out pages have no .admin-bar and are unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
    .admin-bar .fp-article--editorial.fp-article--slug-best-online-business-bank-accounts .fp-article__layout > .fp-article__aside {
        top: calc(var(--fp-space-m) + 32px);
    }
}

/* v3.57.127 - Best Online Business Bank Accounts: each provider overview ends with Read [Provider] Review · Visit [Provider] →
   (OWNER-PAIRED-OVERVIEW-ACTIONS-ALL-THREE-ARTICLES.md) - a copy of the Best Business Bank Accounts rules with only the slug changed
   (owner amendment). Two text links on one line, wrapping naturally on phones; type is not reduced. */
.fp-article--slug-best-online-business-bank-accounts .fp-bb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 8px;
    margin: var(--fp-space-s) 0 var(--fp-space-l);
}
.fp-article--slug-best-online-business-bank-accounts .fp-bb-actions a {
    font-weight: var(--fp-weight-label);
    color: var(--fp-color-blue);
    text-decoration: none;
}
.fp-article--slug-best-online-business-bank-accounts .fp-bb-actions a:hover { text-decoration: underline; }
/* r4: stays blue while focused (the parent theme's default link focus colour would otherwise turn it #222). */
.fp-article--slug-best-online-business-bank-accounts .fp-bb-actions a:focus,
.fp-article--slug-best-online-business-bank-accounts .fp-bb-actions a:focus-visible { color: var(--fp-color-blue); }
.fp-article--slug-best-online-business-bank-accounts .fp-bb-actions__sep { color: var(--fp-color-gray-500); }
.fp-article--slug-best-online-business-bank-accounts .fp-bb-actions .fp-cta-arrow { margin-left: var(--fp-cta-arrow-gap); }
.fp-article--slug-best-online-business-bank-accounts .fp-bb-profile__title { scroll-margin-top: var(--fp-space-m); }
/* v3.57.127 - the approved phone pair treatment (Bluevine vs. Novo r2): below 640px the decorative "·" is hidden and the two actions
   keep a 24px gap whether they share a line or wrap, so no separator is stranded. This article only. */
@media (max-width: 639.98px) {
    .fp-article--slug-best-online-business-bank-accounts .fp-bb-actions__sep { display: none; }
    .fp-article--slug-best-online-business-bank-accounts .fp-bb-actions { column-gap: 24px; }
}

/* v3.57.127 - this article's contents list has 18 entries, taller than a desktop viewport (rail 1,063px at 1440 x 900; QA r1: the
   last five links sat below the screen edge). The established v3.57.119 treatment: the sticky rail scrolls within the viewport
   from 1280px so every link stays reachable. This article only. */
@media (min-width: 1280px) {
    .fp-article--editorial.fp-article--slug-best-online-business-bank-accounts .fp-article__layout > .fp-article__aside {
        max-height: calc(100vh - 2 * var(--fp-space-m));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 3px 4px 3px 3px;   /* room for the 2px focus ring inside the scroll box ... */
        margin: -3px -4px -3px -3px; /* ... offset, so the links sit exactly where the Best rail's do */
    }
    .admin-bar .fp-article--editorial.fp-article--slug-best-online-business-bank-accounts .fp-article__layout > .fp-article__aside {
        max-height: calc(100vh - 2 * var(--fp-space-m) - 32px);
    }
}

/* v3.57.129 - provider-review closing CTA (owner, CLAUDE-CONSOLIDATED-NEXT-THEME-BRIEF.md A; r2 colour: WORK-r2-GREEN-CTA-AMENDMENT.md):
   "Ready to Explore [Provider]?" in logo Core Blue #2563EB, then the linked "Get Started with [Provider] ->" in the owner-approved
   accessible green #15803D (about 5.02:1 on white), on all ten reviews. #15803D is applied to these closing actions only - the global
   Core Green token and every other green element are unchanged. Sizes stay the established 19px / 700 prompt and 19px / 600 link;
   arrow, destination and layout unchanged. Scoped to the closing line, so the hero "Visit [Provider]" CTA keeps Core Blue. The link
   keeps #15803D when hovered, focused or visited; the focus ring is the shared one. */
.fp-review__closing .fp-review__closing-prompt.fp-review__closing-prompt--strong { color: var(--fp-color-blue); }
/* v3.57.145 (P22, owner instruction 2026-10-28): the link is now Core Blue #2563EB in every state, on all ten reviews (was
   #15803D, outside Palette v1.1); :active added so a held press matches. 19px / 600, arrow, focus ring, destination and the
   "Ready to Explore [Provider]?" prompt are unchanged. */
.fp-article--review .fp-review__closing a.fp-review__cta,
.fp-article--review .fp-review__closing a.fp-review__cta:hover,
.fp-article--review .fp-review__closing a.fp-review__cta:focus,
.fp-article--review .fp-review__closing a.fp-review__cta:focus-visible,
.fp-article--review .fp-review__closing a.fp-review__cta:active,
.fp-article--review .fp-review__closing a.fp-review__cta:visited { color: var(--fp-color-blue); }

/* v3.57.130 - Best Business Checking Accounts: the Online article's paired provider actions (OWNER-CHECKING-PAIRED-ACTIONS-AMENDMENT.md).
   The base action rules above are already identical to the Online article's; these are its two remaining rules, cloned with only the
   slug changed: the decorative separator's colour, and on phones (below 640px) the separator hidden with a 24px gap so none is
   stranded at a line end. */
.fp-article--slug-best-business-checking-accounts .fp-bb-actions__sep { color: var(--fp-color-gray-500); }
@media (max-width: 639.98px) {
    .fp-article--slug-best-business-checking-accounts .fp-bb-actions__sep { display: none; }
    .fp-article--slug-best-business-checking-accounts .fp-bb-actions { column-gap: 24px; }
}

/* v3.57.134 (C04, consolidated launch fixes) - How to Open a Business Bank Account, both ten-provider card blocks. A plan name that
   wraps (Grasshopper "Innovator Business Checking"; at 1024-1279 also Bank of America) pushed that card's score, score label and
   Visit line below its row neighbours (measured 16.9px at 1440, 1024 and 768). Cards in a row already share one height; the spare
   height now sits between the name and the score block, which is anchored to the bottom of its track, so score, label and Visit
   share one line across each row. From 1024 to 1199px the narrow text column also wraps "Visit Grasshopper" and "Visit Bank of
   America" onto two lines; there every Visit link keeps a two-line (2 x 14px) box, so a wrapped link no longer lifts its card's
   score 14px above its neighbours (the link text stays top-aligned in that box). Text, scores, destinations and the stacked phone
   layout (< 640px) are unchanged. Scoped to this article. */
@media (min-width: 1280px) {
    .fp-article--providers.fp-article--slug-how-to-open-a-business-bank-account .fp-providers .fp-providers__item { grid-template-rows: auto auto 1fr auto; }
    .fp-article--providers.fp-article--slug-how-to-open-a-business-bank-account .fp-providers .fp-providers__score { align-self: end; }
}
@media (min-width: 640px) and (max-width: 1279.98px) {
    .fp-article--providers.fp-article--slug-how-to-open-a-business-bank-account .fp-providers .fp-providers__item { grid-template-rows: auto 1fr auto; }
    .fp-article--providers.fp-article--slug-how-to-open-a-business-bank-account .fp-providers .fp-providers__score { align-self: end; }
}
/* v3.57.135 - the two-line Visit box now covers 640-1279px (was 1024-1199). At 768px on live staging "Visit Bank of America"
   wrapped (Work, 2026-10-24) and put the Bank of America / Chase row 14px out of line: from 640px the text column is ~162px
   against the link's ~160px, so wrapping depends on the browser's text rendering. Reserving the box across the whole
   multi-column range makes the score and Visit lines independent of where any link wraps. */
@media (min-width: 640px) and (max-width: 1279.98px) {
    .fp-article--providers.fp-article--slug-how-to-open-a-business-bank-account .fp-providers .fp-providers__cta { min-height: 28px; min-height: 2lh; }
}

/* v3.57.140 (owner, 2026-10-26; "Accept scoped correction"): the three "Read FinanceProspector Editorial Methodology"
   links on Mercury vs Novo, Bluevine vs Novo and Chase vs Bank of America take Core Blue #2563EB instead of the parent
   theme's off-palette #1E73BE. Default state only: hover, focus and active keep the parent theme's behaviour, and the
   underline, size, weight, wording and destination are unchanged. Not a global link colour. */
.fp-article--slug-mercury-vs-novo .fp-review__link:not(:hover):not(:focus):not(:active),
.fp-article--slug-bluevine-vs-novo .fp-review__link:not(:hover):not(:focus):not(:active),
.fp-article--slug-chase-vs-bank-of-america .fp-review__link:not(:hover):not(:focus):not(:active) {
    color: var(--fp-color-blue);
}

/* v3.57.140 r2 (owner, 2026-10-26): a FinanceProspector score number inside running text (review Quick Verdict lines, the Best Business Bank
   Accounts summary table). Colour only - size, weight and wording come from the surrounding text. */
.fp-rating-inline { color: var(--fp-color-green); }

/* v3.57.143 r2 - COMMUNITY RATINGS, HOMEPAGE TREATMENT (owner, 2026-10-28; hero.css v3.57.140 r8 is the reference).
   Provider-review "Community Reviews" tables (.fp-review__table--ratings) only: platform name, the phone "Rating:" label,
   score and denominator Medium Gray #6B7280 bold 700; filled stars #6B7280. Sizes (14 / 13px), layout, the pale empty
   star, fractional fills and role="img" labels are unchanged. The column headers (Platform / Rating) are unchanged. */
.fp-article--review .fp-review__table--ratings tbody th {
    color: var(--fp-color-gray-500);
    font-weight: 700;
}
.fp-review__table--ratings .fp-review-rating__value,
.fp-review__table--ratings .fp-review-rating__denom {
    color: var(--fp-color-gray-500);
    font-weight: 700;
}
.fp-review__table--ratings .fp-stars--navy .fp-stars__fill {
    background-color: var(--fp-color-gray-500);
}
@media (max-width: 639.98px) {
    .fp-article--review .fp-review__table--ratings tbody td::before {
        color: var(--fp-color-gray-500);
        font-weight: 700;
    }
}
/* v3.57.145 (P21, owner instruction 2026-10-28): text actions keep their 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. */
/* Provider "Visit X" in the provider modules (Best Of, Business Banking, How To, Providers index, comparisons). */
a.fp-providers__cta:hover,
a.fp-providers__cta:focus,
a.fp-providers__cta:focus-visible,
a.fp-providers__cta:active { color: var(--fp-color-blue); }
/* Provider review: hero "Visit X", image "View ..." links and the review table of contents (all Core Blue at rest; the
   Best Of articles' navy table of contents is not .fp-article--review and is untouched). */
.fp-article--review a.fp-review__cta:hover,
.fp-article--review a.fp-review__cta:focus,
.fp-article--review a.fp-review__cta:focus-visible,
.fp-article--review a.fp-review__cta:active,
.fp-article--review a.fp-review-figure__zoom:hover,
.fp-article--review a.fp-review-figure__zoom:focus,
.fp-article--review a.fp-review-figure__zoom:focus-visible,
.fp-article--review a.fp-review-figure__zoom:active,
.fp-article--review a.fp-article__toc-link:hover,
.fp-article--review a.fp-article__toc-link:focus,
.fp-article--review a.fp-article__toc-link:focus-visible,
.fp-article--review a.fp-article__toc-link:active { color: var(--fp-color-blue); }
/* Comparison "Read FinanceProspector Editorial Methodology": v3.57.140 set Core Blue at rest only; the states follow it now. */
.fp-article--slug-mercury-vs-novo a.fp-review__link:hover,
.fp-article--slug-mercury-vs-novo a.fp-review__link:focus,
.fp-article--slug-mercury-vs-novo a.fp-review__link:focus-visible,
.fp-article--slug-mercury-vs-novo a.fp-review__link:active,
.fp-article--slug-bluevine-vs-novo a.fp-review__link:hover,
.fp-article--slug-bluevine-vs-novo a.fp-review__link:focus,
.fp-article--slug-bluevine-vs-novo a.fp-review__link:focus-visible,
.fp-article--slug-bluevine-vs-novo a.fp-review__link:active,
.fp-article--slug-chase-vs-bank-of-america a.fp-review__link:hover,
.fp-article--slug-chase-vs-bank-of-america a.fp-review__link:focus,
.fp-article--slug-chase-vs-bank-of-america a.fp-review__link:focus-visible,
.fp-article--slug-chase-vs-bank-of-america a.fp-review__link:active { color: var(--fp-color-blue); }

/* v3.57.145 (P23, owner instruction 2026-10-28): the plain "Read FinanceProspector Editorial Methodology" end-note link on four
   articles took the parent theme's legacy #1E73BE at rest and #222222 when interacted with. Core Blue in every state. Matched by
   its destination inside the end note only; underline, size, weight and wording unchanged. */
.fp-article--slug-best-business-bank-accounts #editorial-note a[href$="/editorial-methodology/"],
.fp-article--slug-best-business-checking-accounts #editorial-note a[href$="/editorial-methodology/"],
.fp-article--slug-best-online-business-bank-accounts #editorial-note a[href$="/editorial-methodology/"],
.fp-article--slug-how-to-open-a-business-bank-account #editorial-note a[href$="/editorial-methodology/"] { color: var(--fp-color-blue); }
.fp-article--slug-best-business-bank-accounts #editorial-note a[href$="/editorial-methodology/"]:hover,
.fp-article--slug-best-business-bank-accounts #editorial-note a[href$="/editorial-methodology/"]:focus,
.fp-article--slug-best-business-bank-accounts #editorial-note a[href$="/editorial-methodology/"]:focus-visible,
.fp-article--slug-best-business-bank-accounts #editorial-note a[href$="/editorial-methodology/"]:active,
.fp-article--slug-best-business-checking-accounts #editorial-note a[href$="/editorial-methodology/"]:hover,
.fp-article--slug-best-business-checking-accounts #editorial-note a[href$="/editorial-methodology/"]:focus,
.fp-article--slug-best-business-checking-accounts #editorial-note a[href$="/editorial-methodology/"]:focus-visible,
.fp-article--slug-best-business-checking-accounts #editorial-note a[href$="/editorial-methodology/"]:active,
.fp-article--slug-best-online-business-bank-accounts #editorial-note a[href$="/editorial-methodology/"]:hover,
.fp-article--slug-best-online-business-bank-accounts #editorial-note a[href$="/editorial-methodology/"]:focus,
.fp-article--slug-best-online-business-bank-accounts #editorial-note a[href$="/editorial-methodology/"]:focus-visible,
.fp-article--slug-best-online-business-bank-accounts #editorial-note a[href$="/editorial-methodology/"]:active,
.fp-article--slug-how-to-open-a-business-bank-account #editorial-note a[href$="/editorial-methodology/"]:hover,
.fp-article--slug-how-to-open-a-business-bank-account #editorial-note a[href$="/editorial-methodology/"]:focus,
.fp-article--slug-how-to-open-a-business-bank-account #editorial-note a[href$="/editorial-methodology/"]:focus-visible,
.fp-article--slug-how-to-open-a-business-bank-account #editorial-note a[href$="/editorial-methodology/"]:active { color: var(--fp-color-blue); }
/* v3.57.145 (P21): comparison hero "Visit X" keeps Core Blue on hover and press (focus already did). */
a.fp-cmp-hero__visit:hover,
a.fp-cmp-hero__visit:active { color: var(--fp-color-blue); }
/* v3.57.145 r2 (N1, Work follow-up 2026-10-28): the contents links on these four comparisons are Core Blue at rest (the shared
   .fp-article__toc-link colour) and took GeneratePress's inline #222222 on focus / hover / press. Core Blue in every state, these four
   slugs only: the other comparisons' contents links are navy by their own per-slug rules and are not matched. Colour only. */
.fp-article--slug-bluevine-vs-found a.fp-article__toc-link:hover,
.fp-article--slug-bluevine-vs-found a.fp-article__toc-link:focus,
.fp-article--slug-bluevine-vs-found a.fp-article__toc-link:focus-visible,
.fp-article--slug-bluevine-vs-found a.fp-article__toc-link:active,
.fp-article--slug-bluevine-vs-grasshopper a.fp-article__toc-link:hover,
.fp-article--slug-bluevine-vs-grasshopper a.fp-article__toc-link:focus,
.fp-article--slug-bluevine-vs-grasshopper a.fp-article__toc-link:focus-visible,
.fp-article--slug-bluevine-vs-grasshopper a.fp-article__toc-link:active,
.fp-article--slug-bluevine-vs-slash a.fp-article__toc-link:hover,
.fp-article--slug-bluevine-vs-slash a.fp-article__toc-link:focus,
.fp-article--slug-bluevine-vs-slash a.fp-article__toc-link:focus-visible,
.fp-article--slug-bluevine-vs-slash a.fp-article__toc-link:active,
.fp-article--slug-slash-vs-grasshopper a.fp-article__toc-link:hover,
.fp-article--slug-slash-vs-grasshopper a.fp-article__toc-link:focus,
.fp-article--slug-slash-vs-grasshopper a.fp-article__toc-link:focus-visible,
.fp-article--slug-slash-vs-grasshopper a.fp-article__toc-link:active { color: var(--fp-color-blue); }
/* v3.57.147 (G03, Work 2026-10-29): the byline link (LinkedIn profile link, fallback name link) declared rest and :visited only, so
   GeneratePress's inline `a:hover, a:focus, a:active` #222222 won those states. Core Blue in every state, as the author-card trigger;
   the hover underline and the focus ring are unchanged. Colour only. */
a.fp-article__byline-link:hover,
a.fp-article__byline-link:focus,
a.fp-article__byline-link:focus-visible,
a.fp-article__byline-link:active { color: var(--fp-color-blue); }

/* v3.57.154 (BBA03, Work 2026-10-29) - Best Business Bank Accounts: the two inline "How to Open a Business Bank Account guide" links
   (the Switching checklist and the final FAQ answer) took the parent theme's #1E73BE at rest and #222222 when hovered, focused or
   pressed. Core Blue in every state, matched by destination inside those two containers only (the P23 end-note pattern); underline,
   focus ring, font, wording and destination unchanged. The Sources link to the same guide is already Core Blue and is not matched. */
.fp-article--slug-best-business-bank-accounts #switching-business-bank-accounts-a-practical-checklist a[href$="/how-to-open-a-business-bank-account/"],
.fp-article--slug-best-business-bank-accounts #switching-business-bank-accounts-a-practical-checklist a[href$="/how-to-open-a-business-bank-account/"]:hover,
.fp-article--slug-best-business-bank-accounts #switching-business-bank-accounts-a-practical-checklist a[href$="/how-to-open-a-business-bank-account/"]:focus,
.fp-article--slug-best-business-bank-accounts #switching-business-bank-accounts-a-practical-checklist a[href$="/how-to-open-a-business-bank-account/"]:focus-visible,
.fp-article--slug-best-business-bank-accounts #switching-business-bank-accounts-a-practical-checklist a[href$="/how-to-open-a-business-bank-account/"]:active,
.fp-article--slug-best-business-bank-accounts .fp-faq a[href$="/how-to-open-a-business-bank-account/"],
.fp-article--slug-best-business-bank-accounts .fp-faq a[href$="/how-to-open-a-business-bank-account/"]:hover,
.fp-article--slug-best-business-bank-accounts .fp-faq a[href$="/how-to-open-a-business-bank-account/"]:focus,
.fp-article--slug-best-business-bank-accounts .fp-faq a[href$="/how-to-open-a-business-bank-account/"]:focus-visible,
.fp-article--slug-best-business-bank-accounts .fp-faq a[href$="/how-to-open-a-business-bank-account/"]:active { color: var(--fp-color-blue); }

/* v3.57.162 - these page rules now cover the three reference comparisons. v3.57.160 - MERCURY VS. NOVO REFERENCE PREVIEW (Work's brief, owner direction 2026-10-30).
   The record declares 'review', so this page takes the provider-review tables, FAQ and sources. Its On This Page keeps the comparison treatment it had: the
   resets below undo only the review contents rules on this slug. The sidebar is one element in .fp-article__main after Quick Comparison: in flow below 1280px,
   and from 1280px the main column becomes a two-track grid with the sidebar sticky in the second track across every row. It stops at the end of the article
   column, before the footer. Fonts are not reduced to fit: the text column is 648px at 1280 and wider. */
.fp-article--review:is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america) .fp-article__toc .fp-article__toc-link { display: inline; padding: 0; }
.fp-cmp-sidebar { display: grid; gap: var(--fp-space-s); margin-top: var(--fp-space-l); }
.fp-cmp-sidebar__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: var(--fp-space-s);
    background-color: var(--fp-color-white);
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-button);
    text-align: center;
    min-width: 0;
}
.fp-article__section p.fp-cmp-sidebar__name, .fp-cmp-sidebar__name { margin: 0; }
/* v3.57.161 - the provider-card CTA group: the governed 144x44 Read Review button, then Visit as the blue text link 6px beneath it, as on /providers/ and the comparison cards. */
.fp-cmp-sidebar__box a.fp-providers__cta { display: block; margin-top: -2px; white-space: normal; text-align: center; }
.fp-cmp-sidebar__box a.fp-providers__cta:focus, .fp-cmp-sidebar__box a.fp-providers__cta:focus-visible { color: var(--fp-color-blue); }
.fp-cmp-sidebar__box a.fp-providers__review:focus, .fp-cmp-sidebar__box a.fp-providers__review:focus-visible { color: var(--fp-color-white); }
/* r3: the condensed Sources carry links inside two paragraphs; these take the same link treatment as the list links on this page. */
:is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america) .fp-article__section--sources p a.fp-article__source-link { color: var(--fp-color-blue); text-decoration: none; }
:is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america) .fp-article__section--sources p a.fp-article__source-link:hover { text-decoration: underline; }
/* r2: from 1024 to 1279 the Advertiser Disclosure label overlays the right end of the breadcrumb row. On this page only, the list reserves the label's strip (the 8px
   between the two right edges + up to 148px of label + a 12px gap), so a long title wraps before the label. Fonts, sizes, content and the label are unchanged. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    body:has(:is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america)) .fp-breadcrumb__list { padding-right: 168px; }
}
@media (min-width: 640px) and (max-width: 1279.98px) {
    .fp-cmp-sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1279.98px) {
    .fp-article--review:is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america) .fp-article__toc { padding: 14px 16px; }
    .fp-article--review:is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america) .fp-article__toc .fp-article__toc-heading { margin-bottom: 10px; }
    .fp-article--review:is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america) .fp-article__toc .fp-article__toc-list { columns: auto; }
    .fp-article--review:is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america) .fp-article__toc .fp-article__toc-item + .fp-article__toc-item { margin-top: 8px; }
}
/* v3.57.162 - below 1280px the provider boxes also appear after Invoicing and before FAQs; from 1280px only the sticky sidebar remains. */
@media (min-width: 1280px) {
    .fp-cmp-sidebar.fp-cmp-sidebar--extra { display: none; }
}
@media (min-width: 1280px) {
    .fp-article--review:is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america) .fp-article__toc .fp-article__toc-heading { margin-bottom: 4px; }
    .fp-article--editorial .fp-article__layout > .fp-article__main:has(> .fp-cmp-sidebar) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 240px;
        column-gap: var(--fp-space-l);
        align-items: start;
    }
    .fp-article__main:has(> .fp-cmp-sidebar) > * { grid-column: 1; min-width: 0; }
    .fp-article__main:has(> .fp-cmp-sidebar) > .fp-article__section > :last-child { margin-bottom: 0; }
    .fp-article__main:has(> .fp-cmp-sidebar) > .fp-cmp-sidebar {
        grid-column: 2;
        grid-row: 1 / span 40;
        margin-top: 0;
        align-self: start;
    }
}
/* v3.57.161 - layout, this page only, 1280 and wider: the canvas moves to the 1500px / 32px axis the logo and breadcrumb already use, and the gaps tighten. Rail and sidebar keep
   their widths, the hero artwork keeps its size, the Advertiser Disclosure label stays on the hero's right edge. No type changes. Below 1280 nothing moves. */
@media (min-width: 1280px) {
    :is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america) .fp-article__container { max-width: 1500px; padding: 0 var(--fp-margin-desktop); }
    .fp-article--editorial:is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america) .fp-article__layout { width: auto; max-width: none; column-gap: var(--fp-space-l); }
    .fp-article--editorial .fp-article__layout > .fp-article__main:has(> .fp-cmp-sidebar) { column-gap: var(--fp-space-m); }
    :is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america) .fp-article__hero-band { grid-template-columns: minmax(0, 1fr) 385.6px; }
    body:has(:is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america)) .fp-advdisc-page--article { max-width: 1500px; }
    body:has(:is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america)) .fp-advdisc-page--article > .fp-advdisc { right: var(--fp-margin-desktop); }
}
@media (min-width: 1280px) and (min-height: 560px) {
    .fp-article__main:has(> .fp-cmp-sidebar) > .fp-cmp-sidebar { position: sticky; top: var(--fp-space-m); }
    .admin-bar .fp-article__main:has(> .fp-cmp-sidebar) > .fp-cmp-sidebar { top: calc(var(--fp-space-m) + 32px); }
}
/* v3.57.168 r2 (owner, 2026-10-31): comparison scores are Core Green. v3.57.164 - the comparison feature-score tables: existing score sizes on white. Provider reviews keep their score colour. Each measure sits on its own line. */
.fp-cmp-scores .fp-review-score__value,
.fp-cmp-scores .fp-review-score__denom {
    color: var(--fp-color-green);
}
.fp-cmp-scores__measure {
    display: block;
    margin-top: 4px;
}
/* v3.57.165 - the comparison Takes have two paragraphs; the existing fp-howto-take rules set paragraph margins to 0, so this keeps the 13px article paragraph gap between them. */
:is(.fp-article--slug-mercury-vs-novo, .fp-article--slug-bluevine-vs-novo, .fp-article--slug-chase-vs-bank-of-america) .fp-howto-take p + p {
    margin-top: 13px;
}
/* v3.57.166 - Editorial References & Sources: source titles are underlined at rest (Work's installed v3.57.165 finding: colour alone); hover moves to navy with a heavier underline; focus keeps the ring and the blue. Launch pages only. */
.fp-article--editorial:not(.fp-article--slug-bluevine-vs-found, .fp-article--slug-bluevine-vs-grasshopper, .fp-article--slug-bluevine-vs-slash, .fp-article--slug-slash-vs-grasshopper) .fp-article__section--sources .fp-article__list a.fp-article__source-link,
.fp-article--editorial:not(.fp-article--slug-bluevine-vs-found, .fp-article--slug-bluevine-vs-grasshopper, .fp-article--slug-bluevine-vs-slash, .fp-article--slug-slash-vs-grasshopper) .fp-article__section--sources .fp-article__list a.fp-article__source-link:visited { color: var(--fp-color-blue); text-decoration: underline; text-underline-offset: .15em; }
.fp-article--editorial:not(.fp-article--slug-bluevine-vs-found, .fp-article--slug-bluevine-vs-grasshopper, .fp-article--slug-bluevine-vs-slash, .fp-article--slug-slash-vs-grasshopper) .fp-article__section--sources .fp-article__list a.fp-article__source-link:hover { color: var(--fp-color-navy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.fp-article--editorial:not(.fp-article--slug-bluevine-vs-found, .fp-article--slug-bluevine-vs-grasshopper, .fp-article--slug-bluevine-vs-slash, .fp-article--slug-slash-vs-grasshopper) .fp-article__section--sources .fp-article__list a.fp-article__source-link:focus,
.fp-article--editorial:not(.fp-article--slug-bluevine-vs-found, .fp-article--slug-bluevine-vs-grasshopper, .fp-article--slug-bluevine-vs-slash, .fp-article--slug-slash-vs-grasshopper) .fp-article__section--sources .fp-article__list a.fp-article__source-link:focus-visible { color: var(--fp-color-blue); }
/* v3.57.166 - provider reviews on the comparison layout ('review_rails'): the same rules and values as the three comparison pages, on one capability class. Hero contents, tables and copy keep the review treatment. */
.fp-article--rails .fp-article__toc-link,
.fp-article--rails .fp-article__toc-link:visited { color: var(--fp-color-navy); }
.fp-article--rails .fp-article__toc-item { position: relative; }
.fp-article--rails .fp-article__toc-link::after { content: ""; position: absolute; inset: 0; }
.fp-article--review.fp-article--rails .fp-article__toc .fp-article__toc-link { display: inline; padding: 0; }
.fp-article--rails .fp-article__tail { display: none; }
@media (min-width: 640px) {
    .fp-cmp-sidebar.fp-cmp-sidebar--single { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    body:has(.fp-article--rails) .fp-breadcrumb__list { padding-right: 168px; }
}
@media (max-width: 1279.98px) {
    .fp-article--review.fp-article--rails .fp-article__toc { padding: 14px 16px; }
    .fp-article--review.fp-article--rails .fp-article__toc .fp-article__toc-heading { margin-bottom: 10px; }
    .fp-article--review.fp-article--rails .fp-article__toc .fp-article__toc-list { columns: auto; }
    .fp-article--review.fp-article--rails .fp-article__toc .fp-article__toc-item + .fp-article__toc-item { margin-top: 8px; }
}
@media (min-width: 1280px) {
    .fp-article--rails .fp-article__container { max-width: 1500px; padding: 0 var(--fp-margin-desktop); }
    .fp-article--editorial.fp-article--rails .fp-article__layout {
        display: grid;
        grid-template-columns: 225px minmax(0, 1fr);
        column-gap: var(--fp-space-l);
        align-items: start;
        width: auto;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
    .fp-article--editorial.fp-article--rails .fp-article__layout > .fp-article__aside {
        grid-column: 1;
        grid-row: 1;
        order: 0;
        width: auto;
        position: sticky;
        top: var(--fp-space-m);
        align-self: start;
        max-height: calc(100vh - 2 * var(--fp-space-m));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 3px 4px 3px 3px;
        margin: -3px -4px -3px -3px;
    }
    .admin-bar .fp-article--editorial.fp-article--rails .fp-article__layout > .fp-article__aside {
        top: calc(var(--fp-space-m) + 32px);
        max-height: calc(100vh - 2 * var(--fp-space-m) - 32px);
    }
    .fp-article--editorial.fp-article--rails .fp-article__layout > .fp-article__main { grid-column: 2; grid-row: 1; width: auto; min-width: 0; }
    .fp-article--rails .fp-article__toc {
        padding: 0 0 0 18px;
        background-color: transparent;
        border: 0;
        border-left: 3px solid var(--fp-color-green);
        border-radius: 0;
    }
    .fp-article--review.fp-article--rails .fp-article__toc .fp-article__toc-heading {
        margin: 0 0 4px;
        font-size: 17px;
        font-weight: var(--fp-weight-heading);
        letter-spacing: 0;
        text-transform: none;
        color: var(--fp-color-gray-600);
    }
    .fp-article--editorial.fp-article--rails .fp-article__toc-list { columns: auto; }
    .fp-article--editorial.fp-article--rails .fp-article__toc-item,
    .fp-article--editorial.fp-article--rails .fp-article__toc-item + .fp-article__toc-item { margin-top: 14px; padding-bottom: 0; }
    .fp-article--rails .fp-article__table-wrap,
    .fp-article--rails .fp-faq,
    .fp-article--rails .fp-glossary { width: auto; max-width: 100%; }
    .fp-article--rails .fp-article__hero-band { grid-template-columns: minmax(0, 1fr) 385.6px; }
    body:has(.fp-article--rails) .fp-advdisc-page--article { max-width: 1500px; }
    body:has(.fp-article--rails) .fp-advdisc-page--article > .fp-advdisc { right: var(--fp-margin-desktop); }
}
/* v3.57.168 - provider-review Takes use the existing fp-howto-take values (the seven other pages keep their own rules). Scoped to review_rails, so the comparison pages are untouched. */
.fp-article--rails .fp-howto-take {
    margin: 30px 0;
    padding: 6px 0 6px 22px;
    border-left: 4px solid var(--fp-color-green);
    max-width: 820px;
}
.fp-article--rails .fp-howto-take p {
    margin: 0;
}
/* v3.57.170 - review Pros and Cons: the existing component, with the article's H3 style on its two headings. */
.fp-article--review .fp-proscons__col > .fp-article__h3 {
    margin-top: 0;
}