/**
 * Styles for [solar_estimator]. Scoped to .se-wizard so the host theme
 * can't leak in and our rules don't leak out. The design mirrors the
 * companion Next.js app (warm off-white canvas, forest-green primary,
 * gold accent, Inter sans) so customers get a consistent experience
 * regardless of where the estimator lives. The JS only hooks onto
 * `data-*` attributes and input names, so everything below is pure
 * presentation and safe to tweak without touching wizard.js.
 *
 * Every colour is declared as a custom property on .se-wizard so a
 * theme can override the brand with one line.
 */
.se-wizard {
	/* Brand tokens — mirror app/globals.css from the Next.js build. */
	--se-primary:            #3e8d52; /* forest green */
	--se-primary-dark:       #326f42; /* button hover background */
	--se-secondary:          #326f42; /* gradient second stop + emphasis text */
	--se-primary-foreground: #ffffff;
	/* Derived soft/ring tokens use color-mix so they always follow --se-primary
	 * even when the admin overrides the primary hex. */
	--se-primary-soft:       color-mix(in oklch, var(--se-primary) 10%, transparent);
	--se-primary-ring:       color-mix(in oklch, var(--se-primary) 25%, transparent);

	--se-accent:             #c79a3a; /* warm gold */
	--se-accent-soft:        rgba(199, 154, 58, 0.18);
	--se-accent-btn-text:    #1b1303; /* text on accent-coloured buttons */

	--se-bg:                 #fafaf6; /* page-level warm off-white */
	--se-card:               #ffffff;
	--se-foreground:         #131526;
	--se-muted:              #ececdd;
	--se-muted-foreground:   #666b80;
	--se-border:             #dcd8cc;
	--se-input:              #ffffff;

	/* Button text colours — configurable separately from the primary so any
	 * brand colour works whether the primary is light or dark. */
	--se-btn-text:           #ffffff;
	--se-btn-text-hover:     #ffffff;

	--se-destructive:        #b91c1c;
	--se-destructive-soft:   rgba(185, 28, 28, 0.08);

	--se-radius:             12px;
	--se-radius-sm:          8px;
	--se-radius-lg:          16px;

	--se-shadow-sm:          0 1px 2px rgba(19, 21, 38, 0.04);
	--se-shadow-md:          0 6px 18px rgba(19, 21, 38, 0.08);

	/* The Inter face is enqueued from Google Fonts by the shortcode.
	   We fall back cleanly when the font request fails or is blocked. */
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--se-foreground);

	max-width: 960px !important;
	margin: 0 auto;
	padding: 32px 24px 40px;
	background: var(--se-card);
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius-lg);
	box-shadow: var(--se-shadow-sm);

	/* Modern form controls render with theme colours without extra CSS. */
	accent-color: var(--se-primary);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.se-wizard *,
.se-wizard *::before,
.se-wizard *::after { box-sizing: border-box; }

/* The HTML `hidden` attribute maps to `display: none`, but any class
 * rule with an explicit `display:` value (e.g. the `inline-flex` on
 * `.se-btn`, `flex` on `.se-actions`, `block` on `.se-form`) wins the
 * cascade and leaves the element visible even though markup says
 * it should be hidden. Without this override, setting `.hidden =
 * true` from JS silently does nothing — which is exactly why the
 * "Get my estimate" button kept showing on every step and the
 * progress bar's analysis loader stayed on top of the loaded image. */
.se-wizard [hidden] { display: none !important; }

/* ------------------------------------------------------------------
 * Progress indicator
 *
 * Desktop: circular step indicators joined by connector lines, matching
 * the Next.js <ProgressSteps> component. Completed steps show a tick.
 * Mobile (<760px): the circles shrink and the labels drop away so the
 * indicator still fits on a phone without layout shift.
 * ---------------------------------------------------------------- */
.se-progress {
	display: flex;
	align-items: flex-start;
	margin-bottom: 32px;
	width: 100%;
}
.se-progress__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	gap: 8px;
}
/* Connector lines are drawn as ::before and ::after on each step so the
 * first/last step automatically have no dangling connector. */
.se-progress__step::before,
.se-progress__step::after {
	content: "";
	position: absolute;
	top: 20px; /* vertical centre of a 40px dot */
	height: 2px;
	background: var(--se-border);
	transition: background-color 0.3s ease;
}
.se-progress__step::before {
	left: 0;
	right: 50%;
	margin-right: 22px;
}
.se-progress__step::after {
	right: 0;
	left: 50%;
	margin-left: 22px;
}
.se-progress__step:first-child::before,
.se-progress__step:last-child::after { display: none; }

/* Active & completed connectors use the primary colour. "Active" paints
 * BOTH sides of the current step to match the Next.js behaviour. */
.se-progress__step[data-state="done"]::before,
.se-progress__step[data-state="done"]::after,
.se-progress__step[data-state="active"]::before {
	background: var(--se-primary);
}

