/* Branding demo: color choosers, font selector, and feature page layout */

/* --------- Try It CTAs --------- */

@keyframes nudge-right {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(.5rem); }
}

.try-it {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing--xs);
	margin-top: var(--spacing--m);
	width: 100%;
	text-align: center;
	font-family: var(--font--family--display-s);
	font-size: var(--font--size--xs);
	font-weight: var(--font--weight--700);
	text-transform: uppercase;
	letter-spacing: var(--font--letter-spacing--xx-wide);
	color: var(--color--main);

	svg {
		animation: nudge-right 1.5s ease-in-out infinite;
		width: .75rem;
		height: .75rem;
	}
}

/* --------- Color Actions --------- */

.color-actions {
	margin-top: var(--spacing--m);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing--2xs);
	position: relative;

	button.borderless {
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		min-width: 0;
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--3xs);
		font-weight: var(--font--weight--500);
		color: var(--color--main--borders);
		cursor: pointer;
		text-decoration: underline;

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

/* --------- Animated Cursor --------- */

@keyframes cursor-move {
	0% {
		left: -2rem;
		top: 50%;
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	60% {
		left: var(--cursor-target-x, 50%);
		top: var(--cursor-target-y, 50%);
		transform: scale(1);
	}
	65% {
		transform: scale(0.85);
	}
	70% {
		transform: scale(1);
	}
	85% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		left: var(--cursor-target-x, 50%);
		top: var(--cursor-target-y, 50%);
	}
}

.animated-cursor {
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	z-index: 50;
	pointer-events: none;
	opacity: 0;

	&.animate {
		animation: cursor-move 2.5s ease-in-out forwards;
	}
}

/* --------- Feature Group Headers --------- */

/* Override header border on pages with feature group headers */
body:has(.feature-group-header) header.site {
	/* border-bottom-color: var(--color--white); */
}

/* Override overflow:hidden on #main-page so sticky works */
#main-page:has(.feature-group-header) {
	/* overflow: visible; */
}

.feature-group-header {
	position: sticky;
	top: 5.45rem; /* below the site header */
	z-index: 100;
	background-color: var(--color--highlight);
	color: var(--color--black);
	text-align: center;
	padding: var(--spacing--xl) var(--spacing--xl) var(--spacing--3xl);
	border-bottom: var(--border--thin);
	
	&:first-of-type{
		padding: var(--spacing--xl) var(--spacing--xl) var(--spacing--3xl);
		top: 0rem;
	}

	h1 {
		font-family: var(--font--family--display-l);
		font-size: var(--font--size--2xl);
		font-weight: var(--font--weight--500);
		line-height: var(--font--line-height--xx-tight);
		margin: 0;
		padding: 0;
		border: none;
		text-align: center;
		color: var(--color--black);
	}
}

/* --------- Feature Split Layout --------- */

.feature-split {
	color: var(--color--black);

	.text-block {
		padding: var(--spacing--5xl);
		align-content: center;
		max-width: 45rem;
		margin: 0 auto;
	}
}

.demo-block {
	padding: var(--spacing--3xl);
	align-content: center;
	background-color: var(--color--main--medium);
	border-left: var(--border--thin);
}

/* --------- Primary Color --------- */

.primary-color {
	margin-bottom: var(--spacing--l);
}

.primary-color-layout {
	display: grid;
	grid-template-columns: 2.1fr 1fr;
	gap: var(--spacing--m);
	align-items: stretch;
}

.primary-color-main {
	border: var(--border--thin);
	background-color: var(--color--white);
	display: flex;
	flex-direction: column;

	output.color-swatch-large {
		display: block;
		width: 100%;
		flex: 1;
		min-height: 10rem;
		border: none;
		border-bottom: var(--border--thin);
		cursor: pointer;
		box-sizing: border-box;
		outline: none;
	}
}

.primary-color-info {
	display: grid;
	grid-template-columns: 1fr 5rem;
	align-items: center;
	justify-content: center;
	padding: 0 0 0 var(--spacing--s);
}

.primary-color-fields {
	border-right: var(--border--thin);
	label {
		font-family: var(--font--family--display-s);
		font-weight: var(--font--weight--700);
		font-size: var(--font--size--3xs);
		text-transform: uppercase;
		letter-spacing: var(--font--letter-spacing--wide);
		display: block;
		margin-top: var(--spacing--s);
		border-bottom: var(--border--thin);
		padding-bottom: var(--spacing--2xs);
		flex-direction: row;
		gap: 0;
	}

	input[type="text"] {
		font-family: var(--font--family--text-s);
		font-size: var(--font--size--xs);
		border: none;
		padding: var(--spacing--2xs) 0;
		background: transparent;
		width: 100%;
		letter-spacing: 1px;
		margin-bottom: .5rem;
	}
}

/* Color picker (circular gradient swatch) */
label.color-picker {
	display: flex;
	justify-content: center;
	justify-self: center;
	width: 2.5rem;
	height: 2.5rem;
	background-image: conic-gradient(from 40deg, #FF4141, #FFDF4F, #80CDA2, #00BCFA, #FF3EEC, #FF4141);
	border-radius: 50%;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;

	input[type="color"] {
		opacity: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* --------- Auto-generated Palette (vertical, right side) --------- */

.color-palette {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	& > div {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--spacing--xs);
		border-bottom: var(--border--thin);

		&:first-child {
			border-top: var(--border--thin);
		}
	}

	output {
		display: block;
		width: 2.5rem;
		height: 2.5rem;
		min-width: 2.5rem;
		min-height: 2.5rem;
		max-width: 2.5rem;
		max-height: 2.5rem;
		border: var(--border--thin);
		border-top: none;
		border-bottom: none;
		flex-shrink: 0;
	}

	label {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--3xs);
		font-weight: var(--font--weight--600);
		display: block;
		flex-direction: row;
		gap: 0;
		white-space: nowrap;
	}
}

/* --------- Color Choosers (Text, Page Tint, Highlight) --------- */

.color-choosers {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--spacing--m);
}

.color-chooser {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: 1fr auto;
	gap: 0;

	output.color-swatch-medium {
		display: block;
		width: 100%;
		min-height: 8rem;
		border: var(--border--thin);
		grid-column: 1;
		grid-row: 1;
		box-sizing: border-box;
	}

	.color-options {
		grid-column: 2;
		grid-row: 1;
		overflow: hidden;
		align-self: stretch;
		padding-bottom: .125rem;
	}

	.chooser-label {
		grid-column: 1 / -1;
		background-color: var(--color--white);
		border: var(--border--thin);
		border-top: none;
		padding: var(--spacing--xs) var(--spacing--xs);

		label {
			font-family: var(--font--family--display-s);
			font-weight: var(--font--weight--700);
			font-size: var(--font--size--3xs);
			text-transform: uppercase;
			letter-spacing: var(--font--letter-spacing--wide);
			display: block;
			border-bottom: var(--border--thin);
			padding-bottom: var(--spacing--2xs);
			margin-bottom: var(--spacing--2xs);
			flex-direction: row;
			gap: 0;
		}

		.color-name {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--3xs);
			font-weight: var(--font--weight--500);
			color: var(--color--main--borders);
			display: block;
		}
	}
}

