/*
Theme Name: Sister Guide
Theme URI: https://sister-guide.co.uk
Description: UK casino sister-sites and networks affiliate site. Custom theme — homepage and static pages driven by ACF HTML fields.
Version: 3.0
Author: Sister Guide
*/

/* ============================================================
   1. Design tokens (mirrors src/index.css)
   ============================================================ */
:root {
	--bg-primary: 150 30% 8%;
	--bg-surface: 155 30% 13%;
	--bg-elevated: 155 28% 17%;
	--bg-footer: 155 30% 6%;
	--bg-alt: 152 28% 11%;
	--accent-emerald: 160 81% 40%;
	--accent-emerald-dark: 160 89% 31%;
	--accent-gold: 36 90% 55%;
	--text-primary: 138 50% 97%;
	--text-secondary: 215 18% 62%;
	--border-subtle: 160 81% 40%;
	--danger: 0 84% 60%;
	--radius: 0rem;
}

/* ============================================================
   2. Reset + global radius rule (every element zero-radius)
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	border-radius: 0 !important;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: hsl(var(--bg-primary));
	color: hsl(var(--text-primary));
	font-family: 'Source Sans 3', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', serif;
	margin: 0;
	color: hsl(var(--text-primary));
}

p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

input, textarea, select {
	font-family: inherit;
	font-size: inherit;
}

ul, ol {
	margin: 0;
	padding: 0;
}

/* ============================================================
   3. Font utilities
   ============================================================ */
.font-heading { font-family: 'Playfair Display', serif; }
.font-body { font-family: 'Source Sans 3', sans-serif; }
.font-ui { font-family: 'Inter', sans-serif; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }

/* ============================================================
   4. Color utilities
   ============================================================ */
.bg-background { background-color: hsl(var(--bg-primary)); }
.bg-surface { background-color: hsl(var(--bg-surface)); }
.bg-elevated { background-color: hsl(var(--bg-elevated)); }
.bg-footer { background-color: hsl(var(--bg-footer)); }
.bg-bg-alt { background-color: hsl(var(--bg-alt)); }
.bg-emerald { background-color: hsl(var(--accent-emerald)); }
.bg-emerald-10 { background-color: hsla(160, 81%, 40%, 0.1); }
.bg-emerald-15 { background-color: hsla(160, 81%, 40%, 0.15); }
.bg-emerald-20 { background-color: hsla(160, 81%, 40%, 0.2); }
.bg-gold { background-color: hsl(var(--accent-gold)); }
.bg-gold-15 { background-color: hsla(36, 90%, 55%, 0.15); }
.bg-card { background-color: hsl(var(--bg-surface)); }
.bg-card-80 { background-color: hsla(155, 30%, 13%, 0.8); }

.text-text-primary { color: hsl(var(--text-primary)); }
.text-text-secondary { color: hsl(var(--text-secondary)); }
.text-text-secondary-50 { color: hsla(215, 18%, 62%, 0.5); }
.text-text-secondary-60 { color: hsla(215, 18%, 62%, 0.6); }
.text-text-secondary-70 { color: hsla(215, 18%, 62%, 0.7); }
.text-emerald { color: hsl(var(--accent-emerald)); }
.text-emerald-dark { color: hsl(var(--accent-emerald-dark)); }
.text-gold { color: hsl(var(--accent-gold)); }
.text-white { color: #fff; }
.text-casino-danger { color: hsl(var(--danger)); }
.text-deep { color: #0F1A14; }

/* ============================================================
   5. Borders
   ============================================================ */
.border { border: 1px solid hsl(var(--bg-elevated)); }
.border-2 { border-width: 2px; border-style: solid; border-color: hsl(var(--bg-elevated)); }
.border-t-2 { border-top: 2px solid hsl(var(--bg-elevated)); }
.border-l-3 { border-left: 3px solid hsl(var(--accent-emerald)); }
.border-l-3-gold { border-left: 3px solid hsl(var(--accent-gold)); }
.border-emerald { border-color: hsl(var(--accent-emerald)); }
.border-gold { border-color: hsl(var(--accent-gold)); }
.border-emerald-border { border-color: hsla(160, 81%, 40%, 0.15); }
.emerald-border { border-color: hsla(160, 81%, 40%, 0.15); }
.border-none { border: 0; }
.border-t { border-top: 1px solid hsl(var(--bg-elevated)); }
.border-t-emerald-border { border-top: 1px solid hsla(160, 81%, 40%, 0.15); }
.border-b { border-bottom: 1px solid hsl(var(--bg-elevated)); }
.border-l-gold { border-left-color: hsl(var(--accent-gold)); }
.border-t-gold { border-top: 2px solid hsl(var(--accent-gold)); }

/* ============================================================
   6. Layout
   ============================================================ */
.min-h-screen { min-height: 100vh; }
.container-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.container-5xl { max-width: 64rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.container-4xl { max-width: 56rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.container-3xl { max-width: 48rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.container-2xl { max-width: 42rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.pointer-events-none { pointer-events: none; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.flex-1 { flex: 1 1 0%; }
.flex-grow { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }
.flex-shrink-0 { flex-shrink: 0; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-7 { grid-column: span 7 / span 7; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.w-full { width: 100%; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-sm { max-width: 24rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.z-10 { z-index: 10; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Common gaps */
.gap-1 { gap: 0.25rem; }
.gap-1-5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-2-5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }

/* Spacing */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.py-0-5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1-5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-16 { padding-top: 4rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }
.pl-6 { padding-left: 1.5rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-auto { margin-left: auto; }
.mt-auto { margin-top: auto; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }

/* Typography sizes */
.text-xxs { font-size: 0.625rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }

/* ============================================================
   7. Utility components from Lovable
   ============================================================ */
.glass-card {
	background-color: hsla(155, 30%, 13%, 0.8);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid hsla(160, 81%, 40%, 0.15);
}

.btn-emerald {
	display: inline-block;
	background: linear-gradient(to right, hsl(var(--accent-emerald)), hsl(var(--accent-emerald-dark)));
	color: #fff;
	font-weight: 600;
	transition: filter 0.2s, transform 0.2s;
	text-align: center;
}
.btn-emerald:hover { filter: brightness(1.1); transform: scale(1.02); }

.btn-gold {
	display: inline-block;
	border: 2px solid hsl(var(--accent-gold));
	color: hsl(var(--accent-gold));
	font-weight: 600;
	transition: filter 0.2s, transform 0.2s;
	text-align: center;
}
.btn-gold:hover { filter: brightness(1.1); transform: scale(1.02); }

.card-hover {
	transition: transform 0.2s, box-shadow 0.2s;
}
.card-hover:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
}

.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Hover utilities */
.hover-emerald:hover { color: hsl(var(--accent-emerald)); }
.hover-underline:hover { text-decoration: underline; }
.hover-brightness:hover { filter: brightness(1.1); }

/* ============================================================
   8. Lucide-icon sized SVG defaults
   ============================================================ */
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.icon-3 { width: 0.75rem; height: 0.75rem; }
.icon-3-5 { width: 0.875rem; height: 0.875rem; }
.icon-4 { width: 1rem; height: 1rem; }
.icon-5 { width: 1.25rem; height: 1.25rem; }
.icon-6 { width: 1.5rem; height: 1.5rem; }
.icon-10 { width: 2.5rem; height: 2.5rem; }
.icon-12 { width: 3rem; height: 3rem; }

/* ============================================================
   9. Animations
   ============================================================ */
@keyframes pulse-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(1.5); }
}

.pulse-dot {
	width: 8px;
	height: 8px;
	background-color: hsl(var(--accent-emerald));
	box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
	border-radius: 9999px;
	animation: pulse-dot 2.5s ease-in-out infinite;
	display: inline-block;
}

/* ============================================================
   10. Hero
   ============================================================ */
.sg-hero {
	position: relative;
	overflow: hidden;
}
.sg-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 25% 50%, rgba(16, 185, 129, 0.06) 0%, transparent 70%),
		radial-gradient(ellipse at 80% 30%, rgba(212, 175, 55, 0.03) 0%, transparent 60%);
}
.sg-hero__inner {
	position: relative;
	max-width: 80rem;
	margin: 0 auto;
	padding: 4rem 1rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}
.sg-hero__copy {
	text-align: center;
}
.sg-hero__title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 2.25rem;
	line-height: 1.15;
	color: hsl(var(--text-primary));
}
.sg-hero__lead {
	color: hsl(var(--text-secondary));
	font-size: 1.125rem;
	line-height: 1.6;
	max-width: 36rem;
	margin: 1.25rem auto 0;
}
.sg-hero__cta-wrap { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; }
.sg-hero__cta {
	display: inline-block;
	background-color: hsl(var(--accent-emerald));
	color: #fff;
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	padding: 1.25rem 3rem;
	box-shadow: 0 12px 24px rgba(16, 185, 129, 0.3);
	transition: filter 0.2s, box-shadow 0.2s;
	text-align: center;
}
.sg-hero__cta:hover {
	filter: brightness(1.1);
	box-shadow: 0 18px 32px rgba(16, 185, 129, 0.4);
}
.sg-hero__cta-note { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.625rem; font-size: 0.75rem; color: hsla(215, 18%, 62%, 0.6); font-weight: 500; }

.sg-hero__showcase {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}
.sg-hero__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	background-color: hsl(var(--accent-gold));
	color: #0F1A14;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.5rem 1.25rem;
	box-shadow: 0 12px 16px rgba(245, 158, 11, 0.3);
}
.sg-hero__card {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	border-left: 3px solid hsl(var(--accent-gold));
	padding: 1.5rem;
	width: 100%;
	max-width: 24rem;
	box-shadow: 0 0 40px rgba(16, 185, 129, 0.08), 0 0 80px rgba(16, 185, 129, 0.04);
	transition: box-shadow 0.3s;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.sg-hero__card:hover {
	box-shadow: 0 0 50px rgba(16, 185, 129, 0.12), 0 0 80px rgba(16, 185, 129, 0.06);
}
.sg-hero__rank-row { display: flex; align-items: center; gap: 1rem; }
.sg-hero__rank { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.875rem; color: hsl(var(--accent-gold)); }
.sg-hero__rank-logo { height: 55px; width: 120px; object-fit: cover; }
.sg-hero__stars { display: flex; align-items: center; gap: 0.5rem; }
.sg-hero__stars-row { display: flex; gap: 1px; color: hsl(var(--accent-gold)); }
.sg-hero__rating { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.125rem; color: hsl(var(--accent-gold)); }
.sg-hero__ukgc {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	background-color: hsla(160, 81%, 40%, 0.1);
	color: hsl(var(--accent-emerald));
	padding: 0.125rem 0.625rem;
	font-size: 0.75rem;
	width: fit-content;
}
.sg-hero__bonus { font-family: 'Source Sans 3', sans-serif; font-weight: 600; font-size: 1.125rem; color: hsl(var(--text-primary)); }
.sg-hero__pills { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sg-pill {
	background-color: hsl(var(--bg-elevated));
	font-size: 0.75rem;
	color: hsl(var(--text-secondary));
	padding: 0.25rem 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.sg-pill--emerald { color: hsl(var(--accent-emerald)); font-weight: 600; }
.sg-hero__visit {
	margin-top: 1rem;
	display: block;
	width: 100%;
	text-align: center;
	background: linear-gradient(to right, hsl(var(--accent-emerald)), hsl(var(--accent-emerald-dark)));
	color: #fff;
	font-weight: 600;
	padding: 0.75rem;
	transition: filter 0.2s;
}
.sg-hero__visit:hover { filter: brightness(1.1); }
.sg-hero__network {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 0.75rem;
	color: hsl(var(--text-secondary));
	transition: color 0.2s;
	margin-top: 0.5rem;
}
.sg-hero__network:hover { color: hsl(var(--accent-emerald)); }
.sg-hero__tcs {
	font-size: 0.625rem;
	color: hsla(215, 18%, 62%, 0.5);
	text-align: center;
	margin-top: 0.75rem;
}
.sg-hero__belowcard {
	position: absolute;
	bottom: -2rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.75rem;
	color: hsla(215, 18%, 62%, 0.5);
	font-style: italic;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.sg-hero__inner { padding: 5rem 1.5rem; }
	.sg-hero__title { font-size: 3rem; }
	.sg-hero__lead { font-size: 1.25rem; }
	.sg-hero__card { padding: 2rem; }
}

@media (min-width: 1024px) {
	.sg-hero__inner {
		grid-template-columns: 7fr 5fr;
		gap: 3rem;
		padding: 6rem 2rem;
	}
	.sg-hero__copy { text-align: left; }
	.sg-hero__title { font-size: 3.75rem; }
	.sg-hero__lead { margin-left: 0; }
	.sg-hero__cta-wrap { align-items: flex-start; }
	.sg-hero__cta { width: auto; }
	.sg-hero__showcase { justify-content: flex-end; margin-top: 0; }
	.sg-hero__badge { left: 2rem; transform: translateX(0); }
}

/* ============================================================
   11. Casino grid (homepage CasinoLayoutD)
   ============================================================ */
.sg-section { padding: 3rem 0; }
.sg-section--alt { background-color: hsl(var(--bg-alt)); padding: 3rem 0; }
@media (min-width: 768px) { .sg-section, .sg-section--alt { padding: 4rem 0; } }
@media (min-width: 1024px) { .sg-section, .sg-section--alt { padding: 5rem 0; } }

.sg-section__heading {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 2.25rem;
	color: hsl(var(--text-primary));
	text-align: center;
	margin-bottom: 2.5rem;
}
@media (min-width: 768px) { .sg-section__heading { font-size: 2.25rem; } }

.sg-grid-header { margin-bottom: 2rem; }
.sg-grid-header h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.5rem;
	color: hsl(var(--text-primary));
}
@media (min-width: 768px) { .sg-grid-header h2 { font-size: 1.875rem; } }
.sg-grid-header p {
	color: hsl(var(--text-secondary));
	font-size: 0.875rem;
	margin-top: 0.5rem;
	max-width: 42rem;
}
@media (min-width: 768px) { .sg-grid-header p { font-size: 1rem; } }
.sg-grid-header__date {
	display: inline-block;
	margin-top: 0.25rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	color: hsla(215, 18%, 62%, 0.5);
}

.sg-casino-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}
@media (min-width: 768px) {
	.sg-casino-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 1280px) {
	.sg-casino-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.sg-casino-card {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s, box-shadow 0.2s;
}
.sg-casino-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(16, 185, 129, 0.1);
}
.sg-casino-card--top3 { border-top: 2px solid hsl(var(--accent-gold)); }

.sg-casino-card__logo-area {
	position: relative;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.15));
}
@media (min-width: 640px) { .sg-casino-card__logo-area { height: 5rem; } }
@media (min-width: 768px) { .sg-casino-card__logo-area { height: 6rem; } }

.sg-casino-card__rank {
	position: absolute;
	top: 0.375rem;
	left: 0.375rem;
	width: 1.25rem;
	height: 1.25rem;
	font-size: 0.5625rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
@media (min-width: 768px) {
	.sg-casino-card__rank { top: 0.5rem; left: 0.5rem; width: 1.75rem; height: 1.75rem; font-size: 0.75rem; }
}
.sg-casino-card__rank--gold { background-color: hsl(var(--accent-gold)); color: #0F1A14; }
.sg-casino-card__rank--default { background-color: hsl(var(--bg-elevated)); color: hsl(var(--accent-emerald)); }

.sg-casino-card__logo { height: 100%; width: 100%; object-fit: cover; }
.sg-casino-card__logo-text {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	color: #fff;
	font-size: 0.875rem;
}
@media (min-width: 768px) { .sg-casino-card__logo-text { font-size: 1rem; } }

.sg-casino-card__body {
	padding: 0.625rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
@media (min-width: 640px) { .sg-casino-card__body { padding: 0.75rem; } }
@media (min-width: 768px) { .sg-casino-card__body { padding: 1rem; } }
.sg-casino-card__name {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: hsl(var(--text-primary));
	font-size: 0.75rem;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
@media (min-width: 640px) { .sg-casino-card__name { font-size: 0.875rem; } }
.sg-casino-card__rating {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.375rem;
}
.sg-casino-card__rating-num {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	color: hsl(var(--accent-gold));
	font-size: 0.75rem;
}
@media (min-width: 640px) { .sg-casino-card__rating-num { font-size: 0.875rem; } }
.sg-casino-card__ukgc {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	color: hsl(var(--accent-emerald));
	font-size: 0.5625rem;
	font-weight: 500;
}
.sg-casino-card__bonus {
	font-family: 'Source Sans 3', sans-serif;
	font-weight: 600;
	color: hsl(var(--text-primary));
	font-size: 0.75rem;
	line-height: 1.375;
	margin-top: 0.5rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (min-width: 640px) { .sg-casino-card__bonus { font-size: 0.875rem; } }
.sg-casino-card__wagering {
	display: none;
	font-size: 0.6875rem;
	font-weight: 500;
	margin-top: 0.375rem;
}
@media (min-width: 640px) { .sg-casino-card__wagering { display: block; } }
.sg-casino-card__wagering--zero { color: hsl(var(--accent-emerald)); }
.sg-casino-card__wagering--default { color: hsl(var(--text-secondary)); }

.sg-casino-card__actions {
	padding: 0 0.625rem 0.625rem;
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
@media (min-width: 640px) { .sg-casino-card__actions { padding: 0 0.75rem 0.75rem; gap: 0.375rem; } }
@media (min-width: 768px) { .sg-casino-card__actions { padding: 0 1rem 1rem; } }
.sg-casino-card__visit {
	display: block;
	width: 100%;
	text-align: center;
	background-color: hsl(var(--accent-emerald));
	color: #fff;
	font-size: 0.625rem;
	font-weight: 600;
	padding: 0.5rem;
	transition: filter 0.2s;
}
@media (min-width: 640px) { .sg-casino-card__visit { font-size: 0.75rem; } }
@media (min-width: 768px) { .sg-casino-card__visit { padding: 0.625rem; } }
.sg-casino-card__visit:hover { filter: brightness(1.1); }
.sg-casino-card__network {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 0.5625rem;
	color: hsl(var(--text-secondary));
	transition: color 0.2s;
}
@media (min-width: 640px) { .sg-casino-card__network { font-size: 0.625rem; } }
.sg-casino-card__network:hover { color: hsl(var(--accent-emerald)); }
.sg-casino-card__tcs {
	padding: 0 0.625rem 0.5rem;
	font-size: 0.4375rem;
	color: hsla(215, 18%, 62%, 0.4);
	text-align: center;
}
@media (min-width: 640px) { .sg-casino-card__tcs { padding: 0 0.75rem 0.75rem; font-size: 0.5rem; } }
@media (min-width: 768px) { .sg-casino-card__tcs { font-size: 0.5625rem; } }

.sg-pagination {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}
.sg-pagination__btn {
	width: 2.25rem;
	height: 2.25rem;
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	display: flex;
	align-items: center;
	justify-content: center;
	color: hsl(var(--text-secondary));
	opacity: 0.4;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: not-allowed;
}
.sg-pagination__btn--active {
	background-color: hsl(var(--accent-emerald));
	color: #fff;
	border-color: transparent;
	opacity: 1;
	cursor: default;
}
.sg-pagination__count {
	font-size: 0.75rem;
	color: hsla(215, 18%, 62%, 0.5);
	text-align: center;
	margin-top: 0.75rem;
}

.sg-disclaimer {
	font-size: 0.625rem;
	color: hsla(215, 18%, 62%, 0.5);
	text-align: center;
	max-width: 48rem;
	margin: 1.5rem auto 0;
}

/* ============================================================
   12. Editorial sections
   ============================================================ */
.sg-editorial {
	padding: 3rem 0;
}
@media (min-width: 768px) { .sg-editorial { padding: 4rem 0; } }
.sg-editorial__inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-editorial__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-editorial__inner { padding: 0 2rem; } }
.sg-editorial__col {
	max-width: 56rem;
	margin: 0 auto;
}
.sg-editorial h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.5rem;
	margin: 0 0 1rem;
}
.sg-editorial h2.mt-12 { margin-top: 3rem; }
.sg-editorial h3 {
	font-family: 'Playfair Display', serif;
	color: hsl(var(--text-primary));
	font-size: 1.25rem;
	margin: 2rem 0 0.75rem;
}
.sg-editorial p {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 1rem;
	line-height: 1.625;
	margin: 0 0 1rem;
}

/* ============================================================
   13. Trust card grid
   ============================================================ */
.sg-trust-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) { .sg-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sg-trust-grid { grid-template-columns: repeat(4, 1fr); } }
.sg-trust-card {
	background-color: hsla(155, 30%, 13%, 0.8);
	backdrop-filter: blur(4px);
	border: 1px solid hsla(160, 81%, 40%, 0.15);
	padding: 1.5rem;
	text-align: center;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.sg-trust-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
	border-color: hsl(var(--accent-emerald));
}
.sg-trust-card svg { color: hsl(var(--accent-emerald)); width: 3rem; height: 3rem; margin: 0 auto 1rem; }
.sg-trust-card h3 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.125rem;
	margin-bottom: 0.5rem;
}
.sg-trust-card p {
	color: hsl(var(--text-secondary));
	font-size: 0.875rem;
	line-height: 1.625;
}

/* ============================================================
   14. Rating bars
   ============================================================ */
.sg-rating-bar {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.sg-rating-bar__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 12rem;
	flex-shrink: 0;
}
.sg-rating-bar__label svg { color: hsl(var(--accent-emerald)); width: 1.25rem; height: 1.25rem; }
.sg-rating-bar__label span {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-primary));
}
.sg-rating-bar__track {
	flex: 1;
	height: 0.75rem;
	background-color: hsl(var(--bg-elevated));
	overflow: hidden;
}
.sg-rating-bar__fill {
	height: 100%;
	background: linear-gradient(to right, hsl(var(--accent-emerald)), hsl(var(--accent-emerald-dark)));
}
.sg-rating-bar__pct {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	color: hsl(var(--accent-gold));
	width: 2.5rem;
	text-align: right;
}

/* ============================================================
   15. Review cards
   ============================================================ */
.sg-reviews-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 1024px) { .sg-reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.sg-review-card {
	background-color: hsla(155, 30%, 13%, 0.8);
	backdrop-filter: blur(4px);
	border: 1px solid hsla(160, 81%, 40%, 0.15);
	border-top: 2px solid hsl(var(--accent-gold));
	padding: 1.5rem;
}
.sg-review-card__stars {
	display: flex;
	gap: 1px;
	margin-bottom: 0.75rem;
}
.sg-review-card__stars svg { width: 1rem; height: 1rem; }
.sg-review-card__star--filled { color: hsl(var(--accent-gold)); fill: currentColor; }
.sg-review-card__star--empty { color: hsla(215, 18%, 62%, 0.3); }
.sg-review-card__quote {
	color: hsl(var(--text-primary));
	font-size: 0.875rem;
	line-height: 1.625;
	margin-bottom: 1rem;
	font-style: italic;
}
.sg-review-card__meta {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	color: hsl(var(--text-secondary));
}
.sg-review-card__meta strong {
	font-weight: 600;
	color: hsl(var(--text-primary));
}

/* ============================================================
   16. About section (homepage)
   ============================================================ */
.sg-about-card {
	background-color: hsl(var(--bg-surface));
	padding: 2rem;
}
@media (min-width: 1024px) { .sg-about-card { padding: 3rem; } }
.sg-about-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}
@media (min-width: 1024px) { .sg-about-grid { grid-template-columns: 3fr 2fr; } }
.sg-about-paras { display: flex; flex-direction: column; gap: 1.5rem; }
.sg-about-paras p {
	color: hsl(var(--text-secondary));
	font-size: 1rem;
	line-height: 1.625;
	border-left: 3px solid hsl(var(--accent-emerald));
	padding-left: 1.5rem;
}
.sg-about-stats {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	gap: 2rem;
}
@media (min-width: 1024px) {
	.sg-about-stats { flex-direction: column; justify-content: center; }
}
.sg-about-stat { text-align: center; }
.sg-about-stat__value {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 2.25rem;
}
@media (min-width: 1024px) { .sg-about-stat__value { font-size: 3rem; } }
.sg-about-stat__label {
	color: hsl(var(--text-secondary));
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

/* ============================================================
   17. Team
   ============================================================ */
.sg-team-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 64rem;
	margin: 0 auto;
}
@media (min-width: 768px) { .sg-team-grid { grid-template-columns: repeat(2, 1fr); } }

.sg-team-card {
	background-color: hsla(155, 30%, 13%, 0.8);
	backdrop-filter: blur(4px);
	border: 1px solid hsla(160, 81%, 40%, 0.15);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
@media (min-width: 640px) { .sg-team-card { flex-direction: row; } }
.sg-team-card__avatar {
	width: 5rem;
	height: 5rem;
	overflow: hidden;
	border: 2px solid;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0 auto;
	border-radius: 9999px !important;
}
@media (min-width: 640px) { .sg-team-card__avatar { margin: 0; } }
.sg-team-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sg-team-card__avatar--emerald { border-color: hsl(var(--accent-emerald)); }
.sg-team-card__avatar--gold { border-color: hsl(var(--accent-gold)); }
.sg-team-card__body { display: flex; flex-direction: column; flex: 1; text-align: center; }
@media (min-width: 640px) { .sg-team-card__body { text-align: left; } }
.sg-team-card__name-row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 0.25rem;
}
@media (min-width: 640px) { .sg-team-card__name-row { flex-direction: row; align-items: baseline; gap: 0.5rem; } }
.sg-team-card__name {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.125rem;
}
.sg-team-card__title {
	color: hsl(var(--text-secondary));
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
}
.sg-team-card__meta {
	display: flex;
	gap: 1rem;
	font-size: 0.75rem;
	font-family: 'Inter', sans-serif;
	margin-bottom: 0.75rem;
	justify-content: center;
}
@media (min-width: 640px) { .sg-team-card__meta { justify-content: flex-start; } }
.sg-team-card__meta--emerald { color: hsl(var(--accent-emerald)); }
.sg-team-card__meta--gold { color: hsl(var(--accent-gold)); }
.sg-team-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.sg-team-card__meta svg { width: 0.875rem; height: 0.875rem; }
.sg-team-card__bio {
	color: hsl(var(--text-secondary));
	font-size: 0.875rem;
	line-height: 1.625;
	margin-bottom: 1rem;
}
.sg-team-card__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	justify-content: center;
}
@media (min-width: 640px) { .sg-team-card__actions { justify-content: flex-start; } }
.sg-team-card__profile-btn {
	background: linear-gradient(to right, hsl(var(--accent-emerald)), hsl(var(--accent-emerald-dark)));
	color: #fff;
	font-weight: 600;
	padding: 0.375rem 1rem;
	font-size: 0.75rem;
	font-family: 'Inter', sans-serif;
	transition: filter 0.2s;
}
.sg-team-card__profile-btn:hover { filter: brightness(1.1); }
.sg-team-card__icon-link { color: hsl(var(--text-secondary)); transition: color 0.2s; }
.sg-team-card__icon-link:hover { color: hsl(var(--accent-emerald)); }
.sg-team-card__icon-link svg { width: 1.25rem; height: 1.25rem; }

/* ============================================================
   18. Blog
   ============================================================ */
.sg-blog-top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .sg-blog-top { grid-template-columns: repeat(3, 1fr); } }
.sg-blog-bottom {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) { .sg-blog-bottom { grid-template-columns: repeat(2, 1fr); } }

.sg-blog-card {
	background-color: hsla(155, 30%, 13%, 0.8);
	backdrop-filter: blur(4px);
	border: 1px solid hsla(160, 81%, 40%, 0.15);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s, box-shadow 0.2s;
	color: inherit;
}
.sg-blog-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
}
.sg-blog-card__media {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.sg-blog-card__media--gradient-1 { background: linear-gradient(to bottom right, #1a472a, #2d5a3f); }
.sg-blog-card__media--gradient-2 { background: linear-gradient(to bottom right, #0a4d4d, #1a6b5a); }
.sg-blog-card__media--gradient-3 { background: linear-gradient(to bottom right, #1a1a5e, #2a2a7a); }
.sg-blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sg-blog-card__placeholder {
	color: rgba(255,255,255,0.2);
	font-family: 'Playfair Display', serif;
	font-size: 3.75rem;
	font-weight: 700;
}
.sg-blog-card__body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.sg-blog-card__title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1rem;
	line-height: 1.375;
	margin-bottom: 0.75rem;
}
.sg-blog-card__meta {
	display: flex;
	gap: 1rem;
	font-size: 0.75rem;
	color: hsl(var(--text-secondary));
	font-family: 'Inter', sans-serif;
	margin-bottom: 1rem;
}
.sg-blog-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.sg-blog-card__meta svg { width: 0.875rem; height: 0.875rem; }
.sg-blog-card__more {
	margin-top: auto;
	color: hsl(var(--accent-emerald));
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.sg-blog-card__more:hover { text-decoration: underline; }
.sg-blog-card__more svg { width: 1rem; height: 1rem; }

/* ============================================================
   19. FAQ accordion (native details/summary)
   ============================================================ */
.sg-faq { max-width: 48rem; margin: 0 auto; }
.sg-faq__item {
	background-color: hsl(var(--bg-surface));
	margin-bottom: 0.75rem;
	overflow: hidden;
}
.sg-faq__summary {
	padding: 1rem 1.5rem;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 0.875rem;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sg-faq__summary::-webkit-details-marker { display: none; }
.sg-faq__summary::after {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	border-right: 2px solid hsl(var(--text-secondary));
	border-bottom: 2px solid hsl(var(--text-secondary));
	transform: rotate(45deg);
	transition: transform 0.2s;
	margin-left: 1rem;
	flex-shrink: 0;
}
.sg-faq__item[open] .sg-faq__summary::after {
	transform: rotate(-135deg);
}
.sg-faq__answer {
	padding: 0 1.5rem 1rem;
	color: hsl(var(--text-secondary));
	font-size: 0.875rem;
	line-height: 1.625;
}

/* ============================================================
   20. Connect / Newsletter
   ============================================================ */
.sg-connect-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 56rem;
	margin: 0 auto;
}
@media (min-width: 768px) { .sg-connect-grid { grid-template-columns: repeat(2, 1fr); } }
.sg-connect-card {
	background-color: hsla(155, 30%, 13%, 0.8);
	backdrop-filter: blur(4px);
	border: 1px solid hsla(160, 81%, 40%, 0.15);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
}
@media (min-width: 768px) { .sg-connect-card { padding: 2rem; } }
.sg-connect-card h3 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}
.sg-connect-card p {
	color: hsl(var(--text-secondary));
	font-size: 0.875rem;
	margin-bottom: 1.25rem;
}
.sg-connect-card__form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: auto;
}
@media (min-width: 640px) { .sg-connect-card__form { flex-direction: row; } }
.sg-connect-card__input {
	flex: 1;
	background-color: hsl(var(--bg-elevated));
	border: 1px solid hsla(160, 81%, 40%, 0.15);
	padding: 0.75rem 1rem;
	color: hsl(var(--text-primary));
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	transition: border-color 0.2s;
}
.sg-connect-card__input::placeholder { color: hsla(215, 18%, 62%, 0.5); }
.sg-connect-card__input:focus { outline: none; border-color: hsl(var(--accent-emerald)); }
.sg-connect-card__submit {
	background-color: hsl(var(--accent-gold));
	color: #0F1A14;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	padding: 0.75rem 1.5rem;
	font-size: 0.875rem;
	transition: filter 0.2s;
	flex-shrink: 0;
	cursor: pointer;
}
.sg-connect-card__submit:hover { filter: brightness(1.1); }
.sg-connect-card__small {
	font-size: 0.75rem;
	color: hsla(215, 18%, 62%, 0.5);
	font-family: 'Inter', sans-serif;
	margin-top: 0.75rem;
}
.sg-connect-card__contact-list { margin-top: auto; display: flex; flex-direction: column; gap: 1rem; }
.sg-connect-card__email {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: hsl(var(--accent-emerald));
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
}
.sg-connect-card__email:hover { text-decoration: underline; }
.sg-connect-card__email svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.sg-connect-card__socials { display: flex; align-items: center; gap: 1rem; }
.sg-connect-card__socials a {
	color: hsl(var(--text-secondary));
	transition: color 0.2s;
}
.sg-connect-card__socials a:hover { color: hsl(var(--accent-emerald)); }
.sg-connect-card__socials svg { width: 1.25rem; height: 1.25rem; }

/* ============================================================
   21. Static-page common (breadcrumb, hero, content)
   ============================================================ */
.sg-page-hero {
	padding-top: 2.5rem;
	padding-bottom: 1rem;
}
.sg-page-hero--center { text-align: center; padding-top: 4rem; padding-bottom: 1.5rem; position: relative; overflow: hidden; }
.sg-page-hero__radial {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 50% 50%, hsla(160,81%,40%,0.05) 0%, transparent 70%);
}
.sg-page-hero__inner { max-width: 56rem; margin: 0 auto; padding: 0 1rem; position: relative; }
@media (min-width: 768px) { .sg-page-hero__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-page-hero__inner { padding: 0 2rem; } }
.sg-breadcrumb {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
}
.sg-breadcrumb a {
	color: hsl(var(--accent-emerald));
	transition: color 0.2s;
}
.sg-breadcrumb a:hover { text-decoration: underline; }
.sg-breadcrumb__sep { margin: 0 0.5rem; color: hsla(215, 18%, 62%, 0.5); }
.sg-breadcrumb__current { color: hsl(var(--text-primary)); }
.sg-page-hero__title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.875rem;
	margin-top: 1rem;
}
@media (min-width: 768px) { .sg-page-hero__title { font-size: 2.25rem; } }
.sg-page-hero__title--center { text-align: center; }
.sg-page-hero__subtitle {
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
	text-align: center;
	margin-top: 0.5rem;
}

.sg-page-content {
	padding-bottom: 4rem;
}
.sg-page-content__inner {
	max-width: 56rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-page-content__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-page-content__inner { padding: 0 2rem; } }
.sg-page-content h2 {
	font-family: 'Playfair Display', serif;
	color: hsl(var(--text-primary));
	font-size: 1.25rem;
	margin: 2.5rem 0 1rem;
}
.sg-page-content h2.h2-large {
	font-weight: 700;
	font-size: 1.5rem;
	margin-top: 3rem;
}
.sg-page-content h3 {
	font-family: 'Playfair Display', serif;
	color: hsl(var(--text-primary));
	font-size: 1.25rem;
	margin: 2rem 0 0.75rem;
}
.sg-page-content p {
	color: hsl(var(--text-secondary));
	font-family: 'Source Sans 3', sans-serif;
	font-size: 1rem;
	line-height: 1.625;
	margin: 0 0 1rem;
}
.sg-page-content a.in-link {
	color: hsl(var(--accent-emerald));
}
.sg-page-content a.in-link:hover { text-decoration: underline; }

/* ============================================================
   22. About page values grid
   ============================================================ */
.sg-values-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) { .sg-values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sg-values-grid { grid-template-columns: repeat(4, 1fr); } }
.sg-value-card {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	padding: 1.5rem;
	text-align: center;
}
.sg-value-card svg { width: 2.5rem; height: 2.5rem; margin: 0 auto; }
.sg-value-card svg.value-emerald { color: hsl(var(--accent-emerald)); }
.sg-value-card svg.value-gold { color: hsl(var(--accent-gold)); }
.sg-value-card__title {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: hsl(var(--text-primary));
	font-size: 0.875rem;
	margin-top: 0.75rem;
}
.sg-value-card__text {
	color: hsl(var(--text-secondary));
	font-size: 0.75rem;
	margin-top: 0.5rem;
}

/* ============================================================
   23. Contact form
   ============================================================ */
.sg-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: 64rem;
	margin: 0 auto;
}
@media (min-width: 1024px) { .sg-contact-grid { grid-template-columns: 3fr 2fr; gap: 3rem; } }
.sg-contact-card {
	background-color: hsl(var(--bg-surface));
	padding: 2rem;
	border: 1px solid hsl(var(--bg-elevated));
}
.sg-contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.sg-contact-form label {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
	margin-bottom: 0.375rem;
	display: block;
}
.sg-contact-form input,
.sg-contact-form textarea {
	width: 100%;
	background-color: hsl(var(--bg-elevated));
	border: 1px solid hsl(var(--bg-elevated));
	padding: 0.75rem 1rem;
	color: hsl(var(--text-primary));
	font-size: 0.875rem;
	font-family: 'Source Sans 3', sans-serif;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.sg-contact-form input::placeholder,
.sg-contact-form textarea::placeholder {
	color: hsla(215, 18%, 62%, 0.5);
}
.sg-contact-form input:focus,
.sg-contact-form textarea:focus {
	outline: none;
	border-color: hsl(var(--accent-emerald));
	box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3);
}
.sg-contact-form textarea { min-height: 160px; resize: vertical; }
.sg-contact-form__submit {
	align-self: flex-start;
	background: linear-gradient(to right, hsl(var(--accent-emerald)), hsl(var(--accent-emerald-dark)));
	color: #fff;
	font-weight: 600;
	padding: 0.75rem 2rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	transition: filter 0.2s, transform 0.2s;
	font-family: 'Source Sans 3', sans-serif;
	font-size: 1rem;
}
.sg-contact-form__submit:hover { filter: brightness(1.1); transform: scale(1.02); }
@media (min-width: 1024px) { .sg-contact-form__submit { align-self: flex-end; } }

.sg-info-card {
	background-color: hsl(var(--bg-surface));
	padding: 1.5rem;
	border: 1px solid hsl(var(--bg-elevated));
	margin-bottom: 1rem;
}
.sg-info-card__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}
.sg-info-card__head svg { width: 1.5rem; height: 1.5rem; }
.sg-info-card__head--emerald svg { color: hsl(var(--accent-emerald)); }
.sg-info-card__head--gold svg { color: hsl(var(--accent-gold)); }
.sg-info-card__head span {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: hsl(var(--text-primary));
	font-size: 0.875rem;
}

/* Subtle "How We Rate" testing-step circle */
.sg-step-circle {
	width: 2.5rem;
	height: 2.5rem;
	background-color: hsla(160, 81%, 40%, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: hsl(var(--accent-emerald));
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
	flex-shrink: 0;
	border-radius: 9999px !important;
}

/* "Cannot buy" / methodology table styles */
.sg-aff-steps-table {
	width: 100%;
	border-collapse: collapse;
}
.sg-aff-steps-table thead { background-color: hsl(var(--bg-elevated)); }
.sg-aff-steps-table th {
	text-align: left;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	color: hsl(var(--text-secondary));
	font-family: 'Inter', sans-serif;
	padding: 0.75rem 1.25rem;
}
.sg-aff-steps-table td {
	padding: 1rem 1.25rem;
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
	border-top: 1px solid hsla(160, 81%, 40%, 0.15);
}
.sg-aff-steps-table td.step-num {
	color: hsl(var(--accent-emerald));
	font-weight: 600;
	font-size: 1rem;
}

/* ============================================================
   24. Responsive desktop/mobile show-hide helpers
   ============================================================ */
.md-only { display: none; }
@media (min-width: 768px) { .md-only { display: block; } .md-hidden { display: none; } }

/* (Old .sg-divider section removed — class repurposed in section 26 for footer middle-dot.) */

/* ============================================================
   26. Logo (SISTER / gold bar / GUIDE)
   ============================================================ */
.sg-logo {
	display: flex;
	flex-direction: column;
	line-height: 1;
	user-select: none;
	font-family: 'DM Serif Display', serif;
	letter-spacing: -0.03em;
}
.sg-logo-link {
	display: inline-block;
	text-decoration: none;
}
.sg-logo-top {
	text-transform: uppercase;
	color: hsl(var(--text-primary));
	font-weight: 400;
	line-height: 1;
}
.sg-logo-bar {
	display: block;
	background-color: hsl(var(--accent-gold));
	margin: 2px 0;
}
.sg-logo-bottom {
	text-transform: uppercase;
	color: hsl(var(--accent-emerald));
	font-weight: 400;
	line-height: 1;
}

/* navbar size (default) */
.sg-logo .sg-logo-top,
.sg-logo .sg-logo-bottom { font-size: 22px; }
.sg-logo .sg-logo-bar { width: 34px; height: 2.5px; }
.sg-logo .sg-logo-bottom { margin-left: 10px; }

/* footer size modifier */
.sg-logo--footer .sg-logo-top,
.sg-logo--footer .sg-logo-bottom { font-size: 26px; }
.sg-logo--footer .sg-logo-bar { width: 40px; height: 2.5px; }
.sg-logo--footer .sg-logo-bottom { margin-left: 12px; }

/* ============================================================
   27. Top utility bar
   ============================================================ */
.sg-topbar {
	background-color: hsl(var(--bg-footer));
	color: hsl(var(--text-secondary));
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	height: 2rem;
	display: flex;
	align-items: center;
}
.sg-topbar-inner {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 1rem;
	padding-right: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
@media (min-width: 768px) { .sg-topbar-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .sg-topbar-inner { padding-left: 2rem; padding-right: 2rem; } }
.sg-topbar-meta { display: none; }
@media (min-width: 768px) { .sg-topbar-meta { display: inline; } }

/* ============================================================
   28. Sticky main navbar
   ============================================================ */
.sg-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: hsla(152, 28%, 11%, 0.9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid hsla(160, 81%, 40%, 0.15);
}
.sg-nav-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	height: 4rem;
}
@media (min-width: 768px) { .sg-nav-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-nav-inner { padding: 0 2rem; } }

.sg-nav-links {
	display: none;
	flex: 1 1 0%;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 768px) { .sg-nav-links { display: flex; } }

.sg-nav-link {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	color: hsl(var(--text-secondary));
	text-decoration: none;
	transition: color 150ms ease;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}
.sg-nav-link:hover { color: hsl(var(--accent-emerald)); }
.sg-nav-link--active {
	color: hsl(var(--accent-emerald));
	border-bottom-color: hsl(var(--accent-emerald));
}

.sg-nav-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	color: hsl(var(--text-primary));
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
@media (min-width: 768px) { .sg-nav-burger { display: none; } }
.sg-nav-burger svg { width: 24px; height: 24px; }

/* ============================================================
   29. Mobile drawer
   ============================================================ */
.sg-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: none;
}
.sg-mobile-drawer[data-drawer-open="true"] { display: block; }
@media (min-width: 768px) {
	.sg-mobile-drawer[data-drawer-open="true"] { display: none; }
}

.sg-mobile-drawer-backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.sg-mobile-drawer-panel {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 18rem;
	background-color: hsl(var(--bg-primary));
	border-left: 1px solid hsla(160, 81%, 40%, 0.15);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transform: translateX(100%);
	transition: transform 200ms ease;
}
.sg-mobile-drawer[data-drawer-open="true"] .sg-mobile-drawer-panel {
	transform: translateX(0);
}

.sg-mobile-drawer-close {
	align-self: flex-end;
	color: hsl(var(--text-primary));
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.sg-mobile-drawer-close svg { width: 24px; height: 24px; }

.sg-mobile-drawer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.sg-mobile-drawer-links a {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	color: hsl(var(--text-secondary));
	text-decoration: none;
	padding: 0.5rem 0;
	transition: color 150ms ease;
}
.sg-mobile-drawer-links a:hover { color: hsl(var(--accent-emerald)); }
.sg-mobile-drawer-links a.sg-mobile-drawer-link--active { color: hsl(var(--accent-emerald)); }

body.sg-drawer-open { overflow: hidden; }

/* ============================================================
   30. Footer
   ============================================================ */
.sg-footer {
	background-color: hsl(var(--bg-footer));
	padding-top: 3rem;
	padding-bottom: 3rem;
}
.sg-footer-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-footer-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-footer-inner { padding: 0 2rem; } }

.sg-footer-logo { margin-bottom: 2rem; }

.sg-footer-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}
@media (min-width: 768px) {
	.sg-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sg-footer-col h3 {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	color: hsl(var(--accent-emerald));
	letter-spacing: 0.025em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}
.sg-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sg-footer-col li + li { margin-top: 0.75rem; }
.sg-footer-col a {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
	text-decoration: none;
	display: inline-block;
	transition: color 150ms ease;
}
.sg-footer-col a:hover { color: hsl(var(--accent-emerald)); }

/* Responsible Gambling strip */
.sg-footer-rg {
	margin-top: 1.5rem;
	padding-top: 2rem;
	border-top: 1px solid hsla(160, 81%, 40%, 0.15);
}
.sg-footer-rg-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}
.sg-rg-badge {
	width: 2rem;
	height: 2rem;
	background-color: hsl(var(--danger));
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px !important;
	flex-shrink: 0;
}
.sg-footer-rg-row a {
	color: hsl(var(--text-secondary));
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	text-decoration: none;
	transition: color 150ms ease;
}
.sg-footer-rg-row a:hover { color: hsl(var(--accent-emerald)); }
.sg-divider {
	color: hsla(215, 18%, 62%, 0.3);
	font-size: 0.75rem;
	user-select: none;
}
.sg-footer-tagline {
	font-family: 'Source Sans 3', sans-serif;
	color: hsla(215, 18%, 62%, 0.7);
	font-size: 0.75rem;
	font-style: italic;
	text-align: center;
	margin: 0.75rem 0 0;
}

