/* Satisfaction page specific styles */

.sat-mech-card {
  cursor: default;
}

.sat-kpi-card {
  cursor: default;
}

.sat-faq-item:hover {
  background: #0C294B;
}

.sat-rel-card {
  cursor: pointer;
}
.sat-rel-img {
  transition: transform 0.4s;
}
.sat-rel-title {
  transition: color 0.15s;
}

.customer-satisfaction-page {
  --sat-orange: #F0895E;
  --sat-navy: #0F172A;
  --sat-text-1: #252527;
  --sat-text-2: #45454A;
  --sat-text-3: #66666B;
  --sat-text-4: #94A3B8;
  --sat-surface: #F4F7F9;
  --sat-border: rgba(15, 23, 42, 0.08);
  --sat-px: clamp(24px, 4vw, 64px);
  --sat-max: calc(1200px + var(--sat-px) + var(--sat-px));
  color: var(--sat-text-1);
  font-size: 16px;
  line-height: 1.8;
}

.customer-satisfaction-page .company-bc-inner,
.customer-satisfaction-page .sat-inner {
  max-width: var(--sat-max) !important;
  padding-left: var(--sat-px) !important;
  padding-right: var(--sat-px) !important;
}

.customer-satisfaction-page .sat-hero-inner {
  max-width: var(--sat-max) !important;
  padding-left: var(--sat-px) !important;
  padding-right: var(--sat-px) !important;
}

