/* ==========================================================================
      PREMIUM PRICING COMPARISON TABLE (14 Features)
      ========================================================================== */
   :root {
       --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
       --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);
       --shadow-strong: 0 20px 40px rgba(15, 23, 42, 0.12);
       --bs-primary: #009BDF;
       --bs-primary-hover: #0077a8;
       --grid-border: rgba(0, 0, 0, 0.05);
   }

   /* Animations */
   .fade-up-element {
       animation: fadeUpAnim 0.8s var(--ease-out-expo) forwards;
       opacity: 0;
       transform: translateY(30px);
   }
   .delay-1 { animation-delay: 0.1s; }
   
   @keyframes fadeUpAnim {
       to { opacity: 1; transform: translateY(0); }
   }

   /* Base Layout */
   .pricing-compare {
       margin-top: 2rem;
       position: relative;
   }
.short .pricing-grid {
        display: grid;
    grid-template-columns: 1.65fr repeat(4, 1fr);
    grid-template-rows: minmax(140px, auto) repeat(10, 60px) 70px;
    gap: 0 12px;
    align-items: stretch;
    padding-top: 15px;
}
   .pricing-grid {
       display: grid;
       grid-template-columns: 1.65fr repeat(4, 1fr);
       /* 1 Header + 14 Features + 1 CTA */
       grid-template-rows: minmax(140px, auto) repeat(14, 60px) 70px;
       gap: 0 12px;
       align-items: stretch;
       padding-top: 15px;
   }

   .feature-panel,
   .plan-card,
   .feature-list,
   .plan-checks {
       display: contents;
   }

   .feature-list,
   .plan-checks {
       list-style: none;
       margin: 0;
       padding: 0;
   }

   /* Row Backgrounds */
   .feature-list li,
   .plan-checks li {
       background: #ffffff !important;
       box-shadow: inset 0 -1px 0 var(--grid-border);
       transition: background-color 0.3s ease, border 0.3s ease;
   }

   /* Left feature column */
   .feature-spacer {
       grid-column: 1;
       grid-row: 1;
       border-radius: 16px 16px 0 0;
   }

   .feature-list li {
       grid-column: 1;
       display: flex;
       align-items: center;
       padding: 10px 20px;
       text-align: left;
       color: #475569;
       font-size: 0.95rem;
       line-height: 1.4;
       font-weight: 600;
       min-width: 270px;
   }

   .feature-list li:first-child { border-top-left-radius: 16px; border-top-right-radius: 16px; }
   .feature-list li:last-child { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; box-shadow: none; }

   /* Map 14 feature rows */
   .feature-list li:nth-child(1) { grid-row: 2; }
   .feature-list li:nth-child(2) { grid-row: 3; }
   .feature-list li:nth-child(3) { grid-row: 4; }
   .feature-list li:nth-child(4) { grid-row: 5; }
   .feature-list li:nth-child(5) { grid-row: 6; }
   .feature-list li:nth-child(6) { grid-row: 7; }
   .feature-list li:nth-child(7) { grid-row: 8; }
   .feature-list li:nth-child(8) { grid-row: 9; }
   .feature-list li:nth-child(9) { grid-row: 10; }
   .feature-list li:nth-child(10) { grid-row: 11; }
   .feature-list li:nth-child(11) { grid-row: 12; }
   .feature-list li:nth-child(12) { grid-row: 13; }
   .feature-list li:nth-child(13) { grid-row: 14; }
   .feature-list li:nth-child(14) { grid-row: 15; }

   /* Plan Header & CTA Elements */
   .plan-head,
   .plan-cta:not(.featured-cta) {
       background-color: #ffffff !important;
   }

   .plan-head {
       grid-row: 1;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       padding: 20px 16px;
       color: #0f172a;
       text-align: center;
       border-radius: 16px 16px 0 0;
       height: 100%;
       border: 1px solid var(--grid-border);
       border-bottom: none;
       transition: all 0.3s ease;
   }

   .plan-head h4 {
       font-weight: 800;
       font-size: 1.25rem;
       margin-bottom: 8px;
   }

   .plan-head p {
       margin-bottom: 0;
       line-height: 1.4;
       color: #64748b;
   }

   /* Check rows */
   .plan-checks li {
       display: flex;
       align-items: center;
       justify-content: center;
       min-width: 150px;
       border-left: 1px solid var(--grid-border);
       border-right: 1px solid var(--grid-border);
   }

   .plan-checks li i {
       transition: transform 0.3s var(--ease-out-expo);
   }

   .plan-checks li:nth-child(1) { grid-row: 2; }
   .plan-checks li:nth-child(2) { grid-row: 3; }
   .plan-checks li:nth-child(3) { grid-row: 4; }
   .plan-checks li:nth-child(4) { grid-row: 5; }
   .plan-checks li:nth-child(5) { grid-row: 6; }
   .plan-checks li:nth-child(6) { grid-row: 7; }
   .plan-checks li:nth-child(7) { grid-row: 8; }
   .plan-checks li:nth-child(8) { grid-row: 9; }
   .plan-checks li:nth-child(9) { grid-row: 10; }
   .plan-checks li:nth-child(10) { grid-row: 11; }
   .plan-checks li:nth-child(11) { grid-row: 12; }
   .plan-checks li:nth-child(12) { grid-row: 13; }
   .plan-checks li:nth-child(13) { grid-row: 14; }
   .plan-checks li:nth-child(14) { grid-row: 15; }

   /* CTA row */
   .plan-cta {
       grid-row: 16;
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 68px;
       text-decoration: none;
       font-weight: 700;
       color: var(--bs-primary);
       border-radius: 0 0 16px 16px;
       border: 1px solid var(--grid-border);
       border-top: none;
       transition: all 0.3s ease;
   }

   /* Column Placement */
   .plan-card:nth-of-type(2) .plan-head,
   .plan-card:nth-of-type(2) .plan-checks li,
   .plan-card:nth-of-type(2) .plan-cta { grid-column: 2; }

   .plan-card:nth-of-type(3) .plan-head,
   .plan-card:nth-of-type(3) .plan-checks li,
   .plan-card:nth-of-type(3) .plan-cta { grid-column: 3; }

   .plan-card:nth-of-type(4) .plan-head,
   .plan-card:nth-of-type(4) .plan-checks li,
   .plan-card:nth-of-type(4) .plan-cta,
   .plan-card:nth-of-type(4) .pricing-table-badge-popular { grid-column: 4; }

   .plan-card:nth-of-type(5) .plan-head,
   .plan-card:nth-of-type(5) .plan-checks li,
   .plan-card:nth-of-type(5) .plan-cta { grid-column: 5; }

   /* ==========================================================================
      INTERACTIVE HOVER EFFECTS (Column)
      ========================================================================== */
   .plan-card:hover .plan-cta {
       background-color: var(--bs-primary) !important;
       color: #fff !important;
       border-color: var(--bs-primary);
   }
   
   .plan-card:hover .plan-head {
       border-color: var(--bs-primary);
       box-shadow: 0 -4px 15px rgba(0, 157, 220, 0.1);
       border-width: 2px;
   }

   .plan-card:hover .plan-checks li {
       border-left: 2px solid var(--bs-primary) !important;
       border-right: 2px solid var(--bs-primary) !important;
   }
   
   .plan-card:hover .plan-checks li i {
       transform: scale(1.2);
   }

   /* ==========================================================================
      FEATURED COLUMN (Most Popular)
      ========================================================================== */
   .plan-card.featured .plan-head,
   .plan-card.featured .plan-checks li {
       border-left: 2px solid var(--bs-primary);
       border-right: 2px solid var(--bs-primary);
   }

   .plan-card.featured .plan-head {
       border-top: 4px solid var(--bs-primary);
       background: rgba(0, 157, 220, 0.02) !important;
   }

   .plan-card.featured .plan-checks li {
       background: rgba(0, 157, 220, 0.02) !important;
   }

   .plan-card.featured .plan-cta {
       background: var(--bs-primary);
       color: #fff;
       border: 2px solid var(--bs-primary);
       border-top: none;
   }
   
   .plan-card.featured:hover .plan-cta {
       background: var(--bs-primary-hover) !important;
       border-color: var(--bs-primary-hover);
   }