/* Color option swatches (vertical stack) */
.color-options {
	display: flex;
	flex-direction: column;
	gap: 0;

	input.color-option {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		width: 2rem;
		height: 2rem;
		border: var(--border--thin);
		margin: 0;
		margin-bottom: -.125rem;
		margin-left: -.125rem;
		padding: 0;
		cursor: pointer;
		position: relative;
		flex-shrink: 0;

		&:hover {
			border-color: var(--color--highlight);
			z-index: 1;
		}

		&:checked::after {
			content: "";
			position: absolute;
			inset: .25rem;
			background-image: url('data:image/svg+xml;utf8,<svg fill="black" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.285 6.709l-11.025 11.025-5.544-5.543 1.414-1.415 4.13 4.13 9.611-9.611z"/></svg>');
			background-size: contain;
			background-repeat: no-repeat;
		}
	}

	&.dark input.color-option:checked::after {
		background-image: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.285 6.709l-11.025 11.025-5.544-5.543 1.414-1.415 4.13 4.13 9.611-9.611z"/></svg>');
	}
}

/* --------- Font Selector --------- */

.form-field {
	margin-bottom: var(--spacing--m);

	label {
		font-family: var(--font--family--display-s);
		font-weight: var(--font--weight--700);
		font-size: var(--font--size--xs);
		text-transform: uppercase;
		letter-spacing: var(--font--letter-spacing--x-wide);
		display: block;
		margin-bottom: var(--spacing--xs);
		flex-direction: row;
		gap: 0;
	}
}

select#font-set-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size: var(--font--size--s);
	font-family: var(--font--family--text-s);
	font-weight: var(--font--weight--500);
	padding: var(--spacing--s);
	padding-right: 2rem;
	border: var(--border--thin);
	border-radius: 0;
	background-color: var(--color--white);
	background-image: url('/static/images/select-icon.svg');
	background-repeat: no-repeat;
	background-position: right .65rem center;
	background-size: .85rem;
	width: 100%;
	height: 3.4375rem;
	color: var(--color--black);
	cursor: pointer;
	box-sizing: border-box;

	&:focus {
		background-color: var(--color--highlight);
		outline: none;
	}
}

#beautiful-type .demo-block {
	background-color: var(--color--black);
}

/* --------- Font Samples --------- */

ul.font-samples {
	margin-left: 0;
	margin-top: var(--spacing--m);
	padding-left: 0;

	li {
		border-top: solid .125rem var(--color--highlight);
		min-height: 5rem;
		padding-top: var(--spacing--xs);
		display: flex;
		flex-direction: column;
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--xs);
		font-weight: var(--font--weight--500);
		color: var(--color--highlight);
		margin-bottom: var(--spacing--m);
	}

	.font-description {
		margin-bottom: var(--spacing--2xs);
	}

	.font-attribution {
		margin-left: var(--spacing--2xs);
	}

	.font-preview {
		color: var(--color--white);
	}

	.large-headlines .font-preview {
		font-family: var(--font--family--display-xl);
		font-size: var(--font--size--3xl);
		font-weight: var(--font--weight--500);
		line-height: var(--font--line-height--xx-tight);
		letter-spacing: 0;
	}

	.medium-headlines .font-preview {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--xl);
		font-weight: var(--font--weight--700);
		line-height: var(--font--line-height--tight);
	}

	.small-headlines .font-preview {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--m-l);
		font-weight: var(--font--weight--900);
		line-height: var(--font--line-height--x-tight);
	}

	.small-text .font-preview {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--s);
		font-weight: var(--font--weight--500);
		line-height: var(--font--line-height--loose);
	}

	.large-text .font-preview {
		font-family: var(--font--family--text-l);
		font-size: var(--font--size--m-l);
		font-weight: var(--font--weight--300);
		line-height: var(--font--line-height--x-loose);
	}

	.input-text .font-preview {
		font-family: var(--font--family--input);
		font-size: var(--font--size--m);
		font-weight: var(--font--weight--600);
		line-height: var(--font--line-height--normal);
	}
}

/* --------- Logo Upload --------- */

.logo-upload-control {
	margin-top: var(--spacing--m);
}

.upload-area {
	border: .125rem dashed var(--color--main--borders);
	padding: var(--spacing--m);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s;
	margin: 0 auto;

	&:hover, &.drag-over {
		border-color: var(--color--main);
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing--2xs);
		color: var(--color--main--borders);

		span {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--3xs);
			font-weight: var(--font--weight--500);
		}

		.upload-note {
			font-size: var(--font--size--3xs);
			color: var(--color--main--borders);
		}
	}

	.logo-thumb {
		max-width: 100%;
		max-height: 5rem;
		object-fit: contain;
	}

}

/* --------- Template Demo --------- */

.template-demo {
	display: grid;
	grid-template-columns: 1fr;
	min-height: 30rem;
	img {
		width: 100%;
		height: auto;
		display: block;
		border: var(--border--thin);
		border-radius: 0;
		box-sizing: border-box;
	}
}

.template-thumbs {
	display: flex;
	flex-direction: row;
	gap: var(--spacing--s);
	margin-top: var(--spacing--l);
	img{
		
	}
}

.template-thumb {
	background: none;
	border: var(--border--thin);
	padding: var(--spacing--3xs);
	cursor: pointer;
	min-width: 0;
	margin: 0;
	color: var(--color--main--black);

	img {
		width: 100%;
		height: auto;
		display: block;
		border: none;
		border-radius: 0;
	}

	span {
		display: block;
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--3xs);
		font-weight: var(--font--weight--600);
		text-align: center;
		margin-top: var(--spacing--3xs);
		text-transform: uppercase;
		letter-spacing: var(--font--letter-spacing--x-wide);
	}

	&.active {
		border-color: var(--color--main);
		background-color: var(--color--main--background);
	}

	&:hover {
		border-color: var(--color--main);
	}
}

.template-preview {
	overflow: hidden;
}

/* --------- Invoice Mock (mirrors product article.css structure) --------- */

