/* ============================================
   CONTENT PAGES — Help, Guides, Community
   Shared styles for content infrastructure
   Extends style.css
   ============================================ */

/* Active nav link */
.nav-active {
  color: var(--color-orange) !important;
  font-weight: 700 !important;
}

/* ============================================
   CONTENT HERO (shared across help/guides/community)
   ============================================ */
.content-hero {
  position: relative;
  padding: 160px 0 80px;
  text-align: center;
  overflow: hidden;
}

.content-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 30%, rgba(255, 167, 58, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 30% 60%, rgba(196, 75, 140, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 70% 70%, rgba(12, 45, 80, 0.12) 0%, transparent 50%),
    var(--bg-primary);
  z-index: 0;
}

.content-hero-content {
  position: relative;
  z-index: 1;
}

.content-badge {
  display: inline-block;
  background: rgba(255, 167, 58, 0.12);
  border: 1px solid rgba(255, 167, 58, 0.3);
  color: var(--color-orange);
  padding: 6px 20px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

.content-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 16px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.content-subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ============================================
   SEARCH BAR
   ============================================ */
.search-container {
  max-width: 560px;
  margin: 40px auto 0;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 16px 24px 16px 52px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-input:focus {
  border-color: rgba(255, 167, 58, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 167, 58, 0.1);
}

.search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.1rem;
  pointer-events: none;
}

/* ============================================
   CATEGORY GRID (help center)
   ============================================ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.category-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  transition: transform var(--transition), border-color var(--transition);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.category-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 167, 58, 0.2);
}

.category-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 167, 58, 0.08);
  border-radius: var(--radius);
}

.category-card h3 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
}

.category-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ============================================
   ARTICLE LIST (help/guides index pages)
   ============================================ */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}

.article-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: transform var(--transition), border-color var(--transition);
  text-decoration: none;
  color: inherit;
}

.article-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 167, 58, 0.2);
}

.article-card-badge {
  display: inline-block;
  background: rgba(255, 167, 58, 0.12);
  border: 1px solid rgba(255, 167, 58, 0.25);
  color: var(--color-orange);
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.article-card-badge.badge-new {
  background: rgba(131, 199, 125, 0.15);
  border-color: rgba(131, 199, 125, 0.3);
  color: #83C77D;
}

.article-card-badge.badge-updated {
  background: rgba(255, 200, 69, 0.15);
  border-color: rgba(255, 200, 69, 0.3);
  color: var(--color-gold);
}

.article-card-badge.badge-coming-soon {
  background: rgba(107, 114, 128, 0.15);
  border-color: rgba(107, 114, 128, 0.3);
  color: var(--text-muted);
}

.article-card h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.35;
}

.article-card p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 12px;
}

.article-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.article-card-meta .author {
  color: var(--color-orange);
  font-weight: 600;
}

.article-card-meta .reading-time {
  color: var(--text-muted);
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--text-muted);
  transition: color var(--transition);
}

.breadcrumb a:hover {
  color: var(--color-orange);
}

.breadcrumb .separator {
  color: rgba(255, 255, 255, 0.2);
}

.breadcrumb .current {
  color: var(--text-secondary);
}

/* ============================================
   ARTICLE / GUIDE DETAIL PAGE
   ============================================ */
.article-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 0 40px;
}

.article-header h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.article-meta .category-badge {
  background: rgba(255, 167, 58, 0.12);
  border: 1px solid rgba(255, 167, 58, 0.25);
  color: var(--color-orange);
  padding: 3px 12px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   AUTHOR CARD
   ============================================ */
.author-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 40px;
}

.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--bg-primary);
  flex-shrink: 0;
}

.author-avatar.avatar-ktwice {
  background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-bright) 100%);
}

.author-avatar.avatar-kevin {
  background: linear-gradient(135deg, var(--color-navy-light) 0%, var(--color-magenta) 100%);
}

.author-info h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.author-info .author-role {
  font-size: 0.8rem;
  color: var(--color-orange);
  font-weight: 600;
  margin-bottom: 4px;
}

