/**
 * Seekde Production Component Styles
 * Derived from approved frontend mock: seekde_frontend_mock.html
 *
 * @package Seekde
 * @since 3.0.0
 */

/* ==========================================================================
   1. Utility Ticker
   ========================================================================== */
.ticker {
	background: #111;
	color: #fff;
	border-bottom: 1px solid #2c2c2c;
	font-size: 13px;
}

.ticker .container {
	display: flex;
	gap: 14px;
	align-items: center;
	min-height: 38px;
	overflow: hidden;
	white-space: nowrap;
}

.ticker strong {
	background: var(--accent);
	color: #122000;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 800;
	flex-shrink: 0;
}

.ticker span {
	opacity: 0.78;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================
   2. Global Header & Navigation
   ========================================================================== */
header.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--line);
}

.header-main {
	min-height: 78px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 28px;
	align-items: center;
}

.brand {
	font-size: 30px;
	font-weight: 950;
	letter-spacing: -0.055em;
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--ink);
}

.brand-mark {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 8px -6px 0 -3px var(--violet);
	display: inline-block;
	flex-shrink: 0;
}

nav.primary {
	justify-self: center;
	display: flex;
	gap: 23px;
	font-size: 14px;
	font-weight: 750;
}

nav.primary ul {
	display: flex;
	gap: 23px;
	list-style: none;
	margin: 0;
	padding: 0;
}

nav.primary a {
	padding: 27px 0;
	position: relative;
	color: var(--ink);
	display: inline-block;
}

nav.primary a:hover::after,
nav.primary a.active::after,
nav.primary .current-menu-item > a::after {
	content: "";
	height: 3px;
	border-radius: 9px;
	background: var(--accent);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.icon-btn,
.menu-btn {
	width: 42px;
	height: 42px;
	border: 1px solid var(--line);
	background: var(--paper);
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--ink);
	padding: 0;
	font-size: 16px;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.icon-btn:hover,
.menu-btn:hover {
	background: var(--soft);
}

.menu-btn {
	display: none;
}

.product-cta,
.subscribe-btn,
.btn {
	border: 0;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 850;
	padding: 11px 17px;
	cursor: pointer;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.subscribe-btn:hover,
.btn:hover {
	opacity: 0.92;
}

.btn.secondary {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
}

.btn.secondary:hover {
	background: var(--soft);
}

.btn.dark {
	background: var(--ink);
	color: var(--bg);
}

/* Mobile Drawer */
.mobile-drawer {
	display: none;
	border-top: 1px solid var(--line);
	padding: 14px 18px 22px;
	background: var(--paper);
}

.mobile-drawer.open {
	display: grid;
	gap: 6px;
}

.mobile-drawer a {
	padding: 12px 2px;
	font-weight: 800;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
}

@media (max-width: 1000px) {
	.no-js .mobile-drawer {
		display: grid;
		gap: 6px;
	}

	.no-js .menu-btn {
		display: none;
	}
}

@media (min-width: 1001px) {
	.mobile-drawer {
		display: none !important;
	}
}

/* ==========================================================================
   3. Homepage Structure & Hero Section
   ========================================================================== */
main {
	min-height: 70vh;
}

.eyebrow {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 8px;
}

.eyebrow::before {
	content: "";
	width: 24px;
	height: 3px;
	background: var(--accent);
	display: inline-block;
}

.hero {
	padding: 46px 0 30px;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.55fr 0.85fr;
	gap: 22px;
}

.hero-main {
	background: #171c17;
	color: #fff;
	min-height: 530px;
	border-radius: 26px;
	padding: 42px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow);
}

.hero-main > * {
	position: relative;
	z-index: 1;
}

.hero-main h1 {
	font: 700 clamp(36px, 4.6vw, 60px) / 1.06 var(--serif);
	letter-spacing: -0.065em;
	margin: 14px 0 18px;
	max-width: 900px;
}

.hero-main h1 a {
	color: #fff;
}

.hero-main h1 a:hover {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.hero-main p {
	max-width: 700px;
	color: #d7d7d3;
	font-size: 18px;
	margin: 0 0 23px;
	line-height: 1.5;
}

.hero-meta {
	display: flex;
	gap: 16px;
	align-items: center;
	font-size: 13px;
	color: #c6c6c0;
	flex-wrap: wrap;
}

.side-stack {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 22px;
}

.feature-card {
	border: 1px solid var(--line);
	background: var(--paper);
	border-radius: 24px;
	padding: 27px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 254px;
	box-shadow: var(--shadow);
}

.feature-card.gradient {
	background: var(--soft);
}

.feature-card h2 {
	font: 700 31px / 1.02 var(--serif);
	letter-spacing: -0.04em;
	margin: 16px 0 10px;
}

.feature-card h2 a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.feature-card p {
	color: var(--muted);
	font-size: 14px;
	margin: 0;
	line-height: 1.45;
}

.topic-pill {
	align-self: flex-start;
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 4px 9px;
	font-size: 11px;
	font-weight: 850;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ==========================================================================
   4. The Seekde Brief Strip
   ========================================================================== */
.newsletter-strip {
	margin: 28px 0 56px;
	background: var(--accent);
	color: #132000;
	border-radius: 20px;
	padding: 24px 28px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 25px;
	align-items: center;
}

.newsletter-strip h3 {
	font: 700 28px / 1.1 var(--serif);
	margin: 0 0 5px;
}

.newsletter-strip p {
	margin: 0;
	opacity: 0.75;
}

.inline-form {
	display: flex;
	gap: 8px;
	min-width: min(430px, 100%);
}

.inline-form input {
	flex: 1;
	border: 0;
	background: #fff;
	border-radius: 999px;
	padding: 12px 16px;
	color: #111;
	outline: none;
}

.inline-form button {
	border: 0;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-weight: 850;
	padding: 12px 18px;
	cursor: pointer;
	white-space: nowrap;
}

/* ==========================================================================
   5. Content Sections & Story Grids
   ========================================================================== */
.section {
	padding: 22px 0 65px;
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 14px;
	margin-bottom: 28px;
	gap: 28px;
	width: 100%;
}

.section-head .eyebrow {
	flex: 0 0 auto;
	white-space: nowrap;
	margin: 0;
	padding-bottom: 4px;
}

.section-head h2 {
	flex: 1 1 auto;
	margin: 0;
	font: 700 clamp(34px, 3.6vw, 48px) / 1.08 var(--serif);
	letter-spacing: -0.04em;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

.section-head p {
	flex: 0 1 420px;
	margin: 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--muted);
	padding-bottom: 4px;
	word-break: normal;
	overflow-wrap: normal;
}

.section-head a {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 850;
	color: var(--ink);
	white-space: nowrap;
	padding-bottom: 4px;
	text-decoration: none;
}

.section-head a:hover {
	text-decoration: underline;
}

.story-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.story-grid.four {
	grid-template-columns: repeat(4, 1fr);
}

.story-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.story-thumb {
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	background: var(--soft);
	display: block;
}

.story-thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	display: block;
}

.story-card h3 {
	font: 700 25px / 1.08 var(--serif);
	letter-spacing: -0.03em;
	margin: 0;
}

.story-card h3 a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.story-excerpt {
	font-size: 14px;
	color: var(--muted);
	margin: 0;
	line-height: 1.45;
}

.story-meta {
	font-size: 12px;
	color: var(--muted);
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ==========================================================================
   6. Split Feature (SEO Intelligence Callout)
   ========================================================================== */
.split-feature {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 35px 0;
	gap: 35px;
}

.split-visual {
	min-height: 420px;
	border-radius: 22px;
	background: linear-gradient(135deg, #181b19, #4a4e84);
	position: relative;
	overflow: hidden;
}

.split-visual::before {
	content: "SEO";
	font: 900 160px / 1 var(--sans);
	position: absolute;
	bottom: -10px;
	left: 18px;
	color: rgba(255, 255, 255, 0.08);
}

.split-visual::after {
	content: "↗";
	font-size: 140px;
	position: absolute;
	right: 32px;
	top: 24px;
	color: var(--accent);
}

.split-copy {
	align-self: center;
}

.split-copy h3 {
	font: 700 clamp(36px, 5vw, 66px) / 0.98 var(--serif);
	letter-spacing: -0.055em;
	margin: 14px 0 20px;
}

.split-copy p {
	color: var(--muted);
	font-size: 17px;
	line-height: 1.55;
	margin: 0 0 24px;
}

/* ==========================================================================
   7. Quick List (Fresh Analysis Numbered Grid)
   ========================================================================== */
.quick-list {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--line);
}

.quick-item {
	display: grid;
	grid-template-columns: 70px 1fr auto;
	gap: 18px;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
	align-items: center;
	color: var(--ink);
}

.quick-item:hover h4 {
	text-decoration: underline;
}

.quick-item .num {
	font: 700 34px / 1 var(--serif);
	color: var(--muted);
}

.quick-item h4 {
	margin: 0;
	font: 700 22px / 1.15 var(--serif);
}

.quick-item .arrow {
	font-size: 22px;
	color: var(--ink);
}

/* ==========================================================================
   8. Category & Archive Hero Headers
   ========================================================================== */
.page-hero {
	padding: 64px 0 35px;
	border-bottom: 1px solid var(--line);
}

.page-hero h1 {
	font: 700 clamp(56px, 8vw, 104px) / 0.88 var(--serif);
	letter-spacing: -0.07em;
	margin: 15px 0 22px;
	max-width: 1020px;
}

.page-hero p,
.page-hero .category-description {
	font-size: 20px;
	color: var(--muted);
	max-width: 760px;
	margin: 0;
	line-height: 1.5;
}

.category-intro {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 50px;
	padding: 30px 0 55px;
}

.category-intro .stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.stat {
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 18px;
	background: var(--paper);
}

.stat strong {
	display: block;
	font: 700 34px / 1 var(--serif);
}

.stat span {
	font-size: 12px;
	color: var(--muted);
}

/* ==========================================================================
   9. Standard Single Article Layout & Typography
   ========================================================================== */
.article-head {
	padding: 60px 0 35px;
	max-width: 960px;
	margin: auto;
	text-align: center;
}

.article-head .eyebrow {
	justify-content: center;
}

.article-head h1 {
	font: 700 clamp(34px, 4.8vw, 62px) / 1.08 var(--serif);
	letter-spacing: -0.06em;
	margin: 18px 0;
}

.article-head .dek {
	font-size: 21px;
	color: var(--muted);
	max-width: 790px;
	margin: 0 auto 22px;
	line-height: 1.5;
}

.byline {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--muted);
	flex-wrap: wrap;
}

.avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--soft);
	color: #fff;
	font-weight: 900;
	object-fit: cover;
	flex-shrink: 0;
}

