/* ═══════════════════════════════════════════════════════════════
   ScoreLens — SSC Mock Test Pillar Page
   Template  : template-ssc-mock-test.php
   Namespace : sl-pillar-  (layout)  · sl-dt-  (data tables)
               sl-callout- (callouts) · sl-phase- (accordions)
               sl-step-    (protocol) · sl-sb-   (score bands)
   Loaded    : Only on SSC Mock Test pillar page
   Tokens    : Inherits --sl-* from scorelens.css
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. PAGE LAYOUT — 2-column: article + sticky sidebar
   ──────────────────────────────────────────────────────────────── */
.sl-pillar-wrap {
	max-width: var(--sl-max-w);
	margin: 0 auto;
	padding: 0 var(--sl-container-px) var(--sl-space-xl, 64px);
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 60px;
	-webkit-align-items: start;
	align-items: start;
}

.sl-pillar-main {
	min-width: 0; /* prevent CSS grid blowout */
}

.sl-pillar-sidebar {
	position: -webkit-sticky;
	position: sticky;
	top: 84px;
	min-width: 0;
}

/* ────────────────────────────────────────────────────────────────
   2. ARTICLE HEADER
   ──────────────────────────────────────────────────────────────── */
.sl-pillar-header {
	padding: var(--space-lg) 0 var(--space-md);
	border-bottom: 1px solid var(--sl-rule);
	margin-bottom: var(--space-lg);
}

.sl-pillar-cluster-tag {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--sl-radius-pill);
	background: color-mix(in srgb, var(--sl-accent) 10%, transparent);
	color: color-mix(in srgb, var(--sl-accent) 80%, var(--sl-ink));
	border: 1px solid color-mix(in srgb, var(--sl-accent) 22%, transparent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-family: var(--sl-font-mono);
	margin-bottom: var(--space-sm);
}

.sl-pillar-h1 {
	font-size: clamp(26px, 4vw, 42px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.03em;
	color: var(--sl-ink);
	margin-bottom: var(--space-sm);
}

.sl-pillar-h1 .sl-serif {
	font-family: var(--sl-font-serif);
	font-weight: 400;
	font-style: italic;
}

.sl-pillar-sub {
	font-size: 17px;
	color: var(--sl-ink-soft);
	line-height: 1.6;
	max-width: 680px;
	margin-bottom: var(--space-md);
}

.sl-pillar-meta {
	display: -webkit-flex;
	display: flex;
	gap: var(--space-md);
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--sl-muted);
	font-family: var(--sl-font-mono);
}

.sl-pillar-meta span {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 5px;
}

.sl-pillar-ctas {
	display: -webkit-flex;
	display: flex;
	gap: 10px;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-bottom: var(--space-lg);
}

/* ────────────────────────────────────────────────────────────────
   3. ARTICLE BODY — typography
   ──────────────────────────────────────────────────────────────── */
.sl-pillar-body {
	max-width: 820px;
	counter-reset: section;
}

.sl-pillar-body h2 {
	font-size: clamp(19px, 2.5vw, 26px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
	color: var(--sl-ink);
	margin: var(--space-xl) 0 var(--space-md);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--sl-rule);
}

.sl-pillar-body h2:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.sl-pillar-body h2 .sl-serif {
	font-family: var(--sl-font-serif);
	font-weight: 400;
	font-style: italic;
}

/* Auto-numbered H2s */
.sl-pillar-body h2.sl-numbered::before {
	counter-increment: section;
	content: counter(section, decimal-leading-zero);
	font-family: var(--sl-font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--sl-accent);
	letter-spacing: .06em;
	display: block;
	margin-bottom: 6px;
}

.sl-pillar-body p {
	font-size: 16px;
	line-height: 1.72;
	color: var(--sl-ink-soft);
	margin-bottom: var(--space-md);
}

.sl-pillar-body p strong {
	color: var(--sl-ink);
	font-weight: 700;
}

/* ────────────────────────────────────────────────────────────────
   4. DATA TABLES
   ──────────────────────────────────────────────────────────────── */