article.invoice {
	background-color: var(--color--white);
	border: var(--border--thin);
	padding: var(--spacing--m);
	font-family: var(--font--family--display-s);
	font-size: 0.55rem;
	line-height: 1.4;
	color: var(--color--black);

	/* --- Header --- */
	header {
		display: grid;
		grid-template-columns: auto auto auto auto;
		gap: var(--spacing--xs);
		margin-bottom: var(--spacing--l);
		border: none;
		padding: 0;
		align-items: start;
	}

	.studio-brand {
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.studio-logo {
		min-height: 2rem;
		display: flex;
		align-items: center;

		img {
			max-height: 2.5rem;
			max-width: 6rem;
			object-fit: contain;
			border: none;
			border-radius: 0;
		}

		.logo-placeholder {
			color: var(--color--main);
			font-family: var(--font--family--display-xl);
			font-size: 0.85rem;
			font-weight: var(--font--weight--500);
			white-space: nowrap;
		}
	}

	.studio-address {
		font-style: normal;
		align-self: center;

		.studio-name {
			font-weight: var(--font--weight--700);
		}
	}

	.studio-contact {
		align-self: center;
	}

	dl.invoice-info {
		margin: 0;
		padding: 0;

		& > div {
			display: flex;
			justify-content: space-between;
			gap: var(--spacing--s);
		}

		dt {
			font-weight: var(--font--weight--600);
		}

		dd {
			text-align: right;
			margin: 0;
		}

		.invoiceNo {
			margin-bottom: var(--spacing--3xs);

			dt {
				font-weight: var(--font--weight--700);
			}

			dd {
				font-family: var(--font--family--display-xl);
				font-size: var(--font--size--s);
				font-weight: var(--font--weight--500);
			}
		}
	}

	/* --- Metadata --- */
	section.metadata {
		margin-bottom: var(--spacing--2xs);
		padding: 0;
		border: none;

		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing--xs);

		h3 {
			font-style: italic;
			font-weight: var(--font--weight--700);
			font-size: 0.55rem;
			margin: 0 0 var(--spacing--3xs);
			padding: 0;
			border: none;
			text-transform: none;
			letter-spacing: 0;
		}

		h4 {
			font-weight: var(--font--weight--700);
			font-size: 0.7rem;
			margin: 0;
		}

		.billTo {
			grid-column: 1 / -1;
			margin-top: var(--spacing--xs);

			h3 {
				font-style: normal;
				font-weight: var(--font--weight--700);
				border-bottom: var(--border--thin);
				padding-bottom: var(--spacing--3xs);
				margin-bottom: var(--spacing--xs);
			}

			dl {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: var(--spacing--3xs) var(--spacing--m);
				margin: 0;
				padding: 0;

				& > div {
					display: block;
					margin-bottom: .5rem;
				}

				dt {
					font-weight: var(--font--weight--600);
					font-size: 0.5rem;
					display: block;
				}

				dd {
					margin: 0;
					text-align: left;
				}
			}
		}
	}

	/* --- Line Items --- */
	ol.items {
		list-style: none;
		counter-reset: items;
		margin: 0 0 var(--spacing--m);
		padding: 0;

		li.line {
			display: grid;
			grid-template-columns: 2rem 1fr auto;
			grid-template-areas:
				"number name         price"
				".      description  description"
				".      rate         rate";
			gap: 0 var(--spacing--xs);
			padding: var(--spacing--xs) 0;
			border-top: var(--border--thin);
			counter-increment: items;
			align-items: baseline;
			margin-bottom: 0;
			font-size: 0.55rem;

			&:last-child {
				border-bottom: var(--border--thin);
			}

			&::before {
				content: counter(items);
				grid-area: number;
				text-align: center;
				color: var(--color--black);
				padding-top: var(--spacing--3xs);
			}

			.service-name {
				grid-area: name;
				font-weight: var(--font--weight--600);
			}

			.description {
				grid-area: description;
				font-family: var(--font--family--text-l);
				font-size: 0.5rem;
				margin-top: var(--spacing--3xs);
				line-height: 1.5;
			}

			.rate {
				grid-area: rate;
				font-family: var(--font--family--text-l);
				font-style: italic;
				font-size: 0.5rem;
				margin-top: var(--spacing--3xs);
			}

			.price {
				grid-area: price;
				text-align: right;
				font-weight: var(--font--weight--500);
				white-space: nowrap;
			}

			&.flat-rate {
				grid-template-areas:
					"number name         price"
					".      description  description";

				.rate { display: none; }
			}
		}
	}

	/* --- Summary --- */
	section.summary {
		padding: 0;
		border: none;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-bottom: var(--spacing--l);

		dl {
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: var(--spacing--3xs);
		}

		dl > div {
			display: flex;
			justify-content: space-between;
			gap: var(--spacing--m);
		}

		dt {
			font-weight: var(--font--weight--600);
		}

		dd {
			text-align: right;
			margin: 0;
			min-width: 5rem;
		}

		.total {
			border-top: var(--border--thin);
			padding-top: var(--spacing--xs);
			margin-top: var(--spacing--3xs);

			dt {
				font-weight: var(--font--weight--700);
				font-size: 0.65rem;
			}

			dd {
				font-family: var(--font--family--display-xl);
				font-size: var(--font--size--xs);
				font-weight: var(--font--weight--700);
			}
		}
	}

	/* --- Footer --- */
	footer {
		display: none;
		border-top: var(--border--thin);
		padding-top: var(--spacing--m);
		margin: 0;
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing--3xs) var(--spacing--m);
		font-size: 0.5rem;

		address {
			font-style: normal;

			.studio-name {
				font-weight: var(--font--weight--700);
			}
		}
	}

	/* ======== Theme: Structure ======== */
	&.structure {
		.studio-brand {
			border-right: var(--border--thin);
			padding-right: var(--spacing--xs);
		}

		dl.invoice-info .invoiceNo dd {
			font-family: var(--font--family--display-xl);
			font-size: var(--font--size--m);
		}

		section.metadata {
			background-color: var(--color--main--background);
			margin: 0 calc(-1 * var(--spacing--m));
			padding: var(--spacing--s) var(--spacing--m);
			margin-bottom: var(--spacing--m);
		}

		ol.items li.line {
			&::before {
				font-size: 0.85rem;
				font-weight: var(--font--weight--400);
			}
		}

		section.summary .total dd {
			font-family: var(--font--family--display-xl);
			font-size: var(--font--size--s);
		}
	}

	/* ======== Theme: Classic ======== */
	&.classic {
		.studio-brand {
			border-right: var(--border--thin);
			padding-right: var(--spacing--xs);
		}

		dl.invoice-info .invoiceNo dd {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--s);
			font-weight: var(--font--weight--700);
		}

		section.metadata {
			background-color: var(--color--main--background);
			margin: 0 calc(-1 * var(--spacing--m));
			padding: var(--spacing--s) var(--spacing--m);
			margin-bottom: var(--spacing--m);

			.client h3, .project h3 {
				border-bottom: none;
			}
		}

		ol.items li.line {
			&::before {
				font-weight: var(--font--weight--500);
			}
		}

		section.summary .total dd {
			font-family: var(--font--family--display-xl);
			font-size: var(--font--size--s);
		}
	}

	/* ======== Theme: Minimalist ======== */
	&.minimalist {
		header {
			grid-template-columns: 1fr auto;

			.studio-address,
			.studio-contact { display: none; }
		}

		.studio-logo .logo-placeholder {
			font-size: var(--font--size--l);
		}

		dl.invoice-info .invoiceNo {
			dt {
				text-transform: uppercase;
				letter-spacing: var(--font--letter-spacing--xx-wide);
				font-size: 0.45rem;
			}

			dd {
				font-family: var(--font--family--display-s);
				font-size: 0.65rem;
				font-weight: var(--font--weight--500);
			}
		}

		section.metadata {
			h3 {
				text-transform: uppercase;
				letter-spacing: var(--font--letter-spacing--xx-wide);
				font-style: normal;
				font-size: 0.45rem;
				margin-bottom: .5rem;
			}

			h4 {
				font-weight: var(--font--weight--500);
				font-size: 0.6rem;
			}

			.billTo h3 {
				text-transform: uppercase;
				letter-spacing: var(--font--letter-spacing--xx-wide);
				margin-bottom: .75rem;
				padding-bottom: var(--spacing--2xs);
			}
		}

		ol.items {
			border-top: var(--border--thin);
			border-bottom: var(--border--thin);
			padding: var(--spacing--3xs) 0;

			li.line {
				border: none;

				&::before {
					font-family: var(--font--family--text-l);
					font-style: italic;
					font-size: 0.65rem;
				}

				&:last-child { border-bottom: none; }
			}
		}

		section.summary {
			dt {
				text-transform: uppercase;
				letter-spacing: var(--font--letter-spacing--xx-wide);
				font-size: 0.45rem;
			}

			.total dd {
				font-family: var(--font--family--display-s);
				font-size: 0.65rem;
			}
		}

		footer {
			display: grid;
			grid-template-columns: max-content 1fr;
			background-color: white;
		}
	}
}