.article-hero-image {
	width: min(calc(100% - 48px), 1075px);
	margin: 28px auto 0;
	border-radius: 10px;
	background: var(--paper);
	position: relative;
	overflow: hidden;
}

.article-hero-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}

.hero-image-caption {
	font-size: 13px;
	color: var(--muted, #64748b);
	font-family: var(--sans);
	margin-top: 8px;
	text-align: center;
	line-height: 1.4;
}

.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 760px) 260px;
	gap: 55px;
	justify-content: center;
	padding: 52px 0 80px;
}

.article-body-wrapper {
	min-width: 0;
}

.article-body {
	font: 400 18px / 1.78 var(--serif);
	color: var(--ink);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.article-body p {
	margin: 0 0 1.35em;
}

.article-body h2 {
	font: 700 38px / 1.08 var(--serif);
	letter-spacing: -0.035em;
	margin: 1.6em 0 0.55em;
}

.article-body h3 {
	font: 700 27px / 1.15 var(--serif);
	margin: 1.4em 0 0.5em;
}

.article-body h4 {
	font: 700 22px / 1.2 var(--serif);
	margin: 1.2em 0 0.4em;
}

.article-body a {
	background: linear-gradient(transparent 72%, color-mix(in srgb, var(--accent) 68%, transparent) 0);
	color: inherit;
}

.article-body ul,
.article-body ol {
	padding-left: 1.25em;
	margin: 0 0 1.35em;
}

.article-body li {
	margin-bottom: 0.4em;
}

.answer-box {
	font-family: var(--sans);
	background: var(--paper);
	border: 1px solid var(--line);
	border-left: 5px solid var(--accent);
	padding: 20px;
	border-radius: 0 14px 14px 0;
	margin: 25px 0;
	font-size: 16px;
	line-height: 1.55;
}

.answer-box strong {
	display: block;
	margin-bottom: 6px;
	font-size: 17px;
}

.fact-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin: 26px 0;
	font-family: var(--sans);
}

.fact-grid div {
	background: var(--soft);
	border-radius: 12px;
	padding: 15px;
	font-size: 14px;
	line-height: 1.45;
}

