/* PFCA Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 *
 * ⚠ !important IS LOAD-BEARING, and it is here because this theme has
 * now been bitten by its absence four times.
 *
 * `[hidden]` is (0,1,0). So is every component rule that sets a
 * `display`, and every one of them is loaded AFTER this file — so a
 * component wins on source order and its `hidden` attribute silently
 * stops working. The failure is quiet in the worst way: the element is
 * laid out, takes its margins, and looks like a styling mistake
 * somewhere else entirely.
 *
 * Found 2026-09-19 on the real events page. A hidden `.pfca-pager`
 * (`display: flex`) was contributing its 90px `margin-block-start` to
 * every listing that had nothing to page, which showed up as a 220px
 * section seam where 130 was expected — 90px of a control that was not
 * on the page.
 *
 * Auditing the rest found it was never a one-off:
 *
 *   .pfca-testimonials__controls   display: flex        — the carousel
 *       arrows are meant to appear only once module.js has enhanced
 *       the track; they were showing unconditionally, on a page
 *       already shipped.
 *   .pfca-feature-cards__toggle    .pfca-iconbtn, inline-flex — the
 *       "+" is rendered hidden with its panel already open and
 *       revealed by JS; it was showing before JS ran, as a control
 *       that did nothing.
 *
 * Two modules had already hit this and patched it LOCALLY, at (0,2,0):
 * `.pfca-story-grid__item[hidden]` and
 * `.pfca-featured-story__slide[hidden]`. Those local rules are now
 * redundant but harmless, and they are the evidence this belongs here
 * rather than in a fourth module.
 *
 * `hidden` is a STATE, not a style. Nothing should out-specify it, and
 * the only way to say that once is !important.
 */

