:root {
	--tools-ink: #172033;
	--tools-muted: #5f6b7c;
	--tools-surface: #ffffff;
	--tools-page: #f5f7fb;
	--tools-indigo: #4f46e5;
}

html {
	scroll-behavior: smooth;
}

body {
	background:
		radial-gradient(circle at 8% 7%, rgba(59, 130, 246, .09), transparent 30rem),
		radial-gradient(circle at 92% 18%, rgba(139, 92, 246, .08), transparent 26rem),
		var(--tools-page);
}

.tools-shell {
	width: min(100% - 2rem, 80rem);
	margin-inline: auto;
	padding: 1.5rem 0 4rem;
}

.tools-hero {
	position: relative;
	min-height: 27rem;
	overflow: hidden;
	border-radius: 16px;
	background: #dbeafe;
	box-shadow: 0 6px 0 rgba(30, 64, 175, .1);
}

.tools-hero__art,
.tools-hero__shade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.tools-hero__art {
	object-fit: cover;
	object-position: center;
}

.tools-hero__shade {
	background: linear-gradient(90deg, rgba(247, 250, 255, .99) 0%, rgba(247, 250, 255, .96) 34%, rgba(247, 250, 255, .62) 50%, rgba(247, 250, 255, .06) 74%);
}

.tools-hero__copy {
	position: relative;
	z-index: 1;
	width: min(55%, 42rem);
	padding: clamp(2rem, 5vw, 4.5rem);
}

.tools-hero__label {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .5rem .8rem;
	border-radius: 999px;
	background: #4338ca;
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
}

.tools-hero h1 {
	max-width: 13ch;
	margin: 1rem 0 0;
	color: #111827;
	font-size: clamp(2.15rem, 4.4vw, 4rem);
	font-weight: 900;
	line-height: 1.28;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.tools-hero__copy > p {
	max-width: 58ch;
	margin: 1rem 0 0;
	color: #3d4a5c;
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.75;
	text-wrap: pretty;
}

.tools-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin-top: 1.15rem;
}

.tools-hero__stats span {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .42rem .68rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .88);
	color: #334155;
	font-size: .75rem;
	font-weight: 750;
	box-shadow: 0 2px 5px rgba(30, 41, 59, .1);
}

.tools-hero__stats strong,
.tools-hero__stats i {
	color: #4338ca;
}

