/*
 * smartercredit-base — components
 *
 * Every value here is either a token from tokens.css or a value MEASURED off
 * production with `tools/derive-css.py` (CDP getComputedStyle, modal across 8
 * pages / 774 samples). Nothing is guessed.
 *
 * The previous revision of this file was hand-authored from a recovered palette.
 * It was structurally correct and visually wrong — 17 classes against Divi's 317,
 * so the page had type and color but no layout: no section rhythm, no column
 * widths, no card, no bands. It rendered as a flowing document 53% taller than
 * production. The fix was not more hand-authoring; it was to measure.
 *
 * We take Divi's VALUES, never its vocabulary. The selectors below are the
 * `sc-*` contract in CONTRACT.md, which is what BiZiQ's agents will edit.
 */

/* ==========================================================================
   1. Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

/* The <body> element itself measures 14px/23.8px on production, not 18px —
   18px is the size of paragraph copy, which sets its own. Collapsing the two
   pushed every element that inherits (labels, list items, table cells, small
   print) a size too large. Measured, not assumed. */
body {
	margin: 0;
	font-family: var(--sc-font-body);
	font-size: var(--sc-fs-small);
	line-height: var(--sc-lh-small);
	font-weight: 500;
	color: var(--sc-color-body);
	background: var(--sc-color-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sc-font-heading);
	color: var(--sc-color-text);
	font-weight: 700;
	margin: 0 0 var(--sc-space-sm);
}

/* ⚠️ NO `text-align` ON HEADING ELEMENTS. It used to be `center` on h2 and h4,
   inferred from the section headings, which happen to be centered on
   production. That inference was wrong at the site level: production centers
   those headings because their MODULE carries `et_pb_text_align_center`, not
   because an h2 is centered by nature. Most modules on the site are
   `_align_left`.

   An element-level rule (0-0-1) also cannot be overridden by inheritance — an
   ancestor's alignment never reaches a child that has its own matching rule —
   so a blanket `h2 { text-align: center }` silently defeated every per-module
   alignment we could ever set. Alignment now comes from `.sc-ta-*` on the
   module and INHERITS down. See the .sc-ta-* block below. */
h1 { font-size: var(--sc-fs-h1); line-height: var(--sc-lh-h1); }
/* h2 is the ONE heading that keeps an element-level alignment, and it is
   evidence-driven rather than inferred. Production centers section headings
   with PER-INSTANCE compiled CSS (`.et_pb_text_N h2 { text-align: center }`)
   while the enclosing module still says `et_pb_text_align_left` — so the
   module's alignment is genuinely not the right source for it. Measured both
   ways on the same sweep: with this rule, ZERO h2 alignment mismatches
   site-wide; without it, 17. It is deliberately at 0-0-1 so it outranks the
   inherited module alignment, exactly as production's own rule does. */
h2 { font-size: var(--sc-fs-h2); line-height: var(--sc-lh-h2); padding-bottom: 10px; text-align: center; }
h3 { font-size: var(--sc-fs-h3); line-height: var(--sc-lh-h3); }
h4 { font-size: var(--sc-fs-h4); line-height: var(--sc-lh-h4); }

/* Body copy is 18px/24px and must say so explicitly now that <body> is 14px. */
p {
	margin: 0 0 var(--sc-space-md);
	font-size: var(--sc-fs-base);
	line-height: var(--sc-lh-base);
}
p:last-child { margin-bottom: 0; }

a { color: var(--sc-color-primary); text-decoration: none; }
a:hover,
a:focus-visible { color: var(--sc-color-primary-dark); text-decoration: underline; }

img { max-width: 100%; height: auto; }

ul, ol { margin: 0 0 var(--sc-space-md); padding-left: 1.25em; }
li { margin-bottom: var(--sc-space-xs); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000;
	clip-path: none; width: auto; height: auto;
	padding: var(--sc-space-xs) var(--sc-space-sm);
	background: var(--sc-color-bg); color: var(--sc-color-text);
	box-shadow: var(--sc-shadow);
}

/* ==========================================================================
   2. Layout — section / row / column
   ========================================================================== */

.sc-section {
	padding-top: var(--sc-space-section);
	padding-bottom: var(--sc-space-section);
	background-color: var(--sc-color-bg);
}

/* Section treatments, assigned by the extractor from production's measured
   backgrounds. `--alt` predates the measurement and is kept as an alias for
   --tint so older extracted content keeps working. */
.sc-section--hero {
	background-image: var(--sc-hero-gradient);
	padding-top: 40px;
}

/* The photographic "Refinance multiple debts" band. Production uses one shared
   image across all six product pages (measured: same URL, 6 occurrences), so it
   belongs on the modifier rather than inline per page. Verified present in the
   staging media library at the same byte size as production. */
.sc-section--band {
	padding-top: var(--sc-space-band);
	padding-bottom: var(--sc-space-band);
	background-image: url("/wp-content/uploads/2025/04/homepage_bottom_checkYourRate_bg_blue-optimixed-scaled-1.jpg");
	background-size: cover;
	background-position: center;
	background-color: var(--sc-color-bg-alt);
	color: #fff;
	text-align: center;
}
.sc-section--band h1,
.sc-section--band h2,
.sc-section--band h3,
.sc-section--band h4 { color: #fff; }

/* The band's headline arrives as a bare <p>, not a heading — Divi styled it
   per-instance. It is the first text block in the band, so promote that one
   to display size and leave the small print below it alone.
   ⚠️ `--sc-fs-h2` RECONCILIATION (2026-08-12): this rule used to consume
   `var(--sc-fs-h2)`/`var(--sc-lh-h2)`. `--sc-fs-h2` is NOT a stray duplicate —
   tokens.css declares it once (42px, desktop) and responsive.css legitimately
   overrides it to 32px under `@media (max-width: 980px)`, both MEASURED off
   real `<h2>` elements (see responsive.css's own derivation notes). The actual
   problem is that THIS element is a bare `<p>`, not an `<h2>`, and production
   measures its band headline at 35px — a value that matches neither the
   desktop nor the ≤980px h2 step. Borrowing the h2 token here was simply the
   wrong token for this consumer. Fixed by giving it its own literal, measured
   value instead of riding the h2 token — `--sc-fs-h2` and its responsive
   override are untouched and still exclusively drive the real `h2` rule
   above (components.css `h2 { font-size: var(--sc-fs-h2) … }`), its only
   other consumer. Blast radius of this change: ONE selector (this one); the
   site's actual h2 elements are unaffected at every width. */
.sc-section--band .sc-col > .sc-text:first-child p {
	font-size: 35px;
	line-height: 42px;
	font-weight: 700;
	color: #fff;
	margin-bottom: var(--sc-space-md);
}
.sc-section--band .sc-blurb {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-space-xs);
	text-align: left;
}
.sc-section--band .sc-blurb__media { margin: 0; }
.sc-section--band .sc-blurb__title {
	font-size: var(--sc-fs-small);
	line-height: var(--sc-lh-small);
	font-weight: 500;
	color: #fff;
	margin-bottom: 0;
	text-align: left;
}
.sc-section--band a { color: #fff; text-decoration: underline; }

.sc-section--dark,
.sc-section--alt {
	background-color: var(--sc-color-bg-alt);
	color: var(--sc-color-on-dark);
	padding-top: var(--sc-space-band);
	padding-bottom: var(--sc-space-band);
}
.sc-section--dark h1, .sc-section--dark h2, .sc-section--dark h3, .sc-section--dark h4,
.sc-section--alt h1, .sc-section--alt h2, .sc-section--alt h3, .sc-section--alt h4 { color: #fff; }

.sc-section--tint { background-color: transparent; }

/* The popup/modal lead form is a Divi modal on production — present in the
   markup, hidden until a CTA opens it. Without this it renders inline as a
   second bare form at the foot of the page. */
#popup-form { display: none; }

.sc-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-gutter);
	width: 90%;
	max-width: var(--sc-container-max);
	margin-left: auto;
	margin-right: auto;
}

