/* viode page — components adopted from the design library */

/* header-5 */
.header-5 {
	padding: var(--space-2xl) 0 var(--space-l);
	background-color: var(--color-neutral-10);

	& > header.hol-column {
		text-align: center;
		justify-items: center;
		gap: var(--space-s);

		& > img.logo {
			width: 5rem;
			height: 5rem;
		}

		& > .eyebrow {
			letter-spacing: 0.18em;
			color: var(--color-neutral-4);
			font-size: var(--font-size--1);
		}

		& > h1 {
			max-width: 18ch;
		}

		& > .lede {
			max-width: 52ch;
			color: var(--color-neutral-3);
			font-size: var(--font-size-1);
		}

		& > .hero-actions {
			display: flex;
			gap: var(--space-s);
			margin-top: var(--space-xs);
			flex-wrap: wrap;
			justify-content: center;
		}
	}
}

/* feature-8 */
.feature-8 {
	padding: var(--space-l-2xl) 0;
	background-color: var(--color-neutral-10);
	overflow: hidden;

	& > div.hol-column {
		gap: var(--space-xl);
		justify-items: start;

		& > h2 {
			max-width: 25ch;
		}

		& > figure > img {
			border-radius: var(--border-radius);
			box-shadow: 0 var(--space-s) var(--space-m) calc(-1 * var(--space-3xs)) color-mix(in oklch, var(--shadow-color) 25%, transparent);
		}
	}
}

/* feature-6 */
.feature-6 {
	padding: var(--space-l-2xl) 0;
	background-color: var(--color-neutral-10);

	& > div.hol-column {
		gap: var(--space-xl);
		justify-items: start;

		& > div.hol-column.header {
			justify-items: start;
			width: 100%;

			& > h6 {
				text-transform: uppercase;
				color: var(--color-neutral-4);
			}

			& > p {
				max-width: 60ch;
				color: var(--color-neutral-4);
			}
		}

		& > dl.feature-grid {
			width: 100%;
			grid-template-columns: repeat(auto-fit, minmax(calc(var(--content-max-width) / 2 - 5rem), 1fr));
			justify-items: start;

			& > .feature-item {
				position: relative;
				padding-left: calc(2.5rem + var(--space-m));

				& > .icon {
					position: absolute;
					top: 0;
					left: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 2.5rem;
					height: 2.5rem;
					border-radius: 0.5rem;
					background-color: var(--color-color-3);
					color: contrast-color(var(--color-color-3));

					& > svg {
						width: 1.5rem;
						height: 1.5rem;
					}
				}

				& > dt {
					font-weight: bold;
					color: var(--color-neutral-1);
				}

				& > dd {
					margin: var(--space-3xs) 0 0 0;
				}
			}
		}
	}
}

/* feature-3 */
.feature-3 {
	padding: var(--space-l-2xl) 0;
	background-color: var(--color-neutral-10);

	& > div.hol-column {
		gap: var(--space-xl);
		justify-items: start;

		& > div.hol-column.header {
			justify-items: start;
			width: 100%;

			& > h6 {
				text-transform: uppercase;
				color: var(--color-neutral-4);
			}

			& > p {
				max-width: 60ch;
				color: var(--color-neutral-4);
			}
		}

		& > dl.hol-wrapping-row {
			width: 100%;
		}

		& > dl.hol-wrapping-row > .hol-column.feature-item {
			justify-items: start;

			& > dt {
				display: flex;
				align-items: center;
				gap: var(--space-2xs);
				font-weight: bold;
				color: var(--color-neutral-1);

				& > svg {
					width: 1.25rem;
					height: 1.25rem;
					flex-shrink: 0;
					color: var(--color-color-1);
				}
			}

			& > dd {
				margin: 0;
			}
		}
	}
}

/* steps-1 */
.steps-1 {
	padding: var(--space-l-2xl) 0;
	background-color: var(--color-neutral-10);

	& > div.hol-column {
		justify-items: start;

		& > h6 {
			text-transform: uppercase;
			letter-spacing: 0.12em;
			color: var(--color-color-6);
		}

		& > .steps {
			list-style: none;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
			gap: var(--space-l);
			margin-top: var(--space-m);
			width: 100%;

			& > li {
				display: flex;
				flex-direction: column;
				gap: var(--space-xs);

				& > span {
					font-size: var(--font-size-3);
					color: var(--color-color-6);
					font-weight: bold;
					line-height: 1;
				}

				& > h4 {
					font-size: var(--font-size-1);
				}

				& > p {
					color: var(--color-neutral-4);
				}
			}
		}
	}
}

