/* Private Label page styles (audit #43, extracted 2026-07-26).
 *
 * These rules used to live as <style> blocks inside the page templates —
 * ~4,000 lines re-downloaded on every view, with the shared comparison
 * components hand-copied (and drifting) across three pages.
 *
 * Organization:
 *   1. SHARED — rules that were byte-identical across 2+ pages, hoisted once.
 *      Selectors here are page-component names not used by the design system
 *      (application.css); anything that clashed stayed page-scoped instead.
 *   2. PER-PAGE — everything else, scoped under the page marker class
 *      (:where(.pl-page--vs-excel) etc., set on each page's root div) in the page's
 *      original rule order, so each page's cascade is exactly what its
 *      embedded block produced. Two pages defining the same component
 *      differently is preserved BY DESIGN via the scoping.
 *   3. UNSCOPED SECTIONS — the features partials (render on several feature
 *      pages) and the internal ELIS branding page (its own brand-* namespace).
 *
 * Rule of the file: NEVER add a <style> block back to a PL template — add
 * here (page section) or to application.css (real design-system component).
 */

/* ============ 1. SHARED (identical across pages, hoisted) ============ */

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
/* Verdict Card */
.pl-compare-verdict {
  padding: 0;
  margin-top: -3rem;
  position: relative;
  z-index: 10;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-verdict-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--pl-primary) 0%, var(--pl-primary-light) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-verdict-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--pl-primary);
  margin: 0 0 0.5rem;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-verdict-text {
  font-size: 1rem;
  color: var(--pl-gray-600);
  line-height: 1.6;
  margin: 0;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-verdict-text strong {
  color: var(--pl-gray-800);
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
/* Compare Header */
.pl-compare-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-header .pl-h2 {
  margin-bottom: 0.75rem;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-header .pl-lead {
  margin-bottom: 0;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
/* Side by Side Grid */
.pl-compare-grid {
  display: grid;
  gap: 2rem;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
/* Compare Columns */
.pl-compare-column {
  border-radius: 16px;
  overflow: hidden;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-column-header {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-column-header h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
/* Compare Items */
.pl-compare-items {
  padding: 0.5rem;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-item:last-child {
  margin-bottom: 0;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-item-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-bad .pl-compare-item-label {
  color: #b91c1c;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-good .pl-compare-item-label {
  color: #15803d;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-item-value {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-bad .pl-compare-item-value {
  color: #991b1b;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-good .pl-compare-item-value {
  color: #166534;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-item-detail {
  font-size: 0.8125rem;
  color: var(--pl-gray-500);
  margin: 0;
  line-height: 1.4;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
/* Testimonial Section */
.pl-compare-testimonial-section {
  background: var(--pl-primary);
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-testimonial {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-testimonial blockquote {
  font-size: 1.25rem;
  font-style: italic;
  color: white;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-testimonial cite {
  font-style: normal;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-testimonial cite strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.125rem;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-testimonial cite span {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

/* shared by: case_studies_index, comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics, contact_index, platform_overview */
/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-column {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-column:nth-child(1) { animation-delay: 0.15s; }

/* shared by: comparisons_vs_dev_shops, comparisons_vs_excel, comparisons_vs_qualtrics */
.pl-compare-column:nth-child(2) { animation-delay: 0.25s; }

/* shared by: comparisons_vs_dev_shops, comparisons_vs_qualtrics */
.pl-compare-bad-col {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_qualtrics */
.pl-compare-good-col {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_qualtrics */
.pl-compare-header-bad {
  background: #fee2e2;
  border-bottom: 1px solid #fecaca;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_qualtrics */
.pl-compare-header-good {
  background: #dcfce7;
  border-bottom: 1px solid #bbf7d0;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_qualtrics */
.pl-compare-logo-bad {
  background: #dc2626;
  color: white;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_qualtrics */
.pl-compare-logo-good {
  background: #16a34a;
  color: white;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_qualtrics */
.pl-compare-header-bad h3 {
  color: #991b1b;
}

/* shared by: comparisons_vs_dev_shops, comparisons_vs_qualtrics */
.pl-compare-header-good h3 {
  color: #166534;
}


/* ============ 2. PAGE: Compare: vs Excel (.pl-page--vs-excel) ============ */

:where(.pl-page--vs-excel) .pl-verdict-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  box-shadow: 0 4px 24px rgba(0, 51, 102, 0.08);
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  :where(.pl-page--vs-excel) .pl-verdict-card {
      padding: 2.5rem;
      align-items: center;
    }
}

@media (min-width: 1024px) {
  :where(.pl-page--vs-excel) .pl-compare-grid {
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }
}

:where(.pl-page--vs-excel) .pl-compare-excel {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

:where(.pl-page--vs-excel) .pl-compare-envisia {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

:where(.pl-page--vs-excel) .pl-compare-excel .pl-compare-column-header {
  background: #fee2e2;
  border-bottom: 1px solid #fecaca;
}

:where(.pl-page--vs-excel) .pl-compare-envisia .pl-compare-column-header {
  background: #dcfce7;
  border-bottom: 1px solid #bbf7d0;
}

:where(.pl-page--vs-excel) .pl-compare-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

:where(.pl-page--vs-excel) .pl-compare-excel .pl-compare-logo {
  background: #dc2626;
  color: white;
}

:where(.pl-page--vs-excel) .pl-compare-logo-envisia {
  background: #16a34a;
  color: white;
}

:where(.pl-page--vs-excel) .pl-compare-excel .pl-compare-column-header h3 {
  color: #991b1b;
}

:where(.pl-page--vs-excel) .pl-compare-envisia .pl-compare-column-header h3 {
  color: #166534;
}

:where(.pl-page--vs-excel) .pl-compare-item {
  padding: 1.25rem;
  border-radius: 10px;
  margin-bottom: 0.5rem;
}

:where(.pl-page--vs-excel) .pl-compare-bad {
  background: white;
}

:where(.pl-page--vs-excel) .pl-compare-good {
  background: white;
}

:where(.pl-page--vs-excel) /* Scenarios Section */
.pl-compare-scenarios {
  background: var(--pl-gray-50);
}

:where(.pl-page--vs-excel) .pl-scenario-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  :where(.pl-page--vs-excel) .pl-scenario-grid {
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }
}

:where(.pl-page--vs-excel) .pl-scenario {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  position: relative;
}

:where(.pl-page--vs-excel) .pl-scenario-excel {
  border: 1px solid #fecaca;
}

:where(.pl-page--vs-excel) .pl-scenario-envisia {
  border: 1px solid #bbf7d0;
}

:where(.pl-page--vs-excel) .pl-scenario-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  background: #fee2e2;
  color: #991b1b;
}

:where(.pl-page--vs-excel) .pl-scenario-badge i {
  font-size: 1rem;
}

:where(.pl-page--vs-excel) .pl-scenario-badge-good {
  background: #dcfce7;
  color: #166534;
}

:where(.pl-page--vs-excel) .pl-scenario-time {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pl-gray-400);
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

:where(.pl-page--vs-excel) .pl-scenario-text {
  font-size: 0.9375rem;
  color: var(--pl-gray-600);
  line-height: 1.6;
  margin: 0 0 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--pl-gray-200);
}

:where(.pl-page--vs-excel) .pl-scenario-envisia .pl-scenario-text {
  border-left-color: #86efac;
}

:where(.pl-page--vs-excel) .pl-scenario-mood {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #b91c1c;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pl-gray-100);
}

:where(.pl-page--vs-excel) .pl-scenario-mood i {
  font-size: 1.25rem;
}

:where(.pl-page--vs-excel) .pl-scenario-mood-good {
  color: #15803d;
}

:where(.pl-page--vs-excel) /* Time Saved Section */
.pl-time-saved {
  max-width: 800px;
  margin: 0 auto;
}

:where(.pl-page--vs-excel) .pl-time-saved-content {
  text-align: center;
  margin-bottom: 2.5rem;
}

:where(.pl-page--vs-excel) .pl-time-saved-content .pl-h2 {
  margin-bottom: 0.5rem;
}

:where(.pl-page--vs-excel) .pl-time-saved-content .pl-lead {
  margin-bottom: 0;
  font-size: 1.0625rem;
}

:where(.pl-page--vs-excel) .pl-time-saved-grid {
  background: var(--pl-gray-50);
  border-radius: 16px;
  padding: 2rem;
}

:where(.pl-page--vs-excel) .pl-time-block {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--pl-gray-200);
}

:where(.pl-page--vs-excel) .pl-time-block:first-child {
  padding-top: 0;
}

:where(.pl-page--vs-excel) .pl-time-task {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pl-gray-700);
  margin-bottom: 0.75rem;
}

:where(.pl-page--vs-excel) .pl-time-values {
  display: flex;
  align-items: center;
  gap: 1rem;
}

:where(.pl-page--vs-excel) .pl-time-excel,
:where(.pl-page--vs-excel) .pl-time-envisia {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

:where(.pl-page--vs-excel) .pl-time-arrow {
  color: var(--pl-gray-300);
  flex-shrink: 0;
}

:where(.pl-page--vs-excel) .pl-time-hours {
  font-size: 1.5rem;
  font-weight: 700;
}

:where(.pl-page--vs-excel) .pl-time-excel .pl-time-hours {
  color: #dc2626;
}

:where(.pl-page--vs-excel) .pl-time-envisia .pl-time-hours {
  color: #16a34a;
}

:where(.pl-page--vs-excel) .pl-time-label {
  font-size: 0.75rem;
  color: var(--pl-gray-500);
}

:where(.pl-page--vs-excel) .pl-time-total {
  text-align: center;
  padding-top: 2rem;
}

:where(.pl-page--vs-excel) .pl-time-total-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pl-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

:where(.pl-page--vs-excel) .pl-time-total-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
}

:where(.pl-page--vs-excel) .pl-time-total-number {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--pl-primary);
  line-height: 1;
}

:where(.pl-page--vs-excel) .pl-time-total-unit {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pl-gray-500);
}

:where(.pl-page--vs-excel) .pl-time-total-note {
  font-size: 0.9375rem;
  color: var(--pl-gray-600);
  margin: 0.75rem 0 0;
}

@media (min-width: 768px) {
  :where(.pl-page--vs-excel) .pl-compare-testimonial blockquote {
      font-size: 1.375rem;
    }
}

:where(.pl-page--vs-excel) /* Switch Steps */
.pl-switch-steps {
  display: grid;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  :where(.pl-page--vs-excel) .pl-switch-steps {
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
    }
}

:where(.pl-page--vs-excel) .pl-switch-step {
  text-align: center;
  padding: 1.5rem;
}

:where(.pl-page--vs-excel) .pl-switch-step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pl-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 auto 1rem;
}

:where(.pl-page--vs-excel) .pl-switch-step h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pl-primary);
  margin: 0 0 0.5rem;
}

:where(.pl-page--vs-excel) .pl-switch-step p {
  font-size: 0.875rem;
  color: var(--pl-gray-500);
  line-height: 1.5;
  margin: 0;
}

:where(.pl-page--vs-excel) .pl-verdict-card {
  animation: fadeInUp 0.5s ease 0.1s forwards;
  opacity: 0;
}

:where(.pl-page--vs-excel) .pl-scenario {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

:where(.pl-page--vs-excel) .pl-scenario:nth-child(1) { animation-delay: 0.15s; }

:where(.pl-page--vs-excel) .pl-scenario:nth-child(2) { animation-delay: 0.25s; }

:where(.pl-page--vs-excel) .pl-switch-step {
  animation: fadeInUp 0.4s ease forwards;
  opacity: 0;
}

:where(.pl-page--vs-excel) .pl-switch-step:nth-child(1) { animation-delay: 0.1s; }

:where(.pl-page--vs-excel) .pl-switch-step:nth-child(2) { animation-delay: 0.2s; }

:where(.pl-page--vs-excel) .pl-switch-step:nth-child(3) { animation-delay: 0.3s; }

:where(.pl-page--vs-excel) .pl-switch-step:nth-child(4) { animation-delay: 0.4s; }


/* ============ 2. PAGE: Compare: vs Dev Shops (.pl-page--vs-dev-shops) ============ */

:where(.pl-page--vs-dev-shops) .pl-verdict-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  box-shadow: 0 4px 24px rgba(0, 51, 102, 0.08);
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  :where(.pl-page--vs-dev-shops) .pl-verdict-card {
      padding: 2.5rem;
      align-items: center;
    }
}

@media (min-width: 1024px) {
  :where(.pl-page--vs-dev-shops) .pl-compare-grid {
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }
}

:where(.pl-page--vs-dev-shops) .pl-compare-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

:where(.pl-page--vs-dev-shops) .pl-compare-item {
  padding: 1.25rem;
  border-radius: 10px;
  margin-bottom: 0.5rem;
  background: white;
}

:where(.pl-page--vs-dev-shops) /* Cost Section */
.pl-compare-cost-section {
  background: var(--pl-gray-50);
}

:where(.pl-page--vs-dev-shops) .pl-cost-comparison {
  display: grid;
  gap: 2rem;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  :where(.pl-page--vs-dev-shops) .pl-cost-comparison {
      grid-template-columns: 1fr auto 1fr;
      gap: 2rem;
    }
}

:where(.pl-page--vs-dev-shops) .pl-cost-vs {
  display: none;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pl-gray-300);
  align-self: center;
}

@media (min-width: 768px) {
  :where(.pl-page--vs-dev-shops) .pl-cost-vs {
      display: block;
    }
}

:where(.pl-page--vs-dev-shops) .pl-cost-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
}

:where(.pl-page--vs-dev-shops) .pl-cost-card-bad {
  border: 1px solid #fecaca;
}

:where(.pl-page--vs-dev-shops) .pl-cost-card-good {
  border: 1px solid #bbf7d0;
}

:where(.pl-page--vs-dev-shops) .pl-cost-card-header {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

:where(.pl-page--vs-dev-shops) .pl-cost-card-bad .pl-cost-card-header {
  background: #fee2e2;
  color: #991b1b;
}

:where(.pl-page--vs-dev-shops) .pl-cost-card-good .pl-cost-card-header {
  background: #dcfce7;
  color: #166534;
}

:where(.pl-page--vs-dev-shops) .pl-cost-card-header i {
  font-size: 1.25rem;
}

:where(.pl-page--vs-dev-shops) .pl-cost-card-header h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

:where(.pl-page--vs-dev-shops) .pl-cost-items {
  padding: 1rem 1.5rem;
}

:where(.pl-page--vs-dev-shops) .pl-cost-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--pl-gray-100);
  font-size: 0.875rem;
}

:where(.pl-page--vs-dev-shops) .pl-cost-item:last-child {
  border-bottom: none;
}

:where(.pl-page--vs-dev-shops) .pl-cost-item span:first-child {
  color: var(--pl-gray-600);
}

:where(.pl-page--vs-dev-shops) .pl-cost-item span:last-child {
  font-weight: 600;
  color: var(--pl-gray-800);
}

:where(.pl-page--vs-dev-shops) .pl-cost-card-good .pl-cost-item span:last-child {
  color: #166534;
}

:where(.pl-page--vs-dev-shops) .pl-cost-total {
  display: flex;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: #fee2e2;
  font-weight: 700;
}

:where(.pl-page--vs-dev-shops) .pl-cost-total span:last-child {
  font-size: 1.25rem;
  color: #991b1b;
}

:where(.pl-page--vs-dev-shops) .pl-cost-total-good {
  background: #dcfce7;
}

:where(.pl-page--vs-dev-shops) .pl-cost-total-good span:last-child {
  color: #166534;
}

:where(.pl-page--vs-dev-shops) .pl-cost-note {
  font-size: 0.8125rem;
  color: var(--pl-gray-500);
  text-align: center;
  padding: 1rem 1.5rem;
  margin: 0;
  font-style: italic;
}

:where(.pl-page--vs-dev-shops) /* Warnings Grid */
.pl-warnings-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  :where(.pl-page--vs-dev-shops) .pl-warnings-grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
  :where(.pl-page--vs-dev-shops) .pl-warnings-grid {
      grid-template-columns: repeat(3, 1fr);
    }
}

:where(.pl-page--vs-dev-shops) .pl-warning-card {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 1.5rem;
}

:where(.pl-page--vs-dev-shops) .pl-warning-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fef3c7;
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-bottom: 1rem;
}

:where(.pl-page--vs-dev-shops) .pl-warning-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #92400e;
  margin: 0 0 0.5rem;
}

:where(.pl-page--vs-dev-shops) .pl-warning-card p {
  font-size: 0.875rem;
  color: #a16207;
  line-height: 1.5;
  margin: 0;
}

@media (min-width: 768px) {
  :where(.pl-page--vs-dev-shops) .pl-compare-testimonial blockquote {
      font-size: 1.375rem;
    }
}

:where(.pl-page--vs-dev-shops) /* Already Built Grid */
.pl-already-grid {
  display: grid;
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  :where(.pl-page--vs-dev-shops) .pl-already-grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
  :where(.pl-page--vs-dev-shops) .pl-already-grid {
      grid-template-columns: repeat(3, 1fr);
    }
}

:where(.pl-page--vs-dev-shops) .pl-already-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--pl-gray-50);
  border-radius: 10px;
  font-size: 0.9375rem;
  color: var(--pl-gray-700);
}

:where(.pl-page--vs-dev-shops) .pl-already-item i {
  color: #16a34a;
  font-size: 0.875rem;
  flex-shrink: 0;
}

:where(.pl-page--vs-dev-shops) .pl-verdict-card {
  animation: fadeInUp 0.5s ease 0.1s forwards;
  opacity: 0;
}

:where(.pl-page--vs-dev-shops) .pl-cost-card {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

:where(.pl-page--vs-dev-shops) .pl-cost-card:nth-child(1) { animation-delay: 0.15s; }

:where(.pl-page--vs-dev-shops) .pl-cost-card:nth-child(3) { animation-delay: 0.25s; }

:where(.pl-page--vs-dev-shops) .pl-warning-card {
  animation: fadeInUp 0.4s ease forwards;
  opacity: 0;
}

:where(.pl-page--vs-dev-shops) .pl-warning-card:nth-child(1) { animation-delay: 0.1s; }

:where(.pl-page--vs-dev-shops) .pl-warning-card:nth-child(2) { animation-delay: 0.15s; }

:where(.pl-page--vs-dev-shops) .pl-warning-card:nth-child(3) { animation-delay: 0.2s; }

:where(.pl-page--vs-dev-shops) .pl-warning-card:nth-child(4) { animation-delay: 0.25s; }

:where(.pl-page--vs-dev-shops) .pl-warning-card:nth-child(5) { animation-delay: 0.3s; }

:where(.pl-page--vs-dev-shops) .pl-warning-card:nth-child(6) { animation-delay: 0.35s; }


/* ============ 2. PAGE: Compare: vs Qualtrics (.pl-page--vs-qualtrics) ============ */

:where(.pl-page--vs-qualtrics) .pl-verdict-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  box-shadow: 0 4px 24px rgba(0, 51, 102, 0.08);
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  :where(.pl-page--vs-qualtrics) .pl-verdict-card {
      padding: 2.5rem;
      align-items: center;
    }
}

:where(.pl-page--vs-qualtrics) /* Audience Grid */
.pl-audience-grid {
  display: grid;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  :where(.pl-page--vs-qualtrics) .pl-audience-grid {
      grid-template-columns: 1fr 1fr;
    }
}

:where(.pl-page--vs-qualtrics) .pl-audience-card {
  background: var(--pl-gray-50);
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid var(--pl-gray-200);
}

:where(.pl-page--vs-qualtrics) .pl-audience-card-envisia {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

:where(.pl-page--vs-qualtrics) .pl-audience-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--pl-gray-200);
}

:where(.pl-page--vs-qualtrics) .pl-audience-header-envisia {
  border-bottom-color: #bbf7d0;
}

:where(.pl-page--vs-qualtrics) .pl-audience-header i {
  font-size: 1.5rem;
  color: var(--pl-gray-400);
}

:where(.pl-page--vs-qualtrics) .pl-audience-header-envisia i {
  color: #16a34a;
}

:where(.pl-page--vs-qualtrics) .pl-audience-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--pl-gray-700);
}

:where(.pl-page--vs-qualtrics) .pl-audience-card-envisia .pl-audience-header h3 {
  color: #166534;
}

:where(.pl-page--vs-qualtrics) .pl-audience-for {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pl-gray-400);
}

:where(.pl-page--vs-qualtrics) .pl-audience-card-envisia .pl-audience-for {
  color: #16a34a;
}

:where(.pl-page--vs-qualtrics) .pl-audience-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

:where(.pl-page--vs-qualtrics) .pl-audience-list li {
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  color: var(--pl-gray-600);
  padding-left: 1.5rem;
  position: relative;
}

:where(.pl-page--vs-qualtrics) .pl-audience-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--pl-gray-400);
}

