/**
 * Triton Stone Group  Customer Credit Application
 * Gravity Forms styling, Orbital theme.
 *
 * Scoped to .tsg-credit-app_wrapper, the wrapper Gravity Forms builds from
 * the form's own CSS class, so nothing here can reach another form.
 *
 * Two things are worth knowing before editing:
 *
 * 1. Most of the look is set by overriding Orbital's own --gf-ctrl-* design
 *    tokens rather than by restating background / border / color. Orbital's
 *    control and button rules are long :where() chains that are painful to
 *    out-specify, but every one of them resolves through these tokens, which
 *    it declares at a single-class specificity we beat easily.
 *
 * 2. Where a hand-written rule is unavoidable it carries a
 *    .gform_wrapper.gform-theme prefix, purely to out-specify Orbital's
 *    three-class selectors. The plugin also makes this sheet depend on the
 *    Gravity Forms theme sheets so it always prints after them.
 *
 * Fonts are deliberately not declared. The form inherits Montserrat from the
 * Elementor global typography already loaded on tritonstone.com.
 */

/* -------------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------------- */

.gform_wrapper.gform-theme.tsg-credit-app_wrapper {
	/* Brand palette, read off the Elementor globals on tritonstone.com. */
	--tsg-navy: #263e96;
	--tsg-navy-dark: #1b2d6e;
	--tsg-blue: #0a5aa8;
	--tsg-accent: #d52c93;
	--tsg-accent-dark: #9c1a68;
	--tsg-ink: #1d1d1d;
	--tsg-muted: #5c6470;
	--tsg-line: #c9cfdb;
	--tsg-line-soft: #e6e9ef;
	--tsg-surface: #ffffff;
	--tsg-surface-alt: #f7f7f7;
	--tsg-surface-tint: #f3f5fb;

	--tsg-radius: 3px;
	--tsg-band-gap: 2.75rem;

	/* ------------------------------------------------------------------
	 * Gravity Forms tokens.
	 *
	 * Every --gf-* declaration below carries !important, and that is
	 * deliberate. Gravity Forms prints a per-form palette in an inline
	 * <style> keyed on #gform_wrapper_<id>, which no class selector can
	 * out-specify, and which of these tokens that block happens to set
	 * varies by GF version and by the form's own style settings. Marking
	 * the whole group means the palette here holds regardless.
	 *
	 * These are custom properties on one wrapper element, so nothing is
	 * being forced on a real property and nothing leaks past this form.
	 * The alternative, a gform_default_styles filter, would repaint every
	 * other form on the site.
	 * --------------------------------------------------------------- */

	/* Palette roots. Most of Orbital derives from these two families, so
	 * setting them catches everything this sheet does not name outright:
	 * the file upload button, list add and delete icons, the date picker. */
	--gf-color-primary: var(--tsg-navy) !important;
	--gf-color-primary-rgb: 38, 62, 150 !important;
	--gf-color-primary-contrast: #ffffff !important;
	--gf-color-primary-darker: var(--tsg-navy-dark) !important;
	--gf-color-primary-lighter: var(--tsg-blue) !important;
	--gf-color-in-ctrl-primary: var(--tsg-navy) !important;
	--gf-color-in-ctrl-primary-rgb: 38, 62, 150 !important;
	--gf-color-in-ctrl-primary-contrast: #ffffff !important;
	--gf-color-in-ctrl-primary-darker: var(--tsg-navy-dark) !important;
	--gf-color-in-ctrl-primary-lighter: var(--tsg-blue) !important;

	/* Controls. */
	--gf-ctrl-radius: var(--tsg-radius) !important;
	--gf-ctrl-border-color: var(--tsg-line) !important;
	--gf-ctrl-border-color-hover: var(--tsg-navy) !important;
	--gf-ctrl-border-color-focus: var(--tsg-navy) !important;
	--gf-ctrl-border-width: 1px !important;
	--gf-ctrl-color: var(--tsg-ink) !important;
	--gf-ctrl-bg-color: var(--tsg-surface) !important;
	--gf-ctrl-accent-color: var(--tsg-navy) !important;
	--gf-ctrl-choice-check-color: var(--tsg-navy) !important;
	--gf-ctrl-outline-color-focus: rgba(38, 62, 150, 0.35) !important;
	--gf-ctrl-placeholder-color: var(--tsg-muted) !important;
	--gf-ctrl-desc-color: var(--tsg-muted) !important;
	--gf-ctrl-icon-color: var(--tsg-muted) !important;
	--gf-ctrl-file-btn-color: var(--tsg-navy) !important;
	--gf-ctrl-file-zone-color: var(--tsg-line) !important;
	--gf-ctrl-file-zone-radius: var(--tsg-radius) !important;
	--gf-ctrl-textarea-resize: vertical !important;

	/* Buttons. */
	--gf-ctrl-btn-radius: var(--tsg-radius) !important;
	--gf-ctrl-btn-bg-color-primary: var(--tsg-navy) !important;
	--gf-ctrl-btn-border-color-primary: var(--tsg-navy) !important;
	--gf-ctrl-btn-color-primary: #ffffff !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--tsg-navy-dark) !important;
	--gf-ctrl-btn-border-color-hover-primary: var(--tsg-navy-dark) !important;
	--gf-ctrl-btn-color-hover-primary: #ffffff !important;
	--gf-ctrl-btn-bg-color-focus-primary: var(--tsg-navy-dark) !important;
	--gf-ctrl-btn-border-color-focus-primary: var(--tsg-navy-dark) !important;
	--gf-ctrl-btn-color-focus-primary: #ffffff !important;
	--gf-ctrl-btn-bg-color-secondary: transparent !important;
	--gf-ctrl-btn-border-color-secondary: var(--tsg-navy) !important;
	--gf-ctrl-btn-color-secondary: var(--tsg-navy) !important;
	--gf-ctrl-btn-bg-color-hover-secondary: var(--tsg-surface-tint) !important;
	--gf-ctrl-btn-border-color-hover-secondary: var(--tsg-navy-dark) !important;
	--gf-ctrl-btn-color-hover-secondary: var(--tsg-navy-dark) !important;
	--gf-ctrl-btn-size-md: 2.875rem !important;
	--gf-ctrl-btn-padding-x-md: 1.75rem !important;
	--gf-ctrl-btn-font-weight: 600 !important;

	/* Field rhythm. */
	--gf-field-gap-y: 1.375rem !important;
	--gf-field-gap-x: 1.25rem !important;
	--gf-field-choice-gap: 0.5rem !important;
}

