/* ════════════════════════════════════════════════════════════════
   SEO Trade page styles
   source: SEO Page Layout (standalone.html) — the rendered ".body" cards only.
   The master template is a two-column SPEC view (dark annotation rail + white
   rendered body). The SHIPPED page is just the rendered body content in order,
   wrapped in the site nav/footer (owned by Site.astro). Only the .body styles
   are ported here, scoped under .seo-trade so they never collide with the global
   shared.css vocabulary (.btn, .faq, .wrap, etc.).
   ════════════════════════════════════════════════════════════════ */

.seo-trade {
	--st-ink: #0f172a;
	--st-ink-2: #334155;
	--st-ink-3: #64748b;
	--st-ink-4: #94a3b8;
	--st-line: #e5e7eb;
	--st-line-2: #eef0f3;
	--st-paper-3: #f6f5f0;
	--st-teal: #3d8fa1;
	--st-teal-deep: #29434e;
	--st-teal-ink: #1e6470;
	--st-teal-50: #f0fafa;
	--st-teal-100: #d9f1f3;
	--st-teal-300: #7cb9c8;
	--st-amber: #c2410c;
	--st-spec: #0b1220;
	--st-spec-line: #1f2a3b;
	background: var(--st-paper-3);
	color: var(--st-ink);
	padding: 40px 0 64px;
}
.seo-trade .wrap {
	max-width: 920px;
	margin: 0 auto;
	padding: 0 32px;
}
.seo-trade .mono {
	font-family: "JetBrains Mono", monospace;
}

/* stacked rendered-body cards.
   Each block component is its own <section class="st-block">, so the cards are
   never adjacent DOM siblings — the inter-card rhythm lives on .st-block, not on
   a (.body + .body) adjacency rule. Keep the gap deliberate so the page reads as
   discrete panels on the warm paper, not one uniform slab. */
.seo-trade .st-block {
	padding: 11px 0;
}
.seo-trade .st-block:first-child {
	padding-top: 0;
}
.seo-trade .body {
	background: #fff;
	border: 1px solid var(--st-line);
	border-radius: 14px;
	padding: 32px 36px;
	/* a touch more lift than the master's spec view so the white cards separate
	   cleanly from the #f6f5f0 paper when stacked full-width (no annotation rail
	   alongside to do that work). */
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px -10px rgba(15, 23, 42, 0.12);
}
.seo-trade .body h1.page-h1 {
	font-size: 40px;
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin: 0;
	font-weight: 700;
}
.seo-trade .body h2 {
	font-size: 26px;
	line-height: 1.18;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
	font-weight: 700;
}
.seo-trade .body p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--st-ink-2);
	margin: 0 0 14px;
}
.seo-trade .body p:last-child {
	margin-bottom: 0;
}
.seo-trade .body p b,
.seo-trade .body li b {
	color: var(--st-ink);
	font-weight: 600;
}

/* breadcrumb */
.seo-trade .breadcrumb {
	display: flex;
	gap: 8px;
	align-items: center;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: var(--st-ink-3);
	letter-spacing: 0.04em;
	flex-wrap: wrap;
}
.seo-trade .breadcrumb a:hover {
	color: var(--st-teal);
}
.seo-trade .breadcrumb .sep {
	color: var(--st-ink-4);
}

/* hero block */
.seo-trade .hero-prob {
	font-size: 21px;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--st-ink);
	font-weight: 600;
	margin: 0 0 12px;
}
.seo-trade .hero-out {
	font-size: 16px;
	line-height: 1.6;
	color: var(--st-ink-2);
	margin: 0 0 22px;
}
.seo-trade .hero-out b {
	color: var(--st-teal-ink);
}

/* buttons (page-local — master template defines its own .btn vocabulary) */
.seo-trade .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.15s ease;
	text-decoration: none;
}
.seo-trade .btn-primary {
	background: var(--st-teal);
	color: #fff;
}
.seo-trade .btn-primary:hover {
	background: #357588;
}
.seo-trade .btn-outline {
	border-color: var(--st-line);
	background: #fff;
	color: var(--st-ink-2);
}
.seo-trade .btn-outline:hover {
	border-color: #cbd5e1;
	background: #fafafa;
}
.seo-trade .btn-lg {
	height: 48px;
	padding: 0 20px;
	font-size: 15px;
	border-radius: 10px;
}
.seo-trade .btn-arrow {
	display: inline-block;
	transition: transform 0.15s ease;
}
.seo-trade .btn-primary:hover .btn-arrow {
	transform: translateX(3px);
}

/* mistakes */
.seo-trade .mis {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.seo-trade .mis-row {
	border: 1px solid var(--st-line);
	border-radius: 12px;
	overflow: hidden;
}
.seo-trade .mis-m {
	display: flex;
	gap: 10px;
	padding: 14px 16px;
	background: #fff4ed;
	font-size: 15px;
	line-height: 1.5;
	color: var(--st-ink);
}
.seo-trade .mis-r {
	display: flex;
	gap: 10px;
	padding: 14px 16px;
	background: var(--st-teal-50);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--st-ink-2);
	border-top: 1px solid var(--st-line-2);
}
.seo-trade .mis-tag {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	flex: 0 0 auto;
	padding-top: 2px;
}
.seo-trade .mis-m .mis-tag {
	color: var(--st-amber);
}
.seo-trade .mis-r .mis-tag {
	color: var(--st-teal-ink);
}

