/* ============================================================
   Prop Firms — page styles (Directory / Firm Profile)
   Ported from docs/design/design-reference/styles/pages.css.
   ============================================================ */

/* ---------- Page header band (clean, editorial) ---------- */
.page-head { background: #fff; border-bottom: 1px solid var(--pf-line); padding: 40px 0 32px; }
.page-head .inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: 38px; line-height: 1.05; }
.page-head .desc { color: var(--pf-muted); font-size: 16px; margin-top: 10px; max-width: 560px; }

/* The directory head keeps its copy left-aligned (matching every other page)
   but stacks the asset pillbar beneath it, centered, so the category control
   reads as the page's primary control rather than a stray row above the filter
   card. The pillbar hugs its content, so a full-width flex row centers it. */
.dir-head .inner { flex-direction: column; align-items: stretch; }
.dir-head #dir-asset { align-self: center; margin-top: 24px; }

/* ---------- Filter bar ---------- */
.filterbar {
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg);
  box-shadow: var(--pf-shadow-card); padding: 18px 20px; margin-top: -28px;
}
.filter-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr; gap: 14px; align-items: end; }
.filterbar .field label { margin-bottom: 6px; }
.filterbar .search-field .ic { top: calc(50% + 9px); }

.results-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0 14px; flex-wrap: wrap; }
.results-row .count { font-size: 14px; color: var(--pf-muted); }
.results-row .count strong { color: var(--pf-heading); font-family: var(--font-display); }
.btn-clear { display: inline-flex; align-items: center; gap: 7px; }

.plat-list { display: flex; gap: 6px; flex-wrap: wrap; max-width: 200px; }


/* Chrome the user wouldn't sensibly select/copy. Keep it off result *values*
   (firm names, funding, fees) which are legitimately copy-worthy. */
.filterbar label,
.results-row .count,
.ftable thead th,
.stars,
.firm-mark,
.firm-logo,
.dt-chev,
.faq-q::before { user-select: none; }

/* Breathing room between the page-head copy and the filter card, applied via
   the head's bottom padding so the filterbar's negative margin stays a fixed
   overlap. Use the same rhythm on every page that pairs a head with a card. */
.page-head { padding-bottom: 48px; }

/* Search-field magnifier: the icon is absolutely positioned within the whole
   field (label + input), so the shared `top:50%` lands above the input. Anchor
   it to the input's centre from the bottom instead — independent of label
   height. (The input is ~41px tall: 10px padding ×2 + ~17px line + 2px border.)
   The span must be sized to the 15px SVG (height + line-height) or its taller
   line-box offsets the glyph and the centring drifts. */
.filterbar .search-field .ic {
  top: auto; bottom: 20px; transform: translateY(50%);
  display: block; height: 15px; line-height: 15px;
}

/* ============================================================
   FIRM PROFILE
   ============================================================ */