.article-body table,
.prose table {
	border-collapse: collapse;
	width: 100%;
	font-family: var(--sans);
	font-size: 14px;
	margin: 28px 0;
	max-width: 100%;
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.article-body th,
.article-body td,
.prose th,
.prose td {
	border-bottom: 1px solid var(--line);
	padding: 13px;
	text-align: left;
	vertical-align: top;
}

.article-body th,
.prose th {
	background: var(--soft);
	font-weight: 700;
}

blockquote {
	border-left: 3px solid var(--violet);
	margin: 30px 0;
	padding: 4px 0 4px 23px;
	font: italic 26px / 1.45 var(--serif);
	color: var(--ink);
}

.article-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.88em;
	background: var(--soft);
	padding: 2px 6px;
	border-radius: 4px;
}

.article-body pre,
.prose pre {
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 18px;
	border-radius: 12px;
	overflow-x: auto;
	max-width: 100%;
	box-sizing: border-box;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 14px;
	line-height: 1.5;
	margin: 24px 0;
}

.article-body figure {
	margin: 28px 0;
}

.article-body figcaption {
	font-size: 13px;
	color: var(--muted);
	font-family: var(--sans);
	margin-top: 8px;
	text-align: center;
}

/* Table of Contents (TOC) */
.toc {
	position: sticky;
	top: 110px;
	align-self: start;
	border-top: 2px solid var(--ink);
	padding-top: 14px;
	font-size: 13px;
	font-family: var(--sans);
}

.toc strong {
	display: block;
	margin-bottom: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 12px;
}

.toc a {
	display: block;
	padding: 7px 0;
	color: var(--muted);
	transition: color 0.15s ease;
	line-height: 1.35;
}

.toc a:hover,
.toc a:focus {
	color: var(--ink);
	text-decoration: underline;
}

.toc a.toc-sub-item {
	padding-left: 12px;
	font-size: 12px;
	opacity: 0.9;
}

/* Share Row */
.share-row {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 18px 0;
	margin-top: 40px;
	display: flex;
	justify-content: space-between;
	gap: 18px;
	align-items: center;
	font-family: var(--sans);
	font-size: 13px;
	flex-wrap: wrap;
}

.share-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* Author Box */
.author-box {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 24px;
	margin-top: 35px;
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 18px;
	font-family: var(--sans);
	align-items: center;
}

.author-box .avatar {
	width: 72px;
	height: 72px;
	font-size: 22px;
}

.author-box h4 {
	font: 700 25px / 1 var(--serif);
	margin: 0 0 7px;
}

.author-box h4 a:hover {
	text-decoration: underline;
}

.author-box p {
	font-size: 14px;
	color: var(--muted);
	margin: 0;
	line-height: 1.45;
}

/* ==========================================================================
   10. Author Archive & Profile
   ========================================================================== */
.author-profile {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 45px;
	padding: 58px 0;
	align-items: center;
}

.author-photo {
	aspect-ratio: 1;
	border-radius: 28px;
	background: var(--soft);
	display: grid;
	place-items: center;
	color: white;
	font: 900 80px / 1 var(--serif);
	width: 100%;
	max-width: 220px;
	overflow: hidden;
}

.author-photo.has-avatar-img {
	background: none;
}

.author-photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 28px;
}

.author-details {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.author-profile h1 {
	font: 700 clamp(48px, 6vw, 66px) / 1 var(--serif);
	letter-spacing: -0.05em;
	margin: 0 0 14px;
}

.author-profile p {
	color: var(--muted);
	font-size: 18px;
	line-height: 1.5;
	margin: 0 0 16px;
	max-width: 720px;
}

/* ==========================================================================
   11. Search Results Template
   ========================================================================== */
.search-page {
	padding: 58px 0 80px;
}

.search-page h1 {
	font: 700 clamp(48px, 6vw, 70px) / 1 var(--serif);
	letter-spacing: -0.05em;
	margin: 0 0 20px;
}

.search-box-page {
	display: flex;
	max-width: 760px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	overflow: hidden;
	background: var(--paper);
	margin-bottom: 35px;
}

.search-box-page input {
	flex: 1;
	border: 0;
	background: transparent;
	color: var(--ink);
	padding: 15px 20px;
	outline: none;
	font-size: 16px;
}

.search-box-page button {
	border: 0;
	background: var(--ink);
	color: var(--bg);
	padding: 0 24px;
	font-weight: 850;
	cursor: pointer;
}

.search-results-summary {
	margin-bottom: 24px;
	font-size: 18px;
	color: var(--muted);
}

.search-results-list {
	display: grid;
	gap: 0;
}

.search-result {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 24px;
	padding: 22px 0;
	border-top: 1px solid var(--line);
	max-width: 900px;
	align-items: start;
}

.search-result.no-thumbnail {
	grid-template-columns: 1fr;
}

.search-result-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 8px;
	overflow: hidden;
	background: var(--paper-hover, rgba(0, 0, 0, 0.04));
	flex-shrink: 0;
	border: 1px solid var(--line);
}

.search-result-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 7px;
	transition: transform 160ms ease;
}

.search-result:hover .search-result-thumb img {
	transform: scale(1.02);
}

.search-result .mini {
	display: none;
}

.search-result h3 {
	font: 700 27px / 1.1 var(--serif);
	margin: 4px 0 8px;
}

.search-result h3 a:hover {
	text-decoration: underline;
}

.search-result p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.45;
}

/* ==========================================================================
   12. 404 Not Found Template
   ========================================================================== */
.not-found {
	min-height: 62vh;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 50px 18px;
}

.not-found strong {
	display: block;
	font: 900 clamp(100px, 15vw, 180px) / 0.7 var(--sans);
	letter-spacing: -0.1em;
	color: color-mix(in srgb, var(--ink) 15%, transparent);
	margin-bottom: 15px;
}

.not-found h1 {
	font: 700 clamp(36px, 5vw, 50px) / 1 var(--serif);
	margin: 0 0 12px;
}

.not-found p {
	color: var(--muted);
	font-size: 18px;
	margin: 0 0 24px;
}

.not-found-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ==========================================================================
   13. Pagination & Empty State Cards
   ========================================================================== */
.pagination {
	padding: 45px 0 20px;
	display: flex;
	justify-content: center;
}

.nav-links {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-family: var(--sans);
	font-weight: 750;
	font-size: 14px;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.page-numbers:hover,
.page-numbers:focus {
	background: var(--soft);
	border-color: var(--ink);
}

.page-numbers.current {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}

.page-numbers.dots {
	border: 0;
	background: transparent;
	min-width: 24px;
}

.empty-state-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 42px;
	text-align: center;
	max-width: 680px;
	margin: 40px auto 60px;
	box-shadow: var(--shadow);
}

