/*
Theme Name: SEO Strategy
Theme URI: https://www.seostrategy.co.uk
Description: Modern SEO consultancy theme with dark/light/auto mode, icon-rich dropdown navigation, service grid, and AI assistant integration. Forked from the Diplomat MFT Knowledge Base architecture.
Version: 6.6.3
Author: Good Vibes Coding & Claude
Author URI: https://seostrategy.ltd
License: Proprietary
Text Domain: seo-strategy
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
*/

/* ============================================
   PALETTE — LIGHT MODE (default)
   ============================================ */
:root {
  --ss-bg: #f0f4f8;
  --ss-bg-card: #ffffff;
  --ss-bg-card-hover: #f8fafc;
  --ss-bg-elevated: #ffffff;
  --ss-bg-input: #ffffff;
  --ss-bg-accent: rgba(0,102,161,0.06);
  --ss-bg-accent-hover: rgba(0,102,161,0.10);

  --ss-text: #1a2332;
  --ss-text-secondary: #3d5068;
  --ss-text-muted: #5a6d82;
  --ss-text-faint: #5f6f80; /* WCAG AA: 4.67:1 on #f0f4f8 (was #8896a6 = 2.73:1 FAIL) */
  --ss-text-inverse: #ffffff;

  --ss-border: #dce3eb;
  --ss-border-hover: #0077b6;
  --ss-border-input: #dce3eb;

  --ss-blue-900: #002a4d;
  --ss-blue-800: #003052;
  --ss-blue-700: #003d66;
  --ss-blue-600: #005a8e;
  --ss-blue-500: #0066a1;
  --ss-blue-400: #006da5; /* WCAG AA: 5.09:1 on #f0f4f8, 4.66:1 on badge bg (was #0077b6 = 4.40:1 FAIL on page bg) */
  --ss-blue-300: #0090d9;
  --ss-blue-100: #e6f2fa;
  --ss-blue-50: #f0f7fc;

  --ss-green: #10b981;
  --ss-red: #ef4444;
  --ss-yellow: #f59e0b;

  --ss-shadow: 0 1px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
  --ss-shadow-lg: 0 4px 24px rgba(0,48,82,0.12);
  --ss-shadow-dropdown: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);

  --ss-header-from: #0d6aa1; /* v4.9.20: was #177ab4 — darker start gives better logo contrast */
  --ss-header-mid: #005a8e;
  --ss-header-to: #0077b6;
  --ss-header-pad: 14px;         /* ← Desktop header top/bottom padding — tweak this */
  --ss-header-pad-m: 12px;       /* ← Mobile header top/bottom padding — tweak this */

  --ss-radius: 10px;
  --ss-radius-lg: 14px;
  --ss-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ss-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --ss-max-width: 1200px;

  color-scheme: light;
}

/* ============================================
   PALETTE — DARK MODE
   ============================================ */
html.dark {
  --ss-bg: #0a1628;
  --ss-bg-card: #111d2e;
  --ss-bg-card-hover: #162640;
  --ss-bg-elevated: #162640;
  --ss-bg-input: #162640;
  --ss-bg-accent: rgba(0,144,217,0.10);
  --ss-bg-accent-hover: rgba(0,144,217,0.16);

  --ss-text: #e2e8f0;
  --ss-text-secondary: #94a3b8;
  --ss-text-muted: #7d8ea3; /* WCAG AA: 5.41:1 on #0a1628 (was #64748b = 3.81:1 FAIL) */
  --ss-text-faint: #8899aa; /* WCAG AA: 6.20:1 on #0a1628 (was #475569 = 2.39:1 FAIL) */
  --ss-text-inverse: #0a1628;

  --ss-border: #1e3a5f;
  --ss-border-hover: #0090d9;
  --ss-border-input: #1e3a5f;

  --ss-blue-400: #0090d9; /* WCAG AA: 5.17:1 on #0a1628, 4.84:1 on #111d2e (was #0077b6 = 3.72:1 FAIL) */
  --ss-blue-300: #38bdf8; /* Hover state: brighter to differentiate from new blue-400 */

  --ss-shadow: 0 1px 8px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03);
  --ss-shadow-lg: 0 4px 24px rgba(0,0,0,0.4);

  --ss-header-from: #0d1b2a;
  --ss-header-mid: #121f30;
  --ss-header-to: #0f1923;
  --ss-shadow-dropdown: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);

  color-scheme: dark;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--ss-font);
  background: var(--ss-bg);
  color: var(--ss-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ss-blue-400); text-decoration: none; transition: color 0.15s; }

/* WCAG 1.4.1 — links in content areas must be distinguishable by more than colour */
.entry-content a:not(.ss-btn):not(.wp-block-button__link),
.ss-page-section a:not(.ss-btn):not(.wp-block-button__link),
.ss-breadcrumb a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 2px;
}
.entry-content a:not(.ss-btn):not(.wp-block-button__link):hover,
.ss-page-section a:not(.ss-btn):not(.wp-block-button__link):hover,
.ss-breadcrumb a:hover {
  text-decoration-color: currentColor;
}
a:hover { color: var(--ss-blue-300); }

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

/* ============================================
   ACCESSIBILITY — Skip link & focus styles
   ============================================ */
.skip-link {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
  z-index: 10000;
  background: var(--ss-blue-600); color: #fff;
  padding: 12px 24px; font-size: 14px; font-weight: 600;
  border-radius: 0 0 8px 0; text-decoration: none;
}
.skip-link:focus {
  position: fixed; left: 0; top: 0;
  width: auto; height: auto; overflow: visible;
  outline: 3px solid var(--ss-blue-300);
  outline-offset: 2px;
}

/* Focus-visible: keyboard-only focus ring (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--ss-blue-400);
  outline-offset: 2px;
}
a:focus-visible { border-radius: 3px; }
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ss-blue-400);
  outline-offset: 2px;
}
/* Remove default outline for mouse users */
:focus:not(:focus-visible) { outline: none; }

/* Screen-reader only (visually hidden but accessible) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
  background: linear-gradient(135deg, var(--ss-header-from), var(--ss-header-mid), var(--ss-header-to));
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 12px rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Glass shine — top edge highlight */
.site-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.35) 30%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.35) 70%, transparent 95%);
  z-index: 1;
  pointer-events: none;
}
/* Header shimmer — slow light sweep across the background */
.site-header::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.1) 45%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.1) 55%,
    transparent 65%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: header-shimmer 7s ease-in-out infinite;
  pointer-events: none; z-index: 0;
  will-change: background-position;
}
@keyframes header-shimmer {
  0%, 15%  { background-position: 100% 0; }
  85%, 100% { background-position: 0% 0; }
}

/* Dark mode glass header */
html.dark .site-header {
  box-shadow: 0 1px 20px rgba(0,0,0,0.4), 0 0 1px rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
html.dark .site-header::before {
  background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.12) 70%, transparent 95%);
}
html.dark .site-header::after {
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.04) 45%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 55%,
    transparent 65%,
    transparent 100%
  );
  background-size: 300% 100%;
  will-change: background-position;
}

/* Dark mode: solid dropdowns */
html.dark .nav-dropdown {
  background: rgb(13, 22, 38) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  backdrop-filter: none;
}
html.dark .theme-dropdown {
  background: rgb(13, 22, 38) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Header inner — sits above pseudo-elements */
.header-inner {
  max-width: var(--ss-max-width);
  margin: 0 auto;
  padding: var(--ss-header-pad) 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}

/* Logo — fixed left */
.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.header-logo img { width: auto; height: var(--logo-h, 32px); }
.header-logo svg { width: 28px; height: 28px; }
.logo-light { display: block; }
.logo-dark { display: none; }
html.dark .logo-light { display: none; }
html.dark .logo-dark { display: block; }

@media (max-width: 768px) {
  .header-logo img { height: var(--logo-h-m, 28px); }
}

.header-logo--default {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}

/* Brand text (fallback when no logo) */
.header-brand { display: flex; flex-direction: column; justify-content: center; }
.header-title { color: #fff; font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; }
.header-subtitle { color: rgba(255,255,255,0.6); font-size: 11px; line-height: 1.2; }

/* Nav — centered with flex: 1 */
.header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.header-nav > li > a,
.header-nav > li > button {
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ss-font);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
  white-space: nowrap;
}
.header-nav > li > a:hover,
.header-nav > li > button:hover,
.header-nav > li.open > button,
.header-nav > li.current-menu-item > a {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.nav-chevron { width: 14px; height: 14px; transition: transform 0.2s; }
.nav-home-link { display: inline-flex; align-items: center; gap: 6px; }
.nav-home-icon { width: 16px; height: 16px; display: flex; align-items: center; }
.nav-home-icon svg { width: 16px; height: 16px; }
.has-dropdown.open .nav-chevron { transform: rotate(180deg); }

/* Dropdowns */
.has-dropdown { position: relative; }
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 280px;
  background: var(--ss-bg-elevated);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-shadow-dropdown);
  padding: 8px;
  margin-top: 6px;
  z-index: 100;
}
.has-dropdown.open .nav-dropdown { display: block; animation: ss-fade-down 0.15s ease-out; }
/* Exclude services from generic block display — handled below as grid */
[data-dropdown="services"].open .nav-dropdown { display: grid; }
/* Two-column grid for Services mega-menu on desktop */
[data-dropdown="services"] .nav-dropdown {
  width: 560px;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  right: auto;
  left: 50%;
  margin-left: -280px;
}
[data-dropdown="services"] .nav-dropdown .nav-dropdown-sep { display: none; }

/* AI Services dropdown — two-column grid with footer */
[data-dropdown="ai-services"] .nav-dropdown.nav-dropdown--ai-grid {
  width: 620px;
  right: auto;
  left: 50%;
  margin-left: -310px;
  padding-bottom: 8px;
}
.nav-dropdown-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.nav-dropdown-col {
  display: flex;
  flex-direction: column;
}
.nav-dropdown-footer {
  font-weight: 600;
}
.nav-dropdown-footer .nav-dropdown-label {
  font-size: 14px;
}
.nav-dropdown-footer-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
/* Reset sub-item indent within AI grid columns */
.nav-dropdown--ai-grid .nav-dropdown-sub {
  padding-left: 32px;
}
/* Sub-items (LLM child pages) — indented with smaller text */
.nav-dropdown-sub {
  padding-left: 32px;
}
.nav-dropdown-sub .nav-dropdown-icon { width: 16px; height: 16px; }
.nav-dropdown-sub .nav-dropdown-label { font-size: 12.5px; font-weight: 500; }
.nav-dropdown-sub .nav-dropdown-desc { font-size: 11px; }

.nav-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ss-text);
  text-decoration: none;
  transition: background 0.1s;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.nav-dropdown-item:last-child { border-bottom: none; }
html.dark .nav-dropdown-item { border-bottom-color: rgba(255,255,255,0.04); }
html.dark .nav-dropdown-item:last-child { border-bottom: none; }
.nav-dropdown-item:hover { background: var(--ss-bg-accent); color: var(--ss-text); }
.nav-dropdown-icon {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  color: var(--ss-blue-400);
  opacity: 0.5;
  transition: opacity 0.15s;
}
.nav-dropdown-item:hover .nav-dropdown-icon { opacity: 1; }
.nav-dropdown-label { font-weight: 600; font-size: 13.5px; color: var(--ss-text); }
.nav-dropdown-desc { font-size: 12px; color: var(--ss-text-muted); margin-top: 1px; }
.nav-dropdown-sep { height: 1px; background: var(--ss-border); margin: 6px 12px; }

/* Featured nav badge */
.nav-badge {
  display: inline-flex;
  padding: 2px 7px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
  vertical-align: middle;
  border: 1px solid rgba(255,255,255,0.25);
}

/* CTA button in nav */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: var(--ss-blue-600, #1a5276) !important;
  padding: 8px 16px 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
/* Explicitly kill any cached pseudo-element styles */
.header-cta::before,
.header-cta::after {
  content: none !important;
  display: none !important;
}
.header-cta:hover {
  background: #f0f7ff;
  color: var(--ss-blue-500, #1e6690) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
html.dark .header-cta {
  background: var(--ss-blue-600, #1a5276);
  color: #fff !important;
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
html.dark .header-cta:hover {
  background: var(--ss-blue-500, #1e6690);
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.header-cta svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }
.header-cta .cta-pulse {
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  flex-shrink: 0;
  animation: ss-pulse 2s ease-in-out infinite;
}
@keyframes ss-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* Theme toggle (settings pill) */
.header-settings { position: relative; flex-shrink: 0; }

/* AI live dot (mobile nav) */
.ai-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  animation: ss-pulse 2s ease-in-out infinite;
}
.settings-trigger {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.10);
  border: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff;
  transition: background 0.15s;
}
.settings-trigger:hover { background: rgba(255,255,255,0.18); }
.settings-trigger svg { width: 16px; height: 16px; }
.theme-icon-dark { display: none; }
html.dark .theme-icon-light { display: none; }
html.dark .theme-icon-dark { display: block; }

.theme-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  background: var(--ss-bg-elevated);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-dropdown);
  padding: 8px;
  margin-top: 6px;
}
.header-settings.open .theme-dropdown { display: block; animation: ss-fade-down 0.15s ease-out; }

.theme-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ss-text-faint);
  padding: 4px 10px 8px;
  font-weight: 600;
}
.theme-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--ss-text);
  font-size: 13px;
  font-family: var(--ss-font);
  cursor: pointer;
  transition: background 0.1s;
}
.theme-option:hover { background: var(--ss-bg-accent); }
.theme-option .opt-left { display: flex; align-items: center; gap: 8px; }
.theme-option .opt-left svg { width: 15px; height: 15px; color: var(--ss-text-muted); }
.theme-check { width: 15px; height: 15px; color: var(--ss-blue-400); }
.theme-check.hidden { visibility: hidden; }

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.10);
  border: none; border-radius: 8px;
  align-items: center; justify-content: center;
  cursor: pointer; color: #fff;
}
.mobile-menu-btn svg { width: 20px; height: 20px; }

/* ============================================
   MOBILE NAV
   ============================================ */
.mobile-nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1100;
  opacity: 0; transition: opacity 0.25s;
}
.mobile-nav-overlay.active { display: block; opacity: 1; }

.mobile-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 85vw);
  background: var(--ss-bg-elevated);
  z-index: 1200;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html.dark .mobile-nav {
  background: rgba(10, 22, 40, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-nav.active { transform: translateX(0); }

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ss-border);
}
.mobile-nav-header-title { font-weight: 700; font-size: 15px; color: var(--ss-text); }
.mobile-nav-close {
  width: 32px; height: 32px;
  background: var(--ss-bg-accent);
  border: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ss-text-muted);
}
.mobile-nav-close svg { width: 16px; height: 16px; }

.mobile-nav-section { padding: 16px 20px; border-bottom: 1px solid var(--ss-border); }
.mobile-nav-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ss-text-faint);
  font-weight: 600;
  margin-bottom: 10px;
}

.mobile-theme-options { display: flex; gap: 6px; }
.mobile-theme-opt {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px;
  background: var(--ss-bg-accent);
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 11px; font-weight: 500;
  color: var(--ss-text-muted);
  cursor: pointer; font-family: var(--ss-font);
}
.mobile-theme-opt svg { width: 18px; height: 18px; }
.mobile-theme-opt.active {
  border-color: var(--ss-blue-400);
  color: var(--ss-blue-400);
  background: var(--ss-bg-accent-hover);
}

.mobile-nav-link {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  color: var(--ss-text);
  text-decoration: none;
}
.mobile-nav-link svg {
  width: 18px; height: 18px; flex-shrink: 0;
  margin-top: 2px; color: var(--ss-blue-400);
}
.mnl-label { font-weight: 600; font-size: 13.5px; }
.mnl-desc { font-size: 12px; color: var(--ss-text-muted); margin-top: 1px; }
/* Indented sub-items for child pages (LLM sub-topics) */
.mobile-nav-sub { padding-left: 30px; }
.mobile-nav-sub svg { width: 14px; height: 14px; }
.mobile-nav-sub .mnl-label { font-size: 12.5px; font-weight: 500; }

/* ============================================
   SITE MAIN — Shared
   ============================================ */
.site-main {
  max-width: var(--ss-max-width);
  margin: 0 auto;
  padding: 0 24px;
}
/* Page template overrides site-main padding (uses ss-container instead) */
.site-main:has(.ss-breadcrumb) { padding: 0; }

/* ============================================
   HERO ZONE — contained card panel
   ============================================ */
.ss-hero-zone {
  max-width: 900px;
  margin: 32px auto 32px!important;
  padding: 16px 40px 12px;
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: 20px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.06);
}
html.dark .ss-hero-zone {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.08);
}
@media (max-width: 768px) {
  .ss-hero-zone {
    margin: 12px 12px 20px;
    padding: 24px 20px 16px;
    border-radius: 16px;
  }
}

/* Search bar glow — calm pulse */
@keyframes searchGlow {
  0%, 100% { box-shadow: var(--ss-shadow), 0 0 0 0 rgba(0, 119, 182, 0); }
  50% { box-shadow: var(--ss-shadow), 0 0 16px 2px rgba(0, 119, 182, 0.08); }
}
.ss-search-bar {
  animation: searchGlow 4s ease-in-out infinite;
}
.ss-search-bar:focus-within {
  animation: none;
}
html.dark .ss-search-bar {
  animation-name: searchGlowDark;
}
@keyframes searchGlowDark {
  0%, 100% { box-shadow: var(--ss-shadow), 0 0 0 0 rgba(0, 144, 217, 0); }
  50% { box-shadow: var(--ss-shadow), 0 0 20px 3px rgba(0, 144, 217, 0.12); }
}

/* ============================================
   HERO
   ============================================ */
.ss-hero {
  text-align: center;
  padding: 0 0 20px;
}
.ss-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ss-bg-accent);
  border: 1px solid var(--ss-border);
  border-radius: 20px;
  padding: 6px 16px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--ss-blue-400);
  font-weight: 500;
}
.ss-hero-badge svg { width: 14px; height: 14px; }
.ss-hero-title {
  font-size: var(--hero-fs-d, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  margin-top: 12px;
}
.ss-hero-title .hero-title--mobile { display: none; }
.ss-hero-title .hero-title--desktop { display: inline; }
@media (max-width: 768px) {
  .ss-hero-title { font-size: var(--hero-fs-m, 26px); }
  .ss-hero-title .hero-title--mobile { display: inline; }
  .ss-hero-title .hero-title--desktop { display: none; }
}
.ss-hero-title .highlight, .ss-hero h1 .highlight { color: var(--ss-blue-400); }
.ss-hero p {
  font-size: 16px;
  color: var(--ss-text-secondary);
  max-width: 580px;
  margin: 0 auto 22px;
  line-height: 1.5;
}
.ss-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ss-blue-500);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: var(--ss-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ss-font);
  box-shadow: 0 2px 12px rgba(0,102,161,0.3);
  transition: all 0.15s;
  text-decoration: none;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,102,161,0.35); color: #fff; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ss-bg-accent);
  color: var(--ss-blue-500);
  border: 1px solid var(--ss-border);
  padding: 12px 28px;
  border-radius: var(--ss-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ss-font);
  transition: all 0.15s;
  text-decoration: none;
}
.btn-secondary:hover { background: var(--ss-bg-accent-hover); color: var(--ss-blue-500); }

/* ============================================
   SEARCH BAR
   ============================================ */
.ss-search {
  max-width: 640px;
  margin: 12px auto 8px;
  position: relative;
}
.ss-search-bar {
  display: flex;
  align-items: center;
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  padding: 0 16px;
  box-shadow: var(--ss-shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ss-search-bar:focus-within {
  border-color: var(--ss-blue-400);
  box-shadow: 0 0 0 3px rgba(0,119,182,0.1);
}
.ss-search-icon { width: 18px; height: 18px; color: var(--ss-text-muted); flex-shrink: 0; }
.ss-search-bar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 11px 12px;
  font-size: 14px;
  background: transparent;
  color: var(--ss-text);
  font-family: var(--ss-font);
}
.ss-search-bar input::placeholder { color: var(--ss-text-faint); }
.ss-search-clear {
  display: none;
  width: 24px; height: 24px;
  background: var(--ss-bg-accent);
  border: none; border-radius: 6px;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--ss-text-muted);
}
.ss-search-clear svg { width: 12px; height: 12px; }

/* Auto-suggest results dropdown */
.ss-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
  padding: 8px;
}
.ss-search-results.is-active { display: block; }
.ss-search-results:empty { display: none; }

.ss-search-result {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ss-text);
  transition: background 0.15s;
}
.ss-search-result:hover,
.ss-search-result:focus,
.ss-search-result.is-focused {
  background: var(--ss-bg-accent);
  text-decoration: none;
  color: var(--ss-text);
}
.ss-search-result + .ss-search-result {
  border-top: 1px solid var(--ss-border);
}
.ss-search-result-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
  line-height: 1.3;
}
.ss-search-result-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ss-blue-400);
  font-weight: 600;
  margin-bottom: 4px;
}
.ss-search-result-snippet {
  font-size: 13px;
  color: var(--ss-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ss-search-result mark {
  background: rgba(0, 119, 182, 0.12);
  color: var(--ss-blue-400);
  font-weight: 600;
  padding: 0 2px;
  border-radius: 2px;
}
html.dark .ss-search-result mark {
  background: rgba(0, 144, 217, 0.2);
  color: var(--ss-blue-300);
}
.ss-search-no-results {
  padding: 16px 14px;
  text-align: center;
  color: var(--ss-text-muted);
  font-size: 14px;
}
html.dark .ss-search-results {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Search results dropdown */
.ss-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--ss-bg-elevated);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-shadow-dropdown);
  padding: 12px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 50;
}

/* ============================================
   SERVICE GRID
   ============================================ */
.ss-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 48px;
}
.ss-service-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: var(--ss-text);
  box-shadow: var(--ss-shadow);
  position: relative;
  overflow: hidden;
}
.ss-service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ss-shadow-lg);
  border-color: var(--ss-border-hover);
  color: var(--ss-text);
}
.ss-service-card--featured {
  border-color: var(--ss-blue-400);
  background: var(--ss-bg-accent);
}
.ss-service-card--featured:hover { border-color: var(--ss-blue-300); }

.ss-card-badge {
  position: absolute;
  top: 0; right: 0;
  background: var(--ss-blue-500);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 10px 2px 12px;
  border-radius: 0 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ss-card-icon {
  width: 42px; height: 42px;
  background: var(--ss-bg-accent);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--ss-blue-500);
}
.ss-card-icon svg { width: 20px; height: 20px; }
.ss-card-title { font-weight: 650; font-size: 14px; margin-bottom: 2px; }
.ss-card-desc { font-size: 12.5px; color: var(--ss-text-muted); line-height: 1.4; }

/* ============================================
   TRUST BAR
   ============================================ */
.ss-trust {
  text-align: center;
  padding: 32px 0 48px;
  border-top: 1px solid var(--ss-border);
}
.ss-trust-label {
  font-size: 12px;
  color: var(--ss-text-muted);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.ss-trust-logos {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  align-items: center;
}
.ss-trust-logo-item {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s;
  opacity: 0.5;
}
.ss-trust-logo-item:hover {
  opacity: 0.8;
}
.ss-trust-logo-img {
  max-height: 32px;
  height: auto;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.2s;
}
/* SVGs in img tags need explicit dimensions — if browser can't determine width, force it */
img.ss-trust-logo-img[src$=".svg"] {
  height: 32px;
  width: 120px;
  object-fit: contain;
  object-position: center;
}
.ss-trust-logo-item:hover .ss-trust-logo-img {
  filter: grayscale(0%);
}
html.dark .ss-trust-logo-img {
  filter: grayscale(100%) brightness(2);
}
html.dark .ss-trust-logo-item:hover .ss-trust-logo-img {
  filter: grayscale(0%) brightness(1.2);
}
/* Dual light/dark trust logos — use same toggle as site logo */
.ss-trust-logo-img.logo-light { display: inline-block; }
.ss-trust-logo-img.logo-dark { display: none; }
html.dark .ss-trust-logo-img.logo-light { display: none; }
html.dark .ss-trust-logo-img.logo-dark { display: inline-block; filter: grayscale(100%); }
html.dark .ss-trust-logo-item:hover .ss-trust-logo-img.logo-dark { filter: grayscale(0%); }
.ss-trust-logo-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-text-muted);
}