.se-progress__dot {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--se-muted);
	color: var(--se-muted-foreground);
	font-weight: 600;
	font-size: 14px;
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.se-progress__step[data-state="active"] .se-progress__dot {
	background: var(--se-primary);
	color: var(--se-primary-foreground);
	box-shadow: 0 0 0 4px var(--se-primary-ring);
}
.se-progress__step[data-state="done"] .se-progress__dot {
	background: var(--se-primary);
	color: var(--se-primary-foreground);
}
/* Swap the number for a tick on completed steps. The tick lives in the
 * markup as an SVG hidden by default; data-state="done" reveals it.
 *
 * Centering note: the `icon()` helper hard-codes `width="24" height="24"`
 * on the SVG, but the wrapper is only 18×18 — without a rule sizing the
 * SVG itself to 100% it spills out of the wrapper (overflow defaults to
 * visible), pushing the tick down-and-right of the dot centre. Flex +
 * line-height:0 also stops the SVG's baseline from nudging the glyph. */
.se-progress__dot .se-progress__num { display: inline; line-height: 1; }
.se-progress__dot .se-progress__check {
	display: none;
	width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.se-progress__dot .se-progress__check svg {
	width: 100%;
	height: 100%;
	display: block;
}
.se-progress__step[data-state="done"] .se-progress__num { display: none; }
.se-progress__step[data-state="done"] .se-progress__check { display: flex; }

.se-progress__label {
	font-size: 12px;
	font-weight: 500;
	color: var(--se-muted-foreground);
	text-align: center;
	max-width: 96px;
	line-height: 1.3;
}
.se-progress__step[data-state="active"] .se-progress__label {
	color: var(--se-foreground);
	font-weight: 600;
}

@media (max-width: 760px) {
	.se-progress__step::before,
	.se-progress__step::after { top: 14px; margin-left: 18px; margin-right: 18px; }
	.se-progress__dot { width: 28px; height: 28px; font-size: 12px; }
	.se-progress__dot .se-progress__check { width: 14px; height: 14px; }
	.se-progress__label { display: none; }
}

/* ------------------------------------------------------------------
 * Step panels
 * ---------------------------------------------------------------- */
.se-step { margin-bottom: 8px; }
.se-step__header {
	text-align: center;
	margin-bottom: 24px;
	padding: 0 8px;
	position: relative;
}
.se-step__title {
	font-size: clamp(22px, 3.2vw, 30px);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 8px;
	color: var(--se-foreground);
	text-wrap: balance;
}
.se-step__subtitle {
	margin: 0;
	color: var(--se-muted-foreground);
	font-size: 15px;
}

/* ------------------------------------------------------------------
 * Fieldsets (used on the combined preferences step)
 * ---------------------------------------------------------------- */
.se-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 24px;
}
.se-fieldset legend {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--se-foreground);
	text-align: center;
}

/* ------------------------------------------------------------------
 * Option cards
 *
 * Each radio becomes a full-width card with an icon, title, and
 * description — the same pattern as the Next.js <OptionCard>. We use
 * :has(input:checked) for the selected state so the host theme has no
 * opinion on it. The native input is visually hidden but stays in the
 * tab order (keyboard/ screen-reader users still navigate normally).
 * ---------------------------------------------------------------- */
.se-options {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto 8px;
}
/* On wider screens the first two steps (property, ownership, existing,
 * interest, conservation) look best with two side-by-side cards. */
@media (min-width: 640px) {
	.se-options--two-up { grid-template-columns: repeat(2, 1fr); }
}

.se-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 20px;
	min-height: 96px;
	border: 2px solid var(--se-border);
	border-radius: var(--se-radius);
	background: var(--se-card);
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s ease, background-color 0.15s ease,
		box-shadow 0.15s ease, transform 0.05s ease;
}
.se-option:hover {
	border-color: color-mix(in oklch, var(--se-primary) 50%, transparent);
	background: var(--se-primary-soft);
}
.se-option:focus-within {
	outline: none;
	box-shadow: 0 0 0 4px var(--se-primary-ring);
}
/* Selected — relies on :has(). Every browser we care about in 2026
 * supports it; theme authors needing legacy fallbacks can add
 * .se-option--selected via JS, but ours doesn't need to. */
.se-option:has(input:checked) {
	border-color: var(--se-primary);
	background: var(--se-primary-soft);
}
.se-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

.se-option__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--se-muted);
	color: var(--se-muted-foreground);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.se-option__icon svg { width: 22px; height: 22px; }
.se-option:has(input:checked) .se-option__icon {
	background: var(--se-primary);
	color: var(--se-primary-foreground);
}
.se-option__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.se-option__title {
	font-size: 17px;
	font-weight: 600;
	color: var(--se-foreground);
	line-height: 1.3;
}
.se-option:has(input:checked) .se-option__title { color: var(--se-secondary); }
.se-option__desc {
	font-size: 14px;
	color: var(--se-muted-foreground);
	line-height: 1.4;
}

/* ------------------------------------------------------------------
 * Input fields
 * ---------------------------------------------------------------- */
