/* 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;
}

.use_cases-template-use-case-template h2.text-booster-subtext{
font-weight: 400 !important;
}

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

.use_cases-template-use-case-template .bottom-link .campare-free:hover {
color: #0073AA !important;
}

.use_cases-template-use-case-template svg {
stroke-width: 2px;
}

.use_cases-template-use-case-template #results svg {
stroke: #16a34a;
}

.use_cases-template-use-case-template .toolkit-link {
color: #D1D5DB !important;
text-decoration: underline !important;
transition: color .2s;
}

.use_cases-template-use-case-template .toolkit-link:hover {
color: #ffffff !important;
}

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

@media (max-width:767px) {
.use_cases-template-use-case-template h1 {
font-size: 36px !important;
}

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

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

.recommended-module .badge {
	min-width: max-content;
}