/* ═══════════════════════════════════════════════════════════
   FP-C-008 — CATEGORY HERO
   Shared by all seven category landing pages.
   Version: v2.0 (theme v3.19.0)

   ── v2.0 — HIERARCHY, SPACING AND CARD 3 COLOURWAY, approved 2026-08-20 ──
   The hero now has a single focal centre instead of three equal entry points:

     Card 1   blue uppercase label, 14px / 16px from 1280, centred (v3.56.3)
              -> Pale Green category icon
              (v5-1, ~120px visible circle) -> copy -> Updated line
     Card 2   green category <h2> -> artwork (48px -> dashboard artwork at
              v2.0; since v3.55.3 inside the centre card -> shell-less SVG,
              at the governed 48px)
     Card 3   blue uppercase label, 14px / 16px from 1280, centred (v3.56.3)
              -> Navy Pale disc with a Medium Navy check -> copy -> CTA

   Approved measured values at 1512px:
     card height 425.4px, all three equal   (was 483.2px)
     card padding 20 top / 20 bottom / 24 sides   (was 28/24/24/24)
     Card 1 gaps 42 / 42 / 41.6 visible; Card 3 gaps 42 / 42 / 40.5
     Card 2 heading -> artwork 8px
     Card 1 icon box 133.33px, Card 3 disc 120px, glyph 72%, both level

   Unchanged by v2.0: all body copy, the Updated line, the CTA, the artwork
   and its size, card widths, grid gaps, borders, radius and shadows.

   PROVISIONALLY FROZEN 2026-08-16 (approved):
     - 2-col / 3-col: artwork vertically centred in its grid area.
     - 1-col: shared max-width 420px on the artwork, wrapper centred,
       width:100% / height:auto preserved.
     - 3->2->1 breakpoint ladder unchanged (640 / 1024).
   Accent-bar alignment breaking below 1257px is an ACCEPTED trade-off.
   Do not revisit.

   SYSTEM-LEVEL ONLY. There is no .business-banking rule, no
   per-category offset and no artwork-specific correction in this
   file. The artwork changes by category; this system does not.

   Every value below comes from an existing token in base.css. No
   new scale is introduced.
   ═══════════════════════════════════════════════════════════ */

.fp-category-hero {
    /* White section, approved 2026-08-16. The original reason was the
       original hero SVG's opaque #FEFEFE full-canvas ground, which would have
       read as a pale rectangle on a tinted section. The current shell-less
       centre cards paint no such ground; the section simply stays white. */
    background-color: var(--fp-color-white);
    padding-top: var(--fp-space-s);          /* 16px (v3.56.8; was 32): card top
                                                19.6px below the breadcrumb baseline */
    padding-bottom: var(--fp-space-l);
}

.fp-category-hero__container {
    width: 100%;
    max-width: 1500px;                        /* matches FP-C-003/004/005 */
    margin: 0 auto;
    padding: 0 var(--fp-margin-mobile);       /* 20px */
    box-sizing: border-box;
}

/* ── Grid: 1 → 2 → 3 ─────────────────────────────────────
 * Mobile-first single column. See the tablet and desktop blocks
 * below for the 2-up and 3-up regimes. */
/* ── SHARED VERTICAL ZONES for Cards 1 and 3 ─────────────
 * Cards 1 and 3 are two instances of ONE seven-row structure, so their
 * corresponding elements land on the same lines across the hero:
 *   1 eyebrow   3 circular anchor   5 supporting copy   7 bottom action
 * (2, 4 and 6 are spacers.) Alignment is structural — it is not produced by
 * per-element margins that happen to agree at one viewport width.
 *
 * Revised 2026-08-20: the content rows are sized to content and the two cards
 * declare their OWN gutter values, because Card 1's icon box carries a
 * transparent inset that Card 3's disc does not. The row template therefore
 * lives with each card in the 1280 block rather than in shared tokens here. */
.fp-category-hero__grid {
    /* ONE token survives the 2026-08-20 spacing pass. The heading / copy /
       action zones and the two gap tokens are gone: the desktop row template
       now sizes those rows to content and collects the slack in a single 1fr
       row, so a fixed value for each would be dead weight that could silently
       disagree with what renders. See the row-track block in the 1280
       section. */
    --fp-cat-zone-circle:  120px;  /* VISIBLE circle diameter, both cards */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fp-gutter-mobile);             /* 16px */
    align-items: stretch;
}

/* ── Cards ───────────────────────────────────────────────
 * The shared card chrome for all three columns. Card 2 carries this class
 * too: on the centre-card path .fp-category-hero__card--centre strips it and
 * .fp-category-hero__card--centre-chrome restores the same border, radius,
 * shadow and white ground with padding: 0, plus the accent rule as a
 * ::before. No served artwork draws its own card.
 * (Until the shell-less derivatives, column 2's frozen SVG supplied its own
 * container, border, corners and accent bar - superseded.) */
