/* Marketing Pages */
.marketing-layout {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.marketing-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6);
	border-bottom: 1px solid var(--border);
	background-color: var(--background);
	min-height: calc(var(--spacing) * 14);
	color: var(--foreground);

	>div {
		flex-shrink: 0;
	}

	.logo-link {
		text-decoration: none;
		color: inherit;

		&:hover {
			color: var(--foreground);
		}
	}

	.logo .icon {
		width: calc(var(--spacing) * 5);
		height: calc(var(--spacing) * 5);
	}

	.nav-links {
		display: flex;
		gap: calc(var(--spacing) * 2);
		align-items: center;
		flex-shrink: 0;

		a {
			white-space: nowrap;
			text-decoration: none;
		}

		a:not([class*="btn"]) {
			font-size: var(--text-sm);
			color: var(--muted-foreground);
			margin-right: calc(var(--spacing) * 3);
			line-height: var(--leading-normal);

			@media screen and (max-width: 767px) {
				display: none;
			}

			&:hover {
				text-decoration: underline;
				color: var(--foreground);
			}
		}

		@media screen and (max-width: 400px) {
			a.btn-outline {
				display: none;
			}
		}
	}

	@media screen and (max-width: 767px) {
		padding-left: 0;
		padding-right: calc(var(--spacing) * 4);
	}
}

.marketing-main,
.marketing-main-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
	min-height: 80dvh;

	h2 {
		font-weight: var(--font-weight-bold);
	}

	a:not([class*="btn"]) {
		color: var(--primary-contrast);
	}

	@media screen and (min-width: 768px) {
		padding: calc(var(--spacing) * 8) calc(var(--spacing) * 4);
	}

	@media screen and (min-width: 1280px) {
		padding: calc(var(--spacing) * 12) calc(var(--spacing) * 6);
	}

	>section>header {
		margin-bottom: calc(var(--spacing) * 6);
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(var(--spacing) * 4);

		h2 {
			font-size: var(--text-2xl);
			font-weight: var(--font-weight-semibold);
			margin-bottom: 0;
		}

		p {
			font-size: var(--text-lg);
			color: var(--muted-foreground);
			margin: 0;
		}

		.btn {
			margin-top: calc(var(--spacing) * 2);
		}
	}
}