/* ─── Homepage Content Below Fold ─── */
.ss-home-content {
  padding: 56px 0 16px;
  border-top: 1px solid var(--ss-border);
  margin-top: 48px;
}

/* ============================================
   SECTION DIVIDER
   ============================================ */
.ss-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0;
  color: var(--ss-text-faint);
  font-size: 13px;
  font-weight: 500;
}
.ss-divider::before,
.ss-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ss-border);
}

/* ============================================
   ARTICLE / SINGLE POST
   ============================================ */

/* Article two-column layout */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
  max-width: var(--ss-max-width);
  margin: 0 auto;
  padding: 0 24px 48px;
}
/* Blog posts: no page-hero between breadcrumb and grid — add breathing room */
.article-layout--post { padding-top: 32px; }

.article-wrap {
  min-width: 0;
  padding: 40px 48px 48px;
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
}

/* Sidebar */
.article-sidebar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sidebar-section {
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
  padding: 24px 20px 20px;
}
.sidebar-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ss-text-muted);
  margin-bottom: 14px;
}
.sidebar-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: var(--ss-radius);
  text-decoration: none;
  color: var(--ss-text);
  transition: background 0.12s;
}
.sidebar-card:hover { background: var(--ss-bg-accent); }
.sidebar-card-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ss-blue-400);
}
.sidebar-card-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ss-text);
}
.sidebar-card-desc {
  font-size: 12px;
  color: var(--ss-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.sidebar-cta p {
  font-size: 13.5px;
  color: var(--ss-text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
}
.sidebar-cta .btn-primary { font-size: 13.5px; padding: 10px 16px; }

/* Inline sections within article-wrap (page.php) */
.ss-page-howto-inline,
.ss-page-video-inline {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--ss-border);
}
.ss-page-howto-inline h2,
.ss-page-video-inline h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.article-wrap h1 {
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 12px;
}
.article-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--ss-text-muted);
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ss-border);
}

/* Article topic tags (single.php) */
.article-topics {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--ss-border);
}
.article-topics-label {
  font-size: 13px;
  color: var(--ss-text-muted);
  margin-bottom: 8px;
}
.article-topics-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.article-topic-tag {
  display: inline-block;
  background: var(--ss-bg-accent);
  color: var(--ss-blue-500);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
}
.article-topic-tag:hover {
  background: var(--ss-bg-accent-hover);
  color: var(--ss-blue-500);
}

.article-content h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 36px 0 12px;
  letter-spacing: -0.01em;
}
.article-content h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 10px;
  color: var(--ss-blue-700);
}
html.dark .article-content h3 { color: var(--ss-blue-300); }

.article-content p {
  margin-bottom: 16px;
  line-height: 1.7;
  color: var(--ss-text-secondary);
}
.article-content ul,
.article-content ol {
  margin: 0 0 16px 24px;
  color: var(--ss-text-secondary);
}
.article-content li { margin-bottom: 6px; line-height: 1.6; }

.article-content code {
  background: var(--ss-bg-accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--ss-font-mono);
  font-size: 0.87em;
  color: var(--ss-blue-500);
}
html.dark .article-content code { color: var(--ss-blue-300); }

.article-content pre {
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  padding: 20px;
  overflow-x: auto;
  margin-bottom: 20px;
}
.article-content pre code {
  background: none;
  padding: 0;
  font-size: 13px;
}

.article-content blockquote {
  border-left: 3px solid var(--ss-blue-400);
  padding: 12px 20px;
  margin: 20px 0;
  background: var(--ss-bg-accent);
  border-radius: 0 var(--ss-radius) var(--ss-radius) 0;
  color: var(--ss-text-secondary);
}
.article-content img {
  border-radius: var(--ss-radius);
  margin: 20px 0;
}
.article-content table {
  width: 100%; border-collapse: collapse; font-size: 0.92em; line-height: 1.4;
  margin: 20px 0 28px;
}
.article-content thead tr { border-bottom: 2px solid var(--ss-text); }
.article-content th {
  padding: 0.6em 1em; text-align: left; font-weight: 600;
  color: var(--ss-text); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
/* Mobile: tables scroll horizontally rather than breaking layout */
@media (max-width: 768px) {
  .article-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
  }
  .article-content th { white-space: normal; min-width: 80px; }
  .article-content td { min-width: 100px; }
}
.article-content tbody tr { border-bottom: 1px solid var(--ss-border); transition: background-color 0.15s; }
.article-content tbody tr:last-child { border-bottom: none; }
.article-content tbody tr:hover { background: var(--ss-bg-accent); }
.article-content td { padding: 0.6em 1em; color: var(--ss-text-secondary); vertical-align: middle; }
.article-content td:first-child { font-weight: 500; color: var(--ss-text); }
.article-content .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0 28px; }
.article-content .table-wrap table { margin: 0; }
html.dark .article-content thead tr { border-bottom-color: rgba(255,255,255,0.2); }
html.dark .article-content tbody tr { border-bottom-color: rgba(255,255,255,0.06); }
html.dark .article-content tbody tr:hover { background: rgba(255,255,255,0.05); }
html.dark .article-content td { color: #a0b0c0; }
html.dark .article-content td:first-child { color: #e0e8f0; }

/* ============================================
   KNOWLEDGE HUB / BLOG GRID
   ============================================ */
.ss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding-bottom: 48px;
}
.ss-post-card {
  display: block;
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
  padding: 24px;
  text-decoration: none;
  color: var(--ss-text);
  box-shadow: var(--ss-shadow);
  transition: all 0.2s;
}
.ss-post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ss-shadow-lg);
  border-color: var(--ss-border-hover);
  color: var(--ss-text);
}
.ss-post-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}
.ss-post-card p {
  font-size: 13.5px;
  color: var(--ss-text-muted);
  line-height: 1.5;
}
.ss-post-card .card-meta {
  font-size: 12px;
  color: var(--ss-text-faint);
  margin-top: 12px;
}
.ss-post-card .card-cat {
  display: inline-block;
  background: var(--ss-bg-accent);
  color: var(--ss-blue-500);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* ============================================
   KNOWLEDGE HUB — GUIDES SECTION
   ============================================ */
.hub-guides {
  max-width: var(--ss-container-max);
  margin: 0 auto 32px;
  padding: 0 var(--ss-container-padding);
}
.hub-guides__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.hub-guides__icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-bg-accent);
  color: var(--ss-blue-500);
  border-radius: 10px;
  margin-top: 2px;
}
.hub-guides__icon svg { width: 18px; height: 18px; }
.hub-guides__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--ss-text);
}
.hub-guides__desc {
  font-size: 13.5px;
  color: var(--ss-text-muted);
  margin: 0;
}
.hub-guides__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.hub-guide-card {
  display: flex;
  flex-direction: column;
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-blue-500);
  border-radius: var(--ss-radius-lg);
  padding: 24px;
  text-decoration: none;
  color: var(--ss-text);
  box-shadow: var(--ss-shadow);
  transition: all 0.2s;
  position: relative;
}
.hub-guide-card::before {
  content: 'GUIDE';
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ss-blue-500);
  background: var(--ss-bg-accent);
  padding: 2px 8px;
  border-radius: 4px;
}
.hub-guide-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ss-shadow-lg);
  border-color: var(--ss-blue-600, var(--ss-blue-500));
  color: var(--ss-text);
}
.hub-guide-card__parent {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ss-blue-500);
  margin-bottom: 6px;
}
.hub-guide-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
}
.hub-guide-card__excerpt {
  font-size: 13.5px;
  color: var(--ss-text-muted);
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}
.hub-guide-card__meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--ss-text-faint);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ss-border);
}
.hub-guide-card__meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hub-guide-card__meta svg {
  width: 13px;
  height: 13px;
  opacity: 0.6;
}

/* Hub section labels (Articles & News) */
.hub-section-label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: var(--ss-container-max);
  margin: 8px auto 20px;
  padding: 0 var(--ss-container-padding);
}
.hub-section-label__icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-bg-accent);
  color: var(--ss-blue-500);
  border-radius: 10px;
  margin-top: 2px;
}
.hub-section-label__icon svg { width: 18px; height: 18px; }
.hub-section-label__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--ss-text);
}
.hub-section-label__desc {
  font-size: 13.5px;
  color: var(--ss-text-muted);
  margin: 0;
}

/* ── Hub see-all links ── */
.hub-see-all {
  text-align: right;
  padding: 4px 0 32px;
}
.hub-see-all__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ss-blue-500);
  text-decoration: none;
  transition: gap 0.2s ease;
}
.hub-see-all__link:hover {
  gap: 10px;
  color: var(--ss-blue-400, var(--ss-blue-500));
}
.hub-see-all__link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.hub-guides .hub-see-all {
  padding: 16px 0 8px;
  border-top: 1px solid var(--ss-border);
  margin-top: 8px;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination { text-align: center; padding-bottom: 48px; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px; height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ss-text-muted);
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  margin: 0 2px;
  text-decoration: none;
  transition: all 0.15s;
}
.pagination .page-numbers:hover { border-color: var(--ss-blue-400); color: var(--ss-blue-400); }
.pagination .page-numbers.current {
  background: var(--ss-blue-500);
  color: #fff;
  border-color: var(--ss-blue-500);
}

/* Infinite scroll loader */
.ss-infinite-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 0 48px;
}
.ss-infinite-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--ss-border);
  border-top-color: var(--ss-blue-400);
  border-radius: 50%;
  animation: ss-spin 0.7s linear infinite;
}
@keyframes ss-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  border-top: 1px solid var(--ss-border);
  padding: 48px 24px 24px;
}
.footer-inner {
  max-width: var(--ss-max-width);
  margin: 0 auto;
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg, 14px);
  padding: 36px 32px 24px;
  box-shadow: var(--ss-shadow);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.footer-col-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ss-text-muted);
  margin-bottom: 16px;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.footer-links li:last-child { border-bottom: none; }
html.dark .footer-links li { border-bottom-color: rgba(255,255,255,0.04); }
html.dark .footer-links li:last-child { border-bottom: none; }
.footer-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ss-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--ss-blue-400); }
.footer-link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity 0.15s;
}
.footer-links a:hover .footer-link-icon,
.footer-contact-line:hover .footer-link-icon { opacity: 0.8; }
.footer-brand-desc {
  font-size: 13px;
  color: var(--ss-text-muted);
  line-height: 1.6;
  margin: 0 0 12px;
}
.footer-contact-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ss-text-muted);
}
.footer-contact-line a {
  color: var(--ss-text-secondary);
  text-decoration: none;
  font-weight: 500;
}
.footer-contact-line a:hover { color: var(--ss-blue-400); }
.footer-social-sep {
  height: 1px;
  background: rgba(0,0,0,0.06);
  margin: 16px 0;
}
html.dark .footer-social-sep { background: rgba(255,255,255,0.06); }
.footer-social {
  display: flex;
  gap: 12px;
}
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--ss-text-muted);
  transition: color 0.15s, background 0.15s;
}
.footer-social-link:hover {
  color: var(--ss-blue-400);
  background: var(--ss-bg-accent);
}
.footer-social-link svg { width: 18px; height: 18px; }
.footer-bottom {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  text-align: center;
}
html.dark .footer-bottom { border-top-color: rgba(255,255,255,0.06); }
.footer-copyright {
  font-size: 12.5px;
  color: var(--ss-text-muted);
}
.footer-copyright a {
  color: var(--ss-text-secondary);
  text-decoration: none;
}
.footer-copyright a:hover { color: var(--ss-blue-400); }

/* ============================================
   CATEGORY ARCHIVE (v4.7.0)
   ============================================ */
