/**
 * EmpiricQuest — App Styles
 *
 * Core layout, typography, and base styles for the theme.
 * Enqueue order: 1st (foundation layer)
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
  /* Colors */
  --eq-primary: #2947D1;
  --eq-primary-dark: #1E3296;
  --eq-primary-soft: #DCE6FF;
  --eq-bg: #F7F9FC;
  --eq-surface: #FFFFFF;
  --eq-surface-alt: #EEF4FF;
  --eq-surface-dark: #0F172A;
  --eq-text: #122033;
  --eq-text-soft: #4B5B73;
  --eq-text-muted: #6E7B91;
  --eq-text-on-dark: #F8FAFC;
  --eq-border: #D9E2F0;
  --eq-border-strong: #B9C7DC;
  --eq-success: #1F8A5B;
  --eq-success-soft: #E5F6EE;
  --eq-warning: #D17A00;
  --eq-warning-soft: #FFF2DD;
  --eq-danger: #C24141;
  --eq-danger-soft: #FCEBEB;
  --eq-info: #2C6ECB;
  --eq-info-soft: #E8F1FE;
  --eq-plum: #6C4CCF;
  --eq-green: #3E9E63;

  /* Radius */
  --eq-radius-input: 10px;
  --eq-radius-button: 10px;
  --eq-radius-card: 16px;
  --eq-radius-panel: 20px;
  --eq-radius-pill: 9999px;

  /* Shadows */
  --eq-shadow-sm: 0 1px 3px rgba(18, 32, 51, 0.05);
  --eq-shadow-md: 0 4px 12px rgba(18, 32, 51, 0.06);
  --eq-shadow-lg: 0 8px 24px rgba(18, 32, 51, 0.08);

  /* Spacing scale (base unit = 4px) */
  --eq-space-1: 4px;
  --eq-space-2: 8px;
  --eq-space-3: 12px;
  --eq-space-4: 16px;
  --eq-space-6: 24px;
  --eq-space-8: 32px;
  --eq-space-12: 48px;
  --eq-space-16: 64px;
  --eq-space-20: 80px;
  --eq-space-30: 120px;

  /* Transitions */
  --eq-transition-default: all 0.15s ease;
  --eq-transition-hover: all 0.2s ease;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--eq-text);
  background-color: var(--eq-bg);
  margin: 0;
  padding: 0;
}

/* ============================================
   LAYOUT: PUBLIC PAGES
   ============================================ */
.is-public-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.is-public-page .eq-main {
  flex: 1;
}

/* Page content max-width */
.eq-page .eq-page-content,
.eq-single .eq-article-content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   PUBLIC HEADER
   ============================================ */
.eq-public-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--eq-surface);
  border-bottom: 1px solid var(--eq-border);
  padding: var(--eq-space-4) var(--eq-space-6);
  box-shadow: var(--eq-shadow-sm);
}

.eq-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.eq-header-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.eq-header-logo img {
  max-height: 48px;
  width: auto;
  display: block;
}

.eq-header-nav-wrap {
  display: flex;
  align-items: center;
  gap: var(--eq-space-6);
}

.eq-primary-nav .wp-block-navigation__container {
  display: flex;
  gap: var(--eq-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.eq-primary-nav .wp-block-navigation-item a {
  font-size: 14px;
  font-weight: 500;
  color: var(--eq-text);
  text-decoration: none;
  transition: var(--eq-transition-default);
}

.eq-primary-nav .wp-block-navigation-item a:hover {
  color: var(--eq-primary);
}

.eq-header-actions {
  display: flex;
  align-items: center;
  gap: var(--eq-space-3);
}

.eq-mobile-menu-toggle {
  display: none;
}

/* ============================================
   MOBILE NAV OVERLAY
   ============================================ */
.eq-mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: var(--eq-bg);
  flex-direction: column;
}

.eq-mobile-nav-overlay.is-open {
  display: flex;
}

.eq-mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--eq-space-4) var(--eq-space-6);
  border-bottom: 1px solid var(--eq-border);
}

.eq-mobile-nav-body {
  flex: 1;
  padding: var(--eq-space-6);
  overflow-y: auto;
}

.eq-mobile-nav-footer {
  padding: var(--eq-space-4) var(--eq-space-6);
  border-top: 1px solid var(--eq-border);
}