.fp-category-hero__card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Row height is artwork-driven and exceeds these cards' natural
       content, so content distributes instead of clumping at the top
       with dead space beneath. Approved 2026-08-16. */
    justify-content: space-between;
    box-sizing: border-box;
    /* 20 top / 20 bottom / 24 left / 24 right. Approved 2026-08-20,
       superseding 28/24/24/24.

       Card 2 is the height authority. Measured on the 'dashboard' path with
       the then-48px heading (the centre-card path has padding: 0 and its own
       heading padding - see the CARD 2 CENTRE-CARD PATH block):
           T = vertical padding + 52.8 heading + 8 gap + 322.6 artwork + 2 border
       Cards 1 and 3 stretch to the same T, which fixes their gap budget at
           2 x (visible icon gap) + (bottom gap) = 117.55 + (Card 2 heading gap)
       The card padding cancels out of THAT equation, so vertical padding is the
       only lever that lowers the hero height without touching the artwork, the
       type or the icon sizes. 28/24 -> 20/20 buys 12px.

       Horizontal padding is deliberately untouched: 24px is what sets the
       eyebrow inset that aligns Cards 1 and 3. Do not change one side alone.
       The 4px accent bar overlaps the top padding; at 20px it still clears
       the eyebrow. */
    padding: 20px var(--fp-space-m);          /* 20 vertical / 24 horizontal */
    background-color: var(--fp-color-white);
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-card);     /* 12px */
    box-shadow: var(--fp-shadow-1);
    overflow: hidden;                          /* keeps the accent bar inside the radius */
}

/* Accent bar — the blue-to-green rule on Cards 1 and 3. The centre card draws
   the identical rule as .fp-category-hero__card--centre-chrome::before, so all
   three columns read as one set. (It was first introduced to mirror the
   original artwork's own accent bar; no served artwork draws one now.) */
.fp-category-hero__accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--fp-color-blue) 0%, var(--fp-color-green) 100%);
}

/* BELOW 1280 the outer cards use plain flow: every zone grows with its own
   content, so a heading that wraps to three lines simply makes the card
   taller. The fixed shared tracks are a DESKTOP-ONLY device (see the 1280
   block) - applying them here is what let headings collide with the icons at
   1024. */
.fp-category-hero__card--identity,
.fp-category-hero__card--method {
    display: flex;
    flex-direction: column;
    row-gap: var(--fp-space-m);
}

/* Card 2 holds the <h2> and the artwork. On the 'dashboard' path, with the outer
   cards taller than the square artwork requires, the slack is split above and
   below rather than left under it. The centre-card path sets display: block
   (below), so this has no effect there. */
.fp-category-hero__card--art {
    justify-content: center;
}

/* LEVEL 3 - both paragraphs start at the top of the copy zone, so their
   first lines sit on the same line regardless of what precedes them. */
.fp-category-hero__intro,
.fp-category-hero__method-body { align-self: start; }

/* LEVEL 4 - both sit on the floor of the action zone with line-height 1, so
   their baselines land within a fraction of a pixel of each other despite
   the 13px/16px size difference. */
/* Bottom action sits at the foot of the card in flow mode too. */
.fp-category-hero__updated,
.fp-category-hero__methodology { margin-top: auto; align-self: end; }

/* ── Identity card ───────────────────────────────────────── */
/* Card 1's icon and Card 3's Methodology illustration are the paired visual
   anchors of this hero. They are matched on their 120px FOOTPRINT - Card 1's
   visible circle and Card 3's 120px slot - and nothing else. Their asset
   geometry is independent: Card 1 is the frozen category icon, Card 3 the
   frozen Methodology illustration v1.0 (from v3.55.7; it replaced the
   #CCD5E0 disc and #4F6D95 check). Keep the 120px footprints equal; do not
   re-couple them through a shared size token. */
.fp-category-hero__icon {
    display: block;
    flex: 0 0 auto;
    /* business-banking-final-v5-1.svg paints its circle at 90% of the box
       (r=144 in a 320 viewBox), so a 133.33px box renders the 120px VISIBLE
       circle that pairs with the shield. One size at every breakpoint so the
       pair can never drift.
       Superseded 2026-08-20: the previous 146.3px was derived from the v4-3
       asset, whose circle was 82.03% of the box (r=420 in 1024). */
    width: 133.33px;
    height: 133.33px;
    /* place-self, not justify-self: the box is taller than the desktop circle
       zone, and a definite-height grid item defaults to START alignment, which
       left the visible circle sitting below the shield. Centring the box puts
       the two VISIBLE circles on the same line - and align-self is also what
       centres it below 1280, where the card is a flex column. */
    place-self: center;
}

/* ── HIERARCHY, approved 2026-08-20 ───────────────────────────────
   The hero has ONE display heading and it lives in Card 2. Cards 1 and 3
   carry small blue labels above their anchors, which is the Buying Guides
   pattern: a small blue label, then the visual, then the copy. (13px until
   v3.56.2; 14px, and 16px from 1280, since v3.56.3.)

   This supersedes the previous arrangement, where Card 1's H1 and Card 3's
   method title were both 36px navy. Two competing 36px headings flanking the
   artwork gave the hero three equal-weight entry points and no focal centre.

   The H1 keeps its element and its position for document structure - only its
   rendered size changes. It stays label-sized (14/16px) at every breakpoint,
   well below the 40px green title, so Card 2 keeps the focal centre.
   ───────────────────────────────────────────────────────────────── */
/* v3.56.3: the two blue card labels share ONE rule - Card 1's "Best …" and
   Card 3's "How We Evaluate …" - centred, 14 / 600 below 1280 and 16 / 600
   from 1280 (the desktop step is in the 1280 block). Blue, uppercase and the
   1.04px tracking are unchanged from the 13px eyebrow. Below 1280 the line
   box stays the v3.56.2 16.25px and the WRAP HOLD below keeps the line count,
   so the card cannot grow; from 1280 the LABEL ZONE absorbs the second line. Every category page uses this template, so future
   categories inherit it. The /providers/ column eyebrows are a separate
   component and stay 13px, left aligned. */
