/* ════════════════════════════════════════════════════════════════════
 FEATURE SLIDER - Tabbed On-Page / Off-Page carousel
 ════════════════════════════════════════════════════════════════════ */
.feature-tabs {
 display: flex;
 justify-content: center;
 gap: 4px;
 padding: 4px;
 border-radius: 999px;
 background: var(--bg-surface, #121316);
 border: 1px solid var(--border-default, #2A2D33);
 margin: 0 auto 20px;
 width: max-content;
 max-width: 100%;
}
.feature-tab {
 font-family: inherit;
 font-size: 13px;
 font-weight: 500;
 color: #A0A4AB;
 background: transparent;
 border: none;
 padding: 10px 24px;
 border-radius: 999px;
 cursor: pointer;
 transition: all 0.22s ease;
 letter-spacing: -0.005em;
}
.feature-tab:hover { color: #F5F6F7; }
.feature-tab.active {
 background: #00D2BE;
 color: #000;
 font-weight: 600;
 box-shadow: 0 4px 12px rgba(0, 210, 190, 0.30);
}
html[data-theme="light"] .feature-tabs {
 background: #FFFFFF;
 border-color: #E8E5DF;
}
html[data-theme="light"] .feature-tab { color: #767269; }
html[data-theme="light"] .feature-tab:hover { color: #0F0E0C; }
html[data-theme="light"] .feature-tab.active {
 background: #00A896;
 color: #FFFFFF;
 box-shadow: 0 4px 12px rgba(0, 168, 150, 0.25);
}
.feature-panel { display: none; animation: fadePanel 0.35s ease; }
.feature-panel.active { display: block; }
@keyframes fadePanel {
 from { opacity: 0; transform: translateY(4px); }
 to { opacity: 1; transform: translateY(0); }
}
.feat-slider {
 position: relative;
 border-radius: 16px;
 min-height: 420px;
}
.feat-slide { display: none; animation: slideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.feat-slide.active { display: block; }
@keyframes slideIn {
 from { opacity: 0; transform: translateX(24px); }
 to { opacity: 1; transform: translateX(0); }
}
.feat-slide-inner {
 display: grid;
 grid-template-columns: 1fr 1.2fr;
 gap: 40px;
 align-items: center;
 padding: 28px;
 background: var(--bg-surface, #121316);
 border: 1px solid var(--border-default, #2A2D33);
 border-radius: 16px;
}
html[data-theme="light"] .feat-slide-inner {
 background: #FFFFFF !important;
 border-color: #E8E5DF !important;
 box-shadow: 0 8px 32px rgba(0,0,0,0.04);
}
.feat-copy { padding: 0 8px; }
.feat-eyebrow {
 font-family: 'Geist Mono', 'DM Mono', monospace;
 font-size: 11px;
 font-weight: 500;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 color: #00D2BE;
 margin-bottom: 16px;
 display: flex;
 align-items: center;
 gap: 10px;
}
.feat-eyebrow::before {
 content: '';
 width: 20px;
 height: 1px;
 background: #00D2BE;
}
html[data-theme="light"] .feat-eyebrow { color: #00A896; }
html[data-theme="light"] .feat-eyebrow::before { background: #00A896; }
.feat-title {
 font-family: 'Geist', sans-serif;
 font-size: clamp(24px, 2.4vw, 34px);
 font-weight: 700;
 letter-spacing: -0.025em;
 line-height: 1.1;
 color: #F5F6F7;
 margin-bottom: 16px;
}
html[data-theme="light"] .feat-title { color: #0F0E0C !important; }
.feat-title em {
 font-style: normal;
 font-weight: 800;
 background: linear-gradient(90deg, #00D2BE, #4DE0CE);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
}
html[data-theme="light"] .feat-title em {
 background: linear-gradient(90deg, #00A896, #00D2BE);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent !important;
}
.feat-body {
 font-size: 15px;
 line-height: 1.65;
 color: #A0A4AB;
 margin-bottom: 20px;
 max-width: 480px;
}
html[data-theme="light"] .feat-body { color: #5C5951 !important; }
.feat-bullets {
 list-style: none;
 padding: 0;
 margin: 0;
 display: grid;
 gap: 10px;
}
.feat-bullets li {
 position: relative;
 padding-left: 22px;
 font-size: 14px;
 line-height: 1.5;
 color: #D0D2D7;
}
html[data-theme="light"] .feat-bullets li { color: #3D3B36 !important; }
.feat-bullets li::before {
 content: '';
 position: absolute;
 left: 0;
 top: 7px;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: rgba(0, 210, 190, 0.15);
 border: 1.5px solid #00D2BE;
}
html[data-theme="light"] .feat-bullets li::before {
 background: rgba(0, 168, 150, 0.12);
 border-color: #00A896;
}
.feat-visual {
 border-radius: 12px;
 overflow: hidden;
 border: 1px solid var(--border-default, #2A2D33);
 box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 30px rgba(0, 210, 190, 0.08);
}
html[data-theme="light"] .feat-visual {
 border-color: #E8E5DF !important;
 box-shadow: 0 16px 40px rgba(0,0,0,0.08), 0 0 24px rgba(0, 168, 150, 0.06) !important;
}
.feat-visual img {
 width: 100%;
 height: auto;
 display: block;
}
.feat-nav {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 20px;
 margin-top: 16px;
}
.feat-arrow {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 42px;
 height: 42px;
 border-radius: 50%;
 background: var(--bg-surface, #121316);
 border: 1px solid var(--border-default, #2A2D33);
 color: #A0A4AB;
 cursor: pointer;
 transition: all 0.2s ease;
}
.feat-arrow:hover {
 border-color: #00D2BE;
 color: #00D2BE;
 background: rgba(0, 210, 190, 0.08);
}
.feat-arrow svg { width: 18px; height: 18px; }
html[data-theme="light"] .feat-arrow {
 background: #FFFFFF !important;
 border-color: #D4D0C8 !important;
 color: #5C5951 !important;
}
html[data-theme="light"] .feat-arrow:hover {
 border-color: #00A896 !important;
 color: #00A896 !important;
 background: rgba(0, 168, 150, 0.06) !important;
}
.feat-dots { display: flex; gap: 8px; }
.feat-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: #3A3E46;
 border: none;
 padding: 0;
 cursor: pointer;
 transition: all 0.2s ease;
}
.feat-dot:hover { background: #6B7076; }
.feat-dot.active {
 background: #00D2BE;
 width: 24px;
 border-radius: 4px;
}
html[data-theme="light"] .feat-dot { background: #D4D0C8 !important; }
html[data-theme="light"] .feat-dot:hover { background: #767269 !important; }
html[data-theme="light"] .feat-dot.active { background: #00A896 !important; }
@media (max-width: 768px) {
 .feat-slider { min-height: auto; }
 .feat-slide-inner {
 grid-template-columns: 1fr;
 gap: 24px;
 padding: 16px;
 }
 .feat-copy { padding: 0; }
 .feat-title { font-size: 22px; }
 .feature-tab { padding: 10px 16px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
 BEFORE / AFTER COMPARISON TABLE
 ════════════════════════════════════════════════════════════════════ */
.comparison-section { position: relative; }
/* Scoped to div.compare-table — service pages use real <table class="compare-table">
   for column-aligned comparisons; the homepage uses div-based grid layout. */
div.compare-table {
 display: grid;
 border-radius: 16px;
 overflow: hidden;
 border: 1px solid var(--border-default, #2A2D33);
 background: var(--bg-surface, #121316);
 margin-bottom: 40px;
}
html[data-theme="light"] div.compare-table {
 background: #FFFFFF !important;
 border-color: #E8E5DF !important;
 box-shadow: 0 12px 40px rgba(0,0,0,0.04);
}
.compare-head,
.compare-row {
 display: grid;
 grid-template-columns: 1.4fr 1fr 1fr;
 align-items: center;
}
.compare-head {
 background: rgba(0, 210, 190, 0.04);
 border-bottom: 1px solid var(--border-default, #2A2D33);
}
html[data-theme="light"] .compare-head {
 background: #F7F6F3 !important;
 border-bottom-color: #E8E5DF !important;
}
.compare-row {
 border-bottom: 1px solid var(--border-subtle, #22252B);
 transition: background 0.2s ease;
}
html[data-theme="light"] .compare-row {
 border-bottom-color: #F0EEE9 !important;
}
.compare-row:last-child { border-bottom: none; }
.compare-row:hover { background: rgba(0, 210, 190, 0.03); }
html[data-theme="light"] .compare-row:hover { background: rgba(0, 168, 150, 0.03) !important; }

.compare-cell {
 padding: 20px 24px;
 display: flex;
 flex-direction: column;
 gap: 6px;
 min-height: 78px;
 justify-content: center;
}
.compare-cell-metric {
 flex-direction: row;
 align-items: center;
 gap: 14px;
 border-right: 1px solid var(--border-subtle, #22252B);
 background: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .compare-cell-metric {
 background: #FAFAF8 !important;
 border-right-color: #F0EEE9 !important;
}
.compare-metric-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border-radius: 8px;
 background: rgba(0, 210, 190, 0.10);
 border: 1px solid rgba(0, 210, 190, 0.25);
 color: #00D2BE;
 flex-shrink: 0;
}
html[data-theme="light"] .compare-metric-icon {
 background: rgba(0, 168, 150, 0.08) !important;
 border-color: rgba(0, 168, 150, 0.22) !important;
 color: #00A896 !important;
}
.compare-metric-icon svg { width: 18px; height: 18px; }
.compare-metric-name {
 font-size: 14px;
 font-weight: 500;
 color: #F5F6F7;
 letter-spacing: -0.01em;
}
html[data-theme="light"] .compare-metric-name { color: #0F0E0C !important; }

.compare-cell-before { border-right: 1px solid var(--border-subtle, #22252B); }
html[data-theme="light"] .compare-cell-before { border-right-color: #F0EEE9 !important; }

.compare-col-label {
 font-family: 'Geist Mono', 'DM Mono', monospace;
 font-size: 10.5px;
 font-weight: 600;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 display: inline-flex;
 align-items: center;
 gap: 8px;
}
.compare-col-label-before {
 color: #EF4444;
}
.compare-col-label-before::before {
 content: '';
 width: 6px; height: 6px;
 border-radius: 50%;
 background: #EF4444;
 box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}
.compare-col-label-after {
 color: #00D2BE;
}
.compare-col-label-after::before {
 content: '';
 width: 6px; height: 6px;
 border-radius: 50%;
 background: #00D2BE;
 box-shadow: 0 0 8px rgba(0, 210, 190, 0.6);
}
html[data-theme="light"] .compare-col-label-after { color: #00A896; }
html[data-theme="light"] .compare-col-label-after::before { background: #00A896; box-shadow: 0 0 8px rgba(0, 168, 150, 0.5); }
.compare-col-sub {
 display: block;
 font-family: 'Geist', sans-serif;
 font-size: 11px;
 font-weight: 400;
 letter-spacing: 0.02em;
 text-transform: none;
 color: #A0A4AB;
 margin-top: 4px;
}
html[data-theme="light"] .compare-col-sub { color: #767269 !important; }

.compare-val {
 font-family: 'Geist', sans-serif;
 font-size: 18px;
 font-weight: 700;
 letter-spacing: -0.02em;
 line-height: 1.15;
}
.compare-val-bad {
 color: #F87171;
 text-decoration: line-through;
 text-decoration-color: rgba(248, 113, 113, 0.35);
 text-decoration-thickness: 2px;
 text-underline-offset: 3px;
}
.compare-val-good {
 color: #00D2BE;
}
html[data-theme="light"] .compare-val-bad {
 color: #DC2626 !important;
 text-decoration-color: rgba(220, 38, 38, 0.35) !important;
}
html[data-theme="light"] .compare-val-good { color: #00A896 !important; }
.compare-detail {
 font-size: 12.5px;
 color: #A0A4AB;
 font-weight: 400;
 letter-spacing: -0.005em;
}
html[data-theme="light"] .compare-detail { color: #767269 !important; }

/* Savings footer */
.compare-savings {
 background: var(--bg-surface, #121316);
 border: 1px solid var(--border-default, #2A2D33);
 border-radius: 16px;
 padding: 40px 48px;
 position: relative;
 overflow: hidden;
}
.compare-savings::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 2px;
 background: linear-gradient(90deg, transparent, #00D2BE, transparent);
}
html[data-theme="light"] .compare-savings {
 background: #FFFFFF !important;
 border-color: #E8E5DF !important;
 box-shadow: 0 12px 40px rgba(0,0,0,0.04);
}
html[data-theme="light"] .compare-savings::before {
 background: linear-gradient(90deg, transparent, #00A896, transparent) !important;
}
.compare-savings-row {
 display: grid;
 grid-template-columns: 1fr auto 1fr auto 1fr;
 gap: 24px;
 align-items: center;
}
.compare-savings-item {
 text-align: center;
}
.compare-savings-label {
 font-family: 'Geist Mono', 'DM Mono', monospace;
 font-size: 11px;
 font-weight: 500;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: #A0A4AB;
 margin-bottom: 8px;
}
html[data-theme="light"] .compare-savings-label { color: #767269 !important; }
.compare-savings-value {
 font-family: 'Geist', sans-serif;
 font-size: 34px;
 font-weight: 700;
 letter-spacing: -0.03em;
 background: linear-gradient(90deg, #00D2BE, #4DE0CE);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
}
html[data-theme="light"] .compare-savings-value {
 background: linear-gradient(90deg, #00A896, #00D2BE) !important;
 -webkit-background-clip: text !important;
 background-clip: text !important;
 color: transparent !important;
}
.compare-savings-divider {
 width: 1px;
 height: 40px;
 background: var(--border-default, #2A2D33);
}
html[data-theme="light"] .compare-savings-divider { background: #E8E5DF !important; }

/* Responsive */
@media (max-width: 900px) {
 .compare-head, .compare-row {
 grid-template-columns: 1fr;
 }
 .compare-cell-metric,
 .compare-cell-before,
 .compare-cell-after {
 border-right: none;
 border-bottom: 1px solid var(--border-subtle, #22252B);
 }
 html[data-theme="light"] .compare-cell-metric,
 html[data-theme="light"] .compare-cell-before,
 html[data-theme="light"] .compare-cell-after {
 border-bottom-color: #F0EEE9 !important;
 }
 .compare-cell-after { border-bottom: none; }
 .compare-head .compare-cell-metric { display: none; }
 .compare-savings { padding: 28px 24px; }
 .compare-savings-row { grid-template-columns: 1fr; gap: 20px; }
 .compare-savings-divider { width: 80%; height: 1px; margin: 0 auto; }
 .compare-savings-value { font-size: 28px; }
}


/* ════════════════════════════════════════════════════════════════════
   PLATFORM SECTION BASE STYLES (.pf-section, .pf-card, .pf-section-alt)
   These were missing when the platform sections got injected into
   service pages — without them, .pf-section-alt / .pf-section-base
   had no background, so the inserted feature-slider + comparison
   panels rendered without theming, breaking the page visually.
   ════════════════════════════════════════════════════════════════════ */
.pf-section { padding: 100px 0; }
.pf-section-alt { background: #121316; }
.pf-section-base { background: #0A0B0D; }
.pf-grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.pf-card {
  background: var(--bg-surface, #121316);
  border: 1px solid var(--border-default, #2A2D33);
  border-radius: 14px; padding: 32px;
  transition: border-color 0.2s, transform 0.2s;
}
.pf-card:hover { border-color: var(--border-strong, #3D4046); transform: translateY(-2px); }
.pf-card-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(0, 210, 190, 0.08);
  border: 1px solid rgba(0, 210, 190, 0.25);
  margin-bottom: 18px;
}
.pf-card-icon svg { width: 20px; height: 20px; color: #00D2BE; }
.pf-card h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--text, #F5F6F7); }
.pf-card p { font-size: 14px; line-height: 1.6; color: var(--text-3, #A8ABB2); }
.pf-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pf-cta-final { text-align: center; }
.pf-cta-trust { display: flex; justify-content: center; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
.pf-cta-trust span { font-size: 13px; color: var(--text-3, #A8ABB2); font-family: 'Geist Mono', monospace; }
@media (max-width: 960px) {
  .pf-grid-6 { grid-template-columns: 1fr; }
  .pf-two-col { grid-template-columns: 1fr; gap: 40px; }
}
@media (min-width: 600px) and (max-width: 960px) {
  .pf-grid-6 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pf-section { padding: 64px 0; }
}

/* ── Light theme overrides for the inserted platform sections ────── */
html[data-theme="light"] .pf-section-base { background: #F7F6F3 !important; }
html[data-theme="light"] .pf-section-alt {
  background: #FFFFFF !important;
  border-top: 1px solid #E8E5DF;
  border-bottom: 1px solid #E8E5DF;
}
html[data-theme="light"] .pf-section h2.sec-title { color: #0F0E0C !important; }
html[data-theme="light"] .pf-section .sec-tag { color: #767269 !important; }
html[data-theme="light"] .pf-section .sec-tag::before { background: #D4D0C8 !important; }
html[data-theme="light"] .pf-section .sec-desc,
html[data-theme="light"] .pf-section .pf-body { color: #5C5951 !important; }
html[data-theme="light"] .pf-card { background: #FFFFFF !important; border-color: #E8E5DF !important; }
html[data-theme="light"] .pf-card:hover {
  border-color: #00A896 !important;
  box-shadow: 0 12px 32px rgba(0, 168, 150, 0.10) !important;
}
html[data-theme="light"] .pf-card h3 { color: #0F0E0C !important; }
html[data-theme="light"] .pf-card p { color: #5C5951 !important; }
html[data-theme="light"] .pf-card-icon {
  background: rgba(0, 168, 150, 0.08) !important;
  border-color: rgba(0, 168, 150, 0.25) !important;
}
html[data-theme="light"] .pf-card-icon svg { color: #00A896 !important; }
html[data-theme="light"] .pf-bullets li { color: #3D3B36 !important; }
html[data-theme="light"] .pf-bullets li::before { color: #00A896 !important; }