/* ── SERVICES PAGE SPECIFIC CSS ── */


   .section-pad {
       padding: 110px 0;
   }

   .section-label {
       display: inline-flex;
       align-items: center;
       gap: 7px;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--green-dark);
       margin-bottom: 18px;
       padding: 5px 13px;
       background: var(--green-light);
       border: 1px solid var(--border2);
       border-radius: 50px;
   }

   .section-title {
       font-family: var(--font-display);
       font-size: clamp(30px, 4vw, 50px);
       font-weight: 800;
       letter-spacing: -0.03em;
       line-height: 1.07;
       color: var(--text);
       margin-bottom: 18px;
   }

   .section-desc {
       font-size: 16px;
       color: var(--text-muted);
       line-height: 1.72;
       max-width: 540px;
   }

   .gradient-text {
       background: linear-gradient(135deg, var(--green-dark) 0%, var(--teal) 60%, var(--green) 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   .reveal {
       opacity: 0;
       transform: translateY(28px);
       transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
   }

   .reveal.visible {
       opacity: 1;
       transform: translateY(0);
   }

   .rd1 {
       transition-delay: 0.1s;
   }

   .rd2 {
       transition-delay: 0.2s;
   }

   .rd3 {
       transition-delay: 0.3s;
   }

   .rd4 {
       transition-delay: 0.4s;
   }

   .rd5 {
       transition-delay: 0.5s;
   }

   .ci-g {
       background: var(--green-light);
       border: 1px solid var(--border2);
   }

   .ci-t {
       background: var(--teal-pale);
       border: 1px solid rgba(30, 100, 117, 0.2);
   }

   .ci-gold {
       background: #fef3c7;
       border: 1px solid #fcd34d;
   }

   .ci-purple {
       background: #f3f0ff;
       border: 1px solid #c4b5fd;
   }

   .svc-bullets {
       list-style: none;
       display: flex;
       flex-direction: column;
       gap: 5px;
   }

   .svc-bullets li {
       font-size: 13px;
       color: var(--text-muted);
       padding-left: 18px;
       position: relative;
   }

   .svc-bullets li::before {
       content: "→";
       position: absolute;
       left: 0;
       color: var(--green-bright);
       font-size: 11px;
   }


   /* ── HERO ── */
   .sp-hero {
       position: relative;
       padding: 120px 4% 80px;
       background: linear-gradient(160deg, #f0f7e4 0%, #ffffff 45%, #e4f3f9 100%);
       overflow: hidden;
       text-align: center;
   }

   .sp-hero-grid {
       position: absolute;
       inset: 0;
       background-image: linear-gradient(rgba(139, 195, 74, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 195, 74, 0.06) 1px, transparent 1px);
       background-size: 52px 52px;
       mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 100%);
   }

   .sp-hero-glow {
       position: absolute;
       top: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 900px;
       height: 420px;
       background: radial-gradient(ellipse, rgba(139, 195, 74, 0.14) 0%, rgba(30, 100, 117, 0.06) 45%, transparent 75%);
       pointer-events: none;
   }

   .sp-hero-content {
       position: relative;
       z-index: 2;
       max-width: 760px;
       margin: 0 auto;
   }

   .sp-hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 6px 18px;
       border-radius: 50px;
       margin-bottom: 28px;
       background: linear-gradient(135deg, var(--green-light), #f0faf5);
       border: 1px solid var(--border2);
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       color: var(--green-dark);
   }

   .sp-hero-badge::before {
       content: '';
       width: 6px;
       height: 6px;
       background: var(--green-bright);
       border-radius: 50%;
       animation: spPulse 2s ease infinite;
   }

   @keyframes spPulse {

       0%,
       100% {
           opacity: 1;
           transform: scale(1);
       }

       50% {
           opacity: 0.5;
           transform: scale(0.7);
       }
   }

   .sp-hero h1 {
       font-family: var(--font-display);
       font-size: clamp(36px, 5.5vw, 66px);
       font-weight: 800;
       line-height: 1.04;
       letter-spacing: -0.03em;
       color: var(--text);
       margin-bottom: 22px;
   }

   .sp-hero-desc {
       font-size: 17px;
       color: var(--text-muted);
       line-height: 1.75;
       max-width: 640px;
       margin: 0 auto 40px;
   }

   .sp-hero-actions {
       display: flex;
       gap: 14px;
       justify-content: center;
       flex-wrap: wrap;
   }

   .btn-sp-primary {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 13px 28px;
       border-radius: 50px;
       border: none;
       color: #fff;
       font-family: var(--font-body);
       font-size: 15px;
       font-weight: 700;
       background: linear-gradient(135deg, var(--green), var(--green-dark));
       cursor: pointer;
       transition: all 0.3s;
       text-decoration: none;
       box-shadow: 0 6px 24px rgba(107, 163, 42, 0.32);
   }

   .btn-sp-primary:hover {
       transform: translateY(-2px);
       box-shadow: 0 12px 36px rgba(107, 163, 42, 0.42);
   }

   .btn-sp-outline {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 13px 26px;
       border-radius: 50px;
       border: 2px solid var(--border2);
       background: rgba(255, 255, 255, 0.85);
       color: var(--text2);
       font-family: var(--font-body);
       font-size: 15px;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s;
       text-decoration: none;
   }

   .btn-sp-outline:hover {
       background: #fff;
       border-color: var(--green-bright);
       color: var(--green);
   }

   /* Stats strip under hero */
   .sp-hero-stats {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 1px;
       background: var(--border);
       margin-top: 60px;
       border-radius: 20px;
       overflow: hidden;
       box-shadow: var(--shadow-md);
   }

   .sp-stat {
       background: #fff;
       padding: 28px 24px;
       text-align: center;
       transition: background 0.25s;
   }

   .sp-stat:hover {
       background: var(--green-light);
   }

   .sp-stat-num {
       font-family: var(--font-display);
       font-size: 36px;
       font-weight: 800;
       letter-spacing: -0.04em;
       line-height: 1;
       margin-bottom: 6px;
       background: linear-gradient(135deg, var(--green), var(--teal));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   .sp-stat-lbl {
       font-size: 13px;
       color: var(--text-muted);
       line-height: 1.4;
   }

   /* ── SERVICE TABS ── */
   .sp-tabs-wrap {
       background: var(--white);
       border-bottom: 1px solid var(--border);
       position: sticky;
       top: 70px;
       z-index: 80;
   }

   .sp-tabs {
       display: flex;
       gap: 4px;
       overflow-x: auto;
       padding: 14px 0;
       scrollbar-width: none;
   }

   .sp-tabs::-webkit-scrollbar {
       display: none;
   }

   .sp-tab {
       display: flex;
       align-items: center;
       gap: 7px;
       padding: 9px 20px;
       border-radius: 50px;
       border: 1.5px solid transparent;
       background: transparent;
       color: var(--text-muted);
       font-family: var(--font-body);
       font-size: 14px;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.25s;
       white-space: nowrap;
       text-decoration: none;
   }

   .sp-tab:hover {
       color: var(--green);
       background: var(--green-light);
       border-color: var(--border2);
   }

   .sp-tab.active {
       color: var(--green-dark);
       background: var(--green-light);
       border-color: var(--border2);
       font-weight: 700;
   }

   .sp-tab-icon {
       font-size: 16px;
   }

   /* ── QUICK CARDS ROW ── */
   .sp-quick-section {
       padding: 72px 0;
       background: var(--white);
   }

   .sp-quick-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 16px;
       margin-top: 48px;
   }

   .sp-quick-card {
       background: #fff;
       border: 1.5px solid var(--border);
       border-radius: 20px;
       padding: 28px 22px;
       text-align: center;
       transition: all 0.35s ease;
       cursor: pointer;
       position: relative;
       overflow: hidden;
       text-decoration: none;
   }

   .sp-quick-card::before {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 3px;
       background: linear-gradient(90deg, var(--green), var(--teal));
       transform: scaleX(0);
       transform-origin: left;
       transition: transform 0.4s;
   }

   .sp-quick-card:hover {
       border-color: var(--border2);
       transform: translateY(-5px);
       box-shadow: var(--shadow-lg);
   }

   .sp-quick-card:hover::before {
       transform: scaleX(1);
   }

   .sp-qc-icon {
       width: 56px;
       height: 56px;
       border-radius: 16px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 26px;
       margin: 0 auto 16px;
       transition: transform 0.3s ease;
   }

   .sp-quick-card:hover .sp-qc-icon {
       transform: scale(1.1);
   }

   .sp-qc-title {
       font-family: var(--font-display);
       font-size: 16px;
       font-weight: 700;
       color: var(--text);
       margin-bottom: 8px;
       letter-spacing: -0.02em;
   }

   .sp-qc-desc {
       font-size: 13px;
       color: var(--text-muted);
       line-height: 1.6;
   }

   .sp-qc-link {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       margin-top: 14px;
       font-size: 12px;
       font-weight: 700;
       color: var(--green);
       text-decoration: none;
       transition: gap 0.2s;
   }

   .sp-quick-card:hover .sp-qc-link {
       gap: 8px;
   }

   /* ── FEATURE DETAIL SECTIONS ── */
   /* alternating layout sections */
   .sp-detail-section {
       padding: 96px 0;
       position: relative;
   }

   .sp-detail-section:nth-child(even) {
       background: var(--bg2);
   }

   .sp-detail-section:nth-child(odd) {
       background: var(--white);
   }

   .sp-detail-layout {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 72px;
       align-items: center;
   }

   .sp-detail-layout.reverse {
       direction: rtl;
   }

   .sp-detail-layout.reverse>* {
       direction: ltr;
   }

   .sp-detail-content {}

   .sp-detail-content h2 {
       font-family: var(--font-display);
       font-size: clamp(26px, 3.5vw, 42px);
       font-weight: 800;
       letter-spacing: -0.03em;
       line-height: 1.1;
       color: var(--text);
       margin-bottom: 18px;
   }

   .sp-detail-content p {
       font-size: 15px;
       color: var(--text-muted);
       line-height: 1.78;
       margin-bottom: 16px;
   }

   .sp-detail-content p:last-of-type {
       margin-bottom: 24px;
   }

   .sp-steps {
       display: flex;
       flex-direction: column;
       gap: 14px;
       margin-bottom: 28px;
   }

   .sp-step {
       display: flex;
       align-items: flex-start;
       gap: 14px;
       padding: 14px 18px;
       background: #fff;
       border: 1px solid var(--border);
       border-radius: 14px;
       transition: all 0.25s;
   }

   .sp-step:hover {
       border-color: var(--border2);
       box-shadow: var(--shadow-sm);
   }

   .sp-step-num {
       width: 28px;
       height: 28px;
       border-radius: 50%;
       background: linear-gradient(135deg, var(--green), var(--teal));
       color: #fff;
       font-size: 12px;
       font-weight: 800;
       font-family: var(--font-display);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }

   .sp-step-text {
       font-size: 13px;
       color: var(--text-muted);
       line-height: 1.6;
   }

   .sp-step-text strong {
       color: var(--text2);
       font-weight: 600;
   }

   .sp-pills {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-top: 20px;
   }

   .sp-pill {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 6px 14px;
       border-radius: 50px;
       background: var(--green-light);
       border: 1px solid var(--border2);
       font-size: 12px;
       font-weight: 600;
       color: var(--green-dark);
   }

   .sp-pill-icon {
       font-size: 13px;
   }

   /* Visual mockup panel */
   .sp-visual-panel {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .sp-mockup-card {
       width: 100%;
       max-width: 380px;
       background: #fff;
       border: 1.5px solid var(--border);
       border-radius: 24px;
       padding: 32px;
       box-shadow: var(--shadow-xl);
       position: relative;
       overflow: hidden;
   }

   .sp-mockup-card::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 180px;
       height: 180px;
       border-radius: 50%;
       transform: translate(30%, -30%);
       opacity: 0.6;
   }

   .sp-mc-mobile::before {
       background: radial-gradient(circle, rgba(139, 195, 74, 0.18), transparent);
   }

   .sp-mc-dth::before {
       background: radial-gradient(circle, rgba(30, 100, 117, 0.15), transparent);
   }

   .sp-mc-upi::before {
       background: radial-gradient(circle, rgba(245, 158, 11, 0.15), transparent);
   }

   .sp-mc-aeps::before {
       background: radial-gradient(circle, rgba(139, 92, 246, 0.12), transparent);
   }

   .sp-mc-header {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 20px;
       padding-bottom: 16px;
       border-bottom: 1px solid var(--border);
   }

   .sp-mc-icon {
       width: 44px;
       height: 44px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
   }

   .sp-mc-title {
       font-family: var(--font-display);
       font-size: 16px;
       font-weight: 800;
       color: var(--text);
   }

   .sp-mc-subtitle {
       font-size: 12px;
       color: var(--text-faint);
   }

   .sp-mc-balance {
       padding: 16px;
       border-radius: 14px;
       margin-bottom: 16px;
   }

   .sp-mc-balance-g {
       background: linear-gradient(135deg, var(--green), var(--teal));
       color: #fff;
   }

   .sp-mc-balance-t {
       background: linear-gradient(135deg, var(--teal), #2a8fa8);
       color: #fff;
   }

   .sp-mc-balance-gold {
       background: linear-gradient(135deg, #d97706, #f59e0b);
       color: #fff;
   }

   .sp-mc-balance-purple {
       background: linear-gradient(135deg, #7c3aed, #a855f7);
       color: #fff;
   }

   .sp-mc-bal-lbl {
       font-size: 10px;
       opacity: 0.8;
       margin-bottom: 3px;
   }

   .sp-mc-bal-amt {
       font-family: var(--font-display);
       font-size: 24px;
       font-weight: 800;
       letter-spacing: -0.02em;
   }

   .sp-mc-bal-sub {
       font-size: 10px;
       opacity: 0.85;
       margin-top: 2px;
   }

   .sp-mc-rows {
       display: flex;
       flex-direction: column;
       gap: 8px;
   }

   .sp-mc-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 10px 14px;
       background: var(--surface2);
       border: 1px solid var(--border);
       border-radius: 10px;
   }

   .sp-mc-row-left {
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .sp-mc-row-icon {
       width: 30px;
       height: 30px;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
   }

   .sp-mc-row-label {
       font-size: 12px;
       font-weight: 600;
       color: var(--text);
   }

   .sp-mc-row-sub {
       font-size: 10px;
       color: var(--text-faint);
   }

   .sp-mc-row-val {
       font-family: var(--font-display);
       font-size: 13px;
       font-weight: 800;
   }

   .sp-mc-row-val.g {
       color: var(--green);
   }

   .sp-mc-row-val.t {
       color: var(--teal);
   }

   .sp-mc-row-val.gold {
       color: var(--gold);
   }

   .sp-mc-badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       margin-top: 14px;
       padding: 7px 14px;
       border-radius: 50px;
       background: var(--green-light);
       border: 1px solid var(--border2);
       font-size: 12px;
       font-weight: 700;
       color: var(--green-dark);
   }

   /* Floating accent cards on mockup */
   .sp-float-accent {
       position: absolute;
       background: #fff;
       border: 1px solid var(--border);
       border-radius: 12px;
       padding: 10px 14px;
       box-shadow: var(--shadow-md);
       z-index: 5;
   }

   .sp-fa-1 {
       top: -16px;
       right: -16px;
       animation: spFloat1 5s ease-in-out infinite;
   }

   .sp-fa-2 {
       bottom: -16px;
       left: -16px;
       animation: spFloat2 6s ease-in-out infinite 1.5s;
   }

   @keyframes spFloat1 {

       0%,
       100% {
           transform: translateY(0) rotate(2deg);
       }

       50% {
           transform: translateY(-8px) rotate(2deg);
       }
   }

   @keyframes spFloat2 {

       0%,
       100% {
           transform: translateY(0) rotate(-2deg);
       }

       50% {
           transform: translateY(-7px) rotate(-2deg);
       }
   }

   .sp-fa-label {
       font-size: 9px;
       color: var(--text-faint);
       margin-bottom: 2px;
       text-transform: uppercase;
       letter-spacing: 0.06em;
   }

   .sp-fa-val {
       font-family: var(--font-display);
       font-size: 14px;
       font-weight: 800;
       color: var(--green);
   }

   /* ── OPERATOR GRID ── */
   .sp-operators {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 12px;
       margin-top: 24px;
   }

   .sp-op {
       padding: 14px;
       background: var(--surface2);
       border: 1px solid var(--border);
       border-radius: 12px;
       text-align: center;
       transition: all 0.2s;
       cursor: default;
   }

   .sp-op:hover {
       background: var(--green-light);
       border-color: var(--border2);
   }

   .sp-op-icon {
       font-size: 22px;
       margin-bottom: 6px;
   }

   .sp-op-name {
       font-size: 12px;
       font-weight: 600;
       color: var(--text);
   }

   .sp-op-type {
       font-size: 10px;
       color: var(--text-faint);
   }

   /* ── 2-COL MINI CARDS ── */
   .sp-mini-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px;
       margin-top: 60px;
   }

   .sp-mini-card {
       background: #fff;
       border: 1.5px solid var(--border);
       border-radius: 20px;
       padding: 28px;
       transition: all 0.35s;
       position: relative;
       overflow: hidden;
   }

   .sp-mini-card::after {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 3px;
       border-radius: 20px 20px 0 0;
   }

   .sp-mc-green::after {
       background: linear-gradient(90deg, var(--green), var(--green-bright));
   }

   .sp-mc-teal::after {
       background: linear-gradient(90deg, var(--teal), var(--teal-bright));
   }

   .sp-mini-card:hover {
       border-color: var(--border2);
       transform: translateY(-4px);
       box-shadow: var(--shadow-lg);
   }

   .sp-mini-card h3 {
       font-family: var(--font-display);
       font-size: 19px;
       font-weight: 700;
       margin: 14px 0 10px;
       letter-spacing: -0.02em;
       color: var(--text);
   }

   .sp-mini-card p {
       font-size: 14px;
       color: var(--text-muted);
       line-height: 1.68;
       margin-bottom: 16px;
   }

   /* ── PROCESS STEPS ROW ── */
   .sp-process-section {
       padding: 96px 0;
       background: linear-gradient(180deg, var(--white), var(--bg2), var(--white));
   }

   .sp-process-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 24px;
       margin-top: 56px;
       position: relative;
   }

   .sp-process-grid::before {
       content: '';
       position: absolute;
       top: 36px;
       left: calc(12.5% + 24px);
       right: calc(12.5% + 24px);
       height: 2px;
       background: linear-gradient(90deg, var(--border2), var(--teal-light), var(--border2));
       z-index: 0;
   }

   .sp-process-step {
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       position: relative;
       z-index: 1;
   }

   .sp-ps-num {
       width: 72px;
       height: 72px;
       border-radius: 50%;
       background: #fff;
       border: 2px solid var(--border2);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 28px;
       margin-bottom: 18px;
       box-shadow: var(--shadow-sm);
       transition: all 0.3s;
   }

   .sp-process-step:hover .sp-ps-num {
       border-color: var(--green-bright);
       transform: scale(1.08);
       box-shadow: var(--shadow-md);
   }

   .sp-ps-title {
       font-family: var(--font-display);
       font-size: 16px;
       font-weight: 700;
       color: var(--text);
       margin-bottom: 8px;
   }

   .sp-ps-desc {
       font-size: 13px;
       color: var(--text-muted);
       line-height: 1.6;
   }

   .sp-ps-badge {
       margin-top: 10px;
       padding: 4px 10px;
       border-radius: 50px;
       background: var(--green-light);
       border: 1px solid var(--border2);
       font-size: 11px;
       font-weight: 700;
       color: var(--green-dark);
   }

   /* ── BENEFITS GRID ── */
   .sp-benefits-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 18px;
       margin-top: 56px;
   }

   .sp-benefit-card {
       background: #fff;
       border: 1px solid var(--border);
       border-radius: 18px;
       padding: 26px;
       transition: all 0.3s;
   }

   .sp-benefit-card:hover {
       border-color: var(--border2);
       transform: translateY(-3px);
       box-shadow: var(--shadow-md);
   }

   .sp-bc-icon {
       width: 46px;
       height: 46px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
       margin-bottom: 16px;
   }

   .sp-benefit-card h4 {
       font-family: var(--font-display);
       font-size: 17px;
       font-weight: 700;
       color: var(--text);
       margin-bottom: 8px;
       letter-spacing: -0.02em;
   }

   .sp-benefit-card p {
       font-size: 13px;
       color: var(--text-muted);
       line-height: 1.65;
   }

   /* ── COMPARISON TABLE ── */
   .sp-compare-section {
       padding: 96px 0;
       background: var(--bg2);
   }

   .sp-compare-table {
       width: 100%;
       border-collapse: separate;
       border-spacing: 0;
       margin-top: 56px;
       border-radius: 20px;
       overflow: hidden;
       box-shadow: var(--shadow-lg);
   }

   .sp-compare-table thead tr th {
       padding: 18px 24px;
       text-align: left;
       font-family: var(--font-display);
       font-size: 15px;
       font-weight: 700;
       letter-spacing: -0.01em;
   }

   .sp-compare-table thead tr th:first-child {
       background: var(--surface3);
       color: var(--text-muted);
   }

   .sp-compare-table thead tr th:nth-child(2) {
       background: var(--green-light);
       color: var(--green-dark);
   }

   .sp-compare-table thead tr th:last-child {
       background: #fff;
       color: var(--text-muted);
   }

   .sp-compare-table thead tr th .th-badge {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       padding: 3px 10px;
       border-radius: 50px;
       margin-left: 8px;
       font-size: 10px;
       font-weight: 700;
       background: var(--green-mid);
       color: var(--green-dark);
   }

   .sp-compare-table tbody tr td {
       padding: 15px 24px;
       font-size: 14px;
       border-top: 1px solid var(--border);
   }

   .sp-compare-table tbody tr td:first-child {
       background: #fafbf9;
       color: var(--text-muted);
       font-weight: 500;
   }

   .sp-compare-table tbody tr td:nth-child(2) {
       background: rgba(232, 245, 208, 0.4);
       font-weight: 700;
   }

   .sp-compare-table tbody tr td:last-child {
       background: #fff;
       color: var(--text-muted);
   }

   .sp-compare-table tbody tr:hover td:nth-child(2) {
       background: rgba(232, 245, 208, 0.7);
   }

   .sp-check {
       color: var(--green);
       font-size: 16px;
   }

   .sp-cross {
       color: #dc2626;
       font-size: 16px;
   }

   .sp-neutral {
       color: var(--text-faint);
   }