.fp-category-hero__headline,
.fp-category-hero__method-title {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    font-size: var(--fp-hero-label-size);     /* 14px; 16px from 1280 */
    font-weight: var(--fp-weight-label);      /* 600 */
    line-height: var(--fp-hero-label-line);   /* 16.25px; 18px from 1280 */
    letter-spacing: 1.04px;                   /* unchanged from 13px */
    text-transform: uppercase;
    color: var(--fp-color-blue);              /* #2563EB */
    text-align: center;
    text-wrap: balance;
}

/* WRAP HOLD below 1280 (v3.56.3). The 14px label is ~7% wider than the 13px
   one, and at a few card widths (360-921px) that alone cost it an extra line.
   Letting the label run 12px into each side of the card's 24px padding gives
   it back the width, so it never wraps more than the v3.56.2 label did and
   the flow-mode card cannot grow. Text stays centred, and at least 13px from
   the card border (12px padding + 1px border). From 1280 the label keeps the
   full 24px padding: the desktop LABEL ZONE handles the extra line there. */
@media (max-width: 1279.98px) {
    .fp-category-hero__headline,
    .fp-category-hero__method-title {
        margin-inline: -12px;
    }
}

/* The accent span no longer separates a colour: the eyebrow reads as one
   uppercase label, so the category name takes the eyebrow's own blue. The
   span stays in the markup because the registry composes the headline from
   prefix / accent / suffix for all seven categories. */
.fp-category-hero__headline-accent {
    color: inherit;
}

/* ── Card 2 display heading ──────────────────────────────────────
   The governed category-heading standard shared with the Resource Center
   collection headline: 48 / 700 / 52.8 / -1.44px / #15803D (raised to
   54 / 700 / 59.4 / -1.62px at v3.55.3-v3.55.4, then returned to 48 after
   actual-page QA showed 54px overpowering the heroes). These are literal values, not tokens, because they
   are a match to another component's heading rather than a step on this
   file's own scale - tokenising them would let the two drift apart silently.

   This <h2> is the ONLY title in Card 2 on both paths; the centre-card artwork
   draws none. On the centre-card path it sits inside the <article> and takes
   the extra padding-top set further down.

   The 8px bottom margin is the ONLY gap between heading and artwork, and it
   is load-bearing: it appears as the "Card 2 heading gap" term in the gap
   budget documented on .fp-category-hero__card. Changing it moves the icon
   gaps in Cards 1 and 3. */
.fp-category-hero__art-title {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0 0 8px 0;
    /* GOVERNED HERO-HEADING STANDARD (approved 2026-09-28): 40 / 700 / 44 /
       -1.20px, Dark Green via --fp-color-hero-heading. One size for all four
       governed headings - this rule and the Resource Center .fp-collection__headline
       - at every width. (48 / 52.8 / -1.44 / #15803D until v3.55.7; 54 / 59.4 at
       v3.55.3-v3.55.4.)
       v3.56.1: size, line height and tracking come from the shared hero title
       scale in base.css (--fp-hero-title-*): 40 / 44 / -1.2px, with 30px below
       480px and 36px at 1280-1359px so no title runs past two lines. */
    font-size: var(--fp-hero-title-size);
    font-weight: var(--fp-weight-heading);    /* 700 */
    line-height: var(--fp-hero-title-line);   /* 1.10 */
    letter-spacing: var(--fp-hero-title-track); /* -0.03em */
    color: var(--fp-color-hero-heading);      /* #338E39 */
    text-align: center;
    text-wrap: balance;
}

.fp-category-hero__intro {
    text-align: left;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    font-size: var(--fp-font-body-m);         /* 16px */
    font-weight: var(--fp-weight-body);
    line-height: var(--fp-line-body);         /* 1.65 */
    color: var(--fp-color-gray-500);
}

.fp-category-hero__updated {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: var(--fp-space-xs);                  /* 8px */
    margin: 0;                                /* row gap owns the separation */
    font-size: var(--fp-font-caption);        /* 13px */
    font-weight: var(--fp-weight-body);
    line-height: 1;
    color: var(--fp-color-gray-500);
}

.fp-category-hero__updated-icon {
    flex: 0 0 auto;
    color: var(--fp-color-blue);
}

/* ── Artwork column ──────────────────────────────────────
 * HISTORY - the v1.0 portrait-asset rule, no longer present: ONE sizing rule
 * for all seven assets: fill the column, keep the aspect. No max-height, no
 * fixed pixel dimensions, no negative margins, no ink normalisation. The
 * asset's natural framing (~3.9% horizontal, ~7.6% vertical) is PRESERVED.
 * The same principle now governs the served centre card - see
 * .fp-category-hero__centre-card at the end of this file. */
