/* Hidden Utility - placed early for immediate parsing */
.hidden {
	display: none !important;
}

/* ========================================
   Layout Components
   ======================================== */

#content-main #page.full {
	padding: var(--space--3xl) 0rem;
	width: 100%;
}

#content-main #page.full > .entry-content {
	max-width: 70rem;
	margin: 0 auto;
	padding: 0rem var(--space--5xl);
	position:relative;
}

/* ========================================
   Spot Illustrations
   ======================================== */

.spot-illustration {
	display: block;
	height: 8rem;
	margin: -.5rem auto;
	object-fit: contain;
}

.burst{
	position:absolute;
	top: -11rem;
	left:calc(50% - 17rem);
	z-index: -1;
	width: 34rem;
	opacity: 0.7;
}

/* ========================================
   Headlines
   ======================================== */

/* Base h3 - most common pattern */
h3 {
	font-family: var(--font--title--family--small);
	font-weight: 700;
	font-size: var(--font-size--m);
	color: var(--color--black);
}

/* Utility variants */
.heading-uppercase {
	font-weight: 900;
	font-size: var(--font-size--s-m);
	text-transform: uppercase;
	letter-spacing: .15rem;
}

.heading-large {
	font-size: var(--font-size--m);
}

/* ========================================
   Email Helper Component
   ======================================== */

/* Inherits base h3 styles, uses .heading-large variant */
#email-helper h3{
	text-align: center;
	margin: var(--space--l) 0 0rem;
	font-size: var(--font-size--m); /* .heading-large */
}
	
#email-helper ul{
	list-style:none;
	padding:0;
	text-align:center;
	padding-bottom: 0rem;
	margin-top: var(--space--l);
}

#email-helper ul li{
	display:inline-block;
	background-color: var(--color--main--medium);
	border: var(--border--thin--medium);
	color: black;
	padding: var(--space--m) 1.35rem;
	margin-right: 0.4375rem;
	margin-bottom: 0.625rem;
	font-size: var(--font-size--s-l);
	font-weight: 500;
	font-family: var(--font--title--family--small);
	font-weight: 500;
}

#email-helper ul li.hide{
	display:none;
}

#email-helper ul li.visible{
	display:inline-block;
}

#email-helper .letter{
	background-color: white;
	padding: var(--space--3xl) var(--space--5xl);
	margin-top: var(--space--xl);
}

#email-helper .letter ol{
	list-style:none;
	color:#B94BC5;
	counter-reset: item;
}

#email-helper .letter ol li{
	margin-bottom: var(--space--m);
	font-family: var(--font--title--family--small);
	font-weight: 500;
	font-size: var(--font-size--s-l);
	line-height: 1.5;
	position: relative;
	padding-left: .5em; /* Creates space for the numbers */
 	margin-left: 0;
}
#email-helper .letter ol li::before {
	counter-increment: item;
	content: counter(item) ".";
	position: absolute;
	left: -2rem;
	width: var(--space--m-l);
	text-align: right;
}

#email-helper ul li:last-child{
	margin-right: 0;
}

#email-helper ul li:hover{
	background-color: var(--color--highlight);
	border: var(--border--thin);
}

#email-helper ul li.nomatter, #email-helper ul li.nomatter:hover{
	background-color: #B94BC5;
	border: .125rem solid #B94BC5;
	color:white;
}

#email-helper ul li.budget.active{
	background-color: #3BC743;
	border: .125rem solid #3BC743;
	color:white;
}

#email-helper ul li.client-type.active{
	background-color: #B94BC5;
	border: .125rem solid #B94BC5;
	color:white;
}

#email-helper ul li.timeline.active{
	background-color: #00AAB4;
	border: .125rem solid #00AAB4;
	color:white;
} 

#email-helper ul li.check.active{
	background-color: #EA0606;
	border: .125rem solid #EA0606;
	color:white;
}

#email-helper p{
	text-indent: 0;
	margin-bottom: 0.9375rem;
}
	
	.free, .low-budget, .client, .agency, .non-profit, .wfh, .noncompete, .killfee, .contract, .social, .quick, .future, .scope, .whenever{
		display:none;
		font-family: var(--font--title--family--small);
		font-weight: 700;
	}
	
	
	.client, .agency, .non-profit{
		color:#3BC743;
	}
	
	.free, .low-budget{
		color:#3BC743;
	}
	
	.quick, .whenever, .future{
		color: #00AAB4;
	}
	
	.social, .killfee, .noncompete, .wfh, .contract, .scope{
		color: #EA0606;
	}
	
	.fair-flow, .friend-flow, .charity-flow{
		display:none;
	}
	
	.visible{
		display:inline;
	}
	
	h3.visible, p.visible, ul.visible{
		display:block;
	}
	
	.hide{
		display:none;
	}
	
	#instructions{
		width: 100%;
		padding: var(--space--m) var(--space--3xl);
		border-bottom: var(--border--thin); 
		margin: var(--space--m) 0;
		text-align:center;
		font-size: var(--font-size--2xs);
		font-family: var(--font--title--family--small);
		font-weight: 900;
		text-transform:uppercase;
		letter-spacing: .15rem;
		margin-top: var(--space--l);
	}

/* ========================================
   Main Layout Container
   ======================================== */

#helpfulthings {
	display: flex;
	flex-direction: row;
	border-bottom: none;
	border-bottom: var(--border--thin);

	section {
		border-bottom: none;
	}

	p{
		&.dropcap{
			
			&:first-letter{
				color: var(--color--main);
				font-size: var(--font-size--5xl);
				line-height: 5.5rem;
				margin-right: var(--space--m);
				margin-top: var(--space--s-m);
				float:left;
				font-family: var(--font--title--family--dropcap);
				font-weight: 900;
				text-shadow: 0.25rem 0.25rem 0.25rem white;
			}
		}
	}

	h1, h2{
		text-align:center;
	}

	.article-page{
		.article-date{
			font-family: var(--font--title--family--small);
			font-weight: 400;
			font-size: var(--font-size--s);
			color: var(--color--black);
			margin: 0 0 var(--space--m) 0;
			text-align: left;
		}

		.article-title{
			text-align: left;
			font-family: var(--font--title--family--xlarge);
			font-weight: 500;
			font-size: var(--font-size--xl);
			letter-spacing: -.03rem;
			margin: 0 0 var(--space--m) 0;
		}

		.article-subtitle{
			text-align: left;
			font-family: var(--font--title--family--small);
			font-weight: 400;
			font-size: var(--font-size--m);
			margin: 0 0 var(--space--m) 0;
			color: var(--color--black);
		}

		/* Could use .bottom-border in HTML */
		.article-tags{
			display: flex;
			flex-wrap: wrap;
			gap: var(--space--xs);
			margin: 0 0 var(--space--xl) 0;
			padding-bottom: var(--space--m);
			border-bottom: var(--border--thin);

			.article-tag{
				display: inline-block;
				background-color: var(--color--highlight);
				color: var(--color--black);
				padding: 0.375rem var(--space--s);
				font-family: var(--font--title--family--small);
				font-weight: 500;
				font-size: var(--font-size--2xs);
				text-transform: none;
				letter-spacing: normal;
			}
		}
	}

	/* ===== Sidebar Navigation ===== */
	#sidebar {
		width: 19rem;
		min-width: 19rem;
		max-width: 19rem;
		flex-shrink: 0;
		flex-grow: 0;
		border-right: var(--border--thin);
		padding: 0rem;
		position: sticky;
		top: calc(5rem + .125rem);
		height: calc(100vh - 5rem - .125rem);
		overflow-y: auto;
		align-self: flex-start;
		scrollbar-width: none;
		-ms-overflow-style: none;
		&::-webkit-scrollbar {
			display: none;
		}

		.mobile-sidebar-toggle{
			display: none;
		}

		.mobile-sidebar-toggle-label{
			display: none;
		}

		.sidebar-content{
			display: block;
		}

		a{
			text-decoration: none;
			color: var(--color--black);
			&:hover{
				background-color: var(--color--highlight);
			}
			&:visited{
				color: var(--color--black);
			}
			&.draft{
				color: var(--color--main--medium);
			}
		}

		h2{
			border-bottom: var(--border--thin);
			margin: var(--space--l) 0 0 0;	
			font-family: var(--font--title--family--xlarge);
			font-weight: 500;
			font-size: var(--font-size--l);
			letter-spacing: -.03rem;
			padding: 0 var(--space--xl) var(--space--2xl);
			line-height:1;
		}

		ul{
			padding:0;
			margin:0;

			&.copy-pasta-menu{
				padding: var(--space--l) 0 0;
				border-top: var(--border--thin--medium);
				margin-top: var(--space--xs);
			}
		}

		ul li{
			border-bottom: var(--border--thin);

			/* Hide checkboxes */
			.sidebar-toggle{
				display: none;
			}

			/* Style the toggle label (clickable h3 wrapper) */
			.sidebar-toggle-label{
				cursor: pointer;
				display: block;
				margin: 0;

				/* Inherits base h3 styles, uses .heading-uppercase pattern with smaller size */
				h3{
					font-weight: 700;
					font-size: var(--font-size--2xs);
					font-family: var(--font--title--family--small);
					text-transform: uppercase;
					letter-spacing: .15rem;
					margin: var(--space--m-l) var(--space--l) 0rem;
					border-bottom: var(--border--thin--medium);
					padding: 0 var(--space--l) var(--space--m-l) 0;
					position: relative;
					user-select: none;

					/* Arrow indicator - default (closed/right) */
					&::after{
						content: '\25B6\FE0E';
						position: absolute;
						right: 0;
						top: 0;
						font-size: var(--font-size--3xs);
						transition: transform 0.2s ease;
					}
				}
			}

			/* When checkbox is checked (open), show down arrow */
			.sidebar-toggle:checked ~ .sidebar-toggle-label h3::after{
				content: '▼';
			}

			/* Hide the ul when checkbox is unchecked */
			.sidebar-toggle:not(:checked) ~ ul{
				display: none;
			}

			/* Delete border bottom when checkbox is unchecked */
			.sidebar-toggle:not(:checked) ~ .sidebar-toggle-label h3{
				border-bottom: none;
			}

			/* Show the ul when checkbox is checked */
			.sidebar-toggle:checked ~ ul{
				display: block;
			}

			ul{
				padding: var(--space--l) var(--space--l) var(--space--xs);
			}

			/* Copy Pasta menu - no indentation, border on top */
			ul li ul.copy-pasta-menu{
				padding-left: 0 !important;
				padding-right: 0 !important;
				padding-top: var(--space--l);
				padding-bottom: var(--space--xs);
				border-top: var(--border--thin);
				margin-top: var(--space--xs);
			}

			/* Sidebar subgroup - visual separator for subfolder items */
			li.sidebar-subgroup{
				border-top: var(--border--thin--medium);
				padding-top: var(--space--xs);
				margin-top: var(--space--xs);
				border-bottom: none;
				display:block;
			}

			ul li{
				padding: 0 0 var(--space--m);
				font-family: var(--font--title--family--small);
				font-weight: 700;
				font-size: var(--font-size--s);
				border-bottom: none;

				&:last-child{
					border-bottom: none;
					margin-bottom: var(--space--xs);
				}

				a{
					/* Active link styling */
					&.active{
						background-color: var(--color--highlight);
					}
				}
			}
		}
	}

	/* ===== Main Content Area ===== */
	#content-main {
		flex: 1;
		min-width: 0;
		overflow-x: hidden;
		width: 100%;
		margin: 0;
		margin-bottom: var(--space--3xl);
		display: flex;
		flex-direction: column;
		align-items: center;

		.entry-content{

			p{
				font-size: var(--font-size--m);
				font-weight: 300;	
				
				&.dropcap{
					&:first-letter {
						font-size: var(--font-size--5xl);
						line-height: 6rem;
						margin-right: var(--space--m);
						margin-top: var(--space--m);
					}
				}
			}

			/* Inherits base h3 styles, uses .bottom-border pattern */
			h3 {
				margin: 0 0 var(--space--xs) 0;
				border-bottom: var(--border--thin);
				padding-bottom: var(--space--m);
				text-transform: none;
				letter-spacing: normal;
			}

			h4{
				font-family: var(--font--title--family--small);
				font-weight: 700;
				font-size: var(--font-size--s-m);
				border-bottom: var(--border--thin--medium);
				padding-bottom: var(--space--s);
				text-transform: none;
				letter-spacing: normal;
				margin-bottom: var(--space--s);
				margin-top: var(--space--m);
				&.uploaded-account-name{
					margin-bottom: 0;
					margin-top:0;
				}
			}
			h5{
				font-family: var(--font--title--family--small);
				font-weight: 700;
				font-size: var(--font-size--2xs);
				text-transform: none;
				letter-spacing: normal;
				margin-bottom: var(--space--m);
			}

			.content-section{

				p+h3{
					margin-top: var(--space--4xl);
				}

				/* Inherits base h3 styles, uses .heading-uppercase and .bottom-border patterns */
				h3{
					font-weight: 900;
					font-size: var(--font-size--s-m);
					text-transform: uppercase;
					letter-spacing: .15rem;
					padding-bottom: var(--space--m);
					margin-bottom: var(--space--m);
					border-bottom: var(--border--thin);
				}

				h4{
					font-family: var(--font--title--family--small);
					font-weight: 700;
					font-size: var(--font-size--s-l);
					text-transform: none;
					letter-spacing: normal;
					margin-top: var(--space--l);
					margin-bottom: var(--space--s);
				}
				
				ul{
					font-family: var(--font--title--family--small);
					padding:0 var(--space--xl);
					border-left: var(--border--thin--medium);

					li{
						margin-bottom: var(--space--m);
						font-size: var(--font-size--s-m);
						line-height: 1.5;

						strong{
							font-weight: 900;
						}
					}
				}
				img{
					max-width: 100%;
				}
			}
		}
	}

	#content-main.full #page{
		max-width: none;
	}

	/* ===== Right Sidebar ===== */
	#sidebar-right {
		width: 19rem;
		min-width: 19rem;
		max-width: 19rem;
		flex-shrink: 0;
		flex-grow: 0;
		border-left: var(--border--thin);
		background-color: var(--color--white);
		padding: var(--space--l) var(--space--xl);
		text-align: center;
		font-family: "Circular", var(--font--title--family--small);
		position: sticky;
		top: calc(5rem + .125rem);
		height: calc(100vh - 5rem - .125rem);
		overflow-y: auto;
		align-self: flex-start;
		scrollbar-width: none;
		-ms-overflow-style: none;
		&::-webkit-scrollbar {
			display: none;
		}

		.brand-section{
			margin-bottom: var(--space--xl);

			.brought-by{
				font-family: "Circular", var(--font--title--family--small);
				font-weight: 700;
				font-size: var(--font-size--s);
				color: var(--color--black);
				margin: 0;
				text-transform: none;
				letter-spacing: normal;
			}

			.studioworks-name{
				font-family: "Circular", var(--font--title--family--small);
				font-weight: 700;
				font-size: var(--font-size--xl);
				color: var(--color--black);
				margin: 0 0 var(--space--m) 0;
				line-height: 1.2;
			}

			.sidebar-logo{
				width: 85%;
				margin: 0 auto -.5rem;
			}

			.logo-image{
				width: 35%;
				height: auto;
				margin: var(--space--l) auto var(--space--xs);
				display: block;
			}

			.tagline{
				font-family: "Circular", var(--font--title--family--small);
				font-weight: 600;
				font-size: var(--font-size--s-m);
				letter-spacing: -.02rem;
				color: var(--color--black);
				margin: 0;
				line-height: 1.3;
				padding: var(--space--xs) 0 var(--space--2xs);
			}
		}

		.feature-highlights{
			margin: var(--space--m) 0;
			display: flex;
			flex-direction: column;
			gap: var(--space--s);
			align-items: center;

			.feature-item{
				font-family: var(--font--title--family--dropcap);
				letter-spacing: .04rem;
				text-transform: uppercase;
				font-weight: 500;
				font-size: 4.25rem;
				line-height: .8;
				color: var(--color--main);
				/* background-color: var(--color--highlight); */
				padding: 0 var(--space--m) 0;
				text-align: center;
				width: fit-content;
				.amper{
					color: var(--color--black);
				}
			}
		}

		.description-text{
			font-family: "Circular", var(--font--title--family--small);
			font-weight: 600;
			font-size: var(--font-size--s-l);
			color: var(--color--black);
			margin: var(--space--xs) 0 var(--space--2xs);
			line-height: 1.5;

			strong em{
				font-weight: 700;
				font-style: italic;
			}
		}

		.team-credits{
			font-family: "Circular", var(--font--title--family--small);
			font-weight: 400;
			font-size: var(--font-size--3xs);
			color: var(--color--black);
			margin: var(--space--xl) 0 0 0;
			line-height: 1.4;
		}
	}

	
}