.category-hero {
  padding: 48px 0 16px;
}
.category-hero .ss-container {
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg, 14px);
  padding: 32px 36px;
  box-shadow: var(--ss-shadow);
}
.category-hero__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ss-blue-500, #0066a1);
  margin-bottom: 8px;
}
.category-hero__title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 12px;
}
.category-hero__desc {
  font-size: 1rem;
  color: var(--ss-text-secondary);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 12px;
}
.category-hero__count {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ss-text-muted);
  background: var(--ss-bg-accent);
  padding: 3px 10px;
  border-radius: 6px;
}
.category-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
  padding: 28px 0 60px;
}
.blog-grid {
  display: grid;
  gap: 24px;
}
.blog-card {
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg, 14px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 200px 1fr;
  transition: box-shadow 0.15s;
}
.blog-card:hover { box-shadow: var(--ss-shadow-lg); }
.blog-card-image { overflow: hidden; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 20px 24px; }
.blog-card-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.3;
}
.blog-card-title a { color: var(--ss-text); text-decoration: none; }
.blog-card-title a:hover { color: var(--ss-blue-400); }
.blog-card-excerpt {
  font-size: 13.5px;
  color: var(--ss-text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}
.blog-card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--ss-text-muted);
}
@media (max-width: 768px) {
  .category-layout { grid-template-columns: 1fr; }
  .blog-card { grid-template-columns: 1fr; }
  .blog-card-image { max-height: 180px; }
}

/* ============================================
   SECTION HEADINGS
   ============================================ */
.section-heading {
  text-align: center;
  padding: 40px 0 24px;
}
.section-heading h1 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.section-heading p {
  font-size: 16px;
  color: var(--ss-text-secondary);
  max-width: 560px;
  margin: 0 auto;
}

/* AI Online status pill */
.ss-ai-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: 999px;
  padding: 8px 20px 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-text);
  margin-bottom: 16px;
  box-shadow: var(--ss-shadow);
}
.ss-ai-status-dot {
  width: 10px; height: 10px;
  background: #22c55e;
  border-radius: 50%;
  flex-shrink: 0;
  animation: ss-pulse 2s ease-in-out infinite;
}

/* ============================================
   404 PAGE
   ============================================ */
.ss-404 {
  text-align: center;
  padding: 48px 24px 80px;
  max-width: 720px;
  margin: 0 auto;
}
.ss-404-icon { margin-bottom: 16px; }
.ss-404-icon svg { width: 48px; height: 48px; color: var(--ss-blue-400); margin: 0 auto; }
.ss-404 h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.ss-404 > p { color: var(--ss-text-muted); margin-bottom: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }
.ss-404-search-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto 40px;
}
.ss-404-search-form input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--ss-border);
  border-radius: 8px;
  background: var(--ss-bg-card);
  color: var(--ss-text);
  font-size: 14px;
}
.ss-404-search-form input:focus {
  outline: 2px solid var(--ss-blue-400);
  outline-offset: 2px;
}
.ss-404-search-form button {
  padding: 10px 20px;
  background: var(--ss-blue-600);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.ss-404-search-form button:hover { background: var(--ss-blue-500); }
.ss-404-heading {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--ss-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ss-404-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: left;
  margin-bottom: 40px;
}
.ss-404-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--ss-border);
  background: var(--ss-bg-card);
  color: var(--ss-text);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ss-404-card:hover {
  border-color: var(--ss-blue-400);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  color: var(--ss-text);
}
.ss-404-card-icon { flex-shrink: 0; }
.ss-404-card-icon svg { width: 20px; height: 20px; color: var(--ss-blue-400); margin-top: 2px; }
.ss-404-card-text { display: flex; flex-direction: column; gap: 2px; }
.ss-404-card-text strong { font-size: 14px; font-weight: 600; }
.ss-404-card-text span:last-child { font-size: 12px; color: var(--ss-text-muted); }
.ss-404-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px) {
  .ss-404-grid { grid-template-columns: 1fr; }
  .ss-404-search-form { flex-direction: column; }
  .ss-404-cta { flex-direction: column; align-items: stretch; }
  .ss-404-cta .btn-primary,
  .ss-404-cta .btn-secondary { width: 100%; text-align: center; }
}

/* ============================================
   PAGE TEMPLATE: LLM Optimisation (AI Assistant)
   ============================================ */
.ss-assistant-wrap {
  max-width: 720px;
  margin: 0 auto 24px;
}
.ss-phase-note {
  max-width: 720px;
  margin: 0 auto 48px;
  background: var(--ss-bg-accent);
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  padding: 20px 24px;
  font-size: 13.5px;
  color: var(--ss-text-secondary);
  line-height: 1.6;
}
.ss-phase-note strong { color: var(--ss-text); }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes ss-fade-down {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ss-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ss-text-faint);
  border-radius: 10px;
}
html.dark ::-webkit-scrollbar-thumb { background: #334155; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .header-nav,
  .header-cta,
  .header-settings { display: none; }
  .mobile-menu-btn { display: flex; margin-left: auto; }
  .header-inner { padding-top: var(--ss-header-pad-m); padding-bottom: var(--ss-header-pad-m); }

  .ss-hero { padding: 0 0 16px; }
  .ss-hero p { font-size: 15px; }

  .article-wrap { padding: 24px 24px 32px; }
  .article-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 32px;
  }
  .article-layout--post { padding-top: 24px; }
  .article-sidebar {
    position: static;
    order: 2;
  }

  .ss-service-grid {
    grid-template-columns: 1fr;
  }
  .ss-grid {
    grid-template-columns: 1fr;
  }

  .ss-trust-logos { gap: 20px; }
  .ss-trust-logo-text { font-size: 12px; }
  .ss-trust-logo-img { max-height: 26px; }
  img.ss-trust-logo-img[src$=".svg"] { height: 26px; width: 100px; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-inner { padding: 28px 20px 20px; }
}