/* ── Card 2 structural chrome ────────────────────────────
 * 'dashboard' PATH ONLY, through the dashboard text layer below. No live
 * category declares 'dashboard' (both use the centre-card path at the end
 * of this file), so none of these rules renders on a live page today.
 *
 * PRINCIPLE: Recraft supplies illustration content; FinanceProspector CSS
 * supplies structural geometry and typography.
 *
 * The production SVG's traced tile and panel chrome is uneven - measured tile
 * widths 196.9/199.7/198.3/203.3 and gaps 24.3/23.3/20.1, with soft drop
 * shadows instead of borders. So the containers are built here instead, on an
 * exact 4-column grid, and only the illustration INSIDE each one is taken from
 * the asset. The asset itself is never modified: each piece is a CSS crop of
 * the same untouched file.
 *
 * Generic and reusable - no category-specific rule. Every category asset is
 * built on the same 1024 grid, so the same structure serves all seven.
 * ─────────────────────────────────────────────────────── */

/* The 1024-unit canvas. Square, so a percentage is the same length on both
   axes, which is what lets every child be positioned in canvas units. */
/* A QUERY CONTAINER. Every length inside Card 2 is expressed in cqw (1cqw =
   1% of this box), so the whole dashboard scales with the card at every
   breakpoint instead of being pinned in px. At the approved 1440 composition
   this box is 392.7px, where 3.3104cqw == 13px exactly - so the approved
   desktop is reproduced, not approximated. */
.fp-category-hero__art {
    position: relative;
    aspect-ratio: 1;
    container-type: inline-size;
    /* CATEGORY/COLLECTION HERO STANDARD v1.0. Every crop window, image scale
       and label inside this box is expressed as a PERCENTAGE of it, so sizing
       the box scales the whole dashboard proportionally - all six windows,
       their internal relationships, and the container-query text - with no
       change to fp_cat_window_box(), no rect edits, no PHP, no SVG geometry
       and no viewBox change.
       322.6px lands the composite at 263.9 x 226.2, inside the shared zone,
       at 27.9% of its card against the Buying Guides benchmark of 33.3%.
       Previously the composite rendered 321.4 x 275.4 = 41.4% of the card,
       which is what made the page feel out of scale next to Buying Guides. */
    width: 322.6px;
    max-width: 100%;
    margin-inline: auto;
}

/* A window onto one region of the asset. The <img> inside is the whole file,
   scaled and offset so only the wanted region shows. */
.fp-cat-crop {
    position: absolute;
    overflow: hidden;
}

.fp-cat-crop img {
    position: absolute;
    max-width: none;
    display: block;
}

/* Upper-right panel - real border on all four sides, real flow layout inside
   so the heading, values and chart get genuine internal whitespace instead of
   being absolutely positioned over a crop. */
.fp-cat-panel {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;      /* one left-aligned stack */
    /* 8px between the heading and the figures, and between the figures - a
       modest, even rhythm. The gap down to the bars stays much larger because
       the chart takes it from the leftover space (margin-top:auto). */
    gap: 2.0372cqw;               /* 8px at 1440 */
    padding: 3.0558cqw;           /* 12px at 1440 */
    background-color: var(--fp-color-white);
    border: 1px solid var(--fp-color-gray-200);
    border-radius: 3.0558cqw;     /* 12px at 1440 */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1;
}

/* Values sit UNDER the heading in the same left-aligned stack - never beside
   it and never right-aligned against the opposite edge. */
.fp-cat-panel__values {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.0372cqw;               /* 8px at 1440 - matches the gap above */
    white-space: nowrap;
}

/* The chart takes whatever height is left and is fitted inside it, so it can
   never collide with the text above. */
/* margin-top:auto pushes the chart to the lower portion, so the gap between
   the values and the bars is genuine whitespace rather than a fixed nudge. */
.fp-cat-panel__chart {
    position: relative;
    flex: 0 0 auto;
    margin-top: auto;
    margin-inline: auto;
    overflow: hidden;
}

.fp-cat-panel__chart img {
    position: absolute;
    max-width: none;
    display: block;
}

/* Lower service tiles - exact 4-column grid, identical in every dimension. */
.fp-cat-tiles {
    position: absolute;
    display: grid;
    /* minmax(0,1fr), not 1fr: a bare 1fr has a min-content floor, so the
       longest label widened its own column (measured 92.41px against 71.21px).
       This forces four genuinely identical columns and lets labels wrap. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

/* Every tile is the same component: identical icon zone, identical label zone.
   Flow layout, not absolute positioning - which is what guarantees no icon can
   be clipped by a hand-computed window. */
.fp-cat-tile {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.0558cqw;               /* 12px at 1440 */
    padding: 3.0558cqw 1.0186cqw;
    background-color: var(--fp-color-white);
    border: 1px solid var(--fp-color-gray-200);
    border-radius: 2.5465cqw;     /* 10px at 1440 */
}

/* Fixed square zone; each illustration is fitted inside it whole, so all four
   read at the same optical weight and none is cropped. */
.fp-cat-tile__icon {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
}

.fp-cat-tile__icon img {
    position: absolute;
    max-width: none;
    display: block;
}

/* Shared label zone - two lines tall for EVERY tile, so a label that wraps
   (Cash Management) uses the same zone as one that does not. */
.fp-cat-tile__label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 8.6580cqw;            /* 34px at 1440 - two lines */
    margin: 0;
    text-align: center;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 3.3104cqw;         /* 13px at 1440 */
    font-weight: var(--fp-weight-label);      /* 600 */
    line-height: 1.25;
    color: var(--fp-color-navy);
}

