/*
 * smartercredit-base — pseudo-content icons
 *
 * task #47 (tmp/annot2/FIXLIST.md §1B). The extractor now preserves the
 * author classes that drive these icons via `::before { content: url(...) }`,
 * but the theme shipped zero `content: url(...)` rules — so the class
 * survives and draws nothing. This file supplies the missing rules for the
 * two driving classes named in the task: `cta-icon` and `pl-steps-numbers`.
 *
 * ENUMERATION (measured via CDP against https://smartercredit.com/business-loan/,
 * getComputedStyle(el, '::before'|'::after').content inside .entry-content,
 * two independent page loads compared, 2026-08-12):
 *
 *   Production renders 15 elements with non-none/non-empty pseudo content.
 *   4 are `.q-icon` (FAQ "Q." glyph) — injected by production's own
 *   client-side jQuery, confirmed flaky in production itself (present 14/20
 *   loads, absent 6/20) and NEVER present in raw server HTML. Out of scope
 *   per the task brief — do not replicate a race condition.
 *   That leaves 11 "reachable" targets, all of which are OUT OF SCOPE for
 *   this file except one:
 *     - 4x `h5.et_pb_toggle_title::after` (FAQ caret, header-drop-down.svg)
 *       and 4x `div.et_pb_toggle_content::after` (content:" ", a float-clearfix
 *       artifact, not a visible icon) — `et_pb_toggle_title`/`et_pb_toggle_content`
 *       do NOT survive extraction at all (grep confirms 0 occurrences in
 *       builds/spec125/extracted/*.html). Production's FAQ markup extracts to
 *       `.sc-accordion__trigger`, which components.css already styles with its
 *       OWN caret (a 9x9 CSS triangle that rotates, vs. production's static
 *       SVG that never rotates) — a documented, deliberate divergence
 *       (FIXLIST §4, "needs a human decision": parity vs. a UX improvement).
 *       Not mine to touch; not touched.
 *     - 2x `a.et_pb_button::before/::after` (content:"5", a Divi ETmodules
 *       icon-font ligature for the button's hover arrow, not an SVG) —
 *       `et_pb_button` likewise does not survive extraction. Out of scope: no
 *       surviving class to key a rule on, and it isn't an SVG asset to self-host.
 *     - 1x `span.cta-icon::before` — THE ONE REAL TARGET. Confirmed present in
 *       the extracted markup (11 occurrences across the 11 loan-product pages,
 *       1 per page) and confirmed to have zero matching rule anywhere in this
 *       theme before this file.
 *
 *   `pl-steps-numbers` (33 occurrences, 3 per page) was named in the task
 *   brief as a second driving class needing an icon, but direct measurement
 *   contradicts that: `getComputedStyle(.pl-steps-numbers, '::before'|'::after').content`
 *   is `none` on every one of the 3 elements, confirmed on two independent
 *   loads. The "1"/"2"/"3" numerals are drawn as plain text — production
 *   computes `color: rgb(102, 102, 102); font-size: 42px; font-weight: 700;
 *   background-image: none` directly on `.pl-steps-numbers` itself (NOT the
 *   gradient/`background-clip:text` treatment FIXLIST §2 item 3 describes —
 *   that claim does not reproduce; the site does ship a `.heading-color-text`
 *   gradient-text utility class, but it is not applied to these elements).
 *   There is no SVG here and no `content: url()` to replicate, so this file
 *   intentionally has NO rule for `.pl-steps-numbers` — there is nothing to
 *   draw. The color/size/weight fix for the numerals is a components.css /
 *   typography change, out of this file's scope (no icon involved).
 *
 * Net: acceptance count prediction for THIS change alone is 1 of 15 (the
 * lock icon). The other 10 reachable targets are owned elsewhere (components.css
 * for the accordion caret — deliberately, per FIXLIST §4 — and there is no
 * surviving hook at all for the toggle-clearfix/button-ligature pair). See
 * tmp/annot2/icons.md for the full writeup.
 */

/* ==========================================================================
   CTA consent-line lock icon (`cta-icon`)
   ========================================================================== */

/*
 * Markup (builds/spec125/extracted/business-loan.html:488, same shape on all
 * 11 loan-product pages):
 *   <p><span class="cta-icon"></span>Checking your rate is free and won't
 *   affect your credit score*</p>
 *
 * Production's own rule (recovered from
 * .../themes/SmarterCredit/Assets/css/styles.css, minified):
 *   .personal-loan-cta-term .et_pb_text_inner .cta-icon:before{
 *     content:url(.../vuesax-bulk-lock.svg); position:absolute; left:-5px; top:1px }
 *   .personal-loan-cta-term .et_pb_text_inner .cta-icon{ padding-right:8px }
 *
 * The `position:absolute; left:-5px; top:1px` only works in production
 * because it resolves against `.et_pb_text_inner` (position:relative,
 * single-line, 24px tall) — a Divi wrapper that does not survive extraction
 * (grep confirms 0 occurrences of `et_pb_text_inner`/`personal-loan-cta-term`
 * in the extracted HTML). Re-declaring that exact absolute-position hack here
 * would position relative to whatever the NEXT positioned ancestor up the
 * tree happens to be, which is undefined for this theme's markup. So this
 * keeps the DECLARED, portable half of production's rule (padding-right:8px
 * — matches --sc-space-xs exactly) and replaces the positioning half with a
 * self-contained inline-block + vertical-align, verified against a cropped,
 * 4x-scaled screenshot of the live element (not just computed style): the
 * icon renders visibly SQUARE next to the text, matching the SVG's own
 * intrinsic 16x16 (viewBox="0 0 16 16"), not the 16x24 `getComputedStyle`
 * reports on production — that 24 is a `top`+auto-`bottom` layout artifact of
 * production's specific wrapper height, not the icon's real rendered shape.
 * The SVG's fills (#4183b8 muted blue, confirmed by opening the file) are
 * hardcoded, not `currentColor`, so no `color` needs to be set here — it will
 * render the same blue on both light and dark ("Checking your rate…" sits on
 * `--sc-color-bg-alt`) surfaces, matching the production screenshot.
 */
.cta-icon {
	display: inline-block;
	vertical-align: middle;
	padding-right: var(--sc-space-xs); /* 8px — matches production's declared .cta-icon{padding-right:8px} */
}
.cta-icon::before {
	content: url("../images/icon-lock.svg");
	display: inline-block;
	width: 16px;  /* SVG intrinsic size (viewBox 0 0 16 16); confirmed square via cropped screenshot */
	height: 16px;
}