/* --------- Currency Ticker --------- */

#multi-currency .demo-block {
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 0;
	background-color: var(--color--black);
}

.currency-ticker {
	overflow: hidden;
	width: 100%;
}

.ticker-track {
	display: flex;
	animation: ticker-scroll 40s linear infinite;
	width: max-content;
}

.ticker-item {
	font-family: var(--font--family--display-xl);
	font-size: var(--font--size--5xl);
	font-weight: var(--font--weight--500);
	white-space: nowrap;
	padding: 0 var(--spacing--xl);
	color: var(--color--white);
	display: flex;
	align-items: baseline;
	gap: var(--spacing--xs);

	em {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--xs);
		font-weight: var(--font--weight--600);
		font-style: normal;
		text-transform: uppercase;
		letter-spacing: var(--font--letter-spacing--wide);
		color: var(--color--highlight);
	}
}

@keyframes ticker-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.currency-ticker.reverse .ticker-track {
	animation-direction: reverse;
}

.currency-ticker-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing--xs);
	padding: var(--spacing--m) 0;
}

.currency-ticker:hover .ticker-track {
	animation-play-state: paused;
}

/* --------- Payment Sidebar Demo --------- */

.payment-sidebar-demo {
	background-color: var(--color--main--background);
	border: var(--border--thin);
	padding: var(--spacing--xl) var(--spacing--m) var(--spacing--m);

	h4 {
		padding-bottom: var(--spacing--xs);
		border-bottom: var(--border--thin);
		margin-bottom: var(--spacing--s);
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--3xs);
		font-weight: var(--font--weight--700);
		text-transform: uppercase;
		letter-spacing: var(--font--letter-spacing--xx-wide);
		margin-top: 0;
	}

	span.status {
		display: block;
		margin-bottom: var(--spacing--xl);
		font-family: var(--font--family--display-xl);
		font-size: var(--font--size--xl);
		font-weight: var(--font--weight--500);
		line-height: var(--font--line-height--xx-tight);
	}

	.inline-field {
		display: grid;
		grid-template-columns: min-content 1fr;
		gap: var(--spacing--xs);
		margin-bottom: var(--spacing--xs);
		align-items: center;

		input[type="radio"] {
			margin: 0;
			width: 1.1rem;
			height: 1.1rem;
			accent-color: var(--color--main);
		}

		label {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--xs);
			font-weight: var(--font--weight--500);
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row;
			gap: 0;
			cursor: pointer;
		}

		.preferred {
			font-size: var(--font--size--3xs);
			font-weight: var(--font--weight--600);
			background-color: var(--color--highlight);
			padding: .1rem .4rem;
		}
	}

	.payment-methods-demo {
		margin-bottom: var(--spacing--l);
	}

	.wireExtra,
	.checkExtra,
	.otherExtra {
		display: none;
		margin-top: var(--spacing--m);

		p {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--xs);
			font-weight: var(--font--weight--500);
			line-height: var(--font--line-height--loose);
			margin-bottom: var(--spacing--m);
		}

		a {
			text-decoration: underline;
		}
	}

	.checkAddress {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--s);
		font-weight: var(--font--weight--500);
		line-height: var(--font--line-height--loose);
		margin-bottom: var(--spacing--l);
	}

	.form-field {
		margin-bottom: var(--spacing--s);

		label {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--3xs);
			font-weight: var(--font--weight--700);
			text-transform: uppercase;
			letter-spacing: var(--font--letter-spacing--wide);
			display: block;
			margin-bottom: var(--spacing--2xs);
			flex-direction: row;
			gap: 0;
		}

		input {
			width: 100%;
			font-family: var(--font--family--input);
			font-size: var(--font--size--xs);
			padding: var(--spacing--xs);
			border: var(--border--thin);
			background-color: var(--color--white);
			box-sizing: border-box;
		}
	}

	button.pay,
	button.mark {
		display: none;
		width: 100%;
		margin-top: var(--spacing--m);
	}

	/* Show/hide based on selected payment method */
	&:has(input[value="wireTransfer"]:checked) {
		.wireExtra { display: block; }
		button.mark { display: block; }
	}

	&:has(input[value="check"]:checked) {
		.checkExtra { display: block; }
		button.mark { display: block; }
	}

	&:has(input[value="other"]:checked) {
		.otherExtra { display: block; }
		button.mark { display: block; }
	}

	&:has(input[value="bankTransfer"]:checked) {
		button.pay { display: block; }
	}

	&:has(input[value="creditCard"]:checked) {
		button.pay { display: block; }
	}

	a.button.link {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--xs);
		font-weight: var(--font--weight--500);
		text-decoration: underline;
		color: var(--color--black);
		display: block;
	}
}