.se-field {
	display: block;
	margin-bottom: 16px;
	position: relative;
}
.se-field--lg {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* Selected-address confirmation row shown under the Places search
 * on step 5 after a customer picks a suggestion. We deliberately
 * style this as a subtle filled pill rather than a full editable
 * field so it reads as a read-only confirmation — not something
 * the customer can (or should) type into. Layout is flex so the
 * "Change" button hugs the right edge at all widths. */
.se-address-preview {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 480px;
	margin: 0 auto 16px;
	padding: 12px 14px;
	background: var(--se-muted, #f3f4f6);
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius-sm);
	font-size: 14px;
	color: var(--se-foreground);
}
.se-address-preview__label {
	font-weight: 600;
	color: var(--se-muted-foreground, #6b7280);
	flex-shrink: 0;
}
.se-address-preview__value {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.se-address-preview__change {
	flex-shrink: 0;
	background: transparent;
	border: 0;
	padding: 4px 8px;
	color: var(--se-primary, #2563eb);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border-radius: var(--se-radius-sm);
}
.se-address-preview__change:after {
	display: none;
}
.se-address-preview__change:hover,
.se-address-preview__change:focus-visible {
	text-decoration: underline;
	outline: none;
}
.se-field__label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--se-foreground);
}
.se-field input {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	color: var(--se-foreground);
	background: var(--se-input);
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.se-field input::placeholder { color: var(--se-muted-foreground); }
.se-field input:focus {
	outline: none;
	border-color: var(--se-primary);
	box-shadow: 0 0 0 4px var(--se-primary-ring);
}

/* Anchor for absolute-positioned icons/prefixes. Using a dedicated
 * wrapper (rather than positioning against .se-field) means the icon
 * stays centred on the input regardless of how tall the label above
 * it renders on narrow screens. */
.se-field__input {
	position: relative;
	display: block;
}
.se-field__input input { width: 100%; }

/* Tall input with a leading symbol/icon — used for £ on the bill step
 * and for the search icon on the address step. */
.se-field--tall input { padding: 18px 16px; font-size: 18px; height: 56px; }
.se-field--prefix .se-field__input input { padding-left: 40px; }
.se-field--icon-left .se-field__input input { padding-left: 48px; }
.se-field__prefix {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--se-muted-foreground);
	font-weight: 500;
	pointer-events: none;
	font-size: 16px;
}
.se-field--tall .se-field__prefix { font-size: 18px; }
.se-field__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: var(--se-muted-foreground);
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.se-field__icon svg { width: 20px; height: 20px; }
.se-field__icon-right {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: var(--se-muted-foreground);
}
.se-field__icon-right.is-spinning { animation: se-spin 0.8s linear infinite; }

.se-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 520px) {
	.se-row { grid-template-columns: 1fr; gap: 0; }
}

.se-help {
	color: var(--se-muted-foreground);
	font-size: 14px;
	margin: 8px 0 0;
	line-height: 1.5;
}
.se-help--small { font-size: 13px; }
.se-fieldset .se-help {
	text-align: center;
	margin: 0 auto 12px;
	max-width: 420px;
}

/* Honeypot — keep in the DOM but offscreen so bots fill it anyway. */
.se-honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

/* ------------------------------------------------------------------
 * Autocomplete dropdown
 * ---------------------------------------------------------------- */
.se-autocomplete {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 5;
	margin: 6px 0 0;
	padding: 4px;
	list-style: none;
	background: var(--se-card);
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius);
	box-shadow: var(--se-shadow-md);
	max-height: 280px;
	overflow-y: auto;
}
.se-autocomplete li {
	padding: 12px 14px;
	font-size: 14px;
	cursor: pointer;
	border-radius: var(--se-radius-sm);
	transition: background-color 0.1s ease;
}
.se-autocomplete li:hover,
.se-autocomplete li[aria-selected="true"] {
	background: var(--se-primary-soft);
}
.se-autocomplete li strong {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var(--se-foreground);
}
.se-autocomplete li span {
	display: block;
	color: var(--se-muted-foreground);
	font-size: 12px;
	margin-top: 2px;
}

/* ------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------- */
.se-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
	flex-wrap: wrap;
}
.se-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	min-height: 48px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	border-radius: var(--se-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.se-btn:after {
	display: none;
}
.se-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--se-primary-ring);
}
.se-btn:active { transform: translateY(1px); }
.se-btn--primary {
	background: var(--se-primary);
	color: var(--se-btn-text);
	min-width: 180px;
}
.se-btn--primary:hover:not(:disabled) {
	background: var(--se-primary-dark);
	color: var(--se-btn-text-hover);
}
.se-btn--primary:disabled {
	background: var(--se-muted);
	color: var(--se-muted-foreground);
	cursor: not-allowed;
}
.se-btn--ghost {
	background: transparent;
	border-color: var(--se-border);
	color: var(--se-foreground);
}
.se-btn--ghost:hover { background: var(--se-muted); }
.se-btn--link {
	background: none;
	border: 0;
	padding: 0;
	min-height: 0;
	color: var(--se-primary);
	font-weight: 500;
	text-decoration: underline;
}
.se-btn--link:hover { color: var(--se-primary-dark); }