.fp-head { background: #fff; border-bottom: 1px solid var(--pf-line); padding: 28px 0 0; }
.fp-back { font-family: var(--font-display); font-size: 14px; color: var(--pf-muted); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.fp-back:hover { color: var(--pf-green); }
.fp-id { display: flex; gap: 20px; align-items: flex-start; }
.fp-id .fp-titles { flex: 1; }
.fp-id h1 { font-size: 34px; }
.fp-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fp-tagline { color: var(--pf-muted); font-size: 16px; margin-top: 8px; padding-bottom: 0; }
.fp-meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; color: var(--pf-muted); font-size: 14px; }
.fp-meta .m { display: flex; align-items: center; gap: 7px; }
.fp-meta .m strong { color: var(--pf-heading); font-family: var(--font-display); font-weight: 400; }

.fp-stats { display: flex; gap: 0; overflow-x: auto; border-top: 1px solid var(--pf-line); margin-top: 24px; }
.fp-stat { flex: 1; min-width: 130px; padding: 18px 20px; border-right: 1px solid var(--pf-line); }
.fp-stat:last-child { border-right: 0; }
.fp-stat .v { font-family: var(--font-display); font-size: 20px; color: var(--pf-heading); }
.fp-stat .l { font-size: 12px; color: var(--pf-faint); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }

.fp-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.fp-deal {
  background: var(--gray-150);
  border: 1.5px solid #fff; border-radius: var(--pf-radius-lg); padding: 16px 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px;
}
.fp-deal .dl { flex: 1; min-width: 200px; }
.fp-deal .dl .lbl { font-family: var(--font-display); font-size: 16px; color: var(--pf-green-shade); }
.fp-deal .dl .lbl .deal-prefix { font-weight: 700; }
.fp-deal .dl .ds { font-size: 14px; color: var(--pf-text); margin-top: 3px; }
.code-copy { display: inline-flex; align-items: center; background: #fff; border: 1.5px dashed var(--pf-green); border-radius: var(--pf-radius); padding: 8px 14px; cursor: pointer; }
.code-copy code { font-family: ui-monospace, Menlo, monospace; font-size: 15px; font-weight: 700; color: var(--pf-green); background: none; }

/* Compare deal band: the two firms' promos side by side, above the matrix. The
   grid mirrors .cmp-selectbar (1fr / VS gap / 1fr) so each promo lines up under
   its selector. The two cells are placed into columns 1 and 3 explicitly, so the
   middle track is left empty by the grid — no spacer element to lose across an
   HTMX swap or cached fragment. Each cell reuses .fp-deal (see the firm page);
   .fp-deal's own margin-bottom is dropped here since the grid owns the spacing. */
.cmp-deals { display: grid; grid-template-columns: 1fr 52px 1fr; gap: 18px; margin-bottom: 24px; }
.cmp-deals > :first-child { grid-column: 1; }
.cmp-deals > :last-child { grid-column: 3; }
.cmp-deals .fp-deal { margin-bottom: 0; }
.cmp-deal-none {
  display: flex; align-items: center; padding: 16px 20px;
  background: var(--pf-subtle); border: 1.5px solid var(--pf-line); border-radius: var(--pf-radius-lg);
  color: var(--pf-muted); font-size: 14px;
}

/* Compare's closing "Ready for Funding?" card: a titled outer card wrapping one
   accent panel per firm. Each panel keys its own slot color — green for A, teal
   for B — the same accent the slot bars and table header carry above, so a panel
   ties back to its selector and column. */
.cmp-cta {
  margin-top: 32px; padding: 28px 24px;
  background: #fff; border: 1.5px solid var(--pf-line); border-radius: var(--pf-radius-lg);
}
.cmp-cta-head { text-align: center; margin-bottom: 20px; }
.cmp-cta-head h3 { font-family: var(--font-display); font-size: 20px; color: var(--pf-heading); }
.cmp-cta-head p { color: var(--pf-muted); font-size: 14px; margin-top: 6px; padding-bottom: 0; }
.cmp-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.cmp-cta-col {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  position: relative; overflow: hidden;
  padding: 22px 20px 20px; background: var(--pf-subtle);
  border: 1.5px solid var(--pf-line); border-radius: var(--pf-radius-lg);
}
.cmp-cta-col::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 10px; }
.cmp-cta-col.a { border-color: var(--pf-green-bg); }
.cmp-cta-col.b { border-color: var(--pf-teal-bg); }
.cmp-cta-col.a::before { background: var(--pf-green); }
.cmp-cta-col.b::before { background: var(--pf-teal); }
.cmp-cta-name { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--pf-heading); }
.cmp-cta-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cmp-cta-col.a .cmp-cta-dot { background: var(--pf-green); }
.cmp-cta-col.b .cmp-cta-dot { background: var(--pf-teal); }
.cmp-cta-deal { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cmp-cta-deal-label { font-size: 14px; color: var(--pf-green-shade); font-weight: 600; }
.cmp-cta-nodeal { color: var(--pf-muted); font-size: 14px; }
.cmp-cta .btn { margin-top: 2px; }

.about-card { margin-bottom: 22px; }
.about-card h2 { font-size: 22px; margin-bottom: 12px; }
.about-card p { color: var(--pf-text); font-size: 15px; line-height: 1.7; }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.dt-section { border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); overflow: hidden; margin-bottom: 14px; background: #fff; }
.dt-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #fff; border: 0; cursor: pointer; text-align: left; transition: background .15s; }
.dt-head:hover { background: var(--pf-subtle); }
.dt-section.open .dt-head { background: var(--pf-green-bg); }
.dt-head .dt-title { font-family: var(--font-display); font-size: 16px; color: var(--pf-heading); flex: 1; }
.dt-section.open .dt-head .dt-title { color: var(--pf-green-shade); }
.dt-chev { color: var(--pf-faint); transition: transform .2s var(--pf-ease); }
.dt-section.open .dt-chev { transform: rotate(180deg); color: var(--pf-green); }
.dt-body { display: none; }
.dt-section.open .dt-body { display: block; }
.dt-body table { width: 100%; border-collapse: collapse; }
.dt-body td { padding: 12px 20px; border-top: 1px solid var(--pf-line-soft); font-size: 14.5px; }
.dt-body td.k { color: var(--pf-muted); width: 46%; }
.dt-body td.v { color: var(--pf-heading); }

.side-card { background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow-card); padding: 22px; margin-bottom: 18px; }
.side-card h3 { font-size: 17px; margin-bottom: 4px; }
.side-card .sc-sub { font-size: 13px; color: var(--pf-muted); margin-bottom: 16px; }
.fee-table { width: 100%; border-collapse: collapse; }
.fee-table th { text-align: left; font-family: var(--font-display); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--pf-faint); padding: 8px 0; border-bottom: 1px solid var(--pf-line); font-weight: 400; }
.fee-table td { padding: 10px 0; border-bottom: 1px solid var(--pf-line-soft); font-size: 14px; }
.fee-table td:last-child { text-align: right; font-family: var(--font-display); color: var(--pf-heading); }
.fee-table tr:last-child td { border-bottom: 0; }