:where(.pl-page--vs-qualtrics) .pl-audience-list-envisia li::before {
  content: '✓';
  color: #16a34a;
}

:where(.pl-page--vs-qualtrics) .pl-audience-list-envisia li {
  color: #166534;
}

:where(.pl-page--vs-qualtrics) /* Compare Main Section */
.pl-compare-main-section {
  background: var(--pl-gray-50);
}

@media (min-width: 1024px) {
  :where(.pl-page--vs-qualtrics) .pl-compare-grid {
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }
}

:where(.pl-page--vs-qualtrics) .pl-compare-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

:where(.pl-page--vs-qualtrics) .pl-compare-item {
  padding: 1.25rem;
  border-radius: 10px;
  margin-bottom: 0.5rem;
  background: white;
}

:where(.pl-page--vs-qualtrics) .pl-compare-neutral .pl-compare-item-label {
  color: #0369a1;
}

:where(.pl-page--vs-qualtrics) .pl-compare-neutral .pl-compare-item-value {
  color: #0c4a6e;
}

:where(.pl-page--vs-qualtrics) /* Partnership Grid */
.pl-partnership-grid {
  display: grid;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  :where(.pl-page--vs-qualtrics) .pl-partnership-grid {
      grid-template-columns: 1fr 1fr;
    }
}

