@layer settings, base, layout, components, utilities;

@layer settings {
	:root {
		--sv-primary: #1e3a8a;
		--sv-primary-hover: #1e40af;
		--sv-accent: #0f766e;
		--sv-bg: #f8fafc;
		--sv-card: #ffffff;
		--sv-text: #0f172a;
		--sv-muted: #64748b;
		--sv-border: #e2e8f0;
		--sv-soft: #eef2ff;
		--sv-success-soft: #ecfdf5;
		--sv-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
		--sv-shadow-sm: 0 10px 28px rgba(15, 23, 42, 0.06);
		--sv-radius: 8px;
		--sv-header-height: 72px;
		--sv-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	}

	html {
		scroll-behavior: smooth;
		scroll-padding-top: calc(var(--sv-header-height) + 24px);
	}

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

@layer base {
	body {
		margin: 0;
		background: var(--sv-bg);
		color: var(--sv-text);
		font-family: var(--sv-font);
		font-size: 17px;
		line-height: 1.7;
		letter-spacing: 0;
		text-rendering: optimizeLegibility;
	}

	body.admin-bar .sv-site-header {
		top: 32px;
	}

	a {
		color: var(--sv-primary);
		text-decoration: none;
		transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
	}

	a:hover {
		color: var(--sv-primary-hover);
	}

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

	p {
		margin: 0 0 1rem;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0 0 0.8rem;
		color: var(--sv-text);
		font-family: var(--sv-font);
		font-weight: 800;
		line-height: 1.12;
		letter-spacing: 0;
		text-wrap: balance;
	}

	h1 {
		font-size: 2.4rem;
	}

	h2 {
		font-size: 1.72rem;
		scroll-margin-top: calc(var(--sv-header-height) + 28px);
	}

	h3 {
		font-size: 1.2rem;
		scroll-margin-top: calc(var(--sv-header-height) + 28px);
	}

	ul,
	ol {
		margin: 0 0 1.2rem;
		padding-left: 1.2rem;
	}

	li + li {
		margin-top: 0.4rem;
	}

	table {
		border-collapse: collapse;
		width: 100%;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		letter-spacing: 0;
	}

	:focus-visible {
		outline: 3px solid rgba(15, 118, 110, 0.45);
		outline-offset: 3px;
	}
}

@layer layout {
	.sv-skip-link {
		position: absolute;
		left: 16px;
		top: 12px;
		z-index: 1000;
		transform: translateY(-160%);
		background: var(--sv-text);
		color: #ffffff;
		border-radius: var(--sv-radius);
		padding: 10px 14px;
	}

	.sv-skip-link:focus {
		transform: translateY(0);
	}

	.sv-site-header {
		position: sticky;
		top: 0;
		z-index: 50;
		background: rgba(248, 250, 252, 0.92);
		border-bottom: 1px solid rgba(226, 232, 240, 0.9);
		backdrop-filter: blur(14px);
	}

	.sv-header-inner {
		width: min(100% - 32px, 1360px);
		min-height: var(--sv-header-height);
		margin: 0 auto;
		display: flex;
		align-items: center;
		gap: 18px;
	}

	.sv-brand {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		color: var(--sv-text);
		font-weight: 800;
		line-height: 1;
	}

	.sv-brand:hover {
		color: var(--sv-primary);
	}

	.sv-brand-mark {
		display: inline-grid;
		place-items: center;
		width: 32px;
		height: 32px;
		border-radius: var(--sv-radius);
		background: var(--sv-text);
		color: #ffffff;
		font-size: 0.95rem;
	}

	.sv-primary-nav {
		display: none;
		margin-left: auto;
	}

	.sv-primary-nav.is-open {
		position: absolute;
		left: 16px;
		right: 16px;
		top: calc(var(--sv-header-height) + 8px);
		display: block;
		background: var(--sv-card);
		border: 1px solid var(--sv-border);
		border-radius: var(--sv-radius);
		box-shadow: var(--sv-shadow-sm);
		padding: 12px;
	}

	.sv-menu,
	.sv-footer-menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.sv-menu a {
		display: block;
		padding: 10px 12px;
		border-radius: var(--sv-radius);
		color: var(--sv-muted);
		font-size: 0.94rem;
		font-weight: 650;
	}

	.sv-menu a:hover {
		background: var(--sv-soft);
		color: var(--sv-primary);
	}

	.sv-nav-toggle {
		margin-left: auto;
		border: 1px solid var(--sv-border);
		border-radius: var(--sv-radius);
		background: var(--sv-card);
		color: var(--sv-text);
		padding: 9px 12px;
		font-weight: 750;
		cursor: pointer;
	}

	.sv-header-cta {
		display: none;
	}

	.sv-site-main {
		min-height: 70vh;
	}

	.sv-page-shell {
		width: min(100% - 32px, 1360px);
		margin: 0 auto;
		padding: 28px 0 82px;
	}

	.sv-content-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}

	.sv-main-column {
		width: min(100%, 760px);
		margin: 0 auto;
	}

	.sv-footer {
		background: var(--sv-text);
		color: #dbeafe;
		padding: 48px 0 36px;
	}

	.sv-footer-inner {
		width: min(100% - 32px, 1160px);
		margin: 0 auto;
		display: grid;
		gap: 28px;
	}

	.sv-footer .sv-brand,
	.sv-footer a {
		color: #ffffff;
	}

	.sv-footer-brand p,
	.sv-footer-meta {
		color: #cbd5e1;
		font-size: 0.92rem;
	}

	.sv-footer-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 18px;
	}

	.sv-footer-menu a {
		color: #dbeafe;
		font-weight: 650;
	}

	.sv-footer-menu a:hover {
		color: #ffffff;
	}

	.sv-footer-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 24px;
		border-top: 1px solid rgba(226, 232, 240, 0.16);
		padding-top: 20px;
	}

	@media (min-width: 768px) {
		.sv-header-cta {
			display: inline-flex;
		}

		.sv-page-shell {
			width: min(100% - 48px, 1360px);
			padding-top: 36px;
		}

		.sv-footer-inner {
			grid-template-columns: 1.2fr 1fr;
			align-items: start;
		}

		.sv-footer-meta {
			grid-column: 1 / -1;
		}
	}

	@media (min-width: 1024px) {
		.sv-nav-toggle {
			display: none;
		}

		.sv-primary-nav {
			display: block;
		}

		.sv-menu {
			display: flex;
			align-items: center;
			gap: 4px;
		}
	}

	@media (min-width: 1240px) {
		.sv-content-grid {
			grid-template-columns: minmax(200px, 220px) minmax(700px, 744px) minmax(280px, 304px);
			justify-content: center;
			gap: 24px;
		}

		.sv-main-column {
			width: 100%;
			max-width: 744px;
		}

		.sv-toc-sidebar {
			position: sticky;
			top: calc(var(--sv-header-height) + 24px);
		}

		.sv-sidebar-stack {
			position: sticky;
			top: calc(var(--sv-header-height) + 24px);
		}
	}
}

