/* ═══════════════════════════════════════════════════════════════
   ScoreLens — Features Page Styles
   Template  : template-features.php
   Namespace : sl-pg-  (all new components)
   Loaded    : Only when template-features.php is active
   Tokens    : Inherits --sl-* from scorelens.css
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   2. Internal links row
   ──────────────────────────────────────────────────────────────── */
.sl-pg-internal-links {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--space-lg);
}
.sl-pg-int-link {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	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);
	text-decoration: none;
	transition: color .2s, border-color .2s;
	min-height: 44px;
}
.sl-pg-int-link:hover { color: var(--sl-brand); border-color: var(--sl-brand); }
[data-theme="dark"] .sl-pg-int-link:hover { color: var(--sl-accent); border-color: var(--sl-accent); }
.sl-pg-int-link svg { width: 14px; height: 14px; opacity: .6; }

/* ────────────────────────────────────────────────────────────────
   3. Alternate section background
   ──────────────────────────────────────────────────────────────── */
.sl-pg-alt {
	background: color-mix(in srgb, var(--sl-brand) 3%, transparent);
	border-top: 1px solid var(--sl-rule);
	border-bottom: 1px solid var(--sl-rule);
}
[data-theme="dark"] .sl-pg-alt {
	background: color-mix(in srgb, var(--sl-accent) 4%, transparent);
}

/* ────────────────────────────────────────────────────────────────
   4. Hero layout (2-col)
   ──────────────────────────────────────────────────────────────── */
.sl-pg-hero {
	padding: 60px var(--sl-container-px) 40px;
	max-width: var(--sl-max-w);
	margin: 0 auto;
}
.sl-pg-hero-inner {
	display: -webkit-grid;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	-webkit-align-items: center;
	align-items: center;
}
.sl-pg-hero-h {
	font-size: clamp(36px, 4.8vw, 60px);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -.035em;
	margin-bottom: var(--space-md);
}
.sl-pg-hero-lede {
	font-size: 17px;
	line-height: 1.55;
	color: var(--sl-ink-soft);
	max-width: 520px;
	margin-bottom: var(--space-md);
}
.sl-pg-hero-cta {
	display: -webkit-flex;
	display: flex;
	gap: 14px;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: center;
	align-items: center;
}

/* ────────────────────────────────────────────────────────────────
   5. Dark card (insight callout used inside accuracy fold)
   ──────────────────────────────────────────────────────────────── */
.sl-pg-dc-insight {
	margin-top: var(--space-md);
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--sl-ink);
	border-left: 3px solid var(--sl-accent);
	background: color-mix(in srgb, var(--sl-accent) 8%, transparent);
}
.sl-pg-dc-insight strong {
	color: var(--sl-accent);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 3px;
}

/* ────────────────────────────────────────────────────────────────
   6. AI showcase block (time management fold)
   ──────────────────────────────────────────────────────────────── */