.pricing-table-badge-popular{
    grid-row: 1;
    align-self: start;
    justify-self: center;
    transform: translateY(-16px);
    background: linear-gradient(90deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    white-space: nowrap;
    z-index: 3;
}
   /* ==========================================================================
      INTERACTIVE HOVER EFFECTS (Crosshair / Row Linking up to 14)
      ========================================================================== */
   .pricing-grid:has(.feature-list li:nth-child(1):hover) .plan-checks li:nth-child(1),
   .pricing-grid:has(.plan-checks li:nth-child(1):hover) .feature-list li:nth-child(1),
   .pricing-grid:has(.plan-checks li:nth-child(1):hover) .plan-checks li:nth-child(1),

   .pricing-grid:has(.feature-list li:nth-child(2):hover) .plan-checks li:nth-child(2),
   .pricing-grid:has(.plan-checks li:nth-child(2):hover) .feature-list li:nth-child(2),
   .pricing-grid:has(.plan-checks li:nth-child(2):hover) .plan-checks li:nth-child(2),

   .pricing-grid:has(.feature-list li:nth-child(3):hover) .plan-checks li:nth-child(3),
   .pricing-grid:has(.plan-checks li:nth-child(3):hover) .feature-list li:nth-child(3),
   .pricing-grid:has(.plan-checks li:nth-child(3):hover) .plan-checks li:nth-child(3),

   .pricing-grid:has(.feature-list li:nth-child(4):hover) .plan-checks li:nth-child(4),
   .pricing-grid:has(.plan-checks li:nth-child(4):hover) .feature-list li:nth-child(4),
   .pricing-grid:has(.plan-checks li:nth-child(4):hover) .plan-checks li:nth-child(4),

   .pricing-grid:has(.feature-list li:nth-child(5):hover) .plan-checks li:nth-child(5),
   .pricing-grid:has(.plan-checks li:nth-child(5):hover) .feature-list li:nth-child(5),
   .pricing-grid:has(.plan-checks li:nth-child(5):hover) .plan-checks li:nth-child(5),

   .pricing-grid:has(.feature-list li:nth-child(6):hover) .plan-checks li:nth-child(6),
   .pricing-grid:has(.plan-checks li:nth-child(6):hover) .feature-list li:nth-child(6),
   .pricing-grid:has(.plan-checks li:nth-child(6):hover) .plan-checks li:nth-child(6),

   .pricing-grid:has(.feature-list li:nth-child(7):hover) .plan-checks li:nth-child(7),
   .pricing-grid:has(.plan-checks li:nth-child(7):hover) .feature-list li:nth-child(7),
   .pricing-grid:has(.plan-checks li:nth-child(7):hover) .plan-checks li:nth-child(7),

   .pricing-grid:has(.feature-list li:nth-child(8):hover) .plan-checks li:nth-child(8),
   .pricing-grid:has(.plan-checks li:nth-child(8):hover) .feature-list li:nth-child(8),
   .pricing-grid:has(.plan-checks li:nth-child(8):hover) .plan-checks li:nth-child(8),

   .pricing-grid:has(.feature-list li:nth-child(9):hover) .plan-checks li:nth-child(9),
   .pricing-grid:has(.plan-checks li:nth-child(9):hover) .feature-list li:nth-child(9),
   .pricing-grid:has(.plan-checks li:nth-child(9):hover) .plan-checks li:nth-child(9),

   .pricing-grid:has(.feature-list li:nth-child(10):hover) .plan-checks li:nth-child(10),
   .pricing-grid:has(.plan-checks li:nth-child(10):hover) .feature-list li:nth-child(10),
   .pricing-grid:has(.plan-checks li:nth-child(10):hover) .plan-checks li:nth-child(10),

   .pricing-grid:has(.feature-list li:nth-child(11):hover) .plan-checks li:nth-child(11),
   .pricing-grid:has(.plan-checks li:nth-child(11):hover) .feature-list li:nth-child(11),
   .pricing-grid:has(.plan-checks li:nth-child(11):hover) .plan-checks li:nth-child(11),

   .pricing-grid:has(.feature-list li:nth-child(12):hover) .plan-checks li:nth-child(12),
   .pricing-grid:has(.plan-checks li:nth-child(12):hover) .feature-list li:nth-child(12),
   .pricing-grid:has(.plan-checks li:nth-child(12):hover) .plan-checks li:nth-child(12),

   .pricing-grid:has(.feature-list li:nth-child(13):hover) .plan-checks li:nth-child(13),
   .pricing-grid:has(.plan-checks li:nth-child(13):hover) .feature-list li:nth-child(13),
   .pricing-grid:has(.plan-checks li:nth-child(13):hover) .plan-checks li:nth-child(13),

   .pricing-grid:has(.feature-list li:nth-child(14):hover) .plan-checks li:nth-child(14),
   .pricing-grid:has(.plan-checks li:nth-child(14):hover) .feature-list li:nth-child(14),
   .pricing-grid:has(.plan-checks li:nth-child(14):hover) .plan-checks li:nth-child(14) {
       background-color: #f1f5f9 !important;
   }

   /* Icon Color Change on Row Hover */
   .pricing-grid:has(.feature-list li:nth-child(1):hover) .plan-checks li:nth-child(1) i,
   .pricing-grid:has(.plan-checks li:nth-child(1):hover) .plan-checks li:nth-child(1) i,
   .pricing-grid:has(.feature-list li:nth-child(2):hover) .plan-checks li:nth-child(2) i,
   .pricing-grid:has(.plan-checks li:nth-child(2):hover) .plan-checks li:nth-child(2) i,
   .pricing-grid:has(.feature-list li:nth-child(3):hover) .plan-checks li:nth-child(3) i,
   .pricing-grid:has(.plan-checks li:nth-child(3):hover) .plan-checks li:nth-child(3) i,
   .pricing-grid:has(.feature-list li:nth-child(4):hover) .plan-checks li:nth-child(4) i,
   .pricing-grid:has(.plan-checks li:nth-child(4):hover) .plan-checks li:nth-child(4) i,
   .pricing-grid:has(.feature-list li:nth-child(5):hover) .plan-checks li:nth-child(5) i,
   .pricing-grid:has(.plan-checks li:nth-child(5):hover) .plan-checks li:nth-child(5) i,
   .pricing-grid:has(.feature-list li:nth-child(6):hover) .plan-checks li:nth-child(6) i,
   .pricing-grid:has(.plan-checks li:nth-child(6):hover) .plan-checks li:nth-child(6) i,
   .pricing-grid:has(.feature-list li:nth-child(7):hover) .plan-checks li:nth-child(7) i,
   .pricing-grid:has(.plan-checks li:nth-child(7):hover) .plan-checks li:nth-child(7) i,
   .pricing-grid:has(.feature-list li:nth-child(8):hover) .plan-checks li:nth-child(8) i,
   .pricing-grid:has(.plan-checks li:nth-child(8):hover) .plan-checks li:nth-child(8) i,
   .pricing-grid:has(.feature-list li:nth-child(9):hover) .plan-checks li:nth-child(9) i,
   .pricing-grid:has(.plan-checks li:nth-child(9):hover) .plan-checks li:nth-child(9) i,
   .pricing-grid:has(.feature-list li:nth-child(10):hover) .plan-checks li:nth-child(10) i,
   .pricing-grid:has(.plan-checks li:nth-child(10):hover) .plan-checks li:nth-child(10) i,
   .pricing-grid:has(.feature-list li:nth-child(11):hover) .plan-checks li:nth-child(11) i,
   .pricing-grid:has(.plan-checks li:nth-child(11):hover) .plan-checks li:nth-child(11) i,
   .pricing-grid:has(.feature-list li:nth-child(12):hover) .plan-checks li:nth-child(12) i,
   .pricing-grid:has(.plan-checks li:nth-child(12):hover) .plan-checks li:nth-child(12) i,
   .pricing-grid:has(.feature-list li:nth-child(13):hover) .plan-checks li:nth-child(13) i,
   .pricing-grid:has(.plan-checks li:nth-child(13):hover) .plan-checks li:nth-child(13) i,
   .pricing-grid:has(.feature-list li:nth-child(14):hover) .plan-checks li:nth-child(14) i,
   .pricing-grid:has(.plan-checks li:nth-child(14):hover) .plan-checks li:nth-child(14) i {
       color: var(--bs-primary) !important;
       transform: scale(1.2);
   }

   @media (max-width: 991.98px) {
       .feature-list li {
           background-color: #f8fafc !important;
           position: sticky;
           left: 0;
           z-index: 9;
           box-shadow: 2px 0 5px rgba(0,0,0,0.02);
       }
   }