.sl-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: var(--space-md) 0 var(--space-lg);
	border-radius: var(--sl-radius-lg);
	border: 1px solid var(--sl-rule);
}

.sl-data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	background: var(--sl-card);
}

.sl-data-table thead {
	background: color-mix(in srgb, var(--sl-brand) 5%, transparent);
}

[data-theme="dark"] .sl-data-table thead {
	background: rgba(255, 255, 255, .04);
}

.sl-data-table thead th {
	padding: 12px 16px;
	text-align: left;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--sl-ink);
	border-bottom: 1px solid var(--sl-rule);
	white-space: nowrap;
	font-family: var(--sl-font-mono);
}

.sl-data-table thead th:first-child { border-radius: var(--sl-radius-lg) 0 0 0; }
.sl-data-table thead th:last-child  { border-radius: 0 var(--sl-radius-lg) 0 0; }

.sl-data-table tbody tr {
	border-bottom: 1px solid var(--sl-rule);
	transition: background .15s;
}

.sl-data-table tbody tr:last-child { border-bottom: none; }

.sl-data-table tbody tr:hover {
	background: color-mix(in srgb, var(--sl-brand) 3%, transparent);
}

[data-theme="dark"] .sl-data-table tbody tr:hover {
	background: rgba(255, 255, 255, .03);
}

.sl-data-table td {
	padding: 12px 16px;
	vertical-align: top;
	line-height: 1.5;
	color: var(--sl-ink-soft);
}

.sl-data-table td strong { color: var(--sl-ink); font-weight: 600; }
.sl-data-table td:first-child { color: var(--sl-ink); font-weight: 600; }

/* Accent first column — mono style */
.sl-table-accent-1 .sl-data-table td:first-child {
	color: var(--sl-brand);
	font-family: var(--sl-font-mono);
	font-size: 13px;
}

[data-theme="dark"] .sl-table-accent-1 .sl-data-table td:first-child {
	color: var(--sl-accent);
}

/* Score tier cells */
.sl-tier-bad  { color: var(--sl-danger)   !important; font-weight: 700 !important; }
.sl-tier-mid  { color: var(--sl-accent)   !important; font-weight: 700 !important; }
.sl-tier-good { color: var(--sl-accent-2) !important; font-weight: 700 !important; }

/* ────────────────────────────────────────────────────────────────
   5. SCORELENS FEATURE CALLOUTS
   ──────────────────────────────────────────────────────────────── */
.sl-callout {
	margin: var(--space-lg) 0;
	border-radius: var(--sl-radius-xl);
	padding: 28px 32px;
	position: relative;
	overflow: hidden;
}

.sl-callout::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
}

/* ERS — Exam Readiness Score (dark) */
.sl-callout-ers {
	background: #0a1526;
	border: 1px solid #2a4870;
	color: #f6f5f1;
}