/* ========================================
   Homepage Layout
   Extracted from #page.full for specificity independence
   ======================================== */

.homepage-layout .entry-content {
	text-align: left;
}

.homepage-layout{
	background: url("/images/cover-pattern-repeat-2.svg") repeat;
	background-size: 25%;
}

.homepage-layout .entry-content h1.page-title {
	text-align: center;
	font-size: var(--font-size--4xl);
	line-height: 7rem;
	margin-bottom: var(--space--l);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 var(--space--xs);
}

.homepage-layout .entry-content h1.page-title span.the {
	font-family: var(--font--text--family--large);
	font-weight: 700;
	font-style: italic;
	font-size: var(--font-size--l);
	line-height: var(--space--3xl);
	border-top: var(--space--2xs) solid var(--color--main--borders);
	border-bottom: var(--space--2xs) solid var(--color--main--borders);
	margin: var(--space--m) var(--space--xs) 0 0;
}

.homepage-layout .entry-content h2 {
	text-align: center;
	font-size: var(--font-size--xl);
	letter-spacing: -.05rem;
	line-height: var(--space--3xl);
}

.homepage-layout .entry-content h2 span.italic {
	font-family: var(--font--text--family--large);
	font-weight: 700;
	font-style: italic;
	margin: 0 var(--space--2xs) 0 var(--space--xs);
}

.homepage-layout .entry-content p.dropcap:first-letter {
	display: none;
}

.homepage-layout .homepage-divider {
	width: 100%;
	height: .125rem;
	background-color: var(--color--main--borders);
	margin: var(--space--xl) 0;
}

.homepage-layout .white-wrapper {
	background-color: white;
	padding: var(--space--xl) var(--space--3xl);
	border: var(--border--thin);
	margin: var(--space--xl) 0;
}

.homepage-layout .homepage-two-column {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--space--3xl);
	margin: var(--space--m) 0;
}

.homepage-layout .homepage-column-left p {
	color: var(--color--black);
	margin: 0 0 var(--space--l) 0;
}

.homepage-layout .homepage-column-left p a {
	color: var(--color--main);
	text-decoration: underline;
}

.homepage-layout .homepage-column-left p.moretocome {
	font-family: var(--font--title--family--small);
	font-weight: 700 !important;
	font-size: var(--font-size--s-m) !important;
	line-height: 1.25;
	color: var(--color--black);
	margin: 0 0 var(--space--m) 0;
}

.homepage-layout .homepage-column-right p {
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--s) !important;
	font-weight: 500 !important;
	line-height: 1.5;
	color: var(--color--black);
	margin: 0 0 var(--space--l) 0;
}

.homepage-layout .homepage-column-right p a {
	color: var(--color--main);
	text-decoration: underline;
}

#helpfulthings #content-main .entry-content h3.homepage-section-heading {
	font-family: var(--font--text--family--large);
	font-weight: 500;
	font-size: var(--font-size--m);
	font-style: italic;
	color: var(--color--black);
	margin: 0 0 var(--space--m) 0;
	text-align: left;
	border-bottom: none;
	padding-bottom: var(--space--xs);
}

#helpfulthings #content-main .entry-content h3.homepage-section-heading.highlighted {
	background-color: var(--color--highlight);
	display: inline-block;
	padding: var(--space--2xs) var(--space--xs);
	margin: 0 0 var(--space--m) -.5rem;
	border-bottom: none;
}

.homepage-layout .homepage-tools-list {
	list-style: none;
	padding: 0;
	margin: var(--space--l) 0 var(--space--l) 0;
}

.homepage-layout .homepage-tools-list li {
	margin-bottom: var(--space--m);
	font-family: var(--font--text--family--large);
	font-weight: 400;
	font-size: var(--font-size--m);
	line-height: 1.5;
	text-transform: capitalize;
	padding-bottom: var(--space--s);
}

.homepage-layout .homepage-tools-list li a {
	color: var(--color--black);
	text-decoration: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	background-color: var(--color--main--medium);
	padding: var(--space--xs) var(--space--xs);
	&:hover{
		background-color: var(--color--highlight);
	}
}

.homepage-layout .homepage-cta p {
	color: var(--color--black);
	margin: 0 0 var(--space--l) 0;
	border-top: var(--border--thin);
	padding-top: var(--space--l);
	font-size: var(--font-size--m) !important;
}

.homepage-layout .homepage-cta p a {
	color: var(--color--main);
	text-decoration: underline;
}

.homepage-layout .homepage-closing p {
	text-align: center;
	font-family: var(--font--title--family--small);
	font-weight: 700 !important;
}

.homepage-layout .homepage-closing p.homepage-signoff {
	font-style: italic;
	margin-top: var(--space--m);
	font-family: var(--font--text--family--large) !important;
	font-weight: 500 !important;
}

.homepage-layout .homepage-newsletter p {
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--s-m) !important;
	font-weight: 600 !important;
	line-height: 1.5;
	color: var(--color--black);
	margin: 0 0 var(--space--l) 0;
}

.homepage-layout .homepage-newsletter p a {
	color: var(--color--main);
	text-decoration: underline;
}

/* ========================================
   Emojipedia Component
   ======================================== */

#emoji-search-container {
	width: 100%;
	margin: var(--space--xl) 0;
	display: flex;
	justify-content: center;
}

#emoji-search {
	width: 100%;
	padding: var(--space--m) var(--space--l);
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--s);
	font-weight: 500;
	border: var(--border--thin);
	background-color: white;
	color: var(--color--main);
	transition: all 0.2s ease;
}

#emoji-search:focus {
	outline: none;
	border-color: var(--color--highlight);
}

#emoji-search::placeholder {
	color: var(--color--main--medium);
	opacity: 0.7;
}

#emoji-container {
	width: 100%;
	margin: var(--space--xl) 0;
}

#helpfulthings #content-main .entry-content .emoji-category {
	margin-bottom: var(--space--3xl);

	ul li{
		font-size: var(--font-size--m);
		font-family: var(--font--text--family--large);
		font-weight: 400 !important;

		.plus{
			color:var(--color--main--borders);
			font-weight: 500;

		}

		p{
			margin-left: var(--space--l);
			margin-bottom: var(--space--s);
			margin-top: var(--space--s-m);
			&.example{
				margin-bottom: var(--space--xl);
				font-style:italic;
				strong{
					font-style:normal;
					font-weight: 700;
				}
			}
		}
	}
}

.emoji-category:last-child {
	margin-bottom: 0;
}