@layer components {
	.sv-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		border: 1px solid transparent;
		border-radius: var(--sv-radius);
		padding: 10px 16px;
		font-size: 0.95rem;
		font-weight: 800;
		line-height: 1.1;
		cursor: pointer;
	}

	.sv-button:hover {
		transform: translateY(-1px);
		box-shadow: 0 12px 24px rgba(30, 58, 138, 0.18);
	}

	.sv-button--primary {
		background: var(--sv-primary);
		color: #ffffff;
	}

	.sv-button--primary:hover {
		background: var(--sv-primary-hover);
		color: #ffffff;
	}

	.sv-button--secondary,
	.sv-button--ghost {
		background: var(--sv-card);
		border-color: var(--sv-border);
		color: var(--sv-text);
	}

	.sv-button--secondary:hover,
	.sv-button--ghost:hover {
		border-color: rgba(30, 58, 138, 0.28);
		background: var(--sv-soft);
		color: var(--sv-primary);
	}

	.sv-breadcrumbs {
		margin: 0 0 20px;
		color: var(--sv-muted);
		font-size: 0.86rem;
	}

	.sv-breadcrumbs ol {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.sv-breadcrumbs li {
		margin: 0;
	}

	.sv-breadcrumbs li:not(:last-child)::after {
		content: ">";
		margin-left: 6px;
		color: #94a3b8;
	}

	.sv-breadcrumbs a {
		color: var(--sv-muted);
	}

	.sv-breadcrumbs a:hover {
		color: var(--sv-primary);
	}

	.sv-hero,
	.sv-index-hero {
		width: min(100%, 900px);
		padding: 32px 0 40px;
	}

	.sv-hero h1,
	.sv-index-hero h1 {
		max-width: 840px;
		margin-bottom: 16px;
	}

	.sv-hero-text,
	.sv-index-hero p {
		max-width: 720px;
		color: var(--sv-muted);
		font-size: 1.05rem;
	}

	.sv-hero-actions {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin: 24px 0 10px;
	}

	.sv-eyebrow {
		margin: 0 0 8px;
		color: var(--sv-accent);
		font-size: 0.76rem;
		font-weight: 850;
		letter-spacing: 0;
		text-transform: uppercase;
	}

	.sv-microcopy {
		color: var(--sv-muted);
		font-size: 0.86rem;
	}

	.sv-trust-list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		list-style: none;
		margin: 18px 0 0;
		padding: 0;
	}

	.sv-trust-list li {
		margin: 0;
		border: 1px solid var(--sv-border);
		border-radius: 999px;
		background: var(--sv-card);
		color: var(--sv-muted);
		padding: 6px 10px;
		font-size: 0.82rem;
		font-weight: 700;
	}

	.sv-toc-card {
		border: 1px solid var(--sv-border);
		border-radius: var(--sv-radius);
		background: var(--sv-card);
		box-shadow: var(--sv-shadow-sm);
		padding: 14px;
	}

	.sv-toc-title {
		cursor: pointer;
		color: var(--sv-text);
		font-size: 0.86rem;
		font-weight: 850;
		list-style: none;
	}

	.sv-toc-title::-webkit-details-marker {
		display: none;
	}

	.sv-toc-nav {
		display: grid;
		gap: 3px;
		margin-top: 12px;
	}

	.sv-toc-link {
		display: block;
		border-left: 3px solid transparent;
		border-radius: 0 var(--sv-radius) var(--sv-radius) 0;
		color: var(--sv-muted);
		font-size: 0.86rem;
		line-height: 1.35;
		padding: 7px 8px;
	}

	.sv-toc-link--h3 {
		margin-left: 14px;
		font-size: 0.82rem;
	}

	.sv-toc-link:hover,
	.sv-toc-link.is-active {
		border-left-color: var(--sv-accent);
		background: var(--sv-success-soft);
		color: var(--sv-text);
	}

	.sv-section {
		margin: 0 0 40px;
		scroll-margin-top: calc(var(--sv-header-height) + 24px);
	}

	.sv-section-heading {
		margin-bottom: 20px;
	}

	.sv-section-heading p {
		color: var(--sv-muted);
	}

	.sv-quick-picks {
		display: grid;
		gap: 14px;
	}

	.sv-pick-card,
	.sv-side-card,
	.sv-guide-card a,
	.sv-link-card {
		border: 1px solid var(--sv-border);
		border-radius: var(--sv-radius);
		background: var(--sv-card);
		box-shadow: var(--sv-shadow-sm);
	}

	.sv-pick-card {
		padding: 18px;
		transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
	}

	.sv-pick-card:hover {
		border-color: rgba(30, 58, 138, 0.26);
		box-shadow: var(--sv-shadow);
		transform: translateY(-2px);
	}

	.sv-pick-card.is-highlighted {
		border-color: rgba(15, 118, 110, 0.42);
		box-shadow: 0 18px 44px rgba(15, 118, 110, 0.1);
	}

	.sv-pick-card-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 14px;
	}

	.sv-badge {
		display: inline-flex;
		align-items: center;
		border: 1px solid rgba(15, 118, 110, 0.22);
		border-radius: 999px;
		background: var(--sv-success-soft);
		color: var(--sv-accent);
		padding: 4px 9px;
		font-size: 0.75rem;
		font-weight: 850;
		line-height: 1;
	}

	.sv-score {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		height: 32px;
		border-radius: var(--sv-radius);
		background: var(--sv-soft);
		color: var(--sv-primary);
		font-weight: 850;
	}

	.sv-pick-fit {
		color: var(--sv-text);
		font-weight: 750;
	}

	.sv-table-wrap {
		overflow-x: auto;
		border: 1px solid var(--sv-border);
		border-radius: var(--sv-radius);
		background: var(--sv-card);
		box-shadow: var(--sv-shadow-sm);
	}

	.sv-comparison-table {
		min-width: 720px;
		background: var(--sv-card);
	}

	.sv-comparison-table th,
	.sv-comparison-table td {
		border-bottom: 1px solid var(--sv-border);
		padding: 14px;
		text-align: left;
		vertical-align: middle;
	}

	.sv-comparison-table thead th {
		background: #f1f5f9;
		color: var(--sv-muted);
		font-size: 0.8rem;
		font-weight: 850;
		text-transform: uppercase;
	}

	.sv-comparison-table tbody tr:hover {
		background: #f8fafc;
	}

	.sv-comparison-table tr.is-best {
		background: rgba(236, 253, 245, 0.7);
	}

	.sv-table-tool {
		display: block;
		margin-bottom: 7px;
		color: var(--sv-text);
		font-weight: 850;
	}

	.sv-table-cta {
		white-space: nowrap;
	}

	.sv-entry-content {
		margin: 0 0 40px;
	}

	.sv-entry-content > * {
		max-width: 100%;
	}

	.sv-entry-content h2 {
		margin-top: 2.6rem;
	}

	.sv-entry-content h3 {
		margin-top: 1.8rem;
	}

	.sv-entry-content p,
	.sv-entry-content li {
		color: #334155;
	}

	.sv-entry-content a {
		border-bottom: 1px solid rgba(30, 58, 138, 0.24);
		font-weight: 750;
	}

	.sv-entry-content a:hover {
		border-bottom-color: var(--sv-primary-hover);
	}

	.sv-cta-block {
		display: grid;
		gap: 18px;
		align-items: center;
		margin: 34px 0;
		border: 1px solid rgba(30, 58, 138, 0.18);
		border-radius: var(--sv-radius);
		background: var(--sv-card);
		box-shadow: var(--sv-shadow-sm);
		padding: 22px;
	}

	.sv-cta-block h2 {
		margin-bottom: 10px;
	}

	.sv-internal-links {
		margin-top: 44px;
	}

	.sv-link-grid {
		display: grid;
		gap: 12px;
	}

	.sv-link-card {
		display: grid;
		gap: 5px;
		padding: 16px;
		color: var(--sv-text);
		transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
	}

	.sv-link-card:hover {
		border-color: rgba(30, 58, 138, 0.28);
		box-shadow: var(--sv-shadow);
		transform: translateY(-2px);
	}

	.sv-link-card span {
		font-weight: 850;
	}

	.sv-link-card small {
		color: var(--sv-muted);
		font-size: 0.86rem;
	}

	.sv-conversion-sidebar {
		display: none;
	}

	.sv-sidebar-stack {
		display: grid;
		gap: 14px;
	}

	.sv-side-card {
		padding: 16px;
	}

	.sv-side-card h2 {
		font-size: 1.05rem;
		margin-top: 8px;
	}

	.sv-side-card p {
		color: var(--sv-muted);
		font-size: 0.92rem;
	}

	.sv-side-card--primary {
		background: var(--sv-text);
		color: #ffffff;
		border-color: var(--sv-text);
	}

	.sv-side-card--primary h2,
	.sv-side-card--primary p {
		color: #ffffff;
	}

	.sv-side-card--primary .sv-eyebrow {
		color: #99f6e4;
	}

	.sv-side-link-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.sv-side-link-list li {
		margin: 0;
	}

	.sv-side-link-list a {
		display: block;
		border-radius: var(--sv-radius);
		color: var(--sv-muted);
		font-size: 0.9rem;
		font-weight: 750;
		padding: 8px 0;
	}

	.sv-side-link-list a:hover {
		color: var(--sv-primary);
		transform: translateX(2px);
	}

	.sv-email-form {
		display: grid;
		gap: 8px;
	}

	.sv-email-form input {
		width: 100%;
		min-height: 42px;
		border: 1px solid var(--sv-border);
		border-radius: var(--sv-radius);
		background: #ffffff;
		color: var(--sv-text);
		padding: 9px 11px;
	}

	.sv-email-form.is-submitted input {
		border-color: rgba(15, 118, 110, 0.42);
		background: var(--sv-success-soft);
	}

	.sv-mobile-cta {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 12px;
		z-index: 60;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border: 1px solid rgba(226, 232, 240, 0.96);
		border-radius: var(--sv-radius);
		background: rgba(255, 255, 255, 0.96);
		box-shadow: var(--sv-shadow);
		padding: 10px;
		transform: translateY(140%);
		opacity: 0;
		transition: transform 180ms ease, opacity 180ms ease;
	}

	.sv-mobile-cta.is-visible:not(.is-near-footer) {
		transform: translateY(0);
		opacity: 1;
	}

	.sv-mobile-cta strong,
	.sv-mobile-cta span {
		display: block;
		line-height: 1.2;
	}

	.sv-mobile-cta strong {
		font-size: 0.92rem;
	}

	.sv-mobile-cta span {
		color: var(--sv-muted);
		font-size: 0.78rem;
	}

	.sv-mobile-cta .sv-button {
		min-height: 40px;
		padding: 9px 12px;
	}

	.sv-guide-grid {
		display: grid;
		gap: 16px;
	}

	.sv-guide-card a {
		display: grid;
		gap: 12px;
		min-height: 100%;
		padding: 18px;
		color: var(--sv-text);
		transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
	}

	.sv-guide-card a:hover {
		border-color: rgba(30, 58, 138, 0.3);
		box-shadow: var(--sv-shadow);
		transform: translateY(-2px);
	}

	.sv-guide-card h2 {
		font-size: 1.25rem;
	}

	.sv-guide-card p,
	.sv-empty-state p {
		color: var(--sv-muted);
	}

	.sv-empty-state {
		border: 1px solid var(--sv-border);
		border-radius: var(--sv-radius);
		background: var(--sv-card);
		padding: 28px;
	}

	.sv-empty-state--large {
		width: min(100%, 720px);
		margin: 80px auto;
		text-align: center;
	}

	.nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 28px;
	}

	.nav-links a,
	.nav-links span {
		border: 1px solid var(--sv-border);
		border-radius: var(--sv-radius);
		background: var(--sv-card);
		padding: 8px 12px;
		font-weight: 750;
	}

	@media (max-width: 767px) {
		.sv-hero-actions .sv-button,
		.sv-pick-card .sv-button,
		.sv-cta-block .sv-button {
			width: 100%;
		}

		.sv-comparison-table {
			font-size: 0.92rem;
		}
	}

	@media (min-width: 560px) {
		.sv-hero-actions {
			flex-direction: row;
			align-items: center;
		}

	}

	@media (min-width: 768px) {
		h1 {
			font-size: 3rem;
		}

		.sv-quick-picks {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.sv-cta-block {
			grid-template-columns: 1fr auto;
			padding: 26px;
		}

		.sv-link-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.sv-conversion-sidebar {
			display: block;
		}

		.sv-sidebar-stack {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.sv-guide-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.sv-mobile-cta {
			display: none;
		}
	}

	@media (min-width: 1240px) {
		.sv-hero {
			padding-top: 34px;
			padding-bottom: 52px;
		}

		.sv-sidebar-stack {
			grid-template-columns: 1fr;
		}

		.sv-side-card {
			padding: 18px;
		}

		.sv-toc-card,
		.sv-side-card {
			box-shadow: none;
		}
	}
}

@layer utilities {
	.screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.alignwide,
	.alignfull {
		max-width: 100%;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			scroll-behavior: auto !important;
			transition-duration: 0.01ms !important;
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
		}
	}

	@media (max-width: 782px) {
		body.admin-bar .sv-site-header {
			top: 46px;
		}
	}
}