/* FAQ page hero uses the shared .page-hero (components.css) — same markup
   as the pricing page. Only the quick-nav, category sections, and CTA
   below are specific to this page. */

/* Quick-nav: sticky category jump bar directly under the hero, pinned
   below the site header (76px, matching the header's current real
   rendered height — same offset used by the pricing page's compare table
   header and the blog quicknav) as you scroll. On desktop the 5
   categories sit in equal-width columns spanning the same 1264px
   container as the site header's logo/CTA, so the row starts/ends flush
   with them and the middle category lands dead center. Below 768px it
   becomes a horizontally scrollable strip instead, since equal columns
   would crush the longer labels. Active category is toggled by faq.js via
   scroll position. */
.faq-quicknav {
	position: sticky;
	top: 76px;
	z-index: 9;
	background: #f5f5f6;
	box-shadow: 0px 4px 7px -3px rgb(223 223 223);
}
.faq-quicknav__scroll {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: 0 24px;
}
.faq-quicknav__link {
	text-align: center;
	padding: 18px 8px;
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 600;
	color: var(--color-ink);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.faq-quicknav__link:hover { color: var(--color-purple); }
.faq-quicknav__link.is-active { color: var(--color-purple); border-bottom-color: var(--color-purple); }

/* The header itself gets shorter below 900px (header.css hides the nav
   links/actions row and drops its own padding) — 76px was only ever
   correct for the taller desktop header, so below that breakpoint the
   quicknav needs to stick at the real, shorter mobile header height
   (measured 69px) or it leaves a visible gap between the two. */
@media (max-width: 900px) {
	.faq-quicknav { top: 69px; }
}

@media (max-width: 768px) {
	.faq-quicknav__scroll {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.faq-quicknav__scroll::-webkit-scrollbar { display: none; }
	.faq-quicknav__link { flex-shrink: 0; }
}

/* Category sections — title + underline centered, and the accordion list
   (plain .faq-item rows, same styling as the homepage/pricing FAQ) is
   centered as a block instead of stretching the full container width. */
.faq-category { background: #ffffff; padding-top: 56px; padding-bottom: 16px; }
.faq-category__title {
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-ink);
	text-align: center;
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 24px;
}
.faq-category__title::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 56px;
	height: 4px;
	background: var(--color-purple);
	border-radius: 2px;
}
.faq-category__list { max-width: 820px; margin: 0 auto; }

@media (max-width: 768px) {
	.faq-category { padding-top: 40px; }
	.faq-category__title { font-size: 22px; }
}

.faq-cta { text-align: center; }
.faq-cta .section-subtitle a { color: var(--color-purple); font-weight: 600; text-decoration: underline; }
.faq-cta .section-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }