/* ==========================================================================
   HamfiSceneDetect (HamfiSD) — landing page · Plan B
   Layout  : "Stellar" by HTML5 UP (tabbed nav at the bottom of the hero,
             one rounded content card, sections separated by hairlines)
   Theme   : Plan A (dark hero, warm accent, light content card)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

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

	html {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		scroll-behavior: smooth;
		scroll-padding-top: 4.6em;
	}

	body {
		margin: 0;
	}

	h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote {
		margin: 0;
	}

	ul, ol {
		padding-left: 1.2em;
	}

	img, video {
		display: block;
		max-width: 100%;
		height: auto;
		border: 0;
	}

	a {
		color: inherit;
		text-decoration: none;
		border-bottom: 0;
	}

	strong, b {
		font-weight: 400;
	}

	button, input, select, textarea {
		font: inherit;
		color: inherit;
	}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

	@font-face {
		font-family: 'Source Sans 3';
		font-style: normal;
		font-weight: 300 700;
		font-display: swap;
		src: url('../webfonts/source-sans-3-latin.woff2') format('woff2');
	}

	:root {
		--accent: #E0743A;
		--accent-soft: #F6AC86;
		--ink: #1E1E24;
		--body-text: #686874;
		--hairline: #ECECF1;
		--paper: #FFFFFF;
		--carbon: #111116;
	}

	body {
		background-color: #171F2B;
		background-image: linear-gradient(180deg, #171F2B 0%, #1C222C 30%, #24252D 50%, #2C292E 62%, #332A2A 88%, #352A29 100%);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		color: var(--body-text);
		font-family: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
		font-size: 1rem;
		font-weight: 300;
		line-height: 1.7;
		letter-spacing: 0;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	h1, h2, h3, h4, h5, h6 {
		color: var(--ink);
		font-weight: 400;
		letter-spacing: -0.015em;
	}

	p {
		line-height: 1.75;
	}

	code {
		padding: 0.1em 0.4em;
		background-color: #FCF2E8;
		border: solid 1px #F7DDC9;
		border-radius: 0.35em;
		color: #A84E1E;
		font-size: 0.86em;
	}

	a:hover {
		color: var(--accent);
	}

/* --------------------------------------------------------------------------
   3. Elements
   -------------------------------------------------------------------------- */

/* Icon */

	.icon {
		border-bottom: 0;
		text-decoration: none;
	}

		.icon:before {
			display: inline-block;
			font-family: "Font Awesome 5 Free";
			font-style: normal;
			font-variant: normal;
			font-weight: 400;
			line-height: 1;
			text-transform: none;
			-webkit-font-smoothing: antialiased;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: "Font Awesome 5 Brands";
		}

/* Button */

	.button {
		display: -moz-inline-flex;
		display: -webkit-inline-flex;
		display: -ms-inline-flex;
		display: inline-flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		height: 2.95em;
		padding: 0 1.6em;
		border: 0;
		border-radius: 999px;
		background-color: transparent;
		box-shadow: inset 0 0 0 1px #E2E2EA;
		color: #4A4A55;
		font-size: 0.86rem;
		font-weight: 400;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		text-decoration: none;
		transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	}

		.button:before {
			margin-right: 0.55em;
		}

		.button:hover {
			background-color: rgba(224, 116, 58, 0.06);
			box-shadow: inset 0 0 0 1px #F6CFB6;
			color: var(--accent);
			transform: translateY(-1px);
		}

		.button.primary {
			background-color: var(--accent);
			box-shadow: 0 0.55em 1.4em rgba(224, 116, 58, 0.28);
			color: #FFFFFF;
		}

			.button.primary:hover {
				background-color: #E88A55;
				box-shadow: 0 0.75em 1.8em rgba(224, 116, 58, 0.36);
				color: #FFFFFF;
			}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 0.8em;
		margin: 0;
		padding: 0;
		list-style: none;
	}

		ul.actions li {
			padding: 0;
			list-style: none;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
		}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

	#wrapper {
		position: relative;
		width: 74em;
		max-width: calc(100% - 4em);
		margin: 0 auto;
	}

/* --------------------------------------------------------------------------
   5. Header (hero — copy on top, application screenshot underneath)
   -------------------------------------------------------------------------- */

	#header {
		position: relative;
		padding: 6.4em 3em 2em 3em;
		text-align: center;
	}

		#header .hero-inner {
			position: relative;
			z-index: 2;
			max-width: 54em;
			margin: 0 auto;
		}

			#header h1 {
				margin: 0.3em 0 0.32em 0;
				color: #FFFFFF;
				font-size: clamp(2.5rem, 5.2vw, 3.9rem);
				font-weight: 300;
				line-height: 1.02;
				letter-spacing: -0.04em;
			}

				#header h1 span {
					color: var(--accent);
				}

			#header .lede {
				display: flex;
				justify-content: center;
				margin: 0 auto;
				max-width: none;
				white-space: nowrap;
				color: #F0EEF6;
				font-size: clamp(1.05rem, 1.6vw, 1.4rem);
				font-weight: 300;
				line-height: 1.58;
				letter-spacing: -0.01em;
			}

			#header .sublede {
				margin: 0.9em auto 0 auto;
				color: #8E8E9F;
				font-size: calc(0.78rem + 4px);
				line-height: 1.7;
				letter-spacing: 0.01em;
			}

			#header .actions {
				margin-top: 2.1em;
			}

				ul.actions .button {
					min-width: 12em;
				}

				#header .actions .btn-caret {
					margin-left: 0.55em;
					font-size: 0.8em;
					transition: transform 0.2s ease;
				}

					#header .download-menu.is-open .btn-caret {
						transform: rotate(180deg);
					}

			#header .version {
				margin: 0.9em 0 0 0;
				color: #8E8E9F;
				font-size: calc(0.66rem + 4px);
				letter-spacing: 0.1em;
				text-transform: uppercase;
			}

			#header .button {
				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20);
				color: #EDEDF4;
			}

				#header .button:hover {
					background-color: rgba(255, 255, 255, 0.08);
					box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.40);
					color: #FFFFFF;
				}

			#header .button.primary {
				background-color: #FFFFFF;
				box-shadow: 0 0.8em 1.8em rgba(0, 0, 0, 0.42);
				color: var(--accent);
			}

				#header .button.primary:hover {
					background-color: #FCF0E6;
					color: var(--accent);
				}

			#header .download-menu {
				position: relative;
				display: inline-block;
			}

				#header .download-toggle {
					position: relative;
					z-index: 2;
					font-family: inherit;
				}

				#header .download-list {
					position: absolute;
					top: 50%;
					left: 0;
					z-index: 1;
					width: 100%;
					margin: 0;
					padding: 2.2em 0.3em 0.3em 0.3em;
					border-radius: 0 0 1.1em 1.1em;
					background-color: #FFFFFF;
					box-shadow: 0 0.9em 1.8em rgba(0, 0, 0, 0.42);
					list-style: none;
					text-align: left;
					opacity: 0;
					visibility: hidden;
					transform: translateY(-0.4em);
					transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
				}

					#header .download-menu.is-open .download-list {
						opacity: 1;
						visibility: visible;
						transform: translateY(0);
					}

					#header .download-list li {
						margin: 0;
						padding: 0;
						list-style: none;
					}

					#header .download-list a,
					#header .download-list span {
						display: -moz-flex;
						display: -webkit-flex;
						display: -ms-flex;
						display: flex;
						-moz-align-items: center;
						-webkit-align-items: center;
						-ms-align-items: center;
						align-items: center;
						gap: 0.5em;
						padding: 0.6em 0.7em;
						border-radius: 0.6em;
						color: var(--accent);
						font-size: 0.74rem;
						font-weight: 400;
						line-height: 1.2;
						white-space: nowrap;
						text-decoration: none;
					}

						#header .download-list a:hover {
							background-color: #FCF0E6;
							color: var(--accent);
						}

						#header .download-list i {
							width: 1.05em;
							text-align: center;
						}

						#header .download-list .disabled,
						#header .download-list .disabled span,
						#header .download-list .disabled i {
							color: #9B9BA5;
							cursor: not-allowed;
						}

							#header .download-list .disabled i {
								opacity: 1;
							}

			#header .statline {
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
				-moz-align-items: flex-start;
				-webkit-align-items: flex-start;
				-ms-align-items: flex-start;
				align-items: flex-start;
				-moz-justify-content: center;
				-webkit-justify-content: center;
				-ms-justify-content: center;
				justify-content: center;
				gap: 2.6em;
				margin: 2.4em 0 0 0;
				padding: 0;
				list-style: none;
			}

				#header .statline li {
					padding: 0;
					list-style: none;
					text-align: center;
				}

				#header .statline strong {
					display: block;
					margin-bottom: 0.18em;
					color: #FFFFFF;
					font-size: 1.5rem;
					font-weight: 400;
					line-height: 1;
				}

				#header .statline span {
					color: #8A8A9A;
					font-size: 0.68rem;
					letter-spacing: 0.02em;
				}