/* ── Card 2 dashboard text layer ─────────────────────────
 * The approved illustration's labels and values were outlined vector
 * glyphs in the source asset. They are omitted from the derivative and
 * re-rendered here as REAL text in the FinanceProspector type system, so
 * the dashboard reads in the site's own typography and is selectable and
 * machine-readable. Every value below is an existing token.
 *
 * Positions are percentages of the illustration box, generated from the
 * measured geometry of the glyph clusters they replace, so the approved
 * composition is preserved exactly. */
.fp-cat-dash {
    position: absolute;
    white-space: nowrap;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1;
    transform: translateY(-50%);
}

.fp-cat-dash--center { transform: translate(-50%, -50%); text-align: center; }
.fp-cat-dash--right  { transform: translate(-100%, -50%); text-align: right; }

/* Panel labels - secondary treatment */
.fp-cat-dash--label {
    font-size: 3.3104cqw;         /* 13px at 1440 */
    font-weight: var(--fp-weight-medium);     /* 500 */
    letter-spacing: 0.01em;
}
.fp-cat-dash--label-on-navy  { color: var(--fp-color-gray-300); }
.fp-cat-dash--label-on-white { color: var(--fp-color-navy); }

/* Primary value - strongest emphasis in Card 2 */
.fp-cat-dash--value {
    font-size: 7.1301cqw;         /* 28px at 1440 */
    font-weight: var(--fp-weight-heading);    /* 700 */
    color: var(--fp-color-white);
    letter-spacing: -0.01em;
}

/* Cash-flow figures - positive/negative distinction retained */
.fp-cat-dash--delta {
    font-size: 3.5651cqw;         /* 14px at 1440 */
    font-weight: var(--fp-weight-label);      /* 600 */
}
.fp-cat-dash--pos { color: var(--fp-color-green); }
.fp-cat-dash--neg { color: var(--fp-color-navy); }

/* Feature tile labels - one consistent treatment across all four */
.fp-cat-dash--tile {
    font-size: var(--fp-font-caption);        /* 13px */
    font-weight: var(--fp-weight-label);      /* 600 */
    color: var(--fp-color-navy);
}

/* ── Methodology card ────────────────────────────────────── */
/* Card 3's label: type, colour and centring come from the shared
   .fp-category-hero__headline / __method-title rule above (v3.56.3). The
   v2.0 left alignment to Card 1 is retired - both labels are centred. */

.fp-category-hero__shield {
    display: grid;
    place-items: center;
    /* align-self as well as justify-self: below 1280 the card is a flex
       column, where justify-self does not apply. */
    place-self: center;
    /* The governed 120 x 120px Card 3 slot. Unchanged since v2.0: the card's
       gaps and height are built around it. From v3.55.7 it holds the frozen
       Methodology illustration v1.0 with no disc behind it (the #CCD5E0 disc
       and #4F6D95 inline check are retired). */
    width: var(--fp-cat-zone-circle, 120px);
    height: var(--fp-cat-zone-circle, 120px);
}

/* Methodology illustration v1.0, printed inline: the svg fills the 120px slot
   and its 1152 x 896 viewBox fits by the default xMidYMid meet, drawing at
   120 x 93.33px, centred. At this size its Structural Gray borders render at
   1.00px and its semantic lines, inner shield and check at 2.75px (the
   approved illustration line system). Do not scale it: the stroke widths are
   computed for exactly this size. */
.fp-category-hero__shield svg {
    display: block;
    width: 100%;
    height: 100%;
}

.fp-category-hero__method-body {
    /* Left-aligned to match Card 1's supporting copy. The heading and shield
       above it stay centred. */
    text-align: left;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    font-size: var(--fp-font-body-m);         /* 16px */
    font-weight: var(--fp-weight-body);
    line-height: var(--fp-line-body);
    color: var(--fp-color-gray-500);
}

/* ── Methodology Text CTA ────────────────────────────────
 * The universal 144x44 boxed CTA is deliberately NOT used in this hero.
 * This mirrors .fp-editorial-card__methodology (hero.css, Bible ch. 54.9)
 * declaration for declaration, so both Text CTAs on the site behave
 * identically. Colour is re-asserted on every state because GeneratePress
 * emits its own a:hover/:focus/:active colour at equal specificity and
 * later in source order - the cascade trap documented in coding-standards. */
/* Right-aligned, exactly as .fp-editorial-card__methodology is on the homepage
   Editorial Framework card. align-self:stretch is needed because the method
   body centres its flex items, which would otherwise shrink this <p> to its
   text width and make text-align a no-op. */
.fp-category-hero__methodology {
    margin: 0;
    text-align: right;
    line-height: 1;               /* baseline parity with the metadata row */
}

.fp-category-hero__methodology a {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--fp-font-body-m);
    font-weight: var(--fp-weight-medium);
    color: var(--fp-color-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--fp-button-transition);
}

.fp-category-hero__methodology a .fp-cta-arrow {
    margin-left: var(--fp-cta-arrow-gap);
}

.fp-category-hero__methodology a:hover {
    color: var(--fp-color-blue);
    text-decoration: underline;
}

.fp-category-hero__methodology a:active  { color: var(--fp-color-blue-pressed); }
.fp-category-hero__methodology a:visited { color: var(--fp-color-blue); }

