@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@600;700&display=swap");

:root {
	--doc-bg: #101a14;
	--doc-panel: #16221b;
	--doc-text: #d9e8dd;
	--doc-muted: #93a89b;
	--doc-accent: #86efac;
	--doc-primary: #22c55e;
	--doc-border: rgba(134, 239, 172, 0.18);
	--doc-font-heading: 'Source Serif 4', Georgia, serif;
	--doc-font-body: 'Titillium Web', Arial, sans-serif;
}

.spindoc-body {
	background: var(--doc-bg);
	color: var(--doc-text);
	font-family: var(--doc-font-body);
	line-height: 1.7;
	margin: 0;
}

.spindoc-header {
	border-bottom: 1px solid var(--doc-border);
	padding: 18px 0;
}

.spindoc-header-inner {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.spindoc-brand {
	font-family: var(--doc-font-heading);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--doc-accent);
	text-decoration: none;
}

.spindoc-cta {
	font-family: var(--doc-font-body);
	background: var(--doc-primary);
	color: #052e16;
	border: 0;
	border-radius: 999px;
	padding: 10px 20px;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
}

.spindoc-crumbs {
	max-width: 860px;
	margin: 20px auto 0;
	padding: 0 20px;
	font-size: 0.8rem;
	color: var(--doc-muted);
}

.spindoc-crumbs a {
	color: var(--doc-muted);
}

.spindoc-main {
	max-width: 860px;
	margin: 0 auto;
	padding: 20px 20px 60px;
}

.spindoc-article {
	background: var(--doc-panel);
	border: 1px solid var(--doc-border);
	border-radius: 18px;
	padding: 40px clamp(20px, 5vw, 56px);
}

.spindoc-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	color: var(--doc-accent);
	margin: 0 0 10px;
}

.spindoc-article h1 {
	font-family: var(--doc-font-heading);
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	margin: 0 0 12px;
	color: #fff;
}

.spindoc-standfirst {
	color: var(--doc-muted);
	font-size: 1.05rem;
	margin: 0 0 8px;
}

.spindoc-meta {
	color: var(--doc-muted);
	font-size: 0.8rem;
	margin: 0 0 28px;
}

.spindoc-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	padding: 14px 18px;
	background: rgba(134, 239, 172, 0.06);
	border: 1px solid var(--doc-border);
	border-radius: 12px;
	margin-bottom: 32px;
	font-size: 0.85rem;
}

.spindoc-jump a {
	color: var(--doc-text);
	text-decoration: none;
	border-bottom: 1px dotted var(--doc-muted);
}

.spindoc-article section {
	margin-bottom: 30px;
}

.spindoc-article h2 {
	font-family: var(--doc-font-heading);
	font-size: 1.3rem;
	color: var(--doc-accent);
	margin: 0 0 10px;
}

.spindoc-article h3 {
	font-size: 1.05rem;
	color: var(--doc-text);
	margin: 18px 0 6px;
}

.spindoc-article p,
.spindoc-article li {
	color: var(--doc-text);
}

.spindoc-article ul {
	padding-left: 20px;
}

.spindoc-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 24px 0;
}

.spindoc-card {
	background: rgba(134, 239, 172, 0.05);
	border: 1px solid var(--doc-border);
	border-radius: 14px;
	padding: 20px;
}

.spindoc-card h3 {
	margin-top: 0;
	color: var(--doc-accent);
}

.spindoc-checklist {
	list-style: none;
	padding: 0;
	margin: 18px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.spindoc-checklist li::before {
	content: '✓ ';
	color: var(--doc-accent);
	font-weight: 700;
}

.spindoc-cta-strip {
	margin-top: 34px;
	padding: 22px;
	border-radius: 14px;
	background: rgba(34, 197, 94, 0.12);
	border: 1px solid var(--doc-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.spindoc-cta-strip p {
	margin: 0;
	font-weight: 600;
}

.spindoc-related {
	margin-top: 24px;
	font-size: 0.85rem;
	color: var(--doc-muted);
}

.spindoc-related a {
	color: var(--doc-accent);
}

.spindoc-footer {
	max-width: 860px;
	margin: 0 auto;
	padding: 20px 20px 60px;
	color: var(--doc-muted);
	font-size: 0.8rem;
	text-align: center;
}

.spindoc-footer a {
	color: var(--doc-muted);
}

@media (max-width: 640px) {
	.spindoc-cards { grid-template-columns: 1fr; }
	.spindoc-article { padding: 28px 20px; }
}