/* Application window — full width so the UI stays legible */

	#header .app-window {
		position: relative;
		z-index: 1;
		width: 100%;
		margin: 3.2em 0 0 0;
	}

		#header .app-window .window-shell {
			border: solid 1px rgba(255, 255, 255, 0.12);
			border-radius: 0.8em;
			background-color: #15151A;
			box-shadow:
				0 2.2em 4.4em rgba(0, 0, 0, 0.60),
				0 0 5em rgba(224, 116, 58, 0.16),
				inset 0 1px 0 rgba(255, 255, 255, 0.08);
			overflow: hidden;
		}

		#header .window-bar {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			gap: 0.35em;
			padding: 0.7em 0.95em;
			background-color: #1B1B22;
			border-bottom: solid 1px rgba(255, 255, 255, 0.07);
		}

			#header .window-bar i {
				display: block;
				width: 0.55em;
				height: 0.55em;
				border-radius: 50%;
				background-color: #3A3A46;
			}

				#header .window-bar i:nth-child(1) {
					background-color: #E0743A;
				}

				#header .window-bar i:nth-child(2) {
					background-color: #D8B23E;
				}

				#header .window-bar i:nth-child(3) {
					background-color: #3AE06C;
				}

			#header .window-bar span {
				margin-left: 0.65em;
				color: #9A9AAB;
				font-size: 0.7rem;
				letter-spacing: 0.05em;
				line-height: 1.5;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

		#header .app-window img {
			display: block;
			width: 100%;
			height: auto;
		}

		#header .device-caption {
			margin: 1.15em 0 0 0;
			min-height: 1.6em;
			color: #8E8E9E;
			font-size: 0.66rem;
			font-weight: 400;
			letter-spacing: 0.14em;
			line-height: 1.6;
			text-align: center;
			text-transform: uppercase;
		}

/* Entrance animation */

	@keyframes hero-rise {
		from {
			opacity: 0;
			-webkit-transform: translateY(0.9em);
			transform: translateY(0.9em);
		}
		to {
			opacity: 1;
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}
	}

	#header .hero-inner > * {
		-webkit-animation: hero-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
		animation: hero-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

		#header .hero-inner > *:nth-child(1) {
			-webkit-animation-delay: 0.06s;
			animation-delay: 0.06s;
		}

		#header .hero-inner > *:nth-child(2) {
			-webkit-animation-delay: 0.14s;
			animation-delay: 0.14s;
		}

		#header .hero-inner > *:nth-child(3) {
			-webkit-animation-delay: 0.22s;
			animation-delay: 0.22s;
		}

		#header .hero-inner > *:nth-child(4) {
			-webkit-animation-delay: 0.30s;
			animation-delay: 0.30s;
		}

		#header .hero-inner > *:nth-child(5) {
			-webkit-animation-delay: 0.38s;
			animation-delay: 0.38s;
		}

		#header .hero-inner > *:nth-child(6) {
			-webkit-animation-delay: 0.46s;
			animation-delay: 0.46s;
		}

	#header .app-window {
		-webkit-animation: hero-rise 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s both;
		animation: hero-rise 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s both;
	}

/* --------------------------------------------------------------------------
   6. Nav (tab strip sitting on the bottom edge of the hero)
   -------------------------------------------------------------------------- */

	#nav {
		position: absolute;
		left: 0;
		right: 0;
		z-index: 30;
		padding: 0.85em 1em;
		background-color: #F1F1F5;
		border-top-left-radius: 0.8em;
		border-top-right-radius: 0.8em;
		text-align: center;
		cursor: default;
		transition: background-color 0.25s ease, padding 0.25s ease, border-radius 0.25s ease, box-shadow 0.25s ease;
	}

		#nav .brand {
			position: absolute;
			left: 1em;
			top: 50%;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			gap: 0.5em;
			color: var(--ink);
			font-size: 0.8rem;
			font-weight: 400;
			letter-spacing: -0.01em;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
		}

			#nav .brand img {
				display: block;
				width: 1.6em;
				height: 1.6em;
				border-radius: 0.3em;
				-webkit-transform: translateY(-0.12em);
				transform: translateY(-0.12em);
			}

			#nav .brand b {
				color: var(--accent);
				font-weight: 600;
			}

		#nav ul {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			gap: 0.3em;
			margin: 0;
			padding: 0;
			list-style: none;
		}

			#nav ul li {
				padding: 0;
				list-style: none;
			}

			#nav ul a {
				display: inline-block;
				height: 2.2em;
				line-height: 2.2em;
				padding: 0 1.2em;
				border-radius: 0.4em;
				color: #71717F;
				font-size: 0.8rem;
				font-weight: 400;
				transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
			}

				#nav ul a:hover {
					background-color: rgba(140, 140, 160, 0.12);
					color: #2A2A31;
				}

				#nav ul a.active {
					background-color: #FFFFFF;
					box-shadow: 0 0.2em 0.7em rgba(28, 28, 35, 0.10);
					color: var(--ink);
				}

		#nav .nav-aux {
			position: absolute;
			right: 1em;
			top: 50%;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
		}

			#nav .nav-aux a {
				display: -moz-inline-flex;
				display: -webkit-inline-flex;
				display: -ms-inline-flex;
				display: inline-flex;
				-moz-align-items: center;
				-webkit-align-items: center;
				-ms-align-items: center;
				align-items: center;
				gap: 0.45em;
				height: 2.1em;
				padding: 0 0.9em;
				border: solid 1px #E1E1EA;
				border-radius: 999px;
				background-color: #FFFFFF;
				color: #4A4A55;
				font-size: 0.72rem;
				font-weight: 400;
			}

				#nav .nav-aux a:hover {
					border-color: #F6CFB6;
					color: var(--accent);
				}

				#nav .nav-aux a .icon:before {
					font-size: 0.95em;
				}

		#nav.is-stuck {
			position: fixed;
			top: 0;
			left: 50%;
			right: auto;
			width: calc(100% - 2em);
			max-width: 74em;
			padding: 0.45em 1em;
			border-radius: 0 0 0.6em 0.6em;
			background-color: rgba(243, 243, 248, 0.94);
			-webkit-backdrop-filter: blur(14px);
			backdrop-filter: blur(14px);
			box-shadow: 0 0.6em 1.8em rgba(8, 8, 12, 0.40);
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
		}

			#nav.is-stuck ul a {
				height: 2.05em;
				line-height: 2.05em;
				font-size: 0.78rem;
			}