.empty-state-card h3 {
	font: 700 32px / 1.1 var(--serif);
	margin: 0 0 12px;
}

.empty-state-card p {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 24px;
}

/* ==========================================================================
   14. Global Footer
   ========================================================================== */
footer {
	background: #0c0d0c;
	color: #e9e9e1;
	margin-top: 50px;
}

.footer-top {
	padding: 55px 0 35px;
	display: grid;
	grid-template-columns: 1.25fr repeat(3, 0.75fr);
	gap: 45px;
}

.footer-brand .brand {
	font-size: 36px;
	margin-bottom: 15px;
	color: #fff;
}

.footer-brand p {
	color: #9da097;
	max-width: 420px;
	line-height: 1.55;
	margin: 0;
}

.footer-col h4 {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8e9288;
	margin: 0 0 15px;
}

.footer-col a {
	display: block;
	padding: 6px 0;
	font-size: 14px;
	color: #d8d9d3;
}

.footer-col a:hover {
	color: #fff;
	text-decoration: underline;
}

.footer-bottom {
	border-top: 1px solid #292c27;
	padding: 18px 0 26px;
	color: #81857d;
	font-size: 12px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.footer-bottom a {
	color: inherit;
}

.footer-bottom a:hover {
	color: #d8d9d3;
}

/* ==========================================================================
   15. Search Overlay
   ========================================================================== */
.search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(8, 9, 8, 0.88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 100;
	display: none;
	padding: 9vh 18px;
	overflow: auto;
}

.search-overlay.open {
	display: block;
}

.search-panel {
	max-width: 850px;
	margin: auto;
	background: var(--paper);
	color: var(--ink);
	border-radius: 24px;
	padding: 28px;
	box-shadow: 0 30px 100px rgba(0, 0, 0, 0.4);
}

.search-panel-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.search-panel h2 {
	font: 700 42px / 1 var(--serif);
	margin: 0;
}

.overlay-input {
	width: 100%;
	border: 0;
	border-bottom: 2px solid var(--ink);
	background: transparent;
	color: var(--ink);
	padding: 18px 0;
	font-size: 24px;
	outline: none;
	margin: 15px 0 20px;
}

.overlay-input:focus {
	border-bottom-color: var(--violet);
}

.overlay-results {
	display: grid;
	gap: 7px;
}

.overlay-result {
	padding: 14px;
	border-radius: 12px;
	background: var(--bg);
	display: flex;
	justify-content: space-between;
	gap: 20px;
	cursor: pointer;
	color: var(--ink);
}

.overlay-result strong {
	display: block;
}

.overlay-result span {
	font-size: 12px;
	color: var(--muted);
}

/* Toast notification */
.toast {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 200;
	background: #111;
	color: #fff;
	border: 1px solid #353535;
	border-radius: 12px;
	padding: 13px 16px;
	box-shadow: var(--shadow);
	display: none;
	max-width: 340px;
	font-size: 13px;
}

.toast.show {
	display: block;
	animation: fade 0.2s ease;
}

@keyframes fade {
	from {
		opacity: 0.2;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   15B. Product Homepage & Interactive Demo
   ========================================================================== */
.product-hero {
	padding: 80px 0 42px;
	position: relative;
	overflow: hidden;
}

.hero-center {
	text-align: center;
	position: relative;
	z-index: 1;
}

.hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	background: var(--paper);
	border: 1px solid var(--line);
	font-size: 12px;
	font-weight: 850;
	box-shadow: var(--shadow);
}

.hero-kicker .dot {
	width: 8px;
	height: 8px;
	background: var(--accent);
	border-radius: 50%;
}

.product-hero h1 {
	font: 700 clamp(52px, 7vw, 88px) / 0.93 var(--serif);
	letter-spacing: -0.065em;
	max-width: 980px;
	margin: 26px auto 18px;
}

.hero-sub {
	font-size: 18px;
	color: var(--muted);
	max-width: 760px;
	margin: 0 auto;
	line-height: 1.75;
}

.product-search {
	max-width: 900px;
	margin: 34px auto 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 10px;
	display: flex;
	gap: 10px;
	box-shadow: var(--shadow);
}

.product-search input {
	border: 0;
	background: transparent;
	outline: none;
	flex: 1;
	min-width: 0;
	padding: 16px 18px;
	font-size: 17px;
	color: var(--ink);
}

.product-search button {
	border: 0;
	border-radius: 14px;
	background: var(--ink);
	color: var(--bg);
	font-weight: 900;
	padding: 0 22px;
	cursor: pointer;
}

.examples {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 15px;
}

.chip {
	border: 1px solid var(--line);
	background: var(--paper);
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 750;
	cursor: pointer;
	color: var(--ink);
}

.chip:hover {
	background: var(--soft);
}

.mocknote {
	margin-top: 13px;
	color: var(--muted);
	font-size: 11px;
}

.loader {
	display: none;
	max-width: 900px;
	margin: 20px auto 0;
	padding: 18px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 16px;
}

.loader.active {
	display: flex;
	align-items: center;
	gap: 12px;
}

.spinner {
	width: 18px;
	height: 18px;
	border: 3px solid var(--line);
	border-top-color: var(--violet);
	border-radius: 50%;
	animation: spin 0.75s linear infinite;
	flex-shrink: 0;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.product-stage {
	display: none;
	padding: 18px 0 74px;
}

.product-stage.active {
	display: block;
}

.queryline {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: flex-end;
	margin-bottom: 16px;
}

.queryline h2 {
	font: 700 34px / 1.05 var(--serif);
	letter-spacing: -0.04em;
	margin: 2px 0;
}

.intent-badge {
	padding: 8px 11px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 42%, var(--paper));
	font-size: 12px;
	font-weight: 900;
}

.product-grid {
	display: grid;
	grid-template-columns: 1.45fr 0.75fr;
	gap: 18px;
}

.card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	box-shadow: 0 10px 35px rgba(17, 18, 15, 0.04);
}

.card h3 {
	margin: 0 0 10px;
}

.answer {
	font: 400 18px / 1.75 var(--serif);
}

.meta-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.pill {
	padding: 7px 10px;
	border-radius: 999px;
	background: var(--soft);
	font-size: 11px;
	font-weight: 900;
}

.section-title {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin: 28px 0 12px;
}

.section-title h3 {
	margin: 0;
	font: 700 22px / 1.1 var(--serif);
}

.topics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.topic,
.side-item,
.source {
	border: 1px solid var(--line);
	background: var(--paper);
	border-radius: 14px;
	padding: 14px;
}

.topic {
	text-align: left;
	cursor: pointer;
	color: var(--ink);
}

.topic:hover,
.side-item:hover {
	background: var(--soft);
}

.topic strong,
.side-item b {
	display: block;
	margin-bottom: 4px;
}

.topic span,
.side-item p,
.source p {
	font-size: 12px;
	color: var(--muted);
	margin: 0;
	line-height: 1.5;
}

.side-list,
.source-list {
	display: grid;
	gap: 10px;
}

.source {
	display: flex;
	gap: 12px;
}

.source-num {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 9px;
	background: var(--soft);
	display: grid;
	place-items: center;
	font-weight: 900;
	font-size: 12px;
}

.source-link {
	border: 0;
	background: transparent;
	color: var(--violet);
	font-weight: 900;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.product-section {
	padding: 70px 0;
}

.product-section .section-head {
	margin-bottom: 28px;
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.feature-card {
	padding: 24px;
	border: 1px solid var(--line);
	background: var(--paper);
	border-radius: 18px;
}

.feature-card .num {
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: var(--soft);
	display: grid;
	place-items: center;
	color: var(--violet);
	font-weight: 950;
	margin-bottom: 18px;
}

.feature-card p {
	color: var(--muted);
	font-size: 14px;
}

.compare {
	overflow-x: auto;
}

.compare table {
	width: 100%;
	border-collapse: collapse;
	min-width: 680px;
}

.compare th,
.compare td {
	text-align: left;
	padding: 15px;
	border-bottom: 1px solid var(--line);
}

.compare th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.compare td:last-child {
	font-weight: 800;
}

.blog-bridge {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 28px;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 22px;
	align-items: center;
}

.blog-bridge h2,
.blog-bridge__heading {
	font-family: var(--serif);
	font-size: clamp(28px, 4.5vw, 48px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.04em;
	margin: 10px 0;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

.final-cta {
	background: var(--ink);
	color: var(--bg);
	border-radius: 28px;
	padding: 48px;
	text-align: center;
}

.final-cta .eyebrow {
	justify-content: center;
	margin: 0 auto 12px;
}

.final-cta h2 {
	font: 700 clamp(30px, 5vw, 52px) / 1.12 var(--serif);
	letter-spacing: -0.04em;
	margin: 0 0 12px;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

.final-cta p {
	color: color-mix(in srgb, var(--bg) 72%, transparent);
	margin-bottom: 20px;
	word-break: normal;
	overflow-wrap: normal;
}

/* ==========================================================================
   15C. Institutional Pages & Content Presentation
   ========================================================================== */
.content-page {
	display: grid;
	grid-template-columns: minmax(0, 760px) 310px;
	gap: 50px;
	padding-bottom: 70px;
	min-width: 0;
	max-width: 100%;
}

.prose {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
}

.aside-card {
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 22px;
	background: var(--paper);
	align-self: start;
	position: sticky;
	top: 110px;
}

.aside-card h3 {
	margin-top: 8px;
}

.checklist {
	padding-left: 20px;
}

.checklist li {
	margin: 8px 0;
}

.form-card {
	border: 1px solid var(--line);
	background: var(--paper);
	border-radius: 18px;
	padding: 22px;
}

.field {
	display: grid;
	gap: 6px;
	margin-bottom: 14px;
}

.field label {
	font-size: 12px;
	font-weight: 850;
}

.field input,
.field textarea,
.field select {
	width: 100%;
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink);
	border-radius: 12px;
	padding: 12px;
}

.field textarea {
	min-height: 120px;
}

/* ==========================================================================
   16. Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1000px) {
	.header-main {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-actions {
		margin-left: auto;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	nav.primary {
		display: none;
	}

	.menu-btn {
		display: grid;
	}

	.product-cta,
	.subscribe-btn {
		display: none;
	}

	.product-grid,
	.hero-grid,
	.category-intro,
	.content-page,
	.blog-bridge {
		grid-template-columns: 1fr;
	}

	.side-stack {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}

	.story-grid.four {
		grid-template-columns: repeat(2, 1fr);
	}

	.article-layout {
		grid-template-columns: minmax(0, 760px);
	}

	.toc {
		position: static;
		order: -1;
		border: 1px solid var(--line);
		border-radius: 14px;
		padding: 16px;
		margin-bottom: 24px;
	}

	.category-intro {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.footer-top {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.section-head {
		display: grid;
		grid-template-columns: minmax(130px, 170px) 1fr;
		column-gap: 24px;
		row-gap: 8px;
		align-items: start;
		border-bottom: 2px solid var(--ink);
		padding-bottom: 16px;
		margin-bottom: 24px;
	}

	.section-head .eyebrow {
		grid-column: 1;
		grid-row: 1 / span 2;
		white-space: normal;
		margin-top: 6px;
		padding-bottom: 0;
	}

	.section-head h2 {
		grid-column: 2;
		grid-row: 1;
		font-size: clamp(28px, 3.5vw, 38px);
		line-height: 1.15;
		margin: 0;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
	}

	.section-head p {
		grid-column: 2;
		grid-row: 2;
		font-size: 15px;
		line-height: 1.58;
		color: var(--muted);
		max-width: 60ch;
		margin: 0;
		padding-bottom: 0;
		word-break: normal;
		overflow-wrap: normal;
	}

	.section-head a {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
		margin-top: 4px;
		padding-bottom: 0;
	}

	.section-head > div:first-child {
		grid-column: 1;
	}

	.section-head > a:last-child {
		grid-column: 2;
		justify-self: end;
		align-self: center;
	}
}

@media (max-width: 768px) {
	.section-head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 12px;
		border-bottom: 2px solid var(--ink);
		padding-bottom: 16px;
		margin-bottom: 20px;
		width: 100%;
	}

	.section-head .eyebrow {
		display: flex;
		align-items: center;
		gap: 8px;
		width: auto;
		max-width: 100%;
		white-space: normal;
		word-break: normal;
		overflow-wrap: normal;
		margin: 0;
		padding-bottom: 0;
		flex-shrink: 0;
	}

	.section-head h2 {
		width: 100%;
		margin: 0;
		font-family: var(--serif);
		font-size: clamp(24px, 6.8vw, 34px);
		font-weight: 700;
		line-height: 1.16;
		letter-spacing: -0.035em;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
	}

	.section-head p {
		width: 100%;
		margin: 0;
		font-size: 15px;
		line-height: 1.6;
		color: var(--muted);
		word-break: normal;
		overflow-wrap: normal;
		padding-bottom: 0;
	}

	.section-head a {
		margin-top: 4px;
		font-size: 13.5px;
		padding-bottom: 0;
	}

	.section-head > div:first-child {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.blog-bridge {
		padding: 24px 18px;
	}

	.final-cta {
		padding: 32px 18px;
	}

	.final-cta h2 {
		font-size: clamp(26px, 6.5vw, 44px);
		line-height: 1.15;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
	}
}

@media (max-width: 720px) {
	.container {
		width: min(calc(100% - 24px), var(--max));
	}

	.header-main {
		min-height: 66px;
		gap: 12px;
	}

	.brand {
		font-size: 26px;
	}

	.product-hero {
		padding-top: 46px;
	}

	.product-search {
		flex-direction: column;
	}

	.product-search button {
		height: 52px;
	}

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

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

	.feature-grid,
	.story-grid,
	.story-grid.four,
	.related-grid {
		grid-template-columns: 1fr;
	}

	.final-cta {
		padding: 30px 18px;
	}

	.final-cta h2 {
		font-size: 38px;
	}

	.hero {
		padding-top: 22px;
	}

	.hero-main {
		min-height: 475px;
		padding: 25px;
	}

	.hero-main h1 {
		font-size: clamp(32px, 7.2vw, 46px);
	}

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

	.newsletter-strip {
		grid-template-columns: 1fr;
		padding: 22px;
	}

	.inline-form {
		min-width: 0;
		flex-direction: column;
	}

	.inline-form button {
		padding: 12px;
	}

	.split-feature {
		grid-template-columns: 1fr;
	}

	.split-visual {
		min-height: 300px;
	}

	.quick-item {
		grid-template-columns: 48px 1fr auto;
	}

	.page-hero {
		padding-top: 42px;
	}

	.page-hero h1 {
		font-size: 58px;
	}

	.article-head {
		padding: 42px 18px 28px;
	}

	.article-head h1 {
		font-size: clamp(32px, 7.5vw, 46px);
	}

	.article-head .dek {
		font-size: 18px;
	}

	.article-hero-image {
		width: calc(100% - 36px);
		margin-top: 20px;
		border-radius: 10px;
	}

	.article-layout {
		padding-top: 30px;
		gap: 25px;
	}

	.article-body {
		font-size: 17px;
	}

	.article-body h2 {
		font-size: 33px;
	}

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

	.author-profile {
		grid-template-columns: 1fr;
		padding: 35px 0;
		gap: 24px;
	}

	.author-photo {
		max-width: 160px;
		aspect-ratio: 1;
		font-size: 56px;
	}

	.author-profile h1 {
		font-size: 50px;
	}

	.author-box {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.author-box .avatar {
		margin: 0 auto;
	}

	.search-result {
		grid-template-columns: 110px 1fr;
		gap: 16px;
	}

	.search-result.no-thumbnail {
		grid-template-columns: 1fr;
	}

	.search-result-thumb {
		border-radius: 6px;
	}

	.search-result-thumb img {
		border-radius: 5px;
	}

	.search-page h1 {
		font-size: 52px;
	}

	.footer-top {
		grid-template-columns: 1fr;
	}

	.footer-bottom {
		flex-direction: column;
	}

	.search-panel {
		padding: 21px;
	}

	.search-panel h2 {
		font-size: 34px;
	}

	.overlay-input {
		font-size: 20px;
	}
}

/* ==========================================================================
   22. Editorial Visual Presentation System (seekde-compare & seekde-data-table)
   ========================================================================== */

/* --- A. Two-Concept Comparison Component (.seekde-compare) --- */
.seekde-compare {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 34px 0;
	padding: 0;
	border: none;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.seekde-compare > figcaption {
	grid-column: 1 / -1;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin-bottom: 6px;
	text-align: left;
}

.seekde-compare-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 24px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	position: relative;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.seekde-compare-card:hover {
	border-color: color-mix(in srgb, var(--ink) 25%, var(--line));
}

.seekde-compare-header {
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

.seekde-compare-badge {
	display: inline-block;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--soft);
	color: var(--ink);
	padding: 4px 10px;
	border-radius: 4px;
	margin-bottom: 10px;
}

.seekde-compare-title {
	font-family: var(--sans);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}

.seekde-compare-title a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dashed var(--line);
	transition: border-color 0.15s ease;
}

.seekde-compare-title a:hover {
	border-color: var(--ink);
}

.seekde-compare-subtitle {
	font-family: var(--sans);
	font-size: 13px;
	color: var(--muted);
	margin-top: 5px;
	line-height: 1.45;
}

.seekde-compare-list {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.5;
}

.seekde-compare-list dt {
	font-weight: 750;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 4px 0;
}

.seekde-compare-list dd {
	margin: 0;
	color: var(--ink);
	line-height: 1.55;
}

.seekde-compare-list dd ul {
	margin: 6px 0 0 0;
	padding-left: 18px;
	list-style-type: disc;
}

.seekde-compare-list dd li {
	margin-bottom: 4px;
	font-size: 13.5px;
}

/* --- B. Semantic Data Table Component (.seekde-data-table) --- */
.seekde-data-table-wrapper {
	margin: 34px 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--paper);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
}

.seekde-data-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
	text-align: left;
	overflow-wrap: break-word;
	word-break: normal;
}

.seekde-data-table caption {
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 750;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-align: left;
	padding: 14px 20px;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	caption-side: top;
}

.seekde-data-table th,
.seekde-data-table td {
	padding: 13px 20px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	box-sizing: border-box;
}

.seekde-data-table small {
	display: block;
	font-size: 12px;
	color: var(--muted);
	font-weight: normal;
	margin-top: 3px;
}

.seekde-data-table thead th {
	background: var(--soft);
	font-weight: 750;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink);
	white-space: nowrap;
	border-bottom: 1px solid var(--line);
}

.seekde-data-table tbody th[scope="row"] {
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
}

.seekde-data-table tbody tr:last-child th,
.seekde-data-table tbody tr:last-child td {
	border-bottom: none;
}

.seekde-data-table tbody tr:hover {
	background: color-mix(in srgb, var(--soft) 40%, transparent);
}

/* --- C. Responsive Layout Rules --- */
@media (max-width: 768px) {
	.seekde-compare {
		grid-template-columns: 1fr;
		gap: 16px;
		margin: 24px 0;
	}

	.seekde-compare-card {
		padding: 20px;
	}

	.seekde-data-table-wrapper {
		margin: 24px 0;
	}

	.seekde-data-table th,
	.seekde-data-table td {
		padding: 11px 14px;
		font-size: 13.5px;
	}

	.seekde-data-table caption {
		padding: 12px 14px;
		font-size: 13.5px;
	}
}

/* ==========================================================================
   23. Crawler Rendering Spectrum Component (.crawler-spectrum-block)
   ========================================================================== */

.crawler-spectrum-block {
	background: #fdfdfb;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 24px 30px;
	margin: 32px 0 40px;
	box-sizing: border-box;
	width: 100%;
}

.crawler-spectrum-kicker {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 22px;
}

/* Horizontal Spectrum Track */
.crawler-spectrum-track-container {
	margin-bottom: 28px;
}

.crawler-spectrum-track {
	position: relative;
	width: 100%;
	height: 2.5px;
	border-radius: 9999px;
	background: linear-gradient(to right, #78c330 0%, #8ed638 25%, #cfcfc8 50%, #b8a6f2 75%, #9b82e2 100%);
}

.spectrum-node {
	position: absolute;
	top: 50%;
	border-radius: 50%;
	box-sizing: border-box;
}

.node-full {
	left: 0;
	transform: translateY(-50%);
	width: 13px;
	height: 13px;
	background: #78c330;
	box-shadow: 0 0 0 4px rgba(120, 195, 48, 0.28);
}

.node-partial {
	left: 50%;
	transform: translate(-50%, -50%);
	width: 13px;
	height: 13px;
	background: #ffffff;
	border: 2px solid #555555;
}

.node-raw {
	right: 0;
	left: auto;
	transform: translateY(-50%);
	width: 13px;
	height: 13px;
	background: #9b82e2;
	box-shadow: 0 0 0 4px rgba(155, 130, 226, 0.32);
}

.crawler-spectrum-labels {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--ink);
}

.spectrum-label-left {
	text-align: left;
}

.spectrum-label-center {
	text-align: center;
}

.spectrum-label-right {
	text-align: right;
}

.spectrum-br-mobile {
	display: none;
}

/* 3-Column Card Grid */
.crawler-spectrum-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	align-items: stretch;
}

.crawler-spectrum-card {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 20px 18px 20px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.crawler-spectrum-card-header {
	min-height: 54px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.article-body .spectrum-card-title,
.article-body h3.spectrum-card-title,
.crawler-spectrum-block .spectrum-card-title,
.crawler-spectrum-card h3 {
	font-family: var(--serif) !important;
	font-size: clamp(14.5px, 1.2vw, 16px) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.02em !important;
	color: var(--ink) !important;
	margin: 0 0 5px 0 !important;
	white-space: normal !important;
	text-wrap: balance;
	word-break: normal;
	overflow-wrap: normal;
}

.spectrum-card-kicker {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 12px;
}

.spectrum-card-divider {
	height: 1px;
	background: var(--line);
	margin-bottom: 15px;
}

/* Badges */
.spectrum-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-bottom: 16px;
}

.spectrum-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 9999px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.badge-lime {
	background: #eef8df;
	color: #1a2908;
}

.badge-purple {
	background: #f3effd;
	color: #241d50;
}

.badge-icon {
	flex-shrink: 0;
	display: inline-block;
	vertical-align: middle;
}

/* Bullets */
.spectrum-card-bullets {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.spectrum-card-bullets li {
	position: relative;
	padding-left: 14px !important;
	margin-bottom: 0 !important;
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.44;
	color: var(--ink);
}

.spectrum-card-bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 5.5px;
	height: 5.5px;
	border-radius: 50%;
}

.bullets-lime li::before {
	background-color: #78c330;
}

.bullets-purple li::before {
	background-color: #9b82e2;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.crawler-spectrum-block {
		padding: 22px 16px 24px;
		margin: 24px 0 32px;
	}
	.crawler-spectrum-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.crawler-spectrum-card {
		padding: 18px 16px;
	}
	.article-body .spectrum-card-title,
	.article-body h3.spectrum-card-title,
	.crawler-spectrum-block .spectrum-card-title,
	.crawler-spectrum-card h3 {
		white-space: normal !important;
		font-size: 19px !important;
	}
	.spectrum-br-mobile {
		display: block;
	}
	.crawler-spectrum-labels {
		font-size: 10.5px;
		line-height: 1.25;
	}
}

/* Dark mode support */
html[data-theme="dark"] .crawler-spectrum-block {
	background: var(--paper);
	border-color: var(--line);
}
html[data-theme="dark"] .crawler-spectrum-card {
	background: var(--soft);
	border-color: var(--line);
}
html[data-theme="dark"] .badge-lime {
	background: rgba(184, 255, 67, 0.15);
	color: #d6ff7a;
}
html[data-theme="dark"] .badge-purple {
	background: rgba(111, 100, 255, 0.2);
	color: #cec9ff;
}
html[data-theme="dark"] .node-partial {
	background: var(--paper);
	border-color: var(--muted);
}

/* ==========================================================================
   24. Seekde Technical Visualizations System (.seekde-visual-block & Primitives)
   ========================================================================== */

.seekde-visual-block {
	background: #fdfdfb;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 24px 30px;
	margin: 34px 0 42px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	clear: both;
	overflow-wrap: break-word;
	word-break: break-word;
}

.seekde-visual-kicker {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 16px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.seekde-visual-title {
	font-family: var(--serif) !important;
	font-size: clamp(20px, 2.4vw, 24px) !important;
	font-weight: 700 !important;
	line-height: 1.22 !important;
	letter-spacing: -0.03em !important;
	color: var(--ink) !important;
	margin: 0 0 10px 0 !important;
}

.seekde-visual-desc {
	font-family: var(--sans);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--muted);
	margin: 0 0 24px 0;
	max-width: 820px;
}

/* --- Common Card Styles --- */
.seekde-card {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	position: relative;
}

.article-body .seekde-card-title,
.article-body h3.seekde-card-title,
.article-body h4.seekde-card-title,
.seekde-card-title {
	font-family: var(--serif) !important;
	font-size: clamp(14.5px, 1.25vw, 16.5px) !important;
	font-weight: 700 !important;
	line-height: 1.22 !important;
	letter-spacing: -0.02em !important;
	color: var(--ink) !important;
	margin: 0 0 6px 0 !important;
	white-space: normal !important;
	text-wrap: balance;
	word-break: normal;
	overflow-wrap: normal;
}

.seekde-card-kicker {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 10px;
}

.seekde-card-divider {
	height: 1px;
	background: var(--line);
	margin: 8px 0 14px 0;
}

.seekde-badge-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.badge-neutral {
	background: var(--soft);
	color: var(--ink);
}

.seekde-bullets {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.seekde-bullets li {
	position: relative;
	padding-left: 14px !important;
	margin-bottom: 0 !important;
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink);
}

.seekde-bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--ink);
}

