/**
 * Zayto GEO & AEO Content Architecture Stylesheet
 * Optimized for Reader Accessibility, Semantic Hierarchy, and Responsive Layouts
 */

.geo-content-hub {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 20px 80px 20px;
  color: #1E1412;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  line-height: 1.65;
}

/* 1. Header & H1 Entity Definition */
.geo-article-header {
  margin-bottom: 48px;
  text-align: center;
}

.geo-h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 38px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .geo-h1 {
    font-size: 46px;
  }
}

/* Key Fact / Direct Answer Summary Box */
.geo-key-fact-box {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-left: 5px solid #8B263E;
  border-radius: 16px;
  padding: 24px 28px;
  margin: 0 auto 36px auto;
  max-width: 840px;
  text-align: left;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.geo-key-fact-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  color: #8B263E;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.geo-key-fact-text {
  font-size: 16.5px;
  font-weight: 600;
  color: #1E293B;
  line-height: 1.6;
  margin: 0;
}

/* Sections & H2 Natural Question Headings */
.geo-section {
  margin-bottom: 64px;
}

.geo-question-h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .geo-question-h2 {
    font-size: 32px;
  }
}

.geo-paragraph {
  font-size: 16px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Steps Grid */
.geo-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .geo-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.geo-step-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.geo-step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.geo-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(139, 38, 62, 0.08);
  color: #8B263E;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 16px;
}

.geo-step-title {
  font-size: 18px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
}

.geo-step-desc {
  font-size: 14px;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

/* Personas Grid */
.geo-persona-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 640px) {
  .geo-persona-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.geo-persona-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}

.geo-persona-icon {
  font-size: 28px;
  margin-bottom: 12px;
}

.geo-persona-name {
  font-size: 17px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
}

.geo-persona-desc {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
}

/* Structured Comparison Table */
.geo-table-wrapper {
  overflow-x: auto;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
  margin-top: 16px;
}

.geo-comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.geo-table-caption {
  caption-side: top;
  font-size: 12px;
  color: #94A3B8;
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid #F1F5F9;
}

.geo-comparison-table th,
.geo-comparison-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
}

.geo-comparison-table thead th {
  background: #F8FAFC;
  font-weight: 800;
  color: #0F172A;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.geo-comparison-table tbody th {
  font-weight: 700;
  color: #1E293B;
  background: #FAFAFA;
  width: 24%;
}

.geo-col-highlight,
.geo-cell-highlight {
  background: #FFF9FA !important;
  color: #8B263E !important;
  border-left: 2px solid rgba(139, 38, 62, 0.15);
  border-right: 2px solid rgba(139, 38, 62, 0.15);
}

.geo-col-highlight {
  font-weight: 900 !important;
  color: #8B263E !important;
}

/* FAQ Section */
.geo-faq-section {
  margin-top: 50px;
}