#fees-taxes .demo-block {
	background-color: var(--color--black);
}

/* --------- Invoice Summary Demo --------- */

.invoice-summary-demo {
	background-color: var(--color--main--background);
	border: var(--border--thin);
	padding: var(--spacing--xl) var(--spacing--m) var(--spacing--m);

	h4 {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--xs);
		font-weight: var(--font--weight--700);
		margin: 0 0 var(--spacing--xs);
	}

	.subtotal-box {
		border: var(--border--thin);
		background-color: var(--color--white);
		padding: var(--spacing--s);
		text-align: right;
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--s);
		font-weight: var(--font--weight--500);
		margin-bottom: var(--spacing--l);
	}

	.adjustment-row {
		display: grid;
		grid-template-columns: 3fr 2fr 2fr auto;
		gap: var(--spacing--xs);
		margin-bottom: var(--spacing--m);
		align-items: end;
	}

	.adj-field {
		label {
			display: block;
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--3xs);
			font-weight: var(--font--weight--700);
			margin-bottom: var(--spacing--3xs);
			flex-direction: row;
			gap: 0;
		}

		input {
			width: 100%;
			font-family: var(--font--family--input);
			font-size: var(--font--size--xs);
			padding: var(--spacing--xs);
			border: var(--border--thin);
			background-color: var(--color--white);
			box-sizing: border-box;
		}
	}

	button.delete-adj {
		background: none;
		border: none;
		padding: 0 0 var(--spacing--xs);
		min-width: 0;
		margin: 0;
		cursor: pointer;
		font-size: var(--font--size--s);
		color: var(--color--main--borders);
		line-height: 1;

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

	hr {
		border: none;
		border-top: var(--border--thin);
		margin: var(--spacing--xs) 0 var(--spacing--m);
	}

	button.borderless {
		background: none;
		border: none;
		padding: var(--spacing--2xs) 0;
		margin: 0 0 var(--spacing--s);
		min-width: 0;
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--xs);
		font-weight: var(--font--weight--600);
		color: var(--color--main);
		cursor: pointer;
		display: block;

		&:hover {
			color: var(--color--main--brandblack);
		}
	}

	.total-row {
		display: flex;
		justify-content: space-between;
		align-items: baseline;

		.total-label {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--s);
			font-weight: var(--font--weight--700);
		}

		.demo-total {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--xl);
			font-weight: var(--font--weight--700);
		}
	}
}

/* --------- Line Items Demo --------- */

.line-items-controls {
	margin-top: var(--spacing--xl);

	button.borderless {
		background: none;
		border: none;
		padding: var(--spacing--2xs) 0;
		margin: 0;
		min-width: 0;
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--xs);
		font-weight: var(--font--weight--600);
		color: var(--color--main);
		cursor: pointer;
		display: block;

		&:hover {
			color: var(--color--main--brandblack);
		}
	}
}

.line-item-editor {
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: 0 var(--spacing--xs);
	margin-bottom: var(--spacing--xl);
	counter-increment: line-item-counter;

	.line-number {
		grid-column: 1;
		grid-row: 1;
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--xl);
		font-weight: var(--font--weight--500);
		color: var(--color--black);
	}

	.fields-row {
		grid-column: 2;
		grid-row: 1;
		display: flex;
		gap: var(--spacing--2xs);
		align-items: end;

		&.flat-rate .hide-flat {
			display: none;
		}
	}

	.rate-line {
		display: flex;
		gap: var(--spacing--2xs);
		align-items: end;
		flex: 4;
	}

	.description-row {
		grid-column: 2;
		grid-row: 2;
	}

	.delete-line-item {
		grid-column: 2;
		grid-row: 3;
		text-align: right;
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
	}

	.editor-field {
		flex: 1;

		&.field-name {
			flex: 3;
		}

		&.field-amount {
			flex: 1;
		}

		&.field-rate {
			flex: 1.5;
		}

		&.field-type {
			flex: 1.5;
		}

		&.field-price {
			flex: 1.5;
		}

		label {
			display: block;
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--3xs);
			font-weight: var(--font--weight--700);
			margin-bottom: var(--spacing--2xs);
			margin-top: var(--spacing--2xs);
			flex-direction: row;
			gap: 0;
			text-align: left;
		}

		input, select, textarea {
			width: 100%;
			font-family: var(--font--family--input);
			font-size: var(--font--size--xs);
			padding: var(--spacing--2xs);
			border: var(--border--thin);
			background-color: var(--color--white);
			box-sizing: border-box;
		}

		select {
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			border-radius: 0;
			background-image: url('/static/images/select-icon.svg');
			background-repeat: no-repeat;
			background-position: right .5rem center;
			background-size: .6rem;
			padding-right: 1.5rem;
			cursor: pointer;

			&:focus {
				background-color: var(--color--highlight);
				outline: none;
			}
		}

		textarea {
			resize: vertical;
			min-height: 3rem;
		}

		input[readonly] {
			background-color: var(--color--white);
		}
	}

	.decoration {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--xs);
		font-weight: var(--font--weight--700);
		padding-bottom: var(--spacing--2xs);
		color: var(--color--black);
		flex-shrink: 0;
	}

	.editor-field.field-description {
		margin-top: var(--spacing--xs);

		textarea {
			width: 100%;
			font-family: var(--font--family--input);
			font-size: var(--font--size--xs);
			padding: var(--spacing--2xs);
			border: var(--border--thin);
			background-color: var(--color--white);
			box-sizing: border-box;
			resize: vertical;
			min-height: 3rem;
		}
	}

	button.delete-line-item {
		background: none;
		border: none;
		padding: var(--spacing--xs) 0 0;
		min-width: 0;
		margin: 0;
		cursor: pointer;
		color: var(--color--main--borders);

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

		svg {
			width: .8125rem;
			height: 1rem;
		}
	}
}

/* Invoice preview (right side) */
#line-items .demo-block {
	background-color: var(--color--white);
}

#client-hub .demo-block,
#invoice-hub .demo-block {
	padding: 0;
	position: relative;
	max-height: 45rem;
	overflow:hidden;
}