/* Legal block */
.sg-footer-legal {
	margin-top: 1.5rem;
	text-align: center;
}
.sg-footer-disclaimer {
	font-family: 'Source Sans 3', sans-serif;
	color: hsla(215, 18%, 62%, 0.7);
	font-size: 0.75rem;
	max-width: 48rem;
	margin: 0 auto;
	line-height: 1.625;
}
.sg-footer-copyright {
	font-family: 'Inter', sans-serif;
	color: hsla(215, 18%, 62%, 0.5);
	font-size: 0.75rem;
	margin: 0.75rem 0 0;
}

/* ============================================================
   31. Sister Site single-page hero
   ============================================================ */
.sg-sister-hero {
	padding: 3rem 0;
	background-color: hsl(var(--bg-primary));
}
@media (min-width: 768px) { .sg-sister-hero { padding: 4rem 0; } }
@media (min-width: 1024px) { .sg-sister-hero { padding: 5rem 0; } }
.sg-sister-hero__inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-sister-hero__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-sister-hero__inner { padding: 0 2rem; } }
.sg-sister-hero__breadcrumb {
	font-size: 0.75rem;
	color: hsla(215, 18%, 62%, 0.5);
	margin-bottom: 2rem;
	font-family: 'Inter', sans-serif;
}
.sg-sister-hero__breadcrumb a {
	color: hsl(var(--accent-emerald));
	text-decoration: none;
}
.sg-sister-hero__breadcrumb a:hover { text-decoration: underline; }
@media (min-width: 768px) { .sg-sister-hero__breadcrumb { font-size: 0.875rem; margin-bottom: 2.5rem; } }

.sg-sister-hero__row {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
@media (min-width: 768px) {
	.sg-sister-hero__row { flex-direction: row; align-items: center; justify-content: space-between; }
}
.sg-sister-hero__col { flex: 1; }
.sg-sister-hero__brand {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
}
.sg-sister-hero__dot {
	width: 16px;
	height: 16px;
	border-radius: 9999px !important;
	flex-shrink: 0;
}
.sg-sister-hero__brand-label {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsla(215, 18%, 62%, 0.4);
}
.sg-sister-hero__h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.5rem;
	line-height: 1.1;
}
@media (min-width: 768px) { .sg-sister-hero__h1 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .sg-sister-hero__h1 { font-size: 3rem; } }

.sg-sister-hero__facts {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 2rem;
}
@media (min-width: 768px) {
	.sg-sister-hero__facts {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem 3rem;
	}
}
.sg-sister-hero__fact {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}
.sg-sister-hero__fact-label {
	font-family: 'Inter', sans-serif;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsla(215, 18%, 62%, 0.3);
}
.sg-sister-hero__fact-value {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: hsl(var(--text-primary));
	font-size: 0.875rem;
}
@media (min-width: 768px) { .sg-sister-hero__fact-value { font-size: 1rem; } }
.sg-sister-hero__fact-value--link {
	color: hsl(var(--accent-emerald));
	text-decoration: none;
}
.sg-sister-hero__fact-value--link:hover { text-decoration: underline; }
.sg-sister-hero__fact-value--emerald { color: hsl(var(--accent-emerald)); }

.sg-sister-hero__square {
	display: none;
	width: 12rem;
	height: 12rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}
@media (min-width: 768px) { .sg-sister-hero__square { display: flex; } }
@media (min-width: 1024px) { .sg-sister-hero__square { width: 14rem; height: 14rem; } }
.sg-sister-hero__square-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.sg-sister-hero__square-fallback {
	color: #fff;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.5rem;
	text-align: center;
	padding: 0 1rem;
}
@media (min-width: 1024px) { .sg-sister-hero__square-fallback { font-size: 1.875rem; } }

/* ============================================================
   32. Sister Site intro box
   ============================================================ */
.sg-sister-intro {
	background-color: hsl(var(--bg-alt));
	padding-top: 2.5rem;
}
@media (min-width: 768px) { .sg-sister-intro { padding-top: 3rem; } }
.sg-sister-intro__inner {
	max-width: 56rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-sister-intro__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-sister-intro__inner { padding: 0 2rem; } }
.sg-sister-intro__card {
	background-color: hsl(var(--bg-alt));
	border: 1px solid hsl(var(--bg-elevated));
	padding: 1.5rem;
}
@media (min-width: 768px) { .sg-sister-intro__card { padding: 2rem; } }
.sg-sister-intro__eyebrow {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsla(215, 18%, 62%, 0.3);
	margin-bottom: 0.75rem;
}
.sg-sister-intro__body {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 1rem;
	line-height: 1.625;
}
.sg-sister-intro__body p { margin: 0 0 0.75rem; }
.sg-sister-intro__body p:last-child { margin-bottom: 0; }
.sg-sister-intro__body a { color: hsl(var(--accent-emerald)); }
.sg-sister-intro__body a:hover { text-decoration: underline; }

/* ============================================================
   33. Sister Site / Network main content
   ============================================================ */
.sg-sister-content,
.sg-network-content {
	padding: 3rem 0 0;
}
.sg-sister-content__inner,
.sg-network-content__inner {
	max-width: 56rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 768px) {
	.sg-sister-content__inner,
	.sg-network-content__inner { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
	.sg-sister-content__inner,
	.sg-network-content__inner { padding: 0 2rem; }
}
.sg-sister-content__inner h2,
.sg-network-content__inner h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.5rem;
	margin: 3rem 0 1rem;
}
.sg-sister-content__inner h2:first-child,
.sg-network-content__inner h2:first-child { margin-top: 0; }
.sg-sister-content__inner h3,
.sg-network-content__inner h3 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.25rem;
	margin: 2rem 0 0.75rem;
}
.sg-sister-content__inner p,
.sg-network-content__inner p {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 1rem;
	line-height: 1.625;
	margin: 0 0 1rem;
}
.sg-sister-content__inner a,
.sg-network-content__inner a {
	color: hsl(var(--accent-emerald));
}
.sg-sister-content__inner a:hover,
.sg-network-content__inner a:hover { text-decoration: underline; }
.sg-sister-content__inner table,
.sg-network-content__inner table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
	font-family: 'Source Sans 3', sans-serif;
}
.sg-sister-content__inner th,
.sg-network-content__inner th {
	background-color: hsl(var(--bg-elevated));
	color: hsl(var(--text-secondary));
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	text-align: left;
	padding: 0.75rem 1rem;
}
.sg-sister-content__inner td,
.sg-network-content__inner td {
	padding: 0.75rem 1rem;
	color: hsl(var(--text-secondary));
	border-top: 1px solid hsl(var(--bg-elevated));
}

/* ============================================================
   34. Expert / author box — used by blog post bylines.
   (Sister-site + network templates now use template-parts/author-box.php
    with .sg-author-box-* classes instead.)
   ============================================================ */
.sg-expert-card {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: border-color 200ms ease;
}
@media (min-width: 768px) {
	.sg-expert-card { padding: 2rem; flex-direction: row; align-items: flex-start; gap: 2rem; }
}
.sg-expert-card--emerald:hover { border-color: hsla(160, 81%, 40%, 0.6); }
.sg-expert-card--gold:hover    { border-color: hsla(36, 90%, 55%, 0.6); }
.sg-expert-card__avatar {
	width: 4rem;
	height: 4rem;
	border-radius: 9999px !important;
	overflow: hidden;
	border: 2px solid;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 768px) { .sg-expert-card__avatar { width: 5rem; height: 5rem; } }
.sg-expert-card__avatar--emerald { border-color: hsl(var(--accent-emerald)); }
.sg-expert-card__avatar--gold    { border-color: hsl(var(--accent-gold)); }
.sg-expert-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sg-expert-card__body { flex: 1; min-width: 0; }
.sg-expert-card__name {
	font-family: 'Inter', sans-serif;
	color: hsl(var(--text-primary));
	font-weight: 600;
	font-size: 1rem;
	margin: 0;
}
@media (min-width: 768px) { .sg-expert-card__name { font-size: 1.125rem; } }
.sg-expert-card__title {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	margin: 0.125rem 0 0;
}
.sg-expert-card__title--emerald { color: hsl(var(--accent-emerald)); }
.sg-expert-card__title--gold    { color: hsl(var(--accent-gold)); }
.sg-expert-card__pills {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}
.sg-expert-card__pill {
	background-color: hsl(var(--bg-elevated));
	font-family: 'Inter', sans-serif;
	font-size: 0.625rem;
	font-weight: 500;
	padding: 0.25rem 0.75rem;
}
@media (min-width: 768px) { .sg-expert-card__pill { font-size: 0.75rem; } }
.sg-expert-card__pill--emerald { color: hsl(var(--accent-emerald)); }
.sg-expert-card__pill--gold    { color: hsl(var(--accent-gold)); }
.sg-expert-card__bio {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 0.875rem;
	line-height: 1.625;
	margin: 1rem 0 0;
}

/* ============================================================
   35. Cross-nav (shared)
   ============================================================ */