/* ============================================================
   COMPARE
   ============================================================ */
.cmp-selectbar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
.cmp-slot {
  background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg);
  box-shadow: var(--pf-shadow-card); padding: 20px; position: relative;
}
/* No overflow:hidden on the slot — the search popover must float out over the
   table without being clipped. The top bar rounds its own top corners to sit
   flush inside the card radius instead of relying on the slot to clip it. */
.cmp-slot::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 8px;
  border-radius: var(--pf-radius-lg) var(--pf-radius-lg) 0 0;
}
.cmp-slot.a::before { background: var(--pf-green); }
.cmp-slot.b::before { background: var(--pf-teal); }
.cmp-slot .slot-tag { font-family: var(--font-display); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-faint); margin-bottom: 12px; }
.cmp-slot.a .slot-tag { color: var(--pf-green-shade); }
.cmp-slot.b .slot-tag { color: var(--pf-teal-deep); }
.cmp-vs {
  align-self: center; width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--pf-ink); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 16px;
}

.firm-picker { position: relative; }
.picker-btn {
  width: 100%; display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--pf-subtle); border: 1.5px dashed var(--pf-line); border-radius: var(--pf-radius);
  padding: 14px; text-align: left; transition: border-color .15s;
}
.picker-btn:hover { border-color: var(--pf-green); }
.picker-btn .ph { font-family: var(--font-display); font-size: 16px; color: var(--gray-text); }
.picker-btn .chosen-name { font-family: var(--font-display); font-size: 17px; color: var(--pf-heading); }
.picker-btn .chosen-sub { font-size: 12.5px; color: var(--pf-faint); margin-top: 2px; }
.picker-btn .swap { margin-left: auto; font-size: 12px; color: var(--pf-teal-deep); font-family: var(--font-display); }

/* The search popover floats over the comparison table (absolute, out of flow)
   so opening/closing it never grows the card or shifts page layout. The slot no
   longer clips it (overflow removed above). The chosen-firm button stays put;
   the popover drops beneath it. */
.picker-pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70;
  background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius);
  box-shadow: var(--pf-shadow-pop); overflow: hidden; display: none;
}
.firm-picker.is-editing .picker-pop { display: block; }
.picker-pop .psearch { padding: 12px; border-bottom: 1px solid var(--pf-line); }
.picker-list { max-height: 260px; overflow-y: auto; }
.picker-opt { display: flex; align-items: center; gap: 11px; padding: 10px 14px; cursor: pointer; }
.picker-opt:hover { background: var(--pf-green-bg); }
.picker-opt .po-name { font-family: var(--font-display); font-size: 15px; color: var(--pf-heading); }
.picker-opt .po-sub { font-size: 12px; color: var(--pf-faint); }