/* Home page: main uses display: contents so full-bleed sections can use width: 100% of layout. */
.marketing-layout .marketing-main {
	display: contents;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Flex children default min-width: auto; without this, wide max-content carousels force horizontal overflow on narrow viewports. */
.marketing-layout .marketing-main-inner {
	min-width: 0;
	width: 100%;
}

.hero-subtitle-section {
	width: 100%;
	text-align: center;
	padding: calc(var(--spacing) * 8) 0;
	background-color: var(--primary);
	color: var(--primary-foreground);
	padding-left: calc(var(--spacing) * 4);
	padding-right: calc(var(--spacing) * 4);

	@media screen and (min-width: 768px) {
		padding-left: calc(var(--spacing) * 6);
		padding-right: calc(var(--spacing) * 6);
	}

	@media screen and (min-width: 1280px) {
		padding-left: calc(var(--spacing) * 8);
		padding-right: calc(var(--spacing) * 8);
	}

	h2 {
		font-size: var(--text-2xl);
		font-weight: var(--font-weight-semibold);
		color: inherit;
		max-width: 800px;
		margin: 0 auto calc(var(--spacing) * 4);
		line-height: 1.3;
	}

	.hero-subtitle {
		font-size: var(--text-lg);
		color: inherit;
		opacity: 0.95;
		max-width: 800px;
		margin: auto;
		line-height: 1.6;
	}
}

.used-by {
	text-align: center;
	padding: calc(var(--spacing) * 8) 0;
	background-color: var(--background);
	overflow: hidden;

	h2 {
		font-size: var(--text-xl);
		font-weight: var(--font-weight-medium);
		margin-bottom: calc(var(--spacing) * 4);
	}

	.used-by-heading {
		display: block;
		font-size: var(--text-3xl);
	}

	.trusted-by__track-wrap {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
		-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
		margin: calc(var(--spacing) * 12) 0;
	}

	.trusted-by__track {
		display: flex;
		align-items: center;
		gap: calc(var(--spacing) * 8);
		width: max-content;
		animation: trusted-by-scroll 46s linear infinite;
	}

	.trusted-by__track-wrap:hover .trusted-by__track {
		animation-play-state: paused;
	}

	.trusted-by__logo {
		height: calc(var(--spacing) * 12);
		min-width: calc(var(--spacing) * 30);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.trusted-by__logo img {
		max-height: calc(var(--spacing) * 8);
		max-width: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
		filter: grayscale(1) brightness(0.4) contrast(1.8);
		opacity: 0.72;
		transition: opacity 0.2s ease;
	}

	.trusted-by__logo--shook img {
		max-height: calc(var(--spacing) * 9);
	}

	.trusted-by__logo--luthor img {
		width: auto;
		height: calc(var(--spacing) * 5);
		max-height: none;
		aspect-ratio: 104 / 20;
	}

	.trusted-by__logo:hover img {
		opacity: 0.92;
	}

	.trusted-by__logo--beemo {
		color: var(--muted-foreground);
		font-size: var(--text-xl);
		letter-spacing: 0.01em;
		opacity: 0.82;
	}

	.trusted-by__beemo-bold {
		font-weight: 700;
	}

	.trusted-by__beemo-light {
		font-weight: 400;
		margin-left: calc(var(--spacing) * 1);
	}

	p {
		color: var(--muted-foreground);
		max-width: 900px;
		margin: 0 auto;
	}

	@media screen and (max-width: 767px) {
		padding-inline: 0;

		h2 {
			padding-inline: calc(var(--spacing) * 2);
			max-width: 100%;
		}

		.used-by-heading {
			font-size: var(--text-xl);
			line-height: 1.3;
			hyphens: auto;
			overflow-wrap: break-word;
		}

		.trusted-by__track {
			gap: calc(var(--spacing) * 4);
		}

		.trusted-by__logo {
			min-width: calc(var(--spacing) * 16);
			height: calc(var(--spacing) * 10);
			padding-inline: calc(var(--spacing) * 1);
		}

		.trusted-by__logo img {
			max-height: calc(var(--spacing) * 6);
		}

		.trusted-by__logo--shook img {
			max-height: calc(var(--spacing) * 7);
		}

		.trusted-by__logo--beemo {
			font-size: var(--text-base);
			flex-wrap: wrap;
			text-align: center;
			row-gap: calc(var(--spacing) * 0.5);
		}

		.trusted-by__beemo-light {
			margin-left: 0;
		}
	}
}

@media (prefers-color-scheme: dark) {
	/* Pure white marks on dark background (same trick as monochrome nav icons). */
	.used-by .trusted-by__logo img {
		filter: brightness(0) invert(1);
		opacity: 0.94;
	}

	.used-by .trusted-by__logo:hover img {
		opacity: 1;
	}

	.used-by .trusted-by__logo--beemo {
		color: var(--foreground);
		opacity: 0.96;
	}
}

@keyframes trusted-by-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.used-by .trusted-by__track {
		animation: none;
	}
}

.walkthrough-video {
	padding: calc(var(--spacing) * 8) 0;

	h2 {
		font-size: var(--text-2xl);
		font-weight: var(--font-weight-semibold);
		text-align: center;
		margin: calc(var(--spacing) * 8) 0;
	}

	.video-container {
		margin-inline: auto;
	}
}

.personas {
	.cards {
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(var(--spacing) * 5);

		@media screen and (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
		}

		.card {
			width: 100%;
			text-align: left;

			header {
				padding-bottom: calc(var(--spacing) * 3);
				border-bottom: 1px solid var(--border);

				h3 {
					font-size: var(--text-lg);
					font-weight: var(--font-weight-medium);
					color: var(--muted-foreground);
					margin: 0;
				}
			}

			section {
				flex: 1;
			}

			h4 {
				font-size: var(--text-lg);
				font-weight: var(--font-weight-semibold);
				margin-bottom: calc(var(--spacing) * 3);
				line-height: 1.3;
			}

			ul {
				list-style: disc;
				padding-left: calc(var(--spacing) * 5);
				display: flex;
				flex-direction: column;
				gap: calc(var(--spacing) * 2);
				margin: 0;

				li {
					color: var(--muted-foreground);
					line-height: 1.5;
				}
			}

			footer {
				margin-top: auto;
				padding-top: calc(var(--spacing) * 4);
				justify-content: center;
			}
		}
	}
}

.feature-showcase {
	width: 100%;
	padding: calc(var(--spacing) * 12) 0;
	background-color: var(--muted);

	&.feature-showcase--hero .feature-explanation {
		h1 {
			font-size: var(--text-4xl);
			font-weight: var(--font-weight-bold);
			margin-bottom: calc(var(--spacing) * 4);
			line-height: 1.2;

			@media screen and (min-width: 768px) {
				font-size: 3rem;
			}
		}
	}

	.feature-showcase-content {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 calc(var(--spacing) * 4);
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(var(--spacing) * 8);

		@media screen and (min-width: 1024px) {
			grid-template-columns: 1fr 1.5fr;
			gap: calc(var(--spacing) * 12);
			padding: 0 calc(var(--spacing) * 6);
		}
	}

	.feature-explanation {
		h2 {
			font-size: var(--text-2xl);
			font-weight: var(--font-weight-semibold);
			margin-bottom: calc(var(--spacing) * 4);
			line-height: 1.3;
		}

		p {
			color: var(--muted-foreground);
			margin-bottom: calc(var(--spacing) * 6);
			line-height: 1.6;
		}

		ul {
			list-style: none;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: calc(var(--spacing) * 3);

			li {
				position: relative;
				padding-left: calc(var(--spacing) * 4);

				&::before {
					content: "•";
					position: absolute;
					left: 0;
					color: var(--primary-contrast);
					font-weight: var(--font-weight-bold);
				}
			}
		}

		>a[class*="btn"] {
			margin-top: calc(var(--spacing) * 4);
		}
	}

	.feature-demo {
		display: flex;
		align-items: center;
		justify-content: center;
		user-select: none;
		-webkit-user-select: none;
		min-width: 0;
		overflow: hidden;

		.database-card {
			padding: calc(var(--spacing) * 4);
			width: 100%;
			max-width: 800px;
			gap: 0;

			.database-header {
				display: flex;
				flex-wrap: wrap;
				gap: calc(var(--spacing) * 2);
				margin-bottom: calc(var(--spacing) * 3);

				.database-search {
					flex: 1;
					display: flex;
					align-items: center;
					gap: calc(var(--spacing) * 2);
					background: var(--background);
					border: 1px solid var(--border);
					border-radius: var(--radius);
					padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);

					svg {
						width: 16px;
						height: 16px;
						color: var(--muted-foreground);
						flex-shrink: 0;
					}

					.database-input {
						flex: 1;
						border: none;
						background: transparent;
						font-size: var(--text-sm);
						color: var(--foreground);
						outline: none;
						cursor: default;

						&::placeholder {
							color: var(--muted-foreground);
						}

						&[readonly] {
							cursor: default;
						}
					}
				}

				.database-filter-btn,
				.database-action-btn {
					display: flex;
					align-items: center;
					gap: calc(var(--spacing) * 2);
					padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
					background: var(--background);
					border: 1px solid var(--border);
					border-radius: var(--radius);
					font-size: var(--text-sm);
					cursor: pointer;
					white-space: nowrap;

					svg {
						width: 16px;
						height: 16px;
						color: var(--muted-foreground);
					}
				}

				.database-filter-btn .filter-badge {
					margin-left: calc(var(--spacing) * 1);
				}
			}

			.database-filters {
				display: flex;
				flex-wrap: wrap;
				gap: calc(var(--spacing) * 2);
				margin-bottom: calc(var(--spacing) * 4);
				padding-bottom: calc(var(--spacing) * 3);
				border-bottom: 1px solid var(--border);

				.filter-chip {
					background: var(--muted);

					svg {
						width: 14px;
						height: 14px;
						color: var(--muted-foreground);
					}
				}
			}

			.database-results {
				margin-bottom: calc(var(--spacing) * 4);

				.table-col:nth-child(n+3) {
					@media screen and (max-width: 479px) {
						display: none;
					}
				}

				.database-table-header {
					display: grid;
					grid-template-columns: 2fr 1fr;
					gap: calc(var(--spacing) * 3);
					padding: calc(var(--spacing) * 2) 0;
					border-bottom: 1px solid var(--border);
					font-size: var(--text-xs);
					font-weight: var(--font-weight-semibold);
					color: var(--muted-foreground);
					letter-spacing: 0.05em;

					@media screen and (min-width: 480px) {
						grid-template-columns: 2fr 1fr 1fr 1.5fr;
					}

					.table-col {
						display: flex;
						align-items: center;
						gap: calc(var(--spacing) * 1);

						&.sortable {
							cursor: pointer;
							user-select: none;

							&:hover {
								color: var(--foreground);
							}

							svg {
								width: 12px;
								height: 12px;
								color: var(--muted-foreground);
							}
						}
					}
				}

				.database-table-row {
					display: grid;
					grid-template-columns: 2fr 1fr;
					gap: calc(var(--spacing) * 3);
					padding: calc(var(--spacing) * 3) 0;
					border-bottom: 1px solid var(--border);
					font-size: var(--text-sm);
					transition: background-color 0.2s;

					@media screen and (min-width: 480px) {
						grid-template-columns: 2fr 1fr 1fr 1.5fr;
					}

					.table-col {
						&.firm-name {
							font-weight: var(--font-weight-medium);
						}
					}
				}
			}
		}
	}

	.personalization-card {
		padding: calc(var(--spacing) * 4);
		width: 100%;
		max-width: 800px;
		gap: 0;

		.personalization-body {
			display: grid;
			grid-template-columns: 1fr;
			gap: calc(var(--spacing) * 5);

			@media screen and (min-width: 640px) {
				grid-template-columns: 1fr 1fr;
			}
		}

		.personalization-column {
			display: flex;
			flex-direction: column;
			gap: calc(var(--spacing) * 3);
		}

		.personalization-section-title {
			font-size: var(--text-xs);
			color: var(--muted-foreground);
			display: flex;
			align-items: center;
			gap: calc(var(--spacing) * 1.5);
			margin-bottom: calc(var(--spacing) * 1);
			letter-spacing: 0.05em;
		}

		.personalization-section-title .icon {
			width: calc(var(--spacing) * 3);
			height: calc(var(--spacing) * 3);
			flex-shrink: 0;
		}

		.watchlist {
			display: flex;
			flex-direction: column;
			gap: calc(var(--spacing) * 2);
		}

		.watchlist-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: calc(var(--spacing) * 2);
			font-size: var(--text-sm);
			padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
			background: var(--background);
			border: 1px solid var(--border);
			border-radius: var(--radius);
		}

		.watchlist-name {
			font-weight: var(--font-weight-medium);
			min-width: 0;
		}

		.enum {
			display: flex;
			flex-wrap: wrap;
			gap: calc(var(--spacing) * 2);
		}

		.enum .badge-outline {
			padding-block: calc(var(--spacing) * 1);
			padding-inline: calc(var(--spacing) * 2.5);
			font-size: var(--text-xs);
			font-weight: var(--font-weight-normal);
			color: var(--foreground);
			background-color: var(--background);
			border: 1px solid var(--border);
			border-radius: calc(infinity * 1px);
		}

		.recommendation-list {
			display: flex;
			flex-direction: column;
			gap: calc(var(--spacing) * 3);
		}

		.recommendation-item {
			padding: calc(var(--spacing) * 2);
			background: var(--background);
			border: 1px solid var(--border);
			border-radius: var(--radius);

			.recommendation-firm {
				display: flex;
				align-items: center;
				gap: calc(var(--spacing) * 1.5);
				font-size: var(--text-sm);
				font-weight: var(--font-weight-medium);
			}

			.recommendation-firm .icon {
				width: calc(var(--spacing) * 3);
				height: calc(var(--spacing) * 3);
				flex-shrink: 0;
			}

			.recommendation-meta {
				font-size: var(--text-xs);
				color: var(--muted-foreground);
				margin-top: calc(var(--spacing) * 0.5);
			}

			.recommendation-stats {
				font-size: var(--text-xs);
				color: var(--muted-foreground);
				margin-top: calc(var(--spacing) * 0.5);
			}
		}

	}

	.firm-profile-card {
		padding: calc(var(--spacing) * 5);
		width: 100%;
		max-width: 700px;
		gap: 0;

		.firm-profile-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: calc(var(--spacing) * 3);
			padding-bottom: calc(var(--spacing) * 3);
			border-bottom: 1px solid var(--border);

			.firm-name {
				font-size: var(--text-xl);
				font-weight: var(--font-weight-semibold);
				margin: 0;
			}

			.firm-badge {
				background: var(--muted);
				color: var(--muted-foreground);
				padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
				border-radius: var(--radius);
				font-size: var(--text-sm);
			}
		}

		.firm-metrics {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: calc(var(--spacing) * 4);

			@media screen and (min-width: 480px) {
				grid-template-columns: repeat(4, 1fr);
			}

			margin-bottom: calc(var(--spacing) * 3);
			padding-bottom: calc(var(--spacing) * 3);
			border-bottom: 1px solid var(--border);

			.metric-item {
				min-width: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;

				.metric-label {
					font-size: var(--text-sm);
					color: var(--muted-foreground);
					margin-bottom: calc(var(--spacing) * 1);
				}

				.metric-value {
					font-size: var(--text-xl);
					font-weight: var(--font-weight-semibold);

					&.positive {
						color: var(--primary-contrast);
					}
				}
			}
		}

		.firm-profile-grid {
			display: grid;
			grid-template-columns: 1fr;
			gap: calc(var(--spacing) * 4);
			padding: calc(var(--spacing) * 3);
			border-radius: var(--radius);

			@media screen and (min-width: 640px) {
				grid-template-columns: repeat(5, 1fr);
				grid-template-rows: 1fr;
			}

			.profile-section {
				.profile-section-title {
					font-size: var(--text-xs);
					color: var(--muted-foreground);
					display: block;
					margin-bottom: calc(var(--spacing)*2);

				}

				background: var(--background);
				border: 1px solid var(--border);
				border-radius: var(--radius-lg);
				padding: calc(var(--spacing) * 3);
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

				@media screen and (min-width: 640px) {
					&:nth-child(1) {
						grid-column: span 2;
					}

					&:nth-child(2) {
						grid-column: span 3;
						display: flex;
						flex-direction: column;
					}

					&:nth-child(3) {
						grid-column: span 3;
					}

					&:nth-child(4) {
						grid-column: span 2;
						display: flex;
						flex-direction: column;
						justify-content: center;
					}
				}
			}
		}

		.timeline {
			display: flex;
			flex-direction: column;
			gap: calc(var(--spacing) * 3);

			.timeline-item {
				display: flex;
				gap: calc(var(--spacing) * 3);
				font-size: var(--text-sm);

				.timeline-date {
					color: var(--muted-foreground);
					min-width: 60px;
				}
			}
		}

		.document-list {
			display: flex;
			flex-direction: column;
			gap: calc(var(--spacing) * 3);

			.document-item {
				display: flex;
				gap: calc(var(--spacing) * 3);
				align-items: flex-start;
				font-size: var(--text-sm);

				svg {
					width: 16px;
					height: 16px;
					color: var(--primary);
					flex-shrink: 0;
					margin-top: 2px;
				}

				.document-title {
					margin-bottom: calc(var(--spacing) * 0.5);
				}

				.document-meta {
					color: var(--muted-foreground);
					font-size: var(--text-xs);
				}
			}
		}

	}
}