.fp-category-hero__methodology a:focus-visible {
    outline: 2px solid var(--fp-color-blue);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════
   TABLET — 640px and up: 2-up
   Identity + artwork side by side; methodology spans beneath, so the
   copy-to-illustration relationship survives as long as practical.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 640px) {

    .fp-category-hero {
        padding-top: var(--fp-space-s);        /* 16px (v3.56.8; was 48) */
        padding-bottom: var(--fp-space-xl);
    }

    .fp-category-hero__container {
        padding: 0 var(--fp-margin-tablet);    /* 24px */
    }

    .fp-category-hero__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--fp-gutter-desktop);         /* 24px */
    }

    /* HISTORY - no rule remains here. CANDIDATE A (2-column and 3-column
       regimes), written for the v1.0 portrait asset. The artwork column is
       stretched to the row height, but the artwork's own height is set by the
       column width and is shorter than the flanking cards until the crossover
       (measured: 758px in 2-col, 1257px in 3-col). Top-aligning dumped all of
       that slack below the artwork — 162.4px at 640px, 154.9px at 1024px —
       so the middle column read as ending prematurely against bordered cards
       that continued past it. Centring splits the slack evenly instead.
       Changes no width, no aspect, no card height and no breakpoint. */
    

    /* CANDIDATE B cap - v1.0 portrait-asset era. No current template emits
       .fp-category-hero__art-img, so this rule matches nothing today; it is
       left unchanged here rather than removed in a documentation pass. */
    .fp-category-hero__art-img {
        max-width: 100%;
    }

    .fp-category-hero__card--method {
        grid-column: 1 / -1;
    }

    /* The tablet 40px headline step is gone: the H1 is a 13px eyebrow at
       every width now. Removed 2026-08-20 — it was also the source of the
       "H1 is larger at tablet than at desktop" observation in the baseline. */
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP — 1024px and up: 3-up
   The approved three-part composition. All three cards stretch to the
   row height; the flanking cards distribute their content within it.
   (Originally the row height was set by a portrait artwork asset that
   is no longer served.)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

    .fp-category-hero {
        padding-top: var(--fp-space-s);         /* 16px (v3.56.8; was 48) */
        padding-bottom: var(--fp-space-xl);
    }

    /* EQUAL THIRDS. Card 2 is the size authority; Cards 1 and 3 stretch to
       match its height, and all three share one column width.
       3-column starts at 1280, not 1024: at 1024 the columns are only 309px
       and the headings wrap past their zone. 1023 already works in 2-column,
       so the ladder steps 1 -> 2 -> 3 at 640 and 1280. */
    .fp-category-hero__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .fp-category-hero__card--method {
        grid-column: auto;
    }

    /* SHARED VERTICAL ZONES - desktop only. Cards 1 and 3 become two instances
       of one four-row structure so their headings, circles, copy and bottom
       actions land on the same lines. Only safe where the columns are wide
       enough for two-line headings. */
    .fp-category-hero__card--identity,
    .fp-category-hero__card--method {
        display: grid;
        row-gap: 0;
        justify-content: stretch;
    }

    /* ROW TRACKS, approved 2026-08-20 — superseding the fixed shared zones
       (heading 79.2 / 32 / circle 120 / 32 / copy 132 / 16 / action 18).

       The content rows are now `auto`: with a 13px eyebrow instead of a 36px
       two-line heading, a fixed heading zone reserved space nothing used, and
       fixed copy/action zones clipped nothing while pinning the card taller
       than its content. Row 6 is `1fr` so the leftover slack collects in ONE
       place, immediately above the bottom action, instead of being shared out
       by `auto` rows and pushing the icons low.

       THE GUTTERS ARE NOT EQUAL BETWEEN THE TWO CARDS, AND THAT IS DELIBERATE.
       Card 1's icon box is 133.33px around a 120px painted circle, so it
       carries a 6.665px transparent inset on each side that Card 3's CSS disc
       does not have. Equal 42px gutters would therefore put 48.665px of
       VISIBLE air around Card 1's circle and leave the two 6.7px out of level.
       Cutting Card 1's gutters by that inset — 42 - 6.665 = 35.335 — gives
       both circles the same 42px of visible air and lands them on the same
       line. If the icon asset's circle share ever changes, recompute the
       inset; do not copy 35.335px forward. */
    .fp-category-hero__card--identity {
        grid-template-rows: auto calc(35.335px + 16.25px - 36px) auto 35.335px auto 1fr auto;
    }

    .fp-category-hero__card--method {
        grid-template-rows: auto calc(42px + 16.25px - 36px) auto 42px auto 1fr auto;
    }

    .fp-category-hero__headline,
    .fp-category-hero__method-title { grid-row: 1; }

    .fp-category-hero__icon,
    .fp-category-hero__shield { grid-row: 3; }

    .fp-category-hero__intro,
    .fp-category-hero__method-body { grid-row: 5; }

    .fp-category-hero__updated,
    .fp-category-hero__methodology { grid-row: 7; margin-top: 0; }

    /* Desktop label step (v3.56.3): 16px on an 18px line (1.125 - the
       labels are all caps, so there are no descenders to clear). Since
       v3.56.4 the size and line come from --fp-hero-label-* in base.css.

       LABEL ZONE. Every label gets the same two-line block, 2 x 18 = 36px,
       text top-aligned, and the label -> illustration gutter gives back
       exactly what that block adds over the v3.56.2 one-line 13px label
       (16.25px). So the illustrations, copy and bottom action sit exactly
       where v3.56.2 put them whether a label runs to one line or two, the
       1fr copy -> action slack is untouched, and the hero cannot grow.
       Visible label -> illustration air: 15.585px (Card 1, whose 133.33px
       icon box adds 6.665px of transparent inset) and 22.25px (Card 3)
       below a two-line label; 33.585 / 40.25px below a one-line label. */
    .fp-category-hero__headline,
    .fp-category-hero__method-title {
        /* 16px / 18px come from the shared hero label tokens (base.css). */
        min-height: calc(2 * var(--fp-hero-label-line));   /* 36px */
    }
}