/* --------------------------------------------------------------------------
   7. Main content card
   -------------------------------------------------------------------------- */

	#main {
		position: relative;
		z-index: 1;
		padding-top: 4.1em;
		background-color: var(--paper);
		border-radius: 0.8em;
		box-shadow: 0 1.8em 4em rgba(0, 0, 0, 0.45);
		overflow: hidden;
	}

		#main > .main {
			padding: 4.5em 5em;
			border-top: solid 1px var(--hairline);
		}

			#main > .main:first-child {
				border-top: 0;
			}

	header.major {
		margin: 0 0 2.6em 0;
		text-align: center;
	}

		.section-kicker {
			margin: 0 0 1em 0;
			color: var(--accent);
			font-size: 0.7rem;
			font-weight: 400;
			letter-spacing: 0.2em;
			line-height: 1.5;
			text-transform: uppercase;
		}

		header.major h2 {
			font-size: clamp(1.55rem, 2.4vw, 2.1rem);
			font-weight: 300;
			line-height: 1.32;
			letter-spacing: -0.02em;
		}

			header.major h2:after {
				content: '';
				display: block;
				width: 2.6em;
				height: 2px;
				margin: 1.05em auto 0 auto;
				border-radius: 999px;
				background: linear-gradient(90deg, var(--accent), rgba(224, 116, 58, 0.15));
			}

		header.major .section-sub {
			max-width: 44em;
			margin: 1.35em auto 0 auto;
			color: #77777F;
			font-size: 0.9rem;
			line-height: 1.8;
		}

/* --------------------------------------------------------------------------
   8. Workflow
   -------------------------------------------------------------------------- */

	.workflow {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1em;
		margin: 0;
		text-align: left;
	}

		.workflow .step {
			position: relative;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			padding: 1.45em 1.35em;
			background-color: #FAFAFC;
			border: solid 1px var(--hairline);
			border-radius: 0.7em;
			transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
		}

			.workflow .step:hover {
				background-color: #FFFFFF;
				border-color: #F6CFB6;
				box-shadow: 0 0.9em 2em rgba(28, 28, 35, 0.08);
			}

			.workflow .step + .step:before {
				content: '\f105';
				position: absolute;
				top: 50%;
				left: -0.62em;
				color: #E8B69C;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
				font-size: 0.8rem;
				line-height: 1;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}

		.workflow .step-top {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			gap: 0.7em;
			margin-bottom: 0.95em;
		}

		.workflow .step-icon {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			-moz-flex: 0 0 auto;
			-webkit-flex: 0 0 auto;
			-ms-flex: 0 0 auto;
			flex: 0 0 auto;
			width: 2.3em;
			height: 2.3em;
			border-radius: 0.55em;
			background-color: #FCF1E9;
			box-shadow: inset 0 0 0 1px #F7DDC9;
		}

			.workflow .step-icon .icon {
				color: var(--accent);
				font-size: 0.9rem;
			}

		.workflow .step h4 {
			margin: 0;
			font-size: calc(1rem + 2px);
			font-weight: 400;
			line-height: 1.35;
		}

		.workflow .step p {
			margin: 0;
			color: #6E6E7A;
			font-size: calc(0.76rem + 2px);
			line-height: 1.75;
		}

	.gates {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		gap: 0.8em;
		margin: 1.5em 0 0 0;
		padding: 0;
		list-style: none;
	}

		.gates li {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			gap: 0.5em;
			padding: 0.7em 1em;
			background-color: #F7F2FF;
			border: dashed 1px #DAC8F8;
			border-radius: 0.55em;
			color: #6C5C86;
			font-size: 0.72rem;
			list-style: none;
		}

			.gates li .icon {
				color: var(--accent);
			}

			.gates li b {
				color: #4F3C70;
				font-weight: 400;
			}

			.gates li span {
				color: #75668C;
			}