/* Flipped layout: demo on left, text on right (for alternating feature sections) */
.feature-showcase .feature-showcase-content--flipped {
	@media screen and (min-width: 1024px) {
		grid-template-columns: 1.5fr 1fr;
	}
}

.feature-showcase .feature-showcase-content--flipped .feature-explanation {
	@media screen and (min-width: 1024px) {
		order: 2;
	}
}

.feature-showcase .feature-showcase-content--flipped .feature-demo {
	@media screen and (min-width: 1024px) {
		order: 1;
	}
}

.pricing {
	padding: calc(var(--spacing) * 8) 0;

	>header h2 {
		font-size: var(--text-3xl);
	}

	.cards.pricing-cards {
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(var(--spacing) * 5);

		@media screen and (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media screen and (min-width: 1024px) {
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: auto 1fr;
			gap: calc(var(--spacing) * 4) calc(var(--spacing) * 4);
		}
	}

	.pricing-group-label {
		display: block;
		font-size: var(--text-sm);
		font-weight: var(--font-weight-medium);
		letter-spacing: 0.05em;
		margin-bottom: calc(var(--spacing) * 2);
		text-align: left;
		padding-bottom: calc(var(--spacing) * 2);
		border-bottom: 1px solid var(--border);

		@media screen and (min-width: 768px) {
			grid-column: 1 / -1;
		}

		@media screen and (min-width: 1024px) {
			grid-column: auto;
			margin-bottom: 0;
			align-self: end;
		}
	}

	.pricing-group-label:first-of-type {
		@media screen and (min-width: 1024px) {
			grid-row: 1;
			grid-column: 1 / 4;
		}
	}

	.pricing-group-label:last-of-type {
		@media screen and (min-width: 1024px) {
			grid-row: 1;
			grid-column: 4;
		}
	}

	.pricing-cards .card.pricing-card:nth-child(2) {
		@media screen and (min-width: 1024px) {
			grid-row: 2;
			grid-column: 1;
		}
	}

	.pricing-cards .card.pricing-card:nth-child(3) {
		@media screen and (min-width: 1024px) {
			grid-row: 2;
			grid-column: 2;
		}
	}

	.pricing-cards .card.pricing-card:nth-child(4) {
		@media screen and (min-width: 1024px) {
			grid-row: 2;
			grid-column: 3;
		}
	}

	.pricing-cards .card.pricing-card:nth-child(6) {
		@media screen and (min-width: 1024px) {
			grid-row: 2;
			grid-column: 4;
		}
	}

	.card.pricing-card {
		position: relative;
	}

	.card.pricing-card:has(.pricing-card-badge) {
		padding-top: calc(var(--spacing) * 5);
	}

	.pricing-card-badge {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
		display: inline-block;
		font-size: var(--text-xs);
		font-weight: var(--font-weight-semibold);
		letter-spacing: 0.05em;
		color: var(--primary-foreground);
		background: var(--primary);
		border-radius: var(--radius);
		padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
		white-space: nowrap;
	}
	.pricing-card-badge--secondary {
		color: var(--secondary-foreground);
		background: var(--secondary);
	}

	.pricing-callout{
		font-weight: var(--font-weight-semibold);
		font-size: var(--text-sm);
		color: var(--color-foreground);

		span{
			text-decoration: underline;
			text-decoration-color: var(--primary);
			text-decoration-thickness: 2px;
			text-underline-offset: 4px;
		}
	}

	.card.pricing-card{
		gap: calc(var(--spacing) * 3);
	}
	.card.pricing-card.highlight-primary {
		border-color: var(--primary);
	}

	.card.pricing-card.highlight-secondary {
		border-color: var(--secondary);
	}

	.card.pricing-card header {
		margin-bottom: calc(var(--spacing) * 3);
		padding-bottom: calc(var(--spacing) * 3);
		border-bottom: 1px solid var(--border);
		gap: calc(var(--spacing) * 3);

		h3 {
			font-size: var(--text-xl);
			font-weight: var(--font-weight-semibold);
			margin-bottom: calc(var(--spacing) * 1);
		}

		.pricing-price-row {
			display: flex;
			align-items: baseline;
			flex-wrap: wrap;
			gap: calc(var(--spacing) * 1);
			margin-bottom: calc(var(--spacing) * 2);
		}

		.pricing-price-original {
			font-size: var(--text-lg);
			font-weight: var(--font-weight-bold);
			color: var(--muted-foreground);
			text-decoration: line-through;
		}

		.pricing-price {
			font-size: var(--text-lg);
			font-weight: var(--font-weight-bold);
			color: var(--foreground);
			margin-bottom: calc(var(--spacing) * 2);
		}

		.pricing-price-row .pricing-price {
			margin: 0;
		}

		.pricing-price-annual {
			font-size: var(--text-xs);
			font-weight: var(--font-weight-medium);
			color: var(--primary-contrast);
			margin-left: auto;
		}
	}

	.card.pricing-card section {
		flex: 1;
		display: flex;
		flex-direction: column;

		.pricing-includes {
			font-size: var(--text-sm);
			font-weight: var(--font-weight-medium);
			margin-bottom: calc(var(--spacing) * 2);

		}

		ul {
			list-style: disc;
			padding-left: calc(var(--spacing) * 5);
			display: flex;
			flex-direction: column;
			gap: calc(var(--spacing) * 2);
			margin-bottom: calc(var(--spacing) * 4);

			li {
				font-size: var(--text-sm);
				line-height: 1.5;
			}
		}

		>a[class*="btn"] {
			margin-top: auto;
			padding-top: calc(var(--spacing) * 2);
		}

		.pricing-card-info {
			font-size: var(--text-sm);
			color: var(--muted-foreground);
			background: var(--muted);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			padding: calc(var(--spacing) * 2);
			margin-top: calc(var(--spacing) * 3);
			line-height: 1.5;
		}

		.pricing-card-info a {
			color: var(--primary-contrast);
			text-decoration: underline;
		}

		.pricing-card-info a:hover {
			text-decoration: none;
		}
		.coming-soon {
			color: var(--muted-foreground);
		}
	}

	.card.pricing-card footer {
		margin-top: auto;
		padding-top: calc(var(--spacing) * 3);
		display: flex;
		justify-content: center;
	}

	.pricing-addon {
		margin-top: calc(var(--spacing) * 8);
		padding: calc(var(--spacing) * 5);
		background: var(--muted);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		text-align: left;

		h3 {
			font-size: var(--text-xl);
			font-weight: var(--font-weight-semibold);
			margin-bottom: calc(var(--spacing) * 2);
		}

		.pricing-addon-lead {
			font-size: var(--text-sm);
			color: var(--muted-foreground);
			margin-bottom: calc(var(--spacing) * 3);
			line-height: 1.5;
		}

		.pricing-addon-contact {
			font-size: var(--text-sm);
			color: var(--muted-foreground);
			margin: 0;
			line-height: 1.5;
		}

		.pricing-addon-contact a {
			color: var(--primary-contrast);
			text-decoration: underline;
		}

		.pricing-addon-contact a:hover {
			text-decoration: none;
		}

		ul {
			list-style: disc;
			padding-left: calc(var(--spacing) * 5);
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: calc(var(--spacing) * 2);

			li {
				color: var(--muted-foreground);
				line-height: 1.5;
			}
		}
	}

	.pricing-notes {
		margin-top: calc(var(--spacing) * 4);
		padding-top: calc(var(--spacing) * 3);
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 3);
		text-align: left;

		p {
			color: var(--muted-foreground);
			margin: 0;
			line-height: 1.6;
		}

		strong.text-primary {
			color: var(--primary-contrast);
		}
	}

	.pricing-help {
		margin-top: calc(var(--spacing) * 8);
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(var(--spacing) * 3);
	}

	.pricing-help-lead {
		font-size: var(--text-lg);
		font-weight: var(--font-weight-semibold);
		line-height: 1.4;
		margin: 0;
	}

	.pricing-help p {
		line-height: 1.6;
		margin: 0;
		max-width: 42rem;
	}

	.pricing-help>a[class*="btn"] {
		margin-top: 0;
	}
}