.emoji-category-heading {
	font-family: var(--font--title--family--small);
	font-weight: 900;
	font-size: var(--font-size--m);
	text-transform: uppercase;
	letter-spacing: 0.15rem;
	margin-bottom: var(--space--l);
	margin-top: 0;
	padding-bottom: var(--space--s);
	border-bottom: var(--border--thin);
}

.emoji-region-heading {
	font-family: var(--font--title--family--small);
	font-weight: 700;
	font-size: var(--font-size--s-l);
	text-transform: none;
	letter-spacing: 0.05rem;
	margin-bottom: var(--space--m);
	margin-top: var(--space--xl);
	padding-bottom: var(--space--xs);
	border-bottom: var(--border--thin--medium);
	color: var(--color--main);
}

.emoji-category .emoji-region-heading:first-of-type {
	margin-top: var(--space--xs);
}

.category-description {
	margin-bottom: var(--space--l);
	margin-top: var(--space--xs);
	line-height: 1.6;
}

.category-description p {
	margin-bottom: var(--space--m);
}

.category-description ul.keyboard-instructions {
	margin-top: var(--space--s);
	margin-bottom: var(--space--m);
}

.emoji-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
	gap: var(--space--xs);
	list-style: none;
	padding: 0;
	margin: 0;
}

.emoji-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space--m);
	font-size: var(--font-size--l);
	background-color: var(--color--main--medium);
	border: var(--border--thin--medium);
	cursor: pointer;
	transition: all 0.2s ease;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.emoji-item:hover {
	background-color: var(--color--highlight);
	border-color: var(--color--main--borders);
	transform: scale(1.1);
}

.emoji-item:active {
	transform: scale(0.95);
}

.emoji-item:focus {
	outline: var(--border--thin--main);
	outline-offset: 0.125rem;
}

.emoji-item.keyboard {
	border: var(--border--thin);
}

.copy-feedback {
	position: fixed;
	background-color: var(--color--main);
	color: var(--color--highlight);
	padding: var(--space--xs) var(--space--m);
	font-family: var(--font--title--family--small);
	font-weight: 700;
	font-size: var(--font-size--2xs);
	pointer-events: none;
	opacity: 0;
	transform: translateY(-0.625rem);
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 1000;
}

.copy-feedback.show {
	opacity: 1;
	transform: translateY(0);
}

/* Character tooltip styles */
.character-tooltip {
	position: fixed;
	background-color: var(--color--main);
	color: white;
	padding: var(--space--s) var(--space--m);
	font-family: var(--font--title--family--small);
	font-weight: 500;
	font-size: var(--font-size--2xs);
	pointer-events: none;
	opacity: 0;
	transform: translateY(0.3125rem);
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 1002;
	max-width: 20rem;
	text-align: left;
	display: none;
	line-height: 1.5;
}

.character-tooltip.show {
	opacity: 1;
	transform: translateY(0);
	display: block;
}

.character-tooltip .tooltip-instructions-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.character-tooltip .tooltip-instructions-list li {
	padding: var(--space--2xs) 0;
	padding-left: var(--space--m);
	position: relative;
}

.character-tooltip .tooltip-instructions-list li:before {
	content: "•";
	color: var(--color--highlight);
	font-weight: 900;
	position: absolute;
	left: 0;
}

/* Educational content styles for quotes and accents page */
/* Could use .bottom-border--lg in HTML */
.educational-content {
	margin-bottom: var(--space--3xl);
	padding-bottom: var(--space--3xl);
	border-bottom: var(--border--thin);
}

/* Inherits base h3 styles */
.educational-content h3 {
	margin-top: var(--space--xl);
	margin-bottom: var(--space--m);
}

.educational-content h3:first-of-type {
	margin-top: 0;
}

.educational-content h4 {
	font-family: var(--font--title--family--small);
	font-weight: 600;
	font-size: var(--font-size--s-l);
	margin-top: var(--space--l);
	margin-bottom: var(--space--s);
	color: var(--color--main);
}

.educational-content p {
	margin-bottom: var(--space--l);
	line-height: 1.6;
}

.educational-content .keyboard-instructions {
	list-style: none;
	padding: 0;
	margin: var(--space--l) 0 var(--space--xl) 0;
}

.educational-content .keyboard-instructions li {
	margin-bottom: var(--space--m-l);
	padding-left: var(--space--l);
	position: relative;
	line-height: 1.6;
}

.educational-content .keyboard-instructions li:before {
	content: "•";
	color: var(--color--highlight);
	font-weight: 900;
	position: absolute;
	left: 0;
}

.educational-content .keyboard-instructions li strong {
	font-family: var(--font--title--family--small);
	font-weight: 700;
	color: var(--color--main);
}

.educational-content .keyboard-instructions li em {
	font-style: italic;
	color: var(--color--main--medium);
}

.educational-content .instruction-note {
	font-size: var(--font-size--2xs);
	color: var(--color--main--medium);
	font-style: italic;
}

.symbol-library-intro {
	margin-top: var(--space--3xl);
	margin-bottom: var(--space--xl);
	padding-top: var(--space--xl);
	border-top: var(--border--thin);
}

/* Inherits base h3 styles, uses .heading-large variant */
.symbol-library-intro h3 {
	font-size: var(--font-size--m); /* .heading-large */
	margin-bottom: var(--space--m);
}

.symbol-library-intro p {
	margin-bottom: 0;
	line-height: 1.6;
}

/* Responsive adjustments for emoji grid */

/* ========================================
   Print Methods Component
   ======================================== */

.print-method-section {
	display: flex;
	gap: var(--space--xl);
	margin-bottom: var(--space--3xl);
	align-items: flex-start;
	border-top: var(--border--thin);
	padding-top: var(--space--xl);
}

.print-method-image {
	width: 30%;
	flex-shrink: 0;
	min-height: 12.5rem;
	background-color: var(--color--main--medium);
	border: var(--border--thin);
}

.print-method-content {
	flex: 1;
	width: 70%;
}

.print-method-content h2,
.print-method-content h3 {
	text-align: left;
}

/* ========================================
   File Formats Component
   ======================================== */

.file-format-section {
	border-top: var(--border--thin);
	padding-top: var(--space--xl);
	margin-bottom: var(--space--xl);
}

.file-format-section h3 {
	text-align: left;
}

.file-format-section:first-of-type {
	border-top: none;
	padding-top: 0;
}

/* Print Methods Accordion Styles */
.print-method-accordion {
	margin-bottom: var(--space--xl);
}

.print-method-toggle {
	display: none;
}

.print-method-toggle-label {
	cursor: pointer;
	display: block;
	margin: 0;
}

.print-method-toggle-label h2 {
	position: relative;
	padding-right: var(--space--xl);
	margin-bottom: 0;
}

.print-method-toggle-label h2::after {
	content: '▲';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.75em;
	transition: transform 0.2s ease;
}

.print-method-toggle:checked ~ .print-method-toggle-label h2::after {
	content: '▼';
}

/* Hide content when checkbox is unchecked */
.print-method-toggle:not(:checked) ~ .print-method-section,
.print-method-toggle:not(:checked) ~ .print-method-accordion-content {
	display: none;
}

/* Show content when checkbox is checked */
.print-method-toggle:checked ~ .print-method-section,
.print-method-toggle:checked ~ .print-method-accordion-content {
	display: block;
}

.print-method-accordion-content {
	margin-top: var(--space--xl);
}

/* Print Methods Comparison Chart */
.print-methods-comparison {
	margin: var(--space--3xl) 0;
	overflow-x: auto;
}

.comparison-table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space--xl) 0;
	font-size: var(--font-size--xs);
}

.comparison-table thead {
	background-color: var(--color--main--medium);
}

.comparison-table th {
	padding: var(--space--m) var(--space--s);
	text-align: left;
	font-weight: bold;
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--2xs);
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	border-bottom: var(--border--thin);
	border-right: .0625rem solid var(--color--main--borders);
}

.comparison-table th:last-child {
	border-right: none;
}

.comparison-table tbody tr {
	border-bottom: .0625rem solid var(--color--main--medium);
}

.comparison-table tbody tr:nth-child(even) {
	background-color: var(--color--main--light);
}

.comparison-table tbody tr:hover {
	background-color: var(--color--highlight);
}

.comparison-table td {
	padding: var(--space--m) var(--space--s);
	border-right: .0625rem solid var(--color--main--borders);
	vertical-align: top;
}

.comparison-table td:last-child {
	border-right: none;
}

.comparison-table td strong {
	font-family: var(--font--title--family--small);
	font-weight: 700;
}

.comparison-table td:first-child {
	font-weight: 600;
}

.comparison-note {
	margin-top: var(--space--m);
	font-size: var(--font-size--xs);
	color: var(--color--main);
	line-height: 1.6;
}

/* Scope Included/Not Included Side-by-Side Layout */
.scope-included-not-included {
	display: flex;
	gap: var(--space--xl);
	margin: var(--space--xl) 0;
}

.scope-included,
.scope-not-included {
	flex: 1;
}

.scope-included h3,
.scope-not-included h3 {
	margin-top: 0;
	margin-bottom: var(--space--m);
}

.scope-included ul,
.scope-not-included ul {
	margin-top: var(--space--m);
	margin-bottom: 0;
}

/* Scope Prevent Grid Layout */
.scope-prevent-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space--xl);
	margin: var(--space--xl) 0;
}

.scope-prevent-item {
	flex: 1 1 calc(50% - var(--space--m));
	min-width: 0;
}

.scope-prevent-item h3 {
	margin-top: 0;
	margin-bottom: var(--space--m);
}

.scope-prevent-item ul {
	margin-top: var(--space--m);
	margin-bottom: 0;
}

/* Third-Party Services Grid Layout */
.third-party-services-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space--xl);
	margin: var(--space--xl) 0;
}

.third-party-service-item {
	flex: 1 1 calc(50% - var(--space--m));
	min-width: 0;
}

.third-party-service-item h3 {
	margin-top: 0;
	margin-bottom: var(--space--m);
}

.third-party-service-item ul {
	margin-top: var(--space--m);
	margin-bottom: var(--space--m);
}

/* Why Separate Section - Full Width with White Background */
.why-separate-section {
	width: 100%;
	background-color: white;
	padding: var(--space--3xl);
	margin: var(--space--xl) 0;
}

.why-separate-section h3 {
	margin-top: 0;
	margin-bottom: var(--space--m);
}

.why-separate-section ul {
	margin-top: var(--space--m);
	margin-bottom: var(--space--m);
}

.why-separate-section p {
	margin-bottom: var(--space--m);
}

.why-separate-section p:last-child {
	margin-bottom: 0;
}

/* What This Means Sections - Consistent Styling */
.what-this-means {
	padding: var(--space--l) var(--space--xl) var(--space--xl);
	border: var(--border--thin);
	margin: var(--space--m) 0;
	background-color: white;
	font-size: var(--font-size--s-l) !important;
}

/* Question h3s - Remove text-transform and letter-spacing */
h3.question {
	text-transform: none;
	letter-spacing: normal;
}

/* H2 Section Wrappers - Margin bottom for sections starting with h2 */
.content-section {

	margin-top: var(--space--3xl);

	h2{
		text-align: left;
		font-family: var(--font--title--family--xlarge);
		font-weight: 500;
		font-size: var(--font-size--l);
		padding-bottom: var(--space--m-l);
		margin-bottom: var(--space--m-l);
	}
}

/* Client Content Container - For Clients pages */
.client-content-container {
	border: var(--border--thin);
	padding: var(--space--xl);
	background-color: white;
	margin-top: var(--space--xl);
}

/* Scope Creep Problem Grid Layout */
.scope-creep-problem-grid {
	display: flex;
	gap: var(--space--xl);
	margin: var(--space--xl) 0;
}

.scope-creep-problem-item {
	flex: 1;
}

.scope-creep-problem-item h3 {
	margin-top: 0;
	margin-bottom: var(--space--m);
}

