@layer pages {
	/* Franchise landing page extras. */

	.haf-franchise-scope {
		display: grid;
		gap: var(--haf-space-7);
	}

	.haf-franchise-scope__group-title {
		margin: 0 0 var(--haf-space-4);
		font-size: var(--haf-font-size-lg);
	}

	.haf-scope-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.haf-scope-list__item {
		border-bottom: 1px solid var(--haf-color-border);
	}

	.haf-scope-list__item:first-child {
		border-top: 1px solid var(--haf-color-border);
	}

	.haf-scope-list__item a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--haf-space-4);
		padding-block: var(--haf-space-4);
		transition: padding-inline-start var(--haf-transition-base), background-color var(--haf-transition-base);
	}

	.haf-scope-list__item a:hover {
		padding-inline-start: var(--haf-space-4);
		background: var(--haf-color-surface);
	}

	.haf-scope-list__item svg {
		flex: 0 0 auto;
		color: var(--haf-color-primary);
		transition: transform var(--haf-transition-fast);
	}

	.haf-scope-list__item a:hover svg {
		transform: translateX(4px);
	}

	.haf-franchise-credentials {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: var(--haf-space-4);
	}

	.haf-credential-row {
		display: flex;
		align-items: center;
		gap: var(--haf-space-4);
		padding: var(--haf-space-4);
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-lg);
		background: var(--haf-color-base);
		transition: border-color var(--haf-transition-base), box-shadow var(--haf-transition-base);
	}

	.haf-credential-row:hover {
		border-color: var(--haf-color-primary);
		box-shadow: var(--haf-shadow-sm);
	}

	.haf-credential-row__media {
		flex: 0 0 auto;
		width: 3.5rem;
		height: 3.5rem;
		overflow: hidden;
		border-radius: var(--haf-radius-md);
		background: var(--haf-color-surface-strong);
	}

	.haf-credential-row__media img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.haf-credential-row__body {
		display: grid;
		gap: var(--haf-space-1);
		min-width: 0;
	}

	.haf-credential-row__name {
		font-weight: 750;
	}

	.haf-credential-row__issuer {
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-sm);
	}

	.haf-credential-row__link {
		margin-inline-start: auto;
		display: inline-flex;
		align-items: center;
		gap: var(--haf-space-2);
		font-weight: 750;
		color: var(--haf-color-primary);
		white-space: nowrap;
	}

	@media (min-width: 48rem) {
		.haf-franchise-scope {
			grid-template-columns: repeat(2, 1fr);
			gap: var(--haf-space-8);
		}
	}
}