#client-hub .demo-scroll,
#invoice-hub .demo-scroll {
	overflow-y: auto;
	max-height: 45rem;
}

/* --------- Invoice Hub Demo --------- */

.invoice-hub-demo {
	background-color: var(--color--white);
	padding: var(--spacing--xl);
	margin: var(--spacing--xl);
	border: var(--border--thin);
	font-size: 150%;

	.hub-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: var(--spacing--xs);

		h2 {
			font-family: var(--font--family--display-xl);
			font-weight: var(--font--weight--500);
			margin: 0;
			padding: 0;
			border: none;
			text-align: left;
			font-size: var(--font--size--3xl);
		}

		button {
			font-size: 0.6em;
			min-width: 0;
			margin: 0;
		}
	}

	.hub-border {
		height: .35rem;
		background-color: var(--color--main--borders);
		margin-bottom: var(--spacing--m);
	}

	.hub-intro {
		font-family: var(--font--family--text-l);
		font-size: 1em;
		font-weight: var(--font--weight--300);
		line-height: 1.5;
		margin-bottom: var(--spacing--l);
	}

	.hub-summary {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: var(--spacing--m);
		margin-bottom: var(--spacing--xl);
		border-top: var(--border--thin);
		padding-top: var(--spacing--m);

		.summary-label {
			font-family: var(--font--family--display-s);
			font-size: 0.55em;
			font-weight: var(--font--weight--700);
			display: block;
			margin-bottom: var(--spacing--2xs);
		}

		.summary-amount {
			font-family: var(--font--family--display-xl);
			font-size: var(--font--size--4xl);
			font-weight: var(--font--weight--500);
			line-height: 1;

			sup {
				font-size: 0.5em;
				vertical-align: super;
			}

			&.unpaid {
				color: var(--color--red);
			}

			&.paid {
				color: var(--color--green);
			}
		}
	}

	.hub-section-title {
		font-family: var(--font--family--display-xl);
		font-size: 1em;
		font-weight: var(--font--weight--500);
		margin: 0 0 var(--spacing--xs);
		padding: 0;
		border: none;
		text-transform: none;
		letter-spacing: 0;
	}


	.hub-table {
		width: 100%;
		border-collapse: collapse;
		table-layout: auto;
		font-family: var(--font--family--display-s);
		font-size: 1em;
		margin: 0 0 var(--spacing--xl);

		thead {
			background-color: var(--color--main--background);
		}

		th {
			font-weight: var(--font--weight--700);
			text-align: left;
			padding: var(--spacing--2xs) var(--spacing--xs);
			border: var(--border--thin);
			font-size: 0.7em;
		}

		td {
			padding: var(--spacing--2xs) var(--spacing--xs);
			border: var(--border--thin);
			font-size: 0.7em;

			&:nth-child(1),
			&:nth-child(2),
			&:nth-child(5) {
				white-space: nowrap;
			}
		}

		.status-unpaid {
			color: var(--color--red);
			font-weight: var(--font--weight--600);
		}

		.status-paid {
			color: var(--color--green);
			font-weight: var(--font--weight--600);
		}

		td:nth-child(2) {
			text-decoration: underline;
		}
	}

}

.hub-modal {
	display: none;
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
	align-items: center;
	justify-content: center;

	&.visible {
		display: flex;
	}

	.modal-content {
		background-color: var(--color--white);
		border: var(--border--thin);
		padding: var(--spacing--xl);
		max-width: 20rem;
		text-align: center;
		position: relative;
		box-shadow: 0 .5rem 2rem rgba(0, 0, 0, 0.2);

		h3 {
			font-family: var(--font--family--display-xl);
			font-size: var(--font--size--m);
			font-weight: var(--font--weight--500);
			margin: 0 0 var(--spacing--s);
			padding: 0;
			border: none;
			text-transform: none;
			letter-spacing: 0;
		}

		p {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--3xs);
			font-weight: var(--font--weight--500);
			line-height: 1.5;
			margin-bottom: var(--spacing--m);
		}

		button.loud {
			margin: 0;
		}
	}

	.modal-close {
		position: absolute;
		top: var(--spacing--2xs);
		right: var(--spacing--xs);
		background: none;
		border: none;
		font-size: var(--font--size--m);
		cursor: pointer;
		min-width: 0;
		padding: 0;
		margin: 0;
		color: var(--color--main--borders);
		line-height: 1;

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

/* client-hub-demo styles merged below */

.line-items-preview {
	min-height: 10rem;
	margin-top: var(--spacing--l);
	

	ol.invoice-items {
		list-style: none;
		counter-reset: line-items;
		margin: 0;
		padding: 0;

		li.line {
			display: grid;
			grid-template-columns: 3rem 1fr auto auto;
			grid-template-areas:
				"number name  rate  price"
				".      desc  desc  desc";
			align-items: baseline;
			gap: 0 var(--spacing--m);
			padding: var(--spacing--m) var(--spacing--m);
			border-top: var(--border--thin);
			border-bottom: var(--border--thin);
			margin-bottom: -.125rem;
			counter-increment: line-items;
			font-family: var(--font--family--text-l);

			&::before {
				content: counter(line-items);
				grid-area: number;
				font-family: var(--font--family--display-s);
				font-size: var(--font--size--xs);
				font-weight: var(--font--weight--500);
				color: var(--color--main--borders);
				text-align: center;
			}

			.service-name {
				grid-area: name;
				font-weight: var(--font--weight--500);
				font-size: var(--font--size--s);
			}

			.line-rate {
				grid-area: rate;
				font-size: var(--font--size--s);
				font-style: italic;
				color: var(--color--black);
				white-space: nowrap;
			}

			.line-price {
				grid-area: price;
				font-weight: var(--font--weight--500);
				font-size: var(--font--size--s);
				text-align: right;
				white-space: nowrap;
			}

			.line-description {
				grid-area: desc;
				font-family: var(--font--family--display-s);
				font-size: var(--font--size--3xs);
				font-weight: var(--font--weight--400);
				color: var(--color--main--borders);
				margin-top: var(--spacing--2xs);
				line-height: var(--font--line-height--loose);
			}

			&.flat-rate {
				.line-rate {
					display: none;
				}
			}
		}
	}

	.preview-empty {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--xs);
		color: var(--color--main--borders);
		text-align: center;
		padding: var(--spacing--xl) var(--spacing--m);
	}
}

/* --------- Client Hub Demo --------- */

