.snassi-free-tools {
	--sft-purple: #7836aa;
	--sft-purple-dark: #551c87;
	--sft-ink: #101735;
	--sft-muted: #657099;
	--sft-border: #e5e6e9;
	--sft-surface: #fff;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 245px minmax(0, 1fr);
	gap: 24px;
	width: min(1300px, 100%);
	margin: 0 auto;
	padding: 18px 0;
	color: var(--sft-ink);
	font-family: "Open Sans", Arial, sans-serif;
}

.snassi-free-tools *,
.snassi-free-tools *::before,
.snassi-free-tools *::after { box-sizing: inherit; }

.snassi-free-tools__sidebar {
	align-self: start;
	position: sticky;
	top: 110px;
	min-height: 566px;
	padding: 25px 15px 18px;
	background: var(--sft-surface);
	border: 1px solid var(--sft-border);
	border-radius: 14px;
	box-shadow: 0 5px 16px rgba(28, 38, 69, .05);
}

.snassi-free-tools__sidebar h2 {
	margin: 0 8px 22px;
	color: var(--sft-ink);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}

.snassi-free-tools__sidebar ul { margin: 0; padding: 0; list-style: none; }
.snassi-free-tools__sidebar li { margin: 0 0 6px; }

.snassi-free-tools__category {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--sft-ink);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

.snassi-free-tools__category:hover,
.snassi-free-tools__category:focus-visible,
.snassi-free-tools__category.is-active { background: var(--sft-purple); color: #fff; }
.snassi-free-tools__category:focus-visible { outline: 3px solid rgba(113, 49, 155, .3); outline-offset: 2px; }
.snassi-free-tools__category-icon { display: none; }
.snassi-free-tools__category-icon svg { display: block; width: 23px; height: 23px; }
.snassi-free-tools__arrow { font-size: 24px; line-height: 1; text-align: right; }
.snassi-free-tools__category .snassi-free-tools__arrow,
.snassi-free-tools__link span[aria-hidden="true"] { display: none; }

.snassi-free-tools__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	gap: 16px;
}

.snassi-free-tools__card {
	position: relative;
	display: grid;
	grid-template-areas: "icon body body";
	grid-template-columns: 112px minmax(0, 1fr) 136px;
	align-items: center;
	column-gap: 18px;
	min-width: 0;
	height: 154px;
	padding: 18px 20px;
	background: var(--sft-surface);
	border: 1px solid var(--sft-border);
	border-radius: 14px;
	box-shadow: 0 5px 16px rgba(28, 38, 69, .045);
}

.snassi-free-tools__icon {
	grid-area: icon;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 112px;
	height: 112px;
	border-radius: 10px;
	background: #e7f3ff;
	color: var(--sft-purple);
	overflow: hidden;
}

