main {
	display: flex;
	justify-content: flex-start;
	margin: 5% var(--spacing-4xl);

	.legal-container {
		max-width: 900px;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-2xl);

		.page-title {
			font-size: var(--font-size-6xl);
			color: var(--text);
			margin-bottom: var(--spacing-xs);
		}

		.intro {
			font-size: var(--font-size-lg);
			line-height: var(--line-height-normal);
			color: var(--text-light);
		}

		.legal-section {
			border: 1px solid var(--border-color);
			border-radius: var(--radius-xl);
			padding: var(--spacing-lg) var(--spacing-xl);
			background: var(--background-white);

			h2 {
				font-size: var(--font-size-3xl);
				margin-bottom: var(--spacing-md);
				color: var(--text-dark);
			}

			p {
				margin-bottom: var(--spacing-md);
				line-height: var(--line-height-normal);
				color: var(--text-light);
			}

			ul {
				padding-left: var(--spacing-lg);
				color: var(--text-light);

				li {
					margin-bottom: var(--spacing-sm);
				}
			}

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

				&:hover {
					color: var(--accent);
					transition: 0.3s ease-in-out;
				}
			}
		}

		.highlight {
			border-left: 4px solid var(--accent);
			background: #fffbea;
		}

		.more-info {
			display: flex;
			flex-direction: column;
			gap: var(--spacing-2xl);
			max-height: 3000px;
			overflow: hidden;
			transition:
				max-height var(--transition-slow),
				opacity var(--transition-slow);

			&.is-hidden {
				max-height: 0;
				opacity: 0;
			}
		}

		.show-more {
			align-self: flex-start;
			background-color: var(--accent);
			color: var(--text-dark);
			font-size: var(--font-size-base);
			border: none;
			padding: var(--spacing-md) var(--spacing-lg);
			border-radius: var(--radius-md);
			font-weight: var(--font-weight-semibold);
			cursor: pointer;
			transition: background-color var(--transition-normal);

			&:hover {
				background-color: var(--accent-hover);
			}

			&:focus-visible {
				outline: 2px solid var(--accent);
				outline-offset: 2px;
			}
		}
	}
}

@media (max-width: 768px) {
	main {
		margin: var(--spacing-xl) var(--spacing-lg);

		.legal-container .page-title {
			font-size: 1.5rem;
		}

		.legal-container .legal-section {
			padding: var(--spacing-md) var(--spacing-lg);
		}
	}
}