/* FinanceProspector — Top Business Banks by Use Case * ===================================================================== * PART 1 (to the INTEGRATION marker) is * documents/usecase-frozen-v1.0/usecase.css copied BYTE-FOR-BYTE. * Frozen v1.0, sha256 bbfef08dd143e0bb0f2d6b6b8b83e7c6cfce2ec2442a08b283d6e4dc519f7cf2. * 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 — Top Business Banks by Use Case FROZEN v1.0 · 2026-09-01 · approved at 10/10 from USECASE-PROTOTYPE-v5.png THIS FILE IS THE FROZEN SOURCE. Do not edit it. A change requires a new version number and a new freeze record. Every value below is TRACED to an existing approved FinanceProspector component or to an explicit user decision. Sources are named inline. Nothing here was chosen by eye. ══════════════════════════════════════════════════════════════════════════ */ .fp-uc{margin:32px 0 0;padding:0 20px;background:#fff; font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif} /* margin-top 32px is the Business Banking page's own section rhythm, taken from .tp (top-picks.css:18). The preceding section has padding-bottom 0 and this section has padding-top 0, so nothing stacks on it: the rendered Top 4 Picks -> Use Case distance is exactly 32.00px, box edge to box edge. */ /* Section header — editors-picks.css:172-192 / top-picks.css:22-23. 28 / 32 / 36px with 8px to the subtitle. */ .fp-uc h2{margin:0 0 8px;font-size:28px;font-weight:700;line-height:1.20; letter-spacing:-0.02em;color:#173F73} .fp-uc__sub{margin:0;max-width:760px;font-size:16px;font-weight:400; line-height:1.65;color:#6B7280} /* .tp-sub, verbatim (v3.57.143: #6B7280) */ /* Card grid — FP-C-003 .fp-category-grid (explore-by-category.css:228-256). 1 column below 640, 2 from 640, 4 from 1024. Gaps are the governed gutters. Grid top margin 24px — .fp-resource-center__grid. */ .fp-uc__grid{display:grid;grid-template-columns:1fr;gap:16px; margin:24px 0 0;padding:0;list-style:none} /* Card shell — identical on .fp-pick-card and .fp-resource-card. The shadow is retained because BOTH approved cards carry it. Padding is 24px by decision. */ .fp-uc__card{display:flex;flex-direction:column;box-sizing:border-box;text-align:center; background:#fff;border:1px solid #E5E7EB;border-radius:12px; box-shadow:rgba(23,63,115,.05) 0 1px 2px 0;padding:24px} /* Best For badge. Box, type and tracking from .fp-resource-card__badge (resource-center.css:156-169). Fill and text colour are the approved decision: #D5EFD7 Pale Green (palette v1.1, already shipping at hero.css:319) on #173F73 Navy — 8.60:1, AA and AAA pass. NO BORDER. All four labels render on ONE line at 1440/1100/1099/768/390; the widest is 190.8px against a 196.75px card content width at 1099. */ .fp-uc__badge{align-self:center;margin:0 0 10px;padding:4px 10px;font-size:11px; font-weight:600;letter-spacing:.08em;line-height:1;text-transform:uppercase; background:#D5EFD7;border:0;border-radius:999px;color:#173F73} /* Provider identity — ONE centred group, not two centred children. 48px logo + 12px gap from .tp-provider-inner (top-picks.css:110-117). */ .fp-uc__id{display:flex;justify-content:center;align-items:center;column-gap:12px; margin:0 0 16px} .fp-uc__logo,.fp-uc__logo img{width:48px;height:48px;display:block} /* Provider name — the canonical primary provider-identity treatment. Matches .tp-name, .fp-providers__name and the frozen .fp-pi__link. NO responsive size or weight change at any width. */ .fp-uc__name{margin:0;font-size:16px;font-weight:600;line-height:1.3;color:#173F73} /* Supporting copy — .fp-resource-card__description (resource-center.css:311-317). The ONLY left-aligned element in the card. */ .fp-uc__desc{margin:0 0 16px;text-align:left;font-size:14px;font-weight:400; line-height:1.65;color:#6B7280} /* CTA stack — .fp-pick-card__ctas / .tp-actions-inner, 12px gap. margin-top:auto pins the stack to the card floor so a longer description never moves it: every stack in a row shares one top and bottom edge. */ .fp-uc__ctas{display:flex;flex-direction:column;align-items:center;gap:12px; margin-top:auto} /* Primary CTA — .fp-cta--primary / .tp-btn, identical treatments. 144x44. */ .fp-uc__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} .fp-uc__btn:hover{background-color:#1D4ED8;border-color:#1D4ED8} .fp-uc__btn:active{background-color:#1E40AF;border-color:#1E40AF} .fp-uc__btn:focus-visible{outline:2px solid #2563EB;outline-offset:2px;border-radius:10px} /* Secondary CTA — .fp-pick-card__visit / .tp-visit, 4px arrow gap. */ .fp-uc__visit{align-self:center;display:flex;align-items:center;justify-content:center; padding-block:4px;max-width:100%;font-size:14px;font-weight:500;line-height:1.2; color:#2563EB;text-decoration:none;text-align:center} .fp-uc__visit:hover{text-decoration:underline} .fp-uc__visit:focus-visible{outline:2px solid #2563EB;outline-offset:2px} .fp-uc__arrow{margin-left:4px} /* ── Responsive — FP-C-003 breakpoints, nothing bespoke ─────────────────── */ @media (min-width:640px){ .fp-uc__grid{grid-template-columns:repeat(2,1fr);gap:20px} } @media (min-width:768px){ .fp-uc{padding:0 24px} .fp-uc h2{font-size:32px} } @media (min-width:1024px){ .fp-uc h2{font-size:36px} .fp-uc__grid{grid-template-columns:repeat(4,1fr);gap:24px} } @media (min-width:1440px){ .fp-uc{padding:0 32px} } /* ===================================================================== * PART 2 — INTEGRATION. Not part of the frozen artifact. * ===================================================================== * * NOTHING IS REQUIRED HERE, AND THAT IS A MEASURED RESULT, NOT AN OMISSION. * * The approved v5 prototype was rendered INSIDE the live Business Banking * page with GeneratePress, base.css and every other production stylesheet * loaded, and the frozen source reproduced it PIXEL-IDENTICALLY at 1440 / * 1100 / 1099 / 768 / 390. No host rule had to be reset. * * Why this component needs no reset where Top 4 Picks did: GeneratePress's * table rules (`table,td,th{border:1px solid rgba(0,0,0,.1)}`) are what forced * Top Picks' Part 2. This section contains no table. Its