/* ============================================
   FOOTER
   ============================================ */
.eq-footer {
  background-color: var(--eq-surface-dark);
  color: var(--eq-text-on-dark);
  padding: var(--eq-space-16) var(--eq-space-6) var(--eq-space-8);
}

.eq-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--eq-space-12);
  max-width: 1200px;
  margin: 0 auto;
}

.eq-footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-2);
}

.eq-footer-logo img {
  max-height: 48px;
  width: auto;
  display: block;
}

.eq-footer-tagline {
  font-size: 14px;
  color: var(--eq-text-muted);
}

.eq-footer-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eq-space-12);
}

.eq-footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-3);
  min-width: 140px;
}

.eq-footer-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--eq-text-on-dark);
  margin-bottom: var(--eq-space-2);
}

.eq-footer-nav .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.eq-footer-nav .wp-block-navigation-item a {
  font-size: 13px;
  color: var(--eq-text-muted);
  text-decoration: none;
  transition: var(--eq-transition-default);
}

.eq-footer-nav .wp-block-navigation-item a:hover {
  color: var(--eq-text-on-dark);
}

.eq-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--eq-space-12);
  padding-top: var(--eq-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.eq-footer-copyright {
  font-size: 13px;
  color: var(--eq-text-muted);
  margin: 0;
}

/* ============================================
   SECTION LAYOUTS
   ============================================ */
.eq-section {
  padding: var(--eq-space-20) var(--eq-space-6);
}

.eq-section-title {
  text-align: center;
  margin-bottom: var(--eq-space-8);
}

.eq-section-eyebrow {
  text-align: center;
  margin-bottom: var(--eq-space-3);
}

/* ============================================
   HERO
   ============================================ */
.eq-hero {
  padding: var(--eq-space-20) var(--eq-space-6);
}

.eq-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--eq-space-12);
  max-width: 1200px;
  margin: 0 auto;
}

.eq-hero-content {
  flex: 1;
  min-width: 320px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-4);
}

.eq-hero-title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--eq-text);
  margin: 0;
}

.eq-hero-eyebrow {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.eq-hero-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--eq-text-soft);
  margin: 0;
}

.eq-hero-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 280px;
}

.eq-hero-image img,
.eq-hero-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--eq-radius-card);
}

/* Centered hero variant */
.eq-hero--centered {
  text-align: center;
  padding: var(--eq-space-20) var(--eq-space-6);
  max-width: 720px;
  margin: 0 auto;
}

.eq-hero--centered .eq-hero-title {
  font-size: 48px;
}

.eq-hero-buttons {
  margin-top: var(--eq-space-4);
}

/* ============================================
   MODULE GRID
   ============================================ */
.eq-module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eq-space-4);
  max-width: 1200px;
  margin: 0 auto;
}

.eq-module-card {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
  transition: var(--eq-transition-hover);
}

.eq-module-card:hover {
  box-shadow: var(--eq-shadow-md);
  transform: translateY(-2px);
}

.eq-module-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--eq-space-2);
}

/* ============================================
   SEGMENT CARDS
   ============================================ */
.eq-segment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eq-space-4);
  max-width: 1200px;
  margin: 0 auto;
}

.eq-segment-card {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
}

/* ============================================
   STEP CARDS
   ============================================ */
.eq-steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--eq-space-6);
  max-width: 1200px;
  margin: 0 auto;
}

.eq-step-card {
  text-align: center;
}

.eq-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--eq-space-4);
}

.eq-step-digit {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--eq-primary-soft);
  color: var(--eq-primary);
  font-size: 20px;
  font-weight: 700;
}

.eq-step-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--eq-space-2);
}

/* ============================================
   DASHBOARD PREVIEW
   ============================================ */
.eq-preview-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eq-space-12);
  max-width: 1200px;
  margin: 0 auto;
}

.eq-preview-content {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-4);
}

.eq-preview-panel {
  flex: 1;
  min-width: 300px;
  background: var(--eq-surface);
  border-radius: var(--eq-radius-panel);
  box-shadow: var(--eq-shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-4);
}

/* ============================================
   PRICING CARDS
   ============================================ */
.eq-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eq-space-4);
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}

.eq-pricing-card {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-2);
  position: relative;
}

.eq-pricing-card--recommended {
  background: var(--eq-primary);
  color: var(--eq-text-on-dark);
  transform: scale(1.02);
  box-shadow: var(--eq-shadow-lg);
}

.eq-pricing-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--eq-radius-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--eq-space-2);
}

.eq-pricing-price {
  font-size: 36px;
  font-weight: 700;
  margin: 0;
}

.eq-pricing-period {
  font-size: 14px;
  margin: 0 0 var(--eq-space-4);
}

.eq-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--eq-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-2);
}

.eq-pricing-features li {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: var(--eq-space-2);
}

.eq-pricing-features li::before {
  content: '\2713';
  color: var(--eq-success);
  font-weight: 700;
}

.eq-pricing-card--recommended .eq-pricing-features li::before {
  color: var(--eq-text-on-dark);
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.eq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-2);
}

.eq-accordion-item {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  cursor: pointer;
}

.eq-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.eq-accordion-question {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.eq-accordion-answer {
  font-size: 14px;
  color: var(--eq-text-soft);
  margin-top: var(--eq-space-3);
  padding-right: 24px;
}

.eq-accordion-item:not(.eq-accordion-item--open) .eq-accordion-answer {
  display: none;
}

/* ============================================
   GUIDE CARDS
   ============================================ */
.eq-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eq-space-4);
  max-width: 1200px;
  margin: 0 auto;
}

.eq-guide-card {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-2);
}

.eq-guide-card--featured {
  grid-row: span 1;
}

.eq-guide-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--eq-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.eq-guide-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* ============================================
   CTA BAND
   ============================================ */
.eq-section--cta {
  padding: var(--eq-space-16) var(--eq-space-6);
}

.eq-cta-title {
  color: var(--eq-text-on-dark);
  margin-bottom: var(--eq-space-4);
}

.eq-cta-desc {
  color: var(--eq-text-muted);
  margin-bottom: var(--eq-space-6);
}

.eq-cta-buttons {
  display: flex;
  justify-content: center;
  gap: var(--eq-space-3);
}

/* ============================================
   PAGE HERO
   ============================================ */
.eq-page-hero {
  padding: var(--eq-space-16) var(--eq-space-6);
}

.eq-page-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--eq-space-8);
  max-width: 1200px;
  margin: 0 auto;
}

.eq-page-hero-content {
  flex: 1;
  min-width: 300px;
}

.eq-page-hero-title {
  color: var(--eq-text-on-dark);
  margin-bottom: var(--eq-space-3);
}

.eq-page-hero-lead {
  color: var(--eq-text-muted);
  margin: 0;
}

.eq-page-hero-visual {
  flex: 0 0 auto;
}

.eq-page-hero-image img,
.eq-page-hero-image {
  max-width: 300px;
  height: auto;
  border-radius: var(--eq-radius-card);
}

/* ============================================
   SEARCH STRIP
   ============================================ */
.eq-search-strip {
  padding: var(--eq-space-6) var(--eq-space-4);
}

.eq-search-bar {
  display: flex;
  align-items: center;
  gap: var(--eq-space-3);
  background: var(--eq-surface);
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-radius-input);
  max-width: 800px;
  margin: 0 auto;
}

.eq-search-bar svg {
  color: var(--eq-text-muted);
  flex-shrink: 0;
}

.eq-search-input-text {
  margin: 0;
  color: var(--eq-text-muted);
}

/* ============================================
   JOURNAL / FUNDING / JOB CARDS
   ============================================ */
.eq-journal-list,
.eq-funding-list,
.eq-job-list {
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-3);
  max-width: 1200px;
  margin: 0 auto;
}

.eq-journal-card,
.eq-funding-card,
.eq-job-card {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--eq-space-4);
}

.eq-journal-title,
.eq-funding-title,
.eq-job-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--eq-space-2);
}

.eq-journal-meta,
.eq-funding-meta,
.eq-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eq-space-2);
}

.eq-journal-stats,
.eq-funding-stats,
.eq-job-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eq-space-4);
  align-items: center;
}

/* ============================================
   AI TOOL CARDS
   ============================================ */
.eq-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eq-space-4);
  max-width: 1200px;
  margin: 0 auto;
}

.eq-ai-card {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
}

.eq-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--eq-space-6);
  max-width: 800px;
  margin: 0 auto;
}

/* ============================================
   BLOG / ARCHIVE GRID
   ============================================ */
.eq-blog-grid,
.eq-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eq-space-6);
}

.eq-post-card,
.eq-archive-card {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
  overflow: hidden;
  transition: var(--eq-transition-hover);
}

.eq-post-card:hover,
.eq-archive-card:hover {
  box-shadow: var(--eq-shadow-md);
}

.eq-post-image img,
.eq-archive-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.eq-post-title,
.eq-archive-card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--eq-space-2);
}

.eq-post-excerpt,
.eq-archive-excerpt {
  font-size: 14px;
  color: var(--eq-text-soft);
  margin-bottom: var(--eq-space-3);
}

.eq-post-date,
.eq-archive-date {
  font-size: 12px;
  color: var(--eq-text-muted);
}

/* ============================================
   ARTICLE (SINGLE POST)
   ============================================ */
.eq-single {
  padding: var(--eq-space-16) var(--eq-space-6);
}

.eq-article-header {
  margin-bottom: var(--eq-space-8);
}

.eq-article-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--eq-space-4);
}

.eq-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eq-space-4);
}

.eq-article-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: var(--eq-radius-card);
  margin-bottom: var(--eq-space-8);
}

.eq-article-content {
  margin-bottom: var(--eq-space-12);
}

.eq-article-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--eq-space-4);
  padding-top: var(--eq-space-6);
  border-top: 1px solid var(--eq-border);
}

.eq-article-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--eq-space-4);
  margin-top: var(--eq-space-12);
  padding-top: var(--eq-space-6);
  border-top: 1px solid var(--eq-border);
}

/* ============================================
   SEARCH RESULTS
   ============================================ */
.eq-search-header {
  margin-bottom: var(--eq-space-6);
}

.eq-search-results-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--eq-space-4);
  margin-bottom: var(--eq-space-6);
}

.eq-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eq-space-2);
}

.eq-filter-chip,
.eq-tab {
  padding: 8px 16px;
  border-radius: var(--eq-radius-pill);
  background: var(--eq-surface);
  border: 1px solid var(--eq-border);
  font-size: 13px;
  cursor: pointer;
  transition: var(--eq-transition-default);
  margin: 0;
}

.eq-filter-chip--active,
.eq-tab--active {
  background: var(--eq-primary);
  color: var(--eq-text-on-dark);
  border-color: var(--eq-primary);
}

.eq-search-result-item {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
}

.eq-search-result-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--eq-space-2);
}

.eq-search-result-excerpt {
  font-size: 14px;
  color: var(--eq-text-soft);
}

/* ============================================
   404 PAGE
   ============================================ */
.eq-404 {
  padding: var(--eq-space-20) var(--eq-space-6);
}

.eq-404-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--eq-space-4);
  text-align: center;
}

.eq-404-title {
  font-size: 96px;
  font-weight: 700;
  color: var(--eq-primary);
  line-height: 1;
  margin: 0;
}

.eq-404-subtitle {
  font-size: 26px;
  font-weight: 600;
  margin: 0;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.eq-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--eq-space-3);
  padding: var(--eq-space-12) var(--eq-space-4);
}

.eq-empty-icon {
  color: var(--eq-border-strong);
  margin-bottom: var(--eq-space-2);
}

.eq-empty-title {
  margin: 0;
}

/* ============================================
   PAGINATION
   ============================================ */
.eq-pagination {
  display: flex;
  justify-content: center;
  gap: var(--eq-space-2);
  margin-top: var(--eq-space-8);
}

.eq-pagination .page-numbers,
.eq-pagination .wp-block-query-pagination-previous,
.eq-pagination .wp-block-query-pagination-next {
  padding: 10px 16px;
  border-radius: var(--eq-radius-button);
  background: var(--eq-surface);
  color: var(--eq-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: var(--eq-transition-default);
}

.eq-pagination .page-numbers.current,
.eq-pagination .page-numbers:hover {
  background: var(--eq-primary);
  color: var(--eq-text-on-dark);
}

/* ============================================
   BADGES
   ============================================ */
.eq-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--eq-radius-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--eq-primary-soft);
  color: var(--eq-primary);
}

.eq-badge-discipline {
  background: var(--eq-success-soft);
  color: var(--eq-success);
}

.eq-badge-method {
  background: var(--eq-info-soft);
  color: var(--eq-info);
}

