/* =========================================================
   PRICING TABLE — CLEAN CONSOLIDATED STYLES (Zoho Sites)
   ========================================================= */
/* 0) Reset inside the component (prevents theme bleed) */
.plans-compare * { box-sizing: border-box; }
.plans-compare hr { display: none; } /* some themes inject <hr> */
.plans-compare .sqs-block { margin: 0 !important; } /* if wrappers add spacing */

/* 1) Toggle control */
.pricing-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:18px auto 16px;
  font-weight:700;
}

/* 2) Wrapper + card shell */
/* Wrapper for horizontal scroll on mobile */
.pricing-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.plans-compare{
  max-width:1200px;
  margin:0 auto;
  padding:0 12px;             /* tighter than original 24px for card look */
  font-size:16px;
  line-height:1.5;
}
.plans-box{
  width:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  overflow:hidden;
}

/* 3) Grid layout (header & rows) */
.plans-header,
.plan-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;                      /* table look */
  align-items:start;
}
.plans-header{
  border-bottom:1px solid rgba(0,0,0,.08);
}
.plan-row{
  border-top:1px solid rgba(0,0,0,.06);
}

/* 4) Cells */
.plans-header .plan-col,
.plan-row .plan-col{
  padding:22px 24px;
  position:relative;
}
.plans-header .plan-col:not(:last-child),
.plan-row .plan-col:not(:last-child){
  border-right:1px solid rgba(0,0,0,.06);
}

/* 5) Column headings */
.plan-col h3{
/* Use site css 
  margin:0;
  text-align:center;
  font-size:28px;
  line-height:1.25;
  font-weight:800;*/
  color:#D200BE !important;   /* Updated to match exact brand color */
}

/* 5b) Subtitle color match - ADD THIS */
.plan-col h3 .subtitle{
  color:#D200BE !important;   /* Ensure subtitle matches h3 color */
  font-weight:700;
}

/* 6) Field labels + content rhythm */
.plan__label{
  margin-bottom:6px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(0,0,0,.55);
  text-transform:uppercase;
}
.plan-col > div{ margin:4px 0; }

/* 7) Pricing visibility (Annual default visible) */
.monthly-price{ display:none; }
.annual-price{ display:block; }

/* 8) Desktop fine-tuning */
@media (min-width:901px){
  .plan-col p, .plan-col div{ line-height:1.45; }
}

/* 9) Mobile responsiveness - Keep 3 columns with horizontal scroll */
@media (max-width:900px){
  .pricing-wrapper {
    padding: 0 15px;
  }
  
  .plans-compare {
    overflow-x: visible;
    overflow-y: visible;
    padding: 0;
    max-width: none;
  }
  
  .plans-box { 
    border-radius:14px;
    min-width: 750px;
    display: inline-block;
  }
  
  .plans-header,
  .plan-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
  }
  
  .plans-header .plan-col, 
  .plan-row .plan-col{ 
    padding:18px 15px;
  }
  
  .plan-col p, 
  .plan-col div{ 
    line-height:1.5; 
    font-size: 14px;
  }
  
  .plan__label {
    font-size: 10px;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .pricing-wrapper {
    padding: 0 10px;
  }
  
  .plans-box {
    min-width: 700px;
  }
  
  .plans-header,
  .plan-row {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
  
  .plans-header .plan-col,
  .plan-row .plan-col {
    padding: 16px 12px;
  }
  
  .plan-col p,
  .plan-col div {
    font-size: 13px;
  }
}

/* ===== Optional: "Recommended" middle column highlight =====
   Add class="is-recommended" to the middle column's .plan-col in the header
   and optionally to the corresponding content cells. Uncomment to use. */
/*
.plans-header .plan-col.is-recommended{
  background:#F9F5FF;
}
@media (min-width:901px){
  .plans-header .plan-col.is-recommended{
    box-shadow: inset 0 -2px 0 #C328FF;
  }
}
*/



<script>
document.addEventListener("DOMContentLoaded", function() {
  const style = document.createElement("style");
  style.innerHTML = `