.sg-cross-nav {
	max-width: 64rem;
	margin: 3rem auto 4rem;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-cross-nav { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-cross-nav { padding: 0 2rem; } }
.sg-cross-nav__heading {
	font-family: 'Inter', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}
.sg-cross-nav__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.sg-cross-nav__pill {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	padding: 0.625rem 1.25rem;
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}
.sg-cross-nav__pill:hover {
	background-color: hsl(var(--accent-emerald));
	color: #fff;
}
.sg-cross-nav__back {
	display: block;
	color: hsl(var(--accent-emerald));
	font-size: 0.875rem;
	margin-top: 1rem;
	text-decoration: none;
}
.sg-cross-nav__back:hover { text-decoration: underline; }

/* ============================================================
   36. Sister Site / Network archive grid
   ============================================================ */
.sg-archive-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
@media (min-width: 768px) { .sg-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 1024px) { .sg-archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sg-archive-card {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 200ms ease, box-shadow 200ms ease;
	color: inherit;
	text-decoration: none;
}
.sg-archive-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(16, 185, 129, 0.1);
}
.sg-archive-card__square {
	position: relative;
	height: 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-image: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.15));
}
.sg-archive-card__square img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sg-archive-card__fallback { color: #fff; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1rem; padding: 0 0.5rem; text-align: center; }
.sg-archive-card__body { padding: 1rem; display: flex; flex-direction: column; flex: 1; }
.sg-archive-card__name {
	font-family: 'Playfair Display', serif;
	color: hsl(var(--text-primary));
	font-weight: 700;
	font-size: 1rem;
	margin: 0 0 0.25rem;
}
.sg-archive-card__meta {
	font-family: 'Inter', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 0.75rem;
	margin: 0 0 0.75rem;
}
.sg-archive-card__cta {
	margin-top: auto;
	color: hsl(var(--accent-emerald));
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
}
.sg-archive-empty {
	color: hsl(var(--text-secondary));
	text-align: center;
	font-family: 'Source Sans 3', sans-serif;
	padding: 3rem 0;
}

/* ============================================================
   37. FAQ section wrapper used by sister-site + network singles
   ============================================================ */
.sg-faq-section {
	margin-top: 3rem;
}
.sg-faq-section .sg-section__heading { margin-bottom: 2rem; }

/* ============================================================
   38. Network single-page hero
   ============================================================ */
.sg-network-hero {
	padding: 3rem 0;
	background-color: hsl(var(--bg-primary));
}
@media (min-width: 768px) { .sg-network-hero { padding: 4rem 0; } }
@media (min-width: 1024px) { .sg-network-hero { padding: 5rem 0; } }
.sg-network-hero__inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-network-hero__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-network-hero__inner { padding: 0 2rem; } }
.sg-network-hero__breadcrumb {
	font-size: 0.75rem;
	color: hsla(215, 18%, 62%, 0.5);
	margin-bottom: 2rem;
	font-family: 'Inter', sans-serif;
}
.sg-network-hero__breadcrumb a { color: hsl(var(--accent-emerald)); text-decoration: none; }
.sg-network-hero__breadcrumb a:hover { text-decoration: underline; }
@media (min-width: 768px) { .sg-network-hero__breadcrumb { font-size: 0.875rem; margin-bottom: 2.5rem; } }
.sg-network-hero__brand {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
}
.sg-network-hero__dot {
	width: 16px;
	height: 16px;
	border-radius: 9999px !important;
	flex-shrink: 0;
}
.sg-network-hero__brand-label {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsla(215, 18%, 62%, 0.4);
}
.sg-network-hero__h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.5rem;
	line-height: 1.1;
}
@media (min-width: 768px) { .sg-network-hero__h1 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .sg-network-hero__h1 { font-size: 3rem; } }
.sg-network-hero__tagline {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 1rem;
	font-style: italic;
	margin-top: 0.5rem;
}
@media (min-width: 768px) { .sg-network-hero__tagline { font-size: 1.125rem; } }
.sg-network-hero__facts {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 2rem;
}
@media (min-width: 768px) {
	.sg-network-hero__facts {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem 3rem;
	}
}
.sg-network-hero__fact {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}
.sg-network-hero__fact-label {
	font-family: 'Inter', sans-serif;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsla(215, 18%, 62%, 0.3);
}
.sg-network-hero__fact-value {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: hsl(var(--text-primary));
	font-size: 0.875rem;
}
@media (min-width: 768px) { .sg-network-hero__fact-value { font-size: 1rem; } }
.sg-network-hero__fact-value--emerald { color: hsl(var(--accent-emerald)); }

/* ============================================================
   39. Network: intro box, brand pills, FAQ section
   ============================================================ */
.sg-network-intro {
	background-color: hsl(var(--bg-alt));
	padding-top: 2.5rem;
}
@media (min-width: 768px) { .sg-network-intro { padding-top: 3rem; } }
.sg-network-intro__inner {
	max-width: 56rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-network-intro__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-network-intro__inner { padding: 0 2rem; } }
.sg-network-intro__card {
	background-color: hsl(var(--bg-alt));
	border: 1px solid hsl(var(--bg-elevated));
	padding: 1.5rem;
}
@media (min-width: 768px) { .sg-network-intro__card { padding: 2rem; } }
.sg-network-intro__eyebrow {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsla(215, 18%, 62%, 0.3);
	margin-bottom: 0.75rem;
}
.sg-network-intro__body {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 1rem;
	line-height: 1.625;
}
.sg-network-intro__body p { margin: 0 0 0.75rem; }
.sg-network-intro__body p:last-child { margin-bottom: 0; }

.sg-network-brands {
	max-width: 64rem;
	margin: 2.5rem auto 0;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-network-brands { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-network-brands { padding: 0 2rem; } }
.sg-network-brands__heading {
	font-family: 'Inter', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}
.sg-network-brands__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.sg-network-brand-pill {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	padding: 0.5rem 1rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	color: hsl(var(--accent-emerald));
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}
.sg-network-brand-pill:hover {
	background-color: hsl(var(--accent-emerald));
	color: #fff;
}
.sg-network-brand-pill--static {
	color: hsl(var(--text-secondary));
	cursor: default;
}
.sg-network-brand-pill--static:hover {
	background-color: hsl(var(--bg-surface));
	color: hsl(var(--text-secondary));
}

/* ============================================================
   40. Network archive — hero, cards, comparison table, editorial, FAQ
   ============================================================ */
.sg-net-hero {
	position: relative;
	padding: 4rem 0 3rem;
	text-align: center;
	overflow: hidden;
}
@media (min-width: 768px) { .sg-net-hero { padding: 5rem 0 4rem; } }
.sg-net-hero__radial {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 50% 50%, hsla(160,81%,40%,0.05) 0%, transparent 70%);
}
.sg-net-hero__inner {
	position: relative;
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-net-hero__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-net-hero__inner { padding: 0 2rem; } }
.sg-net-hero__breadcrumb { text-align: left; }
.sg-net-hero__h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.875rem;
	margin-top: 1rem;
}
@media (min-width: 768px) { .sg-net-hero__h1 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .sg-net-hero__h1 { font-size: 3rem; } }
.sg-net-hero__lead {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 1rem;
	line-height: 1.625;
	max-width: 42rem;
	margin: 1rem auto 0;
}
@media (min-width: 768px) { .sg-net-hero__lead { font-size: 1.125rem; } }
.sg-net-hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	margin-top: 2rem;
}
@media (min-width: 768px) { .sg-net-hero__stats { gap: 3rem; } }
.sg-net-hero__stat { display: flex; flex-direction: column; align-items: center; }
.sg-net-hero__stat-num {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.875rem;
}
.sg-net-hero__stat-num--emerald { color: hsl(var(--accent-emerald)); }
.sg-net-hero__stat-num--gold    { color: hsl(var(--accent-gold)); }
.sg-net-hero__stat-label {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
}

/* Network cards grid */
.sg-net-cards-section { padding-bottom: 3rem; }
.sg-net-cards-inner {
	max-width: 72rem;
	margin: 3rem auto 0;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-net-cards-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-net-cards-inner { padding: 0 2rem; } }
.sg-net-cards-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) { .sg-net-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sg-net-cards-grid { grid-template-columns: repeat(3, 1fr); } }

.sg-net-card {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	padding: 1.5rem;
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.sg-net-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
	border-color: hsl(var(--accent-emerald));
}
.sg-net-card__name {
	font-family: 'Playfair Display', serif;
	color: hsl(var(--text-primary));
	font-size: 1.125rem;
	margin: 0;
}
.sg-net-card__tagline {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 0.75rem;
	margin: 0.25rem 0 0;
}
.sg-net-card__facts {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	color: hsl(var(--text-secondary));
}
.sg-net-card__facts p { margin: 0; }
.sg-net-card__share {
	color: hsl(var(--accent-emerald));
	font-weight: 600;
}
.sg-net-card__pills {
	margin-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}
.sg-net-card__pill {
	background-color: hsl(var(--bg-elevated));
	color: hsl(var(--text-secondary));
	font-family: 'Inter', sans-serif;
	font-size: 0.625rem;
	padding: 0.125rem 0.5rem;
}
.sg-net-card__footer {
	margin-top: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sg-net-card__badge {
	color: hsl(var(--accent-emerald));
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	display: inline-flex;
	align-items: center;
}
.sg-net-card__more {
	color: hsl(var(--accent-gold));
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
}
.sg-net-card__more:hover { text-decoration: underline; }

/* Comparison table */
.sg-net-compare-section { padding-bottom: 3rem; }
.sg-net-compare-inner {
	max-width: 72rem;
	margin: 4rem auto 0;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-net-compare-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-net-compare-inner { padding: 0 2rem; } }
.sg-net-compare__h2 {
	font-family: 'Playfair Display', serif;
	color: hsl(var(--text-primary));
	font-size: 1.5rem;
	text-align: center;
	margin: 0 0 0.5rem;
}
.sg-net-compare__lead {
	color: hsl(var(--text-secondary));
	font-family: 'Source Sans 3', sans-serif;
	text-align: center;
	margin: 0 0 2rem;
}
.sg-net-compare__table-wrap {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	overflow-x: auto;
}
.sg-net-compare__table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}
.sg-net-compare__table thead { background-color: hsl(var(--bg-elevated)); }
.sg-net-compare__table th {
	padding: 0.75rem 1rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;  /* Tailwind tracking-wider */
	color: hsl(var(--text-secondary));
}
.sg-net-compare__table tbody tr {
	border-top: 1px solid hsl(var(--bg-elevated));
	transition: background-color 150ms ease;
}
.sg-net-compare__table tbody tr:hover {
	background-color: hsla(155, 28%, 17%, 0.5);
}
.sg-net-compare__table td {
	padding: 0.75rem 1rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
	vertical-align: middle;
}
.sg-net-compare__name {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: hsl(var(--text-primary));
	font-size: 0.875rem;
	text-decoration: none;
}
.sg-net-compare__name:hover { color: hsl(var(--accent-emerald)); }
.sg-net-compare__tagline {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 0.75rem;
}
.sg-net-compare__share {
	color: hsl(var(--accent-emerald));
	font-weight: 600;
}
.sg-net-compare__badge {
	color: hsl(var(--accent-emerald));
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	display: inline-flex;
	align-items: center;
}
.sg-net-compare__mobile { display: flex; flex-direction: column; gap: 1rem; }
.sg-net-compare__mcard {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	padding: 1rem;
}
.sg-net-compare__mcard-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 0.5rem;
}
.sg-net-compare__mgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	margin-top: 0.5rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	color: hsl(var(--text-primary));
}
.sg-net-compare__mgrid span:first-child { color: hsl(var(--text-secondary)); }
.sg-net-compare__note {
	color: hsla(215, 18%, 62%, 0.6);
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	text-align: center;
	margin: 1rem 0 0;
}

/* Editorial */
.sg-net-editorial { padding-bottom: 3rem; }
.sg-net-editorial__inner {
	max-width: 56rem;
	margin: 4rem auto 0;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-net-editorial__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-net-editorial__inner { padding: 0 2rem; } }
.sg-net-editorial h2 {
	font-family: 'Playfair Display', serif;
	color: hsl(var(--text-primary));
	font-size: 1.5rem;
	margin: 2.5rem 0 1rem;
}
.sg-net-editorial h2:first-child { margin-top: 0; }
.sg-net-editorial p {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 1rem;
	line-height: 1.625;
	margin: 0 0 1rem;
}

/* Network FAQ */
.sg-net-faq-section { padding-bottom: 4rem; }
.sg-net-faq__inner {
	max-width: 48rem;
	margin: 4rem auto 0;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-net-faq__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-net-faq__inner { padding: 0 2rem; } }
.sg-net-faq__h2 {
	font-family: 'Playfair Display', serif;
	color: hsl(var(--text-primary));
	font-size: 1.5rem;
	text-align: center;
	margin: 0 0 2rem;
}

/* ============================================================
   41. Sister Sites archive page (Page-rendered with shortcode)
   ============================================================ */