/* ------------------------------------------------------------------
 * Inline messaging
 * ---------------------------------------------------------------- */
.se-error {
	max-width: 560px;
	margin: 20px auto 0;
	padding: 12px 16px;
	background: var(--se-destructive-soft);
	border: 1px solid color-mix(in oklch, var(--se-destructive) 25%, transparent);
	color: var(--se-destructive);
	border-radius: var(--se-radius-sm);
	font-size: 14px;
}
.se-note {
	max-width: 560px;
	margin: 16px auto 0;
	padding: 14px 16px;
	background: var(--se-accent-soft);
	border: 1px solid color-mix(in oklch, var(--se-accent) 30%, transparent);
	color: var(--se-foreground);
	border-radius: var(--se-radius-sm);
	font-size: 14px;
}

/* ------------------------------------------------------------------
 * Results page
 * ---------------------------------------------------------------- */
.se-results {
	/* Widened from 760 → 960 so the new two-column System Details +
	 * Financial Breakdown grid has room to sit side-by-side on desktop
	 * (each card wants ~400px min width before the list values start
	 * wrapping); the inner sections still cap themselves at 760. */
	max-width: 960px;
	margin: 0 auto;
}
.se-results__header { position: relative; margin-bottom: 24px; text-align: center; }
.se-results__title {
	font-size: clamp(24px, 3.2vw, 32px);
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--se-foreground);
}
.se-results__lede {
	color: var(--se-muted-foreground);
	font-size: 15px;
	margin: 0;
	max-width: 560px;
	margin-inline: auto;
}
.se-results__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	text-align: left;
	transition: opacity 0.15s ease;
	margin-top: 24px;
}

/* ------------------------------------------------------------------
 * Draw-first empty state
 * ------------------------------------------------------------------
 * Rendered in place of the stat cards until the customer traces
 * their roof. Google's auto-placed panels are unreliable on many
 * commercial and rural buildings, so the results page now waits
 * for a drawn polygon before revealing any numbers. Matches the
 * primary-soft card treatment used elsewhere in the results page
 * so the CTA reads as part of the same surface.
 */
.se-results-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 28px 20px;
	margin-top: 4px;
	background: var(--se-primary-soft);
	border: 1px dashed color-mix(in oklch, var(--se-primary) 40%, transparent);
	border-radius: var(--se-radius);
	text-align: center;
}
.se-results-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--se-primary);
	color: var(--se-primary-foreground);
}
.se-results-empty__icon svg { width: 24px; height: 24px; }
.se-results-empty__title {
	margin: 4px 0 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--se-foreground);
}
.se-results-empty__lede {
	margin: 0;
	max-width: 480px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--se-muted-foreground);
}
.se-results-empty__cta { margin-top: 8px; }
.se-results__grid--updating { opacity: 0.55; }
@media (max-width: 520px) {
	.se-results__grid { grid-template-columns: 1fr; }
}

.se-result-card {
	padding: 18px;
	background: var(--se-card);
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius);
	box-shadow: var(--se-shadow-sm);
}
.se-result-card--accent {
	background: var(--se-primary-soft);
	border-color: color-mix(in oklch, var(--se-primary) 30%, transparent);
}
.se-result-card__label {
	font-size: 13px;
	color: var(--se-muted-foreground);
	margin-bottom: 4px;
}
.se-result-card__value {
	font-size: 24px;
	font-weight: 700;
	color: var(--se-foreground);
}
.se-result-card--accent .se-result-card__value { color: var(--se-secondary); }

.se-results__section {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--se-border);
}
.se-results__h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--se-foreground);
}

/* Editable address panel */
.se-address-view {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	background: var(--se-primary-soft);
	border: 1px solid color-mix(in oklch, var(--se-primary) 25%, transparent);
	border-radius: var(--se-radius);
}
.se-address-view__text { margin: 0; font-size: 15px; color: var(--se-foreground); flex: 1 1 auto; }
.se-address-edit { margin-top: 12px; }
.se-address-edit .se-actions { justify-content: flex-end; margin-top: 12px; }

/* ------------------------------------------------------------------
 * Roof analysis card
 * ---------------------------------------------------------------- */
.se-roof {
	position: relative;
	margin: 16px 0;
	border-radius: var(--se-radius);
	overflow: hidden;
	background: var(--se-muted);
	min-height: 220px;
}
/* `hidden` applies `display:none`, but a class selector with
 * `display:flex`/`display:block` below would otherwise win the cascade —
 * toggling `element.hidden = true` did nothing and the loader remained
 * layered on top of the loaded image. Force `[hidden]` to always beat
 * the class-level `display` rules. */