:where(.pl-page--vs-qualtrics) .pl-partnership-card {
  border-radius: 16px;
  padding: 2rem;
}

:where(.pl-page--vs-qualtrics) .pl-partnership-qualtrics {
  background: var(--pl-gray-50);
  border: 1px solid var(--pl-gray-200);
}

:where(.pl-page--vs-qualtrics) .pl-partnership-envisia {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

:where(.pl-page--vs-qualtrics) .pl-partnership-header {
  margin-bottom: 1.5rem;
}

:where(.pl-page--vs-qualtrics) .pl-partnership-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pl-gray-400);
}

:where(.pl-page--vs-qualtrics) .pl-partnership-header-envisia .pl-partnership-label {
  color: #16a34a;
}

:where(.pl-page--vs-qualtrics) .pl-partnership-header h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.25rem 0 0;
  color: var(--pl-gray-700);
}

:where(.pl-page--vs-qualtrics) .pl-partnership-header-envisia h4 {
  color: #166534;
}

:where(.pl-page--vs-qualtrics) .pl-partnership-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

:where(.pl-page--vs-qualtrics) .pl-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

:where(.pl-page--vs-qualtrics) .pl-flow-step span {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--pl-gray-500);
  text-align: center;
}

:where(.pl-page--vs-qualtrics) .pl-flow-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

:where(.pl-page--vs-qualtrics) .pl-flow-qualtrics {
  background: var(--pl-gray-200);
  color: var(--pl-gray-600);
  font-weight: 700;
}

:where(.pl-page--vs-qualtrics) .pl-flow-you {
  background: var(--pl-gray-300);
  color: var(--pl-gray-700);
}

:where(.pl-page--vs-qualtrics) .pl-flow-client {
  background: var(--pl-gray-400);
  color: white;
}

:where(.pl-page--vs-qualtrics) .pl-flow-envisia {
  background: var(--pl-gray-200);
  color: var(--pl-gray-400);
}

:where(.pl-page--vs-qualtrics) .pl-flow-you-owner {
  background: #16a34a;
  color: white;
}

:where(.pl-page--vs-qualtrics) .pl-flow-client-good {
  background: #166534;
  color: white;
}

:where(.pl-page--vs-qualtrics) .pl-flow-step-hidden {
  opacity: 0.4;
}

:where(.pl-page--vs-qualtrics) .pl-flow-arrow {
  color: var(--pl-gray-300);
  font-size: 0.875rem;
}

:where(.pl-page--vs-qualtrics) .pl-flow-arrow-hidden {
  opacity: 0.3;
}

:where(.pl-page--vs-qualtrics) .pl-flow-arrow-good {
  color: #16a34a;
}

:where(.pl-page--vs-qualtrics) .pl-partnership-desc {
  font-size: 0.875rem;
  color: var(--pl-gray-600);
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

:where(.pl-page--vs-qualtrics) .pl-partnership-envisia .pl-partnership-desc {
  color: #166534;
}

:where(.pl-page--vs-qualtrics) .pl-partnership-desc em {
  font-style: normal;
  font-weight: 600;
}

:where(.pl-page--vs-qualtrics) /* Pricing Section */
.pl-pricing-section {
  background: var(--pl-gray-50);
}

:where(.pl-page--vs-qualtrics) .pl-pricing-compare {
  display: grid;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  :where(.pl-page--vs-qualtrics) .pl-pricing-compare {
      grid-template-columns: 1fr 1fr;
    }
}

:where(.pl-page--vs-qualtrics) .pl-pricing-card {
  border-radius: 16px;
  padding: 1.5rem;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-qualtrics {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-envisia {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-card h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-qualtrics h4 {
  color: #991b1b;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-envisia h4 {
  color: #166534;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-card li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  padding: 0.5rem 0;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-qualtrics li {
  color: #991b1b;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-qualtrics li i {
  color: #dc2626;
  margin-top: 0.125rem;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-envisia li {
  color: #166534;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-envisia li i {
  color: #16a34a;
  margin-top: 0.125rem;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-bottom {
  border-top: 1px solid;
  padding-top: 1rem;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-qualtrics .pl-pricing-bottom {
  border-top-color: #fecaca;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-envisia .pl-pricing-bottom {
  border-top-color: #bbf7d0;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-bottom p {
  font-size: 0.8125rem;
  font-style: italic;
  margin: 0;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-qualtrics .pl-pricing-bottom p {
  color: #b91c1c;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-envisia .pl-pricing-bottom p {
  color: #15803d;
}

:where(.pl-page--vs-qualtrics) /* Honest Grid */
.pl-honest-grid {
  display: grid;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  :where(.pl-page--vs-qualtrics) .pl-honest-grid {
      grid-template-columns: 1fr 1fr;
    }
}

:where(.pl-page--vs-qualtrics) .pl-honest-card {
  border-radius: 12px;
  padding: 1.5rem;
}

:where(.pl-page--vs-qualtrics) .pl-honest-qualtrics {
  background: var(--pl-gray-50);
  border: 1px solid var(--pl-gray-200);
}

:where(.pl-page--vs-qualtrics) .pl-honest-envisia {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

:where(.pl-page--vs-qualtrics) .pl-honest-card h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

:where(.pl-page--vs-qualtrics) .pl-honest-qualtrics h4 {
  color: var(--pl-gray-700);
}

:where(.pl-page--vs-qualtrics) .pl-honest-qualtrics h4 i {
  color: var(--pl-gray-400);
}

:where(.pl-page--vs-qualtrics) .pl-honest-envisia h4 {
  color: #166534;
}

:where(.pl-page--vs-qualtrics) .pl-honest-envisia h4 i {
  color: #16a34a;
}

:where(.pl-page--vs-qualtrics) .pl-honest-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

:where(.pl-page--vs-qualtrics) .pl-honest-card li {
  font-size: 0.875rem;
  padding: 0.375rem 0;
  padding-left: 1rem;
  position: relative;
}

:where(.pl-page--vs-qualtrics) .pl-honest-qualtrics li {
  color: var(--pl-gray-600);
}

:where(.pl-page--vs-qualtrics) .pl-honest-envisia li {
  color: #166534;
}

:where(.pl-page--vs-qualtrics) .pl-honest-card li::before {
  content: '•';
  position: absolute;
  left: 0;
}

:where(.pl-page--vs-qualtrics) .pl-honest-qualtrics li::before {
  color: var(--pl-gray-400);
}

:where(.pl-page--vs-qualtrics) .pl-honest-envisia li::before {
  color: #16a34a;
}

@media (min-width: 768px) {
  :where(.pl-page--vs-qualtrics) .pl-compare-testimonial blockquote {
      font-size: 1.375rem;
    }
}

:where(.pl-page--vs-qualtrics) /* Switch Points */
.pl-switch-points {
  max-width: 700px;
  margin: 0 auto;
}

:where(.pl-page--vs-qualtrics) .pl-switch-point {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--pl-gray-200);
}

:where(.pl-page--vs-qualtrics) .pl-switch-point:last-child {
  border-bottom: none;
}

:where(.pl-page--vs-qualtrics) .pl-switch-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pl-primary) 0%, var(--pl-primary-light) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

:where(.pl-page--vs-qualtrics) .pl-switch-content h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--pl-gray-800);
  margin: 0 0 0.375rem;
}

:where(.pl-page--vs-qualtrics) .pl-switch-content p {
  font-size: 0.9375rem;
  color: var(--pl-gray-500);
  margin: 0;
  line-height: 1.5;
}

:where(.pl-page--vs-qualtrics) .pl-verdict-card {
  animation: fadeInUp 0.5s ease 0.1s forwards;
  opacity: 0;
}

:where(.pl-page--vs-qualtrics) .pl-audience-card {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

:where(.pl-page--vs-qualtrics) .pl-audience-card:nth-child(1) { animation-delay: 0.15s; }

:where(.pl-page--vs-qualtrics) .pl-audience-card:nth-child(2) { animation-delay: 0.25s; }

:where(.pl-page--vs-qualtrics) .pl-partnership-card {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

:where(.pl-page--vs-qualtrics) .pl-partnership-card:nth-child(1) { animation-delay: 0.15s; }

:where(.pl-page--vs-qualtrics) .pl-partnership-card:nth-child(2) { animation-delay: 0.25s; }

:where(.pl-page--vs-qualtrics) .pl-pricing-card {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

:where(.pl-page--vs-qualtrics) .pl-pricing-card:nth-child(1) { animation-delay: 0.15s; }

:where(.pl-page--vs-qualtrics) .pl-pricing-card:nth-child(2) { animation-delay: 0.25s; }

:where(.pl-page--vs-qualtrics) .pl-switch-point {
  animation: fadeInUp 0.4s ease forwards;
  opacity: 0;
}

:where(.pl-page--vs-qualtrics) .pl-switch-point:nth-child(1) { animation-delay: 0.1s; }

:where(.pl-page--vs-qualtrics) .pl-switch-point:nth-child(2) { animation-delay: 0.2s; }

:where(.pl-page--vs-qualtrics) .pl-switch-point:nth-child(3) { animation-delay: 0.3s; }


/* ============ 2. PAGE: Platform overview (.pl-page--platform-overview) ============ */

:where(.pl-page--platform-overview) /* Platform Hero */
.pl-platform-hero .pl-hero-accent {
  color: var(--pl-accent);
  display: inline-block;
}

:where(.pl-page--platform-overview) .pl-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

:where(.pl-page--platform-overview) /* Platform Visual Section */
.pl-platform-visual-section {
  background: linear-gradient(180deg, var(--pl-gray-50) 0%, white 100%);
  padding: 0 0 4rem;
  margin-top: -2rem;
}

:where(.pl-page--platform-overview) .pl-platform-mockup {
  max-width: 900px;
  margin: 0 auto;
}

:where(.pl-page--platform-overview) .pl-mockup-browser {
  background: white;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 51, 102, 0.15);
  overflow: hidden;
  border: 1px solid var(--pl-gray-200);
}

:where(.pl-page--platform-overview) .pl-mockup-bar {
  background: var(--pl-gray-100);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--pl-gray-200);
}

:where(.pl-page--platform-overview) .pl-mockup-dots {
  display: flex;
  gap: 6px;
}

:where(.pl-page--platform-overview) .pl-mockup-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pl-gray-300);
}

:where(.pl-page--platform-overview) .pl-mockup-dots span:first-child { background: #ef4444; }

:where(.pl-page--platform-overview) .pl-mockup-dots span:nth-child(2) { background: #f59e0b; }

:where(.pl-page--platform-overview) .pl-mockup-dots span:last-child { background: #22c55e; }

:where(.pl-page--platform-overview) .pl-mockup-url {
  flex: 1;
  background: white;
  border-radius: 6px;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--pl-gray-600);
  font-family: monospace;
}

:where(.pl-page--platform-overview) .pl-mockup-content {
  display: flex;
  min-height: 320px;
}

:where(.pl-page--platform-overview) .pl-mockup-sidebar {
  width: 200px;
  background: var(--pl-primary);
  padding: 1.5rem 1rem;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  :where(.pl-page--platform-overview) .pl-mockup-sidebar {
      display: none;
    }
}

:where(.pl-page--platform-overview) .pl-mockup-logo {
  width: 100px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  margin-bottom: 2rem;
}

:where(.pl-page--platform-overview) .pl-mockup-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

:where(.pl-page--platform-overview) .pl-mockup-nav-item {
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

:where(.pl-page--platform-overview) .pl-mockup-nav-item.active {
  background: rgba(255, 255, 255, 0.2);
}

:where(.pl-page--platform-overview) .pl-mockup-main {
  flex: 1;
  padding: 1.5rem;
  background: var(--pl-gray-50);
}

:where(.pl-page--platform-overview) .pl-mockup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

:where(.pl-page--platform-overview) .pl-mockup-title {
  width: 180px;
  height: 24px;
  background: var(--pl-gray-300);
  border-radius: 4px;
}

:where(.pl-page--platform-overview) .pl-mockup-actions {
  display: flex;
  gap: 0.5rem;
}

:where(.pl-page--platform-overview) .pl-mockup-btn {
  width: 80px;
  height: 32px;
  background: var(--pl-gray-200);
  border-radius: 6px;
}

:where(.pl-page--platform-overview) .pl-mockup-btn-primary {
  background: var(--pl-primary);
  width: 100px;
}

:where(.pl-page--platform-overview) .pl-mockup-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
  :where(.pl-page--platform-overview) .pl-mockup-cards {
      grid-template-columns: 1fr;
    }
}

:where(.pl-page--platform-overview) .pl-mockup-card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

:where(.pl-page--platform-overview) .pl-mockup-card-icon {
  width: 32px;
  height: 32px;
  background: var(--pl-gray-100);
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

:where(.pl-page--platform-overview) .pl-mockup-card-text {
  width: 60%;
  height: 12px;
  background: var(--pl-gray-200);
  border-radius: 2px;
  margin-bottom: 0.5rem;
}

:where(.pl-page--platform-overview) .pl-mockup-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pl-primary);
}

:where(.pl-page--platform-overview) .pl-mockup-table {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

:where(.pl-page--platform-overview) .pl-mockup-table-row {
  height: 40px;
  border-bottom: 1px solid var(--pl-gray-100);
}

:where(.pl-page--platform-overview) .pl-mockup-table-row:last-child {
  border-bottom: none;
}

:where(.pl-page--platform-overview) .pl-mockup-table-header {
  background: var(--pl-gray-50);
}

:where(.pl-page--platform-overview) .pl-mockup-label {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--pl-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

:where(.pl-page--platform-overview) .pl-mockup-label i {
  color: var(--pl-accent);
}

:where(.pl-page--platform-overview) /* Stats Bar */
.pl-stats-bar {
  background: var(--pl-primary);
  padding: 3rem 0;
}

:where(.pl-page--platform-overview) .pl-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

:where(.pl-page--platform-overview) .pl-stat {
  text-align: center;
}

:where(.pl-page--platform-overview) .pl-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: white;
  line-height: 1;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  :where(.pl-page--platform-overview) .pl-stat-value {
      font-size: 2.5rem;
    }
}

:where(.pl-page--platform-overview) .pl-stat-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

:where(.pl-page--platform-overview) /* Section Header */
.pl-section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
}

:where(.pl-page--platform-overview) .pl-section-header .pl-h2 {
  margin-bottom: 0.75rem;
}

:where(.pl-page--platform-overview) .pl-section-header .pl-lead {
  margin-bottom: 0;
}

:where(.pl-page--platform-overview) /* Workflow Section */
.pl-workflow-section {
  background: var(--pl-gray-50);
}

:where(.pl-page--platform-overview) .pl-workflow-timeline {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
}

:where(.pl-page--platform-overview) .pl-workflow-line {
  position: absolute;
  left: 20px;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: linear-gradient(180deg, var(--pl-primary) 0%, var(--pl-accent) 100%);
}

@media (max-width: 640px) {
  :where(.pl-page--platform-overview) .pl-workflow-line {
      left: 16px;
    }
}

:where(.pl-page--platform-overview) .pl-workflow-step {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem 0;
  position: relative;
}

:where(.pl-page--platform-overview) .pl-workflow-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pl-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  :where(.pl-page--platform-overview) .pl-workflow-number {
      width: 32px;
      height: 32px;
      font-size: 0.875rem;
    }
  :where(.pl-page--platform-overview) .pl-workflow-step {
      gap: 1rem;
    }
}

:where(.pl-page--platform-overview) .pl-workflow-content h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--pl-gray-800);
  margin: 0 0 0.375rem;
}

:where(.pl-page--platform-overview) .pl-workflow-content p {
  font-size: 0.9375rem;
  color: var(--pl-gray-500);
  margin: 0;
  line-height: 1.5;
}

:where(.pl-page--platform-overview) /* Enterprise Grid */
.pl-enterprise-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  :where(.pl-page--platform-overview) .pl-enterprise-grid {
      grid-template-columns: repeat(3, 1fr);
    }
}

:where(.pl-page--platform-overview) .pl-enterprise-feature {
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--pl-gray-50);
  border: 1px solid var(--pl-gray-200);
}