.sl-callout-ers::before {
	background: linear-gradient(90deg, var(--sl-accent), #ff7a52);
}

/* WTT — Weak Topic Tracker (green) */
.sl-callout-wtt {
	background: color-mix(in srgb, var(--sl-accent-2) 6%, var(--sl-card));
	border: 1px solid color-mix(in srgb, var(--sl-accent-2) 20%, var(--sl-rule));
}

.sl-callout-wtt::before {
	background: linear-gradient(90deg, var(--sl-accent-2), #059669);
}

/* AHM — Accuracy Heatmap (brand/gold) */
.sl-callout-ahm {
	background: color-mix(in srgb, var(--sl-brand) 4%, var(--sl-card));
	border: 1px solid color-mix(in srgb, var(--sl-brand) 15%, var(--sl-rule));
}

.sl-callout-ahm::before {
	background: linear-gradient(90deg, var(--sl-brand), var(--sl-accent));
}

[data-theme="dark"] .sl-callout-wtt {
	background: color-mix(in srgb, var(--sl-accent-2) 8%, #1c3553);
	border-color: color-mix(in srgb, var(--sl-accent-2) 22%, var(--sl-rule));
}

[data-theme="dark"] .sl-callout-ahm {
	background: color-mix(in srgb, var(--sl-accent) 6%, #1c3553);
	border-color: color-mix(in srgb, var(--sl-accent) 18%, var(--sl-rule));
}

.sl-callout-label {
	font-family: var(--sl-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 8px;
	opacity: .8;
}

.sl-callout-ers .sl-callout-label { color: var(--sl-accent); }
.sl-callout-wtt .sl-callout-label { color: var(--sl-accent-2); }
.sl-callout-ahm .sl-callout-label { color: var(--sl-accent); }

.sl-callout h3 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.015em;
	margin-bottom: 10px;
	color: var(--sl-ink);
}

.sl-callout-ers h3 { color: #f6f5f1; }

.sl-callout p {
	font-size: 14px;
	line-height: 1.65;
	margin-bottom: 10px;
}

.sl-callout p:last-child { margin-bottom: 0; }
.sl-callout-ers p       { color: #c4cddb; }
.sl-callout strong      { font-weight: 700; }
.sl-callout-ers strong  { color: var(--sl-accent); }
.sl-callout-wtt strong  { color: var(--sl-accent-2); }
.sl-callout-ahm strong  { color: var(--sl-accent); }

/* ────────────────────────────────────────────────────────────────
   6. PHASE / COLLAPSIBLE BLOCKS
   ──────────────────────────────────────────────────────────────── */
.sl-phase-block {
	background: var(--sl-card);
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius-xl);
	overflow: hidden;
	margin: var(--space-md) 0;
}

.sl-phase-block + .sl-phase-block { margin-top: var(--space-sm); }

.sl-phase-header {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	gap: var(--space-md);
	padding: 20px 24px;
	cursor: pointer;
	transition: background .2s;
	-webkit-user-select: none;
	user-select: none;
	background: none;
	border: none;
	width: 100%;
	text-align: left;
	font-family: var(--sl-font-sans);
}

.sl-phase-header:hover {
	background: color-mix(in srgb, var(--sl-brand) 3%, transparent);
}

[data-theme="dark"] .sl-phase-header:hover {
	background: rgba(255, 255, 255, .03);
}

.sl-phase-num {
	font-family: var(--sl-font-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--sl-accent);
	min-width: 32px;
	padding-top: 2px;
}

.sl-phase-title {
	-webkit-flex: 1;
	flex: 1;
}

.sl-phase-title h4 {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--sl-ink);
	margin-bottom: 4px;
}

.sl-phase-tag {
	display: inline-block;
	font-size: 11px;
	font-family: var(--sl-font-mono);
	color: var(--sl-muted);
	letter-spacing: .06em;
}

.sl-phase-chevron {
	color: var(--sl-muted);
	transition: -webkit-transform .3s var(--sl-ease-spring);
	transition: transform .3s var(--sl-ease-spring);
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	margin-top: 4px;
}

.sl-phase-block.open .sl-phase-chevron {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.sl-phase-body {
	overflow: hidden;
	max-height: 0;
	transition: max-height .35s var(--sl-ease-spring);
}

.sl-phase-body-inner {
	padding: 0 24px 20px;
	border-top: 1px solid var(--sl-rule);
}

.sl-phase-body-inner p {
	font-size: 14px;
	color: var(--sl-ink-soft);
	line-height: 1.65;
	margin-top: 14px;
	margin-bottom: 10px;
}

.sl-phase-body-inner p:last-child { margin-bottom: 0; }
.sl-phase-body-inner strong { color: var(--sl-ink); font-weight: 700; }

/* ────────────────────────────────────────────────────────────────
   7. STEP PROTOCOL LIST
   ──────────────────────────────────────────────────────────────── */
.sl-step-list {
	list-style: none;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	gap: 0;
	margin: var(--space-md) 0;
}

.sl-step-item {
	display: -webkit-flex;
	display: flex;
	gap: var(--space-md);
	padding: var(--space-md) 0;
	border-bottom: 1px dashed var(--sl-rule);
}

.sl-step-item:last-child { border-bottom: none; }

.sl-step-num {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--sl-brand);
	color: var(--sl-bg-2, #fff);
	font-family: var(--sl-font-serif);
	font-style: italic;
	font-size: 16px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	margin-top: 2px;
}

[data-theme="dark"] .sl-step-num {
	background: var(--sl-accent);
	color: #1c3553;
}

.sl-step-content strong {
	font-size: 15px;
	font-weight: 700;
	display: block;
	margin-bottom: 4px;
	color: var(--sl-ink);
}

.sl-step-content p {
	font-size: 14px;
	color: var(--sl-ink-soft);
	line-height: 1.55;
	margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   8. DIAGNOSTIC SCORE BANDS
   ──────────────────────────────────────────────────────────────── */
.sl-score-bands {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	gap: var(--space-sm);
	margin: var(--space-md) 0;
}

.sl-score-band {
	display: -webkit-flex;
	display: flex;
	gap: var(--space-md);
	padding: 14px 18px;
	border-radius: var(--sl-radius-md);
	border: 1px solid var(--sl-rule);
	-webkit-align-items: flex-start;
	align-items: flex-start;
}

.sl-band-low  { background: color-mix(in srgb, var(--sl-danger)   4%, transparent); border-color: color-mix(in srgb, var(--sl-danger)   18%, var(--sl-rule)); }
.sl-band-mid  { background: color-mix(in srgb, var(--sl-accent)   5%, transparent); border-color: color-mix(in srgb, var(--sl-accent)   20%, var(--sl-rule)); }
.sl-band-high { background: color-mix(in srgb, var(--sl-accent-2) 5%, transparent); border-color: color-mix(in srgb, var(--sl-accent-2) 20%, var(--sl-rule)); }

[data-theme="dark"] .sl-band-low  { background: color-mix(in srgb, var(--sl-danger)   8%, #1c3553); }
[data-theme="dark"] .sl-band-mid  { background: color-mix(in srgb, var(--sl-accent)   6%, #1c3553); }
[data-theme="dark"] .sl-band-high { background: color-mix(in srgb, var(--sl-accent-2) 6%, #1c3553); }

.sl-sb-range {
	font-family: var(--sl-font-mono);
	font-size: 14px;
	font-weight: 700;
	min-width: 80px;
	padding-top: 2px;
}

.sl-band-low  .sl-sb-range { color: var(--sl-danger); }
.sl-band-mid  .sl-sb-range { color: var(--sl-accent); }
.sl-band-high .sl-sb-range { color: var(--sl-accent-2); }

.sl-sb-content p {
	font-size: 14px;
	color: var(--sl-ink-soft);
	line-height: 1.5;
	margin: 0;
}

.sl-sb-content strong { color: var(--sl-ink); font-weight: 700; }

/* ────────────────────────────────────────────────────────────────
   9. WARNING LIST
   ──────────────────────────────────────────────────────────────── */
.sl-warning-list {
	list-style: none;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	gap: var(--space-sm);
	margin: var(--space-md) 0;
}

.sl-warning-item {
	display: -webkit-flex;
	display: flex;
	gap: var(--space-md);
	padding: 16px 18px;
	border-radius: var(--sl-radius-md);
	background: color-mix(in srgb, var(--sl-danger) 4%, transparent);
	border: 1px solid color-mix(in srgb, var(--sl-danger) 18%, var(--sl-rule));
	border-left: 3px solid var(--sl-danger);
}

[data-theme="dark"] .sl-warning-item {
	background: color-mix(in srgb, var(--sl-danger) 8%, #1c3553);
}

.sl-warning-icon {
	color: var(--sl-danger);
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	margin-top: 2px;
}

.sl-warning-item p {
	font-size: 14px;
	color: var(--sl-ink-soft);
	line-height: 1.55;
	margin: 0;
}

.sl-warning-item strong { color: var(--sl-ink); font-weight: 700; }

/* ────────────────────────────────────────────────────────────────
   10. INSIGHT BOX
   ──────────────────────────────────────────────────────────────── */
.sl-insight-box {
	margin: var(--space-md) 0;
	padding: 18px 20px;
	border-radius: var(--sl-radius-md);
	background: color-mix(in srgb, var(--sl-accent) 8%, transparent);
	border-left: 3px solid var(--sl-accent);
}

.sl-insight-box strong {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sl-accent);
	font-family: var(--sl-font-mono);
	margin-bottom: 6px;
}

.sl-insight-box p {
	font-size: 14px;
	color: var(--sl-ink-soft);
	line-height: 1.6;
	margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   11. FAQ ACCORDION
   ──────────────────────────────────────────────────────────────── */
.sl-pillar-faq-list { margin: var(--space-md) 0; }

.sl-pillar-faq-item { border-bottom: 1px solid var(--sl-rule); }
.sl-pillar-faq-item:first-child { border-top: 1px solid var(--sl-rule); }

.sl-pillar-faq-trigger {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-md) 0;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	gap: var(--space-md);
	font-family: var(--sl-font-sans);
	font-size: 15px;
	font-weight: 600;
	color: var(--sl-ink);
	line-height: 1.4;
	min-height: 44px;
}

.sl-pillar-faq-icon {
	width: 18px;
	height: 18px;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	color: var(--sl-muted);
	transition: -webkit-transform .3s var(--sl-ease-spring), color .2s;
	transition: transform .3s var(--sl-ease-spring), color .2s;
}

.sl-pillar-faq-item.open .sl-pillar-faq-icon {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	color: var(--sl-brand);
}

[data-theme="dark"] .sl-pillar-faq-item.open .sl-pillar-faq-icon {
	color: var(--sl-accent);
}

.sl-pillar-faq-body {
	overflow: hidden;
	max-height: 0;
	transition: max-height .35s var(--sl-ease-spring);
}

.sl-pillar-faq-body p {
	font-size: 14px;
	color: var(--sl-ink-soft);
	line-height: 1.65;
	padding-bottom: var(--space-md);
	margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   12. INTERNAL LINKS (cluster links section)
   ──────────────────────────────────────────────────────────────── */
.sl-pillar-int-links {
	margin: var(--space-xl) 0 0;
}

.sl-pillar-int-links-label {
	font-family: var(--sl-font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sl-muted);
	margin-bottom: var(--space-sm);
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 8px;
}

.sl-pillar-int-links-label::before {
	content: '';
	width: 20px;
	height: 1px;
	background: var(--sl-muted);
}

.sl-pillar-int-links-grid {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 10px;
}

.sl-pillar-int-link {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius-pill);
	font-size: 13px;
	font-weight: 500;
	color: var(--sl-ink-soft);
	background: var(--sl-card);
	transition: color .2s, border-color .2s;
	text-decoration: none;
}

.sl-pillar-int-link:hover {
	color: var(--sl-brand);
	border-color: var(--sl-brand);
}

[data-theme="dark"] .sl-pillar-int-link:hover {
	color: var(--sl-accent);
	border-color: var(--sl-accent);
}

.sl-pillar-int-link svg {
	width: 13px;
	height: 13px;
	opacity: .6;
}

/* ────────────────────────────────────────────────────────────────
   13. SIDEBAR
   ──────────────────────────────────────────────────────────────── */
.sl-pillar-sidebar-card {
	background: var(--sl-card);
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius-xl);
	padding: var(--space-md);
	margin-bottom: var(--space-md);
}

.sl-pillar-sidebar-card h4 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-family: var(--sl-font-mono);
	color: var(--sl-muted);
	margin-bottom: var(--space-sm);
}

.sl-pillar-sidebar-toc {
	list-style: none;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	gap: 0;
}

.sl-pillar-sidebar-toc li a {
	display: block;
	font-size: 13px;
	color: var(--sl-ink-soft);
	padding: 6px 0;
	border-bottom: 1px dashed var(--sl-rule);
	transition: color .2s;
	line-height: 1.4;
	text-decoration: none;
}

.sl-pillar-sidebar-toc li:last-child a { border-bottom: none; }

.sl-pillar-sidebar-toc li a:hover { color: var(--sl-brand); }

[data-theme="dark"] .sl-pillar-sidebar-toc li a:hover { color: var(--sl-accent); }

/* Sidebar CTA card */
.sl-pillar-sidebar-cta {
	background: var(--sl-brand);
	border-radius: var(--sl-radius-xl);
	padding: var(--space-md);
	text-align: center;
	margin-bottom: var(--space-md);
}

[data-theme="dark"] .sl-pillar-sidebar-cta {
	background: color-mix(in srgb, var(--sl-accent) 10%, #1c3553);
	border: 1px solid color-mix(in srgb, var(--sl-accent) 22%, var(--sl-rule));
}

.sl-pillar-sidebar-cta h4 {
	font-size: 15px;
	font-weight: 700;
	color: #f6f5f1;
	margin-bottom: 6px;
	text-transform: none;
	letter-spacing: -.01em;
	font-family: var(--sl-font-sans);
}

[data-theme="dark"] .sl-pillar-sidebar-cta h4 { color: var(--sl-ink); }

.sl-pillar-sidebar-cta p {
	font-size: 12.5px;
	color: #c4cddb;
	line-height: 1.5;
	margin-bottom: var(--space-sm);
}

[data-theme="dark"] .sl-pillar-sidebar-cta p { color: var(--sl-ink-soft); }

.sl-pillar-sidebar-cta .sl-btn {
	width: 100%;
	-webkit-justify-content: center;
	justify-content: center;
	background: var(--sl-accent);
	color: #1c3553;
	border-color: var(--sl-accent);
	font-size: 13px;
}

.sl-pillar-sidebar-cta .sl-btn:hover { opacity: .9; }

/* Cluster links in sidebar */
.sl-pillar-cluster-links {
	list-style: none;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	gap: 4px;
}

.sl-pillar-cluster-links li a {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--sl-ink-soft);
	padding: 6px 8px;
	border-radius: var(--sl-radius-sm);
	transition: color .2s, background .2s;
	text-decoration: none;
}

.sl-pillar-cluster-links li a::before {
	content: '→';
	color: var(--sl-accent);
	font-weight: 700;
	font-size: 12px;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}

.sl-pillar-cluster-links li a:hover {
	color: var(--sl-brand);
	background: color-mix(in srgb, var(--sl-brand) 5%, transparent);
}

[data-theme="dark"] .sl-pillar-cluster-links li a:hover {
	color: var(--sl-accent);
	background: color-mix(in srgb, var(--sl-accent) 6%, transparent);
}

.sl-pillar-cluster-links li.active a {
	color: var(--sl-brand);
	font-weight: 700;
}

[data-theme="dark"] .sl-pillar-cluster-links li.active a {
	color: var(--sl-accent);
}

/* ────────────────────────────────────────────────────────────────
   14. PILLAR BULLETS
   ──────────────────────────────────────────────────────────────── */
.sl-pillar-bullets {
	list-style: none;
	margin: var(--space-sm) 0 var(--space-md);
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	gap: 10px;
}

.sl-pillar-bullets li {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	color: var(--sl-ink-soft);
	line-height: 1.5;
	padding: 10px 14px;
	background: var(--sl-surface);
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius-md);
}

.sl-pillar-bullets li::before {
	content: "·";
	color: var(--sl-danger, #e05252);
	font-size: 22px;
	line-height: 1;
	font-weight: 700;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	margin-top: -2px;
}

.sl-pillar-bullets--success li::before {
	content: "↑";
	color: var(--sl-accent-2);
	font-size: 16px;
	margin-top: 0;
}

/* ────────────────────────────────────────────────────────────────
   15. CASE STUDY — Before / After
   ──────────────────────────────────────────────────────────────── */
.sl-case-study {
	margin: var(--space-md) 0 var(--space-lg);
}

.sl-case-study-context {
	font-size: 15px;
	color: var(--sl-ink-soft);
	line-height: 1.65;
	margin-bottom: var(--space-md);
}

.sl-case-study-grid {
	display: -webkit-grid;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.sl-case-study-panel {
	border-radius: var(--sl-radius-lg);
	padding: 24px;
	border: 1.5px solid var(--sl-rule);
}

.sl-case-study-panel--before {
	background: color-mix(in srgb, var(--sl-danger, #e05252) 5%, transparent);
	border-color: color-mix(in srgb, var(--sl-danger, #e05252) 22%, transparent);
}

.sl-case-study-panel--after {
	background: color-mix(in srgb, var(--sl-accent-2) 6%, transparent);
	border-color: color-mix(in srgb, var(--sl-accent-2) 25%, transparent);
}

.sl-case-study-tag {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 6px;
	font-family: var(--sl-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: var(--sl-radius-pill);
	margin-bottom: 16px;
}

.sl-case-study-panel--before .sl-case-study-tag {
	background: color-mix(in srgb, var(--sl-danger, #e05252) 12%, transparent);
	color: var(--sl-danger, #e05252);
}

.sl-case-study-panel--after .sl-case-study-tag {
	background: color-mix(in srgb, var(--sl-accent-2) 14%, transparent);
	color: var(--sl-accent-2);
}

.sl-case-study-stats {
	display: -webkit-grid;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}

.sl-case-study-stat {
	text-align: center;
	padding: 12px 8px;
	background: color-mix(in srgb, var(--sl-bg) 60%, transparent);
	border-radius: var(--sl-radius-md);
}

.sl-case-study-stat-value {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
	margin-bottom: 4px;
}

.sl-case-study-panel--before .sl-case-study-stat-value { color: var(--sl-ink); }
.sl-case-study-panel--after  .sl-case-study-stat-value { color: var(--sl-accent-2); }

.sl-case-study-stat-label {
	font-size: 11px;
	font-family: var(--sl-font-mono);
	color: var(--sl-muted);
	letter-spacing: .03em;
}

.sl-case-study-note {
	font-size: 13px;
	color: var(--sl-ink-soft);
	line-height: 1.5;
	padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, var(--sl-rule) 60%, transparent);
}

.sl-case-study-note strong { color: var(--sl-ink); font-weight: 600; }

.sl-case-study-action {
	margin: 16px 0;
	padding: 14px 18px;
	background: color-mix(in srgb, var(--sl-brand) 5%, transparent);
	border: 1px solid color-mix(in srgb, var(--sl-brand) 18%, transparent);
	border-radius: var(--sl-radius-md);
	font-size: 14px;
	color: var(--sl-ink-soft);
	line-height: 1.6;
}

.sl-case-study-action strong { color: var(--sl-brand); font-weight: 600; }

/* ────────────────────────────────────────────────────────────────
   16. RESPONSIVE
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.sl-pillar-wrap {
		grid-template-columns: 1fr;
		gap: 0;
		overflow-x: hidden;
	}

	.sl-pillar-sidebar { display: none; }
}

@media (max-width: 768px) {
	.sl-pillar-wrap {
		padding-left: 20px;
		padding-right: 20px;
	}

	.sl-pillar-header {
		padding-top: var(--space-md);
		padding-bottom: var(--space-sm);
	}

	.sl-pillar-h1 { font-size: 24px; }

	.sl-pillar-sub {
		font-size: 15px;
		margin-bottom: var(--space-sm);
	}

	.sl-pillar-ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.sl-pillar-ctas .sl-btn {
		text-align: center;
		justify-content: center;
		width: 100%;
	}

	.sl-pillar-body h2 {
		font-size: 19px;
	}

	.sl-pillar-body h3 {
		font-size: 16px;
	}

	.sl-insight-box,
	.sl-callout {
		padding: 18px;
		font-size: 14px;
	}
}

@media (max-width: 640px) {
	.sl-table-wrap { font-size: 12px; }
	.sl-table-wrap table { min-width: 540px; }

	.sl-callout { padding: 16px; }

	.sl-case-study-grid { grid-template-columns: 1fr; }
	.sl-case-study-stats { grid-template-columns: repeat(2, 1fr); }
	.sl-case-study-stat-value { font-size: 24px; }
	.sl-case-study-panel { padding: 18px; }

	.sl-pillar-faq-trigger {
		font-size: 14px;
		padding: 14px 0;
	}

	.sl-pillar-sidebar-cta { padding: 20px; }
}