.seekde-bullets.bullets-lime li::before { background-color: #78c330; }
.seekde-bullets.bullets-purple li::before { background-color: #9b82e2; }

/* ==========================================================================
   A. Sequential Process Flow (.seekde-flow)
   ========================================================================== */

.seekde-flow {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
	max-width: 100%;
	margin-top: 14px;
	box-sizing: border-box;
}

/* 2-step flow rule */
.seekde-flow:has(> .seekde-flow-step:nth-last-child(1):first-child),
.seekde-flow:has(> .seekde-flow-step:nth-last-child(2):first-child),
.seekde-flow:has(> .seekde-flow-step:nth-last-child(3):first-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.seekde-flow-step {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	position: relative;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
}

.seekde-flow-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
	font-weight: 700;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: var(--ink);
	color: #ffffff;
	margin-bottom: 12px;
}

.seekde-flow-badge.badge-accent {
	background: #78c330;
	color: #152405;
}

.seekde-flow-step-title {
	font-family: var(--sans) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--ink) !important;
	margin: 0 0 6px 0 !important;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
}

.seekde-flow-step-meta {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 10px;
	color: var(--muted);
	letter-spacing: 0.04em;
	margin-bottom: 8px;
	display: block;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
}

.seekde-flow-step-desc {
	font-family: var(--sans);
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ink);
	margin: 0;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
}