.sc-row + .sc-row { margin-top: var(--sc-space-lg); }

.sc-row--inner {
	width: 100%;
	gap: var(--sc-gutter);
	margin-top: 0;
}

.sc-col { flex: 1 1 100%; min-width: 0; }

/* ⚠️ Divi's "two column" rows are NOT 50/50 on this site, and assuming they
   were is what made /about/ render 9.6% SHORTER than production. Measured at a
   true 1440 (row 1224 wide):

       about-us-hero-row    636 + 521, 67px gutter
       about-us-help-row    626 + 531, 67px gutter
       ours (even split)    593 + 593, 38px gutter

   Wider text columns wrap less, so the page came out short rather than tall —
   which is why no one flagged it: a short page does not look broken. The
   ratios are per-instance in compiled Divi CSS, so the author's own row class
   (carried through by static2wp.py) is the only stable handle.

   `fr` with a fixed gutter reproduces the measurement exactly at 1224 and
   still scales below it. Both rows collapse to one column at the 980
   breakpoint, which the base `flex-wrap` already does. */
.about-us-hero-row,
.about-us-help-row {
	display: grid;
	column-gap: 67px;
}
.about-us-hero-row { grid-template-columns: 636fr 521fr; }
.about-us-help-row { grid-template-columns: 626fr 531fr; }
@media (max-width: 980px) {
	.about-us-hero-row,
	.about-us-help-row { grid-template-columns: 1fr; }
}

/* Phone-image + body-copy row (the "Application Process" lead-in). Production
   has no gap on this row at all (Divi doesn't use flex `gap` for gutters) — the
   generic `.sc-row { gap: var(--sc-gutter) }` above adds a 30px gap that
   production never has, so it's zeroed here rather than on `.sc-row` itself.
   The remaining visual gap on production comes entirely from the image being
   CENTERED in its column (`.et_pb_image_wrap`/`.et_pb_image` both carry
   `text-align: center`) rather than flush-left like the extracted markup.
   MEASURED: closes 248px -> 116.5px. Scoped to this one row so the generic
   `.sc-row`/`.sc-col` utilities are untouched elsewhere. */
.personal-loan-multiple-loan-row { gap: 0; }
.personal-loan-multiple-loan-row .sc-col:first-child { text-align: center; }

.sc-col--1-2 { flex: 0 1 var(--sc-col-1-2); }
.sc-col--1-3 { flex: 0 1 var(--sc-col-1-3); }
.sc-col--1-4 { flex: 0 1 var(--sc-col-1-4); }
.sc-col--2-3 { flex: 0 1 var(--sc-col-2-3); }

/* ==========================================================================
   3. Content components
   ========================================================================== */

.sc-text {
	font-size: var(--sc-fs-base);
	line-height: var(--sc-lh-base);
	text-align: left;
}

.sc-image { margin: 0; }
.sc-image img { display: block; }
.sc-image figcaption {
	margin-top: var(--sc-space-xs);
	font-size: var(--sc-fs-small);
	color: var(--sc-color-text-muted);
}

/* ---------------------------------------------------------------------------
 * Alignment, replayed from production
 *
 * `.sc-ta-left|center|right` are emitted by static2wp.py's MODIFIER_MAP from
 * Divi's own `et_pb_text_align_*` classes, which sit on the module. Counts
 * across the mirror: left 772, center 274, right 153 — i.e. LEFT is the norm,
 * and our CSS had been defaulting whole component families to `center`.
 * Measured cost of that guess on the structdiff sweep: 18–36 elements per page
 * rendered centered against production's left, on every page swept. It is what
 * reads to a human as "whitespace, and things aren't lining up".
 *
 * These are plain single-class rules ON PURPOSE. `text-align` is an inherited
 * property, so setting it on the module carries it to every descendant that
 * does not set its own — which is exactly Divi's model, and it makes nesting
 * work for free: a `.sc-ta-center` block inside a `.sc-ta-left` section wins
 * for its own subtree without any specificity contest.
 *
 * The corollary is a rule, not a preference: DO NOT add `text-align` to
 * component or element selectors. Any such rule (even 0-0-1, like a bare `h2`)
 * beats an inherited value outright and silently pins that component's
 * alignment site-wide, which is the defect this replaces.
 * ------------------------------------------------------------------------ */
.sc-ta-left { text-align: left; }
.sc-ta-center { text-align: center; }
.sc-ta-right { text-align: right; }

/* Blurb = icon + title + body.
   Alignment deliberately omitted — it arrives via `.sc-ta-*` replayed from
   production onto this same element, and inherits into the title and body. */

.sc-blurb__media {
	margin: 0 auto var(--sc-space-lg);
	max-width: 100%;
	line-height: 0;
}
/* Cap at the measured 60px. Blurb icons carry wildly different intrinsic sizes
   in the mirrored markup — 20px hero ticks, ~50px feature icons, and one 128px
   outlier that broke the four-across band's alignment. Production normalises
   them; 60px is the measured modal width. Smaller icons are unaffected, since
   max-width never scales an image up. */
.sc-blurb__media img { display: inline-block; max-width: 60px; height: auto; }

/* ---------------------------------------------------------------------------
 * Blurb layout: horizontal vs stacked
 *
 * `.sc-blurb--inline` / `--stacked` are replayed from Divi's
 * `et_pb_blurb_position_left` / `_top`. This REPLACES a `.sc-section--hero`
 * scoped flex treatment that was inferred from one section: 415 elements in
 * the mirror are position_left against 200 position_top, so horizontal is the
 * site-wide norm, not a hero special case — and scoping it to the hero left
 * every other horizontal blurb on the site rendering stacked and centered.
 *
 * ⚠️ IT IS A CSS TABLE, NOT FLEXBOX. Verified on all 43 blurbs across four
 * pages: `flex-direction`, `align-items`, `gap` and `flex` are at their
 * INITIAL values on every one, i.e. no flex container exists anywhere.
 * Divi lays the horizontal blurb out with `display: table` on the content
 * wrapper and `table-cell` on the two children. That distinction matters
 * because a flex rebuild needs a `gap` that production never declares, so any
 * value chosen for it is invented — whereas the table gets its gutter from the
 * text cell's `padding-left`, which production DOES declare, per family.
 * ------------------------------------------------------------------------ */