:where(.pl-page--platform-overview) .pl-enterprise-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pl-primary) 0%, var(--pl-primary-light) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

:where(.pl-page--platform-overview) .pl-enterprise-feature h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pl-gray-800);
  margin: 0 0 0.375rem;
}

:where(.pl-page--platform-overview) .pl-enterprise-feature p {
  font-size: 0.8125rem;
  color: var(--pl-gray-500);
  margin: 0;
  line-height: 1.5;
}

:where(.pl-page--platform-overview) .pl-enterprise-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pl-primary);
  text-decoration: none;
}

:where(.pl-page--platform-overview) .pl-enterprise-link:hover {
  text-decoration: underline;
}

:where(.pl-page--platform-overview) /* Testimonial Section */
.pl-testimonial-section {
  background: #003366; /* solid fallback so white text is always readable */
  background: linear-gradient(135deg, var(--pl-primary, #003366) 0%, var(--pl-primary-light, #004080) 100%);
}

:where(.pl-page--platform-overview) .pl-testimonial-card {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

:where(.pl-page--platform-overview) .pl-testimonial-card blockquote,
:where(.pl-page--platform-overview) .pl-testimonial-card cite strong {
  color: #fff;
}

:where(.pl-page--platform-overview) .pl-testimonial-quote {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 1rem;
}

:where(.pl-page--platform-overview) .pl-testimonial-card blockquote {
  font-size: 1.25rem;
  font-style: italic;
  color: white;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

@media (min-width: 768px) {
  :where(.pl-page--platform-overview) .pl-testimonial-card blockquote {
      font-size: 1.375rem;
    }
}

:where(.pl-page--platform-overview) .pl-testimonial-card cite {
  font-style: normal;
}

:where(.pl-page--platform-overview) .pl-testimonial-card cite strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.125rem;
}

:where(.pl-page--platform-overview) .pl-testimonial-card cite span {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

:where(.pl-page--platform-overview) /* Compare Cards */
.pl-compare-cards {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  :where(.pl-page--platform-overview) .pl-compare-cards {
      grid-template-columns: repeat(3, 1fr);
    }
}

:where(.pl-page--platform-overview) .pl-compare-card {
  display: block;
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--pl-gray-50);
  border: 1px solid var(--pl-gray-200);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

:where(.pl-page--platform-overview) .pl-compare-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 51, 102, 0.08);
  border-color: var(--pl-primary);
}

:where(.pl-page--platform-overview) .pl-compare-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--pl-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--pl-gray-400);
  margin-bottom: 1rem;
}

:where(.pl-page--platform-overview) .pl-compare-card:hover .pl-compare-card-icon {
  color: var(--pl-primary);
  border-color: var(--pl-primary);
}

:where(.pl-page--platform-overview) .pl-compare-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pl-gray-800);
  margin: 0 0 0.375rem;
}

:where(.pl-page--platform-overview) .pl-compare-card p {
  font-size: 0.875rem;
  color: var(--pl-gray-500);
  margin: 0 0 1rem;
  line-height: 1.5;
}

:where(.pl-page--platform-overview) .pl-compare-card-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pl-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

:where(.pl-page--platform-overview) .pl-compare-card:hover .pl-compare-card-link {
  gap: 0.5rem;
}

:where(.pl-page--platform-overview) .pl-platform-mockup {
  animation: fadeInUp 0.6s ease 0.2s forwards;
  opacity: 0;
}

:where(.pl-page--platform-overview) .pl-stat {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

:where(.pl-page--platform-overview) .pl-stat:nth-child(1) { animation-delay: 0.1s; }

:where(.pl-page--platform-overview) .pl-stat:nth-child(2) { animation-delay: 0.2s; }

:where(.pl-page--platform-overview) .pl-stat:nth-child(3) { animation-delay: 0.3s; }

:where(.pl-page--platform-overview) .pl-feature {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

:where(.pl-page--platform-overview) .pl-feature:nth-child(1) { animation-delay: 0.1s; }

:where(.pl-page--platform-overview) .pl-feature:nth-child(2) { animation-delay: 0.2s; }

:where(.pl-page--platform-overview) .pl-feature:nth-child(3) { animation-delay: 0.3s; }

:where(.pl-page--platform-overview) .pl-workflow-step {
  animation: fadeInUp 0.4s ease forwards;
  opacity: 0;
}

:where(.pl-page--platform-overview) .pl-workflow-step:nth-child(2) { animation-delay: 0.1s; }

:where(.pl-page--platform-overview) .pl-workflow-step:nth-child(3) { animation-delay: 0.2s; }

:where(.pl-page--platform-overview) .pl-workflow-step:nth-child(4) { animation-delay: 0.3s; }

:where(.pl-page--platform-overview) .pl-workflow-step:nth-child(5) { animation-delay: 0.4s; }

:where(.pl-page--platform-overview) .pl-workflow-step:nth-child(6) { animation-delay: 0.5s; }

:where(.pl-page--platform-overview) .pl-enterprise-feature {
  animation: fadeInUp 0.4s ease forwards;
  opacity: 0;
}

:where(.pl-page--platform-overview) .pl-enterprise-feature:nth-child(1) { animation-delay: 0.05s; }

:where(.pl-page--platform-overview) .pl-enterprise-feature:nth-child(2) { animation-delay: 0.1s; }

:where(.pl-page--platform-overview) .pl-enterprise-feature:nth-child(3) { animation-delay: 0.15s; }

:where(.pl-page--platform-overview) .pl-enterprise-feature:nth-child(4) { animation-delay: 0.2s; }

:where(.pl-page--platform-overview) .pl-enterprise-feature:nth-child(5) { animation-delay: 0.25s; }

:where(.pl-page--platform-overview) .pl-enterprise-feature:nth-child(6) { animation-delay: 0.3s; }

:where(.pl-page--platform-overview) .pl-compare-card {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

:where(.pl-page--platform-overview) .pl-compare-card:nth-child(1) { animation-delay: 0.1s; }

:where(.pl-page--platform-overview) .pl-compare-card:nth-child(2) { animation-delay: 0.2s; }

:where(.pl-page--platform-overview) .pl-compare-card:nth-child(3) { animation-delay: 0.3s; }


/* ============ 2. PAGE: Platform solutions (.pl-page--platform-solutions) ============ */

:where(.pl-page--platform-solutions) /* Solution Blocks */
.pl-solution-block {
  display: grid;
  gap: 4rem;
  padding: 4rem 0;
  border-bottom: 1px solid var(--pl-gray-100);
}

:where(.pl-page--platform-solutions) .pl-solution-block:last-child {
  border-bottom: none;
}

@media (min-width: 1024px) {
  :where(.pl-page--platform-solutions) .pl-solution-block {
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      padding: 5rem 0;
    }
}

:where(.pl-page--platform-solutions) .pl-solution-problem-label,
:where(.pl-page--platform-solutions) .pl-solution-answer-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

:where(.pl-page--platform-solutions) .pl-solution-problem-label {
  color: var(--pl-gray-400);
}

:where(.pl-page--platform-solutions) .pl-solution-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--pl-gray-100);
  border-radius: 50%;
  font-size: 0.6875rem;
  color: var(--pl-gray-500);
  margin-right: 0.25rem;
}

:where(.pl-page--platform-solutions) .pl-solution-answer-label {
  color: #16a34a;
}

:where(.pl-page--platform-solutions) .pl-solution-answer-label i {
  font-size: 0.875rem;
}

:where(.pl-page--platform-solutions) .pl-solution-problem .pl-h2 {
  margin-bottom: 1rem;
}

:where(.pl-page--platform-solutions) .pl-solution-problem .pl-lead {
  margin-bottom: 1.5rem;
}

:where(.pl-page--platform-solutions) .pl-pain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

:where(.pl-page--platform-solutions) .pl-pain-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--pl-gray-600);
}

