@use "@automattic/color-studio/dist/color-variables" as studio;

.card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 48px;

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		letter-spacing: -1%;
		margin: 0;
	}

	h1 {
		font-size: 36px;
		line-height: 40px;

		@media (max-width: 659px) {
			font-size: 24px;
			line-height: 32px;
		}
	}

	h2 {
		font-size: 32px;
		line-height: 35px;
		font-weight: 510;

		@media (max-width: 659px) {
			font-size: 24px;
			line-height: 32px;
		}
	}

	p {
		margin: 0;
	}

	ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
}

.card--connection {
	padding: 80px 48px;

	@media (max-width: 959px) {
		padding: 16px;
	}
}

.card--sharing {
	gap: 32px;

	@media (max-width: 959px) {
		padding: 16px;
	}
}

.card__prose {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.checklist {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;

	li {
		display: flex;
		gap: 4px;
		margin-bottom: 0;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: -2%;
	}

	li svg {
		margin-top: -1px;
		flex-shrink: 0;
	}

	.card--sharing & li {
		font-size: 14px;
	}
}

.site-connection {
	display: flex;
	flex-direction: column;
	gap: 16px;

	.terms-of-service {
		font-size: 13px;
		color: var(--jp-black);
		max-width: 460px;

	}

	.terms-of-service__link {
		color: studio.$studio-automattic-blue;
		white-space: nowrap;
	}

	:global {

		.components-button.is-link {
			color: studio.$studio-automattic-blue;
			white-space: nowrap;
			text-decoration: underline;
		}
	}

}

.connect-button-wrapper {

	:global {

		.components-button {
			background-color: studio.$studio-automattic-blue;
			min-width: 178px;
		}
	}
}

:global {

	.components-button.is-link.components-button--back {
		font-size: 14px;
		color: studio.$studio-black;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}

		svg {
			width: 14px;
			height: 14px;
			margin-right: 4px;
			margin-top: 1px;
		}
	}
}