/* numbered workflow */
.seo-trade .flow {
	list-style: none;
	counter-reset: step;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.seo-trade .flow li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 16px;
	align-items: start;
}
.seo-trade .flow li::before {
	content: counter(step, decimal-leading-zero);
	font-family: "JetBrains Mono", monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--st-teal);
	background: var(--st-teal-50);
	border: 1px solid var(--st-teal-100);
	width: 36px;
	height: 36px;
	border-radius: 9px;
	display: grid;
	place-items: center;
}
.seo-trade .flow li .ft {
	font-size: 16px;
	font-weight: 600;
	color: var(--st-ink);
	margin: 6px 0 4px;
	letter-spacing: -0.01em;
}
.seo-trade .flow li .fd {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--st-ink-3);
}

/* feature / benefit lists */
.seo-trade .ticks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.seo-trade .ticks li {
	display: flex;
	gap: 11px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--st-ink-2);
	align-items: flex-start;
}
.seo-trade .ticks li svg {
	flex: 0 0 18px;
	margin-top: 2px;
	color: var(--st-teal);
}
.seo-trade .ticks.bene li::before {
	content: "";
	flex: 0 0 7px;
	height: 7px;
	border-radius: 99px;
	background: var(--st-teal);
	margin-top: 8px;
}
.seo-trade .ticks li .feat-t {
	font-weight: 600;
	color: var(--st-ink);
}

/* audience callout */
.seo-trade .aud {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.seo-trade .aud .pill {
	font-family: "JetBrains Mono", monospace;
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: var(--st-teal-ink);
	background: var(--st-teal-50);
	border: 1px solid var(--st-teal-100);
	border-radius: 99px;
	padding: 7px 13px;
}

/* FAQ (native details/summary — no JS) */
.seo-trade .faq details {
	border: 1px solid var(--st-line);
	border-radius: 10px;
	margin-bottom: 10px;
	overflow: hidden;
	background: #fff;
}
.seo-trade .faq summary {
	list-style: none;
	cursor: pointer;
	padding: 15px 18px;
	font-size: 16px;
	font-weight: 600;
	color: var(--st-ink);
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
}
.seo-trade .faq summary::-webkit-details-marker {
	display: none;
}
.seo-trade .faq summary .ico {
	flex: 0 0 18px;
	color: var(--st-teal);
	transition: transform 0.2s ease;
}
.seo-trade .faq details[open] summary .ico {
	transform: rotate(45deg);
}
.seo-trade .faq details[open] summary {
	border-bottom: 1px solid var(--st-line-2);
}
.seo-trade .faq .ans {
	padding: 14px 18px 16px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--st-ink-2);
}

/* internal / related links */
.seo-trade .links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.seo-trade .lk {
	display: block;
	border: 1px solid var(--st-line);
	border-radius: 10px;
	padding: 14px 16px;
	transition: border-color 0.15s, background 0.15s;
}
.seo-trade .lk:hover {
	border-color: var(--st-teal-300);
	background: var(--st-teal-50);
}
.seo-trade .lk .lk-t {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--st-teal-ink);
	display: flex;
	align-items: center;
	gap: 6px;
}
.seo-trade .lk .lk-u {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: var(--st-ink-4);
	margin-top: 3px;
}

/* how-scaftra bridge + trade facts */
.seo-trade .bridge {
	margin-top: 18px;
	padding: 18px 20px;
	background: var(--st-teal-50);
	border: 1px solid var(--st-teal-100);
	border-left: 4px solid var(--st-teal);
	border-radius: 0 10px 10px 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--st-teal-deep);
	font-weight: 600;
	letter-spacing: -0.01em;
}
.seo-trade .facts {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.seo-trade .facts li {
	border: 1px solid var(--st-line);
	border-radius: 10px;
	padding: 12px 14px;
}
.seo-trade .facts .fact-s {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--st-ink);
}
.seo-trade .facts .fact-d {
	font-size: 14px;
	line-height: 1.5;
	color: var(--st-ink-3);
	margin-top: 4px;
}

/* CTA block */
.seo-trade .cta-card {
	background: var(--st-spec);
	border-radius: 16px;
	padding: 36px;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.seo-trade .cta-card::before {
	content: "";
	position: absolute;
	right: -90px;
	top: -90px;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, var(--st-teal-300), transparent 65%);
	opacity: 0.4;
	pointer-events: none;
}
.seo-trade .cta-card h2 {
	color: #fff;
	margin: 0 0 10px;
}
.seo-trade .cta-card p {
	color: #a8b3c2;
	font-size: 15.5px;
	margin: 0 0 22px;
	max-width: 520px;
}
.seo-trade .cta-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.seo-trade .cta-card .btn-primary {
	background: var(--st-teal-300);
	color: var(--st-spec);
}
.seo-trade .cta-card .btn-primary:hover {
	background: #a3d0db;
}
.seo-trade .cta-card .btn-outline {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.2);
}
.seo-trade .cta-card .btn-outline:hover {
	background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 980px) {
	.seo-trade .links {
		grid-template-columns: 1fr;
	}
	.seo-trade .body {
		padding: 24px 22px;
	}
	.seo-trade .body h1.page-h1 {
		font-size: 30px;
	}
}

/* "Coming soon" roadmap section — visually distinct from current Key features. */
.seo-trade .soon-badge{display:inline-block;margin-left:.5rem;padding:.15em .6em;font-size:.62em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;border-radius:999px;background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;}
.seo-trade .ticks.roadmap li{color:#9a3412;}
.seo-trade .ticks.roadmap .feat-t{color:#7c2d12;}