.tools-search {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: min(100%, 34rem);
	min-height: 3.2rem;
	margin-top: 1.25rem;
	padding: 0 .9rem 0 1rem;
	border: 2px solid rgba(79, 70, 229, .18);
	border-radius: 14px;
	background: rgba(255, 255, 255, .96);
	color: #6366f1;
	box-shadow: 0 4px 8px rgba(30, 41, 59, .1);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.tools-search:focus-within {
	border-color: #6366f1;
	box-shadow: 0 0 0 4px rgba(99, 102, 241, .16);
}

.tools-search input {
	min-width: 0;
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	color: #172033;
	font: inherit;
	font-size: .9rem;
	font-weight: 650;
}

.tools-search input::placeholder {
	color: #667085;
	opacity: 1;
}

.tools-search button {
	display: grid;
	width: 2rem;
	height: 2rem;
	flex: none;
	place-items: center;
	border: 0;
	border-radius: 9px;
	background: #eef2ff;
	color: #4f46e5;
	cursor: pointer;
}

.tools-jumps {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: .65rem;
	margin: 1rem 0 0;
	padding: .25rem .1rem .65rem;
}

.tools-jump {
	--jump-color: #4f46e5;
	display: inline-flex;
	min-width: 0;
	min-height: 2.75rem;
	align-items: center;
	gap: .55rem;
	padding: .55rem .75rem;
	border-radius: 12px;
	background: #fff;
	color: #3f4a5a;
	font-size: .78rem;
	font-weight: 800;
	box-shadow: 0 3px 7px rgba(30, 41, 59, .09);
	transition: transform .18s ease, color .18s ease, background-color .18s ease;
}

.tools-jump span {
	min-width: 0;
	line-height: 1.4;
}

.tools-jump i {
	color: var(--jump-color);
}

.tools-jump small {
	display: grid;
	min-width: 1.4rem;
	height: 1.4rem;
	place-items: center;
	border-radius: 999px;
	background: color-mix(in srgb, var(--jump-color) 11%, white);
	color: var(--jump-color);
	font-size: .66rem;
}

.tools-jump:hover {
	transform: translateY(-2px);
	background: color-mix(in srgb, var(--jump-color) 5%, white);
	color: var(--jump-color);
}

.tools-jump--blue { --jump-color: #2563eb; }
.tools-jump--teal { --jump-color: #0f766e; }
.tools-jump--indigo { --jump-color: #4f46e5; }
.tools-jump--rose { --jump-color: #e11d48; }
.tools-jump--green { --jump-color: #15803d; }
.tools-jump--violet { --jump-color: #7c3aed; }
.tools-jump--amber { --jump-color: #b45309; }

.tools-result {
	margin-top: .4rem;
	color: #657184;
	font-size: .78rem;
	font-weight: 700;
	text-align: right;
}

.tools-sections {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	margin-top: 1.5rem;
}

.tools-section {
	--section-color: #4f46e5;
	scroll-margin-top: 5.75rem;
}

.tools-section--blue { --section-color: #2563eb; }
.tools-section--teal { --section-color: #0f766e; }
.tools-section--indigo { --section-color: #4f46e5; }
.tools-section--rose { --section-color: #e11d48; }
.tools-section--green { --section-color: #15803d; }
.tools-section--violet { --section-color: #7c3aed; }
.tools-section--amber { --section-color: #b45309; }

.tools-section__head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .85rem;
	margin-bottom: 1rem;
}

.tools-section__icon {
	display: grid;
	width: 2.7rem;
	height: 2.7rem;
	place-items: center;
	border-radius: 12px;
	background: var(--section-color);
	color: #fff;
	box-shadow: 0 4px 0 color-mix(in srgb, var(--section-color) 20%, transparent);
}

.tools-section__head h2 {
	margin: 0;
	color: var(--tools-ink);
	font-size: 1.35rem;
	font-weight: 900;
	line-height: 1.4;
}

.tools-section__head p {
	margin: .2rem 0 0;
	color: var(--tools-muted);
	font-size: .86rem;
	font-weight: 600;
	line-height: 1.55;
}

.tools-section__count {
	padding: .38rem .65rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--section-color) 9%, white);
	color: var(--section-color);
	font-size: .72rem;
	font-weight: 850;
	white-space: nowrap;
}

.tools-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.tools-grid--two-column {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	overflow: hidden;
	border-radius: 15px;
	background: var(--tools-surface);
	box-shadow: 0 4px 8px rgba(30, 41, 59, .11);
	transition: transform .2s cubic-bezier(.25, 1, .5, 1), box-shadow .2s ease;
}

.tool-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 7px 8px rgba(30, 41, 59, .14);
}

.tool-card--featured {
	grid-column: span 2;
	display: grid;
	grid-template-columns: minmax(14rem, 42%) 1fr;
}

.tool-card--featured-full {
	grid-column: 1 / -1;
}

.tool-card__media {
	position: relative;
	min-height: 10.25rem;
	overflow: hidden;
	background: #e2e8f0;
}

.tool-card--featured .tool-card__media {
	min-height: 21rem;
}

.tool-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 23, 42, .02) 45%, rgba(15, 23, 42, .48) 100%);
	pointer-events: none;
}

.tool-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--tool-art-position) center;
	transition: transform .45s cubic-bezier(.25, 1, .5, 1);
}

.tool-card:hover .tool-card__media img {
	transform: scale(1.035);
}

.tool-card__badge,
.tool-card__symbol {
	position: absolute;
	z-index: 1;
}

.tool-card__badge {
	top: .7rem;
	left: .7rem;
	padding: .32rem .58rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	color: var(--section-color);
	font-size: .68rem;
	font-weight: 850;
	box-shadow: 0 2px 5px rgba(15, 23, 42, .12);
}

.tool-card__symbol {
	right: .7rem;
	bottom: .7rem;
	display: grid;
	width: 2.2rem;
	height: 2.2rem;
	place-items: center;
	border-radius: 11px;
	background: var(--section-color);
	color: #fff;
	box-shadow: 0 3px 6px rgba(15, 23, 42, .16);
}

.tool-card__body {
	display: flex;
	min-width: 0;
	flex: 1;
	flex-direction: column;
	padding: 1rem;
}

.tool-card--featured .tool-card__body {
	justify-content: center;
	padding: clamp(1.2rem, 3vw, 2rem);
}

.tool-card__body h3 {
	margin: 0;
	color: var(--tools-ink);
	font-size: 1rem;
	font-weight: 900;
	line-height: 1.45;
	text-wrap: balance;
}

.tool-card--featured .tool-card__body h3 {
	font-size: clamp(1.3rem, 2.3vw, 1.8rem);
}

.tool-card__body p {
	margin: .5rem 0 0;
	color: #596678;
	font-size: .82rem;
	font-weight: 560;
	line-height: 1.65;
	text-wrap: pretty;
}

.tool-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: auto;
	padding-top: 1rem;
}

.tool-action {
	display: inline-flex;
	min-height: 2.45rem;
	align-items: center;
	gap: .5rem;
	padding: .55rem .72rem;
	border-radius: 10px;
	font-size: .73rem;
	font-weight: 850;
	line-height: 1.35;
	transition: transform .16s ease, background-color .16s ease, color .16s ease;
}

.tool-action:hover {
	transform: translateY(-1px);
}

.tool-action--primary {
	background: var(--section-color);
	color: #fff;
}

.tool-action--primary:hover {
	background: color-mix(in srgb, var(--section-color) 88%, black);
	color: #fff;
}

.tool-action--secondary {
	background: color-mix(in srgb, var(--section-color) 8%, white);
	color: var(--section-color);
}

.tool-action--secondary:hover {
	background: color-mix(in srgb, var(--section-color) 14%, white);
}

.tool-action__external {
	font-size: .58rem;
	opacity: .65;
}

.tools-empty {
	margin: 2rem 0 0;
	padding: 3rem 1rem;
	border-radius: 16px;
	background: #fff;
	color: #526075;
	text-align: center;
	box-shadow: 0 4px 8px rgba(30, 41, 59, .09);
}

.tools-empty > span {
	display: grid;
	width: 4rem;
	height: 4rem;
	margin: 0 auto;
	place-items: center;
	border-radius: 50%;
	background: #eef2ff;
	color: #4f46e5;
	font-size: 1.3rem;
}

.tools-empty h2 {
	margin: 1rem 0 .25rem;
	color: #172033;
	font-size: 1.2rem;
	font-weight: 900;
}

.tools-empty p {
	margin: 0;
	font-size: .88rem;
}

.tools-empty button {
	margin-top: 1rem;
	padding: .65rem .9rem;
	border: 0;
	border-radius: 10px;
	background: #4f46e5;
	color: #fff;
	font-size: .8rem;
	font-weight: 850;
	cursor: pointer;
}

.tools-guide {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin-top: 3rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: 16px;
	background: #172554;
	color: #fff;
	box-shadow: 0 6px 0 rgba(30, 58, 138, .15);
}

.tools-guide h2 {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 900;
	line-height: 1.4;
}

.tools-guide p {
	max-width: 65ch;
	margin: .4rem 0 0;
	color: #dbeafe;
	font-size: .85rem;
	line-height: 1.65;
}

.tools-guide__actions {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	gap: .6rem;
}

.tools-guide__actions a {
	display: inline-flex;
	min-height: 2.7rem;
	align-items: center;
	gap: .55rem;
	padding: .65rem .85rem;
	border-radius: 10px;
	background: #fff;
	color: #3730a3;
	font-size: .78rem;
	font-weight: 850;
}

.tools-guide__actions a:last-child {
	background: #fbbf24;
	color: #422006;
}

.tools-shell a:focus-visible,
.tools-shell button:focus-visible,
.tools-shell input:focus-visible {
	outline: 3px solid #38bdf8;
	outline-offset: 3px;
}

[hidden] {
	display: none !important;
}

@media (max-width: 1023px) {
	.tools-hero__copy {
		width: 63%;
		padding: 2.5rem;
	}

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

	.tools-jumps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tool-card--featured {
		grid-column: span 2;
	}

	.tools-guide {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 767px) {
	.tools-shell {
		width: min(100% - 1.25rem, 80rem);
		padding-top: .75rem;
	}

	.tools-hero {
		min-height: auto;
	}

	.tools-hero__art,
	.tools-hero__shade {
		position: relative;
		inset: auto;
		display: block;
	}

	.tools-hero__art {
		height: 14rem;
		object-position: 65% center;
	}

	.tools-hero__shade {
		display: none;
	}

	.tools-hero__copy {
		width: 100%;
		padding: 1.25rem;
		background: #f8fbff;
	}

	.tools-hero h1 {
		max-width: none;
		font-size: 2rem;
		line-height: 1.35;
	}

	.tools-hero__copy > p {
		font-size: .9rem;
	}

	.tools-search {
		min-height: 3rem;
	}

	.tools-result {
		text-align: left;
	}

	.tools-jumps {
		display: flex;
		overflow-x: auto;
		scrollbar-width: thin;
		scrollbar-color: #c7d2fe transparent;
	}

	.tools-jump {
		min-width: max-content;
		flex: none;
	}

	.tools-sections {
		gap: 2.5rem;
	}

	.tools-section__head {
		grid-template-columns: auto 1fr;
	}

	.tools-section__count {
		display: none;
	}

	.tools-section__head h2 {
		font-size: 1.15rem;
	}

	.tools-grid {
		grid-template-columns: 1fr;
	}

	.tool-card--featured {
		grid-column: auto;
		display: flex;
	}

	.tool-card--featured-full {
		grid-column: auto;
	}

	.tool-card--featured .tool-card__media {
		min-height: 13rem;
	}

	.tool-card--featured .tool-card__body {
		padding: 1rem;
	}

	.tool-card--featured .tool-card__body h3 {
		font-size: 1.15rem;
	}

	.tools-guide__actions,
	.tools-guide__actions a {
		width: 100%;
	}

	.tools-guide__actions a {
		justify-content: center;
	}
}

@media (max-width: 420px) {
	.tools-hero__art {
		height: 11.5rem;
	}

	.tools-hero__stats span:last-child {
		display: none;
	}

	.tool-card__media,
	.tool-card--featured .tool-card__media {
		min-height: 11.5rem;
	}

	.tool-action {
		flex: 1 1 auto;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.tools-jump,
	.tool-card,
	.tool-card__media img,
	.tool-action,
	.tools-search {
		transition: none;
	}

	.tools-jump:hover,
	.tool-card:hover,
	.tool-card:hover .tool-card__media img,
	.tool-action:hover {
		transform: none;
	}
}