:where(.pl-page--platform-solutions) .pl-pain-list i {
  color: #dc2626;
  font-size: 0.75rem;
}

:where(.pl-page--platform-solutions) .pl-solution-answer {
  background: var(--pl-gray-50);
  border-radius: 16px;
  padding: 2rem;
}

@media (min-width: 768px) {
  :where(.pl-page--platform-solutions) .pl-solution-answer {
      padding: 2.5rem;
    }
}

:where(.pl-page--platform-solutions) .pl-solution-answer .pl-h3 {
  margin-bottom: 0.75rem;
}

:where(.pl-page--platform-solutions) .pl-solution-answer > p {
  font-size: 0.9375rem;
  color: var(--pl-gray-600);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

:where(.pl-page--platform-solutions) .pl-solution-features {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  :where(.pl-page--platform-solutions) .pl-solution-features {
      grid-template-columns: 1fr 1fr;
    }
}

:where(.pl-page--platform-solutions) .pl-solution-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--pl-gray-700);
}

:where(.pl-page--platform-solutions) .pl-solution-feature i {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  color: var(--pl-primary);
  font-size: 0.875rem;
  flex-shrink: 0;
}

:where(.pl-page--platform-solutions) .pl-solution-outcome {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pl-gray-200);
}

:where(.pl-page--platform-solutions) .pl-solution-outcome-stat {
  font-size: 2rem;
  font-weight: 700;
  color: var(--pl-primary);
  line-height: 1;
}

:where(.pl-page--platform-solutions) .pl-solution-outcome-text {
  font-size: 0.9375rem;
  color: var(--pl-gray-500);
}

:where(.pl-page--platform-solutions) /* Use Cases Section */
.pl-use-cases-section {
  background: var(--pl-gray-50);
}

:where(.pl-page--platform-solutions) .pl-use-cases-header {
  text-align: center;
  margin-bottom: 3rem;
}

:where(.pl-page--platform-solutions) .pl-use-cases-header .pl-h2 {
  margin-bottom: 0;
}

:where(.pl-page--platform-solutions) .pl-use-cases-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  :where(.pl-page--platform-solutions) .pl-use-cases-grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
  :where(.pl-page--platform-solutions) .pl-use-cases-grid {
      grid-template-columns: repeat(3, 1fr);
    }
}

:where(.pl-page--platform-solutions) .pl-use-case {
  background: white;
  border-radius: 12px;
  padding: 1.75rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

:where(.pl-page--platform-solutions) .pl-use-case:hover {
  box-shadow: 0 8px 24px rgba(0, 51, 102, 0.08);
  transform: translateY(-2px);
}

:where(.pl-page--platform-solutions) .pl-use-case-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pl-primary) 0%, var(--pl-primary-light) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
}

:where(.pl-page--platform-solutions) .pl-use-case h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pl-primary);
  margin: 0 0 0.5rem;
}

:where(.pl-page--platform-solutions) .pl-use-case p {
  font-size: 0.9375rem;
  color: var(--pl-gray-500);
  line-height: 1.5;
  margin: 0;
}

:where(.pl-page--platform-solutions) /* Solutions Testimonial */
.pl-solutions-testimonial {
  max-width: 800px;
  margin: 0 auto;
}

:where(.pl-page--platform-solutions) .pl-solutions-testimonial-content {
  text-align: center;
  padding: 3rem;
  background: var(--pl-gray-50);
  border-radius: 16px;
  position: relative;
}

:where(.pl-page--platform-solutions) .pl-solutions-testimonial-content::before {
  content: '"';
  position: absolute;
  top: 1.5rem;
  left: 2rem;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--pl-gray-200);
}

:where(.pl-page--platform-solutions) .pl-solutions-testimonial blockquote {
  font-size: 1.25rem;
  color: var(--pl-gray-700);
  line-height: 1.7;
  margin: 0 0 1.5rem;
  position: relative;
  z-index: 1;
  font-style: italic;
}

@media (min-width: 768px) {
  :where(.pl-page--platform-solutions) .pl-solutions-testimonial blockquote {
      font-size: 1.375rem;
    }
}

:where(.pl-page--platform-solutions) .pl-solutions-testimonial .pl-testimonial-author {
  justify-content: center;
}

:where(.pl-page--platform-solutions) /* Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:where(.pl-page--platform-solutions) .pl-hero-content {
  animation: fadeInUp 0.6s ease forwards;
}

:where(.pl-page--platform-solutions) .pl-solution-block {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

:where(.pl-page--platform-solutions) .pl-solution-block:nth-child(1) { animation-delay: 0.1s; }

:where(.pl-page--platform-solutions) .pl-solution-block:nth-child(2) { animation-delay: 0.15s; }

:where(.pl-page--platform-solutions) .pl-solution-block:nth-child(3) { animation-delay: 0.2s; }

:where(.pl-page--platform-solutions) .pl-solution-block:nth-child(4) { animation-delay: 0.25s; }

:where(.pl-page--platform-solutions) .pl-use-case {
  animation: fadeInUp 0.4s ease forwards;
  opacity: 0;
}

:where(.pl-page--platform-solutions) .pl-use-case:nth-child(1) { animation-delay: 0.1s; }

:where(.pl-page--platform-solutions) .pl-use-case:nth-child(2) { animation-delay: 0.15s; }

:where(.pl-page--platform-solutions) .pl-use-case:nth-child(3) { animation-delay: 0.2s; }

:where(.pl-page--platform-solutions) .pl-use-case:nth-child(4) { animation-delay: 0.25s; }

:where(.pl-page--platform-solutions) .pl-use-case:nth-child(5) { animation-delay: 0.3s; }

:where(.pl-page--platform-solutions) .pl-use-case:nth-child(6) { animation-delay: 0.35s; }


/* ============ 2. PAGE: How We Work (.pl-page--how-we-work) ============ */

:where(.pl-page--how-we-work) /* Timeline Bar */
.pl-timeline-bar {
  max-width: 900px;
  margin: 0 auto;
}

:where(.pl-page--how-we-work) .pl-timeline-track {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 1rem;
}

:where(.pl-page--how-we-work) .pl-timeline-track::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 60px;
  right: 60px;
  height: 2px;
  background: var(--pl-gray-200);
}

:where(.pl-page--how-we-work) .pl-timeline-milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

:where(.pl-page--how-we-work) .pl-timeline-dot-lg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pl-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

:where(.pl-page--how-we-work) .pl-timeline-label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--pl-primary);
  text-align: center;
}

:where(.pl-page--how-we-work) .pl-timeline-duration {
  font-size: 0.8125rem;
  color: var(--pl-gray-500);
  margin-top: 0.25rem;
}

@media (max-width: 640px) {
  :where(.pl-page--how-we-work) .pl-timeline-track {
      flex-direction: column;
      gap: 1.5rem;
      align-items: flex-start;
    }
  :where(.pl-page--how-we-work) .pl-timeline-track::before {
      top: 20px;
      left: 19px;
      right: auto;
      width: 2px;
      height: calc(100% - 40px);
    }
  :where(.pl-page--how-we-work) .pl-timeline-milestone {
      flex-direction: row;
      gap: 1rem;
    }
  :where(.pl-page--how-we-work) .pl-timeline-dot-lg {
      flex-shrink: 0;
      margin-bottom: 0;
    }
  :where(.pl-page--how-we-work) .pl-timeline-label,
  :where(.pl-page--how-we-work) .pl-timeline-duration {
      text-align: left;
    }
  :where(.pl-page--how-we-work) .pl-timeline-duration {
      margin-top: 0;
      margin-left: 0.5rem;
    }
}

:where(.pl-page--how-we-work) /* Step Sections */
.pl-step-grid {
  display: grid;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  :where(.pl-page--how-we-work) .pl-step-grid {
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
    }
}

:where(.pl-page--how-we-work) .pl-step-grid-reverse .pl-step-content {
  order: 1;
}

:where(.pl-page--how-we-work) .pl-step-grid-reverse .pl-step-visual {
  order: 2;
}

@media (min-width: 1024px) {
  :where(.pl-page--how-we-work) .pl-step-grid-reverse .pl-step-content {
      order: 2;
    }
  :where(.pl-page--how-we-work) .pl-step-grid-reverse .pl-step-visual {
      order: 1;
    }
}

:where(.pl-page--how-we-work) .pl-step-badge {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: var(--pl-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  margin-bottom: 1rem;
}

:where(.pl-page--how-we-work) .pl-step-duration {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--pl-gray-500);
  margin-bottom: 1rem;
}

:where(.pl-page--how-we-work) .pl-step-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

:where(.pl-page--how-we-work) .pl-step-detail {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

:where(.pl-page--how-we-work) .pl-step-detail-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--pl-gray-100);
  color: var(--pl-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.125rem;
}

:where(.pl-page--how-we-work) .pl-step-detail h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pl-primary);
  margin: 0 0 0.25rem;
}