.scope-creep-problem-item ul {
	margin-top: var(--space--m);
	margin-bottom: 0;
}

/* ========================================
   Visual Guide Styles (Paper, Devices, Social Media)
   Shared patterns for visual dimension displays
   ======================================== */

/* Shared container styles for visual guides */
.paper-sizes-container,
.device-sizes-container,
.social-media-container {
	max-width: 100%;
	margin: var(--space--xl) 0;

	h2 {
		margin-top: var(--space--3xl);
		margin-bottom: var(--space--m);
		font-family: var(--font--title--family--small);
		font-weight: 700;
		font-size: var(--font-size--m);

		&:first-of-type {
			margin-top: var(--space--xl);
		}
	}
}

/* Shared series container styles */
.paper-series,
.device-series,
.social-series {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space--l);
	align-items: flex-start;
	margin-bottom: var(--space--3xl);
	padding: var(--space--l);
	background-color: var(--color--main--background);
}

/* Shared wrapper styles */
.paper-sheet-wrapper,
.device-wrapper,
.social-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: var(--space--m);
}

/* Shared visual item styles (paper sheets, device screens, social frames) */
.paper-sheet,
.device-screen,
.social-frame {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space--xs);
	box-sizing: border-box;
	transition: transform 0.2s ease;

	&:hover {
		transform: scale(1.05);
		z-index: 10;
	}
}

.paper-sheet {
	background-color: white;
}

.device-screen,
.social-frame {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Shared label styles */
.paper-size-label,
.device-label,
.social-label {
	font-weight: 700;
	font-size: var(--font-size--s-l);
	font-family: var(--font--title--family--small);
	text-align: center;
}

.device-label,
.social-label {
	color: white;
}

.social-label {
	z-index: 2;
	position: relative;
}

/* Shared dimensions styles */
.paper-dimensions,
.device-dimensions,
.social-dimensions {
	font-size: var(--font-size--2xs);
	text-align: left;
	line-height: 1.5;
	color: #333;
	margin-top: var(--space--s);
}

/* Paper-specific styles */
.paper-dimensions {
	.imperial {
		display: block;
		margin-bottom: var(--space--2xs);
	}

	.metric {
		display: block;
		color: #666;
	}
}

.device-dimensions .dimensions,
.social-dimensions .dimensions {
	display: block;
}

.social-dimensions .safe-zone-info {
	display: block;
	color: #666;
	font-size: var(--font-size--2xs);
	margin-top: var(--space--2xs);
}

/* Social Media Safe Zone styles */
.safe-zone {
	position: absolute;
	border: var(--space--2xs) dashed rgba(255, 255, 255, 0.8);
	box-sizing: border-box;
	pointer-events: none;
}

.safe-zone-label {
	position: absolute;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: var(--space--2xs) var(--space--xs);
	font-size: var(--font-size--3xs);
	font-family: monospace;
	white-space: nowrap;
	pointer-events: none;
	transform: translate(-50%, -50%);

	&.top {
		transform: translate(-50%, -50%) rotate(-90deg);
		transform-origin: center;
	}

	&.right {
		transform: translate(50%, -50%);
		transform-origin: center;
	}

	&.bottom {
		transform: translate(-50%, 50%) rotate(90deg);
		transform-origin: center;
	}

	&.left {
		transform: translate(-50%, -50%);
		transform-origin: center;
	}
}

/* Greeting Card Pair Styling */
.greeting-card-series {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	margin-bottom: var(--space--3xl);
	padding: 0;
}

.greeting-card-pair {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space--xl);
	border-right: var(--border--thin);

	&:nth-child(even) {
		border-right: none;
	}

	&:nth-child(n+3) {
		border-top: var(--border--thin);
	}
}

.pair-container {
	display: flex;
	align-items: center;
	gap: var(--space--xl);
	flex-wrap: wrap;
	justify-content: center;
}

.pair-arrow {
	font-size: var(--font-size--l);
	color: var(--color--main);
	font-weight: 700;
	font-family: var(--font--title--family--small);
}

.pair-note {
	margin-top: var(--space--m);
	font-size: var(--font-size--2xs);
	color: #666;
	font-family: var(--font--input--family--medium);
	font-style: italic;
	text-align: center;
	width: 100%;
}

/* Responsive adjustments for visual guides */

/* ========================================
   Calculator Styles
   Shared between rate-calculator and font-licensing
   ======================================== */

#hourly-calculator{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.calculator-tabs {
	display: flex;
	gap: var(--space--m);
	margin: var(--space--xl) 0 var(--space--m);
	border-bottom: var(--border--thin);

	
}

.calculator-tab,
.calc-tab {
	background: none;
	border: none;
	padding: var(--space--m) var(--space--l);
	font-family: var(--font--title--family--small);
	font-weight: 700;
	font-size: var(--font-size--s);
	cursor: pointer;
	color: var(--color--black);
	border-bottom: var(--space--2xs) solid transparent;
	transition: all 0.2s ease;

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

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

	
}

.calculator-content,
.calc-content {
	display: none;
	padding: 0rem 0;

	&.active {
		display: block;
	}

	/* Inherits base h3 styles */
	h3 {
		margin-bottom: var(--space--m);
	}
}

/* ========================================
   Font Licensing Component
   ======================================== */

#font-licensing-content {
	margin: var(--space--xl) 0;
}

.licensing-explanation {
	margin-bottom: var(--space--4xl);

	h2 {
		font-family: var(--font--title--family--small);
		font-weight: 700;
		font-size: var(--font-size--m);
		margin-top: var(--space--3xl);
		margin-bottom: var(--space--m);
		color: var(--color--black);

		&:first-of-type {
			margin-top: var(--space--xl);
		}
	}

	p {
		/* Inherits base p styles from style-clean.css */
		color: var(--color--black);
		margin-bottom: var(--space--l);
	}

	ul {
		/* Inherits base p styles from style-clean.css */
		line-height: 1.6;
		margin-bottom: var(--space--xl);
		padding-left: var(--space--xl);
	}

	li {
		margin-bottom: var(--space--s);
	}

	.footnote {
		font-family: var(--font--input--family--medium);
		font-size: var(--font-size--xs);
		line-height: 1.6;
		color: #666;
		font-style: italic;
		margin-top: var(--space--m);
		padding-left: var(--space--m);
		border-left: var(--border--thin);
		margin-bottom: var(--space--l);

		sup {
			font-size: var(--font-size--2xs);
			vertical-align: super;
		}
	}

	sup {
		font-size: var(--font-size--2xs);
		vertical-align: super;
	}
}

.license-calculator-section {
	margin: var(--space--4xl) 0;
	padding: var(--space--xl);
	background-color: var(--color--main--background);

	h2 {
		font-family: var(--font--title--family--small);
		font-weight: 700;
		font-size: var(--font-size--m);
		margin-bottom: var(--space--m);
		color: var(--color--black);
	}
}

.calculator-container {
	margin-top: var(--space--xl);
}

.calculator-inputs {
	margin: var(--space--xl) 0;
}

.input-group {
	margin-bottom: var(--space--xl);

	label {
		display: block;
		font-family: var(--font--title--family--small);
		font-weight: 700;
		font-size: var(--font-size--s);
		margin-bottom: var(--space--xs);
		color: var(--color--black);
	}

	input,
	select {
		width: 100%;
		max-width: 25rem;
		padding: var(--space--s) var(--space--m);
		font-family: var(--font--input--family--medium);
		font-size: var(--font-size--s);
		border: var(--border--thin);
		background-color: white;
		cursor: pointer;

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

		&:focus {
			outline: none;
			border-color: var(--color--main);
		}

		
	}
}

.calculator-result {
	margin: var(--space--xl) 0;
}

.result-box {
	background-color: white;
	padding: var(--space--l);
	border: var(--border--thin);

	h4 {
		font-family: var(--font--title--family--small);
		font-weight: 700;
		font-size: var(--font-size--s-l);
		margin: 0 0 var(--space--m) 0;
		color: var(--color--black);
	}
}

.result-value {
	font-family: var(--font--title--family--small);
	font-weight: 700;
	font-size: var(--font-size--m);
	color: var(--color--main);
}

/* Base result note - extends .text-note pattern */
.result-note {
	display: block;
	font-family: var(--font--title--family--medium);
	font-size: var(--font-size--2xs);
	line-height: 1.5;
}

.calculator-notes {
	margin-top: var(--space--xl);
	padding: var(--space--l);
	background-color: white;
	border-left: var(--space--2xs) solid var(--color--main);

	h4 {
		font-family: var(--font--title--family--small);
		font-weight: 700;
		font-size: var(--font-size--s-m);
		margin: 0 0 var(--space--m) 0;
		color: var(--color--black);
	}

	ul {
		margin: 0;
		padding-left: var(--space--xl);
		font-family: var(--font--input--family--medium);
		font-size: var(--font-size--xs);
		line-height: 1.6;
	}

	li {
		margin-bottom: var(--space--xs);
	}
}

.licensing-reminder {
	margin-top: var(--space--4xl);
	padding: var(--space--xl);
	background-color: var(--color--highlight);

	h2 {
		font-family: var(--font--title--family--small);
		font-weight: 700;
		font-size: var(--font-size--m);
		margin-bottom: var(--space--m);
		color: var(--color--black);
	}

	ul {
		/* Inherits base p styles from style-clean.css */
		line-height: 1.6;
		margin: 0;
		padding-left: var(--space--xl);
	}

	li {
		margin-bottom: var(--space--s);
	}
}

/* ========================================
   Color Converter Component
   ======================================== */

/* Animated gradient background for color-understanding page (on #content-main only) */
#helpfulthings #content-main.content-main-color-page {
	position: relative;
	overflow: hidden;
}

#helpfulthings #content-main.content-main-color-page::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #F4F2FF;
	animation: colorCycle 14s ease infinite;
	z-index: 0;
	pointer-events: none;
}

@keyframes colorCycle {
	0% {
		background-color: #F4F2FF;
	}
	16.67% {
		background-color: #FFF0F8;
	}
	33.33% {
		background-color: #FFEDE0;
	}
	50% {
		background-color: #FFFFE0;
	}
	66.67% {
		background-color: #F0FFE8;
	}
	83.33% {
		background-color: #E8F7FF;
	}
	100% {
		background-color: #F4F2FF;
	}
}

#helpfulthings #content-main.content-main-color-page > * {
	position: relative;
	z-index: 1;
}

/* Ensure #page does not override gradient */
#helpfulthings #content-main.content-main-color-page #page {
	background: transparent !important;
}

#color-converter {
	margin: var(--space--xl) 0;
}

#helpfulthings #content-main .entry-content .hex-input-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space--xs);
	margin-top: var(--space--l);
	margin-bottom: var(--space--xl);

	label {
		font-family: var(--font--title--family--small);
		font-weight: 700;
		font-size: var(--font-size--m);
		color: var(--color--black);
		margin-bottom: var(--space--s);
	}

	.hex-input-note {
		font-family: var(--font--title--family--medium);
		font-size: var(--font-size--s);
		color: var(--color--black);
		margin: var(--space--s) 0 0;
		font-weight: 700;
	}
}

/* Shares base input styles with .form-group inputs */
#hexInput {
	padding: var(--space--s) var(--space--m);
	font-family: var(--font--input--family--medium);
	font-size: var(--font-size--s);
	border: var(--border--thin);
	min-width: 12.5rem;
	text-transform: uppercase;
}