/* comparison table */
/* border-collapse: separate (not collapse) so the header can stick: Chromium
   only honours position:sticky on a thead under the separate border model, and
   an overflow:hidden ancestor would disable it too — so neither here. The 1px
   border + radius still draw the rounded outline. */
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow-card); }
/* border-collapse:separate can't clip the table radius, so the opaque corner
   cells square it off. Round each corner cell to match (top on the sticky
   header, bottom on the last body row). */
.cmp-headrow th:first-child { border-top-left-radius: var(--pf-radius-lg); }
.cmp-headrow th:last-child { border-top-right-radius: var(--pf-radius-lg); }
.cmp-table tbody tr:last-child > :first-child { border-bottom-left-radius: var(--pf-radius-lg); }
.cmp-table tbody tr:last-child > :last-child { border-bottom-right-radius: var(--pf-radius-lg); }
.cmp-section-row td, .cmp-section-row th { background: var(--pf-subtle); font-family: var(--font-display); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--pf-muted); padding: 12px 18px; border-top: 1px solid var(--pf-line); }
.cmp-table td, .cmp-table tbody th { padding: 13px 18px; border-top: 1px solid var(--pf-line-soft); font-size: 14.5px; vertical-align: top; }
/* Row-label and section <th> must not inherit the browser's bold/centered default. */
.cmp-table tbody th { font-weight: 400; text-align: left; }
.cmp-table .lbl { color: var(--pf-muted); width: 30%; }
.cmp-table .val { width: 35%; color: var(--pf-heading); }
.cmp-table .val.better { background: var(--pf-green-bg); color: var(--pf-green-shade); font-weight: 700; }
.cmp-table .val.worse { color: var(--pf-muted); }
/* Sticky lives on the thead, not the th — Chromium ignores position:sticky on
   a table cell. top:61px tucks it flush under the 61px sticky tool-nav. */
.cmp-table thead { position: sticky; top: 61px; z-index: 30; }
.cmp-headrow th {
  background: #fff;
  padding: 16px 18px; text-align: left; border-bottom: 2px solid var(--pf-line);
}
.cmp-headrow th .ch-name { font-family: var(--font-display); font-size: 18px; color: var(--pf-heading); }
.cmp-headrow th.col-a { box-shadow: inset 4px 0 0 var(--pf-green); }
.cmp-headrow th.col-b { box-shadow: inset 4px 0 0 var(--pf-teal); }
.bool-yes { color: var(--pf-green-shade); font-weight: 700; }
.bool-no { color: var(--pf-faint); }
.bool-unknown { color: var(--pf-faint); }

/* Keyboard focus + combobox active-option highlight. */
.picker-btn:focus-visible,
.cmp-headrow th .ch-name:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pf-green-bg); border-radius: var(--pf-radius); }
.picker-opt:focus-visible { outline: none; background: var(--pf-green-bg); }
.picker-opt.is-active { background: var(--pf-green-bg); }
.cmp-slot.b .picker-btn:focus-visible { box-shadow: 0 0 0 3px var(--pf-teal-bg); }
.cmp-slot.b .picker-opt.is-active,
.cmp-slot.b .picker-opt:focus-visible { background: var(--pf-teal-bg); }
.cmp-cta-col.a .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pf-green-bg); }
.cmp-cta-col.b .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pf-teal-bg); }

.cmp-shortcuts { display: flex; gap: 10px; flex-wrap: wrap; }
.shortcut {
  background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-pill);
  padding: 8px 16px; font-size: 14px; color: var(--pf-text); cursor: pointer; transition: all .15s;
  font-family: var(--font-body);
}
.shortcut:hover { border-color: var(--pf-green); background: var(--pf-green-bg); color: var(--pf-green-shade); }
.shortcut b { font-family: var(--font-display); font-weight: 400; }