.seekde-flow-arrow {
	display: none;
}

/* ==========================================================================
   B. Architecture & Multi-Pillar Grid (.seekde-arch-grid)
   ========================================================================== */

.seekde-arch-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	width: 100%;
	align-items: stretch;
	margin-top: 14px;
}

.seekde-arch-grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seekde-arch-grid.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seekde-arch-grid.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seekde-arch-grid.grid-cols-5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ==========================================================================
   C. Side-by-Side Comparison (.seekde-compare-grid)
   ========================================================================== */

.seekde-compare-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	width: 100%;
	margin-top: 14px;
}

.compare-card--legacy {
	background: #fbfbfa;
	border: 1px solid var(--line);
}

.compare-card--ai {
	background: #ffffff;
	border: 1.5px solid #78c330;
	box-shadow: 0 4px 14px rgba(120, 195, 48, 0.08);
}

.compare-spec-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 10px;
}

.compare-spec-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.compare-spec-label {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}

.compare-spec-val {
	font-family: var(--sans);
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--ink);
}

/* ==========================================================================
   D. Semantic Data Matrix / Tables (.seekde-table-wrap)
   ========================================================================== */

.seekde-table-wrap {
	width: 100%;
	max-width: 100%;
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #ffffff;
	margin-top: 14px;
}