/* -------------------------------------------------------------------------
 * Sheet
 * ---------------------------------------------------------------------- */

.tsg-credit-app_wrapper {
	max-width: 62.5rem;
	margin-inline: auto;
	color: var(--tsg-ink);
	line-height: 1.55;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper form {
	background: var(--tsg-surface);
	border: 1px solid var(--tsg-line-soft);
	border-radius: var(--tsg-radius);
	padding: clamp(1.25rem, 4vw, 2.75rem);
}

/* -------------------------------------------------------------------------
 * Step navigation
 * ---------------------------------------------------------------------- */

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_page_steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0;
	margin: 0 0 2rem;
	padding: 0 0 1.25rem;
	border-block-end: 1px solid var(--tsg-line-soft);
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0 0.75rem 0 0;
	font-size: 0.8125rem;
	opacity: 1;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step_number {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.875rem;
	height: 1.875rem;
	border: 1px solid var(--tsg-line);
	border-radius: 50%;
	background: var(--tsg-surface);
	color: var(--tsg-muted);
	font-size: 0.8125rem;
	font-style: normal;
	font-weight: 600;
	line-height: 1;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step_number::before,
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step_number::after {
	content: none;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step_label {
	min-width: 0;
	color: var(--tsg-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Never mid-word. These are single words, so a break here reads as a typo
	 * ("PURCHA / SING"). The layout below guarantees they fit instead. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step_active .gf_step_number {
	background: var(--tsg-navy);
	border-color: var(--tsg-navy);
	color: #ffffff;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step_active .gf_step_label {
	color: var(--tsg-navy);
	font-weight: 700;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step_completed .gf_step_number {
	background: var(--tsg-surface-tint);
	border-color: var(--tsg-navy);
	color: var(--tsg-navy);
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step_completed .gf_step_label {
	color: var(--tsg-ink);
}

/* -------------------------------------------------------------------------
 * Section bands
 * ---------------------------------------------------------------------- */

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gsection.tsg-band {
	margin-block: var(--tsg-band-gap) 0.5rem;
	padding: 0;
	border: 0;
}

/* No leading gap above the band that opens a page. */
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_page_fields .gform_fields > .tsg-band:first-child {
	margin-block-start: 0;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-band .gsection_title {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--tsg-radius);
	background: var(--tsg-navy);
	color: #ffffff;
	font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	overflow: hidden;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-band__num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	padding-inline: 0.5rem;
	background: var(--tsg-navy-dark);
	font-size: 1rem;
	letter-spacing: 0;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-band__text {
	flex: 1 1 auto;
	padding: 0.75rem 1rem;
}

/* Fallback for when the plugin's markup filter is not running and the number
 * is still inline in the heading text. */
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-band .gsection_title:not(:has(.tsg-band__num)) {
	padding: 0.75rem 1rem;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-band .gsection_description {
	margin: 0.75rem 0 0;
	padding: 0;
	color: var(--tsg-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Labels and inputs
 * ---------------------------------------------------------------------- */

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gfield_label {
	margin-block-end: 0.375rem;
	color: var(--tsg-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gfield_required {
	color: var(--tsg-accent);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* Sub-labels only. The complex field's own legend keeps the treatment above,
 * so it must not be caught here. */
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform-field-label--type-sub {
	color: var(--tsg-muted);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gfield_description {
	color: var(--tsg-muted);
	font-size: 0.8125rem;
}

/* Address blocks default to four stacked rows, which is a lot of height for
 * the three of them on this form. The sub-field container is a flex row
 * (.gform-grid-row), so these are widths, not grid spans: street and line 2
 * share the first row, then city, state and ZIP share the second. */
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .ginput_container_address > .address_line_1,
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .ginput_container_address > .address_line_2 {
	inline-size: 50%;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .ginput_container_address > .address_city {
	inline-size: 41.6667%;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .ginput_container_address > .address_state {
	inline-size: 33.3333%;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .ginput_container_address > .address_zip {
	inline-size: 25%;
}

@media (max-width: 40rem) {
	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .ginput_container_address > .address_line_1,
	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .ginput_container_address > .address_line_2,
	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .ginput_container_address > .address_city {
		inline-size: 100%;
	}

	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .ginput_container_address > .address_state,
	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .ginput_container_address > .address_zip {
		inline-size: 50%;
	}
}

/* -------------------------------------------------------------------------
 * Choice chips
 *
 * Orbital lays choices out as a column of inline-grid rows with a visible
 * control. These are pills instead: the native input is kept for keyboard
 * and screen-reader users but visually replaced by its own label.
 * ---------------------------------------------------------------------- */

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-chips .gfield_radio,
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-chips .gfield_checkbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-chips .gchoice {
	display: inline-flex;
	flex: 0 1 auto;
	position: relative;
	grid-template-columns: none;
	gap: 0;
	margin: 0;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-chips .gchoice .gfield-choice-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-chips .gchoice label {
	display: block;
	margin: 0;
	padding: 0.4375rem 0.9375rem;
	border: 1px solid var(--tsg-line);
	border-radius: 999px;
	background: var(--tsg-surface);
	color: var(--tsg-ink);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-chips .gchoice label:hover {
	border-color: var(--tsg-navy);
	color: var(--tsg-navy);
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-chips .gchoice input:checked + label {
	background: var(--tsg-navy);
	border-color: var(--tsg-navy);
	color: #ffffff;
	font-weight: 600;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-chips .gchoice input:focus-visible + label {
	outline: 2px solid var(--tsg-navy);
	outline-offset: 2px;
}

/* The free-text box that belongs to an "Other" choice. */
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-chips .gchoice_other_control {
	flex: 0 1 auto;
	grid-column: auto;
	min-width: 11rem;
	max-width: 18rem;
	padding: 0.4375rem 0.9375rem;
	border: 1px solid var(--tsg-line);
	border-radius: 999px;
	font-size: 0.875rem;
}

/* The Yes/No disclosure reads as a question, not a field label. */
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-disclosure .gfield_label {
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* -------------------------------------------------------------------------
 * List fields (owners and officers, trade references)
 * ---------------------------------------------------------------------- */

/* Despite the class names, Gravity Forms builds these out of divs on a flex
 * grid, not a table, so everything here is padding and background rather
 * than table styling. */
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-list .gfield_list_container {
	border: 1px solid var(--tsg-line-soft);
	border-radius: var(--tsg-radius);
	overflow: hidden;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-list .gfield_list_header {
	margin: 0;
	padding: 0.5rem 0.625rem;
	background: var(--tsg-surface-tint);
	border-block-end: 1px solid var(--tsg-line-soft);
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-list .gfield_header_item {
	color: var(--tsg-navy);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: start;
	text-transform: uppercase;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-list .gfield_list_group {
	margin: 0;
	padding: 0.5rem 0.625rem;
	row-gap: 0.5rem;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-list .gfield_list_group + .gfield_list_group {
	border-block-start: 1px solid var(--tsg-line-soft);
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-list .gfield_list_row_odd {
	background: transparent;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-list .gfield_list_icons {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Legal copy blocks
 * ---------------------------------------------------------------------- */

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-legal {
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--tsg-line-soft);
	border-inline-start: 3px solid var(--tsg-navy);
	border-radius: var(--tsg-radius);
	background: var(--tsg-surface-alt);
	color: var(--tsg-ink);
	font-size: 0.875rem;
	line-height: 1.65;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-legal p {
	margin: 0;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-legal p + p {
	margin-block-start: 0.75rem;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-legal-scroll {
	max-height: 20rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-terms {
	margin: 0;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-terms dt {
	margin-block-start: 1rem;
	color: var(--tsg-navy);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-terms dt:first-child {
	margin-block-start: 0;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-terms dd {
	margin: 0.25rem 0 0;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-subhead h4 {
	margin: 0 0 0.375rem;
	color: var(--tsg-ink);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-subhead p {
	margin: 0;
	color: var(--tsg-muted);
	font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
 * Consent
 * ---------------------------------------------------------------------- */

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-consent .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	grid-template-columns: none;
	padding: 1rem 1.125rem;
	border: 1px solid var(--tsg-navy);
	border-radius: var(--tsg-radius);
	background: var(--tsg-surface-tint);
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-consent input[type="checkbox"] {
	flex: 0 0 auto;
	margin-block-start: 0.0625rem;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-consent .gfield_consent_label {
	margin: 0;
	color: var(--tsg-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: 0;
}

/* The consent field's own label just repeats the section band above it. */
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-consent > .gfield_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;
}

/* -------------------------------------------------------------------------
 * File uploads
 * ---------------------------------------------------------------------- */

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gfield--type-fileupload input[type="file"] {
	width: 100%;
	padding: 0.625rem;
	border: 1px dashed var(--tsg-line);
	border-radius: var(--tsg-radius);
	background: var(--tsg-surface-alt);
	font-size: 0.875rem;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gfield--type-fileupload input[type="file"]:hover {
	border-color: var(--tsg-navy);
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_drop_area {
	padding: 1.5rem 1rem;
	border: 1px dashed var(--tsg-line);
	border-radius: var(--tsg-radius);
	background: var(--tsg-surface-alt);
	color: var(--tsg-muted);
	font-size: 0.875rem;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Signature
 * ---------------------------------------------------------------------- */

/* The add-on sets an inline pixel width on both the container and the canvas
 * and resizes them itself on gform_post_render. These caps only stop the box
 * spilling out of a narrow column before that runs. */
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-signature .gfield_signature_container {
	max-width: 100%;
	border-radius: var(--tsg-radius);
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-signature canvas {
	max-width: 100%;
	border-radius: var(--tsg-radius);
	touch-action: none;
	cursor: crosshair;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-signature .gform-theme-button,
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-signature .gfield_signature_reset {
	color: var(--tsg-navy);
}

/* -------------------------------------------------------------------------
 * Buttons and footers
 * ---------------------------------------------------------------------- */

/* Gravity Forms prints the forward button before Back in the markup, so the
 * visual order is set here: Back hard left, forward button hard right. */
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_page_footer,
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-block-start: 2.25rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--tsg-line-soft);
}

/* The auto margin is what pushes Back to the far left; order alone will not
 * do it. It carries !important because Orbital zeroes the margin on every
 * button from one of its :where() chains, which a class selector cannot
 * out-specify. Verified: without it, Back sits beside Continue on the right. */
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_previous_button {
	order: 1;
	margin-inline-end: auto !important;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_next_button,
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_button {
	order: 2;
}

/* Button colors, size and typography all come from the --gf-ctrl-btn-*
 * tokens at the top of this file. Orbital's own button rules are
 * :where() chains that a plain class selector cannot out-specify, so
 * restating background, padding or font-size here would silently do
 * nothing. */

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

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_validation_errors {
	margin-block-end: 1.75rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--tsg-accent);
	border-inline-start: 3px solid var(--tsg-accent);
	border-radius: var(--tsg-radius);
	background: #fdf3f9;
	box-shadow: none;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_validation_errors > h2 {
	margin: 0 0 0.5rem;
	color: var(--tsg-accent-dark);
	font-size: 0.9375rem;
	font-weight: 700;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_validation_errors a {
	color: var(--tsg-accent-dark);
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gfield_error .gfield_label {
	color: var(--tsg-accent-dark);
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gfield_validation_message,
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .validation_message {
	margin-block-start: 0.375rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tsg-accent-dark);
	font-size: 0.8125rem;
	font-weight: 500;
}

/* -------------------------------------------------------------------------
 * Confirmation
 * ---------------------------------------------------------------------- */

.gform_confirmation_wrapper.tsg-credit-app_wrapper .gform_confirmation_message,
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_confirmation_message {
	padding: 2rem;
	border: 1px solid var(--tsg-line-soft);
	border-block-start: 3px solid var(--tsg-navy);
	border-radius: var(--tsg-radius);
	background: var(--tsg-surface-alt);
	font-size: 1rem;
}

/* -------------------------------------------------------------------------
 * Narrow screens
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Defenses against site-wide form CSS
 *
 * tritonstone.com carries an inline <style> block of Gravity Forms overrides
 * that were written for specific forms but left unscoped, so they land on
 * every form on the site including this one. Measured on the live page, these
 * are the ones that reached this form:
 *
 *   .gform-field-label--type-inline { color: #fff !important }
 *       Written alongside #gform_wrapper_1 rules for a form on a dark
 *       background. That class is on every inline choice label, so it turned
 *       every choice chip and both consent labels white on white, i.e.
 *       invisible.
 *
 *   .gform_button { background: #000 !important }
 *       Turned the submit button black.
 *
 *   .gform-theme--foundation .gform_fields { row-gap: 12px }
 *       Compressed the spacing between every field.
 *
 * The right fix is to scope those rules to the forms they were meant for, and
 * that is worth doing because they will hit the next form built on this site
 * too. Until then, this section keeps this form correct on its own.
 *
 * !important is used here only where the site rule is itself !important, and
 * only on this form's wrapper, so nothing here reaches any other form. The
 * row-gap rule needs no !important, plain specificity is enough.
 * ---------------------------------------------------------------------- */

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-chips .gchoice label {
	color: var(--tsg-ink) !important;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-chips .gchoice label:hover {
	color: var(--tsg-navy) !important;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-chips .gchoice input:checked + label {
	color: #ffffff !important;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-consent .gfield_consent_label {
	color: var(--tsg-ink) !important;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_footer .gform_button,
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_page_footer .gform_button {
	background: var(--tsg-navy) !important;
	color: #ffffff !important;
}

.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_footer .gform_button:hover,
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_page_footer .gform_button:hover {
	background: var(--tsg-navy-dark) !important;
}

/* Restores Gravity Forms' own field-to-field spacing. Note the token: the
 * gap between fields is --gf-form-gap-y, not --gf-field-gap-y, which controls
 * something else. Using the wrong one here silently tightened the whole form
 * from 40px to 22px. */
.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_fields {
	row-gap: var(--gf-form-gap-y);
}

/* -------------------------------------------------------------------------
 * Step navigation, stacked
 *
 * Below 64rem there is not enough room to sit a label beside its circle. The
 * labels are single words, so the browser's only way to fit them is to break
 * inside the word, which reads as a typo ("PURCHA / SING"). Measured: the
 * inline layout still fits at 1100px and fails by 960px.
 *
 * Stacking gives each label the full column width, and the geometry finally
 * supports a real connector between circle centers, which the inline layout
 * never did.
 * ---------------------------------------------------------------------- */

@media (max-width: 64rem) {
	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_page_steps {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 0.375rem;
		padding-block-end: 1rem;
	}

	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step {
		flex-direction: column;
		gap: 0.375rem;
		padding: 0;
		text-align: center;
	}

	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step_number {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.75rem;
		/* Sits above the connector drawn below. */
		position: relative;
		z-index: 1;
	}

	/* The connector: a real line from this circle's center to the next one's,
	 * running behind both. */
	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step:not(.gf_step_last)::after {
		content: "";
		position: absolute;
		z-index: 0;
		inset-block-start: 0.875rem;
		inset-inline-start: 50%;
		width: calc(100% + 0.375rem);
		height: 1px;
		background: var(--tsg-line);
	}

	/* Steps already done get a filled-in connector, so the bar reads as
	 * progress rather than decoration. */
	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step_completed:not(.gf_step_last)::after {
		background: var(--tsg-navy);
	}

	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step_label {
		/* Scales with the column so the longest label, PURCHASING, fits on one
		 * line from a small phone up to the 64rem breakpoint. The floor is set
		 * by what a 360px phone can take; below that the rule after this one
		 * takes over. */
		font-size: clamp(0.5625rem, 1.45vw, 0.6875rem);
		letter-spacing: 0.02em;
		line-height: 1.25;
	}
}

/* Below this the five columns are too narrow even for the clamp floor. */
@media (max-width: 23rem) {
	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_step_label {
		font-size: 0.5rem;
		letter-spacing: 0;
	}
}

@media (max-width: 40rem) {
	/* Four and five columns of text inputs cannot sit side by side on a
	 * phone. Drop the header row and stack each row's cells, labelled from
	 * the data-label Gravity Forms already puts on every cell. */
	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-list .gfield_list_header {
		display: none;
	}

	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-list .gfield_list_group {
		display: block;
		padding: 0.75rem;
	}

	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-list .gfield_list_cell {
		display: block;
		width: 100%;
		padding: 0;
	}

	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-list .gfield_list_cell + .gfield_list_cell {
		margin-block-start: 0.625rem;
	}

	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-list .gfield_list_cell[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-block-end: 0.25rem;
		color: var(--tsg-muted);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-list .gfield_list_icons {
		justify-content: flex-end;
		margin-block-start: 0.625rem;
	}

	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_page_footer .button,
	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_footer .button {
		flex: 1 1 100%;
	}
}

/* -------------------------------------------------------------------------
 * Print
 * ---------------------------------------------------------------------- */

@media print {
	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gf_page_steps,
	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_page_footer,
	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_footer {
		display: none;
	}

	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .gform_page {
		display: block !important;
	}

	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-legal-scroll {
		max-height: none;
		overflow: visible;
	}

	.gform_wrapper.gform-theme.tsg-credit-app_wrapper .tsg-band .gsection_title {
		background: var(--tsg-navy) !important;
		color: #ffffff !important;
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}
}