[hidden] {
  display: none !important;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/

/* Responsive Grid */

html {
  overflow-x: hidden;
  width: 100%;
}

.row-fluid {
    width: 100%;
    *zoom: 1;
}

.row-fluid:before, .row-fluid:after {
    display: table;
    content: "";
}

.row-fluid:after {
    clear: both;
}

.row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    min-height: 1px;
    margin-left: 2.127659574%;
    *margin-left: 2.0744680846382977%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

.row-fluid .span12 {
    width: 99.99999998999999%;
    *width: 99.94680850063828%;
}

.row-fluid .span11 {
    width: 91.489361693%;
    *width: 91.4361702036383%;
}

.row-fluid .span10 {
    width: 82.97872339599999%;
    *width: 82.92553190663828%;
}

.row-fluid .span9 {
    width: 74.468085099%;
    *width: 74.4148936096383%;
}

.row-fluid .span8 {
    width: 65.95744680199999%;
    *width: 65.90425531263828%;
}

.row-fluid .span7 {
    width: 57.446808505%;
    *width: 57.3936170156383%;
}

.row-fluid .span6 {
    width: 48.93617020799999%;
    *width: 48.88297871863829%;
}

.row-fluid .span5 {
    width: 40.425531911%;
    *width: 40.3723404216383%;
}

.row-fluid .span4 {
    width: 31.914893614%;
    *width: 31.8617021246383%;
}

.row-fluid .span3 {
    width: 23.404255317%;
    *width: 23.3510638276383%;
}

.row-fluid .span2 {
    width: 14.89361702%;
    *width: 14.8404255306383%;
}

.row-fluid .span1 {
    width: 6.382978723%;
    *width: 6.329787233638298%;
}

.container-fluid {
    *zoom: 1;
}

.container-fluid:before, .container-fluid:after {
    display: table;
    content: "";
}

.container-fluid:after {
    clear: both;
}

@media (max-width: 767px) {
    .row-fluid {
        width: 100%;
    }

    .row-fluid [class*="span"] {
        display: block;
        float: none;
        width: auto;
        margin-left: 0;
    }
}

@media (min-width: 768px) and (max-width: 1139px) {
    .row-fluid {
        width: 100%;
        *zoom: 1;
    }

    .row-fluid:before, .row-fluid:after {
        display: table;
        content: "";
    }

    .row-fluid:after {
        clear: both;
    }

    .row-fluid [class*="span"] {
        display: block;
        float: left;
        width: 100%;
        min-height: 1px;
        margin-left: 2.762430939%;
        *margin-left: 2.709239449638298%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .row-fluid [class*="span"]:first-child {
        margin-left: 0;
    }

    .row-fluid .span12 {
        width: 99.999999993%;
        *width: 99.9468085036383%;
    }

    .row-fluid .span11 {
        width: 91.436464082%;
        *width: 91.38327259263829%;
    }

    .row-fluid .span10 {
        width: 82.87292817100001%;
        *width: 82.8197366816383%;
    }

    .row-fluid .span9 {
        width: 74.30939226%;
        *width: 74.25620077063829%;
    }

    .row-fluid .span8 {
        width: 65.74585634900001%;
        *width: 65.6926648596383%;
    }

    .row-fluid .span7 {
        width: 57.182320438000005%;
        *width: 57.129128948638304%;
    }

    .row-fluid .span6 {
        width: 48.618784527%;
        *width: 48.5655930376383%;
    }

    .row-fluid .span5 {
        width: 40.055248616%;
        *width: 40.0020571266383%;
    }

    .row-fluid .span4 {
        width: 31.491712705%;
        *width: 31.4385212156383%;
    }

    .row-fluid .span3 {
        width: 22.928176794%;
        *width: 22.874985304638297%;
    }

    .row-fluid .span2 {
        width: 14.364640883%;
        *width: 14.311449393638298%;
    }

    .row-fluid .span1 {
        width: 5.801104972%;
        *width: 5.747913482638298%;
    }
}

@media (min-width: 1280px) {
    .row-fluid {
        width: 100%;
        *zoom: 1;
    }

    .row-fluid:before, .row-fluid:after {
        display: table;
        content: "";
    }

    .row-fluid:after {
        clear: both;
    }

    .row-fluid [class*="span"] {
        display: block;
        float: left;
        width: 100%;
        min-height: 1px;
        margin-left: 2.564102564%;
        *margin-left: 2.510911074638298%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .row-fluid [class*="span"]:first-child {
        margin-left: 0;
    }

    .row-fluid .span12 {
        width: 100%;
        *width: 99.94680851063829%;
    }

    .row-fluid .span11 {
        width: 91.45299145300001%;
        *width: 91.3997999636383%;
    }

    .row-fluid .span10 {
        width: 82.905982906%;
        *width: 82.8527914166383%;
    }

    .row-fluid .span9 {
        width: 74.358974359%;
        *width: 74.30578286963829%;
    }

    .row-fluid .span8 {
        width: 65.81196581200001%;
        *width: 65.7587743226383%;
    }

    .row-fluid .span7 {
        width: 57.264957265%;
        *width: 57.2117657756383%;
    }

    .row-fluid .span6 {
        width: 48.717948718%;
        *width: 48.6647572286383%;
    }

    .row-fluid .span5 {
        width: 40.170940171000005%;
        *width: 40.117748681638304%;
    }

    .row-fluid .span4 {
        width: 31.623931624%;
        *width: 31.5707401346383%;
    }

    .row-fluid .span3 {
        width: 23.076923077%;
        *width: 23.0237315876383%;
    }

    .row-fluid .span2 {
        width: 14.529914530000001%;
        *width: 14.4767230406383%;
    }

    .row-fluid .span1 {
        width: 5.982905983%;
        *width: 5.929714493638298%;
    }
}

/* Clearfix */

.clearfix {
    *zoom: 1;
}

.clearfix:before, .clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

/* Visibilty Classes */

.hide {
    display: none;
}

.show {
    display: block;
}

.invisible {
    visibility: hidden;
}

.hidden {
    display: none;
    visibility: hidden;
}

/* Responsive Visibilty Classes */

.visible-phone {
    display: none !important;
}

.visible-tablet {
    display: none !important;
}

.hidden-desktop {
    display: none !important;
}

@media (max-width: 767px) {
    .visible-phone {
        display: inherit !important;
    }

    .hidden-phone {
        display: none !important;
    }

    .hidden-desktop {
        display: inherit !important;
    }

    .visible-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1139px) {
    .visible-tablet {
        display: inherit !important;
    }

    .hidden-tablet {
        display: none !important;
    }

    .hidden-desktop {
        display: inherit !important;
    }

    .visible-desktop {
        display: none !important ;
    }
}

.breadcrumb-wrapper,
.hs-breadcrumb-menu-wrapper {
  display: block;
  clear: both;
  width: 100%;
  position: relative;
  margin-bottom: 15px;
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 20px;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

.hs_cos_wrapper_type_space {
  display: block;
  min-height: 30px;
}


/* ============================================================
 * THE DND CHROME DOES NOT APPLY TO PFCA SECTIONS
 *
 * Added 2026-09-18, on the first page actually assembled from the
 * module library. This is the biggest thing that assembly found, and
 * it is invisible to every check that came before it.
 *
 * ------------------------------------------------------------
 * WHAT WAS HAPPENING
 * ------------------------------------------------------------
 *
 * theme-overrides.css caps `.dnd-section > .row-fluid` at
 * theme.spacing.max_width, pads `.dnd-section` by
 * theme.spacing.vertical_spacing, and this file pads `.dnd-column` by
 * 20px. Those three values default to 1080px, 60px and 20px — they
 * come from the HubSpot CMS boilerplate this theme was scaffolded
 * from, and nobody chose them for PFCA.
 *
 * Measured on the real draft page at a 2560px viewport, before this
 * rule: every pfca- section rendered 1080px wide with a 920px inner,
 * against a design that draws them 1728 wide with a 1568px inner.
 * 59% of the intended width, on every section, on every page.
 *
 * ------------------------------------------------------------
 * WHY NOTHING CAUGHT IT
 * ------------------------------------------------------------
 *
 * The header and footer are global partials and sit OUTSIDE the dnd
 * area, so the chrome never touched them — the page's chrome looked
 * perfect while its content was squeezed. scripts/preview-modules.py
 * renders modules standalone, with no dnd wrapper at all, so it is
 * structurally incapable of seeing this. The upload was clean, the
 * validator was green, CI was green, and every module measured
 * correctly against the design in isolation.
 *
 * That is the lesson worth keeping: a module library can be right
 * module by module and still be wrong as a page. The only check that
 * finds it is a real page, measured.
 *
 * ------------------------------------------------------------
 * WHY THIS SHAPE OF FIX
 * ------------------------------------------------------------
 *
 * Not by changing theme.spacing.max_width: those fields are the theme
 * editor's own knobs, they still govern any generic HubSpot module an
 * editor drops onto a page, and silently redefining what "max width"
 * means for them makes the control a lie.
 *
 * Instead the neutralisation is scoped to `.pfca-page`, the class the
 * site-page template puts on its <main>. Inside a PFCA page, sections
 * own their own width and their own vertical rhythm — that is the
 * contract the whole module library is built on: every section module
 * carries 65px of block padding, half the design's 130px gap, and
 * 1568px of inner max-width. The dnd wrapper has to get out of the
 * way for that arithmetic to hold.
 *
 * Specificity is deliberate, not incidental: each selector below is
 * one class heavier than the rule it has to beat in
 * theme-overrides.css, so this does not depend on stylesheet order —
 * which HubSpot does not guarantee. Same contract as
 * css/components/_buttons.css.
 * ============================================================ */

.pfca-page .dnd-section {
  padding: 0;
}

.pfca-page .dnd-section > .row-fluid {
  max-width: none;
}

.pfca-page .dnd-section .dnd-column {
  padding: 0;
}


/* Elements
Base HTML elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)

Base element rules here are wrapped in :where() (zero specificity) so they
act as a FLOOR that theme-overrides.css's editor-driven rules and the
component classes both outrank. See the header of _typography.css.
*/

/* ============================================================
 * PFCA Typography Foundation
 *
 * Two layers, and the split matters:
 *
 *   1. BASE ELEMENTS, wrapped in :where() → zero specificity.
 *      These are a FLOOR, not a ceiling. theme-overrides.css already
 *      styles body/p/a/h1-h6 from the editor-configurable theme fields
 *      at element specificity (0,0,1), and must keep winning — an editor
 *      changing a heading size in the theme editor has to actually take
 *      effect. Wrapping this layer in :where() guarantees that, while
 *      still ensuring brand fonts render if a theme field is ever unset
 *      or a page is rendered outside the theme-settings context.
 *
 *   2. DESIGN-SYSTEM CLASSES at (0,1,0) → what modules bind to for
 *      anything the theme editor does not own (eyebrows, ledes, display
 *      type, the tagline lockup).
 *
 * Same specificity contract as css/components/_buttons.css — read the
 * header there before adding to either file.
 *
 * SIZES HERE ARE NOW FULLY DESIGN-VERIFIED (2026-09-17, read out of the
 * Entrepreneurs page node 61:452 — see css/pfca-brand-tokens.css §5).
 * H1/H2/H3 moved from the old provisional scale by 20-45%: 48→70,
 * 36→54, 30→36. The only thing in this file that is still ours rather
 * than the designer's is how those desktop sizes behave below 768px,
 * which theme-overrides.css §3 owns.
 * ============================================================ */


/* ------------------------------------------------------------
 * 1. Base elements — :where(), zero specificity (see header)
 * ------------------------------------------------------------ */

:where(body) {
  font-family: var(--pfca-font-body);
  font-size: var(--pfca-text-base);
  font-weight: var(--pfca-weight-body);
  line-height: var(--pfca-leading-normal);
  color: var(--pfca-text-default);
  background-color: var(--pfca-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--pfca-font-display);
  font-weight: var(--pfca-weight-display);
  line-height: var(--pfca-leading-tight);   /* ✓ H4, H5 — overridden below */
  letter-spacing: var(--pfca-tracking-tight);
  color: var(--pfca-text-default);
  margin: 0 0 0.5em;
  text-wrap: balance;   /* progressive enhancement; ignored where unsupported */
}

/* HEADING SIZES ARE DELIBERATELY NOT SET HERE.
 *
 * Two things already own them and both outrank a :where() rule:
 *   - css/generic/_normalize.css sets `h1 { font-size: 2em }` at (0,0,1)
 *   - theme-overrides.css sets every h1-h6 font-size from the editor
 *     fields in fields.json, also at (0,0,1)
 *
 * A `:where(h1) { font-size: ... }` here would be (0,0,0) — it would lose
 * to both and never apply, while LOOKING like the place heading sizes are
 * configured. That is worse than not writing it: the next person edits
 * this file, sees no change, and starts adding !important.
 *
 * The scale still drives those headings — fields.json's h1-h6 size
 * defaults are set to the same steps as css/pfca-brand-tokens.css §5
 * (h1 4.375em/70px, h2 3.375em/54px, h3 2.25em/36px, h4 1.5em/24px,
 * h5 1.25em/20px, h6 1.125em/18px), so the token scale and the
 * editor-facing defaults agree. Change one, change the other.
 *
 * TO CHANGE A HEADING SIZE: edit fields.json (and the matching token),
 * not this file.
 *
 * What this file legitimately owns for headings is everything
 * theme-overrides.css does NOT set — line-height, letter-spacing,
 * margins, balance — which is the :where() block above. */

/* Per-level line heights. The design tightens as type grows, so these
 * do not follow one rule — H1/H2 sit at a literal 1.0. Written as
 * separate selectors rather than one grouped rule because each value
 * is its own design fact. */
:where(h1, h2) { line-height: var(--pfca-leading-none); }     /* ✓ 1.0 */
:where(h3)     { line-height: var(--pfca-leading-heading); }  /* ✓ 1.1 */
:where(h6)     { line-height: var(--pfca-leading-snug); }     /* ✓ 1.3 */

:where(p) {
  margin: 0 0 1.25em;
  line-height: var(--pfca-leading-normal);
}

:where(p:last-child) { margin-bottom: 0; }

:where(a) {
  color: var(--pfca-text-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

:where(a:hover, a:focus) {
  color: var(--pfca-text-link-hover);
}

:where(a:focus-visible) {
  outline: var(--pfca-focus-ring-width) solid var(--pfca-focus-ring-color);
  outline-offset: var(--pfca-focus-ring-offset);
}

:where(strong, b) { font-weight: var(--pfca-weight-bold); }

:where(small) { font-size: var(--pfca-text-sm); }

:where(ul, ol) {
  margin: 0 0 1.25em;
  padding-left: 1.5em;
  line-height: var(--pfca-leading-normal);
}

:where(li + li) { margin-top: 0.4em; }

:where(blockquote) {
  margin: 0 0 1.25em;
  padding-left: 1.25em;
  border-left: 4px solid var(--pfca-accent);
  font-size: var(--pfca-text-lg);
  line-height: var(--pfca-leading-snug);
}

:where(hr) {
  border: 0;
  border-top: 1px solid var(--pfca-divider-light);
  margin: 2.5rem 0;
}

/* Every card-as-quotation in this theme (pfca-testimonials,
 * pfca-featured-story, pfca-story-grid) is a <figure> for the
 * semantics, styled entirely by .pfca-card — but the browser's own UA
 * stylesheet gives <figure> a 1em 40px margin, and nothing here had
 * zeroed it. Invisible whenever a card's width is constrained some
 * other way (a fixed flex-basis, an absolute position); found because
 * pfca-featured-story's mobile layout sets width:100% on the figure
 * with nothing else fighting the UA margin, so the card rendered 40px
 * wider than its own container and clipped at the viewport edge. */
:where(figure) { margin: 0; }

:where(code, kbd, samp, pre) {
  font-family: var(--pfca-font-mono);
  font-size: 0.9em;
}


/* ------------------------------------------------------------
 * 2. Design-system type classes — (0,1,0), for modules
 * ------------------------------------------------------------ */

/* The H1 treatment, decoupled from the <h1> element.
 *
 * This class used to be an "oversized" step that topped out at 60px —
 * a size that exists nowhere in the design, invented when H1 was
 * believed to be 48px. Now that H1 is verified at 70px, "bigger than
 * h1" is not a thing the design has, so this is simply the H1
 * treatment for the cases where the hero headline must not be an
 * <h1> for document-outline reasons (a second hero on the page, a
 * headline that is really a <p>).
 *
 * It clamps on the same curve as theme-overrides.css §3 so a
 * .pfca-display and a real h1 stay the same size at every width. If
 * you change one curve, change both. */
.pfca-display {
  font-family: var(--pfca-font-display);
  font-size: clamp(2.25rem, 4.05vw, var(--pfca-text-5xl));
  font-weight: var(--pfca-weight-display);
  line-height: var(--pfca-leading-none);
  letter-spacing: var(--pfca-tracking-tight);
  color: var(--pfca-text-default);
  margin: 0 0 0.4em;
  text-wrap: balance;
}

/* Small all-caps label above a heading. The brand's all-caps voice —
 * "WE ERADICATE ENTREPRENEURIAL POVERTY" — reads at this treatment. */
.pfca-eyebrow {
  display: block;
  font-family: var(--pfca-font-body);
  font-size: var(--pfca-text-sm);
  font-weight: var(--pfca-weight-bold);
  line-height: var(--pfca-leading-snug);
  letter-spacing: var(--pfca-tracking-wide);
  text-transform: uppercase;
  color: var(--pfca-text-default);
  margin: 0 0 0.75em;
}

/* Accent-coloured eyebrow, for use on the navy ground where the green
 * carries enough contrast (green on navy: 4.36:1 — fine at this weight
 * only because it is a short label; do not use for body copy). */
.pfca-eyebrow.pfca-eyebrow--accent { color: var(--pfca-accent); }

/* The section-label PILL — ✓ design (Entrepreneurs 61:452, used three
 * times: "The Book", "Personal Profit First Professionals",
 * "Lisa's story").
 *
 * ⚠ THIS IS NOT .pfca-eyebrow, and the difference is not cosmetic.
 * .pfca-eyebrow above is uppercase, letter-spaced and 14px — it was
 * derived from the brand guide's all-caps tagline voice
 * ("WE ERADICATE ENTREPRENEURIAL POVERTY"), which is a real brand
 * element but is NOT how the design labels a section. The design's
 * section label is a sentence-case 18px bold chip on a grey tint.
 *
 * Keep both: .pfca-eyebrow for the tagline lockup it was drawn for,
 * .pfca-pill for section labels. Reaching for the wrong one is the
 * likeliest way a page drifts off-design, so they are documented
 * together rather than in separate files. */
.pfca-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: var(--pfca-pill-radius);
  background-color: var(--pfca-grey-10);
  font-family: var(--pfca-font-body);
  font-size: var(--pfca-text-lg);
  font-weight: var(--pfca-weight-bold);
  line-height: var(--pfca-leading-normal);
  letter-spacing: var(--pfca-tracking-normal);
  color: var(--pfca-navy);       /* ✓ design — brand navy, not Dark Navy */
  text-transform: none;
  white-space: nowrap;
}

/* PILL VARIANTS — ✓ design, Seminars/webinars/events (72:682),
 * measured 2026-09-19 off a 1:1 export.
 *
 * That page draws the pill FOUR times in four colours, and measuring
 * them is what proved they are one component rather than four:
 *
 *   section label   "Webinars"              100 × 37   grey-10 / navy
 *   status, live    "Upcoming"              105 × 37   navy / white
 *   status, past    "Past events"           116 × 37   grey / white
 *   meta chip       "8-9 PM CST" + icon     153 × 37   sky-10 / navy
 *
 * All four are 37px tall, which is exactly 18px × 1.4 + 2 × 6 — the
 * padding and type this component already had. The widths close on the
 * same arithmetic: the time chip's 153 is 14 + 24 (icon) + 8 (gap) +
 * 93 (the measured advance of "8-9 PM CST" at 18px bold) + 14.
 *
 * ⚠ The first measurement said 28px and it was WRONG — the sample
 * column ran through the pill's rounded corner, where the fill starts
 * lower. Sample a pill at its horizontal CENTRE. The same mistake is
 * available on every rounded thing in this theme.
 *
 * These are double-class (0,2,0) per the specificity contract in
 * _buttons.css, so injected chrome CSS at (0,1,0) cannot win on order. */

.pfca-pill.pfca-pill--status {
  background-color: var(--pfca-status-live-bg);   /* ✓ brand navy */
  color: var(--pfca-text-on-dark);                /* 9.59:1 */
}

/* ⚖ NOT the design's fill. The design uses Grey 100% #808285 under
 * white, which measures 3.85:1 — below AA, and 18px bold is 13.5pt so
 * it is not "large text" either. Bound to Grey 120% #66686A, the
 * design's own next step down, at 5.59:1. Full reasoning lives with
 * the token in pfca-brand-tokens.css §3. */
.pfca-pill.pfca-pill--past {
  background-color: var(--pfca-status-past-bg);
  color: var(--pfca-text-on-dark);                /* 5.59:1 */
}

.pfca-pill.pfca-pill--meta {
  gap: 8px;                                       /* ✓ measured — icon → text */
  background-color: var(--pfca-chip-info-bg);     /* ✓ Brand Blue 10% */
  color: var(--pfca-navy);                        /* 8.90:1 */
}

/* The chip's leading glyph. Sized, not coloured — it inherits, so one
 * icon works on every pill variant. */
.pfca-pill__icon {
  flex: 0 0 auto;
  width: 24px;                                    /* ✓ measured */
  height: 24px;
}

/* Long chip text must be allowed to wrap on a phone; nowrap would push
 * it off-screen instead. The pill keeps its shape, it just grows taller.
 *
 * ⚠ THIS IS ON THE BASE CLASS, and it was not always. It covered only
 * --meta (a full date in an events card) until 2026-09-19, when
 * scripts/check-layout.py caught two SECTION labels overflowing at
 * 375px on the Prospective Certified PFPs page: "How to become a Profit
 * First Professional" by 1.7px, and a benefit panel's "Differentiate
 * yourself in the market" by 44px. A section label is prose an editor
 * types, so there is no length this component can assume.
 *
 * It cannot regress anything already shipped: `normal` only wraps a
 * line that does not fit, and a line that does not fit is currently
 * hanging outside its parent. */
@media (max-width: 767px) {
  .pfca-pill { white-space: normal; text-align: center; }
}


/* ------------------------------------------------------------
 * .pfca-tag — THE THIRD CHIP, and the one most likely to be confused
 * with .pfca-pill above. Read this before reaching for either.
 *
 *   .pfca-eyebrow  uppercase tagline lockup        (brand guide)
 *   .pfca-pill     18px section LABEL, 37px tall   ("Webinars")
 *   .pfca-tag      14px data TAG, 30px tall        ("✓ Retail")
 *
 * The distinction is label vs. datum. A pill names a section and there
 * is one of it; a tag is one value out of a set an editor or a feed
 * supplies, and there are several in a row. They are different sizes in
 * the design because they are doing different jobs, so this is a real
 * component rather than a --small variant of the pill.
 *
 * ✓ design — Members listing (179:5586), measured 2026-09-19 off a 1:1
 * export, at the chips' horizontal CENTRES:
 *
 *   "✓ Retail"       86 × 30    white fill on the card's grey-5
 *   "✓ Healthcare"  121 × 30
 *   "✓ E-commerce"  131 × 30
 *   "…"              29 × 30    the overflow chip
 *
 * 30px is 14px × 1.2 + 2 × 6 — the type and padding below, arriving at
 * the measured height from the design's own desktop/body-xs token
 * rather than being set to it. The widths close on the same arithmetic:
 * Retail's 86 is 12 + 14 (icon) + 8 (gap) + ~40 (the advance of
 * "Retail" at 14 bold) + 12.
 *
 * ⚠ Measured at the CENTRE. A sample column through the rounded end of
 * one of these reads ~24px, and 24 is a plausible enough chip height
 * that it would not have looked wrong. Same trap the pill block above
 * documents; it is available on every rounded thing in this theme.
 *
 * Double-class variants per the specificity contract in _buttons.css.
 * ------------------------------------------------------------ */
.pfca-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;                                   /* ✓ measured — icon → text */
  padding: 6px 12px;                          /* ✓ measured */
  border-radius: var(--pfca-pill-radius);
  background-color: var(--pfca-white);        /* ✓ design */
  font-family: var(--pfca-font-body);
  font-size: var(--pfca-text-sm);             /* ✓ design — desktop/body xs, 14px */
  font-weight: var(--pfca-weight-bold);       /* ✓ design — Bold */
  line-height: var(--pfca-leading-tight);     /* ✓ design — 1.2 */
  color: var(--pfca-navy);                    /* 8.90:1 on white */
  white-space: nowrap;
}

/* The leading check. Sized and coloured here because — unlike
 * .pfca-pill__icon, which inherits so one icon serves four pill
 * variants — the design draws this glyph in Brand Green on every
 * instance while the label stays navy. Green on white is 2.44:1, which
 * is fine for a 2px-stroke decorative mark and would not be fine for
 * the text; that split is the whole reason they are coloured
 * separately. */
.pfca-tag__icon {
  flex: 0 0 auto;
  width: 14px;                                /* ✓ measured */
  height: 14px;
  color: var(--pfca-accent);                  /* ✓ design — Brand Green */
}

/* The overflow chip — "…" when a member carries more expertise than the
 * card has room for. Same box, no icon, muted so it reads as a count
 * rather than as another value. It is a button (it opens the member's
 * detail panel, where the full set is listed), so it needs the reset. */
.pfca-tag.pfca-tag--more {
  gap: 0;
  border: 0;
  color: var(--pfca-grey-120);                /* 5.59:1 on white */
  cursor: pointer;
  font: inherit;
  font-size: var(--pfca-text-sm);
  font-weight: var(--pfca-weight-bold);
}

/* Same reasoning as the pill: tag text is data, and a feed can hand us
 * a longer value than any card has room for. Let it wrap rather than
 * push it out of the card. */
@media (max-width: 767px) {
  .pfca-tag { white-space: normal; }
}

/* Intro paragraph — one step up from body. */
.pfca-lede {
  font-size: var(--pfca-text-xl);
  line-height: var(--pfca-leading-snug);
  font-weight: var(--pfca-weight-body);
}

/* Muted supporting text.
 *
 * This class used to also force font-size: 18px, and the reason was
 * purely defensive: --pfca-text-muted was the design's Grey 100%
 * (3.85:1 on white), which fails AA for normal-size text, so the class
 * pinned itself to a size where the laxer 3:1 large-text threshold
 * applied. That workaround is gone — the token is now a darkened grey
 * that passes AA at ANY size (5.76:1 on white; see
 * css/pfca-brand-tokens.css §2) — so the size coupling went with it.
 *
 * It now does one thing: set the colour. Size is the caller's business,
 * including the small steps the old comment forbade. */
.pfca-text-muted {
  color: var(--pfca-text-muted);
}

/* Text sitting on the navy ground (footer, reverse bands). */
.pfca-on-dark { color: var(--pfca-text-on-dark); }
.pfca-on-dark.pfca-on-dark--muted { color: var(--pfca-text-on-dark-muted); }


/* ------------------------------------------------------------
 * 3. The handwritten script — ARTWORK ONLY, never a font
 *
 * ⛔ The script used for "CANADA" in the Canada lockup and for "Profit"
 * in the SALES − Profit = EXPENSES tagline is an UNNAMED face. The brand
 * style guide's FONTS section does not list it; it exists only inside
 * the logo artwork, and nobody has identified or licensed it.
 *
 * This class exists to make that constraint enforceable rather than a
 * comment somebody skims: it styles an <img> or inline <svg> cut from
 * the vector source (~/Downloads/PFP-Canada_Logo.ai). It sets NO
 * font-family, and it must never be given one. If you find yourself
 * wanting to set type in this script, the answer is an exported asset —
 * or a licensing conversation — not a font stack.
 *
 * Usage:  <span class="pfca-script-art"><img src="..." alt="Canada"></span>
 * ------------------------------------------------------------ */

.pfca-script-art {
  display: inline-block;
  vertical-align: baseline;
  line-height: 0;
}

.pfca-script-art > :where(img, svg) {
  display: block;
  height: 1em;
  width: auto;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling

Variant states are written as double-class selectors (0,2,0) so globally
injected HubSpot chrome CSS at (0,1,0) can never win on source order.
See the specificity contract in the header of _buttons.css.

The menu and footer chrome lives in modules/pfca-menu.module and
modules/pfca-footer.module, NOT here. HubSpot loads a module's own
module.css only on pages that use that module, which is the right scope
for chrome — putting it here would ship the footer's CSS to every page
whether or not the footer renders. Both modules were built from the
design's own variable definitions (node 90:2314), not invented, and both
follow the double-class rule above for their hover states.
*/

/* ============================================================
 * PFCA Global Button System
 *
 * ONE button system for the whole site. Modules use these classes; they
 * do NOT define their own button styles. See docs/TSB-CARRY-FORWARD.md
 * §1.4 — TSB ended up with a customizable-button.module AND per-module
 * button classes, and got invisible-text bugs out of the collision.
 *
 * ------------------------------------------------------------
 * THE SPECIFICITY CONTRACT — read before adding anything here
 * ------------------------------------------------------------
 *
 * HubSpot injects globally-scoped chrome CSS (theme-overrides.css, module
 * CSS, the CTA/forms stylesheets) into every page, and you do not control
 * the order it lands in. A component whose states sit at the SAME
 * specificity as that global CSS wins or loses purely on source order —
 * which is not something you can reason about, test locally, or keep
 * stable across a HubSpot platform change.
 *
 * Two rules make the outcome order-independent:
 *
 *   1. VARIANT STATES ARE DOUBLE-CLASS.
 *      .pfca-btn.pfca-btn--outline:hover   → (0,2,0)
 *      NOT .pfca-btn--outline:hover        → (0,1,0)
 *      theme-overrides.css styles `.button:hover` at (0,1,0). At (0,2,0)
 *      ours wins on specificity no matter which stylesheet loads last.
 *      This is why the repetition below is intentional, not sloppy.
 *
 *   2. ELEMENT RESETS ARE WRAPPED IN :where().
 *      :where(button, .hs-button) contributes ZERO specificity, so a bare
 *      element reset can never outrank a component class. Any element
 *      reset added to this theme — here or in a module's module.css —
 *      goes inside :where(). No exceptions.
 *
 * Neither rule costs anything if applied from the start. Both are
 * expensive to retrofit once pages depend on the current cascade.
 * ------------------------------------------------------------
 *
 * COLOUR PAIRINGS are fixed by contrast, not preference — see
 * css/pfca-brand-tokens.css §2. White text is legible on the navy
 * (9.59:1) and on nothing else in this palette: white on the brand green
 * is 2.20:1. The accent button therefore takes dark ink, not white. Do
 * not "fix" that to white.
 * ============================================================ */


/* ------------------------------------------------------------
 * Element reset — zero specificity, per rule 2 above.
 * Normalises the raw elements HubSpot emits (rich-text buttons, form
 * submits, CTAs) so applying .pfca-btn to one gives a predictable start.
 * ------------------------------------------------------------ */

:where(button, input[type="submit"], input[type="button"], .hs-button, .button) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}


/* ------------------------------------------------------------
 * Base — shared by every variant. Deliberately carries NO colour;
 * colour is the variant's job, so no variant has to fight the base.
 * ------------------------------------------------------------ */

.pfca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;   /* 10px — ✓ design, the gap to a trailing icon */

  padding: var(--pfca-button-padding-y) var(--pfca-button-padding-x);
  border: var(--pfca-button-border-width) solid transparent;
  border-radius: var(--pfca-button-radius);

  font-family: var(--pfca-font-body);
  font-size: var(--pfca-button-font-size);
  font-weight: var(--pfca-button-weight);
  line-height: var(--pfca-button-line-height);   /* 1.4 — ✓ design */
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* One focus ring for every variant. :focus-visible so it shows for
 * keyboard users without ringing every mouse click. */
.pfca-btn:focus-visible {
  outline: var(--pfca-focus-ring-width) solid var(--pfca-focus-ring-color);
  outline-offset: var(--pfca-focus-ring-offset);
}

.pfca-btn[disabled],
.pfca-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}


/* ------------------------------------------------------------
 * Variant — Primary (solid navy).
 * White on navy: 9.59:1. Hover 12.12:1.
 *
 * ⚠ NOT IN THE DESIGN. Every button in the approved pages read so far
 * is either the green fill or the green-30% outline below — there is no
 * navy-filled button anywhere. This is kept rather than deleted because
 * it is the only variant that carries text legibly on a GREEN ground
 * (white on green is 2.20:1, Dark Navy on green 7.12:1 but then the
 * button disappears into the accent), so it is a genuine escape hatch.
 * But it is not the default call to action: --accent is. Do not reach
 * for this one on a page just because it is called "primary".
 * ------------------------------------------------------------ */

.pfca-btn.pfca-btn--primary {
  background-color: var(--pfca-primary);
  border-color: var(--pfca-primary);
  color: var(--pfca-primary-fg);
}

.pfca-btn.pfca-btn--primary:hover,
.pfca-btn.pfca-btn--primary:focus {
  background-color: var(--pfca-primary-hover);
  border-color: var(--pfca-primary-hover);
  color: var(--pfca-primary-fg);   /* restated so a global :hover can't strip it */
}


/* ------------------------------------------------------------
 * Variant — Accent (solid green). Secondary emphasis.
 * Dark Navy on green: 7.12:1. Hover 4.85:1. (Both were measured again
 * when the accent foreground moved off the retired invented ink
 * #0B1B30 onto the real Dark Navy token — see brand-tokens §2.)
 * ⚠ NOT white text — white on this green is 2.20:1.
 * ------------------------------------------------------------ */

.pfca-btn.pfca-btn--accent {
  background-color: var(--pfca-accent);
  border-color: var(--pfca-accent);
  color: var(--pfca-accent-fg);
}

.pfca-btn.pfca-btn--accent:hover,
.pfca-btn.pfca-btn--accent:focus {
  background-color: var(--pfca-accent-hover);
  border-color: var(--pfca-accent-hover);
  color: var(--pfca-accent-fg);
}


/* ------------------------------------------------------------
 * Variant — Outline. ✓ CORRECTED TO THE DESIGN 2026-09-17.
 *
 * This was a navy rule with navy text that filled navy on hover — all
 * three invented. The design's outline button is a GREEN 30% rule with
 * DARK NAVY text on a transparent ground, and it is the standard
 * second action beside the green fill (hero 61:784, nav CTA 90:1777,
 * download-now 62:2224).
 *
 * Text is Dark Navy, NOT the green: the rule is green at 30% because it
 * is decoration, while the label has to be readable — green text would
 * be 2.20:1. The soft rule and the dark label are doing two different
 * jobs, which is easy to miss when copying the border colour down into
 * the text.
 * ------------------------------------------------------------ */

.pfca-btn.pfca-btn--outline {
  background-color: transparent;
  border-color: var(--pfca-accent-border-soft);  /* ✓ green @ 30% */
  color: var(--pfca-text-default);               /* ✓ Dark Navy — 15.68:1 */
}

/* ⚖ THE ONE INVENTED STATE IN THIS FILE. The design records no hover
 * for the page outline button (the nav CTA has a Variant2, but that is
 * the chrome's own component). Rather than invent a fill — which would
 * be a visible design decision made by a build session — this only
 * brings the existing rule to full opacity: same colour, more present.
 * It is the most conservative reading available. Replace it if a hover
 * state is ever found in the design. */
.pfca-btn.pfca-btn--outline:hover,
.pfca-btn.pfca-btn--outline:focus {
  background-color: transparent;
  border-color: var(--pfca-accent);
  color: var(--pfca-text-default);
}


/* ------------------------------------------------------------
 * Modifier — on a dark (navy) ground: footer, reverse-logo bands.
 * Composes with --outline. Still double-class, so it still beats any
 * global (0,1,0) rule.
 * ------------------------------------------------------------ */

.pfca-btn.pfca-btn--on-dark {
  border-color: var(--pfca-text-on-dark);
  color: var(--pfca-text-on-dark);
}

.pfca-btn.pfca-btn--on-dark:hover,
.pfca-btn.pfca-btn--on-dark:focus {
  background-color: var(--pfca-text-on-dark);
  border-color: var(--pfca-text-on-dark);
  color: var(--pfca-primary);
}

.pfca-btn.pfca-btn--on-dark:focus-visible {
  outline-color: var(--pfca-text-on-dark);
}


/* ------------------------------------------------------------
 * Trailing icon. ✓ design — a 24px glyph after the label, 10px gap
 * (the gap lives on the base, so this only sizes the box).
 *
 * The icon is an <img> in the module markup pointing at a committed
 * theme asset (images/icon-arrow-right.svg), not a CSS background and
 * not hand-drawn: the asset is the exact SVG exported from the design.
 * It goes in the markup rather than a ::after background because
 * get_asset_url() resolves reliably in HubL and is not guaranteed to
 * inside an included CSS partial.
 *
 * ⚠ The exported arrow has Dark Navy (#082346) baked into its stroke,
 * so it is correct on the green fill and the outline — the two places
 * the design uses it — and WRONG on any dark ground. A reverse version
 * needs a second export, not a CSS recolour.
 * ------------------------------------------------------------ */

.pfca-btn .pfca-btn__icon {
  flex: none;
  width: 24px;      /* ✓ design */
  height: 24px;     /* ✓ design */
  display: block;
}

/* ------------------------------------------------------------
 * Size modifier — one, and it is design-verified.
 *
 * The base is now the design's PAGE button (18px). The chrome's
 * buttons are the same geometry at 16px (nav CTA 90:1777), which is
 * what --sm is. There is no third size in the design, so the old
 * invented --lg (18px, which the corrected base now is anyway) and the
 * old --sm (14px, which appears nowhere) are gone rather than kept as
 * dead choices for an editor to pick wrongly.
 * ------------------------------------------------------------ */

.pfca-btn.pfca-btn--sm {
  font-size: var(--pfca-text-base);   /* 16px — ✓ design, chrome size */
}

.pfca-btn.pfca-btn--full {
  display: flex;
  width: 100%;
}


/* ------------------------------------------------------------
 * Icon button — the square 44×44 control
 *
 * ✓ design: 44×44, 10px radius, 1px grey-20 border, white fill, a 24px
 * glyph inside. It appears twice on the Entrepreneurs page — the
 * feature card's "+" disclosure (62:570–573) and the testimonial
 * carousel's prev/next controls — which is what makes it a component
 * here rather than two module-local buttons. Modules position it and
 * set nothing else.
 *
 * 44×44 is also exactly the minimum touch target WCAG 2.2 asks for
 * (2.5.8), so the design's size needs no adjustment to be accessible.
 *
 * ------------------------------------------------------------
 * WHY THE CLASS IS REPEATED IN THE STATE SELECTORS
 * ------------------------------------------------------------
 *
 * The contract at the top of this file anticipated the global chrome
 * styling `.button:hover` at (0,1,0), which a double-class (0,2,0)
 * beats. theme-overrides.css §4 also styles the BARE ELEMENT:
 *
 *     button:hover, button:focus { background-color: ... }   (0,1,1)
 *
 * An element selector plus a pseudo-class. A single-class state here
 * would be (0,1,1) as well — a tie, decided by stylesheet order, which
 * is exactly the outcome the contract exists to prevent. Repeating the
 * class lifts these to (0,2,1) and settles it on specificity.
 *
 * This is not hypothetical: without it the carousel's next button turns
 * the theme's dark green (#305600) the instant it is clicked, because
 * a click leaves the button focused. Found by clicking it on a render —
 * it is invisible in review, and invisible in any test that does not
 * actually put the element in a focus state.
 * ------------------------------------------------------------ */

.pfca-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;                                    /* ✓ design */
  height: 44px;                                   /* ✓ design */
  padding: 0;
  border: 1px solid var(--pfca-divider-light);    /* ✓ design — grey-20 */
  border-radius: 10px;                            /* ✓ design */
  background-color: var(--pfca-white);
  color: var(--pfca-text-default);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pfca-iconbtn > svg {
  width: 24px;    /* ✓ design */
  height: 24px;
}

.pfca-iconbtn.pfca-iconbtn:hover:not([disabled]),
.pfca-iconbtn.pfca-iconbtn:focus:not([disabled]) {
  border-color: var(--pfca-accent);
  background-color: var(--pfca-grey-5);
  color: var(--pfca-text-default);
}

.pfca-iconbtn.pfca-iconbtn:focus-visible {
  outline: var(--pfca-focus-ring-width) solid var(--pfca-focus-ring-color);
  outline-offset: var(--pfca-focus-ring-offset);
}

/* Disabled rather than hidden: a control that disappears at the end of
 * a set moves everything beside it, and the user loses their place.
 *
 * [aria-disabled] is matched as well as [disabled] because the blog
 * pager's dead arrow is a <span>, not a <button> — there is nothing to
 * submit and nothing to click, and a <span> cannot carry [disabled].
 * Both spellings, one appearance. */
.pfca-iconbtn.pfca-iconbtn[disabled],
.pfca-iconbtn.pfca-iconbtn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  border-color: var(--pfca-divider-light);
  background-color: var(--pfca-white);
}

@media (prefers-reduced-motion: reduce) {
  .pfca-iconbtn { transition: none; }
}

/* ------------------------------------------------------------
 * .pfca-iconbtn--on-photo — added building the Testimonials page
 * (178:4210), for the featured-story carousel's arrows.
 *
 * ✓ design: sitting directly on a photo, the plain white button loses
 * its own border against bright imagery. The design's version is a
 * translucent dark-navy glass square with a white icon — measured off
 * the 1:1 export, not eyeballed. Reuses --pfca-divider-dark, the
 * rgba(255,255,255,0.24) border token already defined for exactly
 * this "control on a dark/photo ground" case, so this is the second
 * consumer of a token that shipped with one.
 * ------------------------------------------------------------ */

.pfca-iconbtn.pfca-iconbtn--on-photo {
  border-color: var(--pfca-divider-dark);
  background-color: rgba(8, 35, 70, 0.55);   /* ✓ Dark Navy at reduced opacity */
  color: var(--pfca-text-on-dark);
}

.pfca-iconbtn.pfca-iconbtn--on-photo:hover:not([disabled]),
.pfca-iconbtn.pfca-iconbtn--on-photo:focus:not([disabled]) {
  border-color: var(--pfca-text-on-dark);
  background-color: rgba(8, 35, 70, 0.75);
  color: var(--pfca-text-on-dark);
}

.pfca-iconbtn.pfca-iconbtn--on-photo[disabled] {
  border-color: var(--pfca-divider-dark);
  background-color: rgba(8, 35, 70, 0.35);
  color: var(--pfca-text-on-dark);
}

/* ------------------------------------------------------------
 * .pfca-iconbtn--accent — added building the Blog listing page
 * (72:4494), where every "read this post" arrow is outlined green.
 *
 * ✓ design, and this one had to be MEASURED to be believed twice
 * over. On the white card the border samples #96BC33 exactly — solid
 * brand green, not the 30% hairline the email-capture pill uses. On
 * the photo the same border samples a muted olive (greenest pixel
 * scoring 22 against the white card's 88), which reads as "not
 * green" to a colour test and is obviously green when the button is
 * zoomed: it is one green line antialiased over a dark gradient.
 * Trusting the first number would have shipped the wrong border on
 * every card in the grid.
 *
 * It is a border-only modifier, so it composes with the ground
 * variants above rather than replacing them — the same relationship
 * .pfca-btn--on-dark has with .pfca-btn--outline.
 * ------------------------------------------------------------ */

.pfca-iconbtn.pfca-iconbtn--accent {
  border-color: var(--pfca-accent);           /* ✓ measured #96BC33 */
}

.pfca-iconbtn.pfca-iconbtn--accent:hover:not([disabled]),
.pfca-iconbtn.pfca-iconbtn--accent:focus:not([disabled]) {
  border-color: var(--pfca-accent);
  background-color: var(--pfca-accent);
  color: var(--pfca-accent-fg);
}

/* ⚖ ONE DELIBERATE DEVIATION, on the arrows that sit on a post's
 * featured image.
 *
 * The design draws those with NO fill — the green outline and a white
 * glyph straight over the picture. That works because every image in
 * the design is the same dark placeholder gradient. This is a blog
 * listing: the images are whatever an editor uploads, and a white
 * glyph outlined in green over a bright photo is unreadable.
 *
 * So --on-photo's dark glass fill is kept underneath and only the
 * border colour comes from --accent. On the design's own dark
 * imagery the difference is barely visible; on a photo of a sunlit
 * office it is the difference between a visible control and none.
 * Composing the two classes is what makes that possible without a
 * third variant. */
.pfca-iconbtn.pfca-iconbtn--accent.pfca-iconbtn--on-photo {
  border-color: var(--pfca-accent);
  background-color: rgba(8, 35, 70, 0.55);
  color: var(--pfca-text-on-dark);
}
/* ============================================================
 * PFCA Card + Band System
 *
 * Read out of the approved design's Entrepreneurs page (node 61:452)
 * on 2026-09-17. Every value below is design-verified; the judgment
 * calls are marked ⚖ and there are only three of them.
 *
 * THE SPECIFICITY CONTRACT APPLIES HERE UNCHANGED — variant states are
 * double-class, element resets go in :where(). Read the header of
 * css/components/_buttons.css before adding anything; the reasoning is
 * there and is not repeated.
 *
 * ------------------------------------------------------------
 * WHAT THE DESIGN ACTUALLY HAS
 * ------------------------------------------------------------
 *
 * Two surface sizes, split by size of thing rather than by component:
 *
 *   .pfca-card  — 20px radius. Anything card-sized.
 *   .pfca-band  — 30px radius. Full-width sections and bands.
 *
 * And then the only thing that varies between card instances is the
 * EDGE TREATMENT. That is the whole taxonomy — five variants, each
 * appearing in the design more than once:
 *
 *   (default)          1px grey-20 border   feature cards, 62:570-573
 *   --accent           1px brand-green      CTA cards, 61:618 + 62:911
 *   --info             1px brand-blue       download box, 62:2227
 *   --tint             grey-5 fill, no border   quotes, 61:625 + 97:2451
 *   --plain            white fill, no border    61:598, 72:1129
 *
 * Structuring it this way — one base, variants that change only the
 * edge — is what stops the next six pages each inventing their own
 * card. If a new page needs a sixth edge treatment, add it here; do
 * not style a card inside a module.
 * ============================================================ */


/* ------------------------------------------------------------
 * Base card
 * ------------------------------------------------------------ */

.pfca-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;                                  /* ✓ design */
  padding: 40px;                              /* ✓ design */
  border: 1px solid var(--pfca-card-border);  /* ✓ design — grey-20 */
  border-radius: var(--pfca-card-radius);     /* ✓ design — 20px */
  background-color: transparent;

  /* ✓ design (backdrop-blur-[15px] on the feature cards).
   *
   * Worth knowing before someone deletes it as dead code, or "fixes"
   * it because it appears to do nothing: a backdrop filter only has a
   * visible effect where there is something BEHIND the element to
   * blur. These cards currently sit on opaque grounds, so it is a
   * no-op today. It is kept because it is in the design and becomes
   * visible the moment a card is placed over imagery — which the
   * design does elsewhere. It costs nothing where it does nothing. */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

/* ⚖ JUDGMENT CALL 1 — the design's feature cards are a fixed
 * h-[294px]. That is a canvas measurement of four cards that happen
 * to hold four specific strings, not a design rule: real editor copy
 * of any other length either overflows it or leaves it half empty.
 * Equal-height cards in a row are handled by the row being a flex or
 * grid container (align-items: stretch is the default), which gives
 * the same visual result from content rather than from a magic
 * number. No fixed height is set here, deliberately. */


/* ------------------------------------------------------------
 * Edge variants — double-class, per the contract
 * ------------------------------------------------------------ */

.pfca-card.pfca-card--accent {
  border-color: var(--pfca-accent);           /* ✓ design — brand green */
}

.pfca-card.pfca-card--info {
  /* ✓ design. Note the design writes this one as a raw #53b7e8 rather
   * than binding it to its own Brand Blue variable — an authoring
   * slip in the file, not a second blue. It is the same value as
   * --pfca-sky, so it binds to the token here. */
  border-color: var(--pfca-sky);
}

.pfca-card.pfca-card--tint {
  border-color: transparent;
  background-color: var(--pfca-canvas-alt);   /* ✓ design — grey-5 */
}

.pfca-card.pfca-card--plain {
  border-color: transparent;
  background-color: var(--pfca-white);        /* ✓ design */
}

/* The sixth edge treatment, added for the Members listing (179:5586),
 * measured 2026-09-19 off a 1:1 export.
 *
 * It is --tint and the default border TOGETHER: grey-5 fill #f9f9f9 AND
 * a grey-20 hairline #e6e6e7. Every other variant here changes exactly
 * one of fill or edge, which is why this could not be composed out of
 * the existing five — --tint explicitly clears the border, so
 * `.pfca-card--tint` plus nothing gets you a fill with no edge, and
 * there was no way to ask for both.
 *
 * It appears twelve times on that one page (the member card), which is
 * the bar this file's header sets for adding a variant rather than
 * styling a card inside a module. */
.pfca-card.pfca-card--soft {
  border-color: var(--pfca-card-border);      /* ✓ design — grey-20 */
  background-color: var(--pfca-canvas-alt);   /* ✓ design — grey-5 */
}

/* ⚖ JUDGMENT CALL 2 — padding varies between instances of the SAME
 * variant in the design: the two green-bordered CTA cards are p-30
 * (61:618) and p-40 (62:911), and the download box is p-30. 40px is
 * the base here because it is what the repeated feature-card row
 * uses; --compact exists for the 30px instances rather than letting a
 * module hard-code its own padding. */
.pfca-card.pfca-card--compact {
  padding: 30px;                              /* ✓ design */
}

/* ✓ design — the member card (179:5586) is p-20, a third step. It is
 * here rather than in the module for the same reason --compact is: a
 * card that hard-codes its own padding is a card that has stopped
 * being part of this system.
 *
 * The 20 is not a guess. The member card's internal stack sums to its
 * measured outer height exactly:
 *   20 padding + 220 photo + 30 + 30 chips + 30 + 45 button + 20 = 395
 * and 395 is what the card measures on the canvas. */
.pfca-card.pfca-card--snug {
  padding: 20px;                              /* ✓ design */
}

/* NO HOVER STATES ARE DEFINED HERE.
 *
 * The design does carry hover variants for some components — the
 * footer's book card gains a green border, the social icons invert —
 * and those are built where they belong, in the footer module. For
 * these page cards no hover variant was recorded in the node that was
 * read. An invented hover is the kind of thing that looks like a
 * design decision to everyone who sees it later, so there is none:
 * if a page card should react to hover, read it off the design
 * first. */


/* ------------------------------------------------------------
 * Bands — the 30px-radius section surfaces
 * ------------------------------------------------------------ */

.pfca-band {
  box-sizing: border-box;
  border-radius: var(--pfca-section-radius);  /* ✓ design — 30px */
  background-color: transparent;
}

.pfca-band.pfca-band--tint {
  background-color: var(--pfca-canvas-alt);   /* ✓ design — grey-5, 62:804 */
}

.pfca-band.pfca-band--accent {
  border: 1px solid var(--pfca-accent);       /* ✓ design — 97:2632 */
}

/* The dark CTA band. ⚖ JUDGMENT CALL 3 — the design fills this with a
 * literal #082346, which is Dark Navy: the colour this theme
 * otherwise treats strictly as the TEXT colour, while
 * --pfca-canvas-dark (brand navy #1D457B) is the reverse-band fill.
 * The design means Dark Navy here, so that is what ships — bound to
 * the palette token rather than to the canvas role, because using the
 * canvas role would quietly render the wrong navy. White text on
 * Dark Navy is 15.68:1, so the pairing is sound either way. */
.pfca-band.pfca-band--dark {
  background-color: var(--pfca-navy-dark);    /* ✓ design — 28:2884 */
  color: var(--pfca-text-on-dark);
}

.pfca-band.pfca-band--dark :where(h1, h2, h3, h4, h5, h6, p) {
  color: var(--pfca-text-on-dark);
}


/* ============================================================
 * ADDED 2026-09-18, building the About PF page (node 49:3904).
 *
 * That page is the first one assembled from the module library
 * rather than built as a set of sections, and it asked the card
 * system for three things it did not have. All three are read off
 * the design, all three appear more than once on that page alone,
 * and all three are here rather than inside a module for the reason
 * the header above already gives: a sixth edge treatment styled
 * inside one module is a sixth edge treatment the next page
 * reinvents.
 * ============================================================ */


/* ------------------------------------------------------------
 * --gradient — the accent edge
 * ------------------------------------------------------------
 *
 * ✓ design. Measured off 49:3904: the hero's callout, the "How it
 * started" callout, both offer boxes in the book card, and the frame
 * around the founder section all carry a 1px border that runs green
 * at the top-left to blue at the bottom-right — the same 130.5°
 * --pfca-gradient-accent the icon tiles use.
 *
 * WHY THIS IS NOT `border-image`. border-image and border-radius do
 * not compose: a border-image silently disables the corner rounding,
 * and every one of these five instances is a rounded box. So this is
 * the two-background technique — an opaque fill clipped to the
 * padding box, painted over the gradient clipped to the border box.
 *
 * THE COST, stated plainly because it is a real constraint: the fill
 * layer has to MATCH THE GROUND BEHIND THE CARD, and a card cannot
 * see its own ground. So the ground declares it, through
 * --pfca-surface-fill, and a section that paints a non-white
 * background must set that variable next to its background-color or
 * every gradient card inside it gets a white patch. The default
 * below means "white ground", which is the common case.
 */

:root {
  --pfca-surface-fill: var(--pfca-canvas);
}

.pfca-card.pfca-card--gradient,
.pfca-band.pfca-band--gradient {
  border: 1px solid transparent;
  background-image:
    linear-gradient(var(--pfca-surface-fill), var(--pfca-surface-fill)),
    var(--pfca-gradient-accent);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}


/* ------------------------------------------------------------
 * .pfca-note — the callout box, as PROSE rather than as a module
 * ------------------------------------------------------------
 *
 * ✓ design — measured from the hero callout (600×115 at 49:3904,
 * three lines of body M inside 20px/22px padding) and the "How it
 * started" callout (the same box with a 44px icon tile at a 20px
 * gap, vertically centred).
 *
 * WHY THIS IS AN ELEMENT STYLE AND NOT A MODULE FIELD. Three of the
 * five text columns on the About page end with one of these. The
 * alternative was an optional `note` group on pfca-text-image and
 * pfca-hero, and pfca-text-image's own header comment argues
 * against exactly that — a module with every slot switched off is
 * harder to reason about than a module that does one thing. A
 * callout is a paragraph with a box around it; the theme already
 * styles prose furniture (blockquote, hr) in
 * css/elements/_typography.css, and this belongs to that family.
 * It is authored inside the existing rich-text fields, seeded as a
 * default, so an editor edits the sentence and not the wrapper.
 *
 * Two flavours, both in the design:
 *   .pfca-note          gradient edge, transparent fill  (hero, "How it started")
 *   .pfca-note--tint    grey-5 fill, no edge             (the founder quote)
 */

.pfca-note {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 20px;                                  /* ✓ measured — tile → text */
  margin: 0;
  padding: 20px 22px;                         /* ✓ measured */
  border: 1px solid transparent;
  border-radius: var(--pfca-card-radius);     /* ✓ measured — 20px */
  font-size: var(--pfca-text-lg);             /* ✓ body M, 18px */
  line-height: var(--pfca-leading-normal);    /* ✓ 1.4 */
  color: var(--pfca-text-default);
  background-image:
    linear-gradient(var(--pfca-surface-fill), var(--pfca-surface-fill)),
    var(--pfca-gradient-accent);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.pfca-note.pfca-note--tint {
  border-color: transparent;
  background-image: none;
  background-color: var(--pfca-canvas-alt);   /* ✓ design — grey-5 */
}

/* The note's own paragraphs. Scoped as :where(.pfca-note) p — (0,0,1)
 * — so it beats the theme's element resets and still loses to any
 * component class, per the specificity contract in _buttons.css. */
:where(.pfca-note) p { margin: 0; }
:where(.pfca-note) p + p { margin-top: 0.6em; }

/* ✓ measured: 42px between the paragraph above and the note in the
 * hero, 42px in "How it started", 30px in the founder section. 40px is
 * the value. (0,2,0) so it beats the margin:0 above it, and scoped to
 * :not(:first-child) so a note that opens a rich-text block does not
 * push itself off its own section's spacing. */
.pfca-note:not(:first-child) { margin-top: 40px; }

/* The 44px gradient tile. Same size, radius and fill as the feature
 * cards' icon tile — it is the same element in the design, reused
 * inside a callout. The glyph is optional: the tile is the brand
 * element and reads correctly empty, which is how the feature-card
 * module already treats it. */
.pfca-note__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;                                /* ✓ measured */
  height: 44px;
  border-radius: 10px;                        /* ✓ design */
  background-image: var(--pfca-gradient-accent);
}

.pfca-note__icon img {
  display: block;
  width: 24px;
  height: 24px;
}


/* ------------------------------------------------------------
 * .pfca-band--inset — the band as the design actually draws it
 * ------------------------------------------------------------
 *
 * ✓ design, and this one CORRECTS an assumption. The theme has been
 * painting a tinted section edge-to-edge across the viewport. On
 * 49:3904 every tinted section is a ROUNDED BAND inset 40px from the
 * 1728px frame — 1648px wide — with 40px of its own horizontal
 * padding, which is what puts its content back on the same 1568px
 * column as every other section. Measured on both tinted sections of
 * that page ("What we stand for", "The Book"): x 40→1687 at y 1560
 * and y 3700.
 *
 * Vertical padding measures 80px on the first and 100px on the
 * second. 80px ships as the value because it is the one attached to
 * the repeated pattern (a heading over a card row); the 100px
 * instance is a single bespoke section.
 */

.pfca-band.pfca-band--inset {
  max-width: 1648px;                          /* ✓ measured */
  margin-inline: auto;
  padding-block: 80px;                        /* ✓ measured */
  padding-inline: 40px;                       /* ✓ measured */
}

@media (max-width: 1023px) {
  .pfca-band.pfca-band--inset { padding-block: 56px; padding-inline: 32px; }
}

@media (max-width: 767px) {
  .pfca-band.pfca-band--inset {
    padding-block: 40px;
    padding-inline: 20px;
    border-radius: var(--pfca-card-radius);   /* 30px reads heavy at phone width */
  }
}
/* ============================================================
 * Icon tile — the gradient square that carries a glyph
 *
 * ✓ design: a 42px square, 10px radius, filled with the brand's
 * green→blue gradient, with a 24px white glyph centred in it.
 *
 * WHY THIS IS A COMPONENT AND NOT A MODULE-LOCAL CLASS.
 * It started as .pfca-feature-cards__tile, because the Entrepreneurs
 * page (62:570–573) was the only place it appeared. The homepage's
 * stat row (27:1047–1063) draws the identical tile — same size, same
 * radius, same gradient, same 24px glyph — so keeping a second copy
 * inside pfca-stat-cards would mean the brand's icon tile had two
 * definitions that could drift apart silently. That is precisely the
 * failure §1.4 of the carry-forward plan records for TSB's buttons:
 * module-local classes growing up beside a global system until a
 * change to one produced invisible text in the other.
 *
 * The tile renders correctly with NO glyph. Both modules take their
 * icon as an optional field, and a tile with an empty middle is still
 * the brand element — the gradient, the size, the radius. Nothing here
 * assumes an <img> is present.
 * ============================================================ */

.pfca-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 42px;    /* ✓ design */
  height: 42px;   /* ✓ design */

  /* ✓ measured off the corner curve: the fill starts 7px in at the top
   * row and reaches the edge 10px down. The same number as the button
   * and chrome radii, but its own decision — see the note in
   * pfca-brand-tokens.css about not collapsing those tokens into one. */
  border-radius: 10px;

  background-image: var(--pfca-gradient-accent);   /* ✓ green → blue, 130.5° */
}

/* ✓ design: the glyph is white and sits 24px inside the 42px tile.
 * object-fit rather than a bare width/height so an icon exported at a
 * different aspect ratio is letterboxed inside the tile instead of
 * being stretched across it. */
.pfca-icon-tile__glyph {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
/* ============================================================
 * PFCA Tick List
 *
 * The design's ticked list, as a shared component.
 *
 * WHY THIS FILE EXISTS. pfca-checklist.module already draws this
 * list, and draws it correctly — every value below is copied from
 * its module.css, which measured them off the approved design. But
 * HubSpot only serves a module's CSS on pages where that module is
 * placed, so a second module that needs a tick list cannot borrow
 * the first one's classes: it gets unstyled <li>s on any page where
 * pfca-checklist is not also present. The choice is between
 * duplicating the rules inside the second module or lifting them to
 * the theme, and the card system next door already answers that
 * question — a shared visual element lives in css/components/ so the
 * next page does not reinvent it.
 *
 * Added 2026-09-18 for pfca-book-offer, the About PF book section,
 * whose right-hand column carries a three-item tick list inside a
 * card.
 *
 * ⚠ pfca-checklist.module KEEPS ITS OWN COPY, on purpose. Converging
 * it onto these classes means renaming the classes its module.css and
 * module.js already use, on a module that is built, shipped and
 * correct, for no behaviour change. Do that when that module is next
 * being reworked for a reason of its own — the same call the footer's
 * `items` field names in GUARDRAILS.md. Until then: any change to the
 * tick treatment has to land in both places, and this comment is the
 * reminder.
 * ============================================================ */

.pfca-ticklist {
  display: flex;
  flex-direction: column;

  /* Scoped as :where(.pfca-ticklist) li rather than
   * :where(.pfca-ticklist li) so this beats the theme's own (0,0,0)
   * element resets in css/elements/_typography.css whatever order the
   * stylesheets land in, while still losing to any component class.
   * The theme's `li + li { margin-top: 0.4em }` is exactly what would
   * otherwise reopen the row gaps measured below. */
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(.pfca-ticklist) li { margin: 0; }

/* ✓ measured row gaps. The two values look arbitrary next to each
 * other and are not: the roomy instance's rows are three lines each
 * and need separating; the tight instance's are one line each and
 * read as a single block, which is what the book card's list is. */
.pfca-ticklist.pfca-ticklist--comfortable { gap: 10px; }
.pfca-ticklist.pfca-ticklist--tight       { gap: 2px; }

.pfca-ticklist__item {
  display: flex;
  align-items: flex-start;   /* ✓ the tick aligns to the FIRST line, not the block */
  gap: 10px;                 /* ✓ measured tick box → text */
}

.pfca-ticklist__tick {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;

  /* ✓ Optically the tick sits on the text's cap height rather than its
   * line-box top — about 4px of half-leading on 18px/1.4 text. Without
   * this it floats above the first letter. */
  margin-top: 1px;
}

.pfca-ticklist.pfca-ticklist--sky   .pfca-ticklist__tick { color: var(--pfca-support-cool); }  /* ✓ #53b7e8 */
.pfca-ticklist.pfca-ticklist--green .pfca-ticklist__tick { color: var(--pfca-accent); }        /* ✓ #96bc33 */

.pfca-ticklist__text {
  min-width: 0;
  font-size: var(--pfca-text-lg);            /* 18px — ✓ body M */
  line-height: var(--pfca-leading-normal);   /* 1.4 — ✓ */
  color: var(--pfca-navy);                   /* ✓ brand navy, as every other body run */
}

.pfca-ticklist__text :where(strong, b) {
  font-weight: var(--pfca-weight-bold);
  color: var(--pfca-text-default);
}
/* ============================================================
 * .pfca-pager — the numbered page control
 *
 * ✓ design. Drawn identically on the blog listing (72:4494) and on
 * the Seminars/webinars/events page (72:682): 44×44 controls on a
 * 10px gap, arrows at each end, the current page filled grey-10 and
 * outlined navy, and a "…" standing in for the pages the window
 * skips. Both measured off 1:1 exports.
 *
 * WHY THIS IS A COMPONENT AND NOT PART OF THE BLOG TEMPLATE. It was
 * written for css/templates/blog-listing.css in PR#37 and promoted
 * here on 2026-09-19, when the events page needed the same control.
 * The alternative was a second copy, and a second copy is how the
 * two of them quietly stop matching. Nothing about the appearance
 * changed in the move.
 *
 * The two pagers differ in MECHANISM, not in looks: the blog's is
 * server-rendered and its pages are URLs, the events page's is built
 * by js/pfca-events.js and its pages are slices of an array already
 * in the browser. Both emit these class names, so this file is the
 * one place the control is described.
 *
 * TWO THINGS ARE PER-PAGE, so they are custom properties rather than
 * hard values — a caller sets them on .pfca-pager itself:
 *
 *   --pfca-pager-gap-top   ✓ 90px on the blog, 80px on events
 *   justify-content        ✓ right on the blog, centred on events
 *                            (.pfca-pager--center)
 * ============================================================ */

.pfca-pager {
  --pfca-pager-gap-top: 90px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;            /* ✓ design — right-aligned under the blog grid */
  gap: 10px;                            /* ✓ measured */
  margin-block-start: var(--pfca-pager-gap-top);
}

/* ✓ design, events 72:682 — all three listings centre their pager
 * under the grid rather than right-aligning it. Measured: the row
 * runs x670→1057, centre 863.5, against a page centre of 864. */
.pfca-pager.pfca-pager--center { justify-content: center; }

.pfca-pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                                  /* ✓ measured */
  height: 44px;
  border: 1px solid var(--pfca-divider-light);  /* ✓ measured grey-20 */
  border-radius: var(--pfca-button-radius);     /* ✓ 10px */
  background-color: var(--pfca-white);
  font-size: var(--pfca-text-lg);
  font-weight: var(--pfca-weight-bold);
  line-height: 1;
  color: var(--pfca-navy);                      /* ✓ design */
  text-decoration: none;
}

.pfca-pager__page:hover,
.pfca-pager__page:focus {
  border-color: var(--pfca-accent);
  color: var(--pfca-text-default);
}

/* ✓ design — the page you are on is filled grey-10 and outlined navy.
 * It is rendered as a <span>, not a link: a link to the page you are
 * already on is a control that does nothing. */
.pfca-pager__page.pfca-pager__page--current {
  border-color: var(--pfca-navy);               /* ✓ measured #1D457B */
  background-color: var(--pfca-grey-10);        /* ✓ measured #F2F2F3 */
  color: var(--pfca-navy);
}

.pfca-pager__gap {
  display: inline-flex;
  align-items: flex-end;
  height: 44px;
  padding-inline: 4px;
  color: var(--pfca-navy);
  font-size: var(--pfca-text-lg);
  font-weight: var(--pfca-weight-bold);
  line-height: 2.4;
}

/* The arrows are .pfca-iconbtn, which is already 44×44 with a 10px
 * radius and a grey-20 border — the same control the design draws
 * here. This only has to undo the anchor's underline, since
 * .pfca-iconbtn was written for <button>. */
.pfca-pager__arrow { text-decoration: none; }
.pfca-pager__arrow > svg { width: 20px; height: 20px; }

@media (max-width: 1023px) {
  .pfca-pager { --pfca-pager-gap-top: 48px; }
}

@media (max-width: 767px) {
  /* The pager's window can still be seven controls wide at 375px;
   * centring it stops the row looking broken when it wraps. */
  .pfca-pager { justify-content: center; }
}
/* ============================================================
 * PFCA Email Capture — the inline "Your email + button" pill
 *
 * Read off the Blog listing design (node 72:4494) on 2026-09-19,
 * measured from a 1:1 PNG export (get_metadata / get_design_context
 * are broken on this Figma file — CLAUDE.md, Design assets).
 *
 * ✓ = read from the design. ⚖ = a judgment call.
 *
 * ------------------------------------------------------------
 * WHY THIS IS A GLOBAL COMPONENT AND NOT MODULE CSS
 * ------------------------------------------------------------
 *
 * The design draws this control TWICE on one page, on two different
 * grounds and at two different sizes of surrounding type:
 *
 *   in the hero          600 × 53, white fill, green-30% hairline
 *   in the subscribe band 600 × 56, white-6% fill, white-24% hairline
 *
 * Same width, same radius, same green button, same placeholder — one
 * control, two grounds. It is consumed by pfca-hero.module and
 * pfca-cta-band.module, so it belongs beside .pfca-btn and .pfca-card
 * in the global layer rather than being written twice. Same reasoning
 * the header of css/components/_cards.css gives for card variants:
 * a second copy inside a module is a second copy the next page
 * reinvents.
 *
 * The specificity contract in css/components/_buttons.css applies
 * unchanged — variant states are double-class, element resets go in
 * :where().
 *
 * ------------------------------------------------------------
 * ⚠ WHAT IS AND IS NOT VERIFIED HERE
 * ------------------------------------------------------------
 *
 * The PILL is verified: it is our own wrapper and it renders exactly
 * as measured.
 *
 * What is inside it may not be. When an editor picks a HubSpot form,
 * HubSpot renders ITS OWN markup in this box and the rules at the
 * bottom of this file reach into it by class name. Those class names
 * are the classic embed's (.hs-input, .hs-button). A form that
 * renders into a shadow root or an iframe cannot be styled from here
 * at all, and will sit in a correctly-shaped pill looking like a
 * stacked HubSpot form. No PFCA form exists in portal 6670407 yet, so
 * this is unverifiable today — it is written the documented way and
 * flagged, rather than left to be discovered.
 *
 * The module that owns the field renders a BUTTON ONLY when no form
 * is selected — deliberately not this pill with a dead input in it.
 * An email box that accepts an address and drops it is the exact
 * silent failure the global CLAUDE.md is about; a button that goes
 * somewhere is honest about what it does.
 * ============================================================ */

.pfca-email-capture {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /* ✓ measured 600px in both instances — and stated as a DEFINITE
   * width rather than `width: 100%; max-width: 600px`, which is what
   * this rule said first and which rendered 351px.
   *
   * Both of this component's hosts shrink-wrap their children:
   * pfca-hero's text column is a flex column with align-items:
   * flex-start, and pfca-cta-band's stack centres. A percentage width
   * inside a shrink-to-fit parent is circular — the parent sizes to
   * the child, the child asks for a percentage of the parent — and
   * CSS resolves it to the content's own width. A definite 600px
   * breaks the loop and the parent sizes to it; max-width: 100% then
   * keeps it inside anything narrower. */
  width: 600px;
  max-width: 100%;
  padding: 5px;                                  /* ✓ measured — 4px light, 6px dark; one value */
  border: 1px solid var(--pfca-accent-border-soft);  /* ✓ measured #E0EBC2 = green at 30% over white */
  border-radius: var(--pfca-chrome-radius);      /* ✓ 10px */
  background-color: var(--pfca-white);           /* ✓ design */
}

/* No height is set. ✓ measured 53px light / 56px dark — which is the
 * button's own height plus the 5px padding either side, so it falls
 * out of the button rather than being pinned to a number that stops
 * being true the moment the button's label wraps. Same reasoning as
 * ⚖ JUDGMENT CALL 1 in css/components/_cards.css. */

/* The pill is populated by HubSpot's own form markup — the module
 * renders no input of its own, because there is nothing honest for a
 * self-built input to submit to (see this file's header). The rules
 * that shape HubSpot's markup are at the bottom of this file; the
 * focus ring is hoisted to the PILL here so the visible ring wraps
 * the whole control instead of drawing a second rectangle inside it.
 * :focus-within, so keyboard focus is never invisible. */

.pfca-email-capture:focus-within {
  outline: var(--pfca-focus-ring-width) solid var(--pfca-focus-ring-color);
  outline-offset: var(--pfca-focus-ring-offset);
}

/* The button is a plain .pfca-btn--accent — ✓ measured 45px tall
 * against the global button's own 47px, i.e. the same button. It only
 * needs to stop shrinking when the placeholder is long. */
.pfca-email-capture .pfca-btn {
  flex: 0 0 auto;
}


/* ------------------------------------------------------------
 * --on-dark — the subscribe band's ground
 * ------------------------------------------------------------
 *
 * ✓ measured: fill #173051 on the Dark Navy band, which is
 * rgba(255,255,255,0.06) over #082346 to within a rounding step.
 * Written as the translucent white rather than the flat hex on
 * purpose — it then holds on ANY dark ground, and the band's own
 * fill is an editor-facing choice in pfca-cta-band.
 *
 * The border reuses --pfca-divider-dark, the rgba(255,255,255,0.24)
 * token already defined for controls on a dark ground and already
 * consumed by .pfca-iconbtn--on-photo.
 * ------------------------------------------------------------ */

.pfca-email-capture.pfca-email-capture--on-dark {
  border-color: var(--pfca-divider-dark);        /* ✓ measured */
  background-color: rgba(255, 255, 255, 0.06);   /* ✓ measured #173051 over Dark Navy */
}

.pfca-email-capture.pfca-email-capture--on-dark :where(input.hs-input) {
  color: var(--pfca-text-on-dark);
}

.pfca-email-capture.pfca-email-capture--on-dark :where(input.hs-input)::placeholder {
  color: var(--pfca-text-on-dark-muted);         /* ✓ design — muted white, not grey */
  opacity: 1;
}

/* On Dark Navy the navy focus ring is invisible. White is the only
 * value that works here, and it is the same swap .pfca-btn--on-dark
 * already makes in css/components/_buttons.css. */
.pfca-email-capture.pfca-email-capture--on-dark:focus-within {
  outline-color: var(--pfca-text-on-dark);
}


/* ------------------------------------------------------------
 * A HubSpot form rendered INSIDE the pill
 * ------------------------------------------------------------
 *
 * Classic embed markup only — see the ⚠ in this file's header. These
 * rules do nothing when no form is present, which is the state the
 * portal is in today, so they cost nothing until a form exists and
 * save a pass when one does.
 * ------------------------------------------------------------ */

.pfca-email-capture :where(form) {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0;
}

.pfca-email-capture :where(.hs-form-field) {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* HubSpot ships each field with its own <label>; the design has a
 * placeholder and no visible label. Hidden accessibly rather than
 * display:none, so the input keeps its accessible name. */
.pfca-email-capture :where(.hs-form-field > label) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pfca-email-capture :where(input.hs-input) {
  width: 100%;
  padding: 0 15px;
  border: 0;
  background: transparent;
  font-family: var(--pfca-font-body);
  font-size: var(--pfca-text-lg);
  line-height: var(--pfca-leading-normal);
  color: inherit;
}

.pfca-email-capture :where(.hs_submit, .actions) { margin: 0; }

/* HubSpot's submit is an <input type="submit">, which cannot carry an
 * icon and does not pick up .pfca-btn from the module's markup — so
 * the button system's values are restated here rather than the class
 * being expected to land on it. The values come from the tokens, so
 * this stays in step with .pfca-btn itself. */
.pfca-email-capture :where(input.hs-button) {
  flex: 0 0 auto;
  padding: var(--pfca-button-padding-y) var(--pfca-button-padding-x);
  border: var(--pfca-button-border-width) solid transparent;
  border-radius: var(--pfca-button-radius);
  background-color: var(--pfca-accent);
  color: var(--pfca-accent-fg);
  font-family: var(--pfca-font-body);
  font-size: var(--pfca-button-font-size);
  font-weight: var(--pfca-button-weight);
  line-height: var(--pfca-button-line-height);
  cursor: pointer;
}

.pfca-email-capture :where(input.hs-button):hover {
  background-color: var(--pfca-accent-hover);
}


/* ------------------------------------------------------------
 * Narrow widths
 * ------------------------------------------------------------
 *
 * ⚖ The design has no mobile artboard for this control (it has none
 * for any section — see the heading-clamp note in
 * theme-overrides.css). Below 480px a 600px pill holding an 18px
 * placeholder and a 200px button cannot stay on one line, so it
 * stacks: full-width field over full-width button, the pill becoming
 * a simple bordered box. Per the standing rule that responsive
 * behaviour is Claude's call where the design is silent.
 * ------------------------------------------------------------ */

@media (max-width: 479px) {
  .pfca-email-capture {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
  }

  .pfca-email-capture :where(form) { flex-direction: column; align-items: stretch; gap: 8px; }
  .pfca-email-capture :where(input.hs-button) { width: 100%; }
}
/* ============================================================
 * PFCA Form — the design's treatment for a HubSpot form embed
 *
 * ✓ = measured off a 1:1 PNG export of the approved design's
 * Prospective Certified PFPs page (95:6530), "Ready to join?".
 * ⚖ = a judgment call.
 *
 * WHY THIS IS OPT-IN. Every rule below is scoped under .pfca-form, so
 * it reaches a form only where a module has asked for it. A theme-wide
 * skin would silently restyle the form already placed on the Contact
 * draft page, which is a separate decision from this one and belongs
 * in its own change. Opt that page in by adding the class — nothing
 * here needs to move.
 *
 * WHY :where(). The selectors below have to reach markup HubSpot
 * generates, which the theme does not control. :where() contributes
 * zero specificity, so every one of these lands at (0,1,0) — the
 * .pfca-form class alone. A module can therefore override any of it
 * with a single class of its own, and the specificity contract in
 * css/components/_buttons.css stays intact. The same reasoning, and
 * the same class names, as css/components/_email-capture.css.
 *
 * THE MEASUREMENTS:
 *     field box        46px tall, 1px grey-50 border, radius 10   ✓
 *     field fill       the PANEL's own tint, not white — the design
 *                      draws outlined boxes on grey-5, not white
 *                      wells. Easy to get wrong from a thumbnail.   ✓
 *     field text       18px / 1.4                                  ✓
 *     label            14px bold, brand navy, 8px above its field   ✓
 *     group heading    18px bold, Dark Navy                        ✓
 *     row gap          14px between fields                         ✓
 *     submit           the theme's green button, unchanged          ✓
 * ============================================================ */

.pfca-form {
  --pfca-form-field-fill: transparent;   /* inherits the panel's tint ✓ */
  --pfca-form-field-border: var(--pfca-grey-50);
  --pfca-form-field-radius: 10px;        /* ✓ same as the button radius */

  font-family: var(--pfca-font-body);
  color: var(--pfca-text-default);
}


/* ------------------------------------------------------------
 * Field rows
 * ------------------------------------------------------------ */

.pfca-form :where(.hs-form-field) { margin-bottom: 14px; }   /* ✓ */

/* HubSpot puts the label text inside a <span> and the required mark in
 * its own <span class="hs-form-required">. Both inherit from here. */
.pfca-form :where(.hs-form-field > label) {
  display: block;
  margin-bottom: 8px;                        /* ✓ */
  font-size: var(--pfca-text-sm);            /* 14px — ✓ */
  font-weight: var(--pfca-weight-bold);      /* ✓ */
  line-height: var(--pfca-leading-normal);
  color: var(--pfca-navy);                   /* ✓ brand navy */
}

.pfca-form :where(.hs-form-required) {
  margin-left: 2px;
  color: var(--pfca-navy);
}

/* HubSpot's own help text under a field. */
.pfca-form :where(.hs-field-desc) {
  margin: 0 0 8px;
  font-size: var(--pfca-text-base);
  line-height: var(--pfca-leading-normal);
  color: var(--pfca-text-muted);
}


/* ------------------------------------------------------------
 * Controls
 *
 * input[type] is enumerated rather than blanket-selected so the
 * checkbox and radio inputs keep their native rendering — a 46px-tall
 * rounded checkbox is not what the design draws.
 * ------------------------------------------------------------ */

.pfca-form :where(
  input[type="text"].hs-input,
  input[type="email"].hs-input,
  input[type="tel"].hs-input,
  input[type="number"].hs-input,
  input[type="url"].hs-input,
  input[type="date"].hs-input,
  input[type="search"].hs-input,
  select.hs-input,
  textarea.hs-input
) {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;                                     /* ✓ */
  padding: 10px 16px;                                   /* ✓ */
  border: 1px solid var(--pfca-form-field-border);      /* ✓ */
  border-radius: var(--pfca-form-field-radius);         /* ✓ */
  background-color: var(--pfca-form-field-fill);        /* ✓ */
  font-family: var(--pfca-font-body);
  font-size: var(--pfca-text-lg);                       /* 18px — ✓ */
  line-height: var(--pfca-leading-normal);              /* 1.4  — ✓ */
  color: var(--pfca-text-default);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pfca-form :where(textarea.hs-input) {
  min-height: 120px;   /* ⚖ the design shows one multi-line field; the
                        * height is not dimensioned in it. */
  resize: vertical;
}

/* ✓ the design's placeholder grey. --pfca-text-muted rather than the
 * design's Grey 100% for the same contrast reason the token itself
 * records — see pfca-brand-tokens.css §2. */
.pfca-form :where(.hs-input)::placeholder {
  color: var(--pfca-text-muted);
  opacity: 1;   /* Firefox dims placeholders by default */
}

/* A select needs its own chevron once appearance is normalised. Inline
 * SVG in a data URI rather than an asset: it is two line segments, and
 * an <img> cannot be a background. */
.pfca-form :where(select.hs-input) {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D457B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px 20px;
}

.pfca-form :where(.hs-input):focus {
  outline: none;
  border-color: var(--pfca-navy);
  box-shadow: 0 0 0 1px var(--pfca-navy);
}

/* Keyboard users get the theme's ring as well as the border change —
 * the border alone is a 3:1-ish tell and not a reliable focus
 * indicator on its own. */
.pfca-form :where(.hs-input):focus-visible {
  outline: var(--pfca-focus-ring-width) solid var(--pfca-focus-ring-color);
  outline-offset: var(--pfca-focus-ring-offset);
}


/* ------------------------------------------------------------
 * Checkboxes and radios — ✓ the design draws a plain native control
 * with its label beside it, left aligned, options in a row.
 * ------------------------------------------------------------ */

.pfca-form :where(.inputs-list) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;      /* ✓ the Yes / No pair sits ~32px apart */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* This list is a LAYOUT, so it opts out of the theme's
 * `li + li { margin-top: .4em }` rather than merely out-specifying it.
 * See the module-authoring checklist in GUARDRAILS.md. */
:where(.pfca-form .inputs-list) li { margin: 0; }

.pfca-form :where(.inputs-list > li > label) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pfca-text-lg);
  line-height: var(--pfca-leading-normal);
  color: var(--pfca-text-default);
  cursor: pointer;
}

.pfca-form :where(input[type="checkbox"], input[type="radio"]) {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--pfca-navy);
  cursor: pointer;
}


/* ------------------------------------------------------------
 * Fieldset columns — HubSpot's own multi-column rows.
 * ------------------------------------------------------------ */

.pfca-form :where(.form-columns-2, .form-columns-3) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  max-width: none !important;   /* HubSpot inlines a max-width here */
}

