/* ═══════════════════════════════════════════════════════════ CATEGORY FAQ + GLOSSARY — section shell ═══════════════════════════════════════════════════════════ Category-page shell for the two paired disclosure sections. This file carries NO component rule: the accordion, the disclosure, the chevron, the term list and every colour inside them come from the FROZEN assets/css/components/article.css, which the category route enqueues. Only the things a CATEGORY page owns are stated here - section rhythm, content axis, heading, and the width of the two bordered surfaces. Every selector is scoped to .fp-cat-faq or .fp-cat-gloss, so nothing in this file can reach the frozen articles, Top 4 Picks, Use Case, Popular Comparisons or Guides & Resources. ═══════════════════════════════════════════════════════════ */ /* ── Section rhythm ────────────────────────────────────────── The FROZEN v3.40.61 category rule: each section owns its own margin-top and contributes no bottom spacing, so a transition is never the sum of two margins. padding-top is stated at 0 for the same reason. */ .fp-cat-faq, .fp-cat-gloss { /* ⚠ ONE GOVERNED VALUE (v3.54.2). Was a 64px literal here and an 80px literal in a >=640 block. Both are now --fp-section-gap, which carries exactly those numbers and is shared with the homepage. Same rendered geometry; one place to change it. See base.css. */ margin-top: var(--fp-section-gap); padding-top: 0; background: #fff; } /* ── Content axis ──────────────────────────────────────────── The same margin tokens the Guides grid and Popular Comparisons use, so the headings share one left edge with every other section on the page. */ .fp-cat-sec { width: 100%; padding: 0 var(--fp-margin-mobile); box-sizing: border-box; } @media (min-width: 768px) { .fp-cat-sec { padding: 0 var(--fp-margin-tablet); } } @media (min-width: 1440px) { .fp-cat-sec { padding: 0 var(--fp-margin-desktop); } } /* ── Heading ───────────────────────────────────────────────── Category-page section-heading governance, frozen at v3.40.65: navy context phrase, Green Dark purpose phrase. The span carries COLOUR ONLY. ⚠ 16px, NOT THE 24px THE OTHER SECTIONS USE — and that is the rule, not an exception to it. Every other category section places a 15-17px SUBTITLE 8px under its H2, so its governed 24px is measured from small type. These two sections have no subtitle, so 24px sat directly beneath 36px display type and read loose against the rest of the page. Frozen v3.40.67: H2 + subtitle -> 24px from the SUBTITLE to the component H2, no subtitle -> 16px from the H2 to the component The subtitle-bearing sections are NOT touched; .fp-cat-h2 is used only by .fp-cat-faq and .fp-cat-gloss, so this reaches nothing else. */ .fp-cat-h2 { margin: 0 0 16px; font-size: 28px; font-weight: 700; line-height: 1.20; letter-spacing: -0.02em; color: #173F73; } @media (min-width: 768px) { .fp-cat-h2 { font-size: 32px; } } @media (min-width: 1024px) { .fp-cat-h2 { font-size: 36px; } } .fp-cat-h2 .g { color: #338E39; } /* ── Paired component width ────────────────────────────────── ⚠ THE CATEGORY PAGE OWNS THIS WIDTH. article.css pins .fp-faq to 1140px at 1280 and above to fit the ARTICLE grid (820 main + 40 gap + 280 rail). The category page has a 1376px content axis, so inheriting that number would mean a category component silently governed by an article-layout rule, and it would leave the Glossary - which article.css does not pin - 236px wider than the FAQ. Both surfaces are therefore stated here, together, at the approved paired width. The H2s above them stay on the full 1376px axis; only the bordered surfaces are constrained, which is what makes the two sections read as one component family. Cancelled below 1280 exactly as article.css cancels .fp-faq, so tablet and mobile keep the normal responsive full-width treatment and no desktop constraint is carried down. */ @media (min-width: 1280px) { .fp-cat-faq .fp-faq, .fp-cat-gloss .fp-glossary { width: 1140px; max-width: 1140px; } } /* ── Last category section → footer ────────────────────────── ⚠ THIS REPLACES THE WRAPPER'S OWN PADDING, IT DOES NOT ADD TO IT. The category page must have exactly ONE contributor to this boundary. site-footer.css gives .fp-footer-outer padding-top: var(--fp-space-l) - 32px at >=640, 24px below - and its comment states that value is a SUPPLEMENT to the last section's own bottom space: on the homepage Why Trust contributes 64, making 96. Category sections carry NO bottom space at all under the FROZEN v3.40.61 rhythm rule (a section owns only its margin-top), so the category page received the 32 alone and ended 48px tighter than every other boundary on it. That shortfall predates the FAQ and Glossary - the same 32 sat under Guides & Resources. Setting the wrapper's own padding to the governed rhythm keeps the single contributor. Adding a margin-bottom to .fp-cat-gloss instead would reach 80 as 48 + 32, which is the stacking this rule exists to prevent, and would silently break if the wrapper padding ever moved. CATEGORY-TEMPLATE GOVERNANCE, not a Business Banking exception: the remaining categories inherit it when they are built. site-footer.css is NOT modified, so the homepage keeps its 32 + 64 = 96 unchanged. */ .page-template-category-landing .fp-footer-outer { padding-top: 80px; } @media (max-width: 639.98px) { .page-template-category-landing .fp-footer-outer { padding-top: 64px; } } /* v3.57.114 (placement moved below the hero in v3.57.115) - the shared ten-provider module on Business Banking: the page's section rhythm and gutters (the .fp-uc values: 32px above; 20 / 24 / 32px side padding). The module itself is unchanged. */ .fp-cat-providers{margin:32px 0 0;padding:0 20px} @media (min-width:768px){ .fp-cat-providers{padding:0 24px} } @media (min-width:1440px){ .fp-cat-providers{padding:0 32px} } /* v3.57.116 r2 - Top Business Bank Accounts (Business Banking, below the hero): owner amendment OWNER-AMENDMENT-v3.57.116-TOP-PROVIDER-SECTION.md. The heading takes the standard category section H2 (the values Top 4 Picks and the use-case section use: 28 / 32 / 36px, 700, 1.2, -0.02em, navy, left-aligned, 8px below), sits in the section gutters above, and the module beneath has no outer frame, background or panel padding - only the ten provider cards keep their borders. Scoped to this section's classes; the shared module elsewhere is unchanged. */ .fp-cat-providers__heading{margin:0 0 8px;font-size:28px;font-weight:700;line-height:1.20;letter-spacing:-0.02em;color:#173F73} @media (min-width:768px){ .fp-cat-providers__heading{font-size:32px} } @media (min-width:1024px){ .fp-cat-providers__heading{font-size:36px} } .fp-cat-providers .fp-bb-module--category .fp-providers{margin-top:24px;border:0;border-radius:0;background-color:transparent} .fp-cat-providers .fp-bb-module--category .fp-providers .fp-providers__list{padding:0} /* v3.57.122 - Top Business Bank Accounts (BUSINESS-BANKING-CATEGORY-AMENDMENT.md): - "Top" takes the category heading green (Green Dark #338E39, as .tp h2 .g); the rest stays navy; - the approved subcopy uses the standard category section intro (.tp-sub / .fp-uc__sub: 16 / 400 / 1.65, #4B5563, max 760px); heading -> sub 8px and sub -> cards 24px, the same as the other sections; - section spacing: measured on v3.57.121, the other sections sit 79.5px (>= 640) / 63.5px (< 640) below the previous content, the --fp-section-gap rule; Top 4 Picks sat only 31.5px below this section. When Top 4 Picks follows it, it takes --fp-section-gap. Above the section the hero's own padding-bottom (48 / 32px) + this section's 32px already equals the section gap, the rule every category page uses after the hero, so it is unchanged. */ .fp-cat-providers__accent{color:#338E39} .fp-cat-providers__sub{margin:0;max-width:760px;font-size:16px;font-weight:400;line-height:1.65;color:#6B7280}/* v3.57.143 - owner-approved Medium Gray (2026-10-28) */ .fp-cat-providers + .tp{margin-top:var(--fp-section-gap)}