.hllc {
	--hllc-ink: #34271f;
	--hllc-muted: #76695e;
	--hllc-line: #e8d7bf;
	--hllc-paper: #fffdf9;
	--hllc-soft: #fbf3e5;
	color: var(--hllc-ink);
	font-family: var(--hllc-body-font, var(--e-global-typography-text-font-family, var(--wp--preset--font-family--body, inherit))) !important;
	line-height: 1.65;
}

.hllc,
.hllc * {
	font-family: var(--hllc-body-font, var(--e-global-typography-text-font-family, var(--wp--preset--font-family--body, inherit))) !important;
}

.hllc h1 {
	font-family: var(--hllc-h1-font, var(--hllc-heading-font, var(--hllc-body-font, inherit))) !important;
}

.hllc h2 {
	font-family: var(--hllc-h2-font, var(--hllc-heading-font, var(--hllc-body-font, inherit))) !important;
}

.hllc h3 {
	font-family: var(--hllc-h3-font, var(--hllc-heading-font, var(--hllc-body-font, inherit))) !important;
}

.hllc h4 {
	font-family: var(--hllc-h4-font, var(--hllc-heading-font, var(--hllc-body-font, inherit))) !important;
}

.hllc h5 {
	font-family: var(--hllc-h5-font, var(--hllc-heading-font, var(--hllc-body-font, inherit))) !important;
}

.hllc h6 {
	font-family: var(--hllc-h6-font, var(--hllc-heading-font, var(--hllc-body-font, inherit))) !important;
}

.hllc button {
	font-family: var(--hllc-button-font, var(--hllc-body-font, inherit)) !important;
}

.hllc *,
.hllc *::before,
.hllc *::after {
	box-sizing: border-box;
}

.hllc__intro {
	margin: 0 0 1.5rem;
}

.hllc__intro h2,
.hllc__report h2 {
	margin: 0 0 .5rem;
	color: var(--hllc-ink);
	font: inherit;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.3;
}

.hllc__intro p {
	margin: .35rem 0 0;
	color: var(--hllc-muted);
}

.hllc__intro .hllc__eyebrow {
	margin: 0 0 .35rem;
	color: #a45419;
	font-size: .9rem;
	font-weight: 700;
}

.hllc__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 1rem;
	width: 100%;
	max-width: 1100px;
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	border: 1px solid var(--hllc-line);
	border-radius: 14px;
	background: var(--hllc-paper);
}

.hllc__field {
	flex: 1 1 20rem;
	min-width: 0;
}

.hllc__field label {
	display: block;
	margin: 0 0 .4rem;
	font-weight: 650;
}

.hllc__field select {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: .65rem .8rem;
	border: 1px solid #cbbcae;
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font: inherit;
}

.hllc__button {
	grid-column: 1 / -1;
	justify-self: end;
	min-width: 9rem;
	min-height: 48px;
	padding: .65rem 1.25rem;
	border: 0;
	border-radius: 8px;
	background: #985a11;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	white-space: nowrap;
}

.hllc__button:hover,
.hllc__button:focus-visible {
	background: #78450a;
	color: #fff;
}

.hllc__message {
	margin: 1rem 0;
	padding: .8rem 1rem;
	border: 1px solid #e6c48a;
	border-radius: 8px;
	background: #fff8e9;
}

.hllc__report {
	margin-top: 1.5rem;
}

.hllc__report h2 {
	margin-bottom: .4rem;
}

.hllc__basis,
.hllc__note {
	color: var(--hllc-muted);
	font-size: .94rem;
}

.hllc__highlight-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.1rem 0 1.4rem;
}

.hllc__color-card {
	min-width: 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--hllc-line);
	border-radius: 12px;
	background: #fff;
}

.hllc__color-card--positive {
	background: var(--hllc-paper);
}

.hllc__color-card--avoid {
	border-color: #d9b4a8;
	background: #fff9f6;
}

.hllc__card-top {
	display: flex;
	align-items: center;
	gap: .7rem;
}

.hllc__swatch {
	display: inline-block;
	flex: 0 0 1.35rem;
	width: 1.35rem;
	height: 1.35rem;
	border: 1px solid rgba(30, 25, 20, .2);
	border-radius: 50%;
}

.hllc__card-title,
.hllc__color-name,
.hllc__star,
.hllc__meaning {
	margin: 0;
}

.hllc__card-title {
	font-weight: 700;
}

.hllc__color-name {
	margin-top: .45rem;
	font-size: 1.45rem;
	font-weight: 750;
}

.hllc__star {
	color: var(--hllc-muted);
	font-size: .9rem;
}

.hllc__meaning {
	margin-top: .5rem;
}

.hllc__all-roles {
	padding: 1rem 1.1rem;
	border: 1px solid var(--hllc-line);
	border-radius: 12px;
	background: #fff;
}

.hllc__all-roles summary {
	color: var(--hllc-ink);
	cursor: pointer;
	font-weight: 700;
}

.hllc__role-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .75rem;
	margin-top: 1rem;
}

.hllc__color-card--compact {
	padding: .8rem;
}

.hllc__color-card--compact .hllc__color-name {
	font-size: 1.15rem;
}

.hllc__note {
	margin: 1rem 0 0;
}

@media (max-width: 700px) {
	.hllc__form {
		align-items: stretch;
	}

	.hllc__field {
		flex-basis: auto;
	}

	.hllc__button {
		justify-self: stretch;
		width: 100%;
	}

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

	.hllc__role-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 420px) {
	.hllc__role-grid {
		grid-template-columns: 1fr;
	}
}