/* Homepage styles: carousel, capabilities, use cases, FAQs and table examples. */

/* Home Video Carousel */
#home-featured-video {
	margin-bottom: .75em;
}

#home-video-carousel {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	align-items: center;
	gap: .6em;
	max-width: 1100px;
	margin: 0 auto 2em;
}

#home-video-thumbnails {
	display: flex;
	gap: 1em;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	padding: 4px;
}

#home-video-thumbnails::-webkit-scrollbar {
	display: none;
}

#home-video-carousel .home-video-choice {
	box-sizing: border-box;
	flex: 0 0 calc((100% - 2em) / 3);
	min-width: 0;
	padding: 0;
	border: 2px solid #d4dfd4;
	border-radius: .5em;
	background: #fff;
	color: #364151;
	font: inherit;
	text-align: left;
	white-space: normal;
	cursor: pointer;
	overflow: hidden;
	scroll-snap-align: start;
}

#home-video-carousel .home-video-choice[aria-pressed="true"],
#home-video-carousel .home-video-choice:hover {
	border-color: var(--darty-light-blue);
}

#home-video-carousel .home-video-choice[aria-pressed="true"] {
	box-shadow: inset 0 -3px var(--darty-light-blue) !important;
}

#home-video-carousel .home-video-choice img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

#home-video-carousel .home-video-choice span {
	display: block;
	padding: .65em;
	font-size: .85em;
	font-weight: 600;
	line-height: 1.4;
}

#home-video-carousel .home-video-arrow {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: .25em;
	background: transparent;
	box-shadow: none;
	color: var(--darty-light-blue);
	cursor: pointer;
}

#home-video-carousel .home-video-arrow::before {
	content: "";
	display: block;
	width: 21px;
	height: 28px;
	background-color: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

#home-video-carousel .home-video-arrow[data-video-step="-1"]::before {
	transform: rotate(180deg);
}

#home-video-carousel .home-video-arrow:not(:disabled):hover,
#home-video-carousel .home-video-arrow:not(:disabled):focus-visible {
	color: var(--darty-light-blue);
}

#home-video-carousel .home-video-arrow:disabled {
	opacity: .35;
	cursor: default;
}

#home-video-carousel button:focus-visible {
	outline: 3px solid var(--darty-light-blue);
	outline-offset: 2px;
}

#home-video-status {
	grid-column: 1 / -1;
	margin: 0;
	font-size: .8em;
	text-align: center;
}

@media (max-width: 800px) {
	#home-video-carousel .home-video-choice {
		flex-basis: calc((100% - 1em) / 2);
	}
}

@media (max-width: 480px) {
	#home-video-carousel {
		gap: .4em;
	}

	#home-video-carousel .home-video-choice {
		flex-basis: 100%;
	}
}

/* Home Feature Cards */
/* One capabilities overview, followed by practical use cases. */
#home-capabilities {
	max-width: calc(1200px + 2em);
	margin: 3em auto;
}

/* Match the 3em gap after the capabilities overview; all section titles use h2. */
#native-tables,
#home-methods {
	margin-block-start: 3em;
}

#native-tables-heading,
#home-methods-heading {
	margin-block-start: 0;
}

#home-capabilities .home-capabilities-intro {
	max-width: 75ch;
	margin: 0 auto 1.5em;
	text-align: center;
	line-height: 1.6;
}

#home-capabilities dl {
	margin: 0;
}

#home-capabilities .home-capability {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	gap: 1em 2em;
	padding: 1.25em 0;
	border-top: 1px solid var(--ast-global-color-6, #a3a3a3);
}

#home-capabilities dt {
	font-weight: 700;
	line-height: 1.5;
}

#home-capabilities dd {
	margin: 0;
	line-height: 1.6;
}

/* Numbered homepage use cases: image, heading strip, then editable copy. */
#home-use-cases {
	/* 800px assets provide 2× detail up to 400 CSS pixels per card. */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1em;
	max-width: calc(1200px + 2em);
	margin-inline: auto;
}

#home-use-cases > .feature-block {
	box-sizing: border-box;
	min-width: 0;
	max-width: 400px;
	padding: 0;
}

@media (max-width: 960px) {
	#home-use-cases {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: calc(800px + 1em);
	}
}

@media (max-width: 600px) {
	#home-use-cases {
		grid-template-columns: minmax(0, 1fr);
		max-width: 400px;
	}

	#home-capabilities .home-capability {
		grid-template-columns: minmax(0, 1fr);
		gap: .4em;
	}
}

#home-use-cases .feature-image {
	flex-shrink: 0;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	margin: 0;
}

#home-use-cases .feature-illustration {
	object-fit: contain;
	background-color: #535353;
}

#home-use-cases .home-card-title {
	margin: 0;
	padding: .35em .65em;
	background: #444444;
	background-clip: border-box;
	-webkit-background-clip: border-box;
	color: #fff;
	font-family: inherit;
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

#home-use-cases .home-card-title::selection {
	background-color: #fff;
	color: #444444;
}