.client-hub-demo {
	background-color: var(--color--white);
	border: var(--border--thin);
	padding: var(--spacing--xl);
	margin: var(--spacing--xl);
	font-size: 150%;

	.client-hub-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: var(--spacing--xs);

		h2 {
			font-family: var(--font--family--display-xl);
			font-weight: var(--font--weight--500);
			margin: 0;
			padding: 0;
			border: none;
			text-align: left;
			font-size: var(--font--size--3xl);
		}

		button {
			font-size: 0.6em;
			min-width: 0;
			margin: 0;
		}
	}

	.client-hub-border {
		height: .35rem;
		background-color: var(--color--main);
		margin-bottom: var(--spacing--m);
	}

	.client-hub-intro {
		font-family: var(--font--family--text-l);
		font-size: 1em;
		font-weight: var(--font--weight--300);
		line-height: 1.5;
		margin-bottom: var(--spacing--m);
	}

	table.client-hub-table {
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed;
		font-family: var(--font--family--display-s);
		font-size: .7em;
		margin: 0;

		col.col-client { width: 55%; }
		col.col-billed { width: 22.5%; }
		col.col-invoices { width: 22.5%; }

		thead {
			background-color: var(--color--main--background);
		}

		th {
			font-weight: var(--font--weight--700);
			text-align: left;
			padding: var(--spacing--2xs) var(--spacing--xs);
			border: var(--border--thin);
		}

		td {
			padding: var(--spacing--2xs) var(--spacing--xs);
			border: var(--border--thin);

			&:first-child {
				text-decoration: underline;
			}
		}

		.unpaid {
			color: var(--color--red);
			font-weight: var(--font--weight--600);
		}
	}
}

.client-hub-modal {
	display: none;
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
	align-items: center;
	justify-content: center;

	&.visible {
		display: flex;
	}

	.modal-content {
		background-color: var(--color--white);
		border: var(--border--thin);
		padding: var(--spacing--xl);
		max-width: 20rem;
		text-align: center;
		position: relative;
		box-shadow: 0 .5rem 2rem rgba(0, 0, 0, 0.2);

		h3 {
			font-family: var(--font--family--display-xl);
			font-size: var(--font--size--2xl);
			line-height: 1;
			font-weight: var(--font--weight--500);
			margin: 0 0 var(--spacing--s);
			padding: 0;
			border: none;
			text-transform: none;
			letter-spacing: 0;
		}

		p {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--3xs);
			font-weight: var(--font--weight--500);
			line-height: 1.5;
			margin-bottom: var(--spacing--m);
		}

		button.loud {
			margin: 0;
		}
	}

	.modal-close {
		position: absolute;
		top: var(--spacing--2xs);
		right: var(--spacing--xs);
		background: none;
		border: none;
		font-size: var(--font--size--m);
		cursor: pointer;
		min-width: 0;
		padding: 0;
		margin: 0;
		color: var(--color--main--borders);
		line-height: 1;

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

#private-notes .demo-block {
	background-color: var(--color--black);
}

/* --------- Client Edit / Private Notes Demo --------- */

.client-edit-demo {
	background-color: var(--color--main--background);
	border: var(--border--thin);
	padding: var(--spacing--xl);

	.client-edit-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: var(--spacing--xs);

		h2 {
			font-family: var(--font--family--display-xl);
			font-weight: var(--font--weight--500);
			font-size: var(--font--size--3xl);
			margin: 0;
			padding: 0;
			border: none;
			text-align: left;
		}

		button {
			font-size: var(--font--size--3xs);
			min-width: 0;
			margin: 0;
		}
	}

	.client-edit-border {
		height: .35rem;
		background-color: var(--color--main);
		margin-bottom: var(--spacing--l);
	}

	.client-edit-fields {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--spacing--m);
	}

	.field-group {
		display: flex;
		flex-direction: column;
	}

	.client-edit-field {
		margin-bottom: var(--spacing--m);

		label {
			display: block;
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--3xs);
			font-weight: var(--font--weight--700);
			margin-bottom: var(--spacing--2xs);
			flex-direction: row;
			gap: 0;

			.confidential {
				color: var(--color--red);
				font-weight: var(--font--weight--700);
			}
		}

		input, textarea {
			width: 100%;
			font-family: var(--font--family--input);
			font-size: var(--font--size--xs);
			padding: var(--spacing--xs);
			border: var(--border--thin);
			background-color: var(--color--white);
			box-sizing: border-box;
		}

		input[readonly], textarea[readonly] {
			color: var(--color--main--borders);
			cursor: default;
		}

		textarea {
			resize: vertical;
			min-height: 5rem;
		}

		textarea.notes-area {
			min-height: 10rem;
		}

		&.full-width {
			grid-column: 1 / -1;
		}
	}

	.notes-hint {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--m);
		text-align: center;
		font-weight: var(--font--weight--400);
		font-style: italic;
		color: var(--color--main--borders);
		margin-top: var(--spacing--xs);
		line-height: 1.5;
	}

	.notes-saved {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--3xs);
		font-weight: var(--font--weight--600);
		color: var(--color--green);
		margin-top: var(--spacing--xs);
		display: none;

		&.visible {
			display: block;
		}
	}
}

/* --------- Invoice Comparison --------- */

.invoice-comparison {
	margin: var(--spacing--xl) 0;
}

.comparison-selector {
	display: flex;
	align-items: center;
	gap: var(--spacing--2xs);
	margin-bottom: var(--spacing--m);
	flex-wrap: wrap;
	justify-content: center;

	& > span {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--xs);
		font-weight: var(--font--weight--700);
		margin-right: var(--spacing--xs);
	}
}

.comparison-btn {
	font-family: var(--font--family--display-s);
	font-size: var(--font--size--3xs);
	font-weight: var(--font--weight--600);
	text-transform: uppercase;
	letter-spacing: var(--font--letter-spacing--wide);
	padding: var(--spacing--2xs) var(--spacing--s);
	border: var(--border--thin);
	background: var(--color--white);
	color: var(--color--main);
	cursor: pointer;
	min-width: 0;
	margin: 0;

	&:hover {
		border-color: var(--color--main);
	}

	&.active {
		background-color: var(--color--main);
		color: var(--color--white);
		border-color: var(--color--main);
	}
}

.comparison-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing--m);
}

.comparison-side {
	h3 {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--xs);
		font-weight: var(--font--weight--700);
		text-transform: uppercase;
		letter-spacing: var(--font--letter-spacing--wide);
		text-align: center;
		margin-bottom: var(--spacing--xs);
		padding-bottom: var(--spacing--xs);
		border-bottom: var(--border--thin);
	}
}

