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-section {
				padding: var(--spacing-md) var(--spacing-lg);
			}
		}
	}
}

/* Template2-inspired refresh */
main {
	.legal-container {
		.intro {
			max-width: 78ch;
		}

		.legal-section {
			background: var(--surface-1);
			border: 1px solid var(--edge-soft);
			box-shadow: 0 8px 18px var(--shadow-light);
			transition: box-shadow var(--transition-fast);

			&:hover {
				box-shadow: 0 12px 24px var(--shadow-medium);
			}

			h2 {
				line-height: 1.25;
				position: relative;
				padding-left: var(--spacing-md);

				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 4px;
					height: 1.2em;
					background: var(--accent);
					border-radius: 2px;
				}
			}

			p,
			li {
				color: var(--text-light);
			}
		}

		.highlight {
			border-left-color: var(--accent);
			background: linear-gradient(
				90deg,
				color-mix(in srgb, var(--accent) 9%, transparent) 0%,
				var(--surface-1) 100%
			);
		}

		.show-more {
			background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
			border: 1px solid var(--accent);
			box-shadow: none;

			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 10px 20px var(--accent-glow);
			}
		}
	}
}