#home-use-cases .home-card-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 1em;
	min-width: 0;
	padding: 1.25em;
	overflow-wrap: anywhere;
}

#home-use-cases .home-card-content p,
#home-use-cases .price-card-features {
	margin: 0;
}

#home-use-cases .price-card-features {
	min-width: 0;
}

#home-use-cases .l25-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5em 1em;
	margin-top: auto;
	padding-top: .25em;
}

#home-use-cases .l25-links a {
	padding: .25em 0;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .15em;
}

#home-use-cases .l25-links a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Homepage download buttons. GitHub release assets supply attachment
   headers, so cross-origin downloads work without fetching whole ZIPs into RAM. */
#home-use-cases .l25-links .download-button {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .5em;
	border: none;
	border-radius: 4px;
	background-color: #000;
	color: #fff;
	font-size: 1rem;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .2s ease-in-out;
}

#home-use-cases .l25-links .download-button:hover,
#home-use-cases .l25-links .download-button:focus-visible {
	background-color: #333;
	color: #fff;
}

#home-use-cases .l25-links .download-button:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 3px;
}

#home-use-cases .l25-links .download-button:active {
	background-color: #111;
}

#home-use-cases .download-button .link-icon {
	/* Font Awesome Free 6.7.2 by @fontawesome — https://fontawesome.com
	   Icons: CC BY 4.0 — https://fontawesome.com/license/free
	   Copyright 2024 Fonticons, Inc.
	   CSS masks preserve icon colors without triggering Live Server SVG injection. */
	--download-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M0%2064C0%2028.7%2028.7%200%2064%200L224%200l0%20128c0%2017.7%2014.3%2032%2032%2032l128%200%200%20144-208%200c-35.3%200-64%2028.7-64%2064l0%20144-48%200c-35.3%200-64-28.7-64-64L0%2064zm384%2064l-128%200L256%200%20384%20128zM176%20352l32%200c30.9%200%2056%2025.1%2056%2056s-25.1%2056-56%2056l-16%200%200%2032c0%208.8-7.2%2016-16%2016s-16-7.2-16-16l0-48%200-80c0-8.8%207.2-16%2016-16zm32%2080c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-16%200%200%2048%2016%200zm96-80l32%200c26.5%200%2048%2021.5%2048%2048l0%2064c0%2026.5-21.5%2048-48%2048l-32%200c-8.8%200-16-7.2-16-16l0-128c0-8.8%207.2-16%2016-16zm32%20128c8.8%200%2016-7.2%2016-16l0-64c0-8.8-7.2-16-16-16l-16%200%200%2096%2016%200zm80-112c0-8.8%207.2-16%2016-16l48%200c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016l-32%200%200%2032%2032%200c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016l-32%200%200%2048c0%208.8-7.2%2016-16%2016s-16-7.2-16-16l0-64%200-64z%22%2F%3E%3C%2Fsvg%3E");
	display: inline-block;
	background-color: currentColor;
	-webkit-mask: var(--download-icon) center / contain no-repeat;
	mask: var(--download-icon) center / contain no-repeat;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
}

#home-use-cases .download-button .link-icon[data-icon="file-zipper"] {
	--download-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M64%200C28.7%200%200%2028.7%200%2064L0%20448c0%2035.3%2028.7%2064%2064%2064l256%200c35.3%200%2064-28.7%2064-64l0-288-128%200c-17.7%200-32-14.3-32-32L224%200%2064%200zM256%200l0%20128%20128%200L256%200zM96%2048c0-8.8%207.2-16%2016-16l32%200c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16zm0%2064c0-8.8%207.2-16%2016-16l32%200c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16zm0%2064c0-8.8%207.2-16%2016-16l32%200c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016l-32%200c-8.8%200-16-7.2-16-16zm-6.3%2071.8c3.7-14%2016.4-23.8%2030.9-23.8l14.8%200c14.5%200%2027.2%209.7%2030.9%2023.8l23.5%2088.2c1.4%205.4%202.1%2010.9%202.1%2016.4c0%2035.2-28.8%2063.7-64%2063.7s-64-28.5-64-63.7c0-5.5%20.7-11.1%202.1-16.4l23.5-88.2zM112%20336c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016l32%200c8.8%200%2016-7.2%2016-16s-7.2-16-16-16l-32%200z%22%2F%3E%3C%2Fsvg%3E");
}
#home-faqs {
	margin-block-start: 3em;
}

/* Keep each answer inside its native disclosure for keyboard and screen-reader access. */
#home-faqs .accordion__details {
	overflow: visible;
}

#home-faqs .accordion__content {
	max-height: none;
	opacity: 1;
	transition: none;
}

#home-faqs details:not([open]) > .accordion__content {
	display: none;
}

#home-faqs .accordion__summary:focus-visible {
	outline: 3px solid var(--darty-light-blue, #68b8ff);
	outline-offset: 3px;
	border-radius: .75em;
}