.customer-satisfaction-page .sat-section {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.customer-satisfaction-page .sat-section-heading {
  margin-bottom: 56px !important;
}

.customer-satisfaction-page .sat-section-heading > span,
.customer-satisfaction-page .sat-section-heading span[style*="text-transform"] {
  font-size: 16px !important;
  color: var(--sat-orange) !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
}

.customer-satisfaction-page .sat-section-heading h2,
.customer-satisfaction-page .sat-section-related h2,
.customer-satisfaction-page .sat-section-faq h3 {
  font-size: clamp(26px, 3.4vw, 36px) !important;
  font-weight: 700 !important;
  color: var(--sat-navy) !important;
  line-height: 1.35 !important;
  letter-spacing: -.03em !important;
}

.customer-satisfaction-page .sat-section-heading > p,
.customer-satisfaction-page .sat-section-faq > .sat-inner > p {
  font-size: 18px !important;
  color: var(--sat-text-3) !important;
  line-height: 1.8 !important;
}

.customer-satisfaction-page .sat-mech-grid,
.customer-satisfaction-page .sat-rel-grid {
  grid-auto-flow: unset !important;
  grid-auto-columns: unset !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.customer-satisfaction-page .sat-mech-card,
.customer-satisfaction-page .sat-rel-card {
  border: 1px solid var(--sat-border) !important;
  box-shadow: 0 2px 16px rgba(15, 23, 42, .05);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}

.customer-satisfaction-page .sat-mech-card {
  padding: 24px !important;
  background: #F8FAFC !important;
}

.customer-satisfaction-page .sat-mech-card:hover,
.customer-satisfaction-page .sat-rel-card:hover {
  background: #0C294B !important;
  border-color: rgba(255,255,255,.25) !important;
  box-shadow: 0 4px 20px rgba(240,137,94,.35);
  transform: translateY(-2px);
}

.customer-satisfaction-page .sat-mech-card span { font-size: 12px !important; }
.customer-satisfaction-page .sat-mech-card h3,
.customer-satisfaction-page .sat-rel-title { font-size: 18px !important; line-height: 1.5 !important; }
.customer-satisfaction-page .sat-mech-card p,
.customer-satisfaction-page .sat-rel-card p { font-size: 14px !important; color: var(--sat-text-3) !important; line-height: 1.8 !important; }
.customer-satisfaction-page .sat-mech-card:hover h3,
.customer-satisfaction-page .sat-rel-card:hover .sat-rel-title { color: #fff !important; }
.customer-satisfaction-page .sat-mech-card:hover p,
.customer-satisfaction-page .sat-rel-card:hover p { color: rgba(255,255,255,.8) !important; }
.customer-satisfaction-page .sat-mech-card:hover span { color: #fff !important; }
.customer-satisfaction-page .sat-mech-card:hover svg,
.customer-satisfaction-page .sat-rel-card:hover svg { color: #fff !important; stroke: #fff !important; }
.customer-satisfaction-page .sat-faq-item:hover .sat-faq-q,
.customer-satisfaction-page .sat-faq-item:hover .sat-faq-answer p { color: rgba(255,255,255,.8) !important; }
.customer-satisfaction-page .sat-faq-item:hover .sat-faq-btn { color: #fff; border-color: rgba(255,255,255,.3) !important; }

.customer-satisfaction-page .sat-kpi-grid { margin-bottom: 48px !important; }
.customer-satisfaction-page .sat-kpi-grid > div > div:first-child { font-size: clamp(32px, 3.4vw, 40px) !important; }
.customer-satisfaction-page .sat-kpi-grid > div > div:nth-child(2) { font-size: 16px !important; }
.customer-satisfaction-page .sat-kpi-grid > div > div:nth-child(3) { font-size: 14px !important; }

.customer-satisfaction-page .sat-legend { font-size: 14px !important; flex-wrap: wrap; gap: 12px 20px !important; }
.customer-satisfaction-page .sat-legend span { font-size: inherit !important; }
.customer-satisfaction-page .sat-trend-chart { gap: 12px !important; margin-bottom: 48px !important; }
.customer-satisfaction-page .sat-trend-chart > div { gap: 16px !important; }
.customer-satisfaction-page .sat-trend-chart span { font-size: 14px !important; }
.customer-satisfaction-page .sat-trend-chart > div > div { height: 28px !important; border-radius: 4px !important; }

.customer-satisfaction-page .sat-table-wrap {
  border: 1px solid var(--sat-border);
  border-radius: 16px;
  background: #fff;
}
.customer-satisfaction-page .sat-table { min-width: 760px; }
.customer-satisfaction-page .sat-table th { font-size: 12px !important; letter-spacing: .08em; background: #F8FAFC; }
.customer-satisfaction-page .sat-table td { font-size: 14px !important; }
.customer-satisfaction-page .sat-improvement-title { font-size: 18px; color: var(--sat-navy); }
.customer-satisfaction-page .sat-improvement-text { font-size: 16px; color: var(--sat-text-2); line-height: 1.8; }

.customer-satisfaction-page .sat-section-faq h3 { margin-bottom: 12px !important; }
.customer-satisfaction-page .sat-section-faq > .sat-inner > p { margin-bottom: 40px !important; }
.customer-satisfaction-page .sat-faq-q { font-size: 16px !important; line-height: 1.7; }
.customer-satisfaction-page .sat-faq-answer p { font-size: 16px !important; color: var(--sat-text-2) !important; line-height: 1.8 !important; }
.customer-satisfaction-page .sat-faq-btn { flex-shrink: 0; }

.customer-satisfaction-page .sat-section-related h2 { margin-bottom: 32px !important; }
.customer-satisfaction-page .sat-rel-card > div:last-child { padding: 20px !important; }
.customer-satisfaction-page .sat-rel-card > div:last-child > div { font-size: 14px !important; }
.customer-satisfaction-page .sat-rel-card:hover .sat-rel-img { transform: scale(1.04); }
.customer-satisfaction-page .sat-rel-card:hover .sat-rel-title { color: #fff !important; }
.customer-satisfaction-page .sat-rel-card:hover > div:last-child > div { color: #fff !important; }

.customer-satisfaction-page .sat-cta { height: 470px; min-height: 470px; max-height: 470px; flex: 0 0 470px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.customer-satisfaction-page .sat-cta-inner { width: 100%; max-width: 920px !important; padding: 0 32px !important; }
.customer-satisfaction-page .sat-cta-inner h2 { font-size: clamp(30px, 3.4vw, 36px) !important; line-height: 1.3 !important; letter-spacing: -.04em !important; }
.customer-satisfaction-page .sat-cta-inner > p { font-size: 18px !important; color: rgba(255,255,255,0.72) !important; line-height: 1.8 !important; }
.customer-satisfaction-page .sat-cta-inner a { font-size: 16px !important; }

@media (max-width: 1023px) {
  .customer-satisfaction-page .sat-hero { height: auto !important; min-height: 0; max-height: none; }
  .customer-satisfaction-page .sat-hero-inner { padding-top: 56px !important; padding-bottom: 40px !important; }
}

/* Footer */
.ft-nav-link { font-size: 0.75rem; color: #64748B; text-decoration: none; transition: color 0.15s; }
.ft-nav-link:hover { color: #F0895E; }
.ft-legal-link2 { font-size: 0.72rem; color: #94A3B8; text-decoration: none; transition: color 0.15s; }
.ft-legal-link2:hover { color: #0F172A; }

@media (max-width: 1024px) {
  .sat-kpi-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  .customer-satisfaction-page .sat-section { padding-top: 64px !important; padding-bottom: 64px !important; }
  .customer-satisfaction-page .sat-section-heading { margin-bottom: 40px !important; }
  .customer-satisfaction-page .sat-section-heading > p,
  .customer-satisfaction-page .sat-section-faq > .sat-inner > p { font-size: 16px !important; }
  .customer-satisfaction-page .sat-mech-grid,
  .customer-satisfaction-page .sat-rel-grid { grid-template-columns: 1fr !important; }
  .customer-satisfaction-page .sat-kpi-grid { grid-template-columns: 1fr !important; gap: 0; }
  .customer-satisfaction-page .sat-kpi-grid > div { border: 0 !important; border-bottom: 1px solid var(--sat-border) !important; }
  .customer-satisfaction-page .sat-kpi-grid > div:last-child { border-bottom: 0 !important; }
  .customer-satisfaction-page .sat-cta-inner { padding: 0 24px !important; }
  .customer-satisfaction-page .sat-cta-inner > div:nth-last-child(2) { flex-direction: column; }
  .customer-satisfaction-page .sat-cta-inner a { width: 100%; justify-content: center; }
}