:where(.pl-page--how-we-work) .pl-step-detail p {
  font-size: 0.9375rem;
  color: var(--pl-gray-600);
  line-height: 1.5;
  margin: 0;
}

:where(.pl-page--how-we-work) .pl-step-visual {
  display: flex;
  justify-content: center;
}

:where(.pl-page--how-we-work) .pl-step-img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

:where(.pl-page--how-we-work) /* Difference Cards */
.pl-difference-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  :where(.pl-page--how-we-work) .pl-difference-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
}

:where(.pl-page--how-we-work) .pl-difference-card {
  padding: 2rem;
  background: var(--pl-gray-50);
  border-radius: 12px;
}

:where(.pl-page--how-we-work) .pl-difference-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--pl-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

:where(.pl-page--how-we-work) .pl-difference-card .pl-h3 {
  margin-bottom: 0.75rem;
}

:where(.pl-page--how-we-work) .pl-difference-card p {
  font-size: 0.9375rem;
  color: var(--pl-gray-600);
  line-height: 1.6;
  margin: 0;
}

:where(.pl-page--how-we-work) /* FAQ */
.pl-faq-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  :where(.pl-page--how-we-work) .pl-faq-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
}

:where(.pl-page--how-we-work) .pl-faq-item {
  padding: 1.5rem;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--pl-gray-200);
}

:where(.pl-page--how-we-work) .pl-faq-question {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pl-primary);
  margin: 0 0 0.75rem;
}

:where(.pl-page--how-we-work) .pl-faq-answer {
  font-size: 0.9375rem;
  color: var(--pl-gray-600);
  line-height: 1.6;
  margin: 0;
}

:where(.pl-page--how-we-work) /* Featured Testimonial */
.pl-testimonial-featured {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

:where(.pl-page--how-we-work) .pl-testimonial-featured-content {
  padding: 3rem;
  background: var(--pl-gray-50);
  border-radius: 16px;
  position: relative;
}

:where(.pl-page--how-we-work) .pl-quote-mark {
  font-family: Georgia, serif;
  font-size: 6rem;
  line-height: 1;
  color: var(--pl-gray-200);
  position: absolute;
  top: 1rem;
  left: 2rem;
}

:where(.pl-page--how-we-work) .pl-testimonial-featured-quote {
  font-size: 1.25rem;
  color: var(--pl-gray-700);
  line-height: 1.7;
  margin: 0 0 2rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  :where(.pl-page--how-we-work) .pl-testimonial-featured-quote {
      font-size: 1.375rem;
    }
}

:where(.pl-page--how-we-work) .pl-testimonial-featured .pl-testimonial-author {
  justify-content: center;
}


/* ============ 2. PAGE: Case Studies (.pl-page--case-studies) ============ */

:where(.pl-page--case-studies) /* Case Studies Hero */
.pl-case-studies-hero {
  padding: 8rem 0 4rem;
  background: linear-gradient(180deg, var(--pl-gray-50) 0%, white 100%);
}

:where(.pl-page--case-studies) .pl-case-studies-hero-content {
  max-width: 600px;
  margin-bottom: 3rem;
}

:where(.pl-page--case-studies) .pl-case-studies-hero .pl-h1 {
  margin-bottom: 1rem;
}

:where(.pl-page--case-studies) .pl-case-studies-hero .pl-lead {
  margin-bottom: 0;
}

:where(.pl-page--case-studies) /* Stats Row */
.pl-case-studies-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 51, 102, 0.06);
}

@media (min-width: 768px) {
  :where(.pl-page--case-studies) .pl-case-studies-stats {
      gap: 2rem;
      padding: 2.5rem 3rem;
    }
}

:where(.pl-page--case-studies) .pl-case-stat {
  text-align: center;
}

:where(.pl-page--case-studies) .pl-case-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--pl-primary);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
  :where(.pl-page--case-studies) .pl-case-stat-value {
      font-size: 2.5rem;
    }
}

:where(.pl-page--case-studies) .pl-case-stat-label {
  font-size: 0.8125rem;
  color: var(--pl-gray-500);
}

:where(.pl-page--case-studies) /* Case Studies Grid */
.pl-case-studies-grid {
  display: grid;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  :where(.pl-page--case-studies) .pl-case-studies-grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

:where(.pl-page--case-studies) /* Case Card */
.pl-case-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--pl-gray-100);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

:where(.pl-page--case-studies) .pl-case-card:hover {
  box-shadow: 0 12px 32px rgba(0, 51, 102, 0.1);
  transform: translateY(-4px);
}

:where(.pl-page--case-studies) .pl-case-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--pl-primary) 0%, #001a33 100%);
  overflow: hidden;
}

:where(.pl-page--case-studies) .pl-case-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(.pl-page--case-studies) .pl-case-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pl-primary) 0%, #001a33 100%);
}

:where(.pl-page--case-studies) .pl-case-card-logo {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

:where(.pl-page--case-studies) .pl-case-card-industry {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.375rem 0.75rem;
  background: white;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--pl-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

:where(.pl-page--case-studies) .pl-case-card-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

:where(.pl-page--case-studies) .pl-case-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pl-primary);
  margin: 0 0 0.375rem;
  line-height: 1.3;
}

:where(.pl-page--case-studies) .pl-case-card-subtitle {
  font-size: 0.9375rem;
  color: var(--pl-gray-500);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

:where(.pl-page--case-studies) .pl-case-card-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--pl-gray-100);
}

:where(.pl-page--case-studies) .pl-case-result {
  text-align: center;
}

:where(.pl-page--case-studies) .pl-case-result-metric {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pl-primary);
  line-height: 1.2;
}

:where(.pl-page--case-studies) .pl-case-result-label {
  font-size: 0.6875rem;
  color: var(--pl-gray-500);
  line-height: 1.3;
  margin-top: 0.125rem;
}

:where(.pl-page--case-studies) .pl-case-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pl-primary);
  text-decoration: none;
  transition: gap 0.2s ease;
  margin-top: auto;
}

:where(.pl-page--case-studies) .pl-case-card-link:hover {
  gap: 0.75rem;
}

:where(.pl-page--case-studies) .pl-case-card-link svg {
  transition: transform 0.2s ease;
}

:where(.pl-page--case-studies) .pl-case-card-link:hover svg {
  transform: translateX(2px);
}

:where(.pl-page--case-studies) /* Empty State */
.pl-case-studies-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--pl-gray-50);
  border-radius: 16px;
}

:where(.pl-page--case-studies) .pl-case-studies-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--pl-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--pl-gray-400);
}

:where(.pl-page--case-studies) .pl-case-studies-empty h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pl-primary);
  margin: 0 0 0.5rem;
}

:where(.pl-page--case-studies) .pl-case-studies-empty p {
  font-size: 1rem;
  color: var(--pl-gray-500);
  margin: 0 0 1.5rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

:where(.pl-page--case-studies) /* Industries Section */
.pl-industries-section {
  background: var(--pl-gray-50);
}

:where(.pl-page--case-studies) .pl-industries-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
}

:where(.pl-page--case-studies) .pl-industries-header .pl-h2 {
  margin-bottom: 0;
}

:where(.pl-page--case-studies) .pl-industries-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  :where(.pl-page--case-studies) .pl-industries-grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
  :where(.pl-page--case-studies) .pl-industries-grid {
      grid-template-columns: repeat(3, 1fr);
    }
}

:where(.pl-page--case-studies) .pl-industry {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}

:where(.pl-page--case-studies) .pl-industry-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  border-radius: 12px;
  background: var(--pl-gray-100);
  color: var(--pl-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

:where(.pl-page--case-studies) .pl-industry h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pl-primary);
  margin: 0 0 0.375rem;
}

:where(.pl-page--case-studies) .pl-industry p {
  font-size: 0.875rem;
  color: var(--pl-gray-500);
  margin: 0;
  line-height: 1.4;
}

:where(.pl-page--case-studies) /* Testimonial Strip */
.pl-testimonial-strip {
  background: var(--pl-primary);
  padding: 4rem 0;
}

:where(.pl-page--case-studies) .pl-testimonial-strip-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

:where(.pl-page--case-studies) .pl-testimonial-strip blockquote {
  font-size: 1.25rem;
  font-style: italic;
  color: white;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

@media (min-width: 768px) {
  :where(.pl-page--case-studies) .pl-testimonial-strip blockquote {
      font-size: 1.5rem;
    }
}

:where(.pl-page--case-studies) .pl-testimonial-strip cite {
  font-style: normal;
}

:where(.pl-page--case-studies) .pl-testimonial-strip cite strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.125rem;
}

:where(.pl-page--case-studies) .pl-testimonial-strip cite span {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

:where(.pl-page--case-studies) .pl-case-studies-hero-content {
  animation: fadeInUp 0.5s ease forwards;
}

:where(.pl-page--case-studies) .pl-case-studies-stats {
  animation: fadeInUp 0.5s ease 0.1s forwards;
  opacity: 0;
}

:where(.pl-page--case-studies) .pl-case-card {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

:where(.pl-page--case-studies) .pl-case-card:nth-child(1) { animation-delay: 0.15s; }

:where(.pl-page--case-studies) .pl-case-card:nth-child(2) { animation-delay: 0.25s; }

:where(.pl-page--case-studies) .pl-case-card:nth-child(3) { animation-delay: 0.35s; }

:where(.pl-page--case-studies) .pl-case-card:nth-child(4) { animation-delay: 0.45s; }

:where(.pl-page--case-studies) .pl-case-card:nth-child(5) { animation-delay: 0.55s; }

:where(.pl-page--case-studies) .pl-case-card:nth-child(6) { animation-delay: 0.65s; }

:where(.pl-page--case-studies) .pl-industry {
  animation: fadeInUp 0.4s ease forwards;
  opacity: 0;
}

:where(.pl-page--case-studies) .pl-industry:nth-child(1) { animation-delay: 0.1s; }

:where(.pl-page--case-studies) .pl-industry:nth-child(2) { animation-delay: 0.15s; }

:where(.pl-page--case-studies) .pl-industry:nth-child(3) { animation-delay: 0.2s; }

:where(.pl-page--case-studies) .pl-industry:nth-child(4) { animation-delay: 0.25s; }

:where(.pl-page--case-studies) .pl-industry:nth-child(5) { animation-delay: 0.3s; }

:where(.pl-page--case-studies) .pl-industry:nth-child(6) { animation-delay: 0.35s; }


/* ============ 2. PAGE: Contact (.pl-page--contact) ============ */

:where(.pl-page--contact) /* Contact Page Styles */
.pl-contact-hero {
  position: relative;
  padding: 8rem 0 6rem;
  background: linear-gradient(180deg, var(--pl-gray-50) 0%, white 100%);
  overflow: hidden;
  min-height: calc(100vh - 72px);
}

:where(.pl-page--contact) .pl-contact-layout {
  display: grid;
  gap: 4rem;
  align-items: start;
}

@media (min-width: 1024px) {
  :where(.pl-page--contact) .pl-contact-layout {
      grid-template-columns: 1.1fr 0.9fr;
      gap: 6rem;
    }
}

:where(.pl-page--contact) /* Form Column */
.pl-contact-form-column {
  position: relative;
  z-index: 1;
}

:where(.pl-page--contact) .pl-contact-form-header {
  margin-bottom: 2.5rem;
}

:where(.pl-page--contact) .pl-contact-form-header .pl-h2 {
  margin-bottom: 1rem;
}

:where(.pl-page--contact) .pl-contact-intro {
  font-size: 1.0625rem;
  color: var(--pl-gray-500);
  line-height: 1.6;
  max-width: 480px;
}

:where(.pl-page--contact) /* Form Styles */
.pl-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

:where(.pl-page--contact) .pl-form-row {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  :where(.pl-page--contact) .pl-form-row {
      grid-template-columns: 1fr 1fr;
    }
}

:where(.pl-page--contact) .pl-form-group {
  position: relative;
}

:where(.pl-page--contact) .pl-form-group-full {
  grid-column: 1 / -1;
}

:where(.pl-page--contact) .pl-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pl-gray-700);
  margin-bottom: 0.5rem;
}