.sg-ss-hero {
	position: relative;
	padding: 5rem 0 3rem;
	text-align: center;
	overflow: hidden;
	background-color: hsl(var(--bg-surface));
}
@media (min-width: 768px) { .sg-ss-hero { padding: 7rem 0 4rem; } }
.sg-ss-hero__bg {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(ellipse at 50% 40%, hsla(160,81%,40%,0.06) 0%, transparent 60%),
		radial-gradient(ellipse at 80% 80%, hsla(160,81%,40%,0.03) 0%, transparent 50%);
}
.sg-ss-hero__inner {
	position: relative;
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
}
.sg-ss-hero__breadcrumb {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	color: hsla(215, 18%, 62%, 0.7);
	margin-bottom: 2rem;
	letter-spacing: 0.025em;
}
.sg-ss-hero__breadcrumb a { color: hsl(var(--accent-emerald)); text-decoration: none; }
.sg-ss-hero__breadcrumb a:hover { color: hsl(var(--accent-emerald)); }
.sg-ss-hero__breadcrumb .sep { margin: 0 0.5rem; color: hsla(215,18%,62%,0.4); }
.sg-ss-hero__breadcrumb .current { color: hsl(var(--text-primary)); font-weight: 500; }

.sg-ss-hero__h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 2.25rem;
	line-height: 1.15;
	letter-spacing: -0.025em;
}
@media (min-width: 768px) { .sg-ss-hero__h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .sg-ss-hero__h1 { font-size: 3.5rem; } }
.sg-ss-hero__lead {
	color: hsl(var(--text-secondary));
	font-family: 'Source Sans 3', sans-serif;
	font-size: 1rem;
	max-width: 42rem;
	margin: 1.25rem auto 0;
	line-height: 1.625;
}
@media (min-width: 768px) { .sg-ss-hero__lead { font-size: 1.125rem; } }
.sg-ss-hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 2rem;
	margin-top: 2rem;
}
.sg-ss-hero__stat {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: hsla(215,18%,62%,0.8);
}
.sg-ss-hero__stat .icon { color: hsl(var(--accent-emerald)); }

.sg-ss-list {
	background-color: hsl(var(--bg-alt));
	padding: 3rem 0;
}
@media (min-width: 768px) { .sg-ss-list { padding: 4rem 0; } }
@media (min-width: 1024px) { .sg-ss-list { padding: 5rem 0; } }
.sg-ss-list__inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-ss-list__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sg-ss-list__inner { padding: 0 2rem; } }
.sg-ss-list__header {
	margin: 0 auto 2rem;
	max-width: 48rem;
	text-align: center;
}
.sg-ss-list__header h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.5rem;
}
@media (min-width: 768px) { .sg-ss-list__header h2 { font-size: 1.875rem; } }
.sg-ss-list__header p {
	color: hsl(var(--text-secondary));
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	line-height: 1.625;
	margin: 0.75rem 0 0;
}
@media (min-width: 768px) { .sg-ss-list__header p { font-size: 1rem; } }
.sg-ss-list__disclaimer {
	color: hsla(215,18%,62%,0.5);
	font-size: 0.625rem;
	text-align: center;
	max-width: 48rem;
	margin: 1.5rem auto 0;
}

.sg-ss-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;
}
@media (min-width: 640px) { .sg-ss-grid { gap: 1rem; } }
@media (min-width: 768px) { .sg-ss-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .sg-ss-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.sg-ss-card {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.sg-ss-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(16, 185, 129, 0.1);
}
.sg-ss-card__logo {
	position: relative;
	height: 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.sg-ss-card__logo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sg-ss-card__fallback {
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	padding: 0 0.5rem;
	text-align: center;
}
.sg-ss-card__body {
	padding: 0.625rem 0.625rem 0.25rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
@media (min-width: 640px) { .sg-ss-card__body { padding: 0.75rem 0.75rem 0.25rem; } }
.sg-ss-card__name {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: hsl(var(--text-primary));
	font-size: 0.75rem;
	line-height: 1.25;
	text-align: center;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (min-width: 640px) { .sg-ss-card__name { font-size: 0.875rem; } }
.sg-ss-card__action {
	padding: 0 0.625rem 0.625rem;
}
@media (min-width: 640px) { .sg-ss-card__action { padding: 0 0.75rem 0.75rem; } }
.sg-ss-card__btn {
	display: block;
	width: 100%;
	text-align: center;
	background-color: hsl(var(--accent-emerald));
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 0.625rem;
	padding: 0.5rem;
	transition: filter 0.2s;
}
@media (min-width: 640px) { .sg-ss-card__btn { font-size: 0.75rem; padding: 0.625rem; } }
.sg-ss-card:hover .sg-ss-card__btn { filter: brightness(1.1); }

.sg-ss-faq {
	padding: 3rem 0;
}
@media (min-width: 768px) { .sg-ss-faq { padding: 4rem 0; } }
.sg-ss-faq__inner {
	max-width: 48rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-ss-faq__inner { padding: 0 1.5rem; } }
.sg-ss-faq__inner h2 {
	font-family: 'Playfair Display', serif;
	color: hsl(var(--text-primary));
	font-size: 1.5rem;
	text-align: center;
	margin: 0 0 2rem;
}

/* ============================================================
   42. Blog index — 3-col card grid
   ============================================================ */
.sg-blog-hero {
	position: relative;
	padding: 4rem 0 3rem;
	text-align: center;
	overflow: hidden;
}
@media (min-width: 768px) { .sg-blog-hero { padding: 5rem 0 4rem; } }
.sg-blog-hero__radial {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at center, hsla(160,81%,40%,0.05) 0%, transparent 70%);
}
.sg-blog-hero__inner {
	position: relative;
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1rem;
}
.sg-blog-hero__inner .sg-breadcrumb { text-align: left; font-family: 'Inter', sans-serif; }
.sg-blog-hero__h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.875rem;
	text-align: center;
	margin-top: 1rem;
}
@media (min-width: 768px) { .sg-blog-hero__h1 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .sg-blog-hero__h1 { font-size: 3rem; } }
.sg-blog-hero__lead {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 1.125rem;
	max-width: 42rem;
	margin: 1rem auto 0;
	text-align: center;
}
.sg-blog-list { padding-bottom: 4rem; }
.sg-blog-list__inner {
	max-width: 72rem;
	margin: 3rem auto 0;
	padding: 0 1rem;
}
@media (min-width: 768px) { .sg-blog-list__inner { padding: 0 1.5rem; } }
.sg-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) { .sg-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sg-blog-grid { grid-template-columns: repeat(3, 1fr); } }
.sg-blog-card {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsla(160, 81%, 40%, 0.15);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.sg-blog-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
}
.sg-blog-card__media {
	position: relative;
	height: 12rem;
	background-color: hsl(var(--bg-elevated));
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.sg-blog-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-blog-card__cat {
	position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2;
	padding: 0.25rem 0.75rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
}
.sg-blog-card__cat--gold    { background-color: hsla(36, 90%, 55%, 0.2); color: hsl(var(--accent-gold)); }
.sg-blog-card__cat--emerald { background-color: hsla(160, 81%, 40%, 0.2); color: hsl(var(--accent-emerald)); }
.sg-blog-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.sg-blog-card__title {
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	color: hsl(var(--text-primary));
	font-size: 1rem;
	line-height: 1.375;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sg-blog-card__excerpt {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 0.875rem;
	margin: 0.5rem 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sg-blog-card__footer {
	margin-top: auto;
	padding-top: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid hsla(160, 81%, 40%, 0.15);
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
}
.sg-blog-card__byline { color: hsl(var(--text-secondary)); }
.sg-blog-card__read   { color: hsl(var(--accent-emerald)); }

/* ============================================================
   43. Single blog post layout
   ============================================================ */
.sg-post {
	max-width: 56rem;
	margin: 0 auto;
	padding: 0 1rem 4rem;
}
@media (min-width: 768px) { .sg-post { padding: 0 1.5rem 4rem; } }
.sg-post__breadcrumb {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
	padding-top: 2rem;
}
.sg-post__breadcrumb a { color: hsl(var(--accent-emerald)); text-decoration: none; }
.sg-post__breadcrumb a:hover { text-decoration: underline; }

.sg-post__hero { padding: 3rem 0 2rem; }
@media (min-width: 768px) { .sg-post__hero { padding: 4rem 0 2rem; } }
.sg-post-cat {
	display: inline-block;
	padding: 0.375rem 1rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 9999px !important;
}
.sg-post-cat--gold    { background-color: hsla(36, 90%, 55%, 0.2); color: hsl(var(--accent-gold)); }
.sg-post-cat--emerald { background-color: hsla(160, 81%, 40%, 0.2); color: hsl(var(--accent-emerald)); }
.sg-post__h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.875rem;
	line-height: 1.15;
	margin: 1rem 0 0;
}
@media (min-width: 768px) { .sg-post__h1 { font-size: 2.25rem; } }
.sg-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
}
.sg-post__byline { display: flex; align-items: center; gap: 0.375rem; }
.sg-post__byline a { color: hsl(var(--text-secondary)); text-decoration: none; }
.sg-post__byline a:hover { color: hsl(var(--accent-emerald)); }
.sg-post__author-avatar {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 9999px !important;
	overflow: hidden;
	background-color: hsl(var(--bg-elevated));
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sg-post__author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sg-post__featured {
	width: 100%;
	height: 16rem;
	overflow: hidden;
	background-color: hsl(var(--bg-surface));
}
@media (min-width: 768px) { .sg-post__featured { height: 20rem; } }
.sg-post__featured img { width: 100%; height: 100%; object-fit: cover; }
.sg-post__featured--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid hsla(160, 81%, 40%, 0.15);
	color: hsla(215, 18%, 62%, 0.3);
}
.sg-post__article {
	margin: 2.5rem 0 3rem;
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 1rem;
	line-height: 1.7;
}
.sg-post__article h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.5rem;
	margin: 2.5rem 0 1rem;
}
.sg-post__article h2:first-child { margin-top: 0; }
.sg-post__article h3 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.25rem;
	margin: 2rem 0 0.75rem;
}
.sg-post__article p { margin: 0 0 1rem; }
.sg-post__article a { color: hsl(var(--accent-emerald)); }
.sg-post__article a:hover { text-decoration: underline; }
.sg-post__author-section { margin: 2rem 0 3rem; }
.sg-post__author-eyebrow {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsla(215, 18%, 62%, 0.5);
	margin: 0 0 1rem;
	text-align: center;
}
.sg-post__back { margin: 2rem 0; }
.sg-post__back a {
	color: hsl(var(--accent-emerald));
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	text-decoration: none;
}
.sg-post__back a:hover { text-decoration: underline; }

/* ============================================================
   44. Single Author profile
   ============================================================ */
.sg-author {
	max-width: 56rem;
	margin: 0 auto;
	padding: 3rem 1rem 4rem;
}
@media (min-width: 768px) { .sg-author { padding: 4rem 1.5rem 5rem; } }
.sg-author__breadcrumb {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
	margin-bottom: 2rem;
}
.sg-author__breadcrumb a { color: hsl(var(--accent-emerald)); text-decoration: none; }
.sg-author__breadcrumb a:hover { text-decoration: underline; }

