/* ===== FAQ PAGE ===== */


/* ===== HERO ===== */
/* billing-note used as a link — strip the underline */
a.billing-note {
	text-decoration: none;
}


/* ===== TOPIC CARDS ===== */
.topic-cards-section {
	padding: 3rem 2rem 1rem;
	background: var(--bg-off-white);
}
.topic-cards-inner {
	max-width: 1000px;
	margin: 0 auto;
}
.topic-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

.topic-card-link {
	text-decoration: none;
}
.topic-card {
	background: var(--bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 1.4rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	transition: box-shadow 0.2s, transform 0.2s;
}
.topic-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.topic-card-icon {
	width: 38px;
	height: 38px;
	min-width: 38px;
	background: var(--accent-bg);
	color: var(--accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.topic-card-title {
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--text-primary);
}
.topic-card-subtitle {
	font-size: 0.78rem;
	color: var(--text-muted);
	margin-top: 0.1rem;
}


/* ===== FAQ SECTION HEADERS ===== */
/* Override the plans.css .section-header which is centered — FAQ headers are left-aligned */
.faq-section .faq-section-header {
	text-align: left;
	
}
.faq-section h2 {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	margin-bottom: 1.5rem;
}


/* ===== FAQ LIST OVERRIDES ===== */
/* Reset the margin-top that plans.css sets on .faq-list */
.faq-section .faq-list {
	margin-top: 0;
	margin-bottom: 5rem;
}
/* Last category before the section ends — less bottom margin */
.faq-section .faq-list:last-of-type {
	margin-bottom: 1rem;
}


/* ===== INLINE LINKS ===== */
/* Accent-colored links inside FAQ answers */
.faq-item a {
	color: var(--accent);
}


/* ===== AI PROMPTS LIST ===== */
/* The indented italics prompt examples inside an answer */
.faq-prompts {
	margin-top: 0.5rem;
	padding-top: 0;
}


/* ===== STEP LIST ===== */
/* Numbered steps inside answers (Facebook/Instagram how-to) */
.faq-steps {
	margin-top: 0.5rem;
	padding-top: 0;
}


/* ===== CTA BUTTONS ROW ===== */
.cta-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}


/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
	.topic-cards-section { padding: 2rem 1.25rem 1rem; }
	.topic-cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
	.topic-cards-grid { grid-template-columns: 1fr; }
}