/* feature-7 */
.feature-7 {
	padding: var(--space-l-2xl) 0;
	background-color: var(--color-neutral-10);

	& > div.hol-column {
		gap: var(--space-xl);
		justify-items: start;

		& > div.hol-column.header {
			justify-items: start;
			width: 100%;

			& > h6 {
				text-transform: uppercase;
				color: var(--color-neutral-4);
			}

			& > p {
				max-width: 60ch;
				color: var(--color-neutral-4);
			}
		}

		& > dl.feature-grid {
			width: 100%;
			grid-template-columns: repeat(auto-fit, minmax(calc(var(--content-max-width) / 3 - 5rem), 1fr));

			& > .feature-item {
				position: relative;
				padding-left: var(--space-l);

				& > dt {
					display: inline;
					font-weight: bold;
					color: var(--color-neutral-1);

					& > svg {
						position: absolute;
						top: 0.2em;
						left: 0;
						width: 1.25rem;
						height: 1.25rem;
						color: var(--color-color-1);
					}
				}

				& > dd {
					display: inline;
					margin: 0;
				}
			}
		}
	}
}

/* stats-1 */
.stats-1 {
	padding: var(--space-2xl) 0;
	background-color: var(--color-neutral-9);

	& > div.hol-column {
		justify-items: start;
		gap: var(--space-l);

		& > .stats-row {
			list-style: none;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
			gap: var(--space-l);
			width: 100%;

			& > li {
				display: flex;
				flex-direction: column;
				gap: var(--space-2xs);
				align-items: flex-start;

				& > strong {
					font-size: var(--font-size-5);
					font-weight: normal;
					color: var(--color-color-6);
					line-height: 1;
				}

				& > span {
					color: var(--color-neutral-4);
					max-width: 16ch;
				}
			}
		}
	}
}

/* pricing-5 */
.pricing-5 {
	padding: var(--space-l-2xl) 0;
	background-color: var(--color-neutral-10);

	& > div.hol-column {
		gap: var(--space-l);
		max-width: 40rem;
		margin: 0 auto;
		justify-items: center;
		text-align: center;

		& > header {
			display: flex;
			flex-direction: column;
			gap: var(--space-xs);
			align-items: center;

			& > h6 {
				color: var(--color-color-6);
				text-transform: uppercase;
				letter-spacing: 0.12em;
			}

			& > p {
				color: var(--color-neutral-3);
				max-width: 40ch;
			}
		}

		& > .plan {
			border: 1px solid var(--color-neutral-7);
			border-radius: var(--border-radius);
			padding: var(--space-xl);
			display: flex;
			flex-direction: column;
			gap: var(--space-m);
			align-items: center;
			width: 100%;
			background: var(--color-neutral-10);

			& > .price {
				display: flex;
				align-items: baseline;
				gap: var(--space-3xs);

				& > strong {
					font-size: var(--font-size-6);
					line-height: 1;
					font-weight: normal;
					font-family: var(--font-family-0);
				}

				& > .per {
					color: var(--color-neutral-4);
				}
			}

			& > ul {
				list-style: none;
				display: flex;
				flex-direction: column;
				gap: var(--space-s);
				width: 100%;
				text-align: left;

				& > li {
					display: flex;
					flex-direction: column;
					gap: var(--space-3xs);
					padding: var(--space-s) 0;
					border-top: 1px solid var(--color-neutral-9);

					& > span {
						color: var(--color-neutral-4);
						font-size: var(--font-size--1);
					}
				}
			}

			& > .button {
				display: inline-block;
				padding: 0.7em 1.4em;
				border-radius: 0.3em;
				text-decoration: none;
				font-weight: 500;
			}

			& > .note {
				font-size: var(--font-size--1);
				color: var(--color-neutral-4);
			}
		}
	}
}

/* cta-3 */
.cta-3 {
	padding: var(--space-l-2xl) 0;
	background-color: var(--color-neutral-10);

	& > div.hol-column {
		justify-items: center;
		text-align: center;

		& > h2 {
			max-width: 25ch;
		}

		& > p {
			max-width: 45ch;
		}

		& > .actions {
			display: flex;
			align-items: center;
			gap: var(--space-s);
			margin-top: var(--space-m);
		}
	}
}