/* --------------------------------------------------------------------------
   9. Spotlights
   -------------------------------------------------------------------------- */

	.spotlight {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		gap: 3em;
		margin: 0;
	}

		.spotlight + .spotlight {
			margin-top: 3.6em;
		}

		.spotlight:nth-child(2n) {
			-moz-flex-direction: row-reverse;
			-webkit-flex-direction: row-reverse;
			-ms-flex-direction: row-reverse;
			flex-direction: row-reverse;
		}

		.spotlight .frame {
			-moz-flex: 0 0 46%;
			-webkit-flex: 0 0 46%;
			-ms-flex: 0 0 46%;
			flex: 0 0 46%;
			width: 46%;
			margin: 0;
		}

		.spotlight .content {
			-moz-flex: 1 1 auto;
			-webkit-flex: 1 1 auto;
			-ms-flex: 1 1 auto;
			flex: 1 1 auto;
			width: auto;
			min-width: 0;
			text-align: left;
		}

			.spotlight .content .kicker {
				margin: 0 0 0.8em 0;
				color: var(--accent);
				font-size: 0.68rem;
				font-weight: 400;
				letter-spacing: 0.18em;
				line-height: 1.5;
				text-transform: uppercase;
			}

			.spotlight .content h3 {
				margin: 0 0 0.6em 0;
				font-size: 1.6rem;
				font-weight: 300;
				line-height: 1.4;
			}

			.spotlight .content p {
				margin: 0 0 1.4em 0;
				color: #686874;
				font-size: calc(0.86rem + 2px);
				line-height: 1.85;
			}

			.spotlight .content p:last-child {
				margin-bottom: 0;
			}

			.spotlight .content code {
				font-size: 0.8em;
			}

	.frame {
		background-color: #FFFFFF;
		border: solid 1px #E8E8EE;
		border-radius: 0.7em;
		box-shadow: 0 1.2em 2.6em rgba(28, 28, 35, 0.10);
		overflow: hidden;
	}

		.frame .frame-bar {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			padding: 0.55em 0.8em;
			background-color: #F7F7F9;
			border-bottom: solid 1px #E8E8EE;
		}

			.frame .frame-bar i {
				display: block;
				width: 0.44em;
				height: 0.44em;
				margin-right: 0.3em;
				border-radius: 50%;
				background-color: #D8D8DF;
			}

			.frame .frame-bar span {
				margin-left: 0.55em;
				color: #6E6E7A;
				font-size: 0.64rem;
				letter-spacing: 0.06em;
				line-height: 1.5;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

		.frame img {
			display: block;
			width: 100%;
			height: auto;
			border-radius: 0;
		}

	.frame-native {
		-moz-flex: 0 0 auto !important;
		-webkit-flex: 0 0 auto !important;
		-ms-flex: 0 0 auto !important;
		flex: 0 0 auto !important;
		width: auto !important;
	}

		.frame-native img {
			width: auto;
			margin: 0 auto;
		}

	.chips {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 0.42em;
		margin: 0;
		padding: 0;
		list-style: none;
	}

		.chips li {
			padding: 0.36em 0.7em;
			background-color: #F2F2F5;
			border: solid 1px #E9E9EE;
			border-radius: 999px;
			color: #5C5C68;
			font-size: 0.68rem;
			line-height: 1.5;
			list-style: none;
		}

/* Mini features */

	ul.icons.labeled {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		gap: 0.9em 2.2em;
		margin: 3.6em 0 0 0;
		padding: 0;
		list-style: none;
	}

		ul.icons.labeled li {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			margin: 0;
			padding: 0;
			list-style: none;
			white-space: nowrap;
		}

		ul.icons.labeled li .icon {
			color: var(--accent);
		}

			ul.icons.labeled li .icon:before {
				font-size: 1.2rem;
				margin-right: 0.55em;
				vertical-align: middle;
			}

			ul.icons.labeled li .icon .label {
				color: #4A4A55;
				font-size: calc(0.76rem + 2px);
				letter-spacing: 0;
			}

/* --------------------------------------------------------------------------
   10. Outputs (dark band inside the white card)
   -------------------------------------------------------------------------- */

	#main > #outputs {
		margin: 0;
		padding: 4.5em 5em;
		border-top: 0;
		background-color: var(--carbon);
		background-image:
			radial-gradient(ellipse 55% 50% at 88% 0%, rgba(224, 116, 58, 0.22), transparent 70%),
			radial-gradient(ellipse 45% 40% at 6% 100%, rgba(82, 214, 252, 0.08), transparent 70%);
		color: #9C9CAB;
	}

		#outputs .section-kicker {
			color: var(--accent-soft);
		}

		#outputs h2 {
			color: #FFFFFF;
		}

		#outputs header.major h2:after {
			background: linear-gradient(90deg, var(--accent-soft), rgba(246, 172, 134, 0.12));
		}

		#outputs header.major .section-sub {
			color: #8C8C9C;
		}

	.outputs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5em;
		margin: 0 0 2em 0;
		text-align: left;
	}

		.output-card {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin: 0;
			background-color: #191920;
			border: solid 1px rgba(255, 255, 255, 0.08);
			border-radius: 0.85em;
			overflow: hidden;
		}

			.output-card .media {
				position: relative;
				aspect-ratio: 3 / 2;
				background-color: #0B0B0E;
				overflow: hidden;
			}

				.output-card .media img,
				.output-card .media video {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 0;
					-o-object-fit: contain;
					object-fit: contain;
					pointer-events: none;
					-webkit-user-drag: none;
					-webkit-user-select: none;
					user-select: none;
				}

				.output-card .media[data-zoom] {
					cursor: zoom-in;
				}

				.output-card .media .zoom-btn {
					position: absolute;
					top: 0.85em;
					right: 0.85em;
					left: auto;
					display: -moz-flex;
					display: -webkit-flex;
					display: -ms-flex;
					display: flex;
					-moz-align-items: center;
					-webkit-align-items: center;
					-ms-align-items: center;
					align-items: center;
					-moz-justify-content: center;
					-webkit-justify-content: center;
					-ms-justify-content: center;
					justify-content: center;
					width: 2.2em;
					height: 2.2em;
					padding: 0;
					border: solid 1px rgba(255, 255, 255, 0.16);
					border-radius: 50%;
					background-color: rgba(10, 10, 14, 0.6);
					color: #FFFFFF;
					font-size: 0.72rem;
					line-height: 1;
					cursor: zoom-in;
					opacity: 0;
					visibility: hidden;
					transition: opacity 0.2s ease, visibility 0.2s, background-color 0.2s ease;
					-webkit-backdrop-filter: blur(8px);
					backdrop-filter: blur(8px);
				}

					.output-card .media:hover .zoom-btn,
					.output-card .media .zoom-btn:focus-visible {
						opacity: 1;
						visibility: visible;
					}

					.output-card .media .zoom-btn:hover {
						background-color: rgba(10, 10, 14, 0.85);
					}

			.output-card figcaption {
				padding: 1.2em 1.35em 1.4em 1.35em;
			}

				.output-card figcaption h4 {
					display: -moz-flex;
					display: -webkit-flex;
					display: -ms-flex;
					display: flex;
					-moz-align-items: center;
					-webkit-align-items: center;
					-ms-align-items: center;
					align-items: center;
					gap: 0.6em;
					margin: 0 0 0.55em 0;
					color: #FFFFFF;
					font-size: 0.98rem;
					font-weight: 400;
				}

					.output-card figcaption h4 em {
						padding: 0.22em 0.5em;
						border: solid 1px rgba(246, 172, 134, 0.25);
						border-radius: 0.3em;
						color: var(--accent-soft);
						font-size: 0.58em;
						font-style: normal;
						font-weight: 400;
						letter-spacing: 0.12em;
						text-transform: uppercase;
					}

				.output-card figcaption p {
					margin: 0;
					color: #9A9AA8;
					font-size: calc(0.78rem + 2px);
					line-height: 1.75;
				}

	.extras {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		gap: 0.6em;
		margin: 0 0 1.6em 0;
		padding: 0;
		list-style: none;
	}

		.extras li {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			gap: 0.5em;
			padding: 0.45em 0.85em;
			background-color: rgba(255, 255, 255, 0.03);
			border: solid 1px rgba(255, 255, 255, 0.10);
			border-radius: 999px;
			color: #B9B9C8;
			font-size: 0.72rem;
			line-height: 1.5;
			list-style: none;
		}

			.extras li .icon {
				color: var(--accent-soft);
			}

	.demo-note {
		margin: 0;
		color: #8A8A9A;
		font-size: 0.68rem;
		line-height: 1.7;
	}

/* Lightbox */

	[data-zoom] {
		cursor: zoom-in;
	}

	.lightbox {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		padding: 4vh 4vw;
		background-color: rgba(8, 8, 12, 0.88);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s;
	}

		.lightbox.is-open {
			opacity: 1;
			visibility: visible;
		}

		.lightbox img {
			display: block;
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
			border-radius: 0.5em;
			box-shadow: 0 1.6em 4em rgba(0, 0, 0, 0.6);
			cursor: zoom-out;
		}

		.lightbox-close {
			position: absolute;
			top: 1em;
			right: 1em;
			width: 2.6em;
			height: 2.6em;
			padding: 0;
			border: 0;
			border-radius: 50%;
			background-color: rgba(255, 255, 255, 0.12);
			color: #FFFFFF;
			font-size: 1.05rem;
			line-height: 1;
			cursor: pointer;
			transition: background-color 0.2s ease;
		}

			.lightbox-close:hover {
				background-color: rgba(255, 255, 255, 0.22);
			}

	body.lightbox-open {
		overflow: hidden;
	}

/* --------------------------------------------------------------------------
   11. Download
   -------------------------------------------------------------------------- */

	#three .download-icon {
		display: block;
		width: 4.2em;
		height: 4.2em;
		margin: 0 auto 1.3em auto;
		border-radius: 0.9em;
		-webkit-filter: drop-shadow(0 0.45em 1em rgba(28, 28, 35, 0.18));
		filter: drop-shadow(0 0.45em 1em rgba(28, 28, 35, 0.18));
	}

	#three header.major h2 span {
		color: var(--accent);
	}

	#three .reqs {
		margin-top: 2.2em;
		text-align: center;
	}

		#three .reqs > div {
			padding: 0;
			background-color: transparent;
			border: 0;
			border-radius: 0;
		}

			#three .reqs h4 {
				display: inline;
				margin: 0;
				color: #8A8A9A;
				font-size: calc(0.72rem + 2px);
				font-weight: 400;
				line-height: 1.75;
			}

				#three .reqs h4:after {
					content: ': ';
				}

			#three .reqs p {
				display: inline;
				margin: 0;
				color: #8A8A9A;
				font-size: calc(0.72rem + 2px);
				line-height: 1.75;
			}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

	#footer {
		padding: 4.5em 2em 3.5em 2em;
		color: #8A8A94;
		text-align: center;
	}

		#footer .icons {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			gap: 1.1em;
			margin: 0 0 1.5em 0;
			padding: 0;
			list-style: none;
		}

			#footer .icons li {
				padding: 0;
				list-style: none;
			}

			#footer .icons .icon {
				display: -moz-inline-flex;
				display: -webkit-inline-flex;
				display: -ms-inline-flex;
				display: inline-flex;
				-moz-align-items: center;
				-webkit-align-items: center;
				-ms-align-items: center;
				align-items: center;
				-moz-justify-content: center;
				-webkit-justify-content: center;
				-ms-justify-content: center;
				justify-content: center;
				width: 2.7em;
				height: 2.7em;
				border-radius: 50%;
				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
				color: #A9A9BA;
				transition: color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
			}

				#footer .icons .icon:before {
					font-size: 1rem;
				}

				#footer .icons .icon:hover {
					background-color: rgba(255, 255, 255, 0.05);
					box-shadow: inset 0 0 0 1px rgba(246, 172, 134, 0.55);
					color: #FFFFFF;
				}

			#footer .icons .icon .label {
				display: none;
			}

		#footer .copyright {
			margin: 0;
			color: #7C7C8A;
			font-size: 0.76rem;
			line-height: 1.85;
		}

			#footer .copyright a {
				border-bottom: dotted 1px rgba(255, 255, 255, 0.24);
				color: #B4B4C4;
			}

				#footer .copyright a:hover {
					border-bottom-color: transparent;
					color: #FFFFFF;
				}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */

	@media screen and (max-width: 1240px) {

		#wrapper {
			max-width: calc(100% - 3em);
		}

		#header {
			padding: 5.5em 2.5em 2em 2.5em;
		}

		#main > .main {
			padding: 4em 3.5em;
		}

		#main > #outputs {
			padding: 4em 3.5em;
		}

	}

	@media screen and (max-width: 1024px) {

		#wrapper {
			max-width: calc(100% - 2.5em);
		}

		#header {
			padding: 5em 2em 2em 2em;
		}

		#nav .brand,
		#nav .nav-aux {
			display: none;
		}

		#main > .main {
			padding: 3.5em 2.5em;
		}

		#main > #outputs {
			padding: 3.5em 2.5em;
		}

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

			.workflow .step + .step:before {
				display: none;
			}

	}

	@media screen and (max-width: 900px) {

		.spotlight,
		.spotlight:nth-child(2n) {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-align-items: stretch;
			-webkit-align-items: stretch;
			-ms-align-items: stretch;
			align-items: stretch;
			gap: 2em;
		}

			.spotlight + .spotlight {
				margin-top: 3em;
			}

			.spotlight .frame,
			.spotlight .frame-cut {
				-moz-flex: 0 0 auto !important;
				-webkit-flex: 0 0 auto !important;
				-ms-flex: 0 0 auto !important;
				flex: 0 0 auto !important;
				width: 100% !important;
				max-width: 40em;
			}

			.spotlight .content {
				width: 100%;
			}

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

		#three .reqs {
			margin-top: 1.9em;
		}

		ul.icons.labeled {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-align-items: flex-start;
			-webkit-align-items: flex-start;
			-ms-align-items: flex-start;
			align-items: flex-start;
			-moz-justify-content: flex-start;
			-webkit-justify-content: flex-start;
			-ms-justify-content: flex-start;
			justify-content: flex-start;
			gap: 0.85em;
			max-width: 22em;
			margin-left: auto;
			margin-right: auto;
			white-space: normal;
		}

	}

	@media screen and (max-width: 736px) {

		html {
			scroll-padding-top: 4.2em;
		}

		#wrapper {
			max-width: calc(100% - 2em);
		}

		#header {
			padding: 4.6em 1.4em 1.6em 1.4em;
		}

			#header h1 {
				font-size: clamp(1.95rem, 8.2vw, 2.6rem);
			}

			#header .lede {
				font-size: 1.02rem;
			}

				#header .lede br {
					display: none;
				}

			#header .sublede {
				font-size: calc(0.72rem + 2px);
			}

			#header .statline {
				gap: 1.6em;
				margin-top: 1.9em;
			}

				#header .statline strong {
					font-size: 1.3rem;
				}

			#header .app-window {
				width: auto;
				margin: 2.3em -1.4em 0 -1.4em;
			}

			#header .window-bar span {
				font-size: 0.62rem;
			}

			#header .device-caption {
				font-size: 0.6rem;
				letter-spacing: 0.1em;
			}

		#nav {
			padding: 0.7em 0.5em;
		}

			#nav ul {
				gap: 0.2em;
			}

			#nav ul a {
				height: 2.1em;
				line-height: 2.1em;
				padding: 0 0.9em;
				font-size: 0.76rem;
			}

		#main {
			padding-top: 3.6em;
		}

		#main > .main {
			padding: 3em 1.5em;
		}

		#main > #outputs {
			padding: 3em 1.5em;
		}

		header.major {
			margin-bottom: 2.2em;
		}

		header.major h2 {
			font-size: 1.45rem;
		}

		header.major .section-sub {
			font-size: 0.84rem;
		}

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

			.workflow .step {
				padding: 1.3em 1.2em;
			}

		.gates {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-align-items: stretch;
			-webkit-align-items: stretch;
			-ms-align-items: stretch;
			align-items: stretch;
		}

			.gates li {
				-moz-justify-content: center;
				-webkit-justify-content: center;
				-ms-justify-content: center;
				justify-content: center;
				font-size: 0.68rem;
			}

		.spotlight .content h3 {
			font-size: 1.28rem;
		}

		.spotlight .content p {
			font-size: 0.82rem;
		}

		.frame .frame-bar span {
			font-size: 0.6rem;
		}

		.output-card figcaption {
			padding: 1em 1.1em 1.2em 1.1em;
		}

		.extras {
			gap: 0.5em;
		}

			.extras li {
				font-size: 0.66rem;
			}

		#footer {
			padding: 3.5em 1.5em 3em 1.5em;
		}

	}

	@media screen and (max-width: 480px) {

		#nav ul a {
			padding: 0 0.7em;
			font-size: 0.72rem;
		}

		#header .lede {
			white-space: normal;
		}

		#header .version {
			font-size: calc(0.6rem + 2px);
			letter-spacing: 0.08em;
		}

		#header .statline {
			gap: 1.2em;
		}

			#header .statline span {
				font-size: 0.6rem;
			}

		#header .window-bar span {
			display: none;
		}

		#main > .main {
			padding: 2.6em 1.1em;
		}

		#main > #outputs {
			padding: 2.6em 1.1em;
		}

		.frame .frame-bar span {
			display: none;
		}

	}

	@media (prefers-reduced-motion: reduce) {

		html {
			scroll-behavior: auto;
		}

		*,
		*:before,
		*:after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}

	}