/* Styles crawlable product pages and the shared feature directory with Tunro’s ivory, forest, and editorial typography. */
@font-face {
	font-family: "Tunro Editorial";
	src: url("/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2")
		format("woff2");
	font-display: swap;
}
@font-face {
	font-family: "Tunro Sans";
	src: url("/assets/fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2")
		format("woff2");
	font-display: swap;
}
.seo-page {
	margin: 0;
	background: #f1ede4;
	color: #273d32;
	font-family: "Tunro Sans", sans-serif;
	font-size: 16px;
	line-height: 1.75;
}
.seo-page *,
.seo-directory *,
.seo-questions *,
.seo-feature-links * {
	box-sizing: border-box;
}
.seo-page a {
	color: inherit;
	text-underline-offset: 5px;
}
.seo-page a:focus-visible,
.seo-directory a:focus-visible,
.seo-feature-links a:focus-visible {
	outline: 2px solid #77845b;
	outline-offset: 6px;
}
.seo-page h1,
.seo-page h2,
.seo-page h3,
.seo-directory h2,
.seo-directory h3,
.seo-questions h2,
.seo-questions h3 {
	font-family: "Tunro Editorial", "Cormorant Garamond", Georgia, serif;
	font-weight: 400;
	line-height: 1.07;
	letter-spacing: -0.035em;
}
.seo-page h1 {
	font-size: clamp(48px, 6.5vw, 96px);
	margin: 24px 0;
}
.seo-page h2,
.seo-directory h2,
.seo-questions h2 {
	font-size: clamp(36px, 4vw, 60px);
	margin: 16px 0 28px;
}
.seo-page p {
	margin: 0 0 24px;
}
.seo-page main {
	max-width: 1600px;
	margin: auto;
}
.seo-skip {
	position: fixed;
	top: 10px;
	left: 10px;
	transform: translateY(-160%);
	z-index: 100;
	padding: 12px 20px;
	background: #fff;
}
.seo-skip:focus {
	transform: none;
}
.seo-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.seo-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 24px clamp(20px, 5vw, 80px);
	border-bottom: 1px solid #273d3225;
}
.seo-brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	letter-spacing: 0.18em;
	text-decoration: none;
	font-size: 18px;
}
.seo-brand img {
	box-sizing: content-box;
}
.seo-header nav {
	display: flex;
	align-items: center;
	gap: 30px;
}
.seo-header nav a {
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.seo-button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: 52px;
	padding: 14px 24px;
	background: #304b3c;
	color: #fff !important;
	border: 1px solid #304b3c;
	border-radius: 7px;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.5;
	transition:
		background 220ms,
		box-shadow 220ms,
		transform 220ms;
}
.seo-button:hover {
	background: #20352a;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px #233e2e24;
}
.seo-eyebrow {
	font:
		11px/1.5 "Tunro Sans",
		sans-serif;
	letter-spacing: 0.2em;
	color: #56674e;
	margin: 0 0 20px;
}
.seo-breadcrumb {
	padding: 30px clamp(20px, 5vw, 80px) 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 12px;
}
.seo-breadcrumb a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.seo-breadcrumb span {
	display: inline-flex;
	align-items: center;
}
.seo-hero {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(30px, 6vw, 100px);
	align-items: center;
	padding: 50px clamp(20px, 5vw, 80px) 90px;
}
.seo-hero-copy > p:not(.seo-eyebrow) {
	max-width: 540px;
	color: #556152;
}
.seo-hero-copy small {
	display: block;
	margin-top: 18px;
	font-size: 11px;
	color: #5d6756;
}
.seo-hero figure {
	margin: 0;
	position: relative;
}
.seo-hero figure::after {
	content: "";
	position: absolute;
	inset: 12px 12px 54px;
	border: 1px solid #fff8;
	border-radius: 120px 4px 4px 4px;
	pointer-events: none;
}
.seo-hero figure img {
	display: block;
	width: 100%;
	height: clamp(350px, 45vw, 650px);
	object-fit: cover;
	border-radius: 140px 6px 6px 6px;
}
.seo-hero figcaption {
	font-size: 10px;
	letter-spacing: 0.12em;
	margin-top: 18px;
	text-align: right;
}
.seo-details {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 70px clamp(20px, 5vw, 80px);
	gap: 45px;
	border-block: 1px solid #273d3225;
}
.seo-details h2 {
	font-size: clamp(30px, 3vw, 42px);
}
.seo-details p {
	font-size: 14px;
	color: #566252;
}
.seo-card-number {
	font:
		11px/1.6 "Tunro Sans",
		sans-serif;
	letter-spacing: 0.12em;
	color: #667357;
}
.seo-workflow {
	padding: 90px clamp(20px, 5vw, 80px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
}
.seo-workflow ol {
	margin: 0;
	padding-left: 28px;
}
.seo-workflow li {
	padding: 22px 0 22px 18px;
	border-bottom: 1px solid #273d3225;
}
.seo-questions {
	padding: 70px clamp(20px, 5vw, 80px);
	background: #e8e5d9;
	color: #273d32;
	font:
		15px/1.8 "Tunro Sans",
		sans-serif;
}
.seo-questions article {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 40px;
	padding: 26px 0;
	border-top: 1px solid #273d3225;
}
.seo-questions h3 {
	font-size: 30px;
	margin: 0;
}
.seo-questions article p {
	margin: 0;
	color: #4e5c4d;
}
.seo-related {
	padding: 70px clamp(20px, 5vw, 80px);
}
.seo-feature-links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 32px;
}
.seo-feature-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	text-decoration: none;
	min-height: 50px;
	padding-block: 12px;
	border-bottom: 1px solid currentColor;
	font-size: 13px;
}
.seo-feature-links a span {
	transition: transform 200ms;
}
.seo-feature-links a:hover span {
	transform: translate(3px, -3px);
}
.seo-closing,
.seo-home-intro {
	padding: 85px clamp(20px, 5vw, 80px);
	max-width: 1100px;
}
.seo-home-intro > p:not(.seo-eyebrow),
.seo-closing > p {
	max-width: 640px;
	color: #566252;
}
.seo-directory {
	padding: 80px clamp(20px, 5vw, 80px);
	background: #f1ede4;
	color: #273d32;
	font:
		15px/1.8 "Tunro Sans",
		sans-serif;
}
.seo-directory-heading {
	max-width: 730px;
	margin-bottom: 45px;
}
.seo-directory-heading > p:not(.seo-eyebrow) {
	color: #566252;
	margin: 0;
}
.seo-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.seo-feature-card {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 3vw, 42px);
	border: 1px solid #273d3228;
	border-radius: 7px;
	background: #fff6;
	text-decoration: none;
	color: #273d32;
	transition:
		transform 280ms,
		background 280ms,
		box-shadow 280ms;
}
.seo-feature-card:hover {
	background: #fffc;
	transform: translateY(-4px);
	box-shadow: 0 16px 35px #273d3210;
}
.seo-feature-card h3 {
	font-size: 34px;
	margin: 30px 0 18px;
}
.seo-feature-card p {
	font-size: 13px;
	color: #566252;
	margin: 0 0 30px;
}
.seo-card-link {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
	margin-top: auto;
}
.seo-footer {
	display: block;
	padding: 60px clamp(20px, 5vw, 80px) 25px;
	background: #273d32;
	color: #f1ede4;
}
.seo-footer-heading {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding-bottom: 24px;
}
.seo-wordmark {
	letter-spacing: 0.18em;
	font-size: 30px;
}
.seo-footer .seo-feature-links {
	padding-bottom: 40px;
}
.seo-policy-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}
.seo-policy-links a {
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.seo-footer .seo-copyright {
	font-size: 10px;
	margin: 28px 0 0;
	opacity: 0.8;
}
.seo-policy {
	padding: 60px clamp(20px, 5vw, 80px) 90px;
	max-width: 1000px !important;
}
.seo-policy h1 {
	font-size: clamp(48px, 6vw, 76px);
}
.seo-policy h2 {
	font-size: 34px;
}
.seo-policy section {
	margin-top: 45px;
	padding-top: 16px;
	border-top: 1px solid #273d3225;
}
.seo-policy section p {
	overflow-wrap: anywhere;
}
@media (max-width: 900px) {
	.seo-hero {
		grid-template-columns: 1fr;
	}
	.seo-hero figure img {
		height: 420px;
	}
	.seo-details,
	.seo-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.seo-details article:last-child {
		grid-column: 1 / -1;
	}
	.seo-feature-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.seo-header {
		padding: 16px;
		gap: 12px;
	}
	.seo-brand {
		gap: 8px;
		font-size: 13px;
	}
	.seo-brand img {
		width: 26px;
		height: 28px;
	}
	.seo-header nav {
		gap: 14px;
		font-size: 12px;
	}
	.seo-header nav > a:first-child {
		display: none;
	}
	.seo-header .seo-button {
		padding: 10px 12px;
		min-height: 44px;
		font-size: 12px;
	}
	.seo-hero,
	.seo-details,
	.seo-workflow,
	.seo-home-intro,
	.seo-directory,
	.seo-questions,
	.seo-related,
	.seo-closing,
	.seo-policy {
		padding: 48px 22px;
	}
	.seo-breadcrumb {
		padding-inline: 22px;
		gap: 8px;
		font-size: 10px;
	}
	.seo-hero {
		padding-top: 24px;
	}
	.seo-hero figure img {
		height: 350px;
		border-top-left-radius: 100px;
	}
	.seo-hero figure::after {
		border-top-left-radius: 90px;
	}
	.seo-details,
	.seo-feature-grid,
	.seo-workflow,
	.seo-questions article {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.seo-details article:last-child {
		grid-column: auto;
	}
	.seo-details article + article {
		border-top: 1px solid #273d3225;
		padding-top: 24px;
	}
	.seo-questions h3 {
		font-size: 27px;
	}
	.seo-feature-links {
		grid-template-columns: 1fr;
	}
	.seo-footer {
		padding: 40px 22px 25px;
	}
	.seo-footer-heading {
		display: block;
	}
	.seo-feature-card h3 {
		margin-top: 22px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.seo-page *,
	.seo-directory *,
	.seo-feature-links * {
		transition: none !important;
		animation: none !important;
	}
}
@media (forced-colors: active) {
	.seo-feature-card,
	.seo-button {
		border: 1px solid ButtonText;
	}
	.seo-button {
		color: ButtonText !important;
	}
}
@media print {
	.seo-header,
	.seo-footer,
	.seo-related,
	.seo-closing,
	.seo-skip {
		display: none;
	}
	.seo-page {
		background: white;
		color: black;
	}
	.seo-hero {
		display: block;
	}
	.seo-hero figure {
		display: none;
	}
	.seo-policy {
		padding: 0;
	}
	.seo-page h1 {
		font-size: 40px;
	}
}