.seekde-tech-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--sans);
	font-size: 13.5px;
	line-height: 1.45;
	text-align: left;
	margin: 0 !important;
}

.seekde-tech-table th {
	background: #f7f7f5;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink);
	padding: 12px 16px;
	border-bottom: 1.5px solid var(--line);
	white-space: nowrap;
}

.seekde-tech-table td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	vertical-align: top;
}

.seekde-tech-table tr:last-child td {
	border-bottom: none;
}

.seekde-tech-table tr:nth-child(even) td {
	background: #fafaf8;
}

.seekde-tech-table code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12px;
	background: var(--soft);
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--ink);
}

/* ==========================================================================
   E. Decision Tree / Logic Flow (.seekde-decision-tree)
   ========================================================================== */

.seekde-decision-tree {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	margin-top: 14px;
}

.seekde-decision-node {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 18px 20px;
	box-sizing: border-box;
}

.seekde-decision-branches {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin-left: 18px;
	padding-left: 18px;
	border-left: 2px dashed var(--line);
}

.seekde-branch-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
	font-weight: 700;
	margin-bottom: 8px;
}

.tag-yes { background: #eef8df; color: #1a2908; }
.tag-no { background: #fdf0ed; color: #5a190e; }
.tag-path { background: var(--soft); color: var(--ink); }

/* ==========================================================================
   F. Tiered Hierarchy / Pyramid (.seekde-tier-stack)
   ========================================================================== */

.seekde-tier-stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 14px;
}

.seekde-tier-row {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 18px;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}

.tier-apex {
	border-color: #9b82e2;
	background: #faf8fe;
}

.seekde-tier-badge {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--ink);
	color: #ffffff;
	flex-shrink: 0;
}