.sc-blurb--inline .sc-blurb__content { display: table; }
.sc-blurb--inline .sc-blurb__media {
	display: table-cell;
	margin: 0;
	padding: 0;
	float: none;
	vertical-align: baseline;
}
.sc-blurb--inline .sc-blurb__text {
	display: table-cell;
	vertical-align: top;
	padding-top: 0;
	/* Divi's own default gutter. Every family below overrides it — not one
	   instance in the measured sample actually renders at 15px — but it is the
	   correct fallback for any family we have not catalogued. */
	padding-left: 15px;
}

/* The stacked blurb alternates alignment three times down one chain, and that
   is production's actual behaviour, not an accident: the CONTENT wrapper
   centers (which is what centers the icon), the TEXT cell resets to left, and
   then the title re-centers itself per family. Omitting the center here left
   every feature-band icon left-aligned — 4 images on /business-loan/ alone. */
.sc-blurb--stacked .sc-blurb__content { display: block; margin: 0; text-align: center; }
.sc-blurb--stacked .sc-blurb__text { display: block; padding-left: 0; padding-top: 0; text-align: left; }

/* --- per-family metrics -----------------------------------------------------
 * Read from production's OWN stylesheet
 * (wp-content/themes/SmarterCredit/Assets/css/styles.css), not inferred: these
 * are the site's hand-written overrides, and they are the reason the 37 visible
 * blurbs collapse into a handful of families instead of 37 one-offs. The family
 * class is carried through verbatim by static2wp.py for exactly this purpose.
 * -------------------------------------------------------------------------- */

/* Hero eyebrow pill ("Business Loan" badge above the H1). MEASURED.
   `.sc-mw-221` is otherwise just a max-width utility, but it lands on this
   exact wrapper — and only this wrapper — on every hero page, so it doubles
   as a stable hook; scoped to the hero section too for safety. */
.personal-loan-hero-sec .sc-mw-221 {
	display: inline-block;
	background: rgb(237, 246, 253);
	padding: 8px 15px;
	border-radius: 5px;
}
.personal-loan-hero-sec .sc-mw-221 p {
	margin: 0;
	color: rgb(81, 163, 230);
	font-weight: 700;
	text-transform: uppercase;
}

/* Hero checklist — icon is absolutely positioned and the text cell is padded
   past it, which is why the gutter (36px) is much wider than the 20px icon. */
.personal-loan-hero-blurb .sc-blurb__content { margin-left: 0; position: relative; }
.personal-loan-hero-blurb .sc-blurb__media { position: absolute; top: 3px; }
.personal-loan-hero-blurb .sc-blurb__text { padding-left: 36px; }
.personal-loan-hero-blurb .sc-blurb__title {
	font-size: 22px;
	line-height: 28px;
	font-weight: 500;
	color: var(--sc-color-text-panel);
	margin-bottom: 0;
}

/* Compact variant inside the hero form panel. */
.personal-loans-hero-form-blurb .sc-blurb__text { padding-left: 8px; }
.personal-loans-hero-form-blurb .sc-blurb__title {
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: rgb(72, 72, 72);
	margin-bottom: 0;
}

.about-us-blurb .sc-blurb__text { padding-left: 8px; }
.about-us-blurb .sc-blurb__body {
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	color: var(--sc-color-text-panel);
}
.about-us-blurb .sc-blurb__title {
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	padding-bottom: 16px;
	margin-bottom: 0;
}

.contact-us-blurb .sc-blurb__text,
.c-blurb3 .sc-blurb__text { padding-left: 16px; }
.contact-us-blurb .sc-blurb__title,
.c-blurb3 .sc-blurb__title { font-size: 18px; line-height: 24px; font-weight: 700; }
.contact-us-blurb .sc-blurb__body,
.c-blurb3 .sc-blurb__body { color: rgb(72, 72, 72); margin-top: 2px; }

/* Stacked feature band — the icon centers while the text stays left, then the
   heading re-centers itself. Three alternations down one chain; production does
   exactly this, and it is why a rule relying on inheritance alone renders these
   left-aligned. */
.personal-loans-blurbs .sc-blurb__media { margin-bottom: 24px; }
.personal-loans-blurbs .sc-blurb__title {
	font-size: 24px;
	line-height: 29px;
	font-weight: 700;
	padding-bottom: 11px;
	text-align: center;
	margin-bottom: 0;
}

.personal-loans-steps-blurbs .sc-blurb__media { margin-bottom: 24px; text-align: center; }
.personal-loans-steps-blurbs .sc-blurb__title {
	font-size: 24px;
	line-height: 29px;
	font-weight: 700;
	padding-bottom: 16px;
	text-align: center;
	margin-bottom: 0;
}
.personal-loans-steps-blurbs .sc-blurb__body {
	text-align: center;
	/* MEASURED: production's step body copy is near-black (#262626), not the
	   default #666 body-copy grey. */
	color: var(--sc-color-text-panel);
}

.personal-loans-cta-blurb .sc-blurb__text { padding-left: 0; }
.personal-loans-cta-blurb .sc-blurb__title { font-weight: 400; }

/* Numbered process steps ("1 / 2 / 3"). MEASURED against production
   (tmp/annot2/midpage.md §2) — gradient-clipped text, not a flat color.
   ⚠️ `.pl-steps-numbers` is the AUTHOR class the extractor currently drops
   (KEEP_AUTHOR_RE too narrow — being widened separately). Until that lands,
   the outer `.sc-text` wrapper in the current markup carries no distinguishing
   class and this rule will not fire; written against the class it SHOULD
   carry so no second pass is needed once the extractor fix ships. The prior
   revision of this rule targeted `.sc-step-number`, a class nothing in the
   extractor or the markup has ever emitted — dead selector, replaced rather
   than kept alongside. */