.author-info .author-bio {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================
   ARTICLE CONTENT AREA
   ============================================ */
.article-content {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.article-content h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 48px 0 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.article-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.article-content h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 32px 0 12px;
  color: var(--text-primary);
}

.article-content p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 16px;
}

.article-content ul,
.article-content ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.article-content li {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 8px;
}

.article-content li::marker {
  color: var(--color-orange);
}

.article-content a {
  color: var(--color-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-content a:hover {
  color: var(--color-gold);
}

/* Callout boxes */
.callout {
  background: var(--bg-card);
  border-left: 3px solid var(--color-orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin: 24px 0;
}

.callout p {
  margin-bottom: 0;
}

.callout.callout-warning {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}

.callout.callout-tip {
  border-left-color: #83C77D;
  background: rgba(131, 199, 125, 0.06);
}

.callout.callout-data {
  border-left-color: var(--color-gold);
  background: rgba(255, 200, 69, 0.06);
}

/* Data tables */
.data-table-wrap {
  overflow-x: auto;
  margin: 24px 0;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.data-table th {
  background: var(--bg-card);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}

.data-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Blockquote */
.article-content blockquote {
  background: var(--bg-card);
  border-left: 3px solid var(--color-orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin: 24px 0;
  font-style: italic;
}

.article-content blockquote p {
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* Coming soon placeholder */
.coming-soon-notice {
  background: var(--bg-card);
  border: 1px dashed rgba(255, 167, 58, 0.3);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
  margin: 32px 0;
}

.coming-soon-notice h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-orange);
  margin-bottom: 8px;
}

.coming-soon-notice p {
  color: var(--text-muted);
  font-size: 0.92rem;
  max-width: 480px;
  margin: 0 auto;
}

/* ============================================
   TABLE OF CONTENTS (guides)
   ============================================ */
.toc-box {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 40px;
}

.toc-box h3 {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.toc-list {
  list-style: none;
  padding: 0;
}

.toc-list li {
  margin-bottom: 8px;
}

.toc-list a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: color var(--transition);
  text-decoration: none;
}

.toc-list a:hover {
  color: var(--color-orange);
}

/* ============================================
   TESTIMONIAL CARDS (shared component)
   ============================================ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.testimonial-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: transform var(--transition), border-color var(--transition);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 167, 58, 0.15);
}

.testimonial-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--bg-primary);
  background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-bright) 100%);
  flex-shrink: 0;
}

.testimonial-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
}

.testimonial-credential {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.testimonial-quote {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 16px;
}

.testimonial-quote p {
  margin-bottom: 8px;
}

.testimonial-quote p:last-child {
  margin-bottom: 0;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.testimonial-source {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.testimonial-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.testimonial-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.testimonial-tag {
  background: rgba(255, 167, 58, 0.08);
  border: 1px solid rgba(255, 167, 58, 0.15);
  color: var(--color-orange);
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Masonry layout for community page */
.testimonial-masonry {
  columns: 2;
  column-gap: 24px;
}

.testimonial-masonry .testimonial-card {
  break-inside: avoid;
  margin-bottom: 24px;
}

/* ============================================
   FILTER TAGS
   ============================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.filter-tag {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-body);
}

.filter-tag:hover,
.filter-tag.active {
  background: rgba(255, 167, 58, 0.12);
  border-color: rgba(255, 167, 58, 0.3);
  color: var(--color-orange);
}

/* ============================================
   RELATED ARTICLES / GUIDES
   ============================================ */
.related-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 48px;
  margin-top: 48px;
}

.related-section h2 {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.related-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius);
  padding: 20px;
  transition: transform var(--transition), border-color var(--transition);
  text-decoration: none;
  color: inherit;
}

.related-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 167, 58, 0.2);
}

.related-card h4 {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.35;
}

.related-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.related-card .related-type {
  font-size: 0.68rem;
  color: var(--color-orange);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* ============================================
   COMMUNITY CTA (bottom of help/guide articles)
   ============================================ */
.community-cta-box {
  background: rgba(255, 167, 58, 0.04);
  border: 1px solid rgba(255, 167, 58, 0.15);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  margin: 40px 0;
}

.community-cta-box h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.community-cta-box p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 20px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   COMMUNITY RESOURCES SECTION (homepage)
   ============================================ */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.resource-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  transition: transform var(--transition), border-color var(--transition);
  text-decoration: none;
  color: inherit;
}

.resource-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 167, 58, 0.2);
}

.resource-icon {
  font-size: 2.2rem;
  margin-bottom: 16px;
}

.resource-card h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.resource-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ============================================
   REAL TALK CALLOUT BOX
   ============================================ */
.real-talk {
  background: rgba(255, 167, 58, 0.06);
  border: 1px solid rgba(255, 167, 58, 0.2);
  border-left: 4px solid var(--color-orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 24px 28px;
  margin: 32px 0;
  position: relative;
}

.real-talk-label {
  display: inline-block;
  background: var(--color-orange);
  color: var(--bg-primary);
  padding: 3px 12px;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.real-talk p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 0;
  font-style: normal;
}

/* ============================================
   AUDIT CONNECTION SIDEBAR
   ============================================ */
.audit-link-box {
  background: var(--bg-card);
  border: 1px solid rgba(255, 200, 69, 0.15);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 32px 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.audit-link-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.audit-link-box p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: 1.5;
}

.audit-link-box a {
  color: var(--color-orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.audit-link-box a:hover {
  color: var(--color-gold);
}

/* ============================================
   LAST VERIFIED DATE
   ============================================ */
.last-verified {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}

/* ============================================
   COMPARISON BANNER (guides hub)
   ============================================ */
.comparison-banner {
  background: rgba(255, 167, 58, 0.04);
  border: 1px solid rgba(255, 167, 58, 0.12);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 56px;
}

.comparison-banner p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0;
}

.comparison-banner strong {
  color: var(--color-orange);
}

/* ============================================
   GUIDE CATEGORY SECTIONS (hub page)
   ============================================ */
.guide-category {
  margin-bottom: 56px;
}

.guide-category-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.guide-category-icon {
  font-size: 1.6rem;
}

.guide-category-header h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
}

.guide-category-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 24px;
  max-width: 600px;
}

/* ============================================
   SORTABLE TABLES
   ============================================ */
.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 24px;
}

.data-table th.sortable::after {
  content: '⇅';
  position: absolute;
  right: 8px;
  opacity: 0.3;
  font-size: 0.7rem;
}

.data-table th.sortable.sort-asc::after {
  content: '↑';
  opacity: 0.8;
  color: var(--color-orange);
}

.data-table th.sortable.sort-desc::after {
  content: '↓';
  opacity: 0.8;
  color: var(--color-orange);
}

/* Status icons */
.status-live {
  color: #83C77D;
  font-weight: 700;
}

.status-pending {
  color: #ef4444;
  font-weight: 700;
}

.status-warning {
  color: var(--color-gold);
  font-weight: 700;
}

/* Highlighted table rows */
.data-table tr.row-best td {
  background: rgba(131, 199, 125, 0.06);
  border-left: 3px solid #83C77D;
}

.data-table tr.row-worst td {
  background: rgba(239, 68, 68, 0.06);
  border-left: 3px solid #ef4444;
}

.data-table tr.row-highlight td {
  background: rgba(255, 167, 58, 0.06);
}

/* ============================================
   NEWS SECTION
   ============================================ */
.news-stats-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px 48px;
  margin-bottom: 48px;
}

.news-stat {
  text-align: center;
}

.news-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--color-gold);
}

.news-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.news-card {
  display: flex;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: transform var(--transition), border-color var(--transition);
  text-decoration: none;
  color: inherit;
}

.news-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 167, 58, 0.2);
}

.news-card-body {
  flex: 1;
  min-width: 0;
}

.news-card-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.news-card h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.35;
}