.snassi-free-tools__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.snassi-free-tools__fallback-icon { display: block; width: 48px; height: 48px; }
.snassi-free-tools__fallback-icon--csv,
.snassi-free-tools__fallback-icon--list,
.snassi-free-tools__fallback-icon--utm,
.snassi-free-tools__fallback-icon--word { width: 100px; height: 100px; }
.snassi-free-tools__icon:has(.snassi-free-tools__fallback-icon--list) { background: #eee9ff; color: #735fe8; }
.snassi-free-tools__body { grid-area: body; grid-column: 2 / 4; min-width: 0; align-self: center; }

.snassi-free-tools__body h3 {
	margin: 0 0 6px;
	color: var(--sft-ink);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
}

.snassi-free-tools__body p {
	max-width: none;
	min-height: 40px;
	margin: 0 0 9px;
	color: var(--sft-muted);
	font-size: 15px;
	line-height: 1.35;
}

.snassi-free-tools__badge {
	display: inline-flex;
	align-items: center;
	min-height: 27px;
	padding: 4px 15px;
	border-radius: 999px;
	background: #e9e1ff;
	color: #5e22a2;
	font-size: 13px;
	font-weight: 700;
	line-height: 17px;
}

.snassi-free-tools__card[data-tool-category="marketing"] .snassi-free-tools__icon { background: #e3fbf1; color: #079b73; }
.snassi-free-tools__card[data-tool-category="marketing"] .snassi-free-tools__badge { background: #d8f7eb; color: #07865f; }
.snassi-free-tools__card[data-tool-category="writing"] .snassi-free-tools__icon { background: #e4f3ff; color: #1474dd; }
.snassi-free-tools__card[data-tool-category="writing"] .snassi-free-tools__badge { background: #dceeff; color: #1264c1; }
.snassi-free-tools__card[data-tool-category="other"] .snassi-free-tools__icon { background: #f0ebff; color: var(--sft-purple); }

.snassi-free-tools__link {
	position: absolute;
	right: 20px;
	bottom: 17px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 136px;
	min-height: 38px;
	padding: 7px 12px;
	border: 2px solid var(--sft-purple);
	border-radius: 8px;
	background: #fff;
	color: var(--sft-purple-dark);
	font-size: 14px;
	font-weight: 800;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
}

.snassi-free-tools__link:hover,
.snassi-free-tools__link:focus-visible { background: var(--sft-purple); color: #fff; }
.snassi-free-tools__link:focus-visible { outline: 3px solid rgba(113, 49, 155, .3); outline-offset: 2px; }

.snassi-free-tools__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 32px;
	background: #fff;
	border: 1px solid var(--sft-border);
	border-radius: 14px;
	color: var(--sft-muted);
	text-align: center;
}

.snassi-free-tools [hidden] { display: none !important; }

@media (max-width: 1000px) {
	.snassi-free-tools { grid-template-columns: 220px minmax(0, 1fr); gap: 18px; }
	.snassi-free-tools__grid { gap: 12px; }
	.snassi-free-tools__card { grid-template-areas: "icon body" ". action"; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; height: auto; min-height: 154px; padding: 14px; }
	.snassi-free-tools__body { grid-column: auto; }
	.snassi-free-tools__icon { width: 84px; height: 84px; }
	.snassi-free-tools__link { position: static; grid-area: action; justify-self: start; }
}

@media (min-width: 1001px) and (max-width: 1240px) {
	.snassi-free-tools__card { grid-template-columns: 96px minmax(0, 1fr) 126px; column-gap: 14px; padding: 18px 20px; }
	.snassi-free-tools__icon { width: 96px; height: 96px; }
	.snassi-free-tools__link { width: 126px; padding-right: 8px; padding-left: 8px; }
}

@media (max-width: 1000px) {
	.snassi-free-tools { display: block; width: 86%; padding: 90px 0 24px; }
	.snassi-free-tools__sidebar { display: flex; flex-direction: column; position: static; min-height: 0; margin-bottom: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
	.snassi-free-tools__sidebar:not(.is-open) { padding-bottom: 80px; }
	.snassi-free-tools__sidebar:not(.is-open) { min-height: 133px; }
	.snassi-free-tools__sidebar.is-open { margin-bottom: 22px; }
	.snassi-free-tools__sidebar h2 { margin: 0 0 12px; color: #6257a8; font-size: 0; line-height: 1.2; }
	.snassi-free-tools__sidebar h2::before { content: "Browse category"; font-size: 27px; font-weight: 600; }
	.snassi-free-tools__sidebar h2 { order: 1; }
	.snassi-free-tools__sidebar::before { content: "All tools                                      ⌄"; display: flex; align-items: center; width: 100%; min-height: 89px; padding: 0 38px; border: 2px solid #b48aff; border-radius: 20px; background: #fff; color: #101735; font-size: 31px; line-height: 1; white-space: pre; }
	.snassi-free-tools__sidebar nav { margin-top: 8px; padding: 10px 14px 18px; border: 1px solid #dce0e8; border-radius: 20px; background: #fff; box-shadow: 0 6px 18px rgba(28, 38, 69, .08); }
	.snassi-free-tools__sidebar nav { order: 3; }
	.snassi-free-tools__sidebar ul { display: block; margin: 0; padding: 0; overflow: visible; }
	.snassi-free-tools__sidebar li { margin: 0; }
	.snassi-free-tools__category { grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 58px; padding: 10px 28px; border-radius: 15px; font-size: 27px; font-weight: 400; }
	.snassi-free-tools__category.is-active { background: #f0ecff; color: #5b17d2; font-weight: 700; }
	.snassi-free-tools__category .snassi-free-tools__arrow { font-size: 0; }
	.snassi-free-tools__category.is-active .snassi-free-tools__arrow::after { content: "✓"; font-size: 29px; font-weight: 700; }
	.snassi-free-tools__grid { grid-template-columns: 1fr; gap: 18px; }
	.snassi-free-tools__grid { margin-top: 0; }
	.snassi-free-tools__card { grid-template-areas: "icon body"; grid-template-columns: 184px minmax(0, 1fr); gap: 28px; height: 229px; min-height: 229px; padding: 22px 28px; }
	.snassi-free-tools__body { grid-column: auto; align-self: center; }
	.snassi-free-tools__icon { width: 184px; height: 184px; border-radius: 15px; }
	.snassi-free-tools__body h3 { font-size: 34px; line-height: 1.15; }
	.snassi-free-tools__body p { margin-bottom: 10px; font-size: 26px; line-height: 1.35; }
	.snassi-free-tools__badge { min-height: 49px; padding: 8px 26px; font-size: 20px; line-height: 27px; }
	.snassi-free-tools__link { right: 20px; bottom: 20px; width: 214px; min-height: 60px; padding: 10px 17px; border-radius: 8px; font-size: 24px; line-height: 32px; }
}

@media (max-width: 700px) {
	.snassi-free-tools { width: calc(100% - 32px); padding-top: 42px; }
	.snassi-free-tools__sidebar::before { min-height: 64px; padding: 0 22px; font-size: 23px; }
	.snassi-free-tools__sidebar h2::before { font-size: 22px; }
	.snassi-free-tools__category { grid-template-columns: minmax(0, 1fr); min-height: 48px; padding: 8px 18px; font-size: 21px; }
	.snassi-free-tools__category.is-active .snassi-free-tools__arrow::after { font-size: 23px; }
	.snassi-free-tools__card { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; height: 178px; min-height: 178px; padding: 16px; }
	.snassi-free-tools__icon { width: 120px; height: 120px; border-radius: 12px; }
	.snassi-free-tools__body h3 { font-size: 23px; }
	.snassi-free-tools__body p { font-size: 18px; }
	.snassi-free-tools__badge { min-height: 35px; padding: 5px 16px; font-size: 15px; line-height: 21px; }
	.snassi-free-tools__link { right: 16px; bottom: 16px; width: 164px; min-height: 46px; padding: 7px 10px; font-size: 18px; line-height: 24px; }
}

@media (max-width: 430px) {
	.snassi-free-tools { width: 86%; padding-top: 33px; }
	.snassi-free-tools__sidebar { margin-bottom: 0; }
	.snassi-free-tools__sidebar:not(.is-open) { min-height: 88px; padding-bottom: 80px; }
	.snassi-free-tools__sidebar.is-open { margin-bottom: 18px; }
	.snassi-free-tools__sidebar::before { min-height: 56px; padding: 0 20px; border-radius: 17px; font-size: 20px; }
	.snassi-free-tools__sidebar h2 { margin: 0 0 8px; }
	.snassi-free-tools__sidebar h2::before { font-size: 20px; }
	.snassi-free-tools__sidebar nav { margin-top: 0; padding: 10px 12px 12px; border-radius: 17px; }
	.snassi-free-tools__sidebar ul { display: block; overflow: visible; }
	.snassi-free-tools__category { grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; min-height: 43px; padding: 7px 16px; border-radius: 12px; font-size: 20px; }
	.snassi-free-tools__category.is-active .snassi-free-tools__arrow::after { font-size: 22px; }
	.snassi-free-tools__card { grid-template-areas: "icon body" "icon action"; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 8px 14px; height: auto; min-height: 170px; padding: 12px; }
	.snassi-free-tools__icon { width: 92px; height: 92px; }
	.snassi-free-tools__body { align-self: start; }
	.snassi-free-tools__body h3 { font-size: 19px; }
	.snassi-free-tools__body p { font-size: 15px; }
	.snassi-free-tools__link { position: static; grid-area: action; justify-self: end; width: 140px; min-height: 40px; font-size: 15px; }
}

/* Mobile state spacing: the card list always starts after the complete control. */
@media (max-width: 1000px) {
	.snassi-free-tools__sidebar:not(.is-open) + .snassi-free-tools__grid { margin-top: 0; }
	.snassi-free-tools__sidebar.is-open + .snassi-free-tools__grid { margin-top: 0; }
	.snassi-free-tools__grid { clear: both; }
}

@media (max-width: 1000px) {
	.snassi-free-tools__sidebar { position: relative; }
	.snassi-free-tools__sidebar::before { order: 2; content: "All tools"; cursor: pointer; }
	.snassi-free-tools__sidebar::after { content: "\f078"; position: absolute; top: 66px; right: 38px; color: #551c87; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-size: 25px; font-weight: 900; line-height: 1; pointer-events: none; }
	.snassi-free-tools__sidebar nav { display: none; }
	.snassi-free-tools__sidebar.is-open { padding-bottom: 0 !important; }
	.snassi-free-tools__sidebar.is-open nav { display: block; position: static; height: auto; flex: 0 0 auto; }
	.snassi-free-tools__sidebar.is-open + .snassi-free-tools__grid { margin-top: 20px; }
	.snassi-free-tools__category.is-active .snassi-free-tools__arrow::after { display: none; }
}

@media (max-width: 430px) {
	.snassi-free-tools__sidebar::after { top: 42px; right: 20px; font-size: 17px; }
}

@media (max-width: 1000px) {
	.snassi-free-tools__sidebar.is-open { z-index: 20; min-height: 368px !important; }
	.snassi-free-tools__sidebar.is-open + .snassi-free-tools__grid { position: relative; z-index: 1; margin-top: 20px !important; }
}

@media (max-width: 430px) {
	.snassi-free-tools__sidebar.is-open { min-height: 260px !important; }
}

@media (max-width: 1000px) {
	.snassi-free-tools__sidebar::before { content: attr(data-mobile-category, "All tools"); }
	.snassi-free-tools--drawer-open .snassi-free-tools__sidebar nav { display: block !important; }
	.snassi-free-tools--drawer-open .snassi-free-tools__sidebar { min-height: 368px !important; padding-bottom: 0 !important; }
	.snassi-free-tools--drawer-open .snassi-free-tools__grid { margin-top: 20px !important; padding-top: 0 !important; }
}

@media (max-width: 430px) {
	.snassi-free-tools--drawer-open .snassi-free-tools__sidebar { min-height: 260px !important; }
}

@media (max-width: 1000px) {
	.snassi-free-tools__badge,
	.snassi-free-tools__link { align-self: center; }
	.snassi-free-tools__link span[aria-hidden="true"] { display: none; }
}

@media (max-width: 1000px) {
	.snassi-free-tools__sidebar:not(.is-open) { margin-bottom: 0; padding-bottom: 70px !important; min-height: 0; }
	.snassi-free-tools__grid { padding-top: 20px; }
	.snassi-free-tools__sidebar.is-open + .snassi-free-tools__grid { padding-top: 0; }
}

/* Mobile list view: text-first cards with the category selector as the only visible control. */
@media (max-width: 1000px) {
	.snassi-free-tools { width: 83%; padding-top: 89px; }
	.snassi-free-tools__sidebar { margin-bottom: 62px; padding-bottom: 0; }
	.snassi-free-tools__sidebar.is-open { margin-bottom: 22px; }
	.snassi-free-tools__sidebar h2 { display: none; }
	.snassi-free-tools__sidebar::before { min-height: 100px; padding: 0 38px; border-width: 3px; border-radius: 26px; font-size: 42px; }
	.snassi-free-tools__sidebar::after { top: 37px; right: 42px; font-size: 31px; }
	.snassi-free-tools__sidebar nav { display: none; }
	.snassi-free-tools__sidebar.is-open nav { display: block; }
	.snassi-free-tools__grid { grid-template-columns: 1fr; gap: 42px; padding-top: 0; }
	.snassi-free-tools__card { grid-template-areas: "icon body"; grid-template-columns: 184px minmax(0, 1fr); height: 346px; min-height: 346px; padding: 40px 54px 34px; border-radius: 26px; }
	.snassi-free-tools__icon { display: block; width: 184px; height: 184px; align-self: center; }
	.snassi-free-tools__body { grid-column: auto; align-self: stretch; }
	.snassi-free-tools__body h3 { margin-bottom: 14px; font-size: 44px; line-height: 1.2; }
	.snassi-free-tools__body p { min-height: 0; margin-bottom: 14px; font-size: 34px; line-height: 1.35; }
	.snassi-free-tools__badge { min-height: 62px; padding: 10px 38px; font-size: 28px; line-height: 38px; }
	.snassi-free-tools__link { right: 30px; bottom: 34px; width: 280px; min-height: 94px; padding: 14px 24px; border-width: 3px; border-radius: 17px; font-size: 32px; line-height: 43px; }
}

@media (max-width: 430px) {
	.snassi-free-tools { width: calc(100% - 32px); padding-top: 32px; }
	.snassi-free-tools__sidebar { margin-bottom: 42px; }
	.snassi-free-tools__sidebar.is-open { margin-bottom: 18px; }
	.snassi-free-tools__sidebar::before { min-height: 58px; padding: 0 20px; border-width: 2px; border-radius: 17px; font-size: 21px; }
	.snassi-free-tools__sidebar::after { top: 21px; right: 20px; font-size: 17px; }
	.snassi-free-tools__grid { gap: 18px; }
	.snassi-free-tools__card { grid-template-areas: "icon body"; grid-template-columns: 120px minmax(0, 1fr); height: auto; min-height: 225px; padding: 28px 28px 22px; border-radius: 18px; }
	.snassi-free-tools__icon { display: block; width: 120px; height: 120px; align-self: center; }
	.snassi-free-tools__body { grid-column: 2; width: 100%; }
	.snassi-free-tools__body h3 { margin-bottom: 8px; font-size: 27px !important; }
	.snassi-free-tools__body p { margin-bottom: 10px; font-size: 21px !important; }
	.snassi-free-tools__badge { min-height: 38px; padding: 5px 20px; font-size: 17px; line-height: 24px; }
	.snassi-free-tools__link { right: 18px; bottom: 18px; width: 150px; min-height: 49px; padding: 8px 12px; border-width: 2px; border-radius: 10px; font-size: 17px; line-height: 23px; }
}

@media (max-width: 1000px) {
	.snassi-free-tools__sidebar h2 { height: 32px; overflow: hidden; color: transparent !important; text-indent: -9999px; white-space: nowrap; }
	.snassi-free-tools__sidebar h2::before { display: inline-block; color: #6257a8; text-indent: 0; }
	.snassi-free-tools__grid { padding-top: 80px; }
	.snassi-free-tools__sidebar.is-open + .snassi-free-tools__grid { padding-top: 0; }
}

@media (max-width: 430px) {
	.snassi-free-tools__sidebar h2 { height: 24px; }
}

@media (max-width: 1000px) {
	.snassi-free-tools { margin-top: -120px !important; padding-top: 0 !important; }
	.snassi-free-tools__sidebar:not(.is-open) { padding-bottom: 110px; }
	.snassi-free-tools__sidebar.is-open { padding-bottom: 0; }
	.snassi-free-tools__sidebar.is-open + .snassi-free-tools__grid { padding-top: 0; }
	.snassi-free-tools__grid { padding-top: 74px; }
	.snassi-free-tools__sidebar.is-open + .snassi-free-tools__grid { padding-top: 0; }
	.snassi-free-tools__card { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto 1fr auto; grid-template-areas: "title title" "description description" "badge action"; }
	.snassi-free-tools__body { display: contents; }
	.snassi-free-tools__body h3 { grid-area: title; align-self: start; }
	.snassi-free-tools__body p { grid-area: description; align-self: start; }
	.snassi-free-tools__badge { grid-area: badge; align-self: end; justify-self: start; }
	.snassi-free-tools__link { position: static; grid-area: action; align-self: end; justify-self: end; }
}

@media (max-width: 430px) {
	.snassi-free-tools__card { grid-template-columns: minmax(0, 1fr) 150px; grid-template-rows: auto 1fr auto; grid-template-areas: "title title" "description description" "badge action"; }
}