.eq-badge-institution {
  background: var(--eq-surface-alt);
  color: var(--eq-text-soft);
}

.eq-badge-type {
  background: var(--eq-primary-soft);
  color: var(--eq-primary);
}

.eq-badge-success {
  background: var(--eq-success-soft);
  color: var(--eq-success);
}

.eq-badge-warning {
  background: var(--eq-warning-soft);
  color: var(--eq-warning);
}

.eq-badge-info {
  background: var(--eq-info-soft);
  color: var(--eq-info);
}

/* ============================================
   HOW-IT-WORKS TEMPLATE
   ============================================ */
.eq-step-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eq-space-8);
  margin-bottom: var(--eq-space-12);
}

.eq-step-content {
  flex: 1;
  min-width: 300px;
}

.eq-step-visual {
  flex: 1;
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eq-visual-placeholder {
  display: block;
  width: 100%;
  height: 240px;
  background: var(--eq-primary-soft);
  border-radius: var(--eq-radius-card);
}

.eq-step-features {
  list-style: none;
  padding: 0;
  margin: var(--eq-space-4) 0 0;
}

.eq-step-features li {
  display: flex;
  align-items: center;
  gap: var(--eq-space-2);
  font-size: 14px;
  margin-bottom: var(--eq-space-2);
}

.eq-step-features li::before {
  content: '\2713';
  color: var(--eq-success);
  font-weight: 700;
}

/* ============================================
   RESEARCHER / INSTITUTION PAGES
   ============================================ */
.eq-needs-grid,
.eq-inst-grid,
.eq-why-grid,
.eq-value-grid,
.eq-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eq-space-4);
  max-width: 1200px;
  margin: 0 auto;
}

.eq-category-grid {
  grid-template-columns: repeat(4, 1fr);
}

.eq-need-card,
.eq-inst-card,
.eq-why-card,
.eq-value-card,
.eq-category-card {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
}

.eq-use-case-list,
.eq-benefits-list {
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-4);
  max-width: 1200px;
  margin: 0 auto;
}

.eq-use-case,
.eq-benefit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--eq-space-6);
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
  gap: var(--eq-space-4);
}

.eq-use-case-content,
.eq-benefit-content {
  flex: 1;
  min-width: 300px;
}

.eq-use-case-icon,
.eq-benefit-icon {
  font-size: 24px;
  color: var(--eq-primary);
}

/* ============================================
   ABOUT PAGE
   ============================================ */
.eq-about-hero,
.eq-contact-hero {
  padding: var(--eq-space-20) var(--eq-space-6);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.eq-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eq-space-4);
  max-width: 1200px;
  margin: 0 auto;
}

.eq-value-item {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
}

/* ============================================
   CONTACT PAGE
   ============================================ */
.eq-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eq-space-4);
  max-width: 800px;
  margin: 0 auto;
}

.eq-contact-option {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
  text-align: center;
}

.eq-contact-form-wrap {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-panel);
  box-shadow: var(--eq-shadow-sm);
  max-width: 600px;
  margin: var(--eq-space-12) auto 0;
}

.eq-contact-faq-links {
  margin-top: var(--eq-space-8);
  text-align: center;
}

/* ============================================
   ACCOUNT / AUTH PAGE
   ============================================ */
.eq-auth-layout {
  display: flex;
  flex-wrap: wrap;
  min-height: 600px;
}

.eq-auth-brand {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--eq-space-4);
  padding: var(--eq-space-12);
  text-align: center;
}

.eq-auth-logo img {
  max-height: 64px;
  width: auto;
}

.eq-auth-title {
  color: var(--eq-text-on-dark);
  margin: 0;
}

.eq-auth-desc {
  max-width: 400px;
}

.eq-auth-form-card {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-3);
  justify-content: center;
}

.eq-auth-alt {
  font-size: 14px;
  color: var(--eq-text-muted);
}

/* ============================================
   COMPARISON TABLE
   ============================================ */
.eq-table-wrap {
  overflow-x: auto;
  max-width: 1000px;
  margin: 0 auto;
}

.eq-comparison-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.eq-comparison-table th,
.eq-comparison-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--eq-border);
}

.eq-comparison-table th {
  font-weight: 600;
  color: var(--eq-text);
  background: var(--eq-surface-alt);
}