.news-card-summary {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.news-card-meta a {
  color: var(--color-orange);
  font-weight: 600;
}

.badge-analyzed {
  background: rgba(131, 199, 125, 0.15);
  border: 1px solid rgba(131, 199, 125, 0.3);
  color: #83C77D;
}

.badge-pending {
  background: rgba(255, 200, 69, 0.15);
  border: 1px solid rgba(255, 200, 69, 0.3);
  color: var(--color-gold);
}

.badge-category {
  background: rgba(255, 167, 58, 0.12);
  border: 1px solid rgba(255, 167, 58, 0.25);
  color: var(--color-orange);
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* News analysis page specifics */
.analysis-meta-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.analysis-original-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  padding: 12px 20px;
  margin-bottom: 32px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.analysis-original-link a {
  color: var(--color-orange);
  font-weight: 600;
}

.comparison-box {
  background: var(--bg-card);
  border: 1px solid rgba(255, 200, 69, 0.15);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 24px 0;
}

.comparison-box h3 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .news-card {
    flex-direction: column;
  }
}

/* ============================================
   GOOD/BAD ASSESSMENT CARDS
   ============================================ */
.assessment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 24px 0;
}

.assessment-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.assessment-card.card-good {
  border-left: 4px solid #83C77D;
  background: rgba(131, 199, 125, 0.04);
}

.assessment-card.card-bad {
  border-left: 4px solid #ef4444;
  background: rgba(239, 68, 68, 0.04);
}

.assessment-card h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.assessment-card.card-good h3 {
  color: #83C77D;
}

.assessment-card.card-bad h3 {
  color: #ef4444;
}

.assessment-card p,
.assessment-card li {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* ============================================
   VOLUME HEADER (service structure catalog)
   ============================================ */
.volume-header {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-orange);
  margin: 40px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 167, 58, 0.15);
}

.volume-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 8px 0 24px;
}

/* ============================================
   WAIT TIME HIGHLIGHT (vehicle guide)
   ============================================ */
.wait-time {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.wait-long {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.wait-medium {
  background: rgba(255, 200, 69, 0.12);
  color: var(--color-gold);
}

.wait-short {
  background: rgba(131, 199, 125, 0.12);
  color: #83C77D;
}

.wait-none {
  color: #83C77D;
  font-weight: 700;
}

/* ============================================
   DUAL AUTHOR CARD
   ============================================ */
.author-card-dual {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.author-card-dual .author-avatars {
  display: flex;
  gap: -8px;
}

.author-card-dual .author-avatar {
  margin-right: -8px;
  border: 2px solid var(--bg-card);
}

/* ============================================
   YIELD COMPARISON TABLE
   ============================================ */
.data-table td.yield-high {
  color: #83C77D;
  font-weight: 600;
}

.data-table td.yield-low {
  color: #ef4444;
  font-weight: 600;
}

.data-table td.yield-mid {
  color: var(--color-gold);
  font-weight: 600;
}

.data-table td.yield-baseline {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ============================================
   STRATEGY CARDS
   ============================================ */
.strategy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.strategy-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
}

.strategy-card h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-orange);
  margin-bottom: 12px;
}

.strategy-card ol,
.strategy-card ul {
  padding-left: 20px;
}

.strategy-card li {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 6px;
}

/* ============================================
   SCHEMA MARKUP (hidden)
   ============================================ */
.schema-hidden {
  display: none;
}

/* ============================================
   SOURCES SECTION (guides)
   ============================================ */
.sources-list {
  list-style: none;
  padding: 0;
}

.sources-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.sources-list li:last-child {
  border-bottom: none;
}

.sources-list a {
  color: var(--color-orange);
}

/* ============================================
   RESPONSIVE — CONTENT PAGES
   ============================================ */
@media (max-width: 768px) {
  .content-hero {
    padding: 120px 0 60px;
  }

  .article-header {
    padding: 120px 0 32px;
  }

  .article-grid {
    grid-template-columns: 1fr;
  }

  .category-grid {
    grid-template-columns: 1fr 1fr;
  }

  .testimonial-masonry {
    columns: 1;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .author-card {
    flex-direction: column;
    text-align: center;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .resources-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .category-grid {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    gap: 8px;
  }

  .filter-tag {
    padding: 6px 14px;
    font-size: 0.78rem;
  }
}