.sl-pg-ai-block {
	background: var(--sl-brand);
	color: #f6f5f1;
	border-radius: var(--sl-radius-xl);
	padding: 80px 60px;
	margin: var(--space-xl) 0;
	position: relative;
	overflow: hidden;
}
[data-theme="dark"] .sl-pg-ai-block { background: #0a1526; border: 1px solid var(--sl-rule); }
.sl-pg-ai-block::before {
	content: "";
	position: absolute;
	top: -150px; right: -150px;
	width: 500px; height: 500px;
	background: radial-gradient(circle, color-mix(in srgb, var(--sl-accent) 25%, transparent) 0%, transparent 65%);
	pointer-events: none;
}
.sl-pg-ai-grid {
	display: -webkit-grid;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	-webkit-align-items: center;
	align-items: center;
	position: relative;
}
.sl-pg-ai-copy h2 {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.03em;
	margin-bottom: var(--space-md);
}
.sl-pg-ai-copy h2 .sl-serif { color: var(--sl-accent); }
.sl-pg-ai-copy p { color: #c4cddb; line-height: 1.6; margin-bottom: var(--space-sm); font-size: 15px; max-width: 460px; }
.sl-pg-ai-copy .sl-badge { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #c4cddb; }

/* ────────────────────────────────────────────────────────────────
   7. Scroll-reveal — generic (features page elements)
   ──────────────────────────────────────────────────────────────── */
.sl-pg-practice-card.sl-reveal,
.sl-pg-analytics-card.sl-reveal,
.sl-pg-tracking-card.sl-reveal,
.sl-pg-insight-card.sl-reveal,
.sl-pg-why-card.sl-reveal {
	opacity: 0;
	-webkit-transform: translateY(28px);
	transform: translateY(28px);
	transition: opacity .7s var(--sl-ease-spring), -webkit-transform .7s var(--sl-ease-spring);
	transition: opacity .7s var(--sl-ease-spring), transform .7s var(--sl-ease-spring);
}
.sl-pg-practice-card.sl-reveal.sl-reveal--visible,
.sl-pg-analytics-card.sl-reveal.sl-reveal--visible,
.sl-pg-tracking-card.sl-reveal.sl-reveal--visible,
.sl-pg-insight-card.sl-reveal.sl-reveal--visible,
.sl-pg-why-card.sl-reveal.sl-reveal--visible {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

/* ────────────────────────────────────────────────────────────────
   8. FAQ accordion — scoped to features page 2-column layout
      Overrides the native <details> styles from scorelens.css
   ──────────────────────────────────────────────────────────────── */
.sl-pg-faq-cols .sl-faq-item {
	display: block;
	background: var(--sl-card);
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius-md);
	margin-bottom: 12px;
	overflow: hidden;
}
.sl-pg-faq-cols .sl-faq-item:last-child { margin-bottom: 0; }
.sl-faq-trigger {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	padding: 18px 20px;
	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-pg-faq-cols .sl-faq-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--sl-muted);
	transition: -webkit-transform .3s var(--sl-ease-spring), transform .3s var(--sl-ease-spring), color .2s;
}
/* Remove pseudo-element icon from main CSS when inside features accordion */
.sl-pg-faq-cols .sl-faq-icon::before,
.sl-pg-faq-cols .sl-faq-icon::after { display: none; }
.sl-pg-faq-cols .sl-faq-item.open .sl-faq-icon {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	color: var(--sl-brand);
}
[data-theme="dark"] .sl-pg-faq-cols .sl-faq-item.open .sl-faq-icon { color: var(--sl-accent); }
.sl-faq-body {
	overflow: hidden;
	max-height: 0;
	transition: max-height .35s var(--sl-ease-spring);
}
.sl-faq-body p {
	font-size: 15px;
	color: var(--sl-ink-soft);
	line-height: 1.65;
	padding: 0 20px 18px;
}

/* ────────────────────────────────────────────────────────────────
   9. Hero eyebrow & stats strip
   ──────────────────────────────────────────────────────────────── */
.sl-pg-feat-eyebrow {
	font-family: var(--sl-font-mono);
	font-size: 12px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--sl-accent);
	font-weight: 600;
	margin-bottom: var(--space-sm);
}
.sl-pg-feat-stats {
	display: -webkit-flex;
	display: flex;
	gap: var(--space-lg);
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-top: var(--space-lg);
}
.sl-pg-feat-stat { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 2px; }
.sl-pg-feat-stat-val { font-size: 24px; font-weight: 700; color: var(--sl-brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .sl-pg-feat-stat-val { color: var(--sl-accent); }
.sl-pg-feat-stat-lbl { font-size: 12px; color: var(--sl-muted); font-family: var(--sl-font-mono); }
.sl-pg-feat-stat-sep { width: 1px; background: var(--sl-rule); align-self: stretch; }

/* ────────────────────────────────────────────────────────────────
   10. Mock test interface (hero visual)
   ──────────────────────────────────────────────────────────────── */
.sl-pg-mock-interface {
	background: #0a1526;
	border: 1px solid #2a4870;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 40px 80px -20px rgba(0,0,0,.5);
}
.sl-pg-mi-topbar {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	padding: 12px 20px;
	background: #071020;
	border-bottom: 1px solid #2a4870;
}
.sl-pg-mi-topbar-left { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 12px; }
.sl-pg-mi-dots { display: -webkit-flex; display: flex; gap: 5px; }
.sl-pg-mi-dot { width: 10px; height: 10px; border-radius: 50%; }
.sl-pg-mi-exam-label { font-family: var(--sl-font-mono); font-size: 11px; color: #7d8aa3; letter-spacing: .1em; text-transform: uppercase; }
.sl-pg-mi-timer { font-family: var(--sl-font-mono); font-size: 15px; font-weight: 700; color: #ff7a52; letter-spacing: .05em; }
.sl-pg-mi-timer-label { font-size: 10px; color: #7d8aa3; font-family: var(--sl-font-mono); text-align: right; }
.sl-pg-mi-section-bar {
	display: -webkit-flex;
	display: flex;
	background: #0d1a2e;
	border-bottom: 1px solid #1a2d4a;
	padding: 0 20px;
	overflow: hidden;
}
.sl-pg-mi-section-tab {
	padding: 10px 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all .2s;
	color: #7d8aa3;
}
.sl-pg-mi-section-tab.active { color: var(--sl-accent); border-bottom-color: var(--sl-accent); }
.sl-pg-mi-body { padding: 20px; }
.sl-pg-mi-qnum { font-family: var(--sl-font-mono); font-size: 10px; color: #7d8aa3; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.sl-pg-mi-question { font-size: 14px; color: #e4dcc5; line-height: 1.6; margin-bottom: 16px; font-weight: 500; }
.sl-pg-mi-options { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sl-pg-mi-option {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid #2a4870;
	font-size: 13px;
	color: #c4cddb;
	transition: all .2s;
}
.sl-pg-mi-option.selected { background: rgba(244,185,66,.1); border-color: rgba(244,185,66,.4); color: #f4b942; }
.sl-pg-mi-option-key {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: #1a2d4a;
	display: -webkit-flex; display: flex;
	-webkit-align-items: center; align-items: center;
	-webkit-justify-content: center; justify-content: center;
	font-size: 10px; font-weight: 700;
	font-family: var(--sl-font-mono);
	flex-shrink: 0;
}
.sl-pg-mi-option.selected .sl-pg-mi-option-key { background: rgba(244,185,66,.2); color: #f4b942; }
.sl-pg-mi-progress-strip {
	display: -webkit-grid; display: grid;
	grid-template-columns: repeat(10,1fr);
	gap: 3px;
	margin-bottom: 14px;
	padding: 14px 20px;
	border-top: 1px solid #1a2d4a;
}
.sl-pg-mi-q-dot {
	width: 100%; aspect-ratio: 1; border-radius: 4px;
	font-size: 8px; display: -webkit-flex; display: flex;
	-webkit-align-items: center; align-items: center;
	-webkit-justify-content: center; justify-content: center;
	color: #7d8aa3; font-family: var(--sl-font-mono); font-weight: 700;
}
.sl-pg-mi-q-dot.answered  { background: rgba(16,185,129,.2); color: #10b981; border: 1px solid rgba(16,185,129,.3); }
.sl-pg-mi-q-dot.current   { background: rgba(244,185,66,.2); color: #f4b942; border: 1px solid rgba(244,185,66,.4); }
.sl-pg-mi-q-dot.skipped   { background: rgba(255,122,82,.12); color: #ff7a52; border: 1px solid rgba(255,122,82,.2); }
.sl-pg-mi-q-dot.unanswered { background: #1a2d4a; border: 1px solid #2a4870; }
.sl-pg-mi-footer {
	display: -webkit-flex; display: flex;
	-webkit-align-items: center; align-items: center;
	-webkit-justify-content: space-between; justify-content: space-between;
	padding: 12px 20px;
	background: #071020;
	border-top: 1px solid #2a4870;
	font-size: 12px;
}
.sl-pg-mi-foot-info { display: -webkit-flex; display: flex; gap: 16px; font-family: var(--sl-font-mono); }
.sl-pg-mi-foot-stat { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 6px; color: #7d8aa3; }
.sl-pg-mi-foot-stat span { font-weight: 700; }
.sl-pg-mi-foot-stat.green span { color: #10b981; }
.sl-pg-mi-foot-stat.amber span { color: #f4b942; }
.sl-pg-mi-foot-stat.red   span { color: #ff7a52; }
.sl-pg-mi-save-btn { padding: 7px 18px; border-radius: var(--sl-radius-pill); background: rgba(244,185,66,.15); color: #f4b942; border: 1px solid rgba(244,185,66,.3); font-size: 12px; font-weight: 700; cursor: pointer; }

/* ────────────────────────────────────────────────────────────────
   11. Practice cards (3-col)
   ──────────────────────────────────────────────────────────────── */
.sl-pg-practice-grid { display: -webkit-grid; display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-md); }
.sl-pg-practice-card {
	background: var(--sl-card);
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius-xl);
	padding: 32px 28px;
	display: -webkit-flex; display: flex;
	-webkit-flex-direction: column; flex-direction: column;
	gap: var(--space-md);
	position: relative; overflow: hidden;
	transition: -webkit-transform .4s var(--sl-ease-spring), transform .4s var(--sl-ease-spring), box-shadow .4s, border-color .3s;
}
.sl-pg-practice-card::before { content: ""; position: absolute; inset: 0; border-radius: var(--sl-radius-xl); opacity: 0; background: radial-gradient(400px circle at var(--sl-fx,50%) var(--sl-fy,50%), color-mix(in srgb, var(--sl-accent) 14%, transparent) 0%, transparent 60%); transition: opacity .4s; pointer-events: none; }
.sl-pg-practice-card:hover::before { opacity: 1; }
.sl-pg-practice-card:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); box-shadow: var(--sl-shadow); border-color: var(--sl-brand); }
[data-theme="dark"] .sl-pg-practice-card:hover { border-color: var(--sl-accent); }
.sl-pg-practice-card > * { position: relative; z-index: 1; }
.sl-pg-pc-icon { width: 52px; height: 52px; border-radius: 14px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; flex-shrink: 0; }
.sl-pg-pc-icon svg { width: 24px; height: 24px; }
.sl-pg-pc-1 .sl-pg-pc-icon { background: color-mix(in srgb, var(--sl-brand) 8%, transparent); color: var(--sl-brand); }
[data-theme="dark"] .sl-pg-pc-1 .sl-pg-pc-icon { background: color-mix(in srgb, var(--sl-accent) 12%, transparent); color: var(--sl-accent); }
.sl-pg-pc-2 .sl-pg-pc-icon { background: color-mix(in srgb, var(--sl-danger) 8%, transparent); color: var(--sl-danger); }
.sl-pg-pc-3 .sl-pg-pc-icon { background: color-mix(in srgb, var(--sl-accent-2) 8%, transparent); color: var(--sl-accent-2); }
.sl-pg-practice-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.sl-pg-practice-card p  { font-size: 14px; line-height: 1.6; color: var(--sl-ink-soft); }
.sl-pg-pc-list { list-style: none; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 6px; }
.sl-pg-pc-list li { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 8px; font-size: 13px; color: var(--sl-ink-soft); padding: 5px 0; border-bottom: 1px dashed var(--sl-rule); }
.sl-pg-pc-list li:last-child { border-bottom: none; }
.sl-pg-pc-list li::before { content: "›"; color: var(--sl-accent); font-weight: 700; flex-shrink: 0; font-size: 15px; }
.sl-pg-pc-tag { display: inline-flex; -webkit-align-items: center; align-items: center; margin-top: auto; padding: 5px 12px; border-radius: var(--sl-radius-pill); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sl-pg-pc-1 .sl-pg-pc-tag { background: color-mix(in srgb, var(--sl-brand) 8%, transparent); color: var(--sl-brand); border: 1px solid color-mix(in srgb, var(--sl-brand) 18%, transparent); }
[data-theme="dark"] .sl-pg-pc-1 .sl-pg-pc-tag { background: color-mix(in srgb, var(--sl-accent) 10%, transparent); color: var(--sl-accent); border-color: color-mix(in srgb, var(--sl-accent) 20%, transparent); }
.sl-pg-pc-2 .sl-pg-pc-tag { background: color-mix(in srgb, var(--sl-danger) 8%, transparent); color: var(--sl-danger); border: 1px solid color-mix(in srgb, var(--sl-danger) 18%, transparent); }
.sl-pg-pc-3 .sl-pg-pc-tag { background: color-mix(in srgb, var(--sl-accent-2) 8%, transparent); color: var(--sl-accent-2); border: 1px solid color-mix(in srgb, var(--sl-accent-2) 18%, transparent); }

/* ────────────────────────────────────────────────────────────────
   12. Analytics cards (3-col with numbered header)
   ──────────────────────────────────────────────────────────────── */
.sl-pg-analytics-grid { display: -webkit-grid; display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-md); }
.sl-pg-analytics-card { background: var(--sl-card); border: 1px solid var(--sl-rule); border-radius: var(--sl-radius-xl); overflow: hidden; transition: -webkit-transform .4s var(--sl-ease-spring), transform .4s var(--sl-ease-spring), box-shadow .4s, border-color .3s; }
.sl-pg-analytics-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); box-shadow: var(--sl-shadow); border-color: var(--sl-accent); }
.sl-pg-ac-header { padding: 24px 24px 16px; background: color-mix(in srgb, var(--sl-brand) 3%, transparent); border-bottom: 1px solid var(--sl-rule); }
[data-theme="dark"] .sl-pg-ac-header { background: rgba(255,255,255,.03); }
.sl-pg-ac-header-top { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 8px; }
.sl-pg-ac-num { font-family: var(--sl-font-serif); font-style: italic; font-size: 48px; font-weight: 400; line-height: 1; color: color-mix(in srgb, var(--sl-brand) 20%, transparent); }
[data-theme="dark"] .sl-pg-ac-num { color: color-mix(in srgb, var(--sl-accent) 22%, transparent); }
.sl-pg-ac-badge { padding: 4px 10px; border-radius: var(--sl-radius-pill); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sl-pg-ac-badge.badge-ai   { background: color-mix(in srgb, var(--sl-accent) 12%, transparent); color: var(--sl-accent); border: 1px solid color-mix(in srgb, var(--sl-accent) 22%, transparent); }
.sl-pg-ac-badge.badge-new  { background: color-mix(in srgb, var(--sl-accent-2) 12%, transparent); color: var(--sl-accent-2); border: 1px solid color-mix(in srgb, var(--sl-accent-2) 22%, transparent); }
.sl-pg-ac-badge.badge-core { background: color-mix(in srgb, var(--sl-brand) 8%, transparent); color: var(--sl-brand); border: 1px solid color-mix(in srgb, var(--sl-brand) 18%, transparent); }
[data-theme="dark"] .sl-pg-ac-badge.badge-core { background: color-mix(in srgb, var(--sl-accent) 10%, transparent); color: var(--sl-accent); border-color: color-mix(in srgb, var(--sl-accent) 20%, transparent); }
.sl-pg-ac-header h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.sl-pg-ac-body { padding: 20px 24px; }
.sl-pg-ac-body p { font-size: 14px; line-height: 1.6; color: var(--sl-ink-soft); margin-bottom: 14px; }
.sl-pg-ac-body ul { list-style: none; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 6px; }
.sl-pg-ac-body ul li { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--sl-ink-soft); padding: 6px 0; border-bottom: 1px dashed var(--sl-rule); }
.sl-pg-ac-body ul li:last-child { border-bottom: none; }
.sl-pg-ac-body ul li::before { content: "→"; color: var(--sl-accent); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.sl-pg-ac-mini-grid { display: -webkit-grid; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 14px; }
.sl-pg-ac-mini-stat { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--sl-brand) 4%, transparent); border: 1px solid var(--sl-rule); }
[data-theme="dark"] .sl-pg-ac-mini-stat { background: rgba(255,255,255,.04); }
.sl-pg-ac-mini-val { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.sl-pg-ac-mini-lbl { font-size: 10px; color: var(--sl-muted); font-family: var(--sl-font-mono); margin-top: 3px; }
.sl-pg-ac-mini-stat.highlight { background: color-mix(in srgb, var(--sl-accent-2) 8%, transparent); border-color: color-mix(in srgb, var(--sl-accent-2) 20%, transparent); }
.sl-pg-ac-mini-stat.highlight .sl-pg-ac-mini-val { color: var(--sl-accent-2); }

/* ────────────────────────────────────────────────────────────────
   13. Accuracy comparison scenarios
   ──────────────────────────────────────────────────────────────── */
.sl-pg-av-scenarios { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: var(--space-sm); }
.sl-pg-av-scenario { padding: 18px; border-radius: var(--sl-radius-lg); border: 1px solid var(--sl-rule); }
.sl-pg-av-scenario.danger  { background: color-mix(in srgb, var(--sl-danger) 4%, transparent); border-color: color-mix(in srgb, var(--sl-danger) 18%, transparent); }
.sl-pg-av-scenario.success { background: color-mix(in srgb, var(--sl-accent-2) 4%, transparent); border-color: color-mix(in srgb, var(--sl-accent-2) 18%, transparent); }
[data-theme="dark"] .sl-pg-av-scenario.danger  { background: color-mix(in srgb, var(--sl-danger) 8%, #1c3553); }
[data-theme="dark"] .sl-pg-av-scenario.success { background: color-mix(in srgb, var(--sl-accent-2) 8%, #1c3553); }
.sl-pg-av-sc-head { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.sl-pg-av-scenario.danger  .sl-pg-av-sc-head { color: var(--sl-danger); }
.sl-pg-av-scenario.success .sl-pg-av-sc-head { color: var(--sl-accent-2); }
.sl-pg-av-sc-row { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--sl-rule); }
.sl-pg-av-sc-row:last-child { border-bottom: none; }
.sl-pg-av-sc-label { color: var(--sl-ink-soft); }
.sl-pg-av-sc-val { font-weight: 700; }
.sl-pg-av-scenario.danger  .sl-pg-av-sc-val { color: var(--sl-danger); }
.sl-pg-av-scenario.success .sl-pg-av-sc-val { color: var(--sl-accent-2); }

/* ────────────────────────────────────────────────────────────────
   14. Progress tracking cards (3-col)
   ──────────────────────────────────────────────────────────────── */
.sl-pg-tracking-grid { display: -webkit-grid; display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-md); }
.sl-pg-tracking-card { background: var(--sl-card); border: 1px solid var(--sl-rule); border-radius: var(--sl-radius-xl); overflow: hidden; transition: -webkit-transform .3s var(--sl-ease-spring), transform .3s var(--sl-ease-spring), box-shadow .3s; }
.sl-pg-tracking-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); box-shadow: var(--sl-shadow); }
.sl-pg-tc-accent-bar { height: 3px; }
.sl-pg-tc-body { padding: 28px; }
.sl-pg-tc-body h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 10px; }
.sl-pg-tc-body p  { font-size: 14px; color: var(--sl-ink-soft); line-height: 1.6; margin-bottom: var(--space-md); }
.sl-pg-tc-list { list-style: none; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 5px; }
.sl-pg-tc-list li { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 8px; font-size: 13px; color: var(--sl-ink-soft); padding: 5px 0; border-bottom: 1px dashed var(--sl-rule); }
.sl-pg-tc-list li:last-child { border-bottom: none; }
.sl-pg-tc-list li::before { content: "✓"; color: var(--sl-accent-2); font-weight: 700; flex-shrink: 0; }
.sl-pg-tc-sparkline { height: 52px; position: relative; margin-bottom: var(--space-md); }
.sl-pg-tc-sparkline svg { width: 100%; height: 100%; }
.sl-pg-tc-chips { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 8px; }
.sl-pg-tc-chip { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--sl-brand) 4%, transparent); border: 1px solid var(--sl-rule); font-size: 12px; color: var(--sl-ink-soft); line-height: 1.5; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; gap: 8px; }
[data-theme="dark"] .sl-pg-tc-chip { background: rgba(255,255,255,.04); }
.sl-pg-tc-chip::before       { content: "↗"; color: var(--sl-accent); font-weight: 700; flex-shrink: 0; }
.sl-pg-tc-chip.warn::before  { content: "!"; color: var(--sl-danger); font-weight: 700; }
.sl-pg-tc-chip.good::before  { content: "✓"; color: var(--sl-accent-2); font-weight: 700; }

/* ────────────────────────────────────────────────────────────────
   15. Insight cards (5-col strip)
   ──────────────────────────────────────────────────────────────── */
.sl-pg-insights-grid { display: -webkit-grid; display: grid; grid-template-columns: repeat(5,1fr); gap: var(--space-sm); }
.sl-pg-insight-card { background: var(--sl-card); border: 1px solid var(--sl-rule); border-radius: var(--sl-radius-lg); padding: 24px 20px; position: relative; overflow: hidden; transition: -webkit-transform .3s var(--sl-ease-spring), transform .3s var(--sl-ease-spring), box-shadow .3s, border-color .3s; }
.sl-pg-insight-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.sl-pg-insight-card:nth-child(1)::before { background: linear-gradient(90deg,#f4b942,#ff7a52); }
.sl-pg-insight-card:nth-child(2)::before { background: linear-gradient(90deg,#ff7a52,#e94a1f); }
.sl-pg-insight-card:nth-child(3)::before { background: linear-gradient(90deg,#e94a1f,#ff5533); }
.sl-pg-insight-card:nth-child(4)::before { background: linear-gradient(90deg,#10b981,#059669); }
.sl-pg-insight-card:nth-child(5)::before { background: linear-gradient(90deg,#f4b942,#10b981); }
.sl-pg-insight-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); box-shadow: var(--sl-shadow); }
.sl-pg-insight-card:nth-child(1):hover,.sl-pg-insight-card:nth-child(5):hover { border-color: var(--sl-accent); }
.sl-pg-insight-card:nth-child(2):hover,.sl-pg-insight-card:nth-child(3):hover { border-color: var(--sl-danger); }
.sl-pg-insight-card:nth-child(4):hover { border-color: var(--sl-accent-2); }
.sl-pg-insight-num { font-family: var(--sl-font-serif); font-style: italic; font-size: 44px; font-weight: 400; line-height: 1; margin-bottom: 10px; color: color-mix(in srgb, var(--sl-brand) 15%, transparent); }
[data-theme="dark"] .sl-pg-insight-num { color: color-mix(in srgb, var(--sl-accent) 20%, transparent); }
.sl-pg-insight-card h4 { font-size: 14px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; line-height: 1.3; }
.sl-pg-insight-card p  { font-size: 12.5px; line-height: 1.55; color: var(--sl-ink-soft); }

/* ────────────────────────────────────────────────────────────────
   16. Why ScoreLens cards (2-row: 2-col + 3-col)
   ──────────────────────────────────────────────────────────────── */
.sl-pg-why-row-1 { display: -webkit-grid; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-md); }
.sl-pg-why-row-2 { display: -webkit-grid; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-md); }
.sl-pg-why-card {
	background: var(--sl-card);
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius-xl);
	padding: 32px 28px;
	position: relative; overflow: hidden;
	transition: -webkit-transform .4s var(--sl-ease-spring), transform .4s var(--sl-ease-spring), box-shadow .4s, border-color .3s;
}
.sl-pg-why-card::before { content: ""; position: absolute; inset: 0; border-radius: var(--sl-radius-xl); opacity: 0; background: radial-gradient(400px circle at var(--sl-fx,50%) var(--sl-fy,50%), color-mix(in srgb, var(--sl-accent) 14%, transparent) 0%, transparent 60%); transition: opacity .4s; pointer-events: none; }
.sl-pg-why-card:hover::before { opacity: 1; }
.sl-pg-why-card:hover { box-shadow: var(--sl-shadow); -webkit-transform: translateY(-4px); transform: translateY(-4px); border-color: var(--sl-brand); }
[data-theme="dark"] .sl-pg-why-card:hover { border-color: var(--sl-accent); }
.sl-pg-why-card > * { position: relative; z-index: 1; }
.sl-pg-wc-icon { width: 48px; height: 48px; border-radius: 12px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin-bottom: var(--space-md); }
.sl-pg-wc-icon svg { width: 22px; height: 22px; }
.sl-pg-why-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 8px; }
.sl-pg-why-card p  { font-size: 14px; line-height: 1.6; color: var(--sl-ink-soft); margin-bottom: var(--space-sm); }
.sl-pg-why-card ul { list-style: none; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 5px; }
.sl-pg-why-card ul li { font-size: 13px; color: var(--sl-ink-soft); display: -webkit-flex; display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--sl-rule); }
.sl-pg-why-card ul li:last-child { border-bottom: none; }
.sl-pg-why-card ul li::before { content: "·"; color: var(--sl-accent); font-weight: 700; flex-shrink: 0; font-size: 16px; line-height: 1.2; }

/* ────────────────────────────────────────────────────────────────
   17. FAQ 2-column layout & CTA checklist
   ──────────────────────────────────────────────────────────────── */
.sl-pg-faq-cols { display: -webkit-grid; display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; -webkit-align-items: start; align-items: start; }
.sl-pg-cta-checklist { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; gap: 10px; margin-bottom: var(--space-lg); }
.sl-pg-cta-check { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; gap: 6px; font-size: 14px; color: var(--sl-ink-soft); font-weight: 500; }
.sl-pg-cta-check::before { content: "✓"; color: var(--sl-accent-2); font-weight: 700; }

/* ────────────────────────────────────────────────────────────────
   18. Responsive
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.sl-pg-insights-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
	.sl-pg-hero-inner, .sl-pg-ai-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
	.sl-pg-ai-block { padding: 48px 28px; }
	#sl-pg-accuracy > div[style] { grid-template-columns: 1fr !important; }
}
@media (max-width: 960px) {
	.sl-pg-practice-grid,
	.sl-pg-analytics-grid,
	.sl-pg-tracking-grid { grid-template-columns: 1fr 1fr; }
	.sl-pg-why-row-1, .sl-pg-why-row-2 { grid-template-columns: 1fr; }
	.sl-pg-faq-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.sl-pg-hero { padding: 40px 20px 20px; }
	.sl-pg-ai-block { padding: 40px 20px; }
	.sl-pg-practice-grid,
	.sl-pg-analytics-grid,
	.sl-pg-tracking-grid,
	.sl-pg-insights-grid { grid-template-columns: 1fr; }
	.sl-pg-feat-stats { gap: var(--space-md); }
}