.comparison-invoice {
	border: var(--border--thin);
	background-color: var(--color--white);
	padding: var(--spacing--2xs);

	img {
		width: 100%;
		height: auto;
		display: block;
		border: none;
		border-radius: 0;
	}
}

/* --------- Inbox / Reminders Demo --------- */

#reminders .demo-block {
	padding-right: 0;
	overflow: hidden;
	background-color: var(--color--highlight);
}

.inbox-demo {
	background-color: var(--color--white);
	border: var(--border--thin);
	border-right: none;
	overflow: hidden;

	.inbox-header {
		padding: var(--spacing--s) var(--spacing--m);
		border-bottom: var(--border--thin);

		.inbox-title {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--m);
			font-weight: var(--font--weight--700);
		}
	}

	.inbox-list {
		font-family: var(--font--family--display-s);
		font-size: var(--font--size--s);
	}

	.inbox-row {
		display: grid;
		grid-template-columns: 2rem 8rem 1fr;
		gap: var(--spacing--xs);
		padding: var(--spacing--s) var(--spacing--s);
		border-bottom: .0625rem solid var(--color--main--medium-light);
		align-items: center;
		cursor: default;

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

		&.read {
			color: var(--color--main--borders);
			background-color: var(--color--main--background);

			.inbox-from {
				font-weight: var(--font--weight--400);
			}
		}

		&.new-email {
			background-color: var(--color--white);
			font-weight: var(--font--weight--500);
			animation: slide-in 0.4s ease-out;

			.inbox-star {
				color: #f4b400;
			}
		}
	}

	.inbox-star {
		text-align: center;
		font-size: 1rem;
		color: var(--color--main--medium-light);
	}

	.inbox-from {
		font-weight: var(--font--weight--600);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.inbox-subject {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.inbox-time {
		display: none;
	}
}

@keyframes slide-in {
	from {
		max-height: 0;
		opacity: 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	to {
		max-height: 3rem;
		opacity: 1;
	}
}

/* --------- Referral Demo --------- */

#referral-program .demo-block {
	background-color: var(--color--black);
}

.referral-demo {
	text-align: center;

	.referral-intro {
		font-family: var(--font--family--text-l);
		font-size: var(--font--size--s);
		font-weight: var(--font--weight--300);
		line-height: 1.5;
		margin-bottom: var(--spacing--xl);
		max-width: 25rem;
		margin-inline: auto;
	}

	.referral-card {
		background-color: var(--color--white);
		border: var(--border--thin);
		padding: var(--spacing--xl);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing--s);

		.referral-label {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--3xs);
			font-weight: var(--font--weight--600);
			text-transform: uppercase;
			letter-spacing: var(--font--letter-spacing--xx-wide);
			color: var(--color--main--borders);
		}

		.referral-handle {
			font-family: var(--font--family--display-xl);
			font-size: var(--font--size--xl);
			font-weight: var(--font--weight--500);
			color: var(--color--main);
		}

		.referral-message {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--xs);
			font-weight: var(--font--weight--500);
			line-height: 1.5;
			max-width: 22rem;
			color: var(--color--black);
		}

		.referral-url {
			font-family: var(--font--family--input);
			font-size: var(--font--size--xs);
			color: var(--color--main);
			text-decoration: underline;
			word-break: break-all;
		}

		a.button {
			margin-top: var(--spacing--xs);
			text-decoration: none;
			display: inline-block;
		}

		.referral-nudge {
			font-family: var(--font--family--display-s);
			font-size: var(--font--size--3xs);
			font-weight: var(--font--weight--400);
			font-style: italic;
			color: var(--color--main--borders);
			margin-top: var(--spacing--2xs);
			line-height: 1.4;
		}
	}
}

/* --------- Papyrus Easter Egg --------- */

#ryan-gosling {
	position: fixed;
	bottom: 0;
	right: 2rem;
	z-index: 9999;
	pointer-events: none;
	border: none;
	transform-origin: bottom right;
	transform: scale(0.5) translateY(200%);
	transition: transform 3s ease-out;
}

#ryan-gosling.visible {
	transform: scale(0.5) translateY(0);
}

/* --------- Responsive --------- */

@media screen and (max-width: 620px) {
	.demo-block {
		border-left: none;
		border-top: var(--border--thin);
		padding: var(--spacing--xl);
		min-width: 0;
		overflow-x: hidden;
	}

	.primary-color-layout {
		grid-template-columns: 1fr;
	}

	.color-palette {
		display: none;
	}

	.color-choosers {
		grid-template-columns: 1fr;
	}

	.color-chooser {
		grid-template-columns: 1fr auto;
	}

	.feature-group-header {
		padding: var(--spacing--xl) var(--spacing--m);

		h1 {
			font-size: var(--font--size--l-xl);
		}
	}

	.comparison-grid {
		grid-template-columns: 1fr;
	}

	.feature-split {
		.text-block {
			padding: var(--spacing--2xl);
			min-width: 0;
		}
	}

	.line-item-editor {
		min-width: 0;
	}

	.fields-row, .rate-line {
		min-width: 0;
	}

	.editor-field {
		min-width: 0;
	}

	.feature-group-header {
		top: 0rem;
	}

	#invoice-hub .demo-scroll,
	#client-hub .demo-scroll {
		overflow-x: hidden;
	}

	.invoice-hub-demo, .client-hub-demo {
		font-size: 150%;
		margin: 0;
		border: none;
	}

	.template-demo {
		grid-template-columns: 1fr;

		.template-thumbs {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: var(--spacing--s);
			padding-bottom: var(--spacing--s);
		}
	}

	.line-item-editor {
		.fields-row {
			flex-wrap: wrap;
		}

		.fields-row .field-name {
			flex: 1 1 100%;
		}

		.fields-row .rate-line {
			flex: 1 1 100%;
		}

		.fields-row .field-price {
			flex: 1 1 100%;
		}

		.rate-line .decoration {
			align-self: end;
			padding-bottom: var(--spacing--2xs);
		}
	}

	.invoice-hub-demo {
		padding: 0;
		margin: 0;

		.hub-header {
			padding: var(--spacing--l) var(--spacing--xl) 0;
		}

		.hub-border {
			margin: var(--spacing--s) var(--spacing--xl) 0;
		}

		.hub-intro {
			padding: 0 var(--spacing--xl) 0;
		}

		.hub-section-title {
			padding: 0 var(--spacing--xl) 0;
		}

		.hub-summary {
			display: grid;
			grid-template-columns: 1fr;
			gap: var(--spacing--m);
			padding: var(--spacing--l) var(--spacing--xl) 0;
		}

		.hub-table {
			width: 130%;
			margin: 0 var(--spacing--xl) var(--spacing--l);
		}
	}
}