/* SEO Audit Lead Gen — front-end styles */
.slg-widget {
	--slg-accent: #2563eb;
	--slg-bg: #ffffff;
	--slg-text: #1f2937;
	--slg-muted: #6b7280;
	--slg-border: #e5e7eb;
	--slg-radius: 14px;
	max-width: 560px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--slg-text);
	line-height: 1.5;
	box-sizing: border-box;
}
.slg-widget *,
.slg-widget *::before,
.slg-widget *::after {
	box-sizing: inherit;
}

.slg-form {
	background: var(--slg-bg);
	border: 1px solid var(--slg-border);
	border-radius: var(--slg-radius);
	padding: 28px;
	box-shadow: 0 10px 30px rgba( 15, 23, 42, 0.06 );
}
.slg-form__head {
	text-align: center;
	margin-bottom: 20px;
}
.slg-form__title {
	margin: 0 0 6px;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--slg-text);
}
.slg-form__subtitle {
	margin: 0;
	color: var(--slg-muted);
	font-size: 0.95rem;
}

.slg-field {
	margin-bottom: 14px;
}
.slg-field label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 5px;
	color: var(--slg-text);
}
.slg-optional {
	font-weight: 400;
	color: var(--slg-muted);
}
.slg-field input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--slg-border);
	border-radius: 10px;
	font-size: 1rem;
	color: var(--slg-text);
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.slg-field input:focus {
	outline: none;
	border-color: var(--slg-accent);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--slg-accent) 20%, transparent );
}

.slg-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.slg-submit {
	width: 100%;
	margin-top: 6px;
	padding: 14px 20px;
	border: none;
	border-radius: 10px;
	background: var(--slg-accent);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}
.slg-submit:hover {
	filter: brightness( 1.07 );
}
.slg-submit:active {
	transform: translateY( 1px );
}
.slg-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.slg-error {
	margin: 12px 0 0;
	padding: 10px 12px;
	background: #fef2f2;
	color: #b91c1c;
	border-radius: 8px;
	font-size: 0.9rem;
}
.slg-privacy {
	margin: 14px 0 0;
	text-align: center;
	font-size: 0.78rem;
	color: var(--slg-muted);
}

/* Loading */
.slg-loading {
	text-align: center;
	padding: 48px 20px;
	background: var(--slg-bg);
	border: 1px solid var(--slg-border);
	border-radius: var(--slg-radius);
}
.slg-spinner {
	width: 44px;
	height: 44px;
	margin: 0 auto 16px;
	border: 4px solid var(--slg-border);
	border-top-color: var(--slg-accent);
	border-radius: 50%;
	animation: slg-spin 0.8s linear infinite;
}
@keyframes slg-spin {
	to { transform: rotate( 360deg ); }
}
.slg-loading__text {
	margin: 0;
	color: var(--slg-muted);
	font-weight: 600;
}

