/* * FinanceProspector — Editor's Picks by Category * Component: FP-C-004 — Editor's Picks by Category * Build: Business / Personal finance grouping (theme v3.11.7) * Component version is recorded in docs/component-manifest.md * and the FinanceProspector Bible, not here. * Spec: Design System Manual v2.2.2 + approved amendments * Status: Pending Bible revision. The v2.0 §30.5 arrangements * (7-across, 4+3, 3+3+1 and the §27.1 tablet card-7 * orphan rule) are SUPERSEDED by the grouped taxonomy. * ──────────────────────────────────────────────────────────── * * FINANCE GROUPS (mirrors FP-C-003 Explore by Category): * Business Finance — Business Banking, Corporate Cards & Spend * Management, Business Insurance, Payments, Business Lending * Personal Finance — Crypto & Digital Assets, * Investing & Wealth Management * The groups STACK at every breakpoint. * * RESPONSIVE SYSTEM (mobile-first, matching theme convention): * GRID (identical to FP-C-003 .fp-category-grid): * Mobile (<640px): 1 column, 16px gutter * Tablet (≥640px): 2 columns, 20px gutter * Standard Desktop(≥1024px): 2 columns, 24px gutter * Large Desktop (≥1440px): 7 columns, 24px gutter — all seven cards * on one row, Business over cards 1-5 and * Personal over cards 6-7 * * SHARED ZONE FLOORS (category / logo / provider / score / CTA): * Mobile + Tablet 24 / 48 / 24 / 40 / 104px * Standard + Large Desktop 24 / 48 / 24 / 40 / 48px * * Floors are MINIMUMS, not fixed heights. Content may grow a * track; because tracks are shared via subgrid, it grows for * every card in that row and cannot cause per-card drift. * * CSS SUBGRID: * Mandatory (v2.0 §22.1). Each card spans five parent row * tracks and inherits them via grid-template-rows: subgrid. * This is what guarantees the score and CTA rows sit at * identical positions across a row. * The parent row count is 5 × (number of card rows), set PER GROUP * since the two groups hold different card counts: * Business 25 (mobile) / 15 (tablet + std desktop) / 5 (large) * Personal 10 (mobile) / 5 (tablet + std desktop) / 5 (large) * Tracks are shared within a group, never across groups — the two * groups are always separate rows, so no cross-group drift exists. * * CONTAINER (adopted from FP-C-003 Explore by Category — one shared * horizontal grid language across the homepage): * max-width 1500px, centred * gutters 20px mobile / 24px from 640px / 32px from 1440px * SUPERSEDES the previous 1200px and 1392px component containers and the * card widths that derived from them. * * CARD GAPS: * Mobile: 16px BETWEEN CARDS only; internal zone gaps stay 24px * (v2.0 §30.2). These are separate because a subgrid * uses its own gap, not the parent's. * Tablet and above: 24px. * * TABLET FINAL ROW: * For the current SEVEN-card set, card 7 occupies column 2 of * the final row (v2.0 §27.1). This is visual grid placement * only — DOM, keyboard and screen-reader order are unchanged. * This is NOT a generic "centre the last row" rule. If the card * count changes, this placement must be reevaluated. * * TOUCH TARGETS: * 48px minimum CTA height at Tablet and Mobile (v2.0 §27.3, * §30.3). This is why the Tablet/Mobile CTA floor is 104px * (two 48px targets + the 8px gap) rather than the 80px used * on desktop. * * LOGO ZONE vs PLACEHOLDER: * The zone is 48px high across the FULL interior card width. * The 48×48 square is the temporary placeholder asset only. * Real provider logos may use the full width at their own * aspect ratio (v2.0 §24.4). No fixed logo width is set. * * SECTION PADDING: * Mirrors FP-C-003 Explore by Category so the homepage vertical * rhythm is continuous. See the integration note in the build log. * * PLACEMENT (generate_after_header): * Hook: generate_after_header * Priority: 30 (Hero p10 → Explore p20 → Editor's Picks p30) * Scope: is_front_page() only * * DO NOT MODIFY: * Header, Hero, Explore by Category, Resource Center, Trust * Section, Footer, or any global styling. * ──────────────────────────────────────────────────────────── */ /* ── Section shell ─────────────────────────────────────── */ .fp-editors-picks { display: block; width: 100%; box-sizing: border-box; background-color: var(--fp-color-white); /* ⚠ THE GOVERNED MAJOR-SECTION GAP (v3.54.2). The rendered distance to the adjacent section is this padding-bottom PLUS the next section's padding-top, and both halves live inside a white section box — which is why this stays a padding and did NOT become a margin. The homepage's page ground is #F7F8F9, not white; expressing the gap as a margin paints a grey band in every seam. Business Banking can use margins because its container is white. Same number, different mechanism, identical pixels. padding-top is a flat 32px at every width, so the arithmetic is simply --fp-section-gap - 32: 80 - 32 = 48 from 640 up, 64 - 32 = 32 below it. The former homepage values were 48 / 64 / 96; Business Banking is now the canonical reference and these match it exactly. ⚠ Do not re-add a breakpoint override — the token already carries the breakpoint. */ padding-top: var(--fp-space-l); padding-bottom: calc(var(--fp-section-gap) - var(--fp-space-l)); } /* ── Inner container ───────────────────────────────────── */ /* * ALIGNMENT MODEL — two independent containers * ──────────────────────────────────────────── * The heading block and the card grid are deliberately decoupled. * * __header : uses the GLOBAL homepage margin system (20 / 24 / 32px) * and the 1500px section container, identical to FP-C-003 * Explore by Category. This makes the section heading sit on * the same vertical line as every neighbouring homepage * section heading. * * __grid : keeps the FROZEN v2.0 component containers — 1392px at * Large Desktop, 1200px at Standard Desktop, fluid below, * with 24px outer gutters at every range. * * The card grid is NOT resized to match Explore's outer edges. Card * widths, column counts, gaps and zone floors are untouched. */ /* * Container adopts the FP-C-003 Explore by Category model verbatim so both * sections share one horizontal grid language: 1500px max-width with the * global margin tokens (20 / 24 / 32px). This supersedes the previous * 1200px / 1392px component containers and the frozen card widths that * derived from them. */ .fp-editors-picks__container { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 var(--fp-margin-mobile); /* 20px */ box-sizing: border-box; } @media (min-width: 640px) { .fp-editors-picks__container { padding: 0 var(--fp-margin-tablet); } /* 24px */ } @media (min-width: 1440px) { .fp-editors-picks__container { padding: 0 var(--fp-margin-desktop); } /* 32px */ } /* ── Section header ────────────────────────────────────── */ .fp-editors-picks__heading { /* 8px heading -> subheading, matching the FP-C-003 Explore reference. The 16px previously sat on the subtitle's margin-top; moving it here and reducing it to 8px makes all three section headers share one internal rhythm. Typography is unchanged. */ margin: 0 0 var(--fp-space-xs); /* 8px */ font-size: 28px; /* Mobile Heading L */ font-weight: var(--fp-weight-heading); line-height: var(--fp-line-heading); letter-spacing: var(--fp-tracking-heading); color: var(--fp-color-navy); } .fp-editors-picks__subtitle { margin: 0; /* gap now on the heading */ max-width: var(--fp-container-reading); font-size: var(--fp-font-body-m); font-weight: var(--fp-weight-body); line-height: var(--fp-line-body); color: var(--fp-color-gray-500); /* v3.57.142 - owner-approved homepage colour (2026-10-27) */ } /* ── Finance groups ───────────────────────────────────── * Mirrors FP-C-003 Explore by Category so the homepage taxonomy is * consistent: Business Finance (5 picks) then Personal Finance (2 picks), * each introduced by an uppercase label and a hairline rule. * * Mobile / Tablet / Standard Desktop: groups stack vertically. * Large Desktop (>=1440px): the two groups sit side by side in a shared * 7-column track set, so all seven cards keep identical widths and the * section still reads as one row of seven. */ .fp-editors-picks__groups { margin-top: var(--fp-space-m); /* Heading → Content 24px */ display: flex; flex-direction: column; gap: var(--fp-space-l); /* 32px between groups */ } @media (min-width: 640px) { .fp-editors-picks__groups { gap: 40px; } } /* Group label — identical treatment to FP-C-003. */ .fp-editors-picks__group-label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .fp-editors-picks__group-label-text { margin: 0; font-size: 11px; font-weight: var(--fp-weight-label); /* 600 */ letter-spacing: 0.08em; text-transform: uppercase; color: var(--fp-color-navy); white-space: nowrap; line-height: 1; } .fp-editors-picks__group-label-rule { display: block; /* Copied verbatim from FP-C-003 .fp-category-group-label__rule so the two sections' dividers render identically. */ flex: 1; /* Fills remaining group width naturally */ margin-right: 20px; /* Trailing breathing room */ height: 1px; background-color: var(--fp-color-navy); opacity: 0.18; } /* ── Card grid (subgrid carrier) ───────────────────────── */ .fp-editors-picks__grid { display: grid; box-sizing: border-box; margin: 0; padding: 0; list-style: none; /* Mobile: one column, 16px gutter — matches FP-C-003 .fp-category-grid. Row tracks are set per group below, since the two groups hold different card counts (5 and 2). */ grid-template-columns: 1fr; grid-auto-rows: auto; /* Card-to-card gap ONLY. Internal zone spacing is set on .fp-pick-card below and is unaffected by this value. */ gap: var(--fp-gutter-mobile); /* 16px */ } /* * Shared zone row tracks. Each card spans five, so the parent needs * 5 x (number of card rows in that group). * Mobile 1-col : business 5 rows = 25, personal 2 rows = 10 * >=640px 2-col: business 3 rows = 15, personal 1 row = 5 * >=1440px : both groups are a single row = 5 */ .fp-editors-picks__group--business .fp-editors-picks__grid { grid-template-rows: repeat(25, auto); } .fp-editors-picks__group--personal .fp-editors-picks__grid { grid-template-rows: repeat(10, auto); } @media (min-width: 640px) { /* 2-col: business 3 rows, personal 1 */ .fp-editors-picks__group--business .fp-editors-picks__grid { grid-template-rows: repeat(15, auto); } .fp-editors-picks__group--personal .fp-editors-picks__grid { grid-template-rows: repeat(5, auto); } } @media (min-width: 1440px) { .fp-editors-picks__group--business .fp-editors-picks__grid, .fp-editors-picks__group--personal .fp-editors-picks__grid { grid-template-rows: repeat(5, auto); } } /* ── Pick card ─────────────────────────────────────────── */ .fp-pick-card { /* Spans all five shared zone tracks and inherits them, which is what guarantees cross-card alignment within a row. */ grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: var(--fp-space-s); /* internal zones: 16px (v2.2.2 33.1) */ min-width: 0; /* keeps columns at 1fr */ box-sizing: border-box; /* Padding adopted from FP-C-003 .fp-category-card verbatim: 16px at Large Desktop, 12px from 640-1439px, 10px below 640px. Matching the OUTER card width was not enough — Explore used 16px and Editor's Picks 24px, so the usable content width was 142px vs 126px at 1440px and the same category label wrapped onto a third line. */ padding: var(--fp-space-s); /* 16px all sides */ background-color: var(--fp-color-white); border: 1px solid var(--fp-color-gray-200); border-radius: var(--fp-radius-card); box-shadow: var(--fp-shadow-card-level-1); text-align: center; } .fp-pick-card__category, .fp-pick-card__logo-wrap, .fp-pick-card__provider, .fp-pick-card__score, .fp-pick-card__ctas { display: flex; flex-direction: column; align-items: center; justify-content: center; } /* * CATEGORY LABEL — TOP ALIGNED (v2.2.2 33.2). * The category track is shared across every card in a row and is sized to the * tallest label in that row. Centring a short label such as "Payments" inside * a track sized for "Corporate Cards & Spend Management" pushed its first line * downward, so first lines sat at different heights across the row. * flex-start pins every label to the top of its track: all first lines share * one starting level and longer labels extend downward instead of displacing * shorter ones. Card top padding is uniform, so the offset is identical. * The other zones stay centred — each is sized to its own content. */ .fp-pick-card__category { justify-content: flex-start; } /* Shared zone floors — Mobile */ .fp-pick-card__category { min-height: 24px; } .fp-pick-card__logo-wrap { min-height: 48px; } /* production logo zone */ .fp-pick-card__provider { min-height: 24px; } .fp-pick-card__score { min-height: 40px; } .fp-pick-card__ctas { min-height: 82px; } /* 44px box + 12px gap + 25px link */ /* ── Coming Soon card (v3.53.0, Package 1) ───────────────── * Scoped to .fp-pick-card--coming-soon ONLY. Nothing above changes, and the * live card is not touched: the card KEEPS `grid-row: span 5` and KEEPS * `grid-template-rows: subgrid`, so it still contributes to — and aligns * with — the five shared zone tracks. * * The defect was placement, not the track system. A Coming Soon card has no * logo, provider, score or CTA, so its two paragraphs auto-placed into tracks * 1-3: the note landed in the PROVIDER track and, at its ungoverned 17px, * inflated that shared track from 24px to 127px — stretching the live card — * while tracks 4-5 stayed empty and dumped ~218px of dead space below the text. * * The two lines are wrapped in .fp-pick-card__status-block, which spans tracks * 2-5 and centres them as one unit. The zone boundaries are not symmetric * (logo+provider = 72px against score+CTAs = 144px at 1440px), so aligning the * two paragraphs to a track edge left the block sitting high with a hole * beneath it; centring the pair inside the whole span is what balances it. The * category keeps track 1 and stays top-aligned, as v2.2.2 33.2 requires. * No filler, no placeholder content, no new tokens. */ .fp-pick-card--coming-soon .fp-pick-card__status-block { /* Spans the four zone tracks this card leaves unused and centres its two lines inside them, so the slack divides evenly above and below rather than collecting at the bottom. It cannot inflate a shared track: its content is far shorter than the logo/provider/score/CTA zones the live card sizes. */ grid-row: 2 / 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fp-space-xs); /* 8px */ } .fp-pick-card--coming-soon .fp-pick-card__status { margin: 0; /* .fp-pick-card__category's 14px / 600 / 1.20, in gray rather than navy so the status does not read as a second heading. */ font-size: 14px; font-weight: var(--fp-weight-label); /* 600 */ line-height: var(--fp-line-heading); /* 1.20 */ color: var(--fp-color-gray-600); /* v3.57.142 - owner-approved homepage colour (2026-10-27) */ } .fp-pick-card--coming-soon .fp-pick-card__status-note { margin: 0; /* .fp-pick-card__score-label's 13px / 400 / 1.5 / gray-500 verbatim. */ font-size: var(--fp-font-caption); /* 13px */ font-weight: var(--fp-weight-body); line-height: 1.5; color: var(--fp-color-gray-500); } /* Card padding — FP-C-003 responsive values. */ @media (min-width: 640px) and (max-width: 1439px) { .fp-pick-card { padding: 12px; } } @media (max-width: 639px) { .fp-pick-card { padding: 10px; } } /* ── Category label ────────────────────────────────────── */ .fp-pick-card__category { margin: 0; /* Matches FP-C-003 .fp-category-card__title: 14px / 600 / 1.20. Category colour is unchanged. */ font-size: 14px; font-weight: var(--fp-weight-label); /* 600 */ line-height: var(--fp-line-heading); /* 1.20 */ /* Neutral heading treatment matching FP-C-003 .fp-category-card__title. The category colour system is unchanged elsewhere; only this heading text is neutralised. */ color: var(--fp-color-navy); } /* Accessible category text tokens (v2.0 §15.1). These are the AA-compliant text variants — the frozen identity colours are retained in base.css for icons and non-text accents. */ .fp-pick-card--business-banking { --fp-pick-category-color: var(--fp-category-business-banking-text); } .fp-pick-card--corporate-cards { --fp-pick-category-color: var(--fp-category-corporate-cards-text); } .fp-pick-card--business-lending { --fp-pick-category-color: var(--fp-category-business-lending-text); } .fp-pick-card--crypto { --fp-pick-category-color: var(--fp-category-crypto-text); } .fp-pick-card--payments { --fp-pick-category-color: var(--fp-category-payments-text); } .fp-pick-card--investing { --fp-pick-category-color: var(--fp-category-investing-text); } .fp-pick-card--business-insurance { --fp-pick-category-color: var(--fp-category-business-insurance-text); } /* ── Logo zone ─────────────────────────────────────────── */ /* * 48px high, full available interior card width, aspect ratio * preserved, no fixed logo width (v2.0 §24.4). * Swapping the image file is the only change required to drop * in an official provider logo. */ .fp-pick-card__logo { display: block; max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; } /* ── Provider name ─────────────────────────────────────── */ .fp-pick-card__provider { margin: 0; /* Secondary card label, not a heading. One size and one weight step below the category heading (14px/600), so the hierarchy reads category -> provider -> score -> CTAs. Navy is retained; the weight step is what separates it from the category heading, since both sit at 14px. Distinguished from the 14px/500 CTAs by colour and position. */ font-size: 14px; font-weight: var(--fp-weight-medium); /* 500 */ line-height: var(--fp-line-heading); /* 1.20 */ color: var(--fp-color-navy); } /* ── FinanceProspector Score ───────────────────────────── */ .fp-pick-card__score-label { margin: 0; font-size: var(--fp-font-caption); /* 13px */ font-weight: var(--fp-weight-body); line-height: 1.5; letter-spacing: var(--fp-tracking-caption); color: var(--fp-color-gray-500); } .fp-pick-card__score-value { /* 4px descriptor-to-value gap — documented micro-spacing token (v2.0 §20.2). */ margin: var(--fp-space-xxs) 0 0; display: flex; align-items: baseline; justify-content: center; gap: 2px; } /* X.X — 14px / 700, hero-aligned score scale (v2.0 §18.1) */ .fp-pick-card__score-number { font-size: 14px; font-weight: var(--fp-weight-heading); line-height: normal; /* FINANCEPROSPECTOR EDITORIAL SCORE — CANONICAL COLOUR RULE. The numeric overall FinanceProspector Editorial Score renders in --fp-color-score-text (#15803D, 5.02:1 on white) wherever it appears. SUPERSEDES the previous navy-score decision. Core Green #42B649 is 2.62:1 and fails AA as text, so it is never used for the score number; it remains correct for stars and qualitative labels. Do not revert this to navy. v3.57.140 (owner, 2026-10-26): SUPERSEDED - FinanceProspector score numbers are Core Green #42B649 by the owner's decision; she accepted the contrast trade-off (2.62:1 on white). Community ratings are unchanged. */ color: var(--fp-color-green); } /* /10 — 13px / 400, visually subordinate (v2.0 §18.1) */ .fp-pick-card__score-denominator { font-size: var(--fp-font-caption); font-weight: var(--fp-weight-body); color: var(--fp-color-green); /* follows the score number - v3.57.140 (owner, 2026-10-26): was --fp-color-score-text */ } /* ── CTAs ──────────────────────────────────────────────── */ /* * Compact text links, never buttons (v2.0 §11.4). * Hover: underline. Focus: visible blue outline. */ .fp-pick-card__ctas { /* 12px, not 8. The primary button and the provider link are two different kinds of action, and 8px read as one stacked control. The extra 4px separates them without touching either element's geometry or type. */ gap: 12px; } /* ── Provider action: TEXT link, not a second box ──────── * Two boxed actions per card made the pick cards read as a pair of equal * choices. They are not equal: "Read Review" is FinanceProspector's own * editorial destination and keeps the universal box; visiting the provider is * navigation away, and is a text link. * * It also lets the label name the provider. Inside the 144px box it could not: * "Visit National Business Capital" needs ~260px, so the box forced the * anonymous "Visit Site". Freed from the box the label takes its natural * width, stays on one line wherever the card allows, and wraps centred rather * than overflowing when a provider name is long. * * The 4px of block padding is not decoration — it lifts the link to a 25px * target so it still satisfies the 24px minimum once it is no longer a 44px * button. */ .fp-pick-card__visit { /* CENTRED ON THE CARD'S AXIS, like everything above it - category, logo, provider, score and the Read Review button all sit on that axis, and the provider link is the last element of the same composition. align-self is explicit rather than inherited so no breakpoint rule on the CTA group can quietly pull it back to the left edge. */ align-self: center; display: inline-flex; align-items: center; justify-content: center; padding-block: 4px; max-width: 100%; font-size: var(--fp-font-body-s); /* 14px */ font-weight: var(--fp-weight-medium); /* 500 */ line-height: 1.2; text-align: center; color: var(--fp-color-blue); text-decoration: none; } .fp-pick-card__visit:hover { text-decoration: underline; } .fp-pick-card__visit:active { color: var(--fp-color-blue-pressed); } .fp-pick-card__visit:visited{ color: var(--fp-color-blue); } .fp-pick-card__visit:focus-visible { outline: var(--fp-focus-ring-width) solid var(--fp-focus-ring-color); outline-offset: var(--fp-focus-ring-offset); } /* Shared straight arrow, same 4px gap the other text CTAs use. No diagonal and no external-link glyph: FinanceProspector text navigation uses one arrow. No whitespace before this span in the markup, so it cannot orphan. */ .fp-pick-card__visit .fp-cta-arrow { margin-left: var(--fp-cta-arrow-gap); /* 4px */ } /* * Mobile: the two 44px tap targets sit flush, with no gap between them. * Each target keeps its full 44px clickable height; closing the group gap is * what tightens the pair visually. The targets abut but never overlap, so * neither link's hit area is ambiguous. */ @media (max-width: 639px) { /* * Mobile CTA pair — compact text, full 44px tap targets. * * Each link keeps a 44px minimum clickable height, but the text is pulled * to the inner edge of its own box rather than sitting centred: the first * link pads from the top, the second from the bottom. The two 44px hit * areas therefore remain adjacent and non-overlapping while the visible * labels sit close together. * * The negative block margin reclaims the padding that this pushes to the * outer edges, so the CTA group's visual spacing to the score above and * the card edge below is unchanged. */ .fp-pick-card__ctas { /* margin-block was -10px, written to reclaim the 30px label padding of the pre-CTA text-link design. That padding was removed at v3.11.52, so the negative margin no longer compensated for anything — it just dragged the stack into the card's padding and left 1px below the last button. */ margin-block: 0; gap: var(--fp-space-xs); /* 8px between the buttons */ /* Bounded to the card's 10px padding at this breakpoint so the 44px tap areas stay inside the card border. Previously -15px, which overshot the border by 4px once the padding matched FP-C-003. */ } /* NOTE: this element is now a boxed CTA. Its display, geometry, colour and typography come from a.fp-cta (Bible ch. 54.1), whose selector is (0,1,1) and therefore outranks the (0,1,0) declarations below even though this stylesheet loads after base.css. The declarations are retained only for non-CTA fallback; do not rely on them for CTA appearance. */ .fp-pick-card__cta { box-sizing: border-box; padding-top: 30px; /* 30 + 14px text = 44px */ padding-bottom: 0; } .fp-pick-card__cta + .fp-pick-card__cta { padding-top: 0; padding-bottom: 0; /* was 30px — a leftover from the pre-CTA text-link design, where the second link's label was pulled toward the first while both kept a 44px tap area. Inside a fixed 44px boxed CTA it pushed the label up 15.5px. The selector is (0,2,0) and therefore outranks a.fp-cta at (0,1,1). */ } } /* * The link is a centred text block rather than a flex row. With the * provider-specific labels, long names such as "Visit National Business * Capital" wrap; under inline-flex the arrow became a sibling column and * floated to the right of the wrapped text. As a text block the arrow stays * attached to the final word, which is the approved arrow treatment. */ .fp-pick-card__cta { display: block; text-align: center; /* Touch target follows the FP-C-003 precedent: 44px below 640px only, released at 640px and above (see the 640px block further down). This is what closes the large vertical gap between the two links at tablet, where the previous 48px floor forced 38px of dead space. */ /* 44px minimum tap target below 640px — W3C enhanced target-size guidance (WCAG 2.2 SC 2.5.5 Target Size Enhanced), not the 24x24 AA floor. The clickable area is NOT reduced to tighten the layout; the CTA group's gap is closed instead (see the <640px block below). Released entirely at 640px and above. */ min-height: 44px; /* 14px / 500 / line-height 1 — the homepage-wide CTA standard, matching .fp-category-card__link and .fp-editorial-card__methodology a so all four homepage CTA links share one typography treatment. */ font-size: var(--fp-font-body-s); /* 14px */ font-weight: var(--fp-weight-medium); /* 500 */ line-height: 1; color: var(--fp-color-blue); text-decoration: none; /* transition removed — centralised on a.fp-cta in base.css (B2). This animated text-decoration-color, which never changes on a box CTA, so its hover colour snapped while Explore's faded. */ }/* Underline-on-hover removed: this element is now a boxed CTA. Bible ch. 54.9 — box CTAs change SURFACE on hover; only text and navigation links underline. */ .fp-pick-card__cta:focus-visible { outline: var(--fp-focus-ring-width) solid var(--fp-focus-ring-color); outline-offset: var(--fp-focus-ring-offset); /* border-radius removed — focus must not reshape the box (B3) */ } /* * Shared homepage CTA arrow treatment — see --fp-cta-arrow-gap in base.css. * The gap is a margin, never a typed space or  , and there is no * whitespace between the text and this span in the template. With no break * opportunity the arrow cannot orphan onto its own line when a long label * such as "Visit National Business Capital" wraps. */ .fp-pick-card__cta-arrow { line-height: 1; margin-left: var(--fp-cta-arrow-gap); } @media (prefers-reduced-motion: reduce) { /* reduced-motion handled centrally for a.fp-cta in base.css (B2) */ } /* ══════════════════════════════════════════════════════════ 640px and up — release the CTA touch-target floor Matches the FP-C-003 precedent, where .fp-category-card__link carries min-height:44px only below 640px. Releasing it here is what collapses the CTA pair into a compact group: the two links sit 8px apart instead of being spread by a 44px hit area each. ══════════════════════════════════════════════════════════ */ @media (min-width: 640px) { .fp-pick-card__cta { min-height: 0; } .fp-pick-card__ctas { min-height: 48px; } } /* ══════════════════════════════════════════════════════════ TABLET — 768px and up 3 + 3 + 1; card 7 in column 2 of the final row. ══════════════════════════════════════════════════════════ */ @media (min-width: 768px) { .fp-editors-picks__heading { font-size: 32px; /* Tablet Heading L */ } .fp-editors-picks__grid { grid-template-columns: repeat(2, 1fr); /* matches FP-C-003 */ gap: var(--fp-gutter-tablet); /* 20px */ } /* Zone floors inherit from base: 24 / 48 / 24 / 40 / 104. The 104px CTA floor is retained — Tablet is touch-primary. */ } /* ══════════════════════════════════════════════════════════ STANDARD DESKTOP — 1024px to 1439px 4 + 3; second row left-aligned. Not touch-primary, so the 48px CTA minimum is released and the CTA floor returns to 80px. ══════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { .fp-editors-picks__heading { font-size: var(--fp-font-h2); /* 36px Desktop Heading L */ } .fp-editors-picks__grid { /* Columns stay at 2 from the tablet rule; gap bumps to 24px — matches FP-C-003 exactly. */ gap: var(--fp-gutter-desktop); /* 24px */ } /* Not touch-primary: CTA floor drops to 48px. All other floors inherit: 24 / 48 / 24 / 40 / 48. */ .fp-pick-card__ctas { min-height: 48px; } /* Category heading, provider name and CTAs all use their matched reference sizes at every breakpoint — no desktop size bump. */ .fp-pick-card__cta { min-height: 0; } } /* ══════════════════════════════════════════════════════════ LARGE DESKTOP — 1440px and up Seven cards across in a single row, 1392px container. ══════════════════════════════════════════════════════════ */ @media (min-width: 1440px) { /* * LARGE DESKTOP — all seven cards on ONE horizontal row, with the two * taxonomy labels above: Business Finance over cards 1-5, Personal * Finance over cards 6-7. * * The group wrappers and their