/* @generated by Skylit - do not edit */
/**
 * Skylit dev cache — pattern: mhpr-button
 * Auto-generated on save_post. Do not hand-edit.
 */

.mhpr-button {
		display: inline-block;
		}
		.mhpr-button--align-left {
		/* skylit-class-mod: Align button left | only: .mhpr-button */
		display: block;
		width: fit-content;
		margin-inline: 0;
		}
		.mhpr-button--align-center {
		/* skylit-class-mod: Align button center | only: .mhpr-button */
		display: block;
		width: fit-content;
		margin-inline: auto;
		}
		.mhpr-button--align-right {
		/* skylit-class-mod: Align button right | only: .mhpr-button */
		display: block;
		width: fit-content;
		margin-inline: auto 0;
		}
		.mhpr-button .mhpr-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.4rem;
		font-size: 0.9rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		line-height: 1.2;
		text-decoration: none;
		border: 2px solid transparent;
		border-radius: var(--mhpr-radius-sm);
		padding: 0.85rem 2rem;
		background: transparent;
		color: inherit;
		transition:
		background 0.2s,
		color 0.2s,
		border-color 0.2s,
		gap 0.2s;
		}
		.mhpr-button .mhpr-btn span {
		display: inline;
		}
		.mhpr-button--primary {
		/* skylit-class-mod: Primary filled button (gold) | only: .mhpr-button */
		}
		.mhpr-button.mhpr-button--primary .mhpr-btn {
		background: var(--mhpr-color-gold);
		color: var(--mhpr-color-white);
		border-color: var(--mhpr-color-gold);
		}
		.mhpr-button.mhpr-button--primary:hover .mhpr-btn {
		background: var(--mhpr-color-signal-dark);
		border-color: var(--mhpr-color-signal-dark);
		}
		.mhpr-button--teal {
		/* skylit-class-mod: Teal filled button | only: .mhpr-button */
		}
		.mhpr-button.mhpr-button--teal .mhpr-btn {
		background: var(--mhpr-color-teal);
		color: var(--mhpr-color-white);
		border-color: var(--mhpr-color-teal);
		}
		.mhpr-button.mhpr-button--teal:hover .mhpr-btn {
		background: var(--mhpr-color-signal-dark);
		border-color: var(--mhpr-color-signal-dark);
		}
		.mhpr-button--dark {
		/* skylit-class-mod: Dark filled button | only: .mhpr-button */
		}
		.mhpr-button.mhpr-button--dark .mhpr-btn {
		background: var(--mhpr-color-navy);
		color: var(--mhpr-color-white);
		border-color: var(--mhpr-color-navy);
		}
		.mhpr-button.mhpr-button--dark:hover .mhpr-btn {
		background: var(--mhpr-color-teal);
		border-color: var(--mhpr-color-teal);
		}
		.mhpr-button--white {
		/* skylit-class-mod: White filled button for dark backgrounds | only: .mhpr-button */
		}
		.mhpr-button.mhpr-button--white .mhpr-btn {
		background: var(--mhpr-color-white);
		color: var(--mhpr-color-navy);
		border-color: var(--mhpr-color-white);
		}
		.mhpr-button.mhpr-button--white:hover .mhpr-btn {
		background: var(--mhpr-color-teal);
		color: var(--mhpr-color-white);
		border-color: var(--mhpr-color-teal);
		}
		.mhpr-button--outline {
		/* skylit-class-mod: Outline button | only: .mhpr-button */
		}
		.mhpr-button.mhpr-button--outline .mhpr-btn {
		background: transparent;
		color: var(--mhpr-color-navy);
		border-color: var(--mhpr-color-navy);
		padding: 0.9rem 2.25rem;
		}
		.mhpr-button.mhpr-button--outline:hover .mhpr-btn {
		background: var(--mhpr-color-navy);
		color: var(--mhpr-color-white);
		}
		.mhpr-button--ghost {
		/* skylit-class-mod: Ghost arrow link on light backgrounds | only: .mhpr-button */
		}
		.mhpr-button.mhpr-button--ghost .mhpr-btn {
		padding: 0 0 2px;
		border: none;
		border-bottom: 1.5px solid var(--mhpr-color-teal);
		border-radius: 0;
		background: transparent;
		color: var(--mhpr-color-teal);
		font-weight: 500;
		}
		.mhpr-button.mhpr-button--ghost:hover .mhpr-btn {
		background: transparent;
		color: var(--mhpr-color-gold);
		border-bottom-color: var(--mhpr-color-gold);
		}
		.mhpr-button.mhpr-button--ghost .mhpr-btn::after {
		content: "→";
		display: inline-block;
		transition: transform 0.2s ease;
		}
		.mhpr-button.mhpr-button--ghost:hover .mhpr-btn::after,
		.mhpr-button.mhpr-button--ghost .mhpr-btn:hover::after {
		transform: translateX(0.45rem);
		}
		.mhpr-button--ghost-on-dark {
		/* skylit-class-mod: Ghost arrow link on dark backgrounds | only: .mhpr-button */
		}
		.mhpr-button.mhpr-button--ghost-on-dark .mhpr-btn {
		padding: 0 0 2px;
		border: none;
		border-bottom: 1.5px solid var(--mhpr-color-silver);
		border-radius: 0;
		background: transparent;
		color: var(--mhpr-color-white);
		font-weight: 500;
		}
		.mhpr-button.mhpr-button--ghost-on-dark:hover .mhpr-btn,
		.mhpr-button.mhpr-button--ghost-on-dark .mhpr-btn:hover {
		background: transparent;
		color: var(--mhpr-color-white);
		border-color: transparent;
		border-bottom-color: var(--mhpr-color-white);
		}
		.mhpr-button.mhpr-button--ghost-on-dark .mhpr-btn::after {
		content: "→";
		display: inline-block;
		transition: transform 0.2s ease;
		}
		.mhpr-button.mhpr-button--ghost-on-dark:hover .mhpr-btn::after,
		.mhpr-button.mhpr-button--ghost-on-dark .mhpr-btn:hover::after {
		color: var(--mhpr-color-white);
		transform: translateX(0.45rem);
		}
		.mhpr-button--arrow-link {
		/* skylit-class-mod: Arrow underline link | only: .mhpr-button */
		}
		.mhpr-button.mhpr-button--arrow-link .mhpr-btn {
		padding: 0 0.5rem 2px 0;
		border: none;
		border-bottom: 1.5px solid currentColor;
		border-radius: 0;
		background: transparent;
		font-weight: 600;
		letter-spacing: 0.03em;
		gap: 0.4rem;
		}
		.mhpr-button.mhpr-button--arrow-link:hover .mhpr-btn {
		background: transparent;
		gap: 0.4rem;
		}
		.mhpr-button.mhpr-button--arrow-link .mhpr-btn::after {
		content: "→";
		font-size: 1rem;
		display: inline-block;
		transition: transform 0.2s ease;
		}
		.mhpr-button.mhpr-button--arrow-link:hover .mhpr-btn::after {
		transform: translateX(0.45rem);
		}
		/* Pattern instance: color/align mods on the pattern-ref wrapper (parent of .mhpr-button) */
		.mhpr-button--align-center .mhpr-button {
		display: block;
		width: fit-content;
		margin-inline: auto;
		}
		.mhpr-button--align-left .mhpr-button {
		display: block;
		width: fit-content;
		margin-inline: 0;
		}
		.mhpr-button--align-right .mhpr-button {
		display: block;
		width: fit-content;
		margin-inline: auto 0;
		}
		.mhpr-button--primary .mhpr-button .mhpr-btn,
		.mhpr-button--primary .mhpr-button.mhpr-button--teal .mhpr-btn,
		.mhpr-button--primary .mhpr-button.mhpr-button--dark .mhpr-btn,
		.mhpr-button--primary .mhpr-button.mhpr-button--white .mhpr-btn,
		.mhpr-button--primary .mhpr-button.mhpr-button--outline .mhpr-btn {
		background: var(--mhpr-color-gold);
		color: var(--mhpr-color-white);
		border-color: var(--mhpr-color-gold);
		padding: 0.85rem 2rem;
		}
		.mhpr-button--primary .mhpr-button .mhpr-btn:hover,
		.mhpr-button--primary .mhpr-button.mhpr-button--teal .mhpr-btn:hover,
		.mhpr-button--primary .mhpr-button.mhpr-button--dark .mhpr-btn:hover,
		.mhpr-button--primary .mhpr-button.mhpr-button--white .mhpr-btn:hover,
		.mhpr-button--primary .mhpr-button.mhpr-button--outline .mhpr-btn:hover {
		background: var(--mhpr-color-signal-dark);
		border-color: var(--mhpr-color-signal-dark);
		}
		.mhpr-button--teal .mhpr-button .mhpr-btn,
		.mhpr-button--teal .mhpr-button.mhpr-button--primary .mhpr-btn,
		.mhpr-button--teal .mhpr-button.mhpr-button--dark .mhpr-btn,
		.mhpr-button--teal .mhpr-button.mhpr-button--white .mhpr-btn,
		.mhpr-button--teal .mhpr-button.mhpr-button--outline .mhpr-btn {
		background: var(--mhpr-color-teal);
		color: var(--mhpr-color-white);
		border-color: var(--mhpr-color-teal);
		padding: 0.85rem 2rem;
		}
		.mhpr-button--teal .mhpr-button .mhpr-btn:hover,
		.mhpr-button--teal .mhpr-button.mhpr-button--primary .mhpr-btn:hover,
		.mhpr-button--teal .mhpr-button.mhpr-button--dark .mhpr-btn:hover,
		.mhpr-button--teal .mhpr-button.mhpr-button--white .mhpr-btn:hover,
		.mhpr-button--teal .mhpr-button.mhpr-button--outline .mhpr-btn:hover {
		background: var(--mhpr-color-signal-dark);
		border-color: var(--mhpr-color-signal-dark);
		}
		.mhpr-button--dark .mhpr-button .mhpr-btn,
		.mhpr-button--dark .mhpr-button.mhpr-button--primary .mhpr-btn,
		.mhpr-button--dark .mhpr-button.mhpr-button--teal .mhpr-btn {
		background: var(--mhpr-color-navy);
		color: var(--mhpr-color-white);
		border-color: var(--mhpr-color-navy);
		padding: 0.85rem 2rem;
		}
		.mhpr-button--dark .mhpr-button .mhpr-btn:hover,
		.mhpr-button--dark .mhpr-button.mhpr-button--primary .mhpr-btn:hover,
		.mhpr-button--dark .mhpr-button.mhpr-button--teal .mhpr-btn:hover {
		background: var(--mhpr-color-teal);
		border-color: var(--mhpr-color-teal);
		}
		.mhpr-button--white .mhpr-button .mhpr-btn,
		.mhpr-button--white .mhpr-button.mhpr-button--primary .mhpr-btn,
		.mhpr-button--white .mhpr-button.mhpr-button--teal .mhpr-btn {
		background: var(--mhpr-color-white);
		color: var(--mhpr-color-navy);
		border-color: var(--mhpr-color-white);
		padding: 0.85rem 2rem;
		}
		.mhpr-button--white .mhpr-button .mhpr-btn:hover,
		.mhpr-button--white .mhpr-button.mhpr-button--primary .mhpr-btn:hover,
		.mhpr-button--white .mhpr-button.mhpr-button--teal .mhpr-btn:hover {
		background: var(--mhpr-color-teal);
		color: var(--mhpr-color-white);
		border-color: var(--mhpr-color-teal);
		}
		.mhpr-button--outline .mhpr-button .mhpr-btn,
		.mhpr-button--outline .mhpr-button.mhpr-button--primary .mhpr-btn,
		.mhpr-button--outline .mhpr-button.mhpr-button--teal .mhpr-btn {
		background: transparent;
		color: var(--mhpr-color-navy);
		border-color: var(--mhpr-color-navy);
		padding: 0.9rem 2.25rem;
		}
		.mhpr-button--outline .mhpr-button .mhpr-btn:hover,
		.mhpr-button--outline .mhpr-button.mhpr-button--primary .mhpr-btn:hover,
		.mhpr-button--outline .mhpr-button.mhpr-button--teal .mhpr-btn:hover {
		background: var(--mhpr-color-navy);
		color: var(--mhpr-color-white);
		}
		.mhpr-button--arrow-link .mhpr-button .mhpr-btn,
		.mhpr-button--arrow-link .mhpr-button.mhpr-button--primary .mhpr-btn {
		padding: 0 0.5rem 2px 0;
		border: none;
		border-bottom: 1.5px solid currentColor;
		border-radius: 0;
		background: transparent;
		font-weight: 600;
		letter-spacing: 0.03em;
		gap: 0.4rem;
		}
		.mhpr-button--arrow-link .mhpr-button:hover .mhpr-btn,
		.mhpr-button--arrow-link:hover .mhpr-button .mhpr-btn,
		.mhpr-button--arrow-link .mhpr-button .mhpr-btn:hover {
		background: transparent;
		gap: 0.4rem;
		}
		.mhpr-button--arrow-link .mhpr-button .mhpr-btn::after,
		.mhpr-button--arrow-link .mhpr-button.mhpr-button--primary .mhpr-btn::after {
		content: "→";
		font-size: 1rem;
		display: inline-block;
		transition: transform 0.2s ease;
		}
		.mhpr-button--arrow-link .mhpr-button:hover .mhpr-btn::after,
		.mhpr-button--arrow-link:hover .mhpr-button .mhpr-btn::after,
		.mhpr-button--arrow-link .mhpr-button .mhpr-btn:hover::after {
		transform: translateX(0.45rem);
		}
		.mhpr-button--ghost .mhpr-button .mhpr-btn,
		.mhpr-button--ghost .mhpr-button.mhpr-button--primary .mhpr-btn {
		padding: 0 0 2px;
		border: none;
		border-bottom: 1.5px solid var(--mhpr-color-teal);
		border-radius: 0;
		background: transparent;
		color: var(--mhpr-color-teal);
		font-weight: 500;
		}
		.mhpr-button--ghost .mhpr-button .mhpr-btn::after,
		.mhpr-button--ghost .mhpr-button.mhpr-button--primary .mhpr-btn::after {
		content: "→";
		display: inline-block;
		transition: transform 0.2s ease;
		}
		.mhpr-button--ghost .mhpr-button:hover .mhpr-btn::after,
		.mhpr-button--ghost:hover .mhpr-button .mhpr-btn::after,
		.mhpr-button--ghost .mhpr-button .mhpr-btn:hover::after {
		transform: translateX(0.45rem);
		}
		.mhpr-button--ghost-on-dark .mhpr-button .mhpr-btn,
		.mhpr-button--ghost-on-dark .mhpr-button.mhpr-button--primary .mhpr-btn {
		padding: 0 0 2px;
		border: none;
		border-bottom: 1.5px solid var(--mhpr-color-silver);
		border-radius: 0;
		background: transparent;
		color: var(--mhpr-color-white);
		font-weight: 500;
		}
		.mhpr-button--ghost-on-dark .mhpr-button:hover .mhpr-btn,
		.mhpr-button--ghost-on-dark:hover .mhpr-button .mhpr-btn,
		.mhpr-button--ghost-on-dark .mhpr-button.mhpr-button--primary:hover .mhpr-btn,
		.mhpr-button--ghost-on-dark .mhpr-button .mhpr-btn:hover {
		background: transparent;
		color: var(--mhpr-color-white);
		border-color: transparent;
		border-bottom-color: var(--mhpr-color-white);
		}
		.mhpr-button--ghost-on-dark .mhpr-button:hover .mhpr-btn::after,
		.mhpr-button--ghost-on-dark:hover .mhpr-button .mhpr-btn::after,
		.mhpr-button--ghost-on-dark .mhpr-button .mhpr-btn:hover::after {
		color: var(--mhpr-color-white);
		}
		.mhpr-button--ghost-on-dark .mhpr-button .mhpr-btn::after,
		.mhpr-button--ghost-on-dark .mhpr-button.mhpr-button--primary .mhpr-btn::after {
		content: "→";
		}