.sg-author__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.sg-author__head { flex-direction: row; align-items: flex-start; gap: 2rem; }
}
.sg-author__avatar {
	width: 7rem;
	height: 7rem;
	border-radius: 9999px !important;
	overflow: hidden;
	border: 3px solid;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background-color: hsl(var(--bg-elevated));
}
@media (min-width: 768px) { .sg-author__avatar { width: 9rem; height: 9rem; } }
.sg-author__avatar--emerald { border-color: hsl(var(--accent-emerald)); }
.sg-author__avatar--gold    { border-color: hsl(var(--accent-gold)); }
.sg-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sg-author__avatar-initials {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.875rem;
}
@media (min-width: 768px) { .sg-author__avatar-initials { font-size: 2.25rem; } }
.sg-author__title-text--emerald { color: hsl(var(--accent-emerald)); }
.sg-author__title-text--gold    { color: hsl(var(--accent-gold)); }

.sg-author__intro {
	flex: 1;
	text-align: center;
}
@media (min-width: 768px) { .sg-author__intro { text-align: left; } }
.sg-author__name {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.5rem;
	margin: 0;
}
@media (min-width: 768px) { .sg-author__name { font-size: 1.875rem; } }
.sg-author__title {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}
@media (min-width: 768px) { .sg-author__title { font-size: 1rem; } }
.sg-author__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.75rem;
	justify-content: center;
}
@media (min-width: 768px) { .sg-author__pills { justify-content: flex-start; } }
.sg-author__pill {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	border-radius: 9999px !important;
	padding: 0.375rem 1rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
}
.sg-author__pill--emerald { color: hsl(var(--accent-emerald)); }
.sg-author__pill--gold    { color: hsl(var(--accent-gold)); }
.sg-author__socials {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.75rem;
	justify-content: center;
}
@media (min-width: 768px) { .sg-author__socials { justify-content: flex-start; } }
.sg-author__socials a {
	color: hsla(215, 18%, 62%, 0.4);
	transition: color 200ms ease;
}
.sg-author__socials a:hover { color: hsl(var(--accent-emerald)); }

.sg-author__about,
.sg-author__expertise,
.sg-author__philosophy { margin-top: 2.5rem; }
.sg-author__about h2,
.sg-author__expertise h2,
.sg-author__philosophy h2 {
	font-family: 'Playfair Display', serif;
	color: hsl(var(--text-primary));
	font-size: 1.25rem;
	margin: 0 0 1rem;
}
.sg-author__about p,
.sg-author__about > div p {
	color: hsl(var(--text-secondary));
	font-family: 'Source Sans 3', sans-serif;
	font-size: 1rem;
	line-height: 1.625;
	margin: 0 0 1rem;
}
.sg-author__expertise-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.sg-author__expertise-pill {
	background-color: hsl(var(--bg-elevated));
	border: 1px solid hsla(160, 81%, 40%, 0.15);
	padding: 0.5rem 1rem;
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
}
.sg-author__quote {
	border-left: 3px solid;
	padding-left: 1.5rem;
	font-style: italic;
	color: hsl(var(--text-secondary));
	font-family: 'Source Sans 3', sans-serif;
	font-size: 1rem;
	line-height: 1.625;
	margin: 0;
}
.sg-author__quote--emerald { border-left-color: hsl(var(--accent-emerald)); }
.sg-author__quote--gold    { border-left-color: hsl(var(--accent-gold)); }

.sg-author__back {
	margin-top: 2.5rem;
}
.sg-author__back a {
	color: hsl(var(--accent-emerald));
	font-size: 0.875rem;
	text-decoration: none;
}
.sg-author__back a:hover { text-decoration: underline; }

/* ============================================================
   AUTHOR — accent utility variants (shared across box + page)
   ============================================================ */

.sg-text-emerald   { color: hsl(var(--accent-emerald)); }
.sg-text-gold      { color: hsl(var(--accent-gold)); }
.sg-border-emerald { border-color: hsl(var(--accent-emerald)) !important; }
.sg-border-gold    { border-color: hsl(var(--accent-gold)) !important; }
.sg-hover-emerald:hover { color: hsl(var(--accent-emerald)); }
.sg-hover-gold:hover    { color: hsl(var(--accent-gold)); }

/* ============================================================
   AUTHOR BOX — small "Reviewed by Our Expert Team" card
   Mirrors src/components/ExpertBox.tsx (single-expert layout)
   ============================================================ */

.sg-author-box-wrap {
	max-width: 64rem;          /* ~max-w-5xl */
	margin: 4rem auto 0;       /* mt-16 */
	padding-top: 3rem;         /* pt-12 */
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 768px) {
	.sg-author-box-wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
	.sg-author-box-wrap { padding-left: 2rem; padding-right: 2rem; }
}

.sg-author-box-eyebrow {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: hsla(215, 18%, 62%, 0.5);
	text-align: center;
	margin: 0 0 2rem;
}

.sg-author-box {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: border-color 200ms ease;
}
@media (min-width: 768px) {
	.sg-author-box {
		padding: 2rem;
		flex-direction: row;
		align-items: flex-start;
		gap: 2rem;
	}
}
.sg-author-box--emerald:hover { border-color: hsla(160, 81%, 40%, 0.6); }
.sg-author-box--gold:hover    { border-color: hsla(36, 90%, 55%, 0.6); }

.sg-author-box__identity {
	display: flex;
	align-items: center;
	gap: 1rem;
}
@media (min-width: 768px) {
	.sg-author-box__identity { min-width: 280px; }
}

.sg-author-box__photo {
	width: 4rem;
	height: 4rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid hsl(var(--accent-emerald)); /* default; --gold variant overrides */
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.sg-author-box__photo { width: 5rem; height: 5rem; }
}
.sg-author-box__photo,
.sg-author-box__photo img {
	border-radius: 50% !important;
}
.sg-author-box__photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sg-author-box__photo-initials {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.25rem;
}
@media (min-width: 768px) {
	.sg-author-box__photo-initials { font-size: 1.5rem; }
}

.sg-author-box__identity-text { flex: 1; }

.sg-author-box__name {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: hsl(var(--text-primary));
	font-size: 1rem;
	margin: 0;
}
@media (min-width: 768px) { .sg-author-box__name { font-size: 1.125rem; } }

.sg-author-box__title {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	margin: 0;
}

.sg-author-box__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.sg-author-box__pill {
	background-color: hsl(var(--bg-elevated));
	padding: 0.25rem 0.75rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.625rem;
	font-weight: 500;
}
@media (min-width: 768px) { .sg-author-box__pill { font-size: 0.75rem; } }

.sg-author-box__body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sg-author-box__intro {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 0.875rem;
	line-height: 1.625;
	margin: 0;
}

.sg-author-box__socials {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
}
.sg-author-box__social-link {
	color: hsla(215, 18%, 62%, 0.4);
	transition: color 150ms ease;
	display: inline-flex;
	align-items: center;
}

.sg-author-box__view-profile {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	font-style: italic;
	margin-top: 0.75rem;
	text-decoration: none;
	width: fit-content;
}
.sg-author-box__view-profile:hover { text-decoration: underline; }

/* ============================================================
   AUTHOR PAGE — full /author/{slug}/ profile
   Mirrors src/pages/AuthorPage.tsx (no quote section,
   plus a new italic Intro section between header and About,
   no email icon, no expertise pill icons).
   ============================================================ */

.sg-author-page {
	max-width: 56rem;            /* max-w-4xl */
	margin: 0 auto;
	padding: 3rem 1rem;
}
@media (min-width: 768px)  { .sg-author-page { padding: 4rem 1.5rem; } }
@media (min-width: 1024px) { .sg-author-page { padding: 5rem 2rem;  } }

/* Breadcrumb */
.sg-author-page-breadcrumb {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
	margin-bottom: 2rem;
}
.sg-author-page-breadcrumb a {
	color: hsl(var(--accent-emerald));
	text-decoration: none;
}
.sg-author-page-breadcrumb a:hover { text-decoration: underline; }
.sg-author-page-breadcrumb__sep {
	margin: 0 0.5rem;
	color: hsla(215, 18%, 62%, 0.5);
}
.sg-author-page-breadcrumb__current { color: hsl(var(--text-primary)); }

/* Header */
.sg-author-page-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.sg-author-page-header {
		flex-direction: row;
		align-items: flex-start;
		gap: 2rem;
	}
}

.sg-author-page-photo {
	width: 7rem;
	height: 7rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid hsl(var(--accent-emerald)); /* default; --gold variant overrides */
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.sg-author-page-photo { width: 9rem; height: 9rem; }
}
.sg-author-page-photo,
.sg-author-page-photo img {
	border-radius: 50% !important;
}
.sg-author-page-photo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sg-author-page-photo__initials {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.875rem;
}
@media (min-width: 768px) {
	.sg-author-page-photo__initials { font-size: 2.25rem; }
}

.sg-author-page-header__identity {
	flex: 1;
	text-align: center;
}
@media (min-width: 768px) { .sg-author-page-header__identity { text-align: left; } }

.sg-author-page-name {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: hsl(var(--text-primary));
	font-size: 1.5rem;
	margin: 0;
}
@media (min-width: 768px) { .sg-author-page-name { font-size: 1.875rem; } }

.sg-author-page-title {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.875rem;
	margin: 0.25rem 0 0;
}
@media (min-width: 768px) { .sg-author-page-title { font-size: 1rem; } }

.sg-author-page-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.75rem;
	justify-content: center;
}
@media (min-width: 768px) { .sg-author-page-pills { justify-content: flex-start; } }

.sg-author-page-pill {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	padding: 0.375rem 1rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	border-radius: 9999px !important;  /* override global zero-radius */
}

.sg-author-page-socials {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.75rem;
	justify-content: center;
}
@media (min-width: 768px) { .sg-author-page-socials { justify-content: flex-start; } }

.sg-author-page-social-link {
	color: hsla(215, 18%, 62%, 0.4);
	transition: color 150ms ease;
	display: inline-flex;
	align-items: center;
}

/* Intro — same visual as About body paragraphs */
.sg-author-page-intro {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 1rem;
	line-height: 1.625;
	color: hsl(var(--text-secondary));
	margin: 2.5rem 0 0;
}

/* About — long bio */
.sg-author-page-about { margin-top: 2.5rem; }
.sg-author-page-about h2 {
	font-family: 'Playfair Display', serif;
	color: hsl(var(--text-primary));
	font-size: 1.25rem;
	margin: 0 0 1rem;
}
.sg-author-page-about p {
	font-family: 'Source Sans 3', sans-serif;
	color: hsl(var(--text-secondary));
	font-size: 1rem;
	line-height: 1.625;
	margin: 0 0 1rem;
}

/* Expertise — flex-wrap pills, no icons */
.sg-author-page-expertise { margin-top: 2rem; }
.sg-author-page-expertise h2 {
	font-family: 'Playfair Display', serif;
	color: hsl(var(--text-primary));
	font-size: 1.25rem;
	margin: 0 0 1rem;
}
.sg-author-page-expertise__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.sg-author-page-expertise-pill {
	background-color: hsl(var(--bg-surface));
	border: 1px solid hsl(var(--bg-elevated));
	padding: 0.5rem 1rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: hsl(var(--text-secondary));
	border-radius: 9999px !important;  /* override global zero-radius */
}

/* Back link */
.sg-author-page-back {
	margin-top: 2.5rem;
	margin-bottom: 4rem;
}
.sg-author-page-back-link {
	color: hsl(var(--accent-emerald));
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	text-decoration: none;
}
.sg-author-page-back-link:hover { text-decoration: underline; }