.cmp-empty { text-align: center; padding: 60px 24px; }
.cmp-empty .ic { font-size: 34px; opacity: .4; margin-bottom: 12px; }
.cmp-empty h2 { font-size: 20px; margin-bottom: 8px; }
.cmp-empty p { color: var(--pf-muted); font-size: 15px; max-width: 420px; margin: 0 auto 24px; padding-bottom: 0; }

.similar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sim-card { background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); padding: 18px; }
.sim-card .sc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sim-card .sc-top > div { min-width: 0; }
.sim-card .sc-name { font-family: var(--font-display); font-size: 16px; color: var(--pf-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.sim-card p { font-size: 13px; color: var(--pf-muted); margin-bottom: 14px; padding-bottom: 0; min-height: 36px; }
.sim-card .sc-cta { display: flex; gap: 8px; }

/* Quick-comparison grid (compare page bottom, sc-22089) */
.quick-compare { background: transparent; margin-top: 32px; }
.qc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.qc-card { background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.qc-top { display: flex; align-items: center; gap: 12px; }
.qc-top > .qc-id { min-width: 0; }
.qc-name { font-family: var(--font-display); font-size: 15px; color: var(--pf-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.qc-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.qc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qc-stat { background: var(--pf-subtle); border-radius: 8px; padding: 8px; text-align: center; }
.qc-stat-val { font-weight: 700; font-size: 13px; color: var(--pf-heading); }
.qc-stat-lbl { font-size: 11px; color: var(--pf-muted); margin-top: 2px; }
.qc-range { display: flex; justify-content: space-between; align-items: baseline; background: var(--pf-subtle); border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.qc-range-lbl { color: var(--pf-muted); }
.qc-range-val { font-weight: 700; color: var(--pf-heading); }
.qc-cta { margin-top: auto; justify-content: center; }
.chip-muted { background: var(--pf-subtle); color: var(--pf-muted); }

@media (max-width: 900px) { .qc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .qc-grid { grid-template-columns: 1fr; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .fp-layout { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr 1fr 1fr; }
  .similar-grid { grid-template-columns: 1fr 1fr; }
  .page-head h1 { font-size: 32px; }
}
@media (max-width: 760px) {
  .cmp-selectbar { grid-template-columns: 1fr; }
  .cmp-deals { grid-template-columns: 1fr; }
  .cmp-deals > :first-child, .cmp-deals > :last-child { grid-column: auto; }
  .cmp-cta-grid { grid-template-columns: 1fr; }
  .cmp-vs { transform: rotate(90deg); justify-self: center; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
  .similar-grid { grid-template-columns: 1fr; }
  .filterbar { position: static; margin-top: 16px; }
  .cmp-headrow th { position: static; }
}
@media (max-width: 460px) {
  .filter-grid { grid-template-columns: 1fr; }
  .fp-id { flex-direction: column; }
}

/* ============================================================
   HOME PAGE (Direction A — clean editorial)
   ============================================================ */
.heroA { padding: 72px 0 56px; background: #fff; border-bottom: 1px solid var(--pf-line); position: relative; overflow: hidden; }
.heroA .cube-deco { position: absolute; right: -40px; top: -30px; width: 320px; opacity: .05; pointer-events: none; }
.heroA .inner { max-width: 720px; position: relative; }
.heroA h1 { font-size: 52px; line-height: 1.04; }
.heroA h1 .accent { color: var(--pf-green); }
.heroA .lede { font-size: 19px; color: var(--pf-muted); margin: 20px 0 28px; padding-bottom: 0; max-width: 600px; }
.heroA .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.heroA .trust-strip { padding-top: 28px; border-top: 1px solid var(--pf-line); }

.trust-strip { display: flex; gap: 36px; flex-wrap: wrap; }
.trust-strip .item { display: flex; flex-direction: column; }
.trust-strip .v { font-family: var(--font-display); font-size: 26px; color: var(--pf-heading); white-space: nowrap; }
.trust-strip .l { font-size: 13px; color: var(--pf-muted); }

.hiw-band { background: var(--pf-subtle); border-top: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); }
.hiw-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.hiw-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.hiw-step { position: relative; padding: 24px 18px; background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); text-align: center; }
.hiw-step h3 { font-size: 15.5px; margin: 10px 0 8px; line-height: 1.3; }
.hiw-step p { font-size: 13.5px; color: var(--pf-muted); line-height: 1.55; }
/* Icon disc holds a currentColor SVG; each step's accent is set on the disc and
   inherited by the glyph. The teal → green run mirrors the prototype's purple →
   green arc within our palette, arriving at brand green for the "get paid" step. */
.hiw-icon {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.hiw-label {
  display: inline-block; margin-bottom: 10px; padding: 2px 9px; border-radius: 10px;
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
}
.hiw-step.s1 .hiw-icon { background: var(--pf-teal-deep); }
.hiw-step.s2 .hiw-icon { background: var(--pf-teal); }
.hiw-step.s3 .hiw-icon { background: var(--pf-green-shade); }
.hiw-step.s4 .hiw-icon,
.hiw-step.s5 .hiw-icon { background: var(--pf-green); }
.hiw-step.s1 .hiw-label, .hiw-step.s2 .hiw-label { background: var(--pf-teal-bg); color: var(--pf-teal-deep); }
.hiw-step.s3 .hiw-label, .hiw-step.s4 .hiw-label, .hiw-step.s5 .hiw-label { background: var(--pf-green-bg); color: var(--pf-green-shade); }

.endcta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
  background: var(--gray-text);
  border-radius: var(--pf-radius-lg); padding: 40px 44px; color: #fff;
}
.endcta h2 { color: #fff; font-size: 26px; }
.endcta p { color: rgba(255, 255, 255, .75); font-size: 15px; margin-top: 8px; max-width: 460px; }
.endcta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.endcta .btn-outline-teal { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.endcta .btn-outline-teal:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Featured firms: the intro block and its asset pills read as one centred
   column, so the pillbar sits on its own line rather than beside the heading. */
#featured .section-head { text-align: center; margin-bottom: 18px; }
#featured .featured-pills { display: flex; justify-content: center; margin-bottom: 24px; }

@media (max-width: 1023px) {
  /* 5 cards degrade 5 → 3 → 1; a 2-col tier would orphan the fifth. */
  .hiw-grid { grid-template-columns: repeat(3, 1fr); }
  .heroA h1 { font-size: 42px; }
}
@media (max-width: 820px) {
  .endcta { padding: 32px 26px; }
}
@media (max-width: 640px) {
  .heroA { padding: 48px 0 40px; }
  .heroA h1 { font-size: 34px; }
  .heroA .lede { font-size: 17px; }
  .hiw-grid { grid-template-columns: 1fr; }
  .trust-strip { gap: 22px; }
  .endcta h2 { font-size: 22px; }
}

/* ---------- Directory FAQ ---------- */
.faq-section { background: var(--pf-subtle); border-top: 1px solid var(--pf-line); }
.faq-head { text-align: center; }
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--pf-line); }

.faq-q {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 20px 0; list-style: none;
  font-family: var(--font-display); font-size: 17px; color: var(--pf-heading);
}

/* WebKit/Blink browsers render a disclosure triangle via this pseudo-element. */
.faq-q::-webkit-details-marker { display: none; }

/* The green +/− button, drawn in CSS so the accordion needs no JS and no icon
   asset. A fixed 26px box keeps the question text aligned across both states. */
.faq-q::before {
  content: "+";
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--pf-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
}

.faq-item[open] .faq-q::before { content: "−"; }
.faq-item[open] .faq-q { color: var(--pf-green-shade); }
.faq-q:hover { color: var(--pf-green-shade); }
.faq-q:hover::before { background: var(--pf-green-shade); }

/* Indent the answer to the question text, past the 26px button + 14px gap. */
.faq-a { padding: 0 0 22px 40px; }
.faq-a p { color: var(--pf-muted); font-size: 15px; max-width: 720px; }
.faq-a ul { margin: 12px 0 0; padding-left: 20px; max-width: 720px; list-style: disc; }
.faq-a li { color: var(--pf-muted); font-size: 15px; margin-bottom: 10px; }
.faq-a li:last-child { margin-bottom: 0; }
.faq-a li strong { color: var(--pf-heading); font-weight: 700; }