/* FinanceProspector — Top 4 Picks
 * =====================================================================
 * PART 1 (to the INTEGRATION marker) is
 * documents/top-picks-frozen-v1.0/top-picks.css copied BYTE-FOR-BYTE.
 * Frozen v1.0, sha256 85cd211af8990639a08b9ae4308b182856f7b08d4f5b1e6c07db289fc7a750b5.
 * DO NOT EDIT those rules. A change requires a new version number and a new
 * freeze record.
 *
 * PART 2 is theme integration only. It changes no frozen value.
 * ===================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   FinanceProspector · Business Banking · Top 4 Picks
   Every value below is TRACED to existing approved theme CSS. Sources named
   inline. Nothing here was chosen by eye.
   ══════════════════════════════════════════════════════════════════════════ */

.tp{margin:32px 0 0;padding:0 20px;background:var(--fp-color-white);
    font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif}
/* Section header — editors-picks.css:172-192 verbatim (28/32/36px, 8px to the
   subtitle, 24px heading-block to content). Only the accent colour differs. */
.tp h2{margin:0 0 8px;font-size:28px;font-weight:700;line-height:1.20;
  letter-spacing:-0.02em;color:#173F73}
.tp h2 .g{color:#338E39}                      /* Green Dark, palette v1.1 */
.tp-sub{margin:0;max-width:760px;font-size:16px;font-weight:400;line-height:1.65;
  color:#6B7280}                              /* --fp-container-reading, gray-500; v3.57.143 owner-approved (was gray-600) */
.tp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── Table shell ───────────────────────────────────────────────────────────
   SOURCE: article.css:329-338 .fp-article__table-wrap
     border 1px solid var(--fp-color-gray-200) · border-radius var(--fp-radius-button)
   Radius lives on the wrapper because border-collapse defeats it on <table>.
   No tint: the governed thead fill (--fp-color-gray-50) is overridden to white
   per the section-band decision. The 1px divider under the header row is the
   table's own grid rule, kept.                                             */
.tp-wrap{border:1px solid #E5E7EB;border-radius:10px;overflow:hidden;background:#fff;margin-top:24px}
.tp-table{width:100%;table-layout:fixed;border-collapse:collapse;
  font-size:16px;line-height:1.5;color:#6B7280;
  /* ⚠ The browser/parent default table margin-bottom (24px) lands INSIDE
     .tp-wrap, which is overflow:hidden with a 1px border. The last row has
     border-bottom:0, so that margin read as extra height under Grasshopper:
     its visible band measured 108.30px against 83.30/83.80/83.80. Zeroed so
     the wrapper hugs the table. NOT a row-height override. */
  margin-bottom:0}          /* article.css:339-343 */

/* Column widths — Provider tightened, FP sized for ten stars + numeral. */
/* Five columns. Sized from measured content, not split evenly:
     FP needs  "9.4/10" 48 + 8 gap + ten 16px stars 160 = 216 + 32 padding
     G2 / TP   "4.8/5"  40 + 8 gap + five 16px stars  80 = 128 + 32 padding
     Provider  48 logo + 12 gap + longest name 92      = 152 + 32 padding
     Actions   144 CTA / "View Grasshopper" ~130       = 144 + 32 padding   */
/* Only the three fixed roles carry a width. Every community-rating column is
   declared without one, so table-layout:fixed splits the remaining 34% equally
   between however many the category renders: 2 -> 17% each (Board 44 exactly),
   1 -> 34%, 3 -> 11.33%. No per-category CSS. */
.tp-table col.c-provider{width:22%}
.tp-table col.c-fpscore {width:26%}
.tp-table col.c-cta     {width:18%}
.tp-table col.c-community{}          /* intentionally no width */

/* ── Column headers ────────────────────────────────────────────────────────
   SOURCE: article.css:344-360 .fp-article__table thead th
     font-size 17px · font-weight var(--fp-weight-heading) 700 · line-height 1.4
     color var(--fp-color-navy) · padding 8px 16px
     border-bottom 1px solid var(--fp-color-gray-200)
   Two governed declarations are deliberately overridden and reported:
     background-color gray-50 -> transparent   (no tinted band)
     text-align left / white-space nowrap -> centre + wrap  (centring decision,
     and "FinanceProspector Editorial Score" cannot sit on one line)         */
.tp-table thead th{font-size:17px;font-weight:700;line-height:1.4;color:#173F73;
  background-color:transparent;padding:8px 16px;
  /* The provider rows' own divider. article.css:344-360 declares 1px here;
     the earlier border-bottom:0 override is what left the headings floating
     above the table. No box, no vertical rules, wrapper radius untouched.
     In card mode thead is clipped to 1x1, so this cannot paint there. */
  border-bottom:1px solid #E5E7EB;
  text-align:center;white-space:normal}      /* 8px 16px — article.css:344-360 */
/* All five headings centred (rule 8). Only the Provider BODY cell stays left. */
/* NO column rules. The governed comparison table (article.css:329-370) has none
   — columns are defined by alignment and space. The vertical grid that was here
   was my own addition and is removed, not softened. */

/* ── Body cells ────────────────────────────────────────────────────────────
   SOURCE: article.css:361-366  padding 8px 16px, 1px gray-200 rule, and
   article.css:367 tbody th -> var(--fp-weight-label) 600 + var(--fp-color-navy).
   Vertical padding raised 8 -> 18 for the row density of the reference.     */
.tp-table tbody th,.tp-table tbody td{padding:8px 16px;border-bottom:1px solid #E5E7EB;
  vertical-align:middle;text-align:center;font-weight:400}   /* article.css:361-366 */
.tp-table tbody tr:last-child th,.tp-table tbody tr:last-child td{border-bottom:0}

/* Provider identity — left-aligned, fixed logo zone. */
/* FIXED TWO-TRACK IDENTITY. Track geometry is identical in every row, so the
   block can be centred without the provider name's length moving anything.
     logo track  48px  (the approved 48x48 zone, logo centred in it)
     gap         12px
     name track 100px  (longest name "Grasshopper" measures 98.05px at 16/600)
     block      160px  fixed */
.tp-provider{text-align:center}
/* ══ TOP PICKS — CATEGORY CONFIGURATION ═══════════════════════════════════
   Two governed values per category, set once on the section. Not category CSS:
   the selectors below are the component's own, and every provider row in a
   category uses the same pair.
     --tp-name-track       width of the LONGEST approved provider name in that
                           category at the governed 16px/600 provider typography
     --tp-identity-shift   (track - average provider-name width) / 2
   Business Banking: longest "Grasshopper" 98.05px -> track 100px;
                     average 62.92px -> shift (100-62.92)/2 = 18.54 -> 18px.
   Breakpoint: the default table->card transition is 1100. A category whose
   configured track cannot fit cleanly at 1100 adds .tp--cards-from-1300 (or
   -1200), declared once in this stylesheet as part of the component API.  */
.tp{--tp-name-track:100px;
    --tp-identity-shift:18px}
/* ALIGNMENT GEOMETRY AND TEXT WIDTH ARE NOW SEPARATE.
   The block is block-level and fills the Provider cell; the track value only
   positions it. padding-left reproduces exactly the old centred + shifted left
   edge — (cellContent - blockWidth)/2 + shift — so the logo axis and the
   name-start axis are unchanged in every row and at every width.
   The name column is then 1fr, so the name uses ALL the remaining cell width
   instead of being capped at the 100px track. */
.tp-provider-inner{display:grid;
  grid-template-columns:48px 1fr;column-gap:12px;
  padding-left:calc((100% - (48px + 12px + var(--tp-name-track)))/2
                    + var(--tp-identity-shift));
  align-items:center;text-align:left}
.tp-logo{justify-self:center;width:36px;height:36px;display:flex;align-items:center;
  justify-content:center}                         /* editors-picks.css:342 48px zone */
.tp-logo img{width:36px;height:36px;display:block}
.tp-name{font-size:16px;font-weight:600;color:#173F73;line-height:1.3}

/* ── Rating primitive — NUMBER then STARS, one line ────────────────────────
   SOURCE: hero.css:300-308 .fp-rating-row__score  14px / 700 / nowrap,
           padding-right var(--fp-space-xs) 8px
           hero.css:329-335 __denominator inherits size, weight and colour
           hero.css:365-370 .fp-stars 15px / letter-spacing 1px / line-height 1
           hero.css:372-373 --green = var(--fp-color-green), --navy = navy
           hero.css:379-381 .fp-star-empty opacity .22
   Stars: FP Star v1.0 (base.css), exact partial fill on the VISIBLE star width
   (fp_rating_fill_percent). Base layer + clipped fill layer, both aria-hidden. */
/* Number on line 1, stars on line 2, sharing one left edge. inline-flex keeps
   the PAIR centred in its column while its contents stay left-aligned. */
/* The numeral and the star row form ONE centred block: both centre on the
   column axis, and the numeral centres over the stars. Previously the block
   was centred but its contents were left-aligned, which put the numeral well
   left of the heading it sits under. */
.fp-rate{display:inline-flex;flex-direction:column;align-items:center;
  gap:4px}                                    /* --fp-space-xxs */
/* The VALUE carries the centring; the denominator is subordinate typography and
   is taken out of the flow so it cannot pull the value off the star-row axis.
   One rule, so desktop, tablet and mobile share the same score treatment. */
.fp-rate__num{font-size:14px;font-weight:700;white-space:nowrap;color:#173F73;
  position:relative}
.fp-rate__den{position:absolute;left:100%;top:0}
.fp-rate__den{font-size:13px;font-weight:400;color:inherit}   /* canonical */
.fp-rate--fp .fp-rate__num{color:#42B649}          /* v3.57.140 (owner, 2026-10-26): FinanceProspector score colour Core Green #42B649. Was #15803D */
/* Star row: the governed FP Star v1.0 construction in base.css (.fp-stars). */

.tp-notrated{font-size:16px;color:#6B7280}

/* ── Actions — stacked ─────────────────────────────────────────────────────
   SOURCE: base.css:258-292 .fp-cta  144x44 pinned, radius var(--fp-radius-button),
           font-size var(--fp-font-body-s) 14px, weight 600, line-height 1
           editors-picks.css:488-522 .fp-pick-card__visit  14px / 500 / 1.2,
           align-self centre, padding-block 4px, arrow gap 4px               */
.tp-actions-inner{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;
  justify-content:center;gap:6px}   /* editors-picks.css:789-799, verbatim */
.tp-btn{display:inline-flex;align-items:center;justify-content:center;
  width:144px;min-width:144px;max-width:144px;height:44px;min-height:44px;max-height:44px;
  flex:0 0 auto;box-sizing:border-box;padding:0 16px;border-radius:10px;
  border:1px solid #2563EB;background-color:#2563EB;color:#fff;
  font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;
  transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease}
.tp-btn:hover{background-color:#1D4ED8;border-color:#1D4ED8}
.tp-btn:active{background-color:#1E40AF;border-color:#1E40AF}
.tp-visit{align-self:center;display:flex;align-items:center;justify-content:center;
  padding-block:0;max-width:100%;font-size:14px;font-weight:500;line-height:1.2;
  color:#2563EB;text-decoration:none;text-align:center}   /* editors-picks.css:488-506 */
.tp-visit:hover{text-decoration:underline}
.tp-arrow{margin-left:4px}

/* ── Governed focus — base.css:206-208 tokens, base.css:341-351 CTA rule ── */
.tp-btn:focus-visible{outline:2px solid #2563EB;outline-offset:2px;border-radius:10px}
.tp-visit:focus-visible{outline:2px solid #2563EB;outline-offset:2px}
.demo-focus.tp-btn{outline:2px solid #2563EB;outline-offset:2px;border-radius:10px}
.demo-focus.tp-visit{outline:2px solid #2563EB;outline-offset:2px}

/* ══ <=1099 · SAME markup, card presentation ═══════════════════════════════
   Governed responsive-table pattern: informational-page.css:765-818          */
@media (min-width:768px){ .tp{padding:0 24px} .tp h2{font-size:32px} }
@media (min-width:1024px){ .tp h2{font-size:36px} }
@media (min-width:1440px){ .tp{padding:0 32px} }

/* Category breakpoint options — component API, not bespoke CSS.
   Each simply moves the same card rules to an earlier width. */
@media (min-width:1100px) and (max-width:1199px){
  .tp--cards-from-1200 .tp-table{--force-cards:1}
}

@media (max-width:1099px){
  .tp-wrap{border:0;border-radius:0;overflow:visible;background:transparent}
  .tp-table{display:block}
  .tp-table colgroup{display:none}
  .tp-table thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .tp-table tbody{display:grid;grid-template-columns:1fr;gap:16px}
  .tp-table tbody tr{display:block;background:#fff;border:1px solid #E5E7EB;
    border-radius:10px;padding:12px}          /* FP-C-003, editors-picks.css:350 */
  .tp-table tbody th.tp-provider{display:block;padding:0 0 16px;border:0;text-align:center}
  /* card mode is unchanged from Board 43/44: intrinsic identity, centred as a
     unit. The desktop block-level grid and its alignment padding are reset. */
  .tp-provider-inner{display:inline-grid;grid-template-columns:48px auto;
    width:auto;padding-left:0;transform:none}
  /* intrinsic name width, no reserved track, no optical shift — the visible
     group itself is what gets centred in the card */
  /* Card hierarchy: the column name on its own line, the value directly
     beneath it. Label, number and star row all share one left edge. No
     label-left / value-right pairing at any width. */
  .tp-table tbody td{display:block;padding:0 0 8px;border:0;text-align:center}   /* --fp-space-xs */
  .fp-rate{align-items:center}                 /* numeral centred over its star row */
  .tp-table tbody tr td:last-of-type{padding-bottom:0}
  .tp-table tbody td::before{content:attr(data-label);display:block;margin-bottom:4px;
    font-size:13px;line-height:1.4;letter-spacing:.01em;color:#6B7280;text-align:center}
  /* No divider above the CTA group. The approved pick card separates its
     zones with 16px of space and nothing else (editors-picks.css:297). The
     rule that was here is removed, not replaced. */
  .tp-table tbody td.tp-actions{display:block;margin:0;padding:8px 0 0;border:0}  /* 8+8 = --fp-space-s to the CTA */
  .tp-table tbody td.tp-actions::before{content:none}
  /* Governed spacing is button.bottom -> visible text = 16px (12px group gap
     + 4px link padding). A plain min-height:44px centred the text and pushed
     it 13.6px further down, which is what made Board 28's link float. The box
     grows DOWNWARD instead: text stays at +16px, the extra 19.2px of hit area
     extends into empty card space, and a negative bottom margin reclaims it so
     the card's lower padding is unchanged. */
  .tp-visit{box-sizing:border-box;min-height:44px;padding-top:4px;
    padding-bottom:23.2px;margin-bottom:-19.2px}
}
@media (min-width:600px) and (max-width:1099px){
  .tp-table tbody{grid-template-columns:1fr 1fr}
}

/* ══ CATEGORY BREAKPOINT — component API, not category CSS ══════════════════
   Default: table at >=1100, cards at <=1099.
   A category whose approved provider-name set cannot stay within two lines all
   the way down to 1100 carries .tp--cards-from-1320 on the section, which moves
   the SAME card rules up to 1319. The threshold is established during category
   QA from the real provider-name set; it is never chosen arbitrarily. */
@media (min-width:1100px) and (max-width:1319px){
  .tp--cards-from-1320 .tp-wrap{border:0;border-radius:0;overflow:visible;background:transparent}
  .tp--cards-from-1320 .tp-table{display:block}
  .tp--cards-from-1320 .tp-table colgroup{display:none}
  .tp--cards-from-1320 .tp-table thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .tp--cards-from-1320 .tp-table tbody{display:grid;grid-template-columns:1fr;gap:16px}
  .tp--cards-from-1320 .tp-table tbody tr{display:block;background:#fff;border:1px solid #E5E7EB;
    border-radius:10px;padding:12px}
  .tp--cards-from-1320 .tp-table tbody th.tp-provider{display:block;padding:0 0 16px;border:0;text-align:center}
  .tp--cards-from-1320 .tp-provider-inner{display:inline-grid;grid-template-columns:48px auto;
    width:auto;padding-left:0;transform:none}
  .tp--cards-from-1320 .tp-table tbody td{display:block;padding:0 0 8px;border:0;text-align:center}
  .tp--cards-from-1320 .fp-rate{align-items:center}
  .tp--cards-from-1320 .tp-table tbody tr td:last-of-type{padding-bottom:0}
  .tp--cards-from-1320 .tp-table tbody td::before{content:attr(data-label);display:block;margin-bottom:4px;
    font-size:13px;line-height:1.4;letter-spacing:.01em;color:#6B7280;text-align:center}
  .tp--cards-from-1320 .tp-table tbody td.tp-actions{display:block;margin:0;padding:8px 0 0;border:0}
  .tp--cards-from-1320 .tp-table tbody td.tp-actions::before{content:none}
  .tp--cards-from-1320 .tp-visit{box-sizing:border-box;min-height:44px;padding-top:4px;
    padding-bottom:23.2px;margin-bottom:-19.2px}
}
@media (min-width:600px) and (max-width:1319px){
  .tp--cards-from-1320 .tp-table tbody{grid-template-columns:1fr 1fr}
}




@media (max-width:639px){
  .tp-table tbody tr{padding:10px}            /* FP-C-003, editors-picks.css:354 */
}

/* =====================================================================
 * PART 2 — INTEGRATION. Not part of the frozen artifact.
 * ===================================================================== */

/* ── Top Picks x GeneratePress border reset ──────────────
 * GeneratePress main.min.css v3.6.1 ships:
 *     table,td,th { border:1px solid rgba(0,0,0,.1) }
 *     table       { border-width:1px 0 0 1px }
 * Part 1 sets border-bottom on tbody cells and never resets the other three
 * edges, because the component was reviewed standalone where GeneratePress was
 * not loaded. In page context that painted vertical column rules - which the
 * freeze record section 6 forbids - and the extra collapsed edge consumed
 * 1.0px of table width, measured as a uniform -0.2px on all five columns
 * against Board 46.
 *
 * ONLY the three edges GeneratePress adds are zeroed. border-bottom is left
 * alone, so Part 1's 1px #E5E7EB row separators and its
 * "no separator after the last row" rule are untouched. Scoped to .tp, so no
 * other table on the site changes.
 *
 * Verified: with this rule the 1440 columns render 302.3 / 357.2 / 233.6 /
 * 233.6 / 247.3, total 1374.0 - Board 46 exactly. */
.tp .tp-table,
.tp .tp-table thead th,
.tp .tp-table tbody th,
.tp .tp-table tbody td {
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
}


/* ── Inline rating groups — DESKTOP TABLE ONLY ─────────────────────────────
   The shared .fp-rate construction above is deliberately NOT edited: these
   rules are scoped to .tp-table so nothing else that ever renders .fp-rate is
   affected, and card mode restores the canonical behaviour below.

   Score and stars sit on one horizontal axis instead of stacking. Typography,
   star size, colours, values and precision are untouched - only the axis.
   8px gap = --fp-space-xs.

   ⚠ THE DENOMINATOR MUST OCCUPY ITS REAL WIDTH. .fp-rate__den is a CHILD of
   .fp-rate__num and was position:absolute at left:100%, so it painted 18.19px
   that the flex layout did not account for: the stars began 10.19px INSIDE the
   "/10" and the zero sat under the first star. Returning it to normal flow
   makes the numeral's own box include it, so the 8px gap starts after "/10".
   Measured +8.00px on all eleven rating groups, /10 and /5 alike - which a
   fixed padding could never achieve, since the two widths differ. */
.tp-table .fp-rate{flex-direction:row;align-items:center;gap:8px}
.tp-table .fp-rate__den{position:static}

/* Card mode keeps the STACKED rating and the canonical absolute denominator:
   below 1100 each cell is a narrow card row carrying a data-label prefix,
   where an inline pair crowds. Restored explicitly, not left to inheritance. */
@media (max-width:1099px){
  .tp-table .fp-rate{flex-direction:column;gap:4px}
  .tp-table .fp-rate__den{position:absolute}
}

/* v3.57.115 - a feature-score average in the score column: the numeral keeps the score typography; its "Average of N
   Feature Scores" label sits beneath in the table's caption type. No stars - it is not an overall rating. */
.tp .tp-avg{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px}
.tp .tp-avg__label{font-size:13px;font-weight:400;line-height:1.3;color:#6B7280}

/* v3.57.143 r2 - COMMUNITY RATINGS, HOMEPAGE TREATMENT (owner, 2026-10-28; hero.css v3.57.140 r8 is the reference).
   Community column only (th.tp-th-community / td.tp-community, added in top-picks.php): platform name, card label, score,
   denominator and Not Rated Medium Gray #6B7280 bold 700; filled stars #6B7280. Sizes, layout, the pale empty star,
   fractional fills and role="img" labels are unchanged. The FinanceProspector column (.fp-rate--fp) is not matched. */
.tp-table thead th.tp-th-community{color:#6B7280}
.tp-table td.tp-community .fp-rate__num{color:#6B7280}
.tp-table td.tp-community .fp-rate__den{font-weight:700}                       /* colour inherits the numeral */
.tp-table td.tp-community .fp-stars--navy .fp-stars__fill{background-color:#6B7280}
.tp-table td.tp-community .tp-notrated{font-weight:700}                        /* already #6B7280 */
.tp-table tbody td.tp-community::before{color:#6B7280;font-weight:700}         /* card-layout label; content stays off on desktop */

/* v3.57.144 r2 (P19, owner-approved scope): Top 4 Picks "Read Review" keeps white text in every state. .tp-btn:hover and
   :active set the background only, so GeneratePress's inline `a:hover, a:focus, a:active { color: var(--contrast) }`
   (#222222) won in all three. Links only (a.tp-btn); colour only - backgrounds, border, the 2px ring and size unchanged. */
.tp a.tp-btn:focus,.tp a.tp-btn:focus-visible,.tp a.tp-btn:hover,.tp a.tp-btn:active{color:#fff}
/* v3.57.145 (P21, owner instruction 2026-10-28): Top 4 Picks "View X" keeps Core Blue in every interactive state. GeneratePress's inline `a:hover, a:focus, a:active { color: var(--contrast) }`
   (#222222, (0,1,1), loaded after this file) won these states. Colour only - size, weight, underline, focus ring and destination unchanged. */
.tp a.tp-visit:hover,.tp a.tp-visit:focus,.tp a.tp-visit:focus-visible,.tp a.tp-visit:active{color:#2563EB}