/* Report */
.slg-report {
	background: var(--slg-bg);
	border: 1px solid var(--slg-border);
	border-radius: var(--slg-radius);
	padding: 28px;
	box-shadow: 0 10px 30px rgba( 15, 23, 42, 0.06 );
}
.slg-score {
	display: flex;
	align-items: center;
	gap: 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--slg-border);
	margin-bottom: 22px;
}
.slg-score__ring {
	--slg-ring-color: #16a34a;
	flex: 0 0 auto;
	width: 108px;
	height: 108px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient( closest-side, #fff 78%, transparent 79% 100% ),
		conic-gradient( var(--slg-ring-color) calc( var(--slg-score) * 1% ), #e5e7eb 0 );
}
.slg-report--poor .slg-score__ring { --slg-ring-color: #dc2626; }
.slg-report--ok .slg-score__ring { --slg-ring-color: #f59e0b; }
.slg-report--good .slg-score__ring { --slg-ring-color: #16a34a; }

.slg-score__num {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--slg-text);
}
.slg-score__grade {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--slg-muted);
	letter-spacing: 0.05em;
}
.slg-score__headline {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 1.1rem;
}
.slg-score__url {
	margin: 0 0 2px;
	color: var(--slg-accent);
	font-size: 0.9rem;
	word-break: break-all;
}
.slg-score__passed {
	margin: 0;
	color: var(--slg-muted);
	font-size: 0.85rem;
}

/* Category bars */
.slg-catbars {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 20px;
	margin-bottom: 22px;
}
.slg-catbar__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 4px;
}
.slg-catbar__label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--slg-text);
}
.slg-catbar__score {
	font-size: 0.82rem;
	font-weight: 800;
	color: var(--slg-muted);
}
.slg-catbar__track {
	height: 7px;
	background: #eef0f3;
	border-radius: 999px;
	overflow: hidden;
}
.slg-catbar__fill {
	height: 100%;
	border-radius: 999px;
	transition: width 0.6s ease;
}
.slg-catbar__fill--good { background: #16a34a; }
.slg-catbar__fill--ok { background: #f59e0b; }
.slg-catbar__fill--poor { background: #dc2626; }

/* Category groups */
.slg-group {
	margin-bottom: 18px;
}
.slg-group__title {
	margin: 0 0 4px;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--slg-muted);
	padding-bottom: 6px;
	border-bottom: 2px solid var(--slg-border);
}

/* Broken links */
.slg-broken {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 22px;
}
.slg-broken__title {
	margin: 0 0 8px;
	font-size: 0.9rem;
	font-weight: 800;
	color: #b91c1c;
}
.slg-broken__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.slg-broken__list li {
	display: flex;
	gap: 10px;
	align-items: baseline;
	font-size: 0.82rem;
}
.slg-broken__code {
	flex: 0 0 auto;
	font-weight: 800;
	color: #b91c1c;
	font-variant-numeric: tabular-nums;
	min-width: 84px;
}
.slg-broken__url {
	color: var(--slg-text);
	word-break: break-all;
}

/* PageSpeed */
.slg-psi {
	background: #f9fafb;
	border: 1px solid var(--slg-border);
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 22px;
}
.slg-psi__title {
	margin: 0 0 10px;
	font-size: 0.95rem;
	font-weight: 700;
}
.slg-psi__score {
	font-size: 1.8rem;
	font-weight: 800;
	margin-bottom: 10px;
}
.slg-psi__score span {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--slg-muted);
}
.slg-psi__score--good { color: #16a34a; }
.slg-psi__score--ok { color: #f59e0b; }
.slg-psi__score--poor { color: #dc2626; }
.slg-psi__metrics {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 18px;
}
.slg-psi__metrics li {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 0.82rem;
	border-bottom: 1px dashed var(--slg-border);
	padding-bottom: 4px;
}
.slg-psi__label { color: var(--slg-muted); }
.slg-psi__value { font-weight: 700; }

/* Checks */
.slg-checks {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}
.slg-check {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--slg-border);
}
.slg-check:last-child {
	border-bottom: none;
}
.slg-check__icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 800;
	color: #fff;
}
.slg-check--pass .slg-check__icon { background: #16a34a; }
.slg-check--warn .slg-check__icon { background: #f59e0b; }
.slg-check--fail .slg-check__icon { background: #dc2626; }
.slg-check__body {
	display: flex;
	flex-direction: column;
}
.slg-check__label {
	font-weight: 700;
	font-size: 0.92rem;
}
.slg-check__msg {
	color: var(--slg-muted);
	font-size: 0.85rem;
}

.slg-report__cta {
	background: color-mix( in srgb, var(--slg-accent) 8%, #fff );
	border: 1px solid color-mix( in srgb, var(--slg-accent) 25%, #fff );
	border-radius: 10px;
	padding: 16px 18px;
	text-align: center;
}
.slg-report__cta p {
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
}

@media ( max-width: 480px ) {
	.slg-form,
	.slg-report { padding: 20px; }
	.slg-score {
		flex-direction: column;
		text-align: center;
	}
	.slg-psi__metrics { grid-template-columns: 1fr; }
	.slg-catbars { grid-template-columns: 1fr; }
	.slg-roi-grid { grid-template-columns: 1fr; }
}

/* Prefixed / number fields */
.slg-field__wrap { position: relative; display: flex; align-items: center; }
.slg-field--prefixed .slg-field__prefix {
	position: absolute;
	left: 14px;
	color: var(--slg-muted);
	font-weight: 600;
	pointer-events: none;
}
.slg-field--prefixed input { padding-left: 28px; }

/* ROI live panel */
.slg-roi-live {
	background: color-mix( in srgb, var(--slg-accent) 7%, #fff );
	border: 1px solid color-mix( in srgb, var(--slg-accent) 22%, #fff );
	border-radius: 10px;
	padding: 14px 16px;
	margin: 4px 0 16px;
}
.slg-roi-live__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 0.9rem;
	padding: 3px 0;
}
.slg-roi-live__row b { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.slg-roi-live__row--hi b { color: var(--slg-accent); font-size: 1.3rem; font-weight: 800; }
.slg-roi-live__note { margin: 8px 0 0; font-size: 0.78rem; color: var(--slg-muted); }

/* ROI report */
.slg-roi-report__lead { margin: 0 0 12px; color: var(--slg-muted); font-weight: 600; text-align: center; }
.slg-roi-hero {
	text-align: center;
	padding: 22px;
	border-radius: 12px;
	background: color-mix( in srgb, var(--slg-accent) 10%, #fff );
	border: 1px solid color-mix( in srgb, var(--slg-accent) 25%, #fff );
	margin-bottom: 18px;
}
.slg-roi-hero__label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--slg-muted); margin-bottom: 6px; }
.slg-roi-hero__value {
	display: block;
	font-size: clamp( 2.2rem, 8vw, 3.2rem );
	font-weight: 800;
	line-height: 1;
	color: var(--slg-accent);
	font-variant-numeric: tabular-nums;
}
.slg-roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.slg-roi-cell {
	background: #f9fafb;
	border: 1px solid var(--slg-border);
	border-radius: 10px;
	padding: 14px 16px;
}
.slg-roi-cell__label { display: block; font-size: 0.78rem; color: var(--slg-muted); margin-bottom: 4px; }
.slg-roi-cell__value { display: block; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.slg-roi-cell__value--hi { color: var(--slg-accent); }

/* Quiz */
.slg-quiz-progress {
	height: 6px;
	background: #eef0f3;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 22px;
}
.slg-quiz-progress__bar {
	height: 100%;
	background: var(--slg-accent);
	border-radius: 999px;
	transition: width 0.35s ease;
}
.slg-quiz-q {
	font-size: 1.2rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 18px;
	text-wrap: balance;
}
.slg-quiz-opts { display: grid; gap: 10px; }
.slg-quiz-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1.5px solid var(--slg-border);
	border-radius: 10px;
	cursor: pointer;
	font-weight: 500;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.slg-quiz-opt:hover { border-color: var(--slg-accent); background: color-mix( in srgb, var(--slg-accent) 5%, #fff ); }
.slg-quiz-opt input { accent-color: var(--slg-accent); width: 18px; height: 18px; flex: 0 0 auto; }
.slg-quiz-opt:has(input:checked) { border-color: var(--slg-accent); background: color-mix( in srgb, var(--slg-accent) 8%, #fff ); }
.slg-quiz-back {
	margin-top: 16px;
	background: none;
	border: none;
	color: var(--slg-muted);
	font-size: 0.9rem;
	cursor: pointer;
	padding: 4px 0;
}
.slg-quiz-back:hover { color: var(--slg-accent); }

/* Google Business Profile rating block */
.slg-gbp {
	display: flex;
	align-items: center;
	gap: 18px;
	background: #f9fafb;
	border: 1px solid var(--slg-border);
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 22px;
}
.slg-gbp__rating { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.slg-gbp__num { font-size: 2.2rem; font-weight: 800; color: var(--slg-text); font-variant-numeric: tabular-nums; }
.slg-gbp__stars { color: #f59e0b; font-size: 1rem; letter-spacing: 1px; margin-top: 4px; }
.slg-gbp__meta { display: flex; flex-direction: column; gap: 3px; }
.slg-gbp__meta strong { font-size: 1.05rem; }
.slg-gbp__meta span { color: var(--slg-muted); font-size: 0.88rem; }

/* Competitor comparison */
.slg-vs__headline {
	text-align: center;
	font-size: 1.15rem;
	font-weight: 700;
	text-wrap: balance;
	margin: 0 0 20px;
}
.slg-vs__scores {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px;
	padding-bottom: 22px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--slg-border);
}
.slg-vs__side { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.slg-vs__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--slg-muted);
}
.slg-vs__score {
	font-size: clamp( 2.4rem, 9vw, 3.4rem );
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.slg-vs__side--you .slg-vs__score { color: var(--slg-accent); }
.slg-vs__side--them .slg-vs__score { color: var(--slg-muted); }
.slg-vs__url { font-size: 0.78rem; color: var(--slg-muted); word-break: break-all; }
.slg-vs__divider {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--slg-faint, #9aa5b1);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.slg-vs__rows { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.slg-vs__rowhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.slg-vs__cat { font-weight: 600; font-size: 0.9rem; }
.slg-vs__tag {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
}
.slg-vs__tag--win { background: #dcfce7; color: #15803d; }
.slg-vs__tag--lose { background: #fee2e2; color: #b91c1c; }
.slg-vs__tag--tie { background: #f1f5f9; color: #64748b; }
.slg-vs__bar {
	height: 10px;
	border-radius: 999px;
	overflow: hidden;
	background: #e2e8f0;
	display: flex;
}
.slg-vs__bar-you {
	background: var(--slg-accent);
	height: 100%;
	border-radius: 999px 0 0 999px;
	transition: width 0.6s ease;
	min-width: 2px;
}
.slg-vs__nums {
	display: flex;
	justify-content: space-between;
	font-size: 0.78rem;
	font-weight: 700;
	margin-top: 3px;
	font-variant-numeric: tabular-nums;
}
.slg-vs__num-you { color: var(--slg-accent); }
.slg-vs__num-them { color: var(--slg-muted); }

/* Quiz result */
.slg-quiz-result { text-align: center; }
.slg-quiz-result__eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--slg-muted);
	margin-bottom: 8px;
}
.slg-quiz-result__title { font-size: 1.8rem; font-weight: 800; margin: 0 0 10px; color: var(--slg-accent); }
.slg-quiz-result__copy { color: var(--slg-text); max-width: 46ch; margin: 0 auto 22px; }