.marketing-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--spacing) * 3);
	padding: calc(var(--spacing) * 8) calc(var(--spacing) * 6);
	border-top: 1px solid var(--border);
	background-color: var(--muted);

	@media screen and (min-width: 768px) {
		flex-direction: row;
		justify-content: space-between;
		gap: 0;
	}

	.logo-link {
		text-decoration: none;
		color: inherit;
	}

	.logo {
		flex-shrink: 0;

		.icon {
			width: calc(var(--spacing) * 5);
			height: calc(var(--spacing) * 5);
		}
	}

	>div:last-child {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(var(--spacing) * 3);

		@media screen and (min-width: 768px) {
			flex-direction: row;
			gap: calc(var(--spacing) * 4);
		}

		a {
			color: var(--muted-foreground);
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

/* About page (uses marketing layout) */
.about-hero,
.marketing-main .about-section {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.about-hero {
	text-align: center;
	padding: calc(var(--spacing) * 12) 0 calc(var(--spacing) * 10);
	margin-bottom: calc(var(--spacing) * 4);
}

.about-hero__title {
	font-size: var(--text-4xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	margin-bottom: calc(var(--spacing) * 4);

	@media screen and (min-width: 768px) {
		font-size: 2.75rem;
	}
}

.about-hero__subtitle {
	font-size: var(--text-lg);
	color: var(--muted-foreground);
	max-width: 36rem;
	margin: 0 auto;
	line-height: 1.6;

	@media screen and (min-width: 768px) {
		font-size: var(--text-xl);
	}
}

/* About Page – unified section structure */
.marketing-main .about-section {
	padding: calc(var(--spacing) * 8);
	margin-bottom: calc(var(--spacing) * 12);

	&:last-child {
		margin-bottom: 0;
	}
}

.marketing-main .about-section--intro {
	margin-bottom: calc(var(--spacing) * 14);

	p {
		color: var(--foreground);
		font-size: var(--text-lg);
	}
}

.about-section__title {
	font-size: var(--text-2xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: calc(var(--spacing) * 6);
	line-height: 1.3;
	padding-bottom: calc(var(--spacing) * 2);
	border-bottom: 2px solid var(--border);
	display: inline-block;
}

.about-highlight {
	color: var(--primary-contrast);
	font-weight: var(--font-weight-semibold);
}

.about-section p {
	line-height: 1.7;
	margin-bottom: calc(var(--spacing) * 4);

	&:last-of-type {
		margin-bottom: calc(var(--spacing) * 2);
	}
}

.about-section__sublabel {
	font-weight: var(--font-weight-semibold);
	margin: calc(var(--spacing) * 6) 0 calc(var(--spacing) * 3);
}

.about-section__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing) * 3);
}

.about-section__list li {
	position: relative;
	padding-left: calc(var(--spacing) * 3);
	line-height: 1.55;

	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.6em;
		width: 0.35em;
		height: 0.35em;
		border-radius: 50%;
		background-color: var(--primary);
	}
}

.about-section--alt {
	background-color: var(--muted);
	border-radius: var(--radius-lg);
}

.about-section--primary {
	background-color: var(--primary);
	color: var(--primary-foreground);
	border-radius: var(--radius-lg);

	.about-section__title {
		color: inherit;
		border-bottom-color: var(--primary-foreground);
	}

	p,
	a,
	.about-section__sublabel,
	.about-section__list li {
		color: inherit;
	}

	.about-section__list li::before {
		background-color: var(--primary-foreground);
	}
}

/* Long-form content (Terms, Guide, etc.) – hero + prose */
.terms-hero,
.marketing-main .prose {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.terms-hero {
	text-align: center;
	padding: calc(var(--spacing) * 12) 0 calc(var(--spacing) * 10);
	margin-bottom: 0 !important;
}

.terms-hero__title {
	font-size: var(--text-4xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	margin-bottom: calc(var(--spacing) * 4);

	@media screen and (min-width: 768px) {
		font-size: 2.75rem;
	}
}

/* General prose typography for long-form sections (Terms, Guide, etc.) */
.marketing-main .prose {
	h2 {
		font-size: var(--text-2xl);
		font-weight: var(--font-weight-bold);
		margin: calc(var(--spacing) * 8) 0 calc(var(--spacing) * 4);
		line-height: 1.3;
		padding-bottom: calc(var(--spacing) * 2);
		border-bottom: 2px solid var(--border);
		display: inline-block;
	}

	h3 {
		font-size: var(--text-xl);
		font-weight: var(--font-weight-semibold);
		margin: calc(var(--spacing) * 8) 0 calc(var(--spacing) * 4);
		line-height: 1.3;
	}

	h4 {
		font-size: var(--text-lg);
		font-weight: var(--font-weight-semibold);
		line-height: 1.3;
		margin: calc(var(--spacing) * 6) 0 calc(var(--spacing) * 3);
	}

	blockquote {
		font-weight: var(--font-weight-semibold);
		margin: calc(var(--spacing) * 4) 0;
	}

	p {
		line-height: 1.7;
		margin-bottom: calc(var(--spacing) * 4);

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	ol {
		list-style: decimal;
	}

	ul {
		list-style: disc;
	}

	ol,
	ul {
		padding-left: calc(var(--spacing) * 5);
		margin-bottom: calc(var(--spacing) * 4);
	}

	li {
		line-height: 1.7;
		margin-bottom: calc(var(--spacing) * 1);

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	details {
		margin: calc(var(--spacing) * 4) 0;
	}

	/* Restore native disclosure arrow: base.css uses summary { display: inline-flex } and hides ::-webkit-details-marker */
	details summary {
		font-weight: var(--font-weight-semibold);
		cursor: pointer;
		display: list-item;
		/* Firefox: need list-item so ::marker shows */
		list-style-type: disclosure-closed;
	}

	details[open] summary {
		list-style-type: disclosure-open;
		/* Rotate arrow when expanded */
	}

	details summary::-webkit-details-marker {
		display: inline-block;
		/* Chrome/Safari/Edge: base sets display:none */
	}

	details summary.details-summary-h4 {
		font-size: var(--text-lg);
		line-height: 1.3;
		margin: calc(var(--spacing) * 6) 0 calc(var(--spacing) * 3);
	}

	table {
		width: 100%;
		table-layout: fixed;
		margin-bottom: calc(var(--spacing) * 4);
	}

	table th,
	table td {
		overflow-wrap: break-word;
		min-width: 0;
		white-space: normal;
	}

	table ul {
		margin: 0;
		padding-left: calc(var(--spacing) * 4);
	}

	table li {
		margin-bottom: calc(var(--spacing) * 1);
	}
}