/* ═══════════════════════════════════════════════════════════
   WIDE — 1440px and up
   Matches the FP-C-003/004/005 desktop margin step.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {

    .fp-category-hero__container {
        padding: 0 var(--fp-margin-desktop);    /* 32px */
    }
}


/* ── CARD 2 · CENTRE-CARD PATH ──────────────────────────────
 *
 * Scoped to the 'centre_card' registry field (added 2026-08-31). Business
 * Banking and Accounting both render Card 2 through it, both with
 * 'centre_card_chrome'.
 *
 * CURRENT OWNERSHIP (v3.55.3 onward):
 *     card chrome - the <article>. Border, radius, shadow and white ground
 *         come from .fp-category-hero__card--centre-chrome below, and the
 *         4px accent rule is its ::before (the article renders no
 *         .fp-category-hero__accent span).
 *     title - the HTML <h2> .fp-category-hero__art-title, a child of the
 *         article, beneath the accent rule and above the artwork.
 *     artwork - a shell-less SVG that draws no card, no border, no accent bar
 *         and no title; only the artwork and its feature labels.
 * The square .fp-category-hero__art box is not used on this path at all, so
 * its aspect-ratio: 1 never applies here. The card's height is the <h2> block
 * plus the artwork at the SVG's own v1.3 viewBox ratio.
 *
 * HISTORY - SUPERSEDED. As added on 2026-08-31 the served SVG drew its own card,
 * 2.0-unit Core Navy border, 23.82-unit radius, 7.94-unit accent bar and 36px
 * green title inside a 960 x 884.6 viewBox, and the article rendered none of
 * them and no <h2>. No live category serves such an asset now.
 */
/* CARD 2 HEADING INSIDE THE CENTRE CARD - 2026-09-27.
   The card keeps padding: 0 so the artwork stays full-bleed to its edges; the
   heading supplies its own padding-top instead - 24px, which clears the 4px
   accent rule with the same 20px of air the sibling cards use.
   NO inline padding. Measured with the Inter webfont actually loaded: at the
   governed 48 / -1.44px "Business Banking" is 392.72px wide. At 1512px the
   content box is 460.67px, so it holds one line. At 1280px, the narrowest
   three-column width, the box is 392.67px and it wraps to two lines by
   0.05px. That natural wrap is ACCEPTED responsive behaviour (decided
   2026-09-28): do not force one line with tracking, inset or width changes.
   From about 1281px up it is one line. (Earlier figures in this note -
   368.56px, and 413.36px at 54px - were measured with a fallback font
   because the QA page did not load Inter, and were wrong.) The
   8px margin-bottom is the component default
   and is the controlled gap to the artwork, which brings its own inset.
   Business Banking and Accounting use this identical rule; the card is taller
   on Accounting only because its title occupies three lines. */
.fp-category-hero__card--centre .fp-category-hero__art-title {
    padding: 24px 0 0;
}

/* ACCOUNTING CENTRE-CARD SPACING (approved 2026-09-28, "alternative B").
   The accounting shell-less artwork carries its OWN transparent inset: 79.0
   (top) and 75.5 (bottom) of its 960 viewBox units, i.e. 8.2292% / 7.8646% of
   the artwork width. These margins cancel part of that inset so the VISIBLE
   gaps are exactly 24px heading -> artwork (8px heading margin + margin-top +
   inset) and 24px artwork -> card bottom, at every width. The artwork is not
   scaled or clipped (the card has no overflow hidden); percentage margins
   resolve against the card's content width, which is the artwork width.
   Keyed to the artwork file because the values are properties of that file.
   Business Banking keeps its gaps: it is the compact height reference. */
.fp-category-hero__card--centre .fp-category-hero__centre-card[src*="accounting.bookkeeping.software.centre-card"] {
    margin-top: calc(16px - 8.2292%);
    margin-bottom: calc(24px - 7.8646%);
}

.fp-category-hero__card--centre {
    /* BASE for every centre card: strips the generic card chrome and padding.
       On its own this suits only an asset that draws its own card shell - no
       live category serves one. Both live categories also carry
       --centre-chrome, which follows this rule and puts the article's border,
       radius, shadow, white ground and accent rule back. */
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    /* the flex column and its justify-content have nothing to distribute here */
    display: block;
}

/* ── SHELL-LESS CENTRE CARD ──────────────────────────────────
 * Added 2026-08-31, scoped by the 'centre_card_chrome' registry flag, which
 * category-hero.php turns into this modifier class.
 *
 * For assets served as a shell-less presentation derivative - no outer card
 * rect, no Navy border, no accent bar - Card 2 takes ALL of its chrome from
 * .fp-category-hero__card, so it is the same card as Cards 1 and 3: same 1px
 * var(--fp-color-gray-200) border, same radius, same shadow, same white
 * background, same clipping. The artwork is not bled, offset or scaled.
 *
 * Scoped rather than applied to .fp-category-hero__card--centre because a
 * category still serving a shelled asset would otherwise get the CSS card AND
 * the artwork's own card - a double border. Business Banking and Accounting
 * both set the flag; both serve shell-less derivatives.
 */
.fp-category-hero__card--centre-chrome {
    padding: 0;
    border: 1px solid var(--fp-color-gray-200);
    background-color: var(--fp-color-white);
    border-radius: var(--fp-radius-card);
    box-shadow: var(--fp-shadow-1);
    overflow: hidden;
    display: block;
    position: relative;
}

/* The accent bar Cards 1 and 3 get from their .fp-category-hero__accent span.
   The centre-card branch renders no span, so it is drawn here instead - same
   4px, same gradient, same tokens. The SAME visual system, not a second one. */
.fp-category-hero__card--centre-chrome::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--fp-color-blue) 0%, var(--fp-color-green) 100%);
}

.fp-category-hero__centre-card {
    display: block;
    width: 100%;
    height: auto;
    /* the frozen artwork's own proportions govern; never crop or stretch it */
    object-fit: contain;
}

/* ── ACCOUNTING-WIDTH TITLE AT 640-959px (v3.56.1) ─────────────
 * Opt-in per category through the registry flag 'tablet_title_span'
 * (template adds .fp-category-hero--span-title). Set for Accounting &
 * Bookkeeping Software only: at 40px "Bookkeeping Software" needs 417px,
 * and the half-width centre card offers 282-412px below 960px, so the title
 * ran to three lines. Business Banking's title fits; it keeps the standard
 * 2-up above. From 960px every category uses the standard layout.
 *
 * Here the title and artwork become an OPEN, unbordered area spanning the
 * row (site owner, 2026-09-28): no border, shadow, ground, radius or accent
 * rule; the identity and methodology cards stay bordered, side by side
 * beneath it at their unchanged width. The artwork keeps its two-up width.
 * Spacing: the section's own 48px top padding sits above the title (the
 * card's 24px title padding is dropped with the card); 24px visible gap
 * title -> artwork; 32px visible gap artwork -> cards (8px + the 24px grid
 * gap). Measured every 8px from 640 to 959: never taller than v3.56.0
 * (tightest -7px at 712px); title at most two lines. */
@media (min-width: 640px) and (max-width: 959.98px) {
    .fp-category-hero--span-title .fp-category-hero__card--centre   { grid-column: 1 / -1; grid-row: 1; }
    .fp-category-hero--span-title .fp-category-hero__card--identity { grid-column: 1; grid-row: 2; }
    .fp-category-hero--span-title .fp-category-hero__card--method   { grid-column: 2; grid-row: 2; }
    .fp-category-hero--span-title .fp-category-hero__card--centre {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
    }
    .fp-category-hero--span-title .fp-category-hero__card--centre::before { display: none; }
    .fp-category-hero--span-title .fp-category-hero__card--centre .fp-category-hero__art-title { padding-top: 0; }
    .fp-category-hero--span-title .fp-category-hero__centre-card {
        max-width: calc((100% - var(--fp-gutter-desktop)) / 2);   /* the two-up artwork width */
        margin-inline: auto;
    }
    /* The ACCOUNTING CENTRE-CARD SPACING margins above resolve their
       percentages against the card's content width, which is the artwork
       width only while the card is one column wide. Restated against the
       artwork width - (100% - gutter) / 2 - so the visible gaps are exact:
       24px title -> artwork, 8px artwork -> area bottom (32px to the cards). */
    .fp-category-hero--span-title .fp-category-hero__card--centre .fp-category-hero__centre-card[src*="accounting.bookkeeping.software.centre-card"] {
        margin-top: calc(16px - (100% - var(--fp-gutter-desktop)) / 2 * 0.082292);
        margin-bottom: calc(8px - (100% - var(--fp-gutter-desktop)) / 2 * 0.078646);
    }
}

/* ═══════════════════════════════════════════════════════════
   HERO OFFSET (v3.56.8) - breadcrumb -> first meaningful hero content
   One visible gap site-wide: about 20px (2px tolerance) from the
   breadcrumb's baseline to the first heading glyph, card border or drawn
   artwork. Set per component and breakpoint because each hero starts with
   different content (a card, a heading, an icon) and carries different
   fixed leading. Only spacing ABOVE the first hero content changes; the
   spacing between hero elements, type, copy and artwork are untouched, and
   no page gets taller. Articles already sit at 19.6px and are the anchor.
   ═══════════════════════════════════════════════════════════ */
/* 640-959px, span-title layout (Accounting): the hero opens with its H1,
   not a card, and the H1's own leading adds 5.3px above the glyphs, so the
   section offset is 11px there instead of 16px. */
@media (min-width: 640px) and (max-width: 959.98px) {
    .fp-category-hero--span-title { padding-top: 11px; }
}
/* v3.57.145 (P21, owner instruction 2026-10-28): the category-hero methodology link keeps Core Blue on focus (hover already did); its pressed #1E40AF is restated after. 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. */
.fp-category-hero__methodology a:focus,
.fp-category-hero__methodology a:focus-visible { color: var(--fp-color-blue); }
.fp-category-hero__methodology a:focus:active { color: var(--fp-color-blue-pressed); }