@media (max-width: 480px) {
  .ss-hero-actions { flex-direction: column; align-items: center; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   CASE STUDY — Client Results Template
   ================================================================ */

.ss-case-study { padding-bottom: 60px; }

/* Hero */
.cs-hero { padding: 60px 0 40px; background: var(--ss-bg-alt, #f4f7fa); border-bottom: 1px solid var(--ss-border); }
html.dark .cs-hero { background: var(--ss-bg-alt); }
.cs-hero__meta { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.cs-hero__title { font-size: 32px; line-height: 1.15; margin: 0 0 12px; }
.cs-hero__subtitle { font-size: 1.15rem; color: var(--ss-muted); max-width: 100%; margin: 0; padding-top: 10px; padding-bottom: 10px; }

.cs-badge { display: inline-block; padding: 4px 14px; border-radius: 100px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; }
.cs-badge--industry { background: var(--ss-blue-50, #e8f1f8); color: var(--ss-blue-700, #004a75); }
.cs-badge--timeline { background: #e8f8ef; color: #0a6640; }
html.dark .cs-badge--industry { background: rgba(0,102,161,0.15); color: #7eb8db; }
html.dark .cs-badge--timeline { background: rgba(16,185,129,0.12); color: #6ee7b7; }

.cs-services-used { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.cs-service-tag { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 0.78rem; font-weight: 500; background: var(--ss-bg); border: 1px solid var(--ss-border); color: var(--ss-text); text-decoration: none; transition: border-color 0.15s; }
.cs-service-tag:hover { border-color: var(--ss-blue-500); color: var(--ss-blue-600); }

/* Client Logo */
.cs-hero__layout { display: block; }
.cs-hero__layout--has-logo { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.cs-hero__content { flex: 1; min-width: 0; }
.cs-client-logo--desktop { flex-shrink: 0; margin-top: 40px; background: #fff; border-radius: 12px; padding: 20px 28px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.cs-client-logo--desktop img { max-height: 80px; max-width: 200px; width: auto; height: auto; display: block; }
.cs-client-logo--mobile { display: none; }
.cs-client-logo--mobile img { max-height: 60px; max-width: 180px; width: auto; height: auto; display: block; }
.cs-client-logo__link { display: block; text-decoration: none; transition: opacity 0.15s; }
.cs-client-logo__link:hover { opacity: 0.8; }

/* Metrics Bar */
.cs-metrics { padding: 32px 0; margin-bottom: 32px; background: var(--ss-blue-600, #0066a1); color: #fff; }
.cs-metrics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; text-align: center; }
.cs-metric__value { display: block; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.cs-metric__label { display: block; margin-top: 6px; font-size: 0.82rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.05em; }

/* Body */
.cs-body { max-width: 780px; margin: 0 auto; padding: 40px 20px; }

/* Sections — white card treatment */
.cs-section { margin-bottom: 32px; background: #fff; border-radius: 12px; border: 1px solid var(--ss-border); padding: 32px; box-shadow: 0 1px 4px rgba(0,48,82,0.04); }
.cs-section.cs-faqs { background: transparent; border: none; padding: 32px 0; box-shadow: none; }
html.dark .cs-section { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); box-shadow: none; }
html.dark .cs-section.cs-faqs { background: transparent; border: none; }
.cs-section__header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.cs-section__number { font-size: 1.5rem; font-weight: 800; color: var(--ss-blue-500); min-width: 36px; }
.cs-section__icon { color: var(--ss-blue-500); }
.cs-section__icon svg { width: 24px; height: 24px; }
.cs-section__title { font-size: 1.5rem; font-weight: 700; margin: 0; }

/* HowTo Steps */
.cs-steps { margin-top: 28px; padding: 28px; background: #f4f7fa; border-radius: 12px; border: 1px solid var(--ss-border); }
.cs-steps__heading { font-size: 1.1rem; font-weight: 600; color: var(--ss-blue-600); margin: 0 0 20px; }
.cs-steps__list { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.cs-step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ss-border); }
.cs-step:last-child { border-bottom: none; padding-bottom: 0; }
.cs-step__marker { width: 36px; height: 36px; border-radius: 50%; background: var(--ss-blue-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; }
.cs-step__title { font-weight: 600; font-size: 1.05rem; margin: 0 0 6px; }
.cs-step__text { font-size: 0.95rem; color: var(--ss-muted); }
.cs-step__text p:last-child { margin-bottom: 0; }

/* Video */
.cs-video__wrapper { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 12px; overflow: hidden; background: #000; margin-top: 16px; }
.cs-video__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Testimonial */
.cs-testimonial { margin: 0 0 32px; padding: 28px 32px; background: #fff; border: 1px solid var(--ss-border); border-left: 4px solid var(--ss-blue-500); border-radius: 0 12px 12px 0; font-style: italic; box-shadow: 0 1px 4px rgba(0,48,82,0.04); }
.cs-testimonial__text { font-size: 1.1rem; line-height: 1.7; margin: 0 0 16px; }
.cs-testimonial__text::before { content: "\201C"; font-size: 2rem; color: var(--ss-blue-400); line-height: 0; vertical-align: -0.3em; margin-right: 4px; }
.cs-testimonial__footer { font-style: normal; font-size: 0.9rem; }
.cs-testimonial__role { display: block; color: var(--ss-muted); }

/* FAQs */
.cs-faq-list { display: flex; flex-direction: column; gap: 8px; }
.cs-faq { border: 1px solid var(--ss-border); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,48,82,0.03); }
html.dark .cs-faq { background: rgba(255,255,255,0.03); box-shadow: none; }
.cs-faq__question { padding: 14px 18px; cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none; display: flex; align-items: center; gap: 10px; }
.cs-faq__question::-webkit-details-marker { display: none; }
.cs-faq__question::marker { display: none; content: ''; font-size: 0; }
.cs-faq__question::before { content: "+"; font-weight: 400; color: var(--ss-blue-500); font-size: 1.2rem; line-height: 1; flex-shrink: 0; width: 16px; text-align: center; }
.cs-faq[open] .cs-faq__question::before { content: "−"; }
.cs-faq__answer { padding: 0 18px 16px; font-size: 0.95rem; color: var(--ss-muted); }
.cs-faq__answer p:last-child { margin-bottom: 0; }

/* CTA */
.cs-cta { text-align: center; padding: 48px 28px; background: #fff; border: 1px solid var(--ss-border); border-radius: 16px; margin-top: 16px; box-shadow: 0 1px 4px rgba(0,48,82,0.04); }
.cs-cta h2 { font-size: 1.6rem; margin: 0 0 12px; }
.cs-cta p { color: var(--ss-muted); margin: 0 0 24px; }

/* Related */
.cs-related { padding: 48px 0; border-top: 1px solid var(--ss-border); margin-top: 40px; }
.cs-related h2 { text-align: center; margin: 0 0 28px; font-size: 1.4rem; }
.cs-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cs-related__card { display: block; padding: 24px; border-radius: 12px; border: 1px solid var(--ss-border); background: #fff; text-decoration: none; color: var(--ss-text); transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 1px 4px rgba(0,48,82,0.04); }
.cs-related__card:hover { transform: translateY(-2px); box-shadow: var(--ss-shadow); }
.cs-related__card h3 { font-size: 1.1rem; margin: 10px 0 6px; }
.cs-related__card p { font-size: 0.88rem; color: var(--ss-muted); margin: 0; }
.cs-related__metric { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--ss-blue-600); font-size: 0.9rem; }

/* Responsive */
@media (max-width: 768px) {
  .cs-hero { padding: 40px 0 28px; }
  .cs-hero__layout--has-logo { flex-direction: column; gap: 0; }
  .cs-client-logo--desktop { display: none; }
  .cs-client-logo--mobile { display: inline-block; background: #fff; border-radius: 10px; padding: 14px 20px; margin-top: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
  .cs-body { padding: 28px 16px; }
  .cs-section { padding: 24px; }
  .cs-steps { padding: 20px; }
  .cs-testimonial { padding: 20px 24px; }
  .cs-metrics__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cs-metrics__grid { grid-template-columns: 1fr; }
  .cs-step { flex-direction: column; gap: 8px; }
  .cs-related__grid { grid-template-columns: 1fr; }
}

/* ── Case Study Dark Mode ── */
html.dark .cs-section__number { color: #5eb8e4; }
html.dark .cs-section__icon { color: #5eb8e4; }
html.dark .cs-steps { background: rgba(0,102,161,0.08); border-color: rgba(255,255,255,0.08); }
html.dark .cs-steps__heading { color: #7ec8e8; }
html.dark .cs-step__marker { background: #0080c0; }
html.dark .cs-step__title { color: #e0e8f0; }
html.dark .cs-step__text { color: #a0b0c0; }
html.dark .cs-step { border-bottom-color: rgba(255,255,255,0.06); }
html.dark .cs-testimonial { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); border-left-color: #5eb8e4; box-shadow: none; }
html.dark .cs-testimonial__text { color: #c8d4e0; }
html.dark .cs-testimonial__text::before { color: #5eb8e4; }
html.dark .cs-testimonial__footer { color: #a0b0c0; }
html.dark .cs-cta { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); box-shadow: none; }
html.dark .cs-cta h2 { color: #e0e8f0; }
html.dark .cs-faq { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
html.dark .cs-faq__question { color: #e0e8f0; }
html.dark .cs-faq__question::before { color: #5eb8e4; }
html.dark .cs-faq__answer { color: #a0b0c0; }
html.dark .cs-related__card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
html.dark .cs-related__metric { color: #5eb8e4; }
html.dark .cs-angles .cs-section__title { color: #e0e8f0; }

/* ── Ranking Data Tables (v4.0.0) ── */
.cs-ranking-data { margin: 0 0 32px; }
.cs-ranking-table-wrap {
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,48,82,0.04);
}
.cs-ranking-table-wrap:last-child { margin-bottom: 0; }
.cs-ranking-table__title {
  font-size: 1.15em;
  font-weight: 700;
  margin: 0;
  padding: 1.25rem 1.5rem 0.5rem;
  color: var(--ss-text);
}
.cs-ranking-table__caption {
  font-size: 0.88em;
  color: var(--ss-text-muted);
  margin: 0;
  padding: 0 1.5rem 1rem;
  line-height: 1.5;
}
.cs-ranking-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-ranking-table { width: 100%; border-collapse: collapse; font-size: 0.92em; line-height: 1.4; }
.cs-ranking-table thead tr { border-bottom: 2px solid var(--ss-text); }
.cs-ranking-table th {
  padding: 0.75em 1em;
  font-weight: 600;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ss-text-muted);
  white-space: nowrap;
}
.cs-ranking-table th.col-center { text-align: center; }
.cs-ranking-table th.col-left { text-align: left; }
.cs-ranking-table tbody tr { border-bottom: 1px solid var(--ss-border); transition: background-color 0.15s; }
.cs-ranking-table tbody tr:last-child { border-bottom: none; }
.cs-ranking-table tbody tr.row--alt { background: rgba(0,0,0,0.015); }
.cs-ranking-table tbody tr:hover { background: var(--ss-bg-accent); }
.cs-ranking-table td { padding: 0.65em 1em; color: var(--ss-text-secondary); vertical-align: middle; }
.cs-ranking-table td.col-center { text-align: center; }
.cs-ranking-table .col-keyword { min-width: 200px; font-weight: 500; color: var(--ss-text); }
.cs-ranking-table .col-position strong { font-size: 1.05em; color: var(--ss-text); }
.cs-ranking-table .col-url { max-width: 250px; }
.cs-ranking-table .ranking-url {
  font-size: 0.85em;
  color: var(--ss-blue-400);
  text-decoration: none;
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-ranking-table .ranking-url:hover { text-decoration: underline; }

/* Intent badges */
.cs-intent-badge {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 600;
  padding: 0.2em 0.55em;
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.intent--info        { background: #dbeafe; color: #1e40af; }
.intent--commercial  { background: #fef3c7; color: #92400e; }
.intent--transactional { background: #d1fae5; color: #065f46; }
.intent--navigational  { background: #ede9fe; color: #5b21b6; }

/* Change badges */
.cs-change-badge { font-size: 0.88em; font-weight: 600; white-space: nowrap; }
.change--up, .change--new { color: #16a34a; }
.change--down { color: #ef4444; }
.change--held { color: var(--ss-text-muted); }

/* Ranking table dark mode */
html.dark .cs-ranking-table-wrap {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
html.dark .cs-ranking-table thead tr { border-bottom-color: rgba(255,255,255,0.2); }
html.dark .cs-ranking-table tbody tr { border-bottom-color: rgba(255,255,255,0.06); }
html.dark .cs-ranking-table tbody tr.row--alt { background: rgba(255,255,255,0.02); }
html.dark .cs-ranking-table tbody tr:hover { background: rgba(255,255,255,0.05); }
html.dark .cs-ranking-table td { color: #a0b0c0; }
html.dark .cs-ranking-table .col-keyword { color: #e0e8f0; }
html.dark .cs-ranking-table .col-position strong { color: #f3f4f6; }
html.dark .cs-ranking-table .ranking-url { color: #5eb8e4; }
html.dark .intent--info        { background: rgba(59,130,246,0.15); color: #93c5fd; }
html.dark .intent--commercial  { background: rgba(245,158,11,0.15); color: #fcd34d; }
html.dark .intent--transactional { background: rgba(16,185,129,0.15); color: #6ee7b7; }
html.dark .intent--navigational  { background: rgba(139,92,246,0.15); color: #c4b5fd; }
html.dark .change--up, html.dark .change--new { color: #4ade80; }
html.dark .change--down { color: #f87171; }
html.dark .change--held { color: #6b7e8f; }

/* Ranking table responsive */
@media (max-width: 640px) {
  .cs-ranking-table__title { padding: 1rem 1rem 0.5rem; font-size: 1.05em; }
  .cs-ranking-table__caption { padding: 0 1rem 0.75rem; }
  .cs-ranking-table thead { display: none; }
  .cs-ranking-table, .cs-ranking-table tbody, .cs-ranking-table tr, .cs-ranking-table td { display: block; }
  .cs-ranking-table tbody tr { padding: 0.75rem 1rem; }
  .cs-ranking-table td {
    padding: 0.2em 0;
    text-align: left !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cs-ranking-table td::before {
    content: attr(data-label);
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ss-text-muted);
    flex-shrink: 0;
    margin-right: 1em;
  }
  .cs-ranking-table td.col-keyword {
    font-size: 1em;
    font-weight: 600;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--ss-border);
    margin-bottom: 0.3em;
  }
  .cs-ranking-table td.col-keyword::before { display: none; }
  .cs-ranking-table .col-url, .cs-ranking-table .ranking-url { max-width: none; }
}

/* ================================================================
   PAGE TEMPLATE — Hero, Content, FAQs, Video, CTA
   ================================================================ */

/* Breadcrumb */
.ss-breadcrumb {
  padding: 12px 0;
  font-size: 0.82rem;
  color: var(--ss-text-muted);
  border-bottom: 1px solid var(--ss-border);
  background: var(--ss-bg-card);
  border-radius: 0 0 8px 8px;
}
.ss-breadcrumb a { color: var(--ss-text-secondary); }
.ss-breadcrumb a:hover { color: var(--ss-blue-400); }
.ss-breadcrumb .sep { margin: 0 8px; opacity: 0.4; }
.ss-breadcrumb .current { color: var(--ss-text); }

/* Container */
.ss-container {
  max-width: var(--ss-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Page Hero */
.page-hero {
  padding: 52px 0 40px;
  border-bottom: 1px solid var(--ss-border);
  margin-bottom: 40px;
}
.page-hero__layout { display: block; }
.page-hero__layout--has-image {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.page-hero__content { flex: 1; min-width: 0; }
.page-hero__image {
  flex-shrink: 0;
  width: 380px;
  margin-top: 8px;
  border-radius: 12px;
  overflow: hidden;
}
.page-hero__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.page-hero__title {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.page-hero__desc {
  font-size: 1.05rem;
  color: var(--ss-text-secondary);
  max-width: 640px;
  margin: 0;
  line-height: 1.65;
}

/* Content width constraint */
.ss-content-width { max-width: 780px; }

/* Page wrap — no width constraint, sections use ss-container */
.page-wrap { padding: 0 0 32px; }

/* Prose */
.ss-prose { max-width: 100%; padding-bottom: 40px; }
.ss-prose h2 { font-size: 1.4rem; font-weight: 700; margin: 2.2em 0 0.6em; letter-spacing: -0.01em; }
.ss-prose h3 { font-size: 1.15rem; font-weight: 600; margin: 1.6em 0 0.5em; }
.ss-prose h2:first-child { margin-top: 0; }
.ss-prose p { margin: 0 0 1.15em; line-height: 1.75; }
.ss-prose ul, .ss-prose ol { margin: 0 0 1.2em 1.5em; line-height: 1.7; }
.ss-prose li { margin: 0 0 0.4em; }
.ss-prose blockquote { border-left: 3px solid var(--ss-blue-500); padding-left: 20px; color: var(--ss-text-secondary); margin: 1.5em 0; font-style: italic; }
.ss-prose strong { font-weight: 600; color: var(--ss-text); }

/* Inline content links — underlined so they're distinguishable without colour (WCAG 1.4.1) */
.article-wrap a,
.ss-prose a,
.ss-author-box__bio a {
  text-decoration: underline;
  text-decoration-color: var(--ss-blue-300);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.article-wrap a:hover,
.ss-prose a:hover,
.ss-author-box__bio a:hover {
  text-decoration-color: var(--ss-blue-500);
  text-decoration-thickness: 2px;
}

/* ─── HowTo Steps ─── */
.ss-page-howto {
  padding: 48px 0;
  border-top: 1px solid var(--ss-border);
  margin-top: 8px;
}
.ss-page-howto h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 12px; }
.ss-howto-desc { color: var(--ss-text-sub); margin: 0 0 32px; max-width: 640px; line-height: 1.6; }
.ss-howto-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}
.ss-howto-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid var(--ss-border);
}
.ss-howto-step:last-child { border-bottom: none; }
.ss-howto-step-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ss-blue-600, #005a8e);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
html.dark .ss-howto-step-num { background: #0080c0; color: #fff; }
.ss-howto-step-body { flex: 1; min-width: 0; }
.ss-howto-step-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ss-text);
}
.ss-howto-step-text { color: var(--ss-text-sub); line-height: 1.7; }
.ss-howto-step-text p { margin: 0 0 10px; }
.ss-howto-step-text p:last-child { margin-bottom: 0; }

/* ─── Glassy FAQ Accordion ─── */
.ss-page-faqs {
  padding: 48px 0;
  border-top: 1px solid var(--ss-border);
  margin-top: 8px;
}
.ss-page-faqs h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 24px; }

.ss-faq-list { display: flex; flex-direction: column; gap: 10px; }

.ss-faq-item {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
  /* Glassy base */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

/* Light mode glass */
html:not(.dark) .ss-faq-item {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 102, 161, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 4px rgba(0, 48, 82, 0.06);
}

.ss-faq-item[open] {
  background: rgba(0, 102, 161, 0.06);
  border-color: rgba(0, 144, 217, 0.2);
  box-shadow: 0 4px 20px rgba(0, 102, 161, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html:not(.dark) .ss-faq-item[open] {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 102, 161, 0.2);
  box-shadow: 0 4px 20px rgba(0, 48, 82, 0.08);
}

.ss-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  list-style: none;
  color: var(--ss-text);
  transition: color 0.15s;
}
.ss-faq-question::-webkit-details-marker,
.ss-faq-question::marker { display: none; content: ''; }
.ss-faq-question:hover { color: var(--ss-blue-400); }

.ss-faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  min-width: 20px;
  max-width: 20px;
  transition: transform 0.25s ease;
  opacity: 0.4;
}
.ss-faq-chevron svg { width: 20px; height: 20px; display: block; }
.ss-faq-item[open] .ss-faq-chevron { transform: rotate(180deg); opacity: 0.7; }

.ss-faq-answer {
  padding: 0 22px 20px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ss-text-secondary);
}
.ss-faq-answer p:last-child { margin-bottom: 0; }

/* ─── Video Embed ─── */
.ss-page-video {
  padding: 40px 0;
  border-top: 1px solid var(--ss-border);
}
.ss-page-video h2 { font-size: 1.3rem; font-weight: 600; margin: 0 0 16px; }
.ss-video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.ss-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ─── Location Sibling Links ─── */
.ss-location-siblings {
  padding: 48px 0;
}
.ss-location-siblings h2 {
  text-align: center;
  margin-bottom: 24px;
}
.ss-sibling-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.ss-sibling-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--ss-bg-accent);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s, transform 0.2s;
  border: 1px solid var(--ss-border);
}
.ss-sibling-card:hover {
  background: var(--ss-bg-card);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.ss-sibling-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--ss-blue-400);
}
.ss-sibling-title {
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--ss-text);
}
.ss-sibling-desc {
  font-size: 0.85em;
  color: var(--ss-text-muted);
  line-height: 1.4;
  /* WCAG AA contrast override: --ss-text-muted (#5a6d82) is borderline on accent card bg.
     Selector override darkens text to #4a5d72 (5.5:1 ratio) without touching the global variable. */
  color: #4a5d72;
}

html.dark .ss-sibling-desc {
  color: var(--ss-text-muted); /* Dark mode variable already passes at 5.41:1 — no override needed */
}

/* Geo location line — appears above CTA on non-location pages */
.ss-geo-line {
  text-align: center;
  padding: 24px 0 16px;
  font-size: 0.9em;
  color: var(--ss-text-muted);
}
.ss-geo-line a {
  color: var(--ss-blue-400);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.ss-geo-line a:hover {
  text-decoration-style: solid;
}

/* ─── CTA Box ─── */
.ss-page-cta {
  padding: 48px 0 64px;
  border-top: 1px solid var(--ss-border);
}
.ss-cta-box {
  text-align: center;
  padding: 48px 32px;
  border-radius: 16px;
  /* Glassy CTA */
  background: rgba(0, 102, 161, 0.06);
  border: 1px solid rgba(0, 144, 217, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html:not(.dark) .ss-cta-box {
  background: linear-gradient(135deg, rgba(0, 102, 161, 0.04), rgba(0, 144, 217, 0.08));
  border: 1px solid rgba(0, 102, 161, 0.12);
}
.ss-cta-box h2 { font-size: 1.5rem; margin: 0 0 10px; }
.ss-cta-box p { color: var(--ss-text-secondary); margin: 0 0 24px; }

.ss-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 8px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all 0.15s; }
.ss-btn--primary { background: var(--ss-blue-600, #0066a1); color: #fff; }
.ss-btn--primary:hover { background: var(--ss-blue-500, #0077b6); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,102,161,0.3); }

@media (max-width: 768px) {
  .page-hero { padding: 36px 0 28px; margin-bottom: 28px; }
  .page-hero__layout--has-image { flex-direction: column; gap: 24px; }
  .page-hero__image { width: 100%; max-width: 480px; }
  .ss-page-faqs { padding: 36px 0; }
  .ss-faq-question { padding: 14px 16px; font-size: 0.95rem; }
  .ss-faq-answer { padding: 0 16px 16px; }
  .ss-cta-box { padding: 32px 20px; }
  .ss-page-cta { padding: 36px 0 48px; }
}

/* ============================================
   GUIDE TEMPLATE — Two-Column with Sticky ToC
   ============================================ */

/* Hero */
.guide-hero {
  padding: 32px 0 16px;
}
.guide-hero .ss-container {
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg, 14px);
  padding: 36px 40px 32px;
  box-shadow: var(--ss-shadow);
}
.guide-hero__layout { display: block; }
.guide-hero__layout--has-image { display: flex; align-items: flex-start; gap: 40px; }
.guide-hero__content { flex: 1; min-width: 0; }
.guide-hero__image { flex-shrink: 0; width: 380px; margin-top: 40px; border-radius: 12px; overflow: hidden; }
.guide-hero__image img { width: 100%; height: auto; display: block; object-fit: cover; }
.guide-hero__label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ss-blue-500, #0066a1);
  margin-bottom: 12px;
}
.guide-hero__title {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 16px;
  max-width: 720px;
}
.guide-hero__desc {
  font-size: 1.1rem;
  color: var(--ss-text-secondary);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 20px;
}
.guide-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--ss-text-muted);
  font-size: 13px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ss-border);
}
.guide-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.guide-meta-item svg { opacity: 0.6; }

/* ── Extractable Answer Block — AI retrieval surface ── */
.ss-extractable {
    background: var(--ss-surface);
    border-left: 4px solid var(--ss-accent);
    border-radius: 0 8px 8px 0;
    padding: 20px 24px;
    margin: 0 0 32px;
    max-width: 860px;
}
.ss-extractable__q {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ss-accent);
    margin: 0 0 8px;
}
.ss-extractable__answer {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ss-text);
    line-height: 1.6;
    margin: 0 0 12px;
}
.ss-extractable__definition,
.ss-extractable__importance,
.ss-extractable__evidence,
.ss-extractable__related {
    font-size: .9rem;
    color: var(--ss-text-muted);
    margin: 0 0 8px;
    line-height: 1.55;
}
.ss-extractable__related a { color: var(--ss-accent); text-decoration: none; }
.ss-extractable__related a:hover { text-decoration: underline; }
.ss-extractable > *:last-child { margin-bottom: 0; }

/* ── LLM Cluster Grid (used on /guide/ page) ──────────────────────────────── */
.ss-cluster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin: 1.25rem 0 1.75rem;
}
.ss-cluster-card {
  background: var(--ss-bg-card);
  border: 0.5px solid var(--ss-border);
  border-radius: var(--ss-radius);
  padding: 1rem 1.1rem;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.ss-cluster-card:hover { border-color: var(--ss-accent); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06); }
.ss-cluster-card--service { border-color: var(--ss-accent); box-shadow: 0 1px 3px rgba(0,119,182,.08), 0 1px 2px rgba(0,119,182,.06); }
.ss-cluster-card--service:hover { box-shadow: 0 6px 16px rgba(0,119,182,.14), 0 2px 6px rgba(0,119,182,.08); }

/* Label-matched left border accent — connects card to its pill */
.ss-cluster-card--start-accent    { border-left: 3px solid #93C5FD; }
.ss-cluster-card--mechanism-accent { border-left: 3px solid #C4B5FD; }
.ss-cluster-card--layer4-accent    { border-left: 3px solid #FCD34D; }
.ss-cluster-card--offsite-accent   { border-left: 3px solid #5EEAD4; }
.ss-cluster-card--layer2-accent    { border-left: 3px solid #FDBA74; }
.ss-cluster-card--onpage-accent    { border-left: 3px solid #86EFAC; }
.ss-cluster-card--compare-accent   { border-left: 3px solid #F9A8D4; }
.ss-cluster-card--strategic-accent { border-left: 3px solid #A5B4FC; }
.ss-cluster-card--history-accent   { border-left: 3px solid #D1D5DB; }
.ss-cluster-card--emerging-accent  { border-left: 3px solid #6EE7B7; }

html.dark .ss-cluster-card { box-shadow: 0 1px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2); }
html.dark .ss-cluster-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3); }
.ss-cluster-card__label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: .55rem;
  border: 1px solid transparent;
}
/* Vivid label colours — light mode */
.ss-cluster-card__label--start    { background: #DBEAFE; border-color: #93C5FD; color: #1E40AF; }
.ss-cluster-card__label--service   { background: #DBEAFE; border-color: #93C5FD; color: #1E40AF; }
.ss-cluster-card__label--mechanism { background: #EDE9FE; border-color: #C4B5FD; color: #5B21B6; }
.ss-cluster-card__label--layer4    { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }
.ss-cluster-card__label--offsite   { background: #CCFBF1; border-color: #5EEAD4; color: #0F6E56; }
.ss-cluster-card__label--layer2    { background: #FFEDD5; border-color: #FDBA74; color: #C2410C; }
.ss-cluster-card__label--onpage    { background: #DCFCE7; border-color: #86EFAC; color: #166534; }
.ss-cluster-card__label--compare   { background: #FCE7F3; border-color: #F9A8D4; color: #9D174D; }
.ss-cluster-card__label--strategic { background: #E0E7FF; border-color: #A5B4FC; color: #3730A3; }
.ss-cluster-card__label--history   { background: #F3F4F6; border-color: #D1D5DB; color: #374151; }
.ss-cluster-card__label--emerging  { background: #D1FAE5; border-color: #6EE7B7; color: #065F46; }
/* Dark mode label colours */
html.dark .ss-cluster-card__label--start     { background: rgba(30,64,175,.3);  border-color: rgba(147,197,253,.5); color: #93C5FD; }
html.dark .ss-cluster-card__label--service   { background: rgba(30,64,175,.3);  border-color: rgba(147,197,253,.5); color: #93C5FD; }
html.dark .ss-cluster-card__label--mechanism { background: rgba(91,33,182,.3);  border-color: rgba(196,181,253,.5); color: #C4B5FD; }
html.dark .ss-cluster-card__label--layer4    { background: rgba(146,64,14,.3);  border-color: rgba(252,211,77,.5);  color: #FCD34D; }
html.dark .ss-cluster-card__label--offsite   { background: rgba(15,110,86,.3);  border-color: rgba(94,234,212,.5);  color: #5EEAD4; }
html.dark .ss-cluster-card__label--layer2    { background: rgba(194,65,12,.3);  border-color: rgba(253,186,116,.5); color: #FDBA74; }
html.dark .ss-cluster-card__label--onpage    { background: rgba(22,101,52,.3);  border-color: rgba(134,239,172,.5); color: #86EFAC; }
html.dark .ss-cluster-card__label--compare   { background: rgba(157,23,77,.3);  border-color: rgba(249,168,212,.5); color: #F9A8D4; }
html.dark .ss-cluster-card__label--strategic { background: rgba(55,48,163,.3);  border-color: rgba(165,180,252,.5); color: #A5B4FC; }
html.dark .ss-cluster-card__label--history   { background: rgba(55,65,81,.3);   border-color: rgba(209,213,219,.4); color: #D1D5DB; }
html.dark .ss-cluster-card__label--emerging  { background: rgba(6,95,70,.3);    border-color: rgba(110,231,183,.5); color: #6EE7B7; }
.ss-cluster-card__title {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 .4rem;
  padding: 0;
}
/* Links — accent colour, stretched to cover full card */
.ss-cluster-card__title a { color: var(--ss-accent); text-decoration: none; }
.ss-cluster-card__title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--ss-radius); }
.ss-cluster-card__title a:hover { text-decoration: underline; }
.ss-cluster-card__desc {
  font-size: .82rem;
  color: var(--ss-text-secondary);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 640px) {
  .ss-cluster-grid { grid-template-columns: 1fr; }
}

/* Two-Column Layout */
.guide-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
  padding-top: 20px;
  padding-bottom: 40px;
}

/* Sidebar ToC */
.guide-sidebar {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.guide-toc {
  border-right: 1px solid var(--ss-border);
  padding-right: 24px;
}
.guide-toc__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ss-text-muted);
  margin-bottom: 16px;
}
.guide-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.guide-toc__item {
  margin-bottom: 2px;
}
.guide-toc__item--sub {
  padding-left: 16px;
}
.guide-toc__link {
  display: block;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ss-text-muted);
  text-decoration: none;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: all 0.15s;
}
.guide-toc__link:hover {
  color: var(--ss-text);
  background: var(--ss-bg-accent);
}
.guide-toc__link.is-active {
  color: var(--ss-blue-500, #0066a1);
  border-left-color: var(--ss-blue-500, #0066a1);
  font-weight: 600;
  background: var(--ss-bg-accent);
}

/* Guide content inherits prose + full-width sections */
.guide-content {
  min-width: 0;
}

/* Card panels for guide sections — lifts content off the tinted bg */
.guide-content .article-content.ss-prose {
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg, 14px);
  padding: 36px 40px 20px;
  box-shadow: var(--ss-shadow);
}
.guide-content .ss-page-howto,
.guide-content .ss-page-faqs,
.guide-content .ss-page-video {
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg, 14px);
  padding: 32px 40px;
  box-shadow: var(--ss-shadow);
  margin-top: 24px;
}
.guide-content .ss-page-cta {
  padding-left: 0;
  padding-right: 0;
  margin-top: 24px;
}
.guide-content .ss-page-cta .ss-cta-box {
  max-width: none;
}

/* Mobile: collapse sidebar to top */
@media (max-width: 900px) {
  .guide-hero__layout--has-image { flex-direction: column; gap: 24px; }
  .guide-hero__image { width: 100%; max-width: 480px; }
  .guide-hero .ss-container { padding: 24px 20px 20px; }
  .guide-container {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .guide-sidebar {
    position: relative;
    top: 0;
    max-height: none;
    border-bottom: 1px solid var(--ss-border);
    padding-bottom: 24px;
    margin-bottom: 32px;
  }
  .guide-toc {
    border-right: none;
    padding-right: 0;
  }
  .guide-toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .guide-toc__item { margin-bottom: 0; }
  .guide-toc__item--sub { padding-left: 0; }
  .guide-toc__link {
    padding: 5px 10px;
    font-size: 12px;
    border-left: none;
    background: var(--ss-bg-card);
    border-radius: 20px;
    border: 1px solid var(--ss-border);
  }
  .guide-toc__link.is-active {
    border-left: none;
    border-color: var(--ss-blue-500, #0066a1);
  }
  .guide-content .article-content.ss-prose {
    padding: 24px 20px 12px;
  }
  .guide-content .ss-page-howto,
  .guide-content .ss-page-faqs,
  .guide-content .ss-page-video {
    padding: 24px 20px;
  }
}
/* ── Anchor scroll offset (fixes sticky header overlap) ── */
html {
  scroll-padding-top: 100px;
}
.guide-content h2[id],
.guide-content h3[id],
.guide-content h4[id],
.guide-content section[id],
[id].guide-section,
.ss-page-howto[id],
.ss-page-faqs[id] {
  scroll-margin-top: 100px;
}

/* ═══════════════════════════════════════════
   Tools Matrix — Filterable comparison grid
   ═══════════════════════════════════════════ */

@keyframes toolFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tools-matrix { padding: 32px 0 48px; }

/* ── Filters ── */
.tools-filters {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tools-filter-row-bottom {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.tools-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tools-filter-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ss-text-muted);
  white-space: nowrap;
}
.tools-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tools-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--ss-border);
  background: var(--ss-bg-card);
  color: var(--ss-text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.tools-pill:hover {
  border-color: var(--ss-blue-400);
  color: var(--ss-blue-400);
  background: var(--ss-bg-accent);
}
.tools-pill.is-active {
  background: var(--ss-blue-500);
  border-color: var(--ss-blue-500);
  color: #fff;
}
html.dark .tools-pill.is-active {
  background: var(--ss-blue-400);
  border-color: var(--ss-blue-400);
}
.tools-pill-icon { display: flex; width: 14px; height: 14px; }
.tools-pill-icon svg { width: 14px; height: 14px; }

/* ── Sean's Picks toggle ── */
.tools-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ss-text-secondary);
  user-select: none;
}
.tools-toggle-input { display: none; }
.tools-toggle-track {
  position: relative;
  width: 38px;
  height: 22px;
  background: var(--ss-border);
  border-radius: 11px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.tools-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.tools-toggle-input:checked + .tools-toggle-track {
  background: var(--ss-blue-500);
}
.tools-toggle-input:checked + .tools-toggle-track .tools-toggle-thumb {
  transform: translateX(16px);
}

/* ── Results bar ── */
.tools-results-bar {
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: var(--ss-text-muted);
}

/* ── Grid ── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.tools-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--ss-text-muted);
  font-size: 0.95rem;
}

/* ── Tool Card ── */
.tool-card {
  position: relative;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  /* Glass style matching FAQ items */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}
html:not(.dark) .tool-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 102, 161, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 4px rgba(0, 48, 82, 0.06);
}
.tool-card:hover {
  border-color: rgba(0, 144, 217, 0.25);
  box-shadow: 0 4px 20px rgba(0, 102, 161, 0.08);
}
html:not(.dark) .tool-card:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 20px rgba(0, 48, 82, 0.08);
}

/* Pick highlight */
.tool-card.is-pick {
  border-color: rgba(0, 144, 217, 0.25);
}
html:not(.dark) .tool-card.is-pick {
  border-color: rgba(0, 102, 161, 0.2);
  background: rgba(255, 255, 255, 0.75);
}
.tool-pick-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ss-blue-500);
  background: var(--ss-blue-100, rgba(0,102,161,0.08));
  padding: 3px 10px;
  border-radius: 10px;
}
html.dark .tool-pick-badge {
  color: var(--ss-blue-300);
  background: rgba(0, 144, 217, 0.12);
}

/* ── Card Header ── */
.tool-card-header { margin-bottom: 12px; }
.tool-card-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ss-text);
  padding-right: 80px; /* space for pick badge */
}
.tool-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.tool-cat-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--ss-bg-accent);
  color: var(--ss-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tool-price-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tools-price--free  { background: rgba(16,185,129,0.1); color: var(--ss-green); }
.tools-price--freemium { background: rgba(245,158,11,0.1); color: var(--ss-yellow); }
.tools-price--paid  { background: rgba(0,102,161,0.08); color: var(--ss-blue-400); }
html.dark .tools-price--free  { background: rgba(16,185,129,0.15); }
html.dark .tools-price--freemium { background: rgba(245,158,11,0.15); }
html.dark .tools-price--paid  { background: rgba(0,144,217,0.15); }
.tool-card-price-note {
  font-size: 0.8rem;
  color: var(--ss-text-faint);
  margin: 4px 0 0;
}

/* ── Verdict ── */
.tool-card-verdict {
  flex: 1;
  margin-bottom: 12px;
}
.tool-card-verdict p {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ss-text);
  margin: 0;
  font-style: italic;
}

/* ── Expandable Detail ── */
.tool-card-detail { border-top: 1px solid var(--ss-border); margin-top: auto; }
.tool-detail-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 0;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ss-blue-400);
  list-style: none;
  transition: color 0.15s;
}
.tool-detail-toggle::-webkit-details-marker,
.tool-detail-toggle::marker { display: none; content: ''; }
.tool-detail-toggle:hover { color: var(--ss-blue-300); }
.tool-detail-toggle svg {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.tool-card-detail[open] .tool-detail-toggle svg { transform: rotate(180deg); }
.tool-detail-body { padding: 12px 0 4px; }
.tool-detail-section { margin-bottom: 14px; }
.tool-detail-section:last-of-type { margin-bottom: 16px; }
.tool-detail-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tool-detail-label--good { color: var(--ss-green); }
.tool-detail-label--good::before { content: '✓'; }
.tool-detail-label--warn { color: var(--ss-yellow); }
.tool-detail-label--warn::before { content: '⚠'; }
.tool-detail-label--use { color: var(--ss-blue-400); }
.tool-detail-label--use::before { content: '→'; }
.tool-detail-section p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ss-text-secondary);
  margin: 0;
}
.tool-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ss-blue-400);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.15s;
}
.tool-detail-link:hover { color: var(--ss-blue-300); }

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  .tools-grid { grid-template-columns: 1fr; }
  .tools-filter-row-bottom { flex-direction: column; align-items: flex-start; }
  .tool-card-name { padding-right: 0; font-size: 1.05rem; }
  .tool-pick-badge { position: static; display: inline-block; margin-bottom: 8px; }
  .tools-pill { padding: 5px 10px; font-size: 0.78rem; }
}

/* ═══ End Tools Matrix ═══ */

/* ── Accessibility: respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  .header-cta .cta-pulse { animation: none; }
  .site-header::after { animation: none; }
}
/* ==========================================================================
   ACCESSIBILITY FIXES — Lighthouse 93 → 97+ target
   Added: 21 Feb 2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX 1: Insufficient contrast ratio on mobile nav section titles
   
   .mobile-nav-section-title uses var(--ss-text-faint) which is:
     Light mode: #8896a6 on #ffffff (ratio 3.02:1, fails WCAG AA at 10px)
     Dark mode:  #475569 on #111d2e (ratio 2.24:1, fails WCAG AA at 10px)
   
   Small text (<18px / <14px bold) requires 4.5:1 minimum.
   We override the color directly on these selectors — NOT the global variables.
   
   New values:
     Light: #5f7082 on #ffffff = 5.09:1 ✓
     Dark:  #8494a7 on #111d2e = 5.47:1 ✓
   -------------------------------------------------------------------------- */
.mobile-nav-section-title {
  color: #5f7082; /* Override --ss-text-faint for WCAG AA compliance at 10px */
}
html.dark .mobile-nav-section-title {
  color: #8494a7; /* Override --ss-text-faint dark for WCAG AA compliance at 10px */
}

/* --------------------------------------------------------------------------
   FIX 2: Insufficient contrast ratio on mobile theme toggle labels
   
   .mobile-theme-opt uses var(--ss-text-muted) which is:
     Light mode: #5a6d82 on #ffffff (ratio 5.32:1, borderline at 11px on bg-accent)
     Dark mode:  #64748b on #111d2e (ratio 3.56:1, fails WCAG AA at 11px)
   
   New values:
     Light: #4d6073 on #ffffff = 6.49:1 ✓
     Dark:  #8494a7 on #111d2e = 5.47:1 ✓
   -------------------------------------------------------------------------- */
.mobile-theme-opt {
  color: #4d6073; /* Override --ss-text-muted for WCAG AA compliance at 11px */
}
html.dark .mobile-theme-opt {
  color: #8494a7; /* Override --ss-text-muted dark for WCAG AA compliance at 11px */
}
/* Preserve active state — use brighter blue in dark mode for WCAG AA */
.mobile-theme-opt.active {
  color: var(--ss-blue-400);
}
html.dark .mobile-theme-opt.active {
  color: #2a9fd8; /* 5.09:1 on #162640 (was #0077b6 = 3.11:1 FAIL) */
}

/* --------------------------------------------------------------------------
   FIX 3: Links rely on color alone to be distinguishable
   
   Footer contact links need a visible differentiator beyond just color.
   Subtle dotted underline maintains design while passing WCAG.
   -------------------------------------------------------------------------- */
.footer-contact-line a,
.footer-copyright a {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.footer-contact-line a:hover,
.footer-copyright a:hover {
  text-decoration-style: solid;
}

/* ============================================
   CASE STUDY LITE — Single Page Layout
   Streamlined: Challenge → Solution → Rankings → Testimonial
   ============================================ */

/* Lite body — uses the same ss-case-study main wrapper */
.cs-lite-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

/* Compact two-panel layout for challenge + solution */
.cs-lite-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .cs-lite-panels {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.cs-lite-panel {
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.cs-lite-panel__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ss-blue-400);
  margin-bottom: 10px;
}
.cs-lite-panel__content {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ss-text-secondary);
}
.cs-lite-panel__content p:last-child { margin-bottom: 0; }

/* Ranking section within lite */
.cs-lite-rankings {
  margin-bottom: 32px;
}

/* Testimonial within lite — slightly more compact */
.cs-lite-testimonial {
  margin: 0 0 32px;
  padding: 24px 28px;
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-left: 4px solid var(--ss-blue-500);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  box-shadow: 0 1px 4px rgba(0,48,82,0.04);
}
.cs-lite-testimonial__text {
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 12px;
  color: var(--ss-text);
}
.cs-lite-testimonial__text::before {
  content: "\201C";
  font-size: 1.8rem;
  color: var(--ss-blue-400);
  line-height: 0;
  vertical-align: -0.3em;
  margin-right: 4px;
}
.cs-lite-testimonial__footer {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--ss-text-muted);
}
.cs-lite-testimonial__footer strong {
  color: var(--ss-text);
}
.cs-lite-testimonial__role {
  display: block;
  color: var(--ss-text-muted);
  margin-top: 2px;
}

/* Lite CTA */
.cs-lite-cta {
  text-align: center;
  padding: 32px;
  background: var(--ss-bg-accent);
  border: 1px solid var(--ss-border);
  border-radius: 12px;
}
.cs-lite-cta h2 {
  font-size: 1.3rem;
  margin: 0 0 8px;
}
.cs-lite-cta p {
  color: var(--ss-text-secondary);
  margin: 0 0 16px;
}

/* Dark mode overrides for lite */
html.dark .cs-lite-panel {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
html.dark .cs-lite-testimonial {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  border-left-color: #5eb8e4;
  box-shadow: none;
}
html.dark .cs-lite-testimonial__text { color: #c8d4e0; }
html.dark .cs-lite-testimonial__text::before { color: #5eb8e4; }
html.dark .cs-lite-testimonial__footer { color: #a0b0c0; }
html.dark .cs-lite-cta {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}


/* ============================================
   LOCATION PAGE — Lite Case Study Cards
   Displayed on /consultant-services/southampton/ etc.
   ============================================ */

.ss-local-results {
  padding: 48px 0 0;
}
.ss-local-results h2 {
  text-align: center;
  margin-bottom: 8px;
}
.ss-local-results__intro {
  text-align: center;
  color: var(--ss-text-muted);
  font-size: 0.92em;
  margin-bottom: 24px;
}

.ss-local-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.ss-local-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  padding: 24px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.ss-local-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.ss-local-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ss-local-card__industry {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--ss-blue-50, #e8f1f8);
  color: var(--ss-blue-700, #004a75);
}
html.dark .ss-local-card__industry {
  background: rgba(0,102,161,0.15);
  color: #7eb8db;
}
.ss-local-card__metric {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: #16a34a;
}
html.dark .ss-local-card__metric { color: #4ade80; }

.ss-local-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ss-text);
  line-height: 1.3;
}

.ss-local-card__excerpt {
  font-size: 0.88rem;
  color: var(--ss-text-muted);
  line-height: 1.5;
  margin: 0 0 12px;
}

.ss-local-card__link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ss-blue-400);
}
.ss-local-card:hover .ss-local-card__link {
  text-decoration: underline;
}

/* Dark mode */
html.dark .ss-local-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
html.dark .ss-local-card:hover {
  background: rgba(255,255,255,0.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .ss-local-results-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   AUTHOR BIO BOX — E-E-A-T Authorship Component
   ================================================================ */

.ss-author-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 40px;
  padding: 24px 28px;
  background: var(--ss-bg-accent);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
}

.ss-author-box__image img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ss-blue-500);
  flex-shrink: 0;
}

.ss-author-box__content {
  min-width: 0;
  flex: 1;
}

.ss-author-box__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.ss-author-box__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ss-text-secondary);
  margin-bottom: 2px;
}

.ss-author-box__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ss-text);
  text-decoration: none;
  line-height: 1.3;
}
.ss-author-box__name:hover {
  color: var(--ss-blue-500);
}

.ss-author-box__social {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 2px;
}

.ss-author-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--ss-text-muted);
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.ss-author-social-link:hover {
  color: var(--ss-blue-500);
  border-color: var(--ss-blue-500);
  background: var(--ss-blue-50);
}
html.dark .ss-author-social-link:hover {
  background: rgba(0,144,217,0.12);
}

.ss-author-box__bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ss-text-secondary);
  margin: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .ss-author-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    gap: 14px;
  }
  .ss-author-box__header {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .ss-author-box__social {
    justify-content: center;
  }
}

/* ── Theme image shortcode (entity architecture diagrams) ── */
.ss-theme-img {
  margin: 2rem 0;
  padding: 0;
}
.ss-theme-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ss-radius, 12px);
  border: 1px solid var(--ss-border, rgba(255,255,255,0.06));
}
.ss-diagram-full {
  margin: 2.5rem -2rem;
  max-width: calc(100% + 4rem);
}
@media (max-width: 768px) {
  .ss-diagram-full {
    margin: 1.5rem 0;
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   AI-CITABLE PAGE TEMPLATE — Frontend Styles
   ═══════════════════════════════════════════════════════════════ */

/* Standalone opening callout (C1) */
.aic-opening {
  background: var(--ss-surface2, rgba(255,255,255,0.04));
  border-left: 3px solid var(--ss-accent, #4f7fff);
  border-radius: 0 8px 8px 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
  font-size: 1.05rem;
  line-height: 1.65;
}
.aic-opening p { margin: 0; }

/* Stat strip (C3+C4) */
.aic-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}
.aic-stat-card {
  background: var(--ss-surface2, rgba(255,255,255,0.04));
  border: 1px solid var(--ss-border, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aic-stat-number {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ss-accent, #4f7fff);
  line-height: 1.1;
}
.aic-stat-context {
  font-size: 0.82rem;
  color: var(--ss-text, #e2e6f0);
  line-height: 1.35;
}
.aic-stat-source {
  font-size: 0.72rem;
  color: var(--ss-muted, #7a8099);
  margin-top: 2px;
}

/* Definition block (C2) */
.aic-definitions {
  margin: 2.5rem 0;
  padding: 1.5rem;
  background: var(--ss-surface2, rgba(255,255,255,0.03));
  border-radius: 10px;
  border: 1px solid var(--ss-border, rgba(255,255,255,0.07));
}
.aic-definitions h2 {
  margin: 0 0 1.25rem;
  font-size: 1.15rem;
}
.aic-def-list { margin: 0; }
.aic-def-list dt {
  font-weight: 600;
  margin-top: 1rem;
}
.aic-def-list dt:first-child { margin-top: 0; }
.aic-def-list dfn { font-style: normal; }
.aic-def-list dd {
  margin: 0.25rem 0 0 1.25rem;
  color: var(--ss-text-muted, #9ca3af);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* Author entity block (C4+C5) */
.aic-author-block {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 3rem 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--ss-surface2, rgba(255,255,255,0.03));
  border-radius: 10px;
  border: 1px solid var(--ss-border, rgba(255,255,255,0.07));
}
.aic-author-avatar {
  border-radius: 50%;
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0;
}
.aic-author-info { display: flex; flex-direction: column; gap: 2px; }
.aic-author-label { font-size: 0.75rem; color: var(--ss-muted, #7a8099); }
.aic-author-info a { text-decoration: none; }
.aic-author-info strong { font-size: 1rem; color: var(--ss-text, #e2e6f0); }
.aic-author-role { font-size: 0.85rem; color: var(--ss-muted, #7a8099); }
.aic-author-date { font-size: 0.78rem; color: var(--ss-muted, #7a8099); margin-top: 2px; }

/* Sidebar citation score (admin-only) */
.aic-score-panel {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--ss-surface2, rgba(255,255,255,0.04));
  border: 1px solid var(--ss-border, rgba(255,255,255,0.08));
  border-radius: 10px;
}
.aic-score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.aic-score-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ss-muted, #7a8099); }
.aic-score-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  padding: 2px 8px;
  border-radius: 20px;
}
.aic-score-status { font-size: 0.8rem; margin: 0 0 8px; font-weight: 600; }
.aic-criteria-list { list-style: none; margin: 0; padding: 0; }
.aic-criterion { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; padding: 2px 0; }
.aic-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.aic-criterion.pass { color: #2ecc71; }
.aic-criterion.fail { color: var(--ss-muted, #7a8099); }
.aic-edit-link { display: block; margin-top: 8px; font-size: 0.72rem; color: var(--ss-accent, #4f7fff); text-decoration: none; }
.aic-edit-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .aic-stat-strip { grid-template-columns: 1fr 1fr; }
  .aic-author-block { flex-direction: column; }
}

/* ── Trust Bar (v16.3) ─────────────────────────────────────────────────────── */
.ss-trust-bar {
  background: var(--ss-bg-card);
  border-top: 1px solid var(--ss-border);
  border-bottom: 1px solid var(--ss-border);
  padding: 1.25rem 0;
  margin-bottom: 0;
}
.ss-trust-bar__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem 2rem;
}
.ss-trust-bar__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ss-trust-bar__client {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ss-text-muted);
}
.ss-trust-bar__result {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ss-accent, #4f7fff);
  line-height: 1.2;
}
.ss-trust-bar__detail {
  font-size: 0.78rem;
  color: var(--ss-text-muted);
  line-height: 1.35;
}

/* ── Recommendation Block (v16.3) ────────────────────────────────────────── */
.ss-rec-block {
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  background: var(--ss-bg-card);
}
.ss-rec-block__header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ss-text-muted);
  margin-bottom: 1rem;
}
.ss-rec-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ss-rec-block__col-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.ss-rec-block__col--yes .ss-rec-block__col-label { color: #2ecc71; }
.ss-rec-block__col--no  .ss-rec-block__col-label { color: var(--ss-text-muted); }
.ss-rec-block__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ss-text);
}
.ss-rec-block__list li + li { margin-top: 0.2rem; }
.ss-rec-block__expect,
.ss-rec-block__proof {
  font-size: 0.88rem;
  line-height: 1.55;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ss-border);
  margin-top: 0.75rem;
}
.ss-rec-block__expect-label,
.ss-rec-block__proof-label {
  font-weight: 700;
}
.ss-rec-block__cta {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ss-border);
}
.ss-rec-block__cta-link {
  font-weight: 700;
  color: var(--ss-accent, #4f7fff);
  text-decoration: none;
  font-size: 0.9rem;
}
.ss-rec-block__cta-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .ss-rec-block__grid { grid-template-columns: 1fr; }
  .ss-trust-bar__inner { grid-template-columns: 1fr 1fr; }
}

/* ── Platform-Audience Matrix anchor teaser ── */
.ss-matrix-teaser{margin:1.5rem 0;padding:1rem 1.25rem;background:var(--ss-bg-card);border:1px solid var(--ss-border);border-radius:10px;border-left:3px solid var(--ss-blue-500,#0066a1)}
.ss-matrix-teaser__link{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;color:var(--ss-blue-500,#0066a1);text-decoration:none}
.ss-matrix-teaser__link:hover{text-decoration:underline}
.ss-matrix-teaser__link svg{width:16px;height:16px;flex-shrink:0}

/* === v6.5.136 Dark mode: ss_ai_priority_card === */
html.dark .ss-priority-card>div>div{background:#111622!important;border-color:rgba(255,255,255,.10)!important}
html.dark .ss-priority-card>div>div>div:first-child{background:#0d1018!important;border-color:rgba(255,255,255,.08)!important}
html.dark .ss-priority-card [style*="color:#111"]{color:#e0e6f2!important}
html.dark .ss-priority-card [style*="border-left:1px solid #e5e5e5"]{border-color:rgba(255,255,255,.08)!important}
html.dark .ss-priority-card [style*="border-top:1px solid #e5e5e5"]{border-color:rgba(255,255,255,.08)!important}
/* === Dark mode: ss_three_level_model === */
html.dark .ss-three-level-model .ss-tlm-level{background:#111622!important}
html.dark .ss-three-level-model [style*="color:#111"]{color:#e0e6f2!important}
html.dark .ss-three-level-model [style*="color:#555"]{color:#aab4c8!important}
html.dark .ss-three-level-model [style*="color:#777"]{color:#8892aa!important}
html.dark .ss-three-level-model [style*="background:#fff"]{background:#111622!important}
/* === Dark mode: ss_audience_selector (static buttons; JS output colours overridden inline by JS) === */
html.dark .ss-audience-selector .ss-aud-btns button{background:#111622!important;border-color:rgba(255,255,255,.10)!important}
html.dark .ss-audience-selector .ss-aud-btns button div:nth-child(2){color:#e0e6f2!important}
html.dark .ss-audience-selector .ss-aud-btns button div:nth-child(3){color:#8892aa!important}