.se-roof [hidden],
.se-roof__toolbar[hidden],
.se-roof__zoom[hidden] {
	display: none !important;
}
.se-roof__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 56px 16px;
	color: var(--se-muted-foreground);
	font-size: 14px;
}
.se-roof__image {
	position: relative;
	display: block;
	line-height: 0;
}
.se-roof__image img { display: block; width: 100%; height: auto; }
.se-roof__image canvas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	touch-action: none;
}
.se-roof__zoom {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	z-index: 2;
}
.se-roof__zoombtn {
	width: 38px;
	height: 38px;
	border: 0;
	background: #ffffff;
	color: var(--se-foreground);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color 0.12s ease;
	padding: 0;
}

.se-roof__zoombtn:after {
	display: none;
}

.se-roof__zoombtn:hover { color: var(--se-foreground); background: var(--se-muted); }
.se-roof__zoombtn:disabled { opacity: 0.4; cursor: not-allowed; }

.se-roof__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.se-roof__toolbar .se-btn {
	padding: 10px 16px;
	min-height: 42px;
	min-width: 0;
	font-size: 14px;
}
@media (max-width: 520px) {
	.se-roof__toolbar .se-btn { flex: 1 1 calc(50% - 4px); }
}

.se-roof__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 16px 0 0;
}
.se-roof__stats > div {
	background: var(--se-card);
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius-sm);
	padding: 12px 14px;
}
.se-roof__stats dt {
	margin: 0 0 4px;
	font-size: 12px;
	color: var(--se-muted-foreground);
	font-weight: 500;
}
.se-roof__stats dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--se-foreground); }
@media (max-width: 520px) {
	.se-roof__stats { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
 * Spinner + verification step
 * ---------------------------------------------------------------- */
.se-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--se-muted);
	border-top-color: var(--se-primary);
	border-radius: 50%;
	animation: se-spin 0.8s linear infinite;
}
@keyframes se-spin { to { transform: rotate(360deg); } }

.se-step--verify { text-align: center; padding: 8px 0 16px; }
.se-step--verify .se-step__header { margin-bottom: 12px; }
.se-verify-spinner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 20px 0;
	padding: 12px 20px;
	color: var(--se-muted-foreground);
	font-size: 14px;
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius);
	background: var(--se-bg);
}

/* ------------------------------------------------------------------
 * Headline 4-card stat grid (results page)
 * ---------------------------------------------------------------- */
.se-stat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
@media (min-width: 900px) {
	.se-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
.se-stat-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	background: var(--se-card);
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius);
	box-shadow: var(--se-shadow-sm);
}
@media (min-width: 900px) {
	.se-stat-card { padding: 20px; }
}
.se-stat-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--se-muted);
	color: var(--se-muted-foreground);
	flex-shrink: 0;
}
.se-stat-card__icon svg { width: 20px; height: 20px; }
.se-stat-card__body { flex: 1 1 auto; min-width: 0; }
.se-stat-card__label {
	margin: 0;
	font-size: 13px;
	color: var(--se-muted-foreground);
}
.se-stat-card__value {
	margin: 2px 0 0;
	font-size: 22px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--se-foreground);
	word-break: break-word;
}
@media (min-width: 900px) {
	.se-stat-card__value { font-size: 26px; }
}
.se-stat-card__sub {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--se-muted-foreground);
}
.se-stat-card--accent {
	background: var(--se-primary-soft);
	border-color: color-mix(in oklch, var(--se-primary) 45%, transparent);
}
.se-stat-card--accent .se-stat-card__icon {
	background: var(--se-primary);
	color: var(--se-primary-foreground);
}
.se-stat-card--accent .se-stat-card__value { color: var(--se-secondary); }

/* Keep the legacy grid transition (opacity flash during recalcs) so
 * the updating state still telegraphs a live recalc even though the
 * grid now contains rich stat cards instead of simple key/value boxes. */
.se-stat-grid.se-results__grid--updating { opacity: 0.55; }

/* ------------------------------------------------------------------
 * Panel-size picker (radiogroup inside the roof card)
 * ---------------------------------------------------------------- */
.se-panel-size {
	margin: 16px 0 0;
	padding: 14px;
	background: var(--se-bg);
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius);
}
.se-panel-size__head { margin-bottom: 12px; }
.se-panel-size__title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--se-foreground);
}
.se-panel-size__lede {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--se-muted-foreground);
}
.se-panel-size__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}
@media (min-width: 640px) {
	.se-panel-size__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.se-panel-size__option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 12px;
	text-align: left;
	background: var(--se-bg);
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius-sm);
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
	min-height: 76px;
	font: inherit;
	color: var(--se-foreground);
}

.se-panel-size__option:after {
	display: none;
}

.se-panel-size__option:hover {
	background: color-mix(in oklch, var(--se-muted) 60%, transparent);
}
.se-panel-size__option:focus-visible {
	outline: 2px solid var(--se-primary);
	outline-offset: 2px;
}
.se-panel-size__option--active,
.se-panel-size__option[aria-checked="true"] {
	background: var(--se-primary-soft);
	border-color: var(--se-primary);
	box-shadow: inset 0 0 0 1px var(--se-primary);
}
.se-panel-size__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--se-foreground);
}
.se-panel-size__desc {
	font-size: 12px;
	color: var(--se-muted-foreground);
}
.se-panel-size__summary {
	margin-top: 2px;
	font-size: 11px;
	font-weight: 500;
	color: color-mix(in oklch, var(--se-foreground) 75%, transparent);
}