#home-faqs .accordion__content-text-content > :last-child {
	margin-bottom: 0;
}

#home-faqs .accordion__content-image {
	flex: 0 1 400px;
	width: 100%;
	max-width: 400px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .5em;
}

#home-faqs .accordion__content-image img {
	width: 100%;
	height: auto;
	padding: 0;
	border-radius: .5em;
}

#home-faqs figcaption {
	font-size: .875em;
	line-height: 1.5;
}

@media (max-width: 1024px) {
	#home-faqs .accordion__content-image {
		flex-basis: auto;
		align-self: center;
	}
}

/* Native Table Examples */
/* Native table examples: keep the artwork palette in both site themes. */
#native-tables {
	box-sizing: border-box;
	width: 100%;
	max-width: 70rem;
	margin-inline: auto;
	container-type: inline-size;
	--table-ink: #1f3f3a;
	--table-sage: #c1d1b6;
	--table-paper: #f3f4ee;
	--table-rule: #c7cac3;
	--sticker-paper: #fefbf2;
	--sticker-ink: #395742;
}

#native-tables .feature-block {
	min-width: 0;
}

#native-tables .home-tables-intro {
	column-count: 2;
	column-gap: 1.5em;
	column-fill: balance;
}

#native-tables .home-tables-intro > div {
	break-inside: avoid;
}

#native-tables .home-tables-intro ul {
	min-width: 0;
	margin: 0 0 1em;
	padding-left: 1.5em;
}

#native-tables .home-tables-intro li {
	break-inside: avoid;
	margin-bottom: .5em;
}

#native-tables figure {
	min-width: 0;
	margin: 1em 0 0;
}

#native-tables figcaption {
	font-size: .9em;
}

#native-tables .native-table-frame,
#native-tables .native-sticker-frame {
	box-sizing: border-box;
	max-width: 100%;
	margin-bottom: .5em !important;
	padding: .75em;
	border: 1px solid #555;
	border-radius: .5em;
	background: #f9f6ef;
}

#native-tables .native-table-frame:focus-visible {
	outline: 3px solid var(--table-ink);
	outline-offset: 3px;
}

#native-tables .native-comparison-table {
	width: 100%;
	min-width: 620px;
	max-width: none !important;
	margin: 0;
	border: 1px solid var(--table-rule);
	border-collapse: collapse;
	table-layout: fixed;
	color: var(--table-ink);
	font: clamp(.8125rem, 1.3cqi, 1rem)/1.3 Arial, Helvetica, sans-serif;
}

#native-tables .native-comparison-table th,
#native-tables .native-comparison-table td {
	padding: .5em .65em;
	border: 1px solid var(--table-rule);
	text-align: left;
	vertical-align: middle;
}

#native-tables .native-comparison-table thead th {
	padding-block: .8em;
	background: var(--table-ink);
	color: #fff;
	font-weight: 700;
}

#native-tables .native-comparison-table tr > :first-child {
	width: 26%;
}

#native-tables .native-comparison-table tbody tr:nth-child(odd) {
	background: var(--table-paper);
}

#native-tables .native-comparison-table tbody tr:nth-child(even) {
	background: #fff;
}

#native-tables .native-comparison-table tbody tr > :nth-child(2) {
	background: var(--table-sage);
}

#native-tables .native-comparison-table tbody tr:last-child {
	font-size: 1.15em;
}

#native-tables .native-sticker-frame {
	padding: .25em .5em;
	background: var(--sticker-paper);
}

#native-tables .native-sticker-table {
	width: 100%;
	margin: 0;
	border: 1px solid #272722;
	border-collapse: collapse;
	table-layout: fixed;
	background: var(--sticker-paper);
	color: var(--sticker-ink);
	font: clamp(.875rem, 1.65cqi, 1.125rem)/1.2 Arial, Helvetica, sans-serif;
}

#native-tables .native-sticker-table td {
	padding: clamp(.65rem, 2cqi, 1.25rem);
	border: 1px solid #272722;
	vertical-align: middle;
}

#native-tables .native-sticker {
	display: grid;
	grid-template-columns: clamp(2.5rem, 6cqi, 3.5rem) minmax(0, 1fr);
	align-items: center;
	gap: clamp(.65rem, 2.5cqi, 1.25rem);
	min-height: clamp(4.5rem, 10cqi, 6rem);
}

#native-tables .native-sticker img {
	display: block;
	width: 100%;
	height: auto;
}

#native-tables .native-sticker span,
#native-tables .native-sticker strong {
	display: block;
}

@media (max-width: 720px) {
	#native-tables .home-tables-intro {
		column-count: 1;
	}

	#native-tables .native-sticker-table tbody,
	#native-tables .native-sticker-table tr,
	#native-tables .native-sticker-table td {
		display: block;
	}

	#native-tables .native-sticker-table td {
		border: 0;
		border-bottom: 1px solid #272722;
	}

	#native-tables .native-sticker-table td:last-child {
		border-bottom: 0;
	}
}