:where(.pl-page--contact) .pl-form-optional {
  font-weight: 400;
  color: var(--pl-gray-400);
}

:where(.pl-page--contact) .pl-form-input,
:where(.pl-page--contact) .pl-form-select,
:where(.pl-page--contact) .pl-form-textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--pl-gray-900);
  background: white;
  border: 1px solid var(--pl-gray-200);
  border-radius: 8px;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

:where(.pl-page--contact) .pl-form-input::placeholder,
:where(.pl-page--contact) .pl-form-textarea::placeholder {
  color: var(--pl-gray-400);
}

:where(.pl-page--contact) .pl-form-input:hover,
:where(.pl-page--contact) .pl-form-select:hover,
:where(.pl-page--contact) .pl-form-textarea:hover {
  border-color: var(--pl-gray-300);
}

:where(.pl-page--contact) .pl-form-input:focus,
:where(.pl-page--contact) .pl-form-select:focus,
:where(.pl-page--contact) .pl-form-textarea:focus {
  outline: none;
  border-color: var(--pl-primary);
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

:where(.pl-page--contact) .pl-form-select {
  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='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

:where(.pl-page--contact) .pl-form-textarea {
  resize: vertical;
  min-height: 120px;
}

:where(.pl-page--contact) /* Focus Line Animation */
.pl-form-focus-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--pl-primary);
  border-radius: 0 0 8px 8px;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

:where(.pl-page--contact) .pl-form-group:focus-within .pl-form-focus-line {
  width: calc(100% - 2px);
  left: 1px;
  transform: translateX(0);
}

:where(.pl-page--contact) /* Submit Area */
.pl-form-submit {
  margin-top: 0.5rem;
}

:where(.pl-page--contact) .pl-btn-submit {
  width: 100%;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  font-size: 1rem;
}

:where(.pl-page--contact) .pl-btn-submit .pl-btn-icon {
  transition: transform 0.2s ease;
}

:where(.pl-page--contact) .pl-btn-submit:hover .pl-btn-icon {
  transform: translateX(4px);
}

:where(.pl-page--contact) .pl-form-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--pl-gray-400);
}

:where(.pl-page--contact) .pl-form-privacy i {
  font-size: 0.75rem;
}

:where(.pl-page--contact) /* Info Column */
.pl-contact-info-column {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  :where(.pl-page--contact) .pl-contact-info-column {
      position: sticky;
      top: 100px;
    }
}

:where(.pl-page--contact) /* Quick Book Card */
.pl-quick-book-card {
  position: relative;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 51, 102, 0.08);
  margin-bottom: 2.5rem;
}

:where(.pl-page--contact) .pl-quick-book-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pl-secondary) 0%, #ff6b6b 100%);
}

:where(.pl-page--contact) .pl-quick-book-content {
  padding: 2rem;
}

:where(.pl-page--contact) .pl-quick-book-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pl-secondary) 0%, #ff6b6b 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

:where(.pl-page--contact) .pl-quick-book-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--pl-primary);
  margin: 0 0 0.5rem;
}

:where(.pl-page--contact) .pl-quick-book-card p {
  font-size: 0.9375rem;
  color: var(--pl-gray-500);
  line-height: 1.5;
  margin: 0 0 1.25rem;
}

:where(.pl-page--contact) .pl-btn-book {
  width: 100%;
  justify-content: center;
  gap: 0.5rem;
}

:where(.pl-page--contact) /* What to Expect */
.pl-expect-section {
  margin-bottom: 2.5rem;
}

:where(.pl-page--contact) .pl-expect-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pl-gray-400);
  margin: 0 0 1.25rem;
}

:where(.pl-page--contact) .pl-expect-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

:where(.pl-page--contact) .pl-expect-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

:where(.pl-page--contact) .pl-expect-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pl-gray-100);
  color: var(--pl-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  flex-shrink: 0;
}

:where(.pl-page--contact) .pl-expect-content strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pl-gray-900);
  margin-bottom: 0.125rem;
}

:where(.pl-page--contact) .pl-expect-content p {
  font-size: 0.875rem;
  color: var(--pl-gray-500);
  line-height: 1.5;
  margin: 0;
}

:where(.pl-page--contact) /* Trust Signals */
.pl-trust-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pl-gray-100);
}

:where(.pl-page--contact) .pl-trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--pl-gray-500);
}

:where(.pl-page--contact) .pl-trust-item i {
  color: var(--pl-primary);
  font-size: 0.875rem;
}

:where(.pl-page--contact) /* Decorative Elements */
.pl-contact-decor {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

:where(.pl-page--contact) .pl-contact-decor-1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -100px;
  background: radial-gradient(circle, rgba(0, 51, 102, 0.03) 0%, transparent 70%);
}

:where(.pl-page--contact) .pl-contact-decor-2 {
  width: 300px;
  height: 300px;
  bottom: -50px;
  left: -100px;
  background: radial-gradient(circle, rgba(255, 51, 51, 0.04) 0%, transparent 70%);
}

:where(.pl-page--contact) .pl-contact-form-header {
  animation: fadeInUp 0.5s ease forwards;
}

:where(.pl-page--contact) .pl-contact-form {
  animation: fadeInUp 0.5s ease 0.1s forwards;
  opacity: 0;
}

:where(.pl-page--contact) .pl-quick-book-card {
  animation: fadeInUp 0.5s ease 0.2s forwards;
  opacity: 0;
}

:where(.pl-page--contact) .pl-expect-section {
  animation: fadeInUp 0.5s ease 0.3s forwards;
  opacity: 0;
}

:where(.pl-page--contact) .pl-trust-signals {
  animation: fadeInUp 0.5s ease 0.4s forwards;
  opacity: 0;
}

:where(.pl-page--contact) /* Form field stagger */
.pl-form-group {
  animation: fadeInUp 0.4s ease forwards;
  opacity: 0;
}

:where(.pl-page--contact) .pl-form-row:nth-child(1) .pl-form-group:nth-child(1) { animation-delay: 0.15s; }

:where(.pl-page--contact) .pl-form-row:nth-child(1) .pl-form-group:nth-child(2) { animation-delay: 0.2s; }

:where(.pl-page--contact) .pl-form-row:nth-child(2) .pl-form-group:nth-child(1) { animation-delay: 0.25s; }

:where(.pl-page--contact) .pl-form-row:nth-child(2) .pl-form-group:nth-child(2) { animation-delay: 0.3s; }

:where(.pl-page--contact) .pl-form-group-full:nth-child(3) { animation-delay: 0.35s; }

:where(.pl-page--contact) .pl-form-group-full:nth-child(4) { animation-delay: 0.4s; }

:where(.pl-page--contact) .pl-form-submit { animation: fadeInUp 0.4s ease 0.45s forwards; opacity: 0; }


/* ============ 3. Features: pillar navigation (partial) ============ */

