/* Define custom brand colors for Tailwind */
        .bg-booster-primary { background-color: #0073AA; }
        .bg-booster-dark { background-color: #00507C; }
        .bg-booster-accent { background-color: #FF5722; }
        .bg-booster-light { background-color: #F5F8FA; }
        .bg-booster-testimonial { background-color: #305C8A; }
        .bg-booster-pill { background-color: #eaf3f7; }
        .text-booster-primary { color: #0073AA; }
        .text-booster-dark { color: #00507C; }
        .text-booster-accent { color: #FF5722; }
        .text-booster-subtext { color: #555; }
        .border-booster-primary { border-color: #0073AA; }
		    .filled-star { color: #FF5722; }
        .font-extrabold { font-weight: 800 !important; }

        /* Icon colors */
        .orange-icon svg { stroke: #FF5722; }
        .blue-icon svg { stroke: #0073AA; }

        /* Dotted Pattern Overlay (for Results & Testimonial) */
        .dotted-pattern::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url('data:image/svg+xml,%3Csvg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="16" cy="16" r="1.5" fill="%2300507C"/%3E%3C/svg%3E');
            background-repeat: repeat;
            background-size: 32px;
            opacity: 0.05;
            pointer-events: none;
        }
        
        /* Section-specific background colors */
        .results { background-color: #F5F8FA; }
        .testimonial-block { background-color: #305C8A; }

        /* Results Section Styles */
        .results-h2  { @apply text-3xl md:text-4xl font-extrabold text-[#0073AA] mb-4; }
        .results-sub { @apply text-base md:text-lg; }
        .result-card { @apply bg-white rounded-lg p-6 flex flex-col items-center text-center shadow-sm hover:shadow-md transition; }
        .result-icon { @apply w-12 h-12 flex items-center justify-center rounded-full bg-[#E8F9EF] mb-4; }
        .result-icon svg { @apply w-6 h-6 stroke-[#34C759] stroke-2; }
        .result-label { @apply font-semibold text-lg text-[#0073AA] mb-2; }
        .result-copy { @apply text-sm text-[#555] leading-snug; }
      /* ===== page layout utilities ===== */
      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
      }

      .section {
        padding: 6rem 1.5rem;
        border-bottom: 1px solid var(--booster-light-gray);
      }
      .section:last-child {
        border-bottom: none;
      }

      /* ===== heading for modules section ===== */
      .section[data-section-id="modules"] h2 {
        font-family: 'Inter', sans-serif;
        font-size: clamp(2.2rem, 4.5vw, 3rem);
        font-weight: 800;
        color: var(--booster-dark-blue);
        text-align: center;
        margin-bottom: 2rem;
        line-height: 1.2;
      }

      /* ===== 3-column grid, always exactly 3 cards per row ===== */
      .feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
      }

      /* ===== the cards themselves ===== */
      .feature-card {
        background: var(--booster-white);
        border: 1px solid var(--booster-light-gray);
        border-radius: .75rem;
        padding: 1.75rem;
        display: flex;
        flex-direction: column;
        transition: transform .2s, box-shadow .2s;
        box-shadow: 0 4px 6px rgba(0,0,0,0.04);
      }
      .feature-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      }

      /* icon at top */
      .feature-card .icon {
        color: var(--booster-orange);
        margin-bottom: 1rem;
      }

      /* ===== title + badge row (UPDATED) ===== */
      .feature-card h3 {
        font-family: 'Inter', sans-serif;
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--booster-dark-blue);
        margin: 0;
        display: flex;
        align-items: flex-start;      /* align badge to top, not center */
        justify-content: space-between;
        gap: .5rem;                   /* space between title & pill */
      }

      /* ===== pill tweaks (UPDATED) ===== */
      .badge {
        display: inline-block;        /* ensure padding works predictably */
        white-space: nowrap;          /* don’t wrap “FREE LITE” */
        line-height: 1;               /* vertically centers text */
        font-size: .75rem;            /* keeps pills compact */
        font-weight: 600;           
        text-transform: uppercase;    
        padding: .15rem .6rem;        /* tighter top/bottom padding */
        border-radius: 9999px;        
        vertical-align: middle;       /* align with text baseline */
        margin-left: .5rem;           /* space from the title text */
      }

      /* free pill */
      .badge[data-tier="free"] {
        background: #34C759;
        color: #fff;
        border: none;
      }

      /* free-lite pill */
      .badge[data-tier="free-lite"] {
        background: #fff;
        color: #34C759;
        border: 1.5px solid #34C759;   /* slightly thinner border */
      }

      /* elite pill */
      .badge[data-tier="elite"] {
        background: #FFE8D9;
        color: #C24E00;
        border: none;
      }

      /* description text */
      .feature-card p {
        margin-top: .5rem;
        color: #334E68;
        font-size: .9375rem;
        line-height: 1.5;
      }

      /* ===== NEW styles for description and CTA below grid ===== */
      .modules-description {
        text-align: center;
        margin-top: 2.5rem;
        color: #555;
        font-size: 1rem;
        line-height: 1.6;
      }
      .modules-cta {
        color: var(--booster-dark-blue);
        font-weight: 600;
        text-decoration: none;
        transition: color .2s;
      }
      .modules-cta:hover {
        color: #0073AA; /* primary blue */
        text-decoration: underline;
      }
        blockquote{
          border-left: 0px;
        }

.page-template-store-owner-persona h2.text-booster-subtext,
.page-template-developers-persona h2.text-booster-subtext,
.page-template-agencies-persona h2.text-booster-subtext{
    font-weight: 400 !important;
}

.modules-description .modules-cta:hover {
  text-decoration: underline !important;
}

.page-template-store-owner-persona .bottom-link .campare-free:hover,
.page-template-developers-persona .bottom-link .campare-free:hover,
.page-template-agencies-persona .bottom-link .campare-free:hover {
  color: #0073AA !important;
}

.page-template-store-owner-persona svg,
.page-template-developers-persona svg,
.page-template-agencies-persona svg {
    stroke-width: 2px;
}

.page-template-store-owner-persona #results svg,
.page-template-developers-persona #results svg,
.page-template-agencies-persona #results svg {
    stroke: #16a34a;
}

.page-template-store-owner-persona .toolkit-link,
.page-template-developers-persona .toolkit-link,
.page-template-agencies-persona .toolkit-link {
  color: #D1D5DB !important;
  text-decoration: underline !important;
  transition: color .2s;
}

.page-template-store-owner-persona .toolkit-link:hover,
.page-template-developers-persona .toolkit-link:hover,
.page-template-agencies-persona .toolkit-link:hover {
  color: #ffffff !important;
}

.page-template-developers-persona .bold-icon svg {
  stroke-width: 18px;
}

@media (max-width:991px) {
  .feature-card h3 {
    flex-direction: column;
  }
  .badge {
    margin-left: 0px;
  }
  .feature-card {
    padding: 0.95rem;
  }
}

@media (max-width:767px) {
  .page-template-store-owner-persona h1,
  .page-template-developers-persona h1,
  .page-template-agencies-persona h1 {
    font-size: 36px !important;
  }

  .feature-grid {
    display: flex;
    overflow: scroll;
  }

  .feature-card {
    min-width: 80%;
  }
}