.eq-comparison-table td {
  color: var(--eq-text-soft);
}

.eq-comparison-table tr:hover td {
  background: var(--eq-surface-alt);
}

/* ============================================
   ALERTS PAGE
   ============================================ */
.eq-alerts-list {
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-3);
}

.eq-alert-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--eq-space-4);
  border-radius: var(--eq-radius-card);
}

.eq-alert-main {
  display: flex;
  align-items: center;
  gap: var(--eq-space-3);
  flex: 1;
  min-width: 200px;
}

.eq-alert-badge {
  flex-shrink: 0;
}

.eq-alert-text {
  margin: 0;
}

.eq-alert-date {
  flex-shrink: 0;
  margin: 0;
}

/* ============================================
   PATHWAY PAGE
   ============================================ */
.eq-pathway-stages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eq-space-2);
  overflow-x: auto;
}

.eq-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--eq-space-2);
  min-width: 80px;
}

.eq-stage-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--eq-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.eq-stage--completed .eq-stage-dot {
  background: var(--eq-success);
  color: var(--eq-text-on-dark);
}

.eq-stage--active .eq-stage-dot {
  background: var(--eq-primary);
  box-shadow: 0 0 0 4px var(--eq-primary-soft);
}

.eq-stage-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--eq-text-muted);
  white-space: nowrap;
  margin: 0;
}

.eq-stage--active .eq-stage-label {
  color: var(--eq-primary);
  font-weight: 600;
}

.eq-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--eq-space-3);
}

.eq-checklist-item {
  display: flex;
  align-items: center;
  gap: var(--eq-space-3);
}

.eq-checklist-item svg {
  color: var(--eq-border-strong);
  flex-shrink: 0;
}

.eq-checklist-item--done svg {
  color: var(--eq-success);
}

/* ============================================
   PROFILE PAGE
   ============================================ */
.eq-profile-summary {
  border-radius: var(--eq-radius-panel);
  margin-bottom: var(--eq-space-4);
}

.eq-profile-identity {
  display: flex;
  align-items: center;
  gap: var(--eq-space-4);
}

.eq-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--eq-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--eq-primary);
}

.eq-profile-name {
  margin: 0;
}

.eq-profile-role {
  margin: var(--eq-space-1) 0 0;
}

.eq-profile-form,
.eq-profile-preferences {
  border-radius: var(--eq-radius-panel);
  margin-bottom: var(--eq-space-4);
}

.eq-profile-actions {
  display: flex;
  gap: var(--eq-space-3);
}

/* ============================================
   PLAN & USAGE PAGE
   ============================================ */
.eq-plan-current {
  border-radius: var(--eq-radius-panel);
  margin-bottom: var(--eq-space-6);
}

.eq-plan-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--eq-space-4);
  margin-bottom: var(--eq-space-4);
}

.eq-plan-info {
  display: flex;
  align-items: center;
  gap: var(--eq-space-3);
}

.eq-usage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--eq-space-4);
}

.eq-usage-card {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
}

.eq-usage-label {
  margin: 0 0 var(--eq-space-2);
}

.eq-usage-value {
  margin: 0;
}

.eq-plan-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eq-space-4);
}

.eq-plan-col {
  background: var(--eq-surface);
  border-radius: var(--eq-radius-card);
  box-shadow: var(--eq-shadow-sm);
}

.eq-plan-col--recommended {
  background: var(--eq-primary-soft);
  border: 2px solid var(--eq-primary);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.eq-field {
  margin-bottom: var(--eq-space-4);
}

.eq-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--eq-text);
  margin-bottom: var(--eq-space-2);
}

.eq-field-input,
select.eq-field-input,
textarea.eq-field-input {
  width: 100%;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--eq-text);
  background: var(--eq-bg);
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-radius-input);
  transition: var(--eq-transition-default);
  outline: none;
}

.eq-field-input:focus,
select.eq-field-input:focus,
textarea.eq-field-input:focus {
  border-color: var(--eq-primary);
  box-shadow: 0 0 0 3px var(--eq-primary-soft);
}

select.eq-field-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E7B91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* ============================================
   PLACEHOLDER IMAGES
   ============================================ */
.eq-placeholder-image,
.eq-visual-placeholder {
  display: block;
  border-radius: var(--eq-radius-card);
  background: var(--eq-primary-soft);
}