.seekde-tier-info {
	flex: 1;
	min-width: 0;
}

.seekde-tier-title {
	font-family: var(--serif);
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 3px 0;
}

.seekde-tier-desc {
	font-family: var(--sans);
	font-size: 12.5px;
	color: var(--muted);
	margin: 0;
}

/* ==========================================================================
   G. Strategic 2x2 Quadrant Matrix (.seekde-quadrant-matrix)
   ========================================================================== */

.seekde-quadrant-matrix {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
	margin-top: 14px;
}

.seekde-quadrant-card {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 18px 16px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.quadrant-optimal {
	border-color: #78c330;
	background: #fbfdf9;
}

/* ==========================================================================
   Mobile Responsive Rules
   ========================================================================== */

@media (max-width: 768px) {
	.seekde-visual-block {
		padding: 22px 16px 24px;
		margin: 24px 0 32px;
	}
	.seekde-flow,
	.seekde-flow:has(> .seekde-flow-step:nth-last-child(1):first-child),
	.seekde-flow:has(> .seekde-flow-step:nth-last-child(2):first-child),
	.seekde-flow:has(> .seekde-flow-step:nth-last-child(3):first-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.seekde-arch-grid,
	.seekde-arch-grid.grid-cols-2,
	.seekde-arch-grid.grid-cols-3,
	.seekde-arch-grid.grid-cols-4,
	.seekde-arch-grid.grid-cols-5 {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.seekde-compare-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.seekde-quadrant-matrix {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.seekde-tier-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 14px 16px;
	}
	.seekde-decision-branches {
		margin-left: 8px;
		padding-left: 12px;
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.seekde-flow,
	.seekde-flow:has(> .seekde-flow-step:nth-last-child(1):first-child),
	.seekde-flow:has(> .seekde-flow-step:nth-last-child(2):first-child),
	.seekde-flow:has(> .seekde-flow-step:nth-last-child(3):first-child) {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}