/* Bring the roof stats up to 4 columns when usable-roof is present. */
@media (min-width: 720px) {
	.se-roof__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------
 * Fullscreen roof editor
 * ---------------------------------------------------------------- */
.se-roof__fsbtn { border-bottom: 1px solid var(--se-border); }
.se-roof__fsbtn svg { display: block; margin: 0 auto; }

body.se-fs-open {
	overflow: hidden;
}

/* When fullscreen is active the `.se-roof` element is promoted to a
 * fixed overlay. All of its children (image, canvas, zoom controls,
 * stats dl, toolbar) continue to work exactly as before — the layout
 * just spans the viewport so drawing is accurate on mobile. */
.se-roof--fullscreen {
	position: fixed;
	inset: 0;
	z-index: 9999;
	margin: 0;
	border-radius: 0;
	background: #000;
	/*
	 * Centre the image+canvas block as a single unit. The previous
	 * implementation made `.se-roof__image` a flex *container* and
	 * letterboxed the <img> inside it — but the canvas was pinned to
	 * `inset: 0` of that stretched container, so its origin landed in a
	 * black bar instead of on the image's top-left. That's what was
	 * making drawn polygons jump off the roof the moment the user
	 * entered fullscreen.
	 *
	 * Making `.se-roof` itself the flex centre, and letting
	 * `.se-roof__image` shrink to the image's rendered size via
	 * `inline-block + max-width/max-height`, keeps `inset: 0` exactly
	 * over the image so canvas (0,0) = image (0,0). The ResizeObserver
	 * in wizard.js then rescales any in-progress polygon on the
	 * resulting dimension change.
	 */
	display: flex;
	align-items: center;
	justify-content: center;
	/* Leave 16px breathing room and reserve 96px at the bottom for the
	 * fixed draw toolbar (see `.se-roof--fullscreen ~ .se-roof__toolbar`
	 * further down in this file). */
	padding: 16px 16px 112px;
	overflow: hidden;
}
.se-roof--fullscreen .se-roof__loading {
	color: #fff;
	padding: 120px 16px;
}
.se-roof--fullscreen .se-roof__image {
	position: relative;
	display: inline-block;
	max-width: 100%;
	max-height: 100%;
	line-height: 0;
}
.se-roof--fullscreen .se-roof__image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	/* Viewport height minus the 16px top padding + the 112px bottom
	 * reservation. `max-height` (not `height`) preserves the image's
	 * aspect ratio, which is critical: the ResizeObserver assumes
	 * `sx === sy` when it rescales polygon points and if the image
	 * got squished to a different aspect the outline would stretch. */
	max-height: calc(100vh - 128px);
}
.se-roof--fullscreen .se-roof__image canvas {
	position: absolute;
	inset: 0;
	/* Canvas inherits the wrapper's size (= image's rendered size), so
	 * (0, 0) lands on the image's top-left pixel. Combined with
	 * sizeCanvas() running on every ResizeObserver tick this keeps
	 * draw coords perfectly aligned with the roof underneath. */
}
.se-roof--fullscreen .se-roof__zoom {
	top: 16px;
	right: 16px;
}
.se-roof--fullscreen .se-roof__zoombtn {
	width: 44px;
	height: 44px;
	font-size: 22px;
}
/* When fullscreen, the surrounding results section is invisible — we
 * surface a bottom action bar holding the drawing toolbar so the user
 * can tap Draw/Undo/Clear/Recalculate without exiting. */
.se-roof--fullscreen ~ .se-roof__toolbar,
.se-roof--fullscreen + .se-roof__toolbar {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 10000;
	padding: 12px;
	margin: 0;
	background: var(--se-card);
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius);
	box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.se-roof--fullscreen ~ [data-se-roof-hint] {
	position: fixed;
	left: 50%;
	top: 16px;
	transform: translateX(-50%);
	z-index: 10000;
	background: var(--se-card);
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius);
	padding: 8px 14px;
	margin: 0;
	max-width: calc(100vw - 32px);
}

/* ------------------------------------------------------------------
 * Breakdown cards (System Details + Financial Breakdown)
 * ---------------------------------------------------------------- */
.se-breakdown-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 24px;
}
@media (min-width: 720px) {
	.se-breakdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.se-breakdown {
	padding: 18px;
	background: var(--se-card);
	border: 1px solid var(--se-border);
	border-radius: var(--se-radius);
	box-shadow: var(--se-shadow-sm);
}
.se-breakdown__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--se-border);
	position: relative;
}
.se-breakdown__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--se-primary-soft);
	color: var(--se-primary-dark);
}
.se-breakdown__icon svg { width: 18px; height: 18px; }
.se-breakdown__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--se-foreground);
}
.se-breakdown__list { margin: 0; padding: 0; }
.se-breakdown__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--se-border);
	font-size: 14px;
}
.se-breakdown__row:last-child { border-bottom: 0; padding-bottom: 0; }
.se-breakdown__row dt {
	color: var(--se-muted-foreground);
	font-weight: 400;
	margin: 0;
}
.se-breakdown__row dd {
	margin: 0;
	font-weight: 500;
	color: var(--se-foreground);
	text-align: right;
}
.se-breakdown__row--total {
	font-weight: 700;
}
.se-breakdown__row--total dt { color: var(--se-foreground); font-weight: 600; }
.se-breakdown__row--total dd { color: var(--se-secondary); }

/* ------------------------------------------------------------------
 * 25-Year Projection card
 * ---------------------------------------------------------------- */
.se-projection {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 24px;
	padding: 20px;
	background: var(--se-primary-soft);
	border: 1px solid color-mix(in oklch, var(--se-primary) 30%, transparent);
	border-radius: var(--se-radius);
}
@media (min-width: 720px) {
	.se-projection {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}
}
.se-projection__body {
	display: flex;
	align-items: center;
	gap: 14px;
}
.se-projection__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--se-primary);
	color: var(--se-primary-foreground);
	flex-shrink: 0;
}
.se-projection__icon svg { width: 22px; height: 22px; }
.se-projection__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--se-foreground);
}
.se-projection__lede {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--se-muted-foreground);
}
.se-projection__figure { text-align: left; }
@media (min-width: 720px) {
	.se-projection__figure { text-align: right; }
}
.se-projection__value {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	color: var(--se-secondary);
	line-height: 1.1;
}
@media (min-width: 720px) {
	.se-projection__value { font-size: 34px; }
}
.se-projection__sub {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--se-muted-foreground);
}

.se-results__disclaimer {
	margin: 24px auto 0;
	max-width: 640px;
	text-align: center;
	font-size: 12px;
	color: var(--se-muted-foreground);
}

.se-results__restart {
	margin: 24px auto 0;
	text-align: center;
}

/* ------------------------------------------------------------------
 * Lead-capture hero card.
 *
 * The visual "moment" on the results page. Lives between the lede
 * and the stat grid so it's the first thing a customer sees once
 * their numbers land. Deliberately high-contrast against the warm
 * off-white page background:
 *   - Dark forest-green gradient surface (the brand's primary +
 *     primary-dark tokens) to make the card read as a destination
 *     rather than a passive section.
 *   - Gold accent strip at the top and a gold underlined figure in
 *     the copy to create a single visual anchor — mirrors the gold
 *     accent used elsewhere in the estimator.
 *   - Angled shine + soft radial glow render as background layers
 *     so they stay below the form controls (aria-hidden divs in
 *     markup; pointer-events:none here as belt-and-braces).
 *
 * Entrance: `.se-lead-card--enter` is applied by wizard.js on the
 * first post-calculation render; removed after ~700ms so subsequent
 * recalcs don't re-trigger the animation.
 * ---------------------------------------------------------------- */
.se-lead-card {
	position: relative;
	overflow: hidden;
	margin: 24px 0 32px;
	padding: 32px 28px;
	border-radius: var(--se-radius-lg);
	background:
		linear-gradient(105deg, var(--se-primary) 0%, var(--se-primary) 40%, var(--se-secondary) 100%);
	color: var(--se-primary-foreground);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 14px 40px rgba(19, 70, 36, 0.22);
	isolation: isolate;
}

/* Gold accent strip — reinforces that this is the "headline" card. */
.se-lead-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--se-accent) 0%, color-mix(in oklch, var(--se-accent) 75%, white) 55%, var(--se-accent) 100%);
	z-index: 2;
}

/* Angled specular highlight. */
.se-lead-card__shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		115deg,
		transparent 0%,
		rgba(255, 255, 255, 0.08) 42%,
		rgba(255, 255, 255, 0.14) 50%,
		rgba(255, 255, 255, 0.04) 58%,
		transparent 100%
	);
	pointer-events: none;
	z-index: 0;
}

/* Warm radial glow centred top-right — suggests sun without an emoji. */
.se-lead-card__glow {
	position: absolute;
	top: -120px;
	right: -120px;
	width: 360px;
	height: 360px;
	background: radial-gradient(
		circle at center,
		rgba(199, 154, 58, 0.45) 0%,
		rgba(199, 154, 58, 0.12) 40%,
		transparent 70%
	);
	pointer-events: none;
	z-index: 0;
}

.se-lead-card__form-pane,
.se-lead-card__success-pane {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto;
}

.se-lead-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: var(--se-primary-foreground);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.se-lead-card__badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--se-accent);
	box-shadow: 0 0 0 0 color-mix(in oklch, var(--se-accent) 70%, transparent);
	animation: se-lead-pulse 2s ease-out infinite;
}
@keyframes se-lead-pulse {
	0%   { box-shadow: 0 0 0 0   color-mix(in oklch, var(--se-accent) 70%, transparent); }
	70%  { box-shadow: 0 0 0 10px color-mix(in oklch, var(--se-accent) 0%,  transparent); }
	100% { box-shadow: 0 0 0 0   color-mix(in oklch, var(--se-accent) 0%,  transparent); }
}

