/*
 * Secure Pricing & Order Form — customer-facing form.
 *
 * This markup is dropped into an unknown theme, so nothing is left to inherit.
 * Every control resets appearance, margin, border, background, font and colour
 * explicitly, all custom properties are --spof- prefixed so a theme's --brand or
 * --line cannot bleed in, and component rules are doubled up (.spof .spof__x) to
 * outrank the single-class selectors themes typically ship.
 */

.spof {
	--spof-ink: #10262b;
	--spof-ink-2: #33474b;
	--spof-navy: #08324f;
	--spof-brand: #0f7061;
	--spof-brand-dark: #0a5449;
	--spof-brand-soft: #e8f5f1;
	--spof-muted: #64797d;
	--spof-line: #dbe6e3;
	--spof-line-strong: #bed1cd;
	--spof-surface: #ffffff;
	--spof-surface-2: #f7faf9;
	--spof-danger: #b42318;
	--spof-danger-soft: #fdf0ee;
	--spof-success: #157f5a;
	--spof-radius: 16px;
	--spof-radius-sm: 10px;
	--spof-shadow: 0 10px 34px rgba(16, 46, 44, .08);
	--spof-shadow-lg: 0 18px 48px rgba(16, 46, 44, .14);
	--spof-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	box-sizing: border-box;
	width: 100%;
	max-width: 1180px;
	margin: 24px auto;
	padding: 0 18px 44px;
	color: var(--spof-ink);
	font-family: var(--spof-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
}

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

.spof [hidden] { display: none !important; }

/*
 * Element-level reset for what themes restyle globally. Every selector is wrapped in
 * :where() so the reset carries no specificity: it beats a theme's bare element rules
 * but can never beat this stylesheet's own components. Without this, `.spof fieldset
 * { margin: 0 }` silently won against `.spof__delivery { margin-top: 24px }`.
 */
.spof :where(button, input, select, textarea) {
	margin: 0;
	font-family: var(--spof-font);
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
}
.spof :where(fieldset) { min-width: 0; margin: 0; padding: 0; border: 0; }
.spof :where(legend) { display: block; float: none; width: auto; padding: 0; }
.spof :where(ol, ul) { margin: 0; padding: 0; list-style: none; }
.spof :where(dl, dd) { margin: 0; }
.spof :where(img) { max-width: 100%; height: auto; }

/*
 * Themes routinely restyle these element selectors globally (italic labels, huge
 * paragraph margins, decorative headings). Restate every property they touch so the
 * form is never at the mercy of the surrounding page.
 */
/*
 * Wrapped in :where() so the reset carries no specificity of its own. It still
 * outranks a theme's bare element selectors, but it can never outrank this
 * stylesheet's own component rules — which is what happened before, silently
 * flattening the spacing the components set for themselves.
 */
.spof :where(p, label, strong, small, em, span, dt, dd, li) {
	margin: 0;
	color: inherit;
	font-family: var(--spof-font);
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
}
.spof :where(label) { display: block; font-size: 15px; font-weight: 400; line-height: 1.5; }
.spof :where(p) { font-size: 15px; line-height: 1.55; }
/* No text-align here — the header and success panel centre their headings by inheritance. */
.spof :where(h2, h3, h4) { margin: 0; padding: 0; font-family: var(--spof-font); font-style: normal; font-weight: 700; letter-spacing: normal; text-transform: none; }
.spof :where(a) { box-shadow: none; text-decoration: none; }
/*
 * Icon rendering is enforced here, not through the SVG's fill/stroke attributes.
 * Presentation attributes carry no specificity and lose to ANY stylesheet rule, and
 * themes routinely ship `svg { fill: currentColor }` — which fills every closed shape
 * and turns outline icons into solid blobs. The child selector matters too: a theme
 * targeting `svg path` would otherwise still win.
 */
.spof .spof__icon,
.spof .spof__icon * {
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}
.spof .spof__icon { display: block; width: 18px; height: 18px; flex: 0 0 auto; overflow: visible; }

/* --------------------------------------------------------------- Header */

.spof__shell { width: 100%; }
.spof__header { max-width: 720px; margin: 0 auto 24px; text-align: center; }
.spof__header h2 {
	margin: 0 0 8px;
	padding: 0;
	color: var(--spof-ink);
	font-family: var(--spof-font);
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 750;
	line-height: 1.1;
	letter-spacing: -.035em;
	text-transform: none;
}
.spof__lede { margin: 0; color: var(--spof-muted); font-size: 15px; line-height: 1.6; }

/* -------------------------------------------------------------- Progress */

.spof__progress-wrap { position: relative; max-width: 720px; margin: 0 auto 24px; padding: 0 8px 12px; }
.spof__progress { position: relative; z-index: 2; display: flex; justify-content: space-between; }
.spof__progress li { display: grid; min-width: 100px; justify-items: center; gap: 8px; color: #83979a; font-size: 11.5px; font-weight: 700; text-align: center; transition: color .2s ease; }
.spof__progress-mark {
	position: relative;
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border: 1.5px solid var(--spof-line-strong);
	border-radius: 50%;
	background: var(--spof-surface);
	color: var(--spof-muted);
	font-size: 12px;
	font-weight: 800;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.spof__progress-mark i { font-style: normal; }
.spof__progress-tick { position: absolute; width: 15px; height: 15px; opacity: 0; transform: scale(.6); transition: opacity .18s ease, transform .18s ease; }
.spof__progress li.is-active { color: var(--spof-brand); }
.spof__progress li.is-active .spof__progress-mark { border-color: var(--spof-brand); background: var(--spof-brand); color: #fff; box-shadow: 0 0 0 4px var(--spof-brand-soft); }
.spof__progress li.is-complete { color: var(--spof-brand); }
.spof__progress li.is-complete .spof__progress-mark { border-color: var(--spof-brand); background: var(--spof-brand); color: #fff; }
.spof__progress li.is-complete .spof__progress-mark i { opacity: 0; }
.spof__progress li.is-complete .spof__progress-tick { opacity: 1; transform: scale(1); }
.spof__progress-line { position: absolute; top: 17px; right: 65px; left: 65px; height: 2px; overflow: hidden; border-radius: 2px; background: var(--spof-line); }
.spof__progress-line i { display: block; width: 100%; height: 100%; background: var(--spof-brand); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.4, 0, .2, 1); }

/* ---------------------------------------------------------------- Status */

.spof__status {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid #cbe3dd;
	border-radius: var(--spof-radius-sm);
	background: var(--spof-brand-soft);
	color: #23605a;
	font-size: 13.5px;
}
.spof__status[data-type="error"] { border-color: #f4c9c4; background: var(--spof-danger-soft); color: var(--spof-danger); }
.spof__status[data-type="success"] { border-color: #b9e3cf; background: #e9f7f0; color: #10664a; }

/* ---------------------------------------------------------------- Layout */

.spof__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.spof__form,
.spof__summary { border: 1px solid var(--spof-line); border-radius: var(--spof-radius); background: var(--spof-surface); box-shadow: var(--spof-shadow); }
.spof__form { min-width: 0; min-height: 560px; padding: clamp(22px, 3vw, 34px); }

.spof__step { display: none; }
.spof__step.is-active { display: block; animation: spof-step-in .24s ease-out both; }
.spof__section-head { margin-bottom: 24px; }
.spof__section-head h3 { margin: 0 0 4px; padding: 0; color: var(--spof-navy); font-family: var(--spof-font); font-size: 24px; font-weight: 720; line-height: 1.2; letter-spacing: -.025em; text-transform: none; }
.spof__section-head p { color: var(--spof-muted); font-size: 13.5px; }

/* ---------------------------------------------------------- Service cards */

/*
 * One padding value owns the card's internal spacing. The previous version set a
 * different margin on the image (9px) and on each text line (13px), so nothing
 * lined up with anything else.
 */
.spof__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.spof .spof__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 12px;
	overflow: hidden;
	border: 1.5px solid var(--spof-line);
	border-radius: 14px;
	background: var(--spof-surface);
	color: var(--spof-ink);
	font-weight: 400;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.spof .spof__card:hover { border-color: var(--spof-line-strong); box-shadow: 0 8px 20px rgba(16, 60, 54, .09); transform: translateY(-2px); }
.spof .spof__card.is-selected { border-color: var(--spof-brand); background: var(--spof-brand-soft); box-shadow: 0 0 0 1px var(--spof-brand); }
.spof .spof__card:focus-within { outline: 3px solid rgba(15, 112, 97, .32); outline-offset: 2px; }
.spof__card input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; clip: rect(0 0 0 0); }

.spof__card-visual { display: grid; aspect-ratio: 3 / 2; margin: 0 0 12px; overflow: hidden; place-items: center; border-radius: 9px; background: linear-gradient(145deg, #124f66, #0a2e50); }
.spof__card-visual img { width: 100%; height: 100%; object-fit: contain; }
.spof__card-mark { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .09em; }
.spof__card-name { display: block; margin: 0; padding-right: 28px; color: var(--spof-navy); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.spof__card-unit { display: block; margin: 4px 0 0; color: var(--spof-muted); font-size: 11.5px; }

.spof__check {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
	border: 2px solid var(--spof-surface);
	border-radius: 50%;
	background: var(--spof-brand);
	color: #fff;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .16s ease, transform .16s ease;
}
.spof__check .spof__icon { width: 15px; height: 15px; }
.spof .spof__card.is-selected .spof__check { opacity: 1; transform: scale(1); }

/* -------------------------------------------------------------- Dropzone */

.spof__upload-wrap { margin-top: 24px; }
.spof .spof__dropzone {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	margin: 0;
	padding: 16px;
	border: 1.5px dashed var(--spof-line-strong);
	border-radius: 13px;
	background: var(--spof-surface-2);
	color: var(--spof-ink);
	font-weight: 400;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}
.spof .spof__dropzone:hover,
.spof .spof__dropzone.is-dragging { border-color: var(--spof-brand); background: var(--spof-brand-soft); }
.spof .spof__dropzone:focus-within { outline: 3px solid rgba(15, 112, 97, .32); outline-offset: 2px; }
.spof__dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; clip: rect(0 0 0 0); }
.spof__upload-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 11px; background: var(--spof-brand); color: #fff; }
.spof__upload-icon .spof__icon { width: 21px; height: 21px; }
.spof__dropzone-text strong { display: block; color: var(--spof-navy); font-size: 14.5px; font-weight: 700; }
.spof__dropzone-text small { display: block; margin-top: 4px; color: var(--spof-muted); font-size: 12.5px; }
.spof__dropzone em { color: var(--spof-muted); font-size: 11px; font-style: normal; font-weight: 650; text-align: right; }
.spof__analysis-note { margin: 8px 0 0; color: var(--spof-muted); font-size: 11.5px; line-height: 1.5; }

/* ----------------------------------------------------------------- Files */

.spof__files { display: grid; gap: 8px; margin-top: 12px; }
.spof__files:empty { margin-top: 0; }
.spof__file {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) 36px;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--spof-line);
	border-radius: 11px;
	background: var(--spof-surface);
	animation: spof-file-in .22s ease-out both;
}
.spof__file-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; background: var(--spof-brand-soft); color: var(--spof-brand); font-size: 9px; font-weight: 850; letter-spacing: .04em; }
.spof__file-body { min-width: 0; }
.spof__file-body strong,
.spof__file-body small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spof__file-body strong { color: var(--spof-ink); font-size: 13.5px; font-weight: 650; }
.spof__file-body small { margin-top: 2px; color: var(--spof-muted); font-size: 11.5px; }
.spof__file-progress { display: block; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 4px; background: #e6eeec; }
.spof__file-progress b { display: block; width: 6%; height: 100%; border-radius: 4px; background: var(--spof-brand); transition: width .18s ease; }

/*
 * The remove control. The previous version was a bare "×" text glyph in a circle
 * that sat off-centre and flashed a hard red on hover with no transition. This is a
 * properly sized target with a centred vector icon and a soft, animated state.
 */
.spof .spof__file-remove {
	display: grid;
	width: 34px;
	height: 34px;
	padding: 0;
	place-items: center;
	border: 1px solid transparent;
	border-radius: 9px;
	background: transparent;
	box-shadow: none;
	color: var(--spof-muted);
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.spof .spof__file-remove .spof__icon { width: 17px; height: 17px; }
.spof .spof__file-remove:hover { border-color: #f2ccc7; background: var(--spof-danger-soft); color: var(--spof-danger); transform: rotate(90deg); }
.spof .spof__file-remove:active { transform: rotate(90deg) scale(.92); }
.spof .spof__file-remove:focus-visible { outline: 2px solid var(--spof-danger); outline-offset: 2px; }
.spof .spof__file-remove:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------- Fields */

.spof__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.spof__grid--options { margin-top: 16px; }
.spof__full { display: block; margin-top: 16px; }
.spof__label { display: block; margin-bottom: 8px; color: var(--spof-ink); font-size: 13px; font-weight: 650; }
.spof__label small { color: var(--spof-muted); font-size: 11.5px; font-weight: 500; }

/* Same reasoning as the buttons: themes frequently force input chrome with !important. */
.spof input[type="text"],
.spof input[type="email"],
.spof input[type="tel"],
.spof select,
.spof textarea {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 46px !important;
	padding: 12px 13px !important;
	border: 1.5px solid var(--spof-line-strong) !important;
	border-radius: var(--spof-radius-sm) !important;
	outline: 0;
	background-color: var(--spof-surface) !important;
	background-image: none;
	box-shadow: none !important;
	color: var(--spof-ink) !important;
	font-family: var(--spof-font) !important;
	font-size: 15px !important;
	font-style: normal !important;
	font-weight: 500 !important;
	text-transform: none !important;
	transition: border-color .16s ease, box-shadow .16s ease;
	-webkit-appearance: none;
	appearance: none;
}
.spof textarea { min-height: 92px !important; resize: vertical; }
.spof select {
	padding-right: 40px !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364797d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 13px center !important;
	background-size: 17px !important;
}
/* States must repeat !important or the base rule above would outrank them. */
.spof input:focus,
.spof select:focus,
.spof textarea:focus { border-color: var(--spof-brand) !important; box-shadow: 0 0 0 3px rgba(15, 112, 97, .15) !important; }
.spof input.has-error,
.spof select.has-error,
.spof textarea.has-error { border-color: var(--spof-danger) !important; box-shadow: 0 0 0 3px rgba(180, 35, 24, .11) !important; }

.spof__field-error { display: block; margin-top: 6px; color: var(--spof-danger); font-size: 12px; font-weight: 650; }
.spof__field-error:empty { display: none; }

/* -------------------------------------------------------------- Delivery */

.spof__delivery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.spof__delivery legend { grid-column: 1 / -1; margin-bottom: 8px; color: var(--spof-ink); font-size: 13px; font-weight: 650; }
.spof .spof__delivery label { position: relative; margin: 0; font-weight: 400; cursor: pointer; }
.spof__delivery input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; clip: rect(0 0 0 0); }
.spof__option {
	position: relative;
	display: block;
	padding: 12px 36px 12px 12px;
	border: 1.5px solid var(--spof-line);
	border-radius: var(--spof-radius-sm);
	background: var(--spof-surface);
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.spof__option strong { display: block; color: var(--spof-ink); font-size: 13.5px; font-weight: 650; }
.spof__option small { display: block; margin-top: 4px; color: var(--spof-muted); font-size: 11.5px; }
.spof__option-tick { position: absolute; top: 50%; right: 12px; display: grid; width: 20px; height: 20px; place-items: center; border: 1.5px solid var(--spof-line-strong); border-radius: 50%; background: var(--spof-surface); color: transparent; transform: translateY(-50%); transition: border-color .16s ease, background .16s ease, color .16s ease; }
.spof__option-tick .spof__icon { width: 14px; height: 14px; }
.spof__delivery input:checked + .spof__option { border-color: var(--spof-brand); background: var(--spof-brand-soft); box-shadow: 0 0 0 1px var(--spof-brand); }
.spof__delivery input:checked + .spof__option .spof__option-tick { border-color: var(--spof-brand); background: var(--spof-brand); color: #fff; }
.spof__delivery input:focus-visible + .spof__option { outline: 3px solid rgba(15, 112, 97, .32); outline-offset: 2px; }
.spof__delivery label:hover .spof__option { border-color: var(--spof-line-strong); }

/* --------------------------------------------------------- Notices, terms */

.spof__notice,
.spof__quote-alert {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-left: 3px solid var(--spof-brand);
	border-radius: 8px;
	background: var(--spof-brand-soft);
	color: #24605a;
	font-size: 13.5px;
	line-height: 1.55;
	white-space: pre-line;
}
.spof__quote-alert:empty { display: none; }
.spof__quote-alert[data-type="error"] { border-left-color: var(--spof-danger); background: var(--spof-danger-soft); color: var(--spof-danger); }

.spof .spof__terms { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0 0; font-size: 13.5px; font-weight: 400; cursor: pointer; }
.spof__terms input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; clip: rect(0 0 0 0); }
.spof__terms-box { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; margin-top: 1px; border: 1.5px solid var(--spof-line-strong); border-radius: 6px; background: var(--spof-surface); color: transparent; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.spof__terms-box .spof__icon { width: 15px; height: 15px; }
.spof__terms input:checked + .spof__terms-box { border-color: var(--spof-brand); background: var(--spof-brand); color: #fff; }
.spof__terms input:focus-visible + .spof__terms-box { outline: 3px solid rgba(15, 112, 97, .32); outline-offset: 2px; }
.spof .spof__terms a { color: var(--spof-brand-dark); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------- Payment */

.spof__payment { margin-top: 24px; padding: 16px; border: 1px solid var(--spof-line); border-radius: 13px; background: var(--spof-surface-2); animation: spof-step-in .24s ease-out both; }
.spof__payment-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.spof__payment-head > span { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: var(--spof-navy); color: #fff; }
.spof__payment h4 { margin: 0; padding: 0; color: var(--spof-ink); font-family: var(--spof-font); font-size: 14.5px; font-weight: 700; text-transform: none; }
.spof__payment small { display: block; margin-top: 2px; color: var(--spof-muted); font-size: 11.5px; }
.spof__payment-error { margin-top: 8px; color: var(--spof-danger); font-size: 13px; font-weight: 650; }
.spof__payment-error:empty { display: none; }

/* --------------------------------------------------------------- Buttons */

.spof__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 32px; }

/*
 * Buttons carry !important on their visual properties. This is not defensiveness for
 * its own sake: page-builder themes very commonly ship `button { background: … !important }`,
 * which silently repaints the primary call to action. Specificity cannot beat
 * !important, so the widget has to match it. Every state below repeats the flag,
 * otherwise hover and disabled would lose to the base rule.
 */
.spof .spof__button {
	display: inline-flex !important;
	gap: 8px;
	align-items: center;
	justify-content: center;
	min-height: 50px !important;
	width: auto;
	margin: 0;
	padding: 13px 24px !important;
	border: 1.5px solid var(--spof-navy) !important;
	border-radius: var(--spof-radius-sm) !important;
	background: var(--spof-navy) !important;
	background-image: none !important;
	box-shadow: 0 6px 16px rgba(8, 50, 79, .18);
	color: #fff !important;
	font-family: var(--spof-font) !important;
	font-size: 15px !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -.005em !important;
	text-align: center;
	text-decoration: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, opacity .18s ease;
}
.spof .spof__button:hover { border-color: #062741 !important; background: #062741 !important; box-shadow: 0 9px 22px rgba(8, 50, 79, .26); color: #fff !important; }
.spof .spof__button:active { box-shadow: 0 3px 10px rgba(8, 50, 79, .22); }
.spof .spof__button:focus-visible { outline: 3px solid rgba(15, 112, 97, .45) !important; outline-offset: 3px; }
.spof .spof__button:disabled { border-color: var(--spof-line-strong) !important; background: var(--spof-line-strong) !important; box-shadow: none; color: #fff !important; cursor: not-allowed; opacity: .7; }

.spof .spof__button--quiet { margin-right: auto; border-color: transparent !important; background: var(--spof-surface-2) !important; box-shadow: none; color: var(--spof-ink-2) !important; }
.spof .spof__button--quiet:hover { border-color: var(--spof-line-strong) !important; background: #eef3f2 !important; box-shadow: none; color: var(--spof-ink) !important; }

.spof .spof__button--pay { border-color: var(--spof-brand) !important; background: var(--spof-brand) !important; box-shadow: 0 6px 18px rgba(15, 112, 97, .26); }
.spof .spof__button--pay:hover { border-color: var(--spof-brand-dark) !important; background: var(--spof-brand-dark) !important; box-shadow: 0 10px 24px rgba(15, 112, 97, .32); }
.spof .spof__button--pay:disabled { border-color: var(--spof-line-strong) !important; background: var(--spof-line-strong) !important; }

/* The file-remove control is a button too, and needs the same protection. */
.spof .spof__file-remove { background: transparent !important; background-image: none !important; box-shadow: none !important; text-transform: none !important; }
.spof .spof__file-remove:hover { background: var(--spof-danger-soft) !important; color: var(--spof-danger) !important; }

/* Busy state: a spinner in place of the leading icon, so a click always feels answered. */
.spof .spof__button.is-busy { pointer-events: none; }
.spof .spof__button.is-busy .spof__icon { animation: spof-spin .7s linear infinite; }

/* --------------------------------------------------------------- Summary */

.spof__summary { position: sticky; top: 24px; padding: 24px; }
.spof__summary-top { display: flex; justify-content: space-between; gap: 12px; color: var(--spof-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.spof__secure { display: inline-flex; gap: 6px; align-items: center; color: var(--spof-brand); }
.spof__secure .spof__icon { width: 14px; height: 14px; }
.spof__summary h3 { min-height: 46px; margin: 16px 0 8px; padding: 0; color: var(--spof-navy); font-family: var(--spof-font); font-size: 21px; font-weight: 720; line-height: 1.25; letter-spacing: -.02em; text-transform: none; }
.spof__summary dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--spof-line); }
.spof__summary dt { color: var(--spof-muted); font-size: 12.5px; }
.spof__summary dd { color: var(--spof-ink); font-size: 12.5px; font-weight: 700; text-align: right; }
.spof__summary dd.is-changing,
.spof__total strong.is-changing { animation: spof-value .22s ease-out; }
.spof__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0; }
.spof__total span { font-size: 14px; font-weight: 700; }
.spof__total strong { color: var(--spof-navy); font-size: 28px; font-weight: 780; letter-spacing: -.035em; }

.spof__trust { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--spof-line); }
.spof__trust li { display: flex; gap: 12px; align-items: flex-start; color: var(--spof-muted); font-size: 12px; line-height: 1.5; }
.spof__trust .spof__icon { width: 16px; height: 16px; margin-top: 1px; color: var(--spof-brand); }

/* --------------------------------------------------------------- Success */

.spof__success { padding: 56px 26px; border: 1px solid var(--spof-line); border-radius: var(--spof-radius); background: var(--spof-surface); box-shadow: var(--spof-shadow); text-align: center; }
.spof__success-mark { display: grid; width: 62px; height: 62px; margin: 0 auto 18px; place-items: center; border-radius: 50%; background: var(--spof-brand); color: #fff; animation: spof-pop .34s cubic-bezier(.34, 1.56, .64, 1) both; }
.spof__success-mark .spof__icon { width: 30px; height: 30px; }
.spof__success h3 { margin: 0 0 9px; padding: 0; color: var(--spof-navy); font-family: var(--spof-font); font-size: 27px; font-weight: 740; letter-spacing: -.025em; text-transform: none; }
.spof__success p { color: var(--spof-muted); font-size: 15px; }
.spof__success strong { display: inline-block; margin-top: 12px; padding: 7px 15px; border-radius: 999px; background: var(--spof-brand-soft); color: var(--spof-brand-dark); font-size: 13.5px; font-weight: 750; letter-spacing: .02em; }

.spof__hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* ------------------------------------------------------- Sticky mobile bar */

.spof__sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	display: none;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--spof-line);
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(9px);
	box-shadow: 0 -6px 22px rgba(16, 46, 44, .13);
}
.spof__sticky small { display: block; color: var(--spof-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.spof__sticky strong { display: block; color: var(--spof-navy); font-size: 20px; font-weight: 780; letter-spacing: -.03em; }
.spof__sticky .spof__button { min-height: 46px !important; padding: 11px 20px !important; }

/* -------------------------------------------------------------- Keyframes */

@keyframes spof-step-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes spof-file-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes spof-value { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes spof-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes spof-spin { to { transform: rotate(360deg); } }

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

@media (max-width: 960px) {
	.spof__layout { grid-template-columns: minmax(0, 1fr); }
	.spof__summary { position: static; }
	.spof__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.spof { margin: 16px auto; padding: 0 4px 30px; }
	.spof__header h2 { font-size: 27px; }
	.spof__lede { font-size: 14px; }
	.spof__progress li { min-width: 74px; font-size: 10px; }
	.spof__progress li strong { display: block; overflow: hidden; max-width: 82px; text-overflow: ellipsis; white-space: nowrap; }
	.spof__progress-line { right: 48px; left: 48px; }
	.spof__form,
	.spof__summary { border-radius: 14px; }
	.spof__form { min-height: 0; padding: 20px 15px; }
	.spof__section-head h3 { font-size: 21px; }

	/* Cards become compact rows: a 3-up grid of 220px tiles is unusable on a phone. */
	/* Compact rows on a phone: a grid of 3:2 tiles wastes most of the screen. */
	.spof__cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.spof .spof__card { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 10px; }
	.spof__card-visual { grid-row: 1 / 3; margin: 0; aspect-ratio: 1; }
	.spof__card-name { align-self: end; margin: 0; padding-right: 34px; }
	.spof__card-unit { align-self: start; margin: 2px 0 0; padding-right: 34px; }
	.spof__check { top: 50%; right: 10px; margin-top: -12px; }

	.spof__dropzone { grid-template-columns: 46px minmax(0, 1fr); padding: 15px; }
	.spof__dropzone em { grid-column: 1 / -1; text-align: left; }
	.spof__grid,
	.spof__delivery { grid-template-columns: minmax(0, 1fr); }
	.spof__actions { flex-direction: column-reverse; }
	.spof__actions .spof__button { width: 100%; }
	.spof .spof__button--quiet { margin-right: 0; }
	.spof__summary { padding: 20px; }

	.spof__sticky { display: flex; }
	.spof__sticky[hidden] { display: none; }
	/* Leave room for the fixed bar so the last control is never covered. */
	.spof__layout { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
	.spof *,
	.spof *::before,
	.spof *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.spof .spof__file-remove:hover { transform: none; }
}