@media (min-width: 640px) {
    .pl-nav-grid {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }

@media (min-width: 1024px) {
    .pl-nav-grid {
      grid-template-columns: repeat(5, 1fr) !important;
    }
  }


/* ============ 3. Features: deep-dive page (partial) ============ */



/* ============ 3. Internal: ELIS branding page ============ */

.brand-page { max-width: 1200px; margin: 0 auto; padding: 60px 24px 100px; }

.brand-header { margin-bottom: 60px; }

.brand-header h1 { font-family: 'Inter', sans-serif; font-size: 2.5rem; font-weight: 700; color: #003366; margin-bottom: 8px; }

.brand-header p { font-size: 1.125rem; color: #64748b; max-width: 640px; line-height: 1.6; }

.brand-meta { display: flex; gap: 32px; margin-top: 24px; padding: 20px 24px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; }

.brand-meta-item { display: flex; flex-direction: column; gap: 2px; }

.brand-meta-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; }

.brand-meta-value { font-size: 0.875rem; font-weight: 500; color: #1e293b; }

.brand-colors { display: flex; gap: 12px; align-items: center; }

.brand-swatch { width: 24px; height: 24px; border-radius: 6px; border: 2px solid #e2e8f0; }

.options-grid { display: flex; flex-direction: column; gap: 48px; }

.option-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; transition: box-shadow 0.2s; }

.option-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08); }

.option-header { padding: 24px 32px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; }

.option-number { font-size: 0.75rem; font-weight: 700; color: #FF3333; text-transform: uppercase; letter-spacing: 0.1em; }

.option-title { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 600; color: #003366; margin-top: 4px; }

.option-style { font-size: 0.75rem; padding: 4px 12px; border-radius: 100px; background: #f1f5f9; color: #64748b; font-weight: 500; }

.option-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

.option-preview { padding: 40px; display: flex; align-items: center; justify-content: center; background: #ffffff; min-height: 300px; }

.option-preview img { max-width: 100%; max-height: 280px; object-fit: contain; }

.option-preview-dark { background: #003366; }

.option-details { padding: 32px; display: flex; flex-direction: column; gap: 20px; border-left: 1px solid #f1f5f9; }

.option-concept { font-size: 0.8125rem; font-weight: 600; color: #003366; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }

.option-desc { font-size: 0.9375rem; color: #475569; line-height: 1.7; }

.option-pros { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.option-pros li { font-size: 0.875rem; color: #334155; padding-left: 24px; position: relative; line-height: 1.5; }

.option-pros li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: #e0f2fe; border: 2px solid #0ea5e9; }

.option-cons li::before { background: #fef3c7; border-color: #f59e0b; }

.option-usage { display: flex; flex-wrap: wrap; gap: 6px; }

.option-tag { font-size: 0.75rem; padding: 4px 10px; border-radius: 6px; background: #f0fdf4; color: #15803d; font-weight: 500; }

.option-tag-warn { background: #fffbeb; color: #b45309; }

.section-divider { text-align: center; padding: 48px 0 16px; }

.section-divider h2 { font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 700; color: #003366; }

.section-divider p { font-size: 0.9375rem; color: #64748b; margin-top: 8px; }

.nav-preview-section { margin-top: 64px; }

.nav-mockup { background: #003366; border-radius: 12px; padding: 16px 32px; display: flex; align-items: center; gap: 40px; }

.nav-logo-slot { height: 40px; display: flex; align-items: center; gap: 12px; }

.nav-logo-slot img { height: 36px; object-fit: contain; filter: brightness(0) invert(1); }

.nav-links { display: flex; gap: 24px; }

.nav-links span { color: rgba(255,255,255,0.7); font-size: 0.875rem; font-weight: 500; }

.nav-links span:first-child { color: #fff; }

@media (max-width: 768px) {
      .option-body { grid-template-columns: 1fr; }
      .option-details { border-left: none; border-top: 1px solid #f1f5f9; }
      .brand-meta { flex-direction: column; gap: 16px; }
    }

/* ============================================================================
 * 4. INLINE-ATTRIBUTE SWEEP (audit #45, P4 — Private Label views)
 *
 * These rules replace 87 static `style="…"` ATTRIBUTES that were written on the
 * PL templates. Unlike section 2 above (lifted <style> blocks, preserved at zero
 * specificity with :where()), an inline attribute outranks every stylesheet rule,
 * so these selectors are deliberately NOT wrapped in :where() — they must keep
 * real specificity or they would lose to the design-system rule they replace.
 *
 * They rely on this file being linked AFTER private_label/application.css
 * (layouts/private_label.html.erb) — that source order is what lets a single-class
 * rule here override e.g. `.pl-section { padding: 6rem 0 }` or
 * `.pl-hero-content { max-width: none }`, exactly as the inline attribute did.
 *
 * Organization mirrors the file above: 4.1 SHARED, 4.2 PER-PAGE, 4.3 UNSCOPED
 * (partials that render on many pages + the internal brand-* page).
 * ==========================================================================*/

/* ============ 4.1 SHARED (P4) ============ */

/* --- Section surface --- *
 * Was `style="background: …"` on <section class="pl-section">.
 * white:  case_studies, vs_dev_shops, vs_excel, vs_qualtrics, how_we_work,
 *         platform_overview, platform_solutions
 * gray:   home, how_we_work, features/_pillar_navigation
 * navy:   platform_overview only, kept with the family so the set stays findable */
.pl-section-white {
  background: white;
}

.pl-section-gray {
  background: var(--pl-gray-50);
}

.pl-section-navy {
  background: var(--pl-primary);
}

/* --- Section / hero spacing overrides --- *
 * Longhand overrides of the `.pl-section` / `.pl-hero` padding shorthands
 * (application.css, incl. its md: media queries) — same effect the inline
 * attributes had, so they are unconditional here too. */
.pl-section-pt-5 {
  padding-top: 5rem;
}

.pl-section-pt-3 {
  padding-top: 3rem;
}

.pl-section-py-4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.pl-hero-pb-3 {
  padding-bottom: 3rem;
}

/* Centred trailing action row under a section's content grid (home, x2). */
.pl-section-action {
  margin-top: 3rem;
}

/* --- Single-column ("no visual") hero --- *
 * features/index, how_we_work, platform/overview, platform/solutions.
 * Overrides the 1024px `.pl-hero-grid { grid-template-columns: 1fr auto }`
 * while deliberately leaving that breakpoint's `gap: 1rem` in place — the
 * inline attribute set grid-template-columns only. */
.pl-hero-grid-single {
  grid-template-columns: 1fr;
}

/* Centred hero copy (features/index, how_we_work). */
.pl-hero-content-centered {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* Left-aligned but width-capped hero copy (platform/overview). */
.pl-hero-content-narrow {
  max-width: 800px;
}

.pl-hero-actions-centered {
  justify-content: center;
}


/* ============ 4.2 PAGE: Compare: vs Excel (.pl-page--vs-excel) ============ */

/* The "result" slot normally holds a big number; on this page it holds a
 * phrase, at a smaller size. Page-scoped so it deterministically outranks
 * `:where(.pl-page--vs-excel) .pl-time-total-number { font-size: 3.5rem }`
 * on the same element rather than relying on source order alone. */
.pl-page--vs-excel .pl-time-total-phrase {
  font-size: 2rem;
}


/* ============ 4.2 PAGE: Compare: vs Qualtrics (.pl-page--vs-qualtrics) ============ */

/* Letter mark inside .pl-compare-logo (the "Q" tile). */
.pl-compare-logo-initial {
  font-weight: 700;
  font-size: 0.875rem;
}


/* ============ 4.2 PAGE: Platform overview (.pl-page--platform-overview) ============ */

/* Testimonial on the navy band. Deliberately its OWN namespace: the shared
 * .pl-testimonial-* rules are dark-on-light and would render it white-on-white
 * (the view carried a comment saying exactly that, hence the original inlining). */
.pl-inverse-quote {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.pl-inverse-quote-mark {
  font-size: 2.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 1rem;
}

.pl-inverse-quote-text {
  font-size: 1.375rem;
  font-style: italic;
  color: #fff;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.pl-inverse-quote-cite {
  font-style: normal;
}

.pl-inverse-quote-name {
  display: block;
  color: #fff;
  font-weight: 600;
}

.pl-inverse-quote-role {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
}


/* ============ 4.2 PAGE: How We Work (.pl-page--how-we-work) ============ */

/* Intro paragraph of each numbered step (x4). */
.pl-step-lead {
  margin-bottom: 2rem;
}


/* ============ 4.3 UNSCOPED: PL site header (partials/_header) ============ */
/* Renders on every Private Label page. */

.pl-nav-chevron {
  font-size: 0.65rem;
  margin-left: 0.25rem;
}

/* Narrow variant of the mega-menu panel (overrides .pl-mega-content width: 500px). */
.pl-mega-content-narrow {
  width: 280px;
}

.pl-nav-mobile-icon {
  font-size: 1.25rem;
}


/* ============ 4.3 UNSCOPED: Features: pillar navigation (partial) ============ */
/* Renders on all six feature deep-dive pages. NOTE: the .pl-nav-grid base
 * declarations below were the inline attribute; the two !important media-query
 * rules in section 3 above still win for grid-template-columns >= 640px, which
 * is exactly what the inline attribute produced. */

.pl-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.pl-nav-card-media {
  margin-bottom: 0.75rem;
}

.pl-nav-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pl-primary);
  margin: 0 0 0.25rem 0;
}

.pl-nav-card-desc {
  font-size: 0.75rem;
  color: var(--pl-gray-500);
  margin: 0;
  line-height: 1.4;
}

.pl-nav-grid-action {
  text-align: center;
  margin-top: 2.5rem;
}

/* Leading icon inside a .pl-btn (distinct from the contact page's .pl-btn-icon). */
.pl-btn-icon-left {
  margin-right: 0.5rem;
}


/* ============ 4.3 UNSCOPED: Features: deep-dive page (partial) ============ */
/* Renders on all six feature deep-dive pages. */

.pl-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.pl-breadcrumb-sep {
  color: var(--pl-gray-300);
}

.pl-breadcrumb-current {
  color: var(--pl-gray-600);
}

/* Hero illustration column, centred and capped (overrides nothing in
 * .pl-hero-visual; its 1024px padding-left still applies, as before). */
.pl-hero-visual-centered {
  max-width: 420px;
  margin: 0 auto;
}

/* Copy/illustration pair inside a deep-dive section. One column here; the
 * media query in section 3 splits it into two at >= 768px — unchanged from the
 * inline behaviour it replaced. */
.pl-deep-dive-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

/* Audit S6: this was `.pl-section > .pl-container > div > div` — a purely
   structural selector with !important, unscoped, firing on EVERY Private Label
   page that nests two divs under .pl-container. It was inert elsewhere only
   because nothing else there is display:grid. The deep-dive split now has a
   class of its own, so the rule can name it — and once named it no longer
   needs !important, because it simply comes after the base rule. */
@media (min-width: 768px) {
  .pl-deep-dive-split {
    grid-template-columns: 1fr 1fr;
  }
}

.pl-deep-dive-order-1 {
  order: 1;
}

.pl-deep-dive-order-2 {
  order: 2;
}

.pl-deep-dive-title {
  margin: 0 0 1.5rem 0;
}

.pl-deep-dive-desc {
  font-size: 1.125rem;
  color: var(--pl-gray-600);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.pl-deep-dive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.875rem;
}

.pl-deep-dive-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.pl-deep-dive-list-text {
  font-size: 1rem;
  color: var(--pl-gray-700);
  line-height: 1.5;
}

/* "Screenshot coming soon" placeholder (shown until section art exists). */
.pl-deep-dive-placeholder-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.3;
}

.pl-deep-dive-placeholder-body {
  text-align: center;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

.pl-deep-dive-placeholder-caption {
  font-size: 0.75rem;
  color: var(--pl-gray-400);
  margin: 0.25rem 0 0 0;
}


/* ============ 4.3 UNSCOPED: Internal: ELIS branding page ============ */
/* Continues the brand-* / option-* namespace of section 3 above. */

.brand-swatch-navy {
  background: #003366;
}

.brand-swatch-coral {
  background: #FF3333;
}

.section-divider-spaced {
  margin-top: 64px;
}

.brand-recommendation {
  margin-top: 64px;
  padding: 32px;
  background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
  border-radius: 16px;
  border: 1px solid #bae6fd;
}

.brand-recommendation-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #003366;
  margin-bottom: 12px;
}

.brand-recommendation-icon {
  color: #FF3333;
  margin-right: 8px;
}

.brand-recommendation-text {
  font-size: 0.9375rem;
  color: #334155;
  line-height: 1.7;
  margin-bottom: 16px;
}

.brand-recommendation-note {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.6;
}


/* ==========================================================================
   5. RUBY-HELPER STYLES (audit #45 tail, 2026-07-26)
   These were `style:` options passed to link_to/image_tag, so the inline-style
   ratchet's `style="` regex never saw them — but they render as real inline
   style attributes and would have defeated the CSP flip just the same.
   ========================================================================== */

/* app/views/private_label/features/_pillar_navigation.html.erb */
.pl-pillar-nav-card {
  display: block;
  text-decoration: none;
  background: white;
  border: 1px solid var(--pl-gray-200);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.2s;
  text-align: center;
}

.pl-pillar-nav-illustration {
  width: 100%;
  max-width: 120px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* app/views/private_label/features/_deep_dive_page.html.erb */
.pl-deep-dive-crumb {
  color: var(--pl-gray-400);
  text-decoration: none;
}

.pl-deep-dive-screenshot {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid #f1f1f1;
}

/* app/views/private_label/features/index.html.erb */
.pl-feature-link {
  text-decoration: none;
  display: block;
}

.pl-feature-illustration {
  width: 100%;
  height: auto;
  display: block;
}

/* features/_deep_dive_page.html.erb section row. The attribute this replaces
   ended in `<%= index.odd? ? '' : '' %>` — a dead ternary whose only effect was
   to make a completely static style look dynamic to the inline-style census. */
.pl-deep-dive-row {
  display: grid;
  gap: 3rem;
  align-items: center;
}