.se-lead-card__title {
	margin: 0 0 10px;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--se-primary-foreground);
}

.se-lead-card__lede {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
}
.se-lead-card__lede strong {
	color: var(--se-accent);
	border-bottom: 2px solid color-mix(in oklch, var(--se-accent) 55%, transparent);
	padding-bottom: 1px;
	font-weight: 700;
}

/* Form grid — First name + Last name side by side on desktop,
 * phone spans both columns. Stacks on narrow screens.            */
.se-lead-card__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 16px;
}
.se-lead-card__grid .se-field {
	margin: 0;
}
.se-field--span-2 {
	grid-column: 1 / -1;
}

/* Make fields legible on the dark surface — white backgrounds so
 * input affordance reads clearly. Explicit text colour override
 * to avoid the forest-green inheriting onto placeholder text. */
.se-lead-card .se-field__label {
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	font-weight: 500;
}
.se-lead-card .se-field input {
	background: var(--se-card);
	color: var(--se-foreground);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.se-lead-card .se-field input:focus {
	outline: none;
	border-color: var(--se-accent);
	box-shadow: 0 0 0 3px rgba(199, 154, 58, 0.35);
}

.se-lead-card__email {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px dashed rgba(255, 255, 255, 0.25);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
}
.se-lead-card__email-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: var(--se-accent);
}
.se-lead-card__email-icon svg {
	width: 100%;
	height: 100%;
}
.se-lead-card__email strong {
	color: #ffffff;
	font-weight: 600;
	word-break: break-all;
}

.se-lead-card__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

/* Gold CTA so it pops off the green field without needing the
 * default primary treatment (which would be green-on-green). */
.se-lead-card__submit {
	background: var(--se-accent);
	color: var(--se-accent-btn-text);
	border: none;
	padding: 14px 22px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--se-radius);
	box-shadow: 0 6px 16px rgba(199, 154, 58, 0.35);
	transition: transform 120ms ease, box-shadow 120ms ease;
}
.se-lead-card__submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(199, 154, 58, 0.45);
	background: #d3a544;
}
.se-lead-card__submit:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.6);
	outline-offset: 2px;
}
.se-lead-card__submit[aria-busy="true"] {
	opacity: 0.75;
	cursor: progress;
}
.se-lead-card__submit-spinner {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(27, 19, 3, 0.25);
	border-top-color: #1b1303;
	animation: se-lead-spin 0.7s linear infinite;
}
@keyframes se-lead-spin {
	to { transform: rotate(360deg); }
}

.se-lead-card__microcopy {
	margin: 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
}

.se-lead-card__error {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: var(--se-radius-sm);
	background: rgba(185, 28, 28, 0.18);
	border: 1px solid rgba(254, 202, 202, 0.4);
	color: #ffd7d7;
	font-size: 13px;
}

/* Success state — replaces the form pane after a successful submit.
 * Keeps the same footprint so the page doesn't reflow jarringly. */
.se-lead-card__success-pane {
	text-align: center;
	padding: 8px 0;
}
.se-lead-card__success-burst {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 2px solid var(--se-accent);
	position: relative;
	animation: se-lead-success-pop 520ms cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes se-lead-success-pop {
	0%   { transform: scale(0.4); opacity: 0; }
	60%  { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}
.se-lead-card__tick {
	display: inline-flex;
	width: 28px;
	height: 28px;
	color: var(--se-accent);
}
.se-lead-card__tick svg {
	width: 100%;
	height: 100%;
	stroke-width: 3;
}
.se-lead-card__success-title {
	margin: 0 0 8px;
	font-size: 22px;
	color: #ffffff;
}
.se-lead-card__success-lede {
	margin: 0 auto;
	max-width: 460px;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}
.se-lead-card__success-lede span {
	color: var(--se-accent);
	font-weight: 600;
}

/* One-shot entrance animation. Added by wizard.js on the FIRST
 * renderNumbers() after the estimator has calculations; removed
 * after the animation finishes so subsequent recalcs don't
 * re-trigger the slide.  */
.se-lead-card--enter {
	animation: se-lead-card-enter 620ms cubic-bezier(.16,.84,.44,1) both;
}
@keyframes se-lead-card-enter {
	0%   { opacity: 0; transform: translateY(18px) scale(0.985); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.se-lead-card--enter,
	.se-lead-card__success-burst,
	.se-lead-card__badge-dot {
		animation: none !important;
	}
}

@media (max-width: 560px) {
	.se-lead-card {
		margin: 16px 0 24px;
		padding: 24px 20px;
	}
	.se-lead-card__title {
		font-size: 22px;
	}
	.se-lead-card__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.se-field--span-2 {
		grid-column: auto;
	}
	.se-lead-card__glow {
		width: 240px;
		height: 240px;
		top: -80px;
		right: -80px;
	}
	.se-lead-card__submit {
		width: 100%;
		text-align: center;
	}
}