/* Color control styling matching studioworks.app */
.color-control {
	box-sizing: border-box;
	border: var(--border--thin);
	margin-bottom: var(--space--m);
	position: relative;

	&:hover {
		border: .125rem solid var(--color--highlight);
	}

	.swatch {
		background-color: var(--color--main);
		height: 11.65rem;
	}

	.label-wrap {
		background-color: white;
		border-top: var(--border--thin);
		margin-top: -0.25rem;
		display: grid;
		grid-template-columns: [label] 4fr [picker] 7rem;
		color: var(--color--black);

		.label {
			p {
				font-size: var(--font-size--s);
				line-height: 1.15;
				font-weight: 900;
				margin: var(--space--m) var(--space--m-l) 0;
				border-bottom: var(--border--thin);
				padding-bottom: var(--space--s);
				font-family: var(--font--title--family--small);

				&.hex {
					border-bottom: none;
					font-family: var(--font--input--family--medium);
					letter-spacing: 0.0625rem;
					position: relative;
					top: -.15rem;
				}
			}
		}

		.picker {
			display: flex;
			align-items: center;
			justify-content: center;
			border-left: var(--border--thin);
			position: relative;
			width: 7rem;
			margin: 0 auto;
		}
	}

	.swatch-picker {
		width: var(--space--4xl);
		height: var(--space--4xl);
		background-color: #3C4CC4;
		border: var(--border--thin);
		transition: background-color 0.2s ease;
	}
}

.color-input {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.color-values-section {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
	gap: var(--space--l);
	margin-top: var(--space--xl);
	margin-bottom: var(--space--xl);
}

.color-value-group {
	background-color: white;
	padding: var(--space--l);
	border: var(--border--thin);

	/* Inherits base h3 styles, smaller variant */
	h3 {
		font-size: var(--font-size--s-l);
		margin: 0 0 var(--space--m) 0;
	}

	.value-display {
		font-size: var(--font-size--s-m);
		.value-number{
			font-size: var(--font-size--s-m);
		}
	}

	/* Hide paint company converters */
	&:has(.paint-match) {
		display: none;
	}

	/* Make Pantone group full width */
	&:has(.pantone-match) {
		grid-column: 1 / -1;
	}
}

.value-display {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--space--xs);
	font-family: var(--font--input--family--medium);
	font-size: var(--font-size--xs);
}

.value-label {
	font-weight: 600;
	color: var(--color--black);
}

.value-number {
	font-weight: 700;
	color: var(--color--main);
}

.value-copy {
	margin-top: var(--space--m);
	padding: var(--space--s);
	background-color: var(--color--main--background);
	border: var(--border--thin);
	font-family: var(--font--input--family--medium);
	font-size: var(--font-size--xs);
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease;

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

#helpfulthings
#content-main
.entry-content .pantone-match,
.paint-match {
	margin-top: var(--space--m);

	p {
		font-family: var(--font--text--family--large);
		font-size: var(--font-size--s-l);
		color: var(--color--black);
		margin-bottom: var(--space--l);
		line-height: 1.5;
	}
}

.pantone-link {
	display: inline-block;
	padding: var(--space--s) var(--space--l);
	background-color: var(--color--main);
	color: var(--color--white);
	text-decoration: none;
	font-family: var(--font--title--family--small);
	font-weight: 700;
	font-size: var(--font-size--s);
	transition: background-color 0.2s ease;
	text-align: center;

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

.paint-color-display {
	display: flex;
	align-items: center;
	gap: var(--space--m);
	margin-top: var(--space--xs);
}

.paint-color-swatch {
	width: var(--space--3xl);
	height: var(--space--3xl);
	border: var(--border--thin);
	flex-shrink: 0;
}

.paint-color-info {
	flex: 1;
}

.paint-color-name {
	font-family: var(--font--title--family--small);
	font-weight: 700;
	font-size: var(--font-size--s);
	color: var(--color--black);
	margin-bottom: var(--space--2xs);
}

.paint-color-code {
	font-family: var(--font--input--family--medium);
	font-size: var(--font-size--xs);
	color: var(--color--main);
	font-weight: 600;
}

.color-explanations {
	margin-top: var(--space--4xl);

	> h2 {
		font-family: var(--font--title--family--medium);
		font-weight: 700;
		font-size: var(--font-size--l);
		margin: 0 0 var(--space--xl) 0;
		color: var(--color--black);

		
	}
}

#helpfulthings #content-main .entry-content .explanation-section {
	margin-bottom: var(--space--xl);
	margin-top: var(--space--xl);
	display:flex;
	flex-direction: row;
	gap: var(--space--xl);
	border-bottom: var(--border--thin);
	padding-bottom: var(--space--xl);
	.column-left {
		flex: 1;
	}
	.column-right {
		flex: 2;
	}
	/* Inherits base h3 styles */
	h3 {
		margin: 0 0 var(--space--m) 0;
		text-transform: capitalize;
		letter-spacing: 0;
		font-size: var(--font-size--m);
	}

	p {
		/* Inherits base p styles from style-clean.css */
		color: var(--color--black);
		margin: 0;
		font-size: var(--font-size--s-l);
		line-height: 1.5;
	}
	&:last-child{
		border-bottom: none;
	}
}

/* ========================================
   Rate Calculator Component
   ======================================== */

.rate-calculator-form {
	margin-top: var(--space--xl);
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}

.fee-container {
	display:flex;
	flex-direction: row;
	gap: var(--space--xl);
}

.fee-container .form-section#currency-selector {
	width: 30%;
}

.fee-container .form-section {
	width: 70%;
}


.expenses-container {
	width: 100%;
	max-width: 100%;
	padding: var(--space--xl);
	background-color: var(--color--main--background);
	border: var(--border--thin);
	box-sizing: border-box;
	padding-bottom: var(--space--2xl);
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 0;
	align-items: stretch;
}

.expenses-container.bookkeeping{
	grid-template-columns: 2fr 1fr;
}

.expenses-column-left {
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-right: var(--border--thin);
	padding-right: var(--space--xl);
	height: 100%;
}

.expenses-column-right {
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding-left: var(--space--xl);
	height: 100%;
}

.expenses-header {
	margin-bottom: var(--space--xs);
	padding-bottom: 0rem;
	/* border-bottom: var(--border--thin); */
}

.expenses-header h2 {
	font-family: var(--font--title--family--medium);
	font-size: var(--font-size--m);
	font-weight: 700;
	margin-bottom: var(--space--m);
	color: var(--color--black);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align:left;
}

#helpfulthings #content-main .entry-content .expenses-header
	& p {
		font-family: var(--font--text--family--large);
		font-size: var(--font-size--s);
		line-height: 1.28;
		color: var(--color--black);
		margin: 0;
		&+p{
			margin: var(--space--m) 0 var(--space--xl);
		}
}

.expenses-header p {
	font-size: var(--font-size--s-l) !important;
	line-height: 1.54 !important;
	margin-bottom: var(--space--l) !important;

	&.center{
		text-align: center;
	}
}

.form-section {
	margin-bottom: 0rem;
	padding-top: 0;
}

/* Expense Toggle Styles */
.expense-toggle {
	display: none;
}

.expense-toggle-label {
	cursor: pointer;
	display: block;
	margin: 0;
	user-select: none;
}

.expenses-container .expense-toggle-label h4,
.expenses-container .expense-toggle-label h4.expense-category {
	font-family: var(--font--title--family--medium);
	font-size: var(--font-size--m) !important;
	font-weight: 700;
	margin: 0 0 var(--space--xs) 0;
	padding: var(--space--m) 0 var(--space--l);
	color: var(--color--black);
	text-transform: capitalize;
	letter-spacing: 0;
	position: relative;
	border-bottom: var(--border--thin);
	transition: color 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.expense-toggle-label:hover h4 {
	color: var(--color--main);
}

/* Arrow indicator - default (closed/right) */
.expense-toggle-label h4::after {
	content: '\25B6\FE0E';
	font-size: var(--font-size--3xs);
	transition: transform 0.2s ease;
	color: var(--color--main);
	margin-left: auto;
	flex-shrink: 0;
}

/* When checkbox is checked (open), show down arrow */
.expense-toggle:checked ~ .expense-toggle-label h4::after {
	content: '▼';
}

/* Hide the content when checkbox is unchecked (collapsed by default) */
.expense-toggle:not(:checked) ~ .expense-section-content {
	display: none;
}

/* Show the content when checkbox is checked */
.expense-toggle:checked ~ .expense-section-content {
	display: block;
	padding-top: var(--space--m);
}

.expense-section-content {
	margin-top: 0;
	padding-top: 0;
	padding-bottom: var(--space--m);
}

.expenses-container .form-section h4,
.expenses-container .form-section > h4:first-child:not(.expense-category) {
	font-family: var(--font--title--family--medium);
	font-size: var(--font-size--m) !important;
	font-weight: 700;
	margin-bottom: var(--space--l);
	color: var(--color--black);
	text-transform: capitalize;
	letter-spacing: 0em;
	margin-top: var(--space--2xs);
	border-bottom: var(--border--thin) !important;
}

.expenses-container .form-section h4.expense-subcategory {
	font-family: var(--font--title--family--medium);
	font-size: var(--font-size--s-l) !important;
	letter-spacing: 0.075em !important;
	font-weight: 700 !important;
	margin: var(--space--xl) 0 var(--space--m) 0 !important;
	padding-top: var(--space--l);
	color: var(--color--main--borders);
	text-transform: uppercase !important;
	letter-spacing: 0.05em;
	border-top: var(--border--thin--medium);
	border-bottom: none !important;
}

.expenses-container .form-section h4.expense-subcategory:first-of-type {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: none;
}

.form-section#billable{
	margin-top: var(--space--2xl);
}

.form-section#living{
	margin-top: var(--space--m);
}

.form-section .section-note {
	font-family: var(--font--text--family--large);
	font-size: var(--font-size--xs);
	font-style: italic;
	color: var(--color--main--medium);
	margin-bottom: var(--space--l);
	padding: var(--space--s) var(--space--m);
	background-color: var(--color--main--background);
	border-left: 0.1875rem solid var(--color--main);
}

/* ========================================
   Form Components
   ======================================== */

.form-group {
	margin-bottom: var(--space--l);
}

/* Calculator note-styled paragraphs (smaller) */
.form-section p.calculator-note,
.calculator-content p.calculator-note,
.expenses-container .form-section p.calculator-note {
	font-size: var(--font-size--s) !important;
	line-height: 1.6;
	margin-bottom: var(--space--l);
	color: var(--color--black);
}

/* Extends .label-title pattern */
.form-group label {
	display: block;
	font-family: var(--font--title--family--small);
	font-weight: 600;
	font-size: var(--font-size--s);
	margin-bottom: var(--space--xs);
	color: var(--color--black);
}

/* Shared input styles for form controls */
.form-group input[type="text"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
	width: 100%;
	max-width: 100%;
	padding: var(--space--s) var(--space--m);
	font-family: var(--font--input--family--medium);
	font-size: var(--font-size--s);
	border: var(--border--thin);
	background-color: white;
	transition: border-color 0.2s ease;
}

.form-group input[type="text"]:hover,
.form-group input[type="number"]:hover,
.form-group select:hover,
.form-group textarea:hover {
	border-color: var(--color--main);
}

.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--color--main);
}

/* Select-specific styles */
.form-group select {
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space--m) center;
	background-size: 0.75rem;
	padding-right: var(--space--2xl);
}

/* Textarea-specific styles */
.form-group textarea {
	resize: vertical;
	min-height: 12.5rem;
	line-height: 1.5;
}

.form-group small {
	display: block;
	margin-top: var(--space--xs);
	margin-bottom: 0;
	font-family: var(--font--caption--family--small);
	font-weight: 500;
	font-size: var(--font-size--2xs);
	line-height: 1.5;

	& strong{
		font-weight: 700;
	}
}

/* Word Count Tool */
#word-count-tool {
	margin-top: var(--space--xl);
}

.count-display {
	display: flex;
	gap: var(--space--xl);
	margin-top: var(--space--l);
	padding-top: var(--space--l);
	border-top: var(--border--thin);
}