.pl-steps-numbers p {
	margin: 0 0 var(--sc-space-xs);
	font-family: var(--sc-font-heading);
	font-size: 42px;
	line-height: 31px;
	font-weight: 700;
	text-align: center;
	background-image: linear-gradient(rgb(81, 163, 230) 0%, rgb(109, 191, 200) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* No text-align on either of these: it would break the inheritance chain from
   the blurb's own replayed .sc-ta-* class, which is the only thing that knows
   how production aligns this particular instance. */
.sc-blurb__title {
	font-size: var(--sc-fs-h4);
	line-height: var(--sc-lh-h4);
	font-weight: 700;
	color: var(--sc-color-text);
	margin-bottom: var(--sc-space-xs);
}

.sc-blurb__body {
	font-size: var(--sc-fs-base);
	line-height: var(--sc-lh-base);
}

/* Buttons — measured gradient, not the flat primary color.
 *
 * Scoped to interactive elements on purpose. The converter emits a wrapper div
 * that ALSO carries .sc-button around the real <a class="sc-button">, so an
 * unscoped rule paints the button twice (double padding, double background).
 * And the wrapper frequently carries no --primary modifier, so bare .sc-button
 * must already look like a button: on the CTA band that omission rendered
 * "Check your rate" as plain body text. Primary is the default; --secondary
 * opts out. */
a.sc-button,
button.sc-button,
input.sc-button,
.sc-button > a {
	display: inline-block;
	padding: 12px 28px;
	border: 0;
	border-radius: var(--sc-radius);
	font-family: var(--sc-font-heading);
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-image: var(--sc-button-gradient);
	color: #fff;
	transition: background-image .15s ease, opacity .15s ease;
}

a.sc-button:hover, a.sc-button:focus-visible,
button.sc-button:hover, button.sc-button:focus-visible,
.sc-button > a:hover, .sc-button > a:focus-visible {
	background-image: var(--sc-button-gradient-hover);
	color: #fff;
	text-decoration: none;
}

/* The wrapper itself is layout only. */
div.sc-button {
	display: block;
	padding: 0;
	background: none;
	border-radius: 0;
	margin-bottom: var(--sc-space-md);
}

.sc-button--primary {
	background-image: var(--sc-button-gradient);
	color: #fff;
}
.sc-button--primary:hover,
.sc-button--primary:focus-visible {
	background-image: var(--sc-button-gradient-hover);
	color: #fff;
	text-decoration: none;
}

.sc-button--secondary {
	background: transparent;
	color: var(--sc-color-primary);
	box-shadow: inset 0 0 0 2px var(--sc-color-primary);
}
.sc-button--secondary:hover,
.sc-button--secondary:focus-visible {
	background: var(--sc-color-primary);
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   4. Accordion (FAQ)
   ========================================================================== */

.sc-accordion { margin: 0; }

.sc-accordion__item {
	background: var(--sc-color-bg);
	border: 1px solid var(--sc-color-border-hairline);
	border-radius: var(--sc-radius-lg);
	padding: 17px 16px;
	margin-bottom: var(--sc-space-md);
}

.sc-accordion__trigger {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding-left: 50px;
	padding-right: 50px;
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	color: var(--sc-color-text);
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--sc-font-heading);
}

/* Caret. Production shows a chevron at the right edge that flips when open. */
.sc-accordion__trigger::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 9px; height: 9px;
	margin-top: -6px;
	border-right: 2px solid var(--sc-color-primary);
	border-bottom: 2px solid var(--sc-color-primary);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.sc-accordion__trigger[aria-expanded="true"]::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.sc-accordion__panel {
	padding-left: 50px;
	padding-top: var(--sc-space-md);
	font-size: var(--sc-fs-base);
	line-height: var(--sc-lh-base);
	color: var(--sc-color-text-panel);
}

/* theme.js collapses panels with the [hidden] attribute. State it explicitly:
   a `display` rule on the class would otherwise beat the UA's [hidden] style
   and every panel would render open — which is exactly what staging did. */
.sc-accordion__panel[hidden] { display: none; }

/* ==========================================================================
   5. Forms
   ========================================================================== */

/* The mirrored Gravity Forms markup ships scaffolding that GF's own stylesheet
   hides. Without these rules the honeypot field, its "this field is for
   validation purposes" label, and the numeric-range hints all render as visible
   page content — which is what staging was showing. */
.gform_validation_container,
.gform_hidden,
.gfield_visibility_hidden,
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .instruction,
.gform_wrapper .gfield_description:not(.validation_message) { display: none !important; }

/* Belt and braces: the extractor strips class attributes it does not map, so
   the scaffolding arrives carrying only its ID. These ID prefixes are stable
   GF output. The extractor now drops these nodes outright — this rule catches
   any page extracted before that fix.
   Verified safe: zero gfield_description/gfield_instruction nodes across the
   whole static mirror carry consent language. The carrier-reviewed 10DLC
   wording lives in a <label> (label_13_27_1), which is untouched here. */
[id^="gfield_description_"],
[id^="gfield_instruction_"],
[id^="gform_validation_container"] { display: none !important; }

/* Hero/inline form card. On production the form sits on a white rounded card
   against the tinted hero; the card is drawn by the enclosing column. */
.sc-raw form,
.sc-col > form,
.gform_wrapper form {
	background: var(--sc-color-bg);
	border-radius: var(--sc-radius-card);
	padding: var(--sc-space-md);
	box-shadow: var(--sc-shadow-card);
}

/* MEASURED, hero card only: production's card also carries a hairline border
   and a fixed 496px width. Scoped to the hero form row (`#home-hero-form-row`
   is shared, verbatim, across every hero page) rather than added to the
   general `.sc-raw form` rule above — the full-page forms on
   /personal-details-form/, /business-details-form/, /contact-us/ are NOT
   measured to have a border or a 496px cap, and a fixed width there would
   break them. */
#home-hero-form-row .sc-raw form {
	border: 1px solid rgb(232, 245, 255);
	width: 496px;
}

.gform_wrapper .gform_fields,
.sc-raw form .gform_fields { display: grid; gap: var(--sc-space-sm); }

/* ⚠️ `.gform_wrapper` IS NOT A CLASS ON THIS SITE. Gravity Forms emits it as an
   ID (`id="gform_wrapper_11"`), and the extractor keeps ids while remapping
   classes — so every `.gform_wrapper …` selector here matches nothing and is
   retained only because removing them is churn. `.sc-raw form …` is the
   selector that actually carries these forms; verify against the live markup
   before trusting a rule in this section. */

/* Labels — measured on production's three full-page forms (gform_9/13/5),
   which are byte-identical to each other. The compact loan widget (gform_11)
   renders ZERO visible labels; its two real ones are sr-only clipped, and that
   clipping is applied per-form further down, NOT here. */
.gform_wrapper label,
.sc-raw form label {
	display: inline-block;
	/* 8px on BOTH sides. Production's field row is exactly
	   8 + 26 + 8 + 48 = 90px, and the top margin is easy to miss because it
	   collapses out of view when you only compare the label box itself. */
	margin-top: 8px;
	margin-bottom: 8px;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: rgb(26, 26, 26);
}

/* Consent labels are NOT the field labels above — production paints them
   `rgb(72, 72, 72)` at weight 500 and constrains them to `calc(100% - 32px)`
   so the text clears the checkbox. The generic rule above would otherwise
   repaint them 26/26/26 at 400. Their 12px/22px sizing comes from the consent
   fieldset block further down; only the properties that differ are set here. */
.entry-content form .gfield--type-consent label,
.entry-content form .ginput_container_consent label,
.entry-content form fieldset label {
	max-width: calc(100% - 32px);
	color: rgb(72, 72, 72);
	font-weight: 500;
}

/* The required marker. Production paints it the same on all four forms even
   though the glyph differs ("(Required)" on the loan widget, "*" elsewhere).
   Weight is 400: the OUTER span computes 700 on the loan widget by inheriting
   that form's label weight, but the inner span that actually carries the glyph
   is 400, so styling from the outer one renders it bold and wrong. */
.sc-required,
.sc-raw form label .sc-required {
	display: inline-block;
	padding-left: 1.626px;
	font-size: 13.008px;
	font-weight: 400;
	color: rgb(192, 43, 10);
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select,
.sc-raw form input[type="text"],
.sc-raw form input[type="tel"],
.sc-raw form input[type="email"],
.sc-raw form input[type="number"],
.sc-raw form textarea,
.sc-raw form select {
	width: 100%;
	max-width: 100%;
	height: 48px;
	padding: 8px;
	/* Production is blue-bordered, not grey — `rgb(77, 155, 218)` at 0.8px on
	   every input of every form. The old `--sc-color-border-input` (#bbb) was
	   the browser-default grey we happened to inherit, never a measured value.
	   It is NOT a per-form value: the compact hero widget and the full-page
	   forms are identical here. */
	border: 0.8px solid rgb(77, 155, 218);
	border-radius: var(--sc-radius);
	font-family: var(--sc-font-body);
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	color: rgb(78, 78, 78);
	background-color: var(--sc-color-bg);
	box-sizing: border-box;
}

.sc-raw form textarea { height: 96px; }

/* Consent checkboxes. Production draws them itself rather than shipping the UA
   control — 0.8px blue, 2px radius, white fill. Ours were bare defaults. */
.entry-content form input[type="checkbox"] {
	appearance: none;
	width: 16px;
	height: 16px;
	border: 0.8px solid var(--sc-color-primary);
	border-radius: 2px;
	background-color: #fff;
	vertical-align: middle;
	cursor: pointer;
}
.entry-content form input[type="checkbox"]:checked {
	background-color: var(--sc-color-primary);
	/* Inline SVG tick, so no extra request and nothing to 404 after cutover. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

/* /contact-us/ (gform_9) is the one form at 15px. Everything else is 18px. */
.page-contact-us .sc-raw form input[type="text"],
.page-contact-us .sc-raw form input[type="tel"],
.page-contact-us .sc-raw form input[type="email"],
.page-contact-us .sc-raw form textarea { font-size: 15px; }

.gform_wrapper select,
.sc-raw form select {
	color: rgba(87, 101, 128, 0.6);
	appearance: none;
	/* The caret was declared with a position, repeat and size but NO
	   background-image, so no caret rendered at all. Production's own asset. */
	background-image: url("/wp-content/uploads/2023/09/vuesax-bold-arrow-down.svg");
	background-repeat: no-repeat;
	background-position: calc(100% - 16px) 50%;
	background-size: 16px 16px;
	padding-right: 40px;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus,
.sc-raw form input:focus,
.sc-raw form select:focus,
.sc-raw form textarea:focus {
	outline: none;
	border-color: var(--sc-color-primary);
	box-shadow: 0 0 0 3px rgba(81, 163, 230, 0.18);
}

.gform_wrapper input[type="submit"],
.gform_wrapper .gform_button,
.sc-raw form input[type="submit"],
.sc-raw form button[type="submit"] {
	width: 100%;
	height: 50px;
	margin-top: 18px;
	padding: 1px 6px;
	border: 0;
	border-radius: var(--sc-radius);
	background-image: var(--sc-button-gradient);
	/* Under the gradient and never seen — set only so a computed-style diff
	   against production stops reporting the UA default as a divergence. */
	background-color: #fff;
	color: #fff;
	font-family: var(--sc-font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	text-transform: none;
	cursor: pointer;
}
.gform_wrapper input[type="submit"]:hover,
.sc-raw form input[type="submit"]:hover,
.sc-raw form button[type="submit"]:hover {
	background-image: var(--sc-button-gradient-hover);
	box-shadow: rgba(33, 126, 175, 0.31) 0 5px 15px 0;
}
/* The loan widget's button is measurably the exception — no hover shadow, and
   flush against the field above it rather than the 18px gap the full-page
   forms use. Stable across settle samples on production, not a capture
   artifact. */
.page-business-loan .sc-raw form input[type="submit"] { margin-top: 0; }
.page-business-loan .sc-raw form input[type="submit"]:hover { box-shadow: none; }

/* Consent checkbox rows: the 10DLC wording is carrier-reviewed and must stay
   readable and byte-exact. Keep it small but never hidden. */
.gform_wrapper .gfield--type-consent label,
.gform_wrapper .ginput_container_consent label {
	font-size: var(--sc-fs-small);
	line-height: var(--sc-lh-small);
	font-weight: 500;
}

/* ==========================================================================
   6. Header / primary navigation
   ========================================================================== */

.site-header {
	position: relative;
	z-index: 100;
	background: var(--sc-color-bg);
	border-bottom: 1px solid var(--sc-color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sc-space-md);
	width: 90%;
	max-width: var(--sc-container-max);
	margin: 0 auto;
	min-height: 75px; /* MEASURED */
}

.site-branding { margin-right: auto; }
.site-branding__text {
	font-family: var(--sc-font-heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--sc-color-text);
	text-decoration: none;
}
.site-branding__text:hover { text-decoration: none; }
.site-branding img { max-height: 40px; width: auto; display: block; }

.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--sc-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}
.primary-menu li { margin: 0; position: relative; }

.primary-menu a {
	display: block;
	padding: 8px 0;
	font-size: var(--sc-fs-base); /* MEASURED 18px; was hardcoded 16px */
	font-weight: 600;
	color: var(--sc-color-text);
	text-decoration: none;
	white-space: nowrap;
}
.primary-menu a:hover,
.primary-menu a:focus-visible { color: var(--sc-color-primary); text-decoration: none; }

/* Parent items get a caret; production's "Business Loans" carries one. */
.primary-menu .menu-item-has-children > a { padding-right: 16px; }
.primary-menu .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -3px;
	width: 6px; height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: var(--sc-space-xs) 0;
	list-style: none;
	background: var(--sc-color-bg);
	border: 1px solid var(--sc-color-border);
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.primary-menu .sub-menu a { padding: 8px var(--sc-space-sm); font-weight: 500; }
.primary-menu .sub-menu a:hover { background: rgba(81, 163, 230, 0.08); }

.header-phone {
	font-size: var(--sc-fs-base); /* MEASURED 18px; was undeclared, fell through to body's 14px */
	font-weight: 700;
	color: var(--sc-color-text);
	white-space: nowrap;
}
.header-phone:hover { color: var(--sc-color-primary); text-decoration: none; }

.header-cta { padding: 10px 22px; font-size: 16px; }

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.menu-toggle__bar {
	display: block;
	width: 24px; height: 2px;
	margin: 0 auto;
	background: var(--sc-color-text);
	transition: transform .2s ease, opacity .2s ease;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.site-footer {
	background: var(--sc-color-bg-alt);
	color: var(--sc-color-on-dark);
	padding-top: var(--sc-space-band);
	/* MEASURED: production's footer padding is symmetric (60px 0), not 60/32.
	   Was var(--sc-space-lg) (32px). */
	padding-bottom: var(--sc-space-band);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.2fr;
	gap: var(--sc-space-lg);
	width: 90%;
	max-width: var(--sc-container-max);
	margin: 0 auto;
}

/* The previous revision left the footer inheriting dark body text on the navy
   ground, so headings, links and copy were all effectively invisible. Every
   foreground color in here is set explicitly for that reason. */
.site-footer .site-branding__text { color: #fff; }

/* MEASURED: production's heading is 18px/600/rgb(209,209,209) (= --sc-color-on-dark),
   not the 14px --sc-fs-small this was routed through (--sc-fs-small itself is
   correctly measured for its OTHER consumers — accordion captions, figcaptions,
   badge text — so it stays; this selector just stops consuming it).
   line-height left on --sc-lh-small: not measured/flagged, only size/weight/color were. */
.footer-heading {
	margin: 0 0 var(--sc-space-sm);
	font-size: var(--sc-fs-base);
	line-height: var(--sc-lh-small);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sc-color-on-dark);
	text-align: left;
	padding-bottom: 0;
}

.footer-menu,
.footer-contact,
.footer-social { margin: 0; padding: 0; list-style: none; }
.footer-menu li,
.footer-contact li { margin-bottom: var(--sc-space-xs); }

.site-footer a { color: var(--sc-color-on-dark); text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus-visible { color: #fff; text-decoration: underline; }

/* MEASURED: no font-size was declared for footer nav/contact links at all —
   they fell through to body's 14px default. Production is 16px. */
.footer-menu a { font-size: var(--sc-fs-footer); }

.footer-social { display: flex; gap: var(--sc-space-sm); margin-top: var(--sc-space-md); }
.footer-social a { display: inline-flex; }
.footer-social img,
.footer-social svg { width: 20px; height: 20px; }

/* Production's footer is NOT one link colour. The menu links are the
   `--sc-color-on-dark` #d1d1d1 the token records, but the phone and email sit
   inside a footer BLURB, which paints #a3a3a3 — measured on production, and
   the reason a token audit could not have caught it. */
.footer-contact__link {
	display: inline-block;
	font-size: var(--sc-fs-footer); /* MEASURED 16px; was undeclared -> 14px body default */
	color: rgb(163, 163, 163);
}

.footer-bottom {
	width: 90%;
	max-width: var(--sc-container-max);
	margin: var(--sc-space-lg) auto 0;
	padding-top: var(--sc-space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-copyright {
	margin: 0 0 var(--sc-space-sm);
	font-size: var(--sc-fs-footer); /* MEASURED 16px; was var(--sc-fs-small)/14px */
	line-height: var(--sc-lh-small);
	color: var(--sc-color-on-dark);
}

/* Legal disclaimer: deliberately small and low-contrast, but it must remain
   legible — it carries the credit-inquiry and APR language.
   MEASURED, width-independent (constant at 1440/1280/1100): 16px /
   rgb(163,163,163) / line-height 24px. Was 12px / rgba(209,209,209,.72) / 20.4px. */
.footer-disclaimer {
	margin: 0;
	font-size: var(--sc-fs-footer);
	line-height: var(--sc-lh-base);
	color: rgb(163, 163, 163);
}

/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (max-width: 980px) {
	.menu-toggle { display: flex; }

	.primary-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: var(--sc-color-bg);
		border-bottom: 1px solid var(--sc-color-border);
		box-shadow: var(--sc-shadow);
	}
	.primary-navigation:has(#primary-menu.is-open),
	#primary-menu.is-open { display: block; }

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--sc-space-sm) 5%;
	}
	.primary-menu > li { border-bottom: 1px solid var(--sc-color-border); }
	.primary-menu > li:last-child { border-bottom: 0; }

	.primary-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding-left: var(--sc-space-sm);
	}
	.primary-menu .menu-item-has-children > a::after { display: none; }

	.header-phone { display: none; }

	html.no-scroll { overflow: hidden; }

	/* Two-up and three-up rows go full width; the four-across icon band keeps
	   two columns so it does not become a long single-file list. */
	.sc-col--1-2,
	.sc-col--1-3,
	.sc-col--2-3 { flex: 1 1 100%; }
	.sc-col--1-4 { flex: 0 1 48.5%; }

	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* This block used to also set --sc-fs-h1/h2, --sc-space-section/band and
   .sc-col--1-4. All of that was GUESSED, and measurement contradicts every
   part of it — see assets/css/responsive.css, which now owns them:

     guessed here            measured on production
     h1 36px/44px @768       38px/48px, already in effect by 980px
     h2 30px/38px @768       32px/42px, likewise
     .sc-col--1-4 -> 100%    48.5% (2-up). Production NEVER goes 1-up at any
                             width down to 480px.

   768px was also the wrong breakpoint: sampling production at 1440/1200/980/
   780/480 shows exactly ONE transition, at 980px, and no second step below it.
   A block here implied a breakpoint that does not exist, and its values would
   have fought responsive.css's correct ones in the cascade.

   What remains is the footer grid collapse and the accordion padding — neither
   was in the measured archetype set, both are our own layout rather than a
   reproduction of Divi's, and both are sensible at phone width. Kept at 768px
   deliberately, not by omission. */
@media (max-width: 768px) {
	.site-footer__grid { grid-template-columns: 1fr; }

	.sc-accordion__trigger,
	.sc-accordion__panel { padding-left: var(--sc-space-sm); }
	.sc-accordion__trigger { padding-right: 36px; }
}

/* ==========================================================================
   9. /apply — e-sign application (page-apply.php)
   ========================================================================== */

.sc-apply { padding: var(--sc-space-section) 0; }

.sc-apply__wrap {
	width: 90%;
	max-width: 820px;   /* matches production's hand-written wrapper */
	margin: 0 auto;
}

.sc-apply__title {
	margin-bottom: var(--sc-space-lg);
	text-align: center;
}

/* Jotform's embed handler rewrites this height once it measures the form; the
   min-height only stops the page collapsing while that round-trip happens. */
.sc-apply iframe {
	display: block;
	width: 100%;
	min-height: 600px;
	border: 0;
}

/* Brand marks are rendered as direct <img> (see header.php). Constrain them so
   an SVG without intrinsic dimensions cannot blow out the header. */
.site-branding__link { display: inline-flex; align-items: center; }
.site-branding__logo { display: block; width: auto; max-width: 220px; }

/* Gravity Forms honeypot — present in the DOM for lead-intake.js's bot check,
   never shown. This is what GF's own stylesheet does; we ship the rule because
   we deliberately do not ship GF's CSS. */
.sc-honeypot { display: none !important; }

/* ==========================================================================
   10. Measured parity corrections — 2026-08-12
   ==========================================================================

   Every value below was READ OFF PRODUCTION via getComputedStyle, not chosen.
   They close defects that the previous verification pass was structurally
   incapable of seeing: it compared font sizes, image presence and total page
   height — all SCALAR — while each of these is a matter of paint, state or
   computed structure. Total page height even MATCHED within 2% at 1440px the
   whole time these were wrong. Tooling that finds this class of defect is
   `tools/structdiff.py`; the measurements come from
   `themes/smartercredit-base/tools/derive-responsive.py`.
   ========================================================================== */

/* --- 10.1 Sticky header --------------------------------------------------
   Production's nav stays pinned while the page scrolls; it runs a Divi sticky
   module that flips to position:fixed after the first scroll (measured
   `fixed div.et_pb_section h=75 z=999` at scrollY 1800, `relative` at 0).
   Ours was `position: relative` and scrolled away, so on every scrolled view
   production showed a nav and we showed none — read as "the top nav
   disappears". `sticky` achieves the same result without the JS class flip
   and without the layout jump that going to `fixed` causes. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--sc-color-bg);
}

/* --- 10.2 Accordion open state -------------------------------------------
   Never styled, because the derivation only ever sampled the DEFAULT state --
   nothing opened a panel before measuring. Production, measured per item:
     closed  bg #fff                      title rgb(26,26,26)  600
     open    bg rgba(81,163,230,0.05)     title rgb(81,163,230) 600
     both    border 0.8px rgba(81,163,230,0.16), radius 8px
   theme.js sets .is-open on the item as well as aria-expanded on the trigger,
   so the state is addressable without relying on :has(). */
.sc-accordion__item {
	background: #fff;
	border: 0.8px solid rgba(81, 163, 230, 0.16);
	border-radius: 8px;
}
.sc-accordion__item.is-open { background: rgba(81, 163, 230, 0.05); }

.sc-accordion__trigger { color: rgb(26, 26, 26); }
.sc-accordion__trigger[aria-expanded="true"] { color: rgb(81, 163, 230); }

/* --- 10.3 Field labels ---------------------------------------------------
   Production hides them (measured: position:absolute, 1x1px,
   clip-path: inset(50%)) because the design is placeholder-only. We match the
   TECHNIQUE rather than `display:none` deliberately: clipped labels are still
   announced by screen readers, so this is parity AND strictly better than a
   placeholder-only form.

   The native <select> is NOT hidden here even though production hides it too.
   Production replaces it with a styled custom dropdown; we ship no such
   replacement, so hiding it would make Loan Purpose unselectable — parity is
   not worth a dead required field. It is styled to match instead (10.4).

   The extractor strips class attributes, so these labels reach the page with NO
   class at all -- `.gfield_label` matches nothing here. They are addressed via
   the GF id convention (`field_<form>_<field>` wrapping `label[for^=input_]`),
   which survives extraction because `for` and `id` are in KEEP_ATTRS.

   SCOPE IS PER FORM, NOT SITE-WIDE. Production does NOT hide field labels
   generally -- measured across six pages at 1440px, counting visible labels:

       form 11   0/9  visible   CLIPS   <- the embedded 3-field loan widget
       form 5   15/16 visible   SHOWS   <- /personal-details-form/
       form 13  11/12 visible   SHOWS   <- /business-details-form/
       form 9    5/6  visible   SHOWS   <- /contact-us/

   Only the compact loan widget is placeholder-only. A first attempt at this
   rule was scoped by "any field containing a text-ish control", which is every
   form on the site -- it cut /business-details-form/ from 13 visible labels to
   2 and /personal-details-form/ from 17 to 2, silently stripping the labels off
   the two highest-intent conversion forms on the site. Caught by the full sweep,
   not by the single-page check that green-lit the change.

   On staging the widget is rendered as forms 8, 10 and 11 (production's single
   form 11), so those three ids are the whole allow-list. Forms 5, 9 and 13 must
   keep their labels. Any NEW form defaults to showing labels, which is the safe
   direction to fail. */
div[id^="field_8_"] > label,
div[id^="field_10_"] > label,
div[id^="field_11_"] > label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- 10.4 Native select --------------------------------------------------
   Matches the visible metrics of production's custom dropdown so the field
   reads as part of the same form. */
.sc-form select,
.sc-field select {
	width: 100%;
	border-radius: 5px;
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	color: rgba(87, 101, 128, 0.6);
	background-color: #fff;
}

/* --- 10.5 Third-party honeypots -----------------------------------------
   §above covers the Gravity Forms honeypot (input_13_31). CleanTalk injects a
   SECOND, separately-named one that was rendering VISIBLE on staging — a bare
   empty input at the foot of the form. Worse than cosmetic: a user who fills
   it trips the bot check and their lead is silently suppressed. Matched on the
   name prefix because CleanTalk suffixes it per form. */
input[name^="apbct__email_id__"],
input[name^="apbct_"] {
	display: none !important;
}

/* --- 10.6 Paint drift ----------------------------------------------------
   Weights and colours that drifted from production. Individually invisible,
   collectively the reason the two sites never quite looked the same. */
.primary-menu a { font-weight: 500; }               /* was 600, prod 500 */
.header-phone { font-weight: 600; }                 /* was 700, prod 600 */

.site-footer .footer-menu a,
.footer-col--legal a { color: rgb(163, 163, 163); } /* was rgb(209,209,209) */

/* Buttons carry their gradient as background-IMAGE; production also sets an
   opaque background-COLOR beneath it. Without the fallback the button goes
   transparent anywhere the gradient does not paint. */
a.sc-button,
button.sc-button,
input.sc-button,
.sc-button > a { background-color: #fff; }

/* --- 10.7 Responsive logo swap -------------------------------------------
   Production serves DIFFERENT logo artwork below 980px, not a resize, so this
   is two <img> elements toggled here rather than a srcset. Measured on
   production at real viewport widths (the CDP browser carries a 1.25 zoom, so
   requested widths must be verified against window.innerWidth or every sample
   lands at W/1.25 and the breakpoint is missed):

     real vw 1440   nav_logo.svg rendered,          smartercredit-logo.png absent
     real vw  980   nav_logo.svg width 0,           smartercredit-logo.png 141px

   The mobile copies are aria-hidden: both marks carry the same wordmark, so
   exposing two would make a screen reader announce the site name twice.

   ⚠️ The `img` qualifier is load-bearing, not styling. `.site-branding img`
   (§7, specificity 0-1-1) sets `display: block`, which outranks a bare
   `.site-branding__logo--mobile` (0-1-0) — so the first version of this rule
   was silently ignored in the HEADER while working perfectly in the FOOTER,
   because footer.php has no `.site-branding` wrapper for that rule to match.
   Identical CSS, opposite results, no error anywhere. Qualifying with `img`
   makes these 0-1-1 too, and they are later in source order, so they win. */
img.site-branding__logo--mobile { display: none; }

@media (max-width: 980px) {
	img.site-branding__logo--desktop { display: none; }
	img.site-branding__logo--mobile { display: block; }
}

/* --- 10.8 Content paragraph colour ---------------------------------------
   The single largest colour divergence in the full sweep: 420 instances of
   `rgb(38,38,38) -> rgb(102,102,102)`.

   It is NOT a token error, which is why it survived a token audit. Measured on
   production at real 1440px:

       .et_pb_text  (the module)   rgb(102,102,102)   <- ours matches exactly
       .et_pb_text p               rgb(38,38,38)      <- production sets this
                                                         explicitly; ours just
                                                         inherited the module

   So `--sc-color-body: #666666` is right and stays; what was missing is that
   production overrides paragraph copy one level down. Scoped to `.sc-text p`
   rather than bare `p` so it cannot reach the footer or the dark bands, whose
   paragraphs are light-on-dark and must keep inheriting their section colour
   (production runs those at rgb(209,209,209)). */
.sc-text p { color: var(--sc-color-text-panel); }

.sc-section--band .sc-text p,
.sc-section--dark .sc-text p,
.sc-section--alt .sc-text p,
.site-footer .sc-text p { color: inherit; }

/* --- 10.9 Legal-page body copy weight ------------------------------------
   Production's body copy is NOT one weight sitewide. Measured at real 1440px:

       /business-loan/   content <p>  font-weight 500 (×11), 700 (×5), 600 (×3)
       /privacy-policy/  content <p>  font-weight 400, unanimous across 60+

   So `body { font-weight: 500 }` is correct and stays; the legal pages are the
   exception. A sitewide `p { font-weight: 400 }` was proposed and would have
   made every loan page too light — the proposal itself flagged that its scope
   was evidenced on two pages only and asked for confirmation before landing,
   which is exactly what the loan-page measurement provided.

   Paint only: re-measuring two paragraphs at their 808px column width showed no
   change in wrapped height, so this is not part of the legal-page height gap. */
.page-privacy-policy .sc-text p,
.page-terms-of-use .sc-text p,
.page-privacy-policy .sc-text li,
.page-terms-of-use .sc-text li { font-weight: 400; }

/* --- 10.10 Geometry corrections ------------------------------------------
   From a live re-sweep (11 pages × 3 widths) after the module/row width fixes
   landed. Three independent causes, each measured on production at real 1440px.

   1. HEADER NAV POSITION. `.site-branding { margin-right: auto }` made the logo
      absorb ALL free space in the flex row — 472px — pushing the nav ~600px
      right of the logo where production leaves ~238px. Moving the auto-margin
      to the actions block preserves the right-edge alignment (already correct,
      both end at 1326) and lets the nav pack up behind the logo.
      This is NOT the logo-width bug below: the auto-margin swallows any width
      change, so the two are independent. That was worth disproving — the
      obvious story was that a narrower logo dragged the nav along with it.
      Explains 44 findings, all 11 pages, at 1440 only (below 980 the nav is a
      hamburger and this rule is inert).

   2. FOOTER COLUMNS. Production: 565/188/188/282px, edge to edge, NO gap.
      Ours: 2fr 1fr 1fr 1.2fr with a 32px gap ×3, so 96px went to gutters and
      every column landed left of production — 218 findings across all pages and
      widths. 3fr/1fr/1fr/1.5fr at gap 0 reproduces production almost exactly
      (1224/6.5 = 188.3 per part → 565/188/188/283).
      Removing the gap is what makes the numbers match. Production is the
      tiebreaker for any divergence that is not a deliberate design decision
      (cle, 2026-08-12), and nothing recorded this gap as one.

   3. LOGO HEIGHT. Production serves the SAME 216×45 asset in header and footer;
      ours was capped at 34px and the footer shrank it further to 30px, and since
      width is auto the height error produced the width error. 53 findings.
      The old rules are deleted above rather than overridden — the footer one was
      0-2-0 and would have kept winning. */
/* Both auto-margins, not one. Measured at 1440 (production vs staging):
       auto on branding only   nav at 904 vs production 777   (+127)
       auto on actions only    nav at 461 vs production 777   (-316)  <- worse
       auto on BOTH            splits the 491px of free space evenly, nav ~539
   The proposal moved the margin rather than adding one, on the reasoning that
   the nav should pack up behind the logo. Measurement says production does not
   do that either — it leaves ~275px after the logo. Splitting the slack is the
   closest non-brittle approximation; a fixed px offset would only be right at
   one viewport width. */
.site-branding { margin-right: auto; }
/* MEASURED: production keeps a 48px gap between the phone number and "Apply
   now"; the two `<a>` here were separated only by markup whitespace (~0px
   effective). */
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 48px; }

/* The logo cap has to be lifted here too: `.site-branding img { max-height:40px }`
   (§7) is 0-1-1 and silently held the 45px rule below to 40px, giving 192x40
   against production's 216x45. Third time in this file that a 0-1-1 element-
   qualified rule has quietly beaten a 0-1-0 class rule — worth remembering that
   `.parent tag` outranks `.child-class`. */
.site-branding img.site-branding__logo--desktop { max-height: none; height: 45px; }
.site-branding img.site-branding__logo--mobile { max-height: none; height: 29px; }

.site-footer__grid {
	grid-template-columns: 3fr 1fr 1fr 1.5fr;
	gap: 0;
}

.site-branding__logo--desktop { height: 45px; }
.site-branding__logo--mobile { height: 29px; }

/* --- 10.11 wpautop artifact around hidden form inputs --------------------
   Gravity Forms emits a run of hidden inputs after the submit button
   (gform_submission_method, gform_theme, state_<n>, …). WordPress's wpautop
   then wraps them in <p> and joins them with <br>, and while the INPUTS are
   invisible the paragraphs and line breaks are not — they rendered a 239px
   block of blank space below the contact form.

   Measured on /contact-us/ at 1440px: a <div> of four <br> (17px each) plus a
   120px <p>, against nothing at all in the same position on production.

   Not fixed in the markup, because wpautop runs at render time on content the
   extractor never sees — the <br>s do not exist in extracted/contact-us.html.
   Scoped inside .entry-content form so it cannot affect real body copy. */
.entry-content form br { display: none; }

.entry-content form p:has(> input[type="hidden"]) {
	margin: 0;
	line-height: 0;
}

/* Same root cause, a second shape of it: wpautop also leaves a genuinely EMPTY
   `<p>` between every field's label and its input. It has no content and no
   height of its own, so it is invisible — but it carries the 24px paragraph
   margin, and there is one per field.
   Measured: a text field row is 90px on production and was 104px here; ~14
   fields per form, which is the whole of the +7.6% / +11.0% gap that appeared
   on the two long forms the moment the field metrics themselves became
   correct. A defect that only becomes visible once a bigger one is fixed.
   Like the <br> rule above this cannot be fixed in the markup — the empty <p>
   does not exist in extracted/*.html, wpautop synthesises it at render. */
.entry-content form p:empty { display: none; }

/* --- 10.12 Consent fieldset metrics --------------------------------------
   The TCPA/email consent blocks are the last of the /contact-us/ gap. Measured
   on production vs staging at 1440px, field_9_8 (sms consent):

       production   fieldset h=197   label 12px/22px, h=198   no visible legend
       staging      fieldset h=309   label 16px/23.8px, h=238  legend h=24

   Our label inherits the form's 16px where production sets 12px, so the same
   consent copy takes four extra lines, and we additionally render a <legend>
   production does not show. Combined that is the +112px on this fieldset and
   +83px on its email sibling.

   Scoped to fieldsets so it cannot shrink ordinary field labels, which
   production runs at 15px and which are already correct. */
.entry-content form fieldset legend { display: none; }

.entry-content form fieldset label,
.entry-content form fieldset label a {
	font-size: 12px;
	line-height: 22px;
}
.entry-content form fieldset label { margin-bottom: 0; }

/* --- 10.13 Gravity Forms field gap --------------------------------------
   Production puts a 16px gap between ordinary field wrappers (measured: 9 of
   13 gaps on /business-details-form/ are exactly 16px). Staging had 0px on
   every pair.

   The intended rule already existed at §5 — `.gform_wrapper .gform_fields,
   .sc-raw form .gform_fields { display: grid; gap: var(--sc-space-sm) }` —
   and never fired, because the extracted markup emits `id="gform_fields_13"`
   and never `class="gform_fields"`. A correct value behind a selector that
   matches nothing, which is the same silent-failure shape as the rest of this
   file's history.

   Scoped to the two detail forms, NOT applied globally, because the same dead
   selector covers every Gravity Forms instance and a global fix was measured
   to make /contact-us/ WORSE (+9.5% -> +15.7%): that page carries its own
   separate overshoot which the missing gap was coincidentally masking. Fixing
   both at once would have traded one hidden compensation for another.

       business-details-form  -7.2% -> +2.0%
       personal-details-form  -6.3% -> +4.8%   (measured by CDP injection) */
#gform_13 [id^="gform_fields_"],
#gform_5 [id^="gform_fields_"] { display: grid; gap: var(--sc-space-sm); }
