/* ==========================================================================
   FEATURES PAGE (page-specific styles)
   ========================================================================== */

.features-page {
	display: flex;
	flex-direction: column;
}

/* Hero
   ========================================================================== */

.features-page__hero {
	position: relative;
	padding-bottom: calc(var(--space-lg) + 20px);
	text-align: center;
	overflow: hidden;
}

.features-page__hero-visual {
	position: relative;
	display: flex;
	justify-content: center;
}

.features-page__hero-img {
	width: 100%;
	max-width: 500px;
	height: auto;
	object-fit: contain;
}

.features-page__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	letter-spacing: -0.02em;
	color: var(--color-fg);
	max-width: 846px;
	margin: calc(-1 * var(--space-lg)) auto 0;
	position: relative;
	z-index: 1;
}

.features-page__section {
	padding-top: 20px;
	padding-bottom: 20px;
}

.features-page .cta-video {
	margin-top: 30px;
}

/* Feature Section (single tabbed section)
   ========================================================================== */

/* Match Figma 12px section padding for mobile/tablet */
@media (max-width: 1023px) {
	.features-page__section .container {
		padding-left: 12px;
		padding-right: 12px;
	}
}

.features-page__layout {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Sidebar
   ========================================================================== */

.features-page__sidebar {
	flex-shrink: 0;
}

.features-page__nav {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.features-page__nav-link {
	font-family: var(--font-heading);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-semibold);
	color: var(--color-muted);
	text-decoration: none;
	transition: none; /* GSAP handles all nav transitions */
	white-space: nowrap;
	background: none;
	border: none;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0;
	cursor: pointer;
	text-align: left;
	line-height: var(--line-height-tight);
	letter-spacing: -0.02em;
}

.features-page__nav-link--active {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-semibold);
	color: var(--color-fg);
	line-height: var(--line-height-tight);
	letter-spacing: -0.02em;
	white-space: normal;
	text-align: center;
}

@media (hover: hover) {
	.features-page__nav-link:not(.features-page__nav-link--active):hover {
		color: var(--color-fg);
	}
}

/* Panels container */
.features-page__panels {
	flex: 1 0 0;
	min-width: 0;
	position: relative;
}

/* Cards panel */
.features-page__cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.features-page__cards[hidden] {
	display: none;
}

/* ==========================================================================
   TABLET (>= 768px)
   ========================================================================== */

@media (min-width: 768px) {

	.features-page__hero-visual::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 55%, var(--color-bg) 85%);
		pointer-events: none;
	}
	.features-page__hero {
		padding-bottom: 50px;
	}

	.features-page__section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.features-page .cta-video {
		margin-top: 40px;
	}

	.features-page__hero-visual {
		max-height: 577px;
		overflow: hidden;
	}

	.features-page__hero-img {
		max-width: none;
	}

	.features-page__title {
		margin-top: -188px;
	}

	.features-page__layout {
		flex-direction: row;
		gap: 16px;
	}

	.features-page__sidebar {
		flex-shrink: 0;
		position: sticky;
		top: calc(72px + var(--space-md));
		align-self: flex-start;
	}

	.features-page__nav {
		flex-direction: column;
		gap: 16px;
		align-items: flex-end;
	}

	.features-page__nav-link {
		text-align: right;
	}

	.features-page__nav-link--active {
		width: 207px;
		justify-content: end;
	}

}

/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */

@media (min-width: 1024px) {

	.features-page__section {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.features-page .cta-video {
		margin-top: 50px;
	}

	.features-page__hero-visual {
		max-height: 646px;
		overflow: hidden;
	}

	.features-page__hero-img {
		max-width: 720px;
	}

	.features-page__title {
		margin-top: -177px;
	}

	.features-page__layout {
		gap: 16px;
		padding-inline: 48px;
	}

	.features-page__sidebar {
		width: 388px;
	}

}