.pfca-form :where(.form-columns-2 > .hs-form-field),
.pfca-form :where(.form-columns-3 > .hs-form-field) {
  flex: 1 1 220px;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}


/* ------------------------------------------------------------
 * Rich text between field groups — the design's "Personal
 * Informations" / "Aplication details" headings come through as
 * form rich text, so they are styled here rather than hard-coded.
 * ------------------------------------------------------------ */

.pfca-form :where(.hs-richtext) {
  margin: 0 0 20px;
  font-size: var(--pfca-text-lg);
  line-height: var(--pfca-leading-normal);
  color: var(--pfca-text-default);
}

.pfca-form :where(.hs-richtext:not(:first-child)) { margin-top: 20px; }   /* ✓ group spacing */

.pfca-form :where(.hs-richtext h2, .hs-richtext h3, .hs-richtext h4, .hs-richtext p > strong) {
  margin: 0;
  font-family: var(--pfca-font-display);
  font-size: var(--pfca-text-lg);            /* 18px — ✓ */
  font-weight: var(--pfca-weight-bold);
  line-height: var(--pfca-leading-normal);
  color: var(--pfca-text-default);           /* ✓ Dark Navy */
}


/* ------------------------------------------------------------
 * Submit — the theme's own button, not a second one
 * ------------------------------------------------------------ */