.count-item {
	display: flex;
	align-items: baseline;
	gap: var(--space--xs);
}

/* Extends .label-title pattern */
.count-label {
	font-family: var(--font--title--family--small);
	font-weight: 600;
	font-size: var(--font-size--s);
	color: var(--color--black);
}

.count-value {
	font-family: var(--font--title--family--medium);
	font-weight: 700;
	font-size: var(--font-size--m);
	color: var(--color--main);
}
	font-family: var(--font--caption--family--small);
	font-size: var(--font-size--2xs);
	color: var(--color--main--borders);
	font-style: italic;
	line-height: 1.5;
}

.checkbox-group {
	margin-bottom: var(--space--l);
	padding: var(--space--m);
	background-color: var(--color--main--background);
	border: var(--border--thin);
}

.checkbox-label {
	display: flex;
	align-items: center;
	gap: var(--space--s);
	cursor: pointer;
	font-family: var(--font--title--family--small);
	font-weight: 600;
	font-size: var(--font-size--s);
	color: var(--color--black);
	margin-bottom: var(--space--xs);
}

/* Custom checkbox - shared styles for .checkbox-label, .type-filter-item, and transaction table */
.checkbox-label input[type="checkbox"],
.type-filter-item input[type="checkbox"],
.transactions-table .select-column input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: var(--space--l);
	height: var(--space--l);
	min-width: var(--space--l);
	min-height: var(--space--l);
	max-width: var(--space--l);
	max-height: var(--space--l);
	border: var(--border--thin);
	background-color: transparent;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	box-sizing: content-box;
	padding: 0;
	margin: 0;
}

.checkbox-label input[type="checkbox"]:checked,
.type-filter-item input[type="checkbox"]:checked,
.transactions-table .select-column input[type="checkbox"]:checked {
	background-color: var(--color--main--medium);
}

.checkbox-label input[type="checkbox"]:checked::after,
.type-filter-item input[type="checkbox"]:checked::after,
.transactions-table .select-column input[type="checkbox"]:checked::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--color--black);
	font-size: var(--font-size--3xs);
	font-weight: 900;
	line-height: 1;
}

.checkbox-label span {
	flex: 1;
	position: relative;
	top: -.5rem;
	margin-left: var(--space--s);
}


.checkbox-group small {
	margin-top: var(--space--xs);
	margin-bottom: 0;
	display: block;
	font-family: var(--font--caption--family--small);
	font-size: var(--font-size--2xs);
	color: var(--color--main--borders);
	font-style: italic;
	line-height: 1.5;
}

.form-actions {
	margin-top: var(--space--2xl);
	padding-top: var(--space--xl);
	border-top: var(--border--thin);
	display: flex;
	gap: var(--space--m);
	flex-wrap: wrap;
}

.form-actions.form-actions-centered {
	justify-content: center;
	border-top: none;
	padding-top: var(--space--l);
	margin-top: 0;
}

/* ========================================
   Button Components
   (Base button styles are in style-clean.css)
   ======================================== */

.reset-button {
	background-color: var(--color--main--background);
	color: var(--color--black);
	border: var(--border--thin);
}

.reset-button:hover {
	background-color: white;
}

.button-blue {
	background-color: var(--color--main);
	color: white;
}

.button-blue:hover {
	background-color: var(--color--main--borders);
}

.button-blue:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ===== Rate Calculator Fixed Bar ===== */

#rates-income-bar.rates-income-fixed {
	/* Extends .result-bar-fixed */
}

.rates-income-left {
	/* Extends .result-bar-left */
}

#rates-income-bar #rate-results {
	/* Extends .result-bar-results */
}

.rate-results {
	margin-top: 0;
	padding: 0;
}

.rate-results h4 {
	font-family: var(--font--title--family--medium);
	font-size: var(--font-size--m);
	font-weight: 700;
	margin-bottom: var(--space--l);
	color: var(--color--black);
}

.result-display {
	display: flex;
	flex-direction: column;
	gap: var(--space--m);
}

.result-display.result-display-horizontal {
	display: flex;
	flex-direction: row;
	gap: var(--space--s);
	overflow-x: auto;
	align-items: stretch;
	flex-wrap: nowrap;
}

.result-display-horizontal .result-item,
.result-display-horizontal .result-item-group {
	flex: 1 1 auto;
	min-width: 17rem;
}

.result-display-horizontal .result-item-group {
	display: flex;
	flex-direction: column;
	gap: 0rem;

	.result-label {
		margin-bottom: var(--space--xs);
	}
	.result-value{
		font-size: var(--font-size--l);
		margin-bottom: 0;
	}
}

/* ========================================
   Shared Result Bar Base Classes
   ======================================== */

.result-bar-fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: var(--color--highlight);
	border-top: var(--border--thin);
	z-index: 100;
	padding: var(--space--l) var(--space--xl);
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--space--xl);
}

/* Hide toggle at larger screens - only visible at 620px via library-responsive.css */
.result-bar-toggle {
	display: none;
}

.result-bar-left {
	flex: 0 0 auto;
	min-width: 16rem;
	max-width: 20rem;
	display: flex;
	flex-direction: column;
	/* gap: var(--space--s); */
	justify-content: center;
}

.result-bar-left .expenses-header {
	margin-bottom: 0;
}

.result-bar-left .expenses-header h2 {
	padding-bottom: var(--space--s);
	text-align: left;
	margin-bottom: var(--space--2xs);
	display:none;
}

.result-bar-left .result-range-note {
	margin-top: 0;
	padding: 0;
	background-color: transparent;
	border: none;
}

.result-bar-left .result-range-note p {
	font-family: var(--font--title--family--small) !important;
	font-size: var(--font-size--s) !important;
	font-weight: 500 !important;
	line-height: 1.45;
	color: var(--color--black);
	margin: 0;
}

.result-bar-left .result-range-note p strong {
	color: var(--color--main);
	font-weight: 700;
}

.result-bar-results {
	flex: 1 1 auto;
	min-width: 0;
	margin-top: 0;
	padding: 0;
}

/* ========================================
   Result Breakdown Classes
   ======================================== */

.result-breakdown-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: var(--space--m);
	font-size: var(--font-size--s);
	border-bottom: var(--border--thin);

	.result-label {
		display:block;
		width: 100%;
	}
	.result-value {
		display:block;
		width: 100%;
		font-size: var(--font-size--l);
	}
}

.result-breakdown-item {
	display: block;
	margin-top: var(--space--xs);
}

.result-breakdown-item:first-of-type {
	margin-top: var(--space--xs);
}

.result-breakdown-item + .result-breakdown-item {
	margin-top: 0rem;
}

#desired-partner-salary, #required-partner-salary {
	border-top:none;
	padding-bottom: var(--space--xs);
}

.result-breakdown-label,
.result-breakdown-value {
	font-size: var(--font-size--s-l);
	display: block;
	margin-bottom: var(--space--xs);
}

#required-partner-salary-value,
#desired-partner-salary-value, #required-household-income, #desired-household-income {
	color: var(--color--main);
	font-size: var(--font-size--s-l);
	margin-bottom: var(--space--m-l);
}

.result-strikethrough {
	text-decoration: line-through;
	opacity: 0.6;
}

/* ========================================
   Usage Rights Breakdown Classes
   ======================================== */

.usage-rights-breakdown {
	display: none;
	margin-top: var(--space--m);
	padding-top: var(--space--m);
	border-top: var(--border--thin);
}

.usage-rights-breakdown.visible {
	display: block !important;
}

.usage-rights-breakdown-header {
	font-size: var(--font-size--s);
	margin-bottom: var(--space--s);
	font-weight: 600;
	font-family: var(--font--title--family--small);
}

.usage-rights-breakdown-list {
	list-style: none;
	font-family: var(--font--title--family--small);
	padding: 0;
	margin: 0;
	line-height: 1.4;
	border-left: none !important;
}

.usage-rights-breakdown-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--space--xs);
	font-size: var(--font-size--2xs);
	border-left: none;
}

.usage-rights-breakdown-item span:last-child {
	font-weight: 600;
}

.usage-rights-breakdown-summary {
	display: flex;
	justify-content: space-between;
	margin-top: var(--space--s);
	padding-top: var(--space--s);
	border-top: 0.0625rem solid var(--color--main--borders);
	border-left: none;
	font-weight: 600;
	font-size: var(--font-size--2xs);
}

.usage-rights-cap-note {
	font-size: var(--font-size--3xs);
	font-weight: 400;
	color: var(--color--main--medium);
}

/* ========================================
   Utility Classes
   ======================================== */

/* Small note/caption text */
.text-note {
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--2xs);
	font-weight: 500;
	line-height: 1.5;
	color: var(--color--main--medium);
}

.text-note--italic {
	font-style: italic;
}

/* Label/title text - shared base for form labels, count labels, etc. */
.label-title {
	font-family: var(--font--title--family--small);
	font-weight: 600;
	font-size: var(--font-size--s);
	color: var(--color--black);
}

/* Border utilities */
.bottom-border {
	border-bottom: var(--border--thin);
	padding-bottom: var(--space--m);
}

.top-border {
	border-top: var(--border--thin);
	padding-top: var(--space--m);
}

/* Variants for different padding */
.bottom-border--sm {
	padding-bottom: var(--space--s);
}

.bottom-border--lg {
	padding-bottom: var(--space--l);
}

.calculator-disclaimer {
	font-size: var(--font-size--3xs);
	color: var(--color--black);
	margin-top: var(--space--xl);
	line-height: 1.6;
}

.sw-message {
	margin-top: var(--space--3xl);
}

/* ===== Flat Fee Estimator Fixed Bar ===== */

/* ===== Flat Fee Estimator Fixed Bar ===== */

#fee-estimate-bar.fee-estimate-fixed {
	/* Extends .result-bar-fixed */
}

.fee-estimate-left {
	/* Extends .result-bar-left */
}

#fee-estimate-bar #flat-fee-results {
	/* Extends .result-bar-results */
}



/* ========================================
   Result Display Components
   ======================================== */

.result-item {
	display: flex;
	flex-direction: column;
	padding: var(--space--m-l);
	background-color: white;
	border: var(--border--thin);
	gap: var(--space--xs);
}

/* Overhead group: stack overhead items vertically */
.overhead-group {
	display: flex;
	flex-direction: column;
	gap: var(--space--s);
	flex: 1 1 auto;
	min-width: 10rem;
}

/* Overhead item layout: total on left, breakdown on right */
.result-item.overhead-item {
	flex-direction: row;
	align-items: stretch;
	padding: 0 var(--space--m-l);
}

.result-item.overhead-item .result-breakdown-row {
	flex: 0 0 60%;
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: var(--space--m-l);
	margin-bottom: 0;
	border-bottom: none;
}

.result-item.overhead-item .result-breakdown {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: var(--border--thin);
	padding: var(--space--xs) var(--space--m);
}

.result-item.highlight + .result-item{
	background-color: white;
	border-top: none;
}

.result-item > div {
	display: block;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--space--xs);
}

.result-item.highlight {
	background-color: var(--color--main);
	color: var(--color--white);
	margin-left:0;
}

.result-item.highlight .result-label{
	color: var(--color--white);
	font-weight: 600;
	display:block;
	margin-bottom: var(--space--xs);
	font-size: var(--font-size--2xs);
}
.result-item.highlight .result-value {
	color: var(--color--highlight);
	font-weight: 700;
	font-size: var(--font-size--l);
	/* line-height: .65;
	position: relative;
	top: var(--space--2xs); */
}

/* Extends .label-title pattern */
.result-label {
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--2xs);
	font-weight: 600;
	color: var(--color--black);
	margin-right: var(--space--xs);
	/* margin-bottom: var(--space--xs); */
	display:block;
}