.pfca-form :where(.hs_submit) { margin-top: 24px; }   /* ✓ */

/* css/components/_buttons.css already gives .hs-button the green fill,
 * the 10px radius and the 10/16 padding. Nothing is restated here — a
 * second copy of the button system is exactly the divergence that
 * file's header warns against. Only the things a form's submit needs
 * that a link button does not. */
.pfca-form :where(input.hs-button, button.hs-button) {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}


/* ------------------------------------------------------------
 * Validation
 * ------------------------------------------------------------ */

.pfca-form :where(.hs-error-msgs) {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

:where(.pfca-form .hs-error-msgs) li { margin: 0; }

.pfca-form :where(.hs-error-msg, .hs-error-msgs label) {
  font-size: var(--pfca-text-base);
  line-height: var(--pfca-leading-normal);
  color: #B3261E;   /* ⚖ not in the palette — neither source defines an
                     * error colour. Measured 4.83:1 on the grey-5 panel
                     * and 5.09:1 on white, so it carries AA at body
                     * size. Replace it the day an error state is
                     * actually designed. */
}

.pfca-form :where(.hs-input.invalid) { border-color: #B3261E; }

/* The inline thank-you message a form swaps itself for. */
.pfca-form :where(.submitted-message) {
  font-size: var(--pfca-text-lg);
  line-height: var(--pfca-leading-normal);
  color: var(--pfca-text-default);
}


/* ------------------------------------------------------------
 * ⚖ Responsive
 * ------------------------------------------------------------ */

@media (max-width: 767px) {
  .pfca-form :where(.form-columns-2, .form-columns-3) { gap: 0; }
  .pfca-form :where(.form-columns-2 > .hs-form-field),
  .pfca-form :where(.form-columns-3 > .hs-form-field) { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pfca-form :where(.hs-input) { transition: none; }
}