.result-value {
	&.fee-page{
		font-size: var(--font-size--l);
		/* margin-top: var(--space--2xs); */
		margin-bottom: 0rem;
	}
	}

.result-item .result-note {
	display: block;
	margin-top: var(--space--xs);
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--2xs);
	font-weight: 500;
	font-style: italic;
	opacity: 0.9;
}

.result-item.highlight .result-note {
	color: var(--color--white);
}

#usage-breakdown-list {
	border-left: none !important;
}

.result-range-note {
	margin-top: var(--space--l);
	padding: var(--space--m-l);
	background-color: var(--color--main--background);
	border: var(--border--thin);
}

/* Simplified selector */
.result-range-note p {
	margin: 0;
	font-family: var(--font--text--family--large);
	font-size: var(--font-size--s);
	line-height: 1.6;
	color: var(--color--black);
}

.result-range-note strong {
	font-weight: 700;
	color: var(--color--main);
}

/* When result-range-note is used directly on a p element (for disclaimers) */
p.result-range-note {
	margin-top: var(--space--l);
	padding: 0;
	background-color: transparent;
	border: none;
	font-family: var(--font--title--family--small) !important;
	font-size: var(--font-size--2xs) !important;
	font-weight: 500 !important;
	line-height: 1.45;
	color: var(--color--black);
}

p.result-range-note strong {
	font-weight: 700;
	color: var(--color--main);
}



/* ========================================
   Expense Calculator
   ======================================== */

#expense-calculator {
	margin-top: var(--space--xl);
}

/* Inherits base h3 styles, uses .heading-uppercase and .bottom-border patterns */
#expense-calculator h3 {
	font-weight: 900;
	font-size: var(--font-size--s-m);
	text-transform: uppercase;
	letter-spacing: .15rem;
	padding-bottom: var(--space--m);
	margin-bottom: var(--space--m);
	border-bottom: var(--border--thin);
}

#expense-calculator small {
	display: block;
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--2xs);
	font-weight: 500;
	line-height: 1.45;
	color: var(--color--black);
	margin-bottom: var(--space--m);
}

/* File Upload */
#expense-calculator .file-upload-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space--m);
}

#expense-calculator .file-input-hidden {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	padding: 0;
	margin: -0.0625rem;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}



#expense-calculator .file-name-display {
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--s);
	color: var(--color--black);
	font-weight: 500;
	margin-left: var(--space--m);
}

/* Upload buttons - smaller, left-aligned */
#upload-button-label,
#upload-button-inline {
	padding: 0.8rem 2.4rem;
	font-size: 1rem;
	margin: 0;
}

#expense-calculator .file-upload-group small {
	flex-basis: 100%;
}

/* Source Prompt */
.source-prompt {
	margin-top: var(--space--l);
	padding: var(--space--l);
	background-color: var(--color--main--background);
	border: var(--border--thin);
}

.source-prompt.hidden {
	display: none;
}

.source-prompt .form-group {
	margin-bottom: 0;
}

.source-prompt input[type="text"] {
	width: 100%;
	max-width: 31.25rem;
	margin-bottom: var(--space--m);
}

/* Modal Overlay (generic) */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(133, 143, 244, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: var(--space--xl);
	overflow-y: auto;
}

.modal-overlay.hidden {
	display: none;
}

.modal-close {
	position: absolute;
	top: 0;
	right: var(--space--s-m);
	background: none;
	border: none;
	font-size: var(--font-size--m);
	line-height: .25;
	cursor: pointer;
	color: var(--color--main--borders);
	line-height: 1;
	padding: var(--space--2xs) var(--space--xs);
	transition: color 0.2s ease;
}

.modal-close:hover {
	color: var(--color--main);
	background-color: var(--color--main--background);
}

/* Base Modal Container */
.modal {
	background-color: var(--color--main--background);
	border: var(--border--thin);
	padding: var(--space--2xl);
	position: relative;
}

.modal-large {
	width: 90%;
	max-width: 50rem;
	max-height: 90vh;
	overflow-y: auto;
}

.modal-small {
	width: 90%;
	max-width: 40rem;
}

/* Column Mapping Modal */
.column-mapping-modal {
	/* Extends .modal.modal-large - keep only specific styles */
}

.column-mapping-modal .source-name-section {
	margin-bottom: var(--space--3xl);
}

.column-mapping-modal .column-mapping-section {
	margin-bottom: var(--space--l);
}

/* Type Mapping Section */

.mapping-container {
	display: flex;
	flex-direction: row;
	gap: var(--space--3xl);
}

.mapping-container .type-mapping-item {
	flex: 1;
}
.type-mapping-section {
	margin-top: var(--space--3xl);
}

.type-mapping-item {
	margin-bottom: var(--space--l);
}

.type-mapping-item p {
	margin-bottom: var(--space--xs);
	font-weight: 600;
}

.sample-transaction {
	margin-bottom: var(--space--m);
	padding: var(--space--xs);
	background-color: var(--color--main--background);
	font-family: var(--font--input--family--medium);
}

.sample-amount {
	font-weight: 600;
	margin-right: var(--space--xs);
}

.sample-description {

}

.type-options {

}

.type-options label {
	display: flex;
	align-items: center;
	gap: var(--space--xs);
	cursor: pointer;
	margin-bottom: var(--space--xs);
	font-family: var(--font--input--family--medium);
}

.type-options input[type="radio"] {
	cursor: pointer;
}

.column-mapping p {
	margin-bottom: var(--space--m);
}

/* Total Display */
.total-display {
	margin-top: var(--space--xl);
	padding: var(--space--l);
	background-color: var(--color--main--background);
	border: var(--border--thin);
	text-align: center;
	background-color:white;
}

.total-display.hidden {
	display: none;
}

.totals-row {
	display: flex;
	margin-bottom: var(--space--xs);
}

.total-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space--xs);
	flex: 1;
	width: 50%;
	padding: var(--space--m);
}

.total-item:first-child {
	border-right: var(--border--thin);
}

.total-amount {
	margin-bottom: var(--space--xs);
}

.total-label {
	font-family: var(--font--title--family--small);
	font-weight: 600;
	font-size: var(--font-size--s-l);
	color: var(--color--black);
}

.total-value {
	font-family: var(--font--title--family--dropcap);
	font-weight: 500;
	font-size: var(--font-size--2xl);
	color: var(--color--black);
	line-height: var(--space--4xl);
	&.red {
		color: #FF5320;
	}
	&.green {
		color: var(--color--green);
	}
}

.transaction-count {
	font-family: var(--font--text--family--large);
	font-size: var(--font-size--2xs);
	color: var(--color--main--borders);
}

/* Export Buttons */
.export-buttons {
	margin-top: var(--space--l);
	display: flex;
	gap: var(--space--m);
	flex-wrap: wrap;
}

.export-buttons.hidden {
	display: none;
}

/* Files and Filters Container */
.files-and-filters {
	margin-top: var(--space--l);
	display: flex;
	border: var(--border--thin);
}

.files-and-filters.hidden {
	display: none;
}

/* Uploaded Files Column (left, 3/4 width) */
.uploaded-files-column {
	flex: 2;
	padding: var(--space--m-l);
	border-right: var(--border--thin);
}

/* Inherits base h3 styles, uses .bottom-border--sm pattern */
.uploaded-files-column h3 {
	margin: 0 0 var(--space--m) 0;
	font-size: var(--font-size--s-m);
	color: var(--color--main);
	border-bottom: var(--border--thin);
	padding-bottom: var(--space--s);
}

.uploaded-files-column #files-list {
	display: flex;
	flex-direction: column;
	gap: var(--space--m);
}

.inline-upload-group {
	display: flex;
	align-items: center;
	gap: var(--space--m);
	margin-top: 0rem;
	padding-top: var(--space--2xs);
}

.inline-upload-group .file-name-display {
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--2xs);
	color: var(--color--black);
	font-weight: 500;
}

.inline-upload-group.hidden {
	display: none;
}

/* Helper text for initial upload state */
.upload-helper-text {
	display: block;
	margin-bottom: var(--space--m);
	color: var(--color--main--medium);
	font-size: var(--font-size--2xs);
}

/* Initial upload group (before files are uploaded) */
.initial-upload-group {
	display: flex;
	align-items: center;
	gap: var(--space--m);
	margin-bottom: var(--space--m);
}

.initial-upload-group.hidden {
	display: none;
}

/* Transaction Types Column (right, 1/4 width) */
.table-filters-column {
	flex: 1;

}

/* Inherits base h3 styles, uses .bottom-border--sm pattern */
.table-filters-column h3 {
	margin: 0 0 var(--space--m) 0;
	font-size: var(--font-size--s-m);
	color: var(--color--main);
	border-bottom: 0.0625rem solid var(--color--main--borders);
	padding-bottom: var(--space--s);
}

.table-filters-column .type-filter-checkboxes {
	display: flex;
	flex-direction: column;
	gap: var(--space--s);
}

.table-filters-column .type-filter-item {
	display: flex;
	align-items: center;
	gap: var(--space--s);
	cursor: pointer;
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--2xs);
	font-weight: 500;
	color: var(--color--black);
}

.uploaded-account-section {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background-color: white;
	border: var(--border--thin);
	width: 100%;
	margin-bottom: var(--space--xl);
}

.uploaded-account-name {
	margin: 0 0 0rem 0;
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	color: var(--color--main);
	padding: var(--space--s) var(--space--m);
	background-color: var(--color--main--medium);
}

.uploaded-account-files {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}

.uploaded-account-files li {
	padding: var(--space--xs) var(--space--m) var(--space--xs) 0;
	color: var(--color--main--medium);
	font-size: var(--font-size--2xs);
	display: grid;
	grid-template-columns: 1fr .75fr 4rem;

	align-items: center;
	gap: var(--space--s);
	width: 100%;
	box-sizing: border-box;
	border-top: var(--border--thin);
}

.uploaded-account-files li .file-name {
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--2xs);
	font-weight: 600;
	color: var(--color--black);
	padding-left: var(--space--m);
	word-break: break-word;
}

.uploaded-account-files li .file-date-range {
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--xs);
	font-weight: 500;
	color: var(--color--black);
	background-color:var(--color--main--background);
	padding: var(--space--xs) var(--space--xs);
	text-align:center;
}

.uploaded-account-files .file-delete-btn {
	margin-left: auto;
	padding: var(--space--2xs) var(--space--xs);
	font-size: var(--font-size--3xs);
	background: transparent;
	border: .125rem solid #FF5320;
	color: #FF5320;
	cursor: pointer;
	transition: background-color 0.2s ease;
	margin:0;
	position:relative;
	right: 0;
}

.uploaded-account-files .file-delete-btn:hover {
	background: #ffebee;
}

/* Transactions Table */
.transactions-table-container {
	margin-top: var(--space--xl);
	overflow-x: auto;
}

/* Table container as direct child of #page - full width */
#page.full > .transactions-table-container {
	width: calc(100% + var(--space--2xs));
	margin: var(--space--xl) -.125rem 0rem;
	overflow-x: auto;
}

/* Disclaimer styling */
#disclaimer{
	border-top: var(--border--thin);
	p.result-range-note{
		margin-top:var(--space--m);
	}
}

.transactions-table-container.hidden {
	display: none;
}

.transactions-table {
	width: 100%;
	border-collapse: collapse;
	border: var(--border--thin);
}

.transactions-table thead {
	background-color: var(--color--main--medium);
}

.transactions-table th {
	padding: var(--space--m);
	text-align: left;
	font-family: var(--font--title--family--small);
	font-weight: 600;
	font-size: var(--font-size--2xs);
	color: var(--color--black);
	border-bottom: var(--border--thin);
	border-right: var(--border--thin);
}

.transactions-table th:last-child {
	border-right: none;
}

.transactions-table th.sortable {
	cursor: pointer;
	user-select: none;
	position: relative;
}

.transactions-table th.sortable:hover {
	background-color: var(--color--main--medium);
}

.transactions-table th.sort-active {
	background-color: var(--color--main--medium);
	color: var(--color--main);
}

.sort-indicator {
	margin-left: var(--space--xs);
	font-weight: 700;
}

.transactions-table td {
	padding: var(--space--s) var(--space--m);
	border-bottom: .125rem solid var(--color--main--borders);
	border-right: var(--border--thin);
	font-family: var(--font--input--family--medium);
	font-size: var(--font-size--2xs);
}

.transactions-table td:last-child {
	border-right: none;
}

.transactions-table tbody tr:nth-child(even) {
	background-color: var(--color--main--background);
}

.transactions-table tbody tr:hover {
	background-color: rgba(var(--color--main--rgb), 0.05);
}

/* Visual indicators for sorted vs unsorted transactions */
.transactions-table tbody tr.transaction-sorted {
	background-color: var(--color--main--background);
}

.transactions-table tbody tr.transaction-unsorted {
	background-color: #fff9e6; /* Light yellow for unsorted */
}

/* Ensure sorted rows override default striped rows */
.transactions-table tbody tr.transaction-sorted:nth-child(even) {
	background-color: var(--color--main--background);
}

.transactions-table tbody tr.transaction-unsorted:nth-child(even) {
	background-color: #fff9e6;
}

/* Maintain hover state for sorted/unsorted rows */
.transactions-table tbody tr.transaction-sorted:hover {
	background-color: rgba(var(--color--main--rgb), 0.08);
}

.transactions-table tbody tr.transaction-unsorted:hover {
	background-color: #fff3cc; /* Slightly darker yellow on hover */
}

/* Visual indicators for excluded transactions (Credit Card Payments) */
.transactions-table tbody tr.transaction-excluded {
	background-color: #f5f5f5;
	opacity: 0.8;
}

.transactions-table tbody tr.transaction-excluded:nth-child(even) {
	background-color: #f5f5f5;
}

.transactions-table tbody tr.transaction-excluded:hover {
	background-color: #eeeeee;
}

.transactions-table tbody tr.transaction-excluded td {
	color: #757575;
}

.transactions-table tbody tr.transaction-excluded .category-select,
.transactions-table tbody tr.transaction-excluded .type-select {
	background-color: #fafafa;
	color: #757575;
}

/* Visual indicators for possible duplicate transactions */
.transactions-table tbody tr.transaction-possible-duplicate {
	background-color: #fff3cd; /* Light yellow/orange for flagged duplicates */
	border-left: 0.1875rem solid #ffc107; /* Yellow border indicator */
}

.transactions-table tbody tr.transaction-possible-duplicate:hover {
	background-color: #ffe69c;
}

.transactions-table tbody tr.transaction-possible-duplicate:nth-child(even) {
	background-color: #fff3cd;
}

.duplicate-indicator {
	display: inline-block;
	margin-right: var(--space--xs);
	color: #856404;
	font-weight: 600;
	font-size: var(--font-size--3xs);
}

.duplicate-actions {
	display: flex;
	gap: var(--space--xs);
	flex-wrap: wrap;
}

.duplicate-action-btn {
	padding: 0.375rem var(--space--s);
	font-size: var(--font-size--2xs);
	border: 0.0625rem solid var(--color--main--borders);
	background-color: white;
	cursor: pointer;
	font-family: var(--font--input--family--medium);
	transition: background-color 0.2s;
}

.duplicate-action-btn:hover {
	background-color: var(--color--main--background);
}

.duplicate-action-btn.mark-duplicate {
	color: #856404;
	border-color: #ffc107;
}

.duplicate-action-btn.mark-duplicate:hover {
	background-color: #fff3cd;
}

.duplicate-action-btn.keep-separate {
	color: var(--color--main);
	border-color: var(--color--main--borders);
}

.duplicate-summary {
	margin-top: var(--space--m);
	margin-bottom: var(--space--m);
	padding: var(--space--m);
	background-color: #fff3cd;
	border: 0.0625rem solid #ffc107;
	color: #856404;
	font-size: var(--font-size--xs);
}

/* Category Select */
.transactions-table .category-select {
	width: 100%;
	min-width: 12rem;
	padding: var(--space--xs);
	font-family: var(--font--input--family--medium);
	font-size: var(--font-size--2xs);
	border: 0.0625rem solid var(--color--main--borders);
	background-color: white;
}

.transactions-table .category-select:focus {
	outline: none;
	border-color: var(--color--main);
}

.transactions-table .category-select option:disabled {
	color: var(--color--main--medium);
	font-style: italic;
	background-color: var(--color--main--background);
}

/* Type Select */
.transactions-table .type-select {
	width: 100%;
	min-width: 10rem;
	padding: var(--space--xs);
	font-family: var(--font--input--family--medium);
	font-size: var(--font-size--2xs);
	border: 0.0625rem solid var(--color--main--borders);
	background-color: white;
}

.transactions-table .type-select:focus {
	outline: none;
	border-color: var(--color--main);
}

/* Notes Input */
.transactions-table .notes-input {
	width: 100%;
	padding: var(--space--xs);
	font-family: var(--font--input--family--medium);
	font-size: var(--font-size--2xs);
	border: 0.0625rem solid var(--color--main--borders);
	background-color: white;
}

.transactions-table .notes-input:focus {
	outline: none;
	border-color: var(--color--main);
}

/* Amount Styling - based on transaction type */
.transactions-table .amount-expense {
	/* Expenses: negative numbers, no special colorization */
	color: var(--color--black);
}

.transactions-table .amount-income {
	/* Income: positive numbers, green */
	color: #2e7d32;
	font-weight: 500;
}

.transactions-table .amount-tax {
	/* Tax Payments: negative numbers, dark blue */
	color: #1565c0;
}

.transactions-table .amount-fee {
	/* Fees: negative numbers, red */
	color: #FF5320;
}

.transactions-table .amount-retirement {
	/* Retirement Contributions: negative numbers, purple */
	color: #7b1fa2;
}

.transactions-table .amount-transfer {
	/* Payments & Transfers: negative numbers, muted gray */
	color: #757575;
}

.transactions-table .amount-excluded {
	/* Credit Card Payments: negative numbers, muted */
	color: #9e9e9e;
}

.transactions-table .amount-personal {
	/* Personal: excluded from business, brown color */
	color: #795548;
}

.transactions-table .amount-credit-refund {
	/* Credit/Refund: excluded from totals, green like income */
	color: #2e7d32;
}

/* Transaction Actions */
.transaction-actions {
	display: flex;
	gap: var(--space--xs);
	flex-wrap: wrap;
}

.action-btn {
	padding: var(--space--xs) var(--space--s);
	font-size: var(--font-size--2xs);
	font-weight: 600;
	border: .125rem solid;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s, border-color 0.2s;
}

.action-btn.delete-btn {
	background-color: #fff;
	border-color: #FF5320;
	color: #FF5320;
	margin: var(--space--2xs);
}

.action-btn.delete-btn:hover {
	background-color: #ffebee;
}

.action-btn.keep-separate {
	background-color: #fff;
	border-color: #1976d2;
	color: #1976d2;
}

.action-btn.keep-separate:hover {
	background-color: #e3f2fd;
}

/* Selection Column */
.transactions-table .select-column {
	width: var(--space--2xl);
	text-align: center;
}

.transactions-table thead .select-column {
	background-color: var(--color--main--medium);
}

/* Batch Actions */
.batch-actions {
	display: flex;
	align-items: center;
	gap: var(--space--m);
	margin-top: var(--space--m);
	padding: var(--space--s) var(--space--m-l);
	font-family: var(--font--title--family--small);
}

.batch-actions #selected-count {
	font-size: var(--font-size--s);
	color: var(--color--black);
	font-weight: 600;
}

/* Pagination Controls */
.pagination-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space--m) var(--space--m-l);
	background-color: var(--color--main--background);
	border: var(--border--thin);
	border-top: none;
	flex-wrap: wrap;
	gap: var(--space--m);

	button{
		font-size: var(--font-size--xs);
		padding: var(--space--s) var(--space--l);
	}
}

.pagination-controls.hidden {
	display: none;
}

.pagination-rows {
	display: flex;
	align-items: center;
	gap: var(--space--xs);
}

.pagination-rows label {
	font-family: var(--font--text--family--large);
	font-size: var(--font-size--s);
	color: var(--color--black);
}

.pagination-rows select {
	padding: 0.375rem var(--space--s);
	font-family: var(--font--input--family--medium);
	font-size: var(--font-size--2xs);
	border: 0.0625rem solid var(--color--main--borders);
	background-color: white;
	cursor: pointer;
}

.pagination-nav {
	display: flex;
	align-items: center;
	gap: var(--space--m);
}

#pagination-info {
	font-family: var(--font--text--family--large);
	font-size: var(--font-size--s);
	color: var(--color--black);
	min-width: 8rem;
	text-align: center;
}

/* Duplicate Notice */
.duplicate-notice {
	margin-top: var(--space--m);
	padding: var(--space--m) var(--space--m-l);
	background-color: var(--color--main--background);
	border: var(--border--thin);
	font-family: var(--font--text--family--large);
	font-size: var(--font-size--xs);
	color: var(--color--black);
}

/* Auto-Apply Modal */
.auto-apply-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(133, 143, 244, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10000;
	animation: fadeIn 0.2s ease-out;
}

.auto-apply-modal {
	background-color: white;
	padding: var(--space--xl) var(--space--3xl);
	text-align: center;
	max-width: 400px;
	border: var(--border--thin);
}

.auto-apply-modal p {
	font-family: var(--font--title--family--small);
	font-size: var(--font-size--s-l);
	font-weight: 500;
	margin: 0 0 var(--space--l) 0;
	color: var(--color--black);
}

/* ========================================
   Small Modal Content Styles
   ======================================== */

/* Modal content typography */
.modal-small h2 {
	font-family: var(--font--title--family--medium);
	font-size: var(--font-size--m);
	margin: 0 0 var(--space--m) 0;
	color: var(--color--main);
}

.modal-small > p {
	font-family: var(--font--text--family--large);
	font-size: var(--font-size--s-l);
	line-height: 1.5;
	text-align: center;
	color: var(--color--main);
	margin: 0;
	padding: 0 var(--space--m);
}

/* Modal form styles */
.modal-form .input-group {
	display: flex;
	gap: var(--space--s);
	padding: var(--space--xl) 0 0;
}

.modal-form input[type="email"] {
	flex: 1;
	padding: 0;
	font-family: var(--font--input--family--medium);
	font-size: var(--font-size--s-m);
	line-height: 1;
	border: var(--border--thin);
	background-color: var(--color--main--background);
	color: var(--color--main);
}

.modal-form button[type="submit"]{
	font-size: var(--font-size--s-m);
	padding: var(--space--s) var(--space--xl) var(--space--s-m);
	margin:0;
}

.modal-form input[type="email"]:focus {
	outline: none;
	border-color: var(--color--main);
}

.modal-form button[type="submit"] {
	white-space: nowrap;
}

.modal-skip-link {
	font-size: var(--font-size--2xs);
	color: var(--color--main--medium);
	margin: var(--space--m) 0 0 0;
	text-align: center;
	cursor: pointer;
	text-decoration: underline;
	transition: color 0.2s ease;
}

.modal-skip-link:hover {
	color: var(--color--main);
}

/* Extends .text-note pattern */
.modal-note {
	font-size: var(--font-size--2xs);
	color: var(--color--main--medium);
	margin: var(--space--m) 0 0 0;
	text-align: center;
}