.product-overview
{
	position: relative;
	isolation: isolate;
	background: #09090B;
}

.product-overview > .grass-hero-media
{
	z-index: -1;
}

.grass-hero
{
	min-height: 0;
}

.package-page code
{
	overflow-wrap: anywhere;
}

.grass-hero-scrim
{
	z-index: 0;
	background-color: rgba(9, 9, 11, 0.16);
	background-image: linear-gradient(90deg, rgba(9, 9, 11, 0.96), rgba(9, 9, 11, 0.88) 42%, rgba(9, 9, 11, 0.5) 68%, rgba(9, 9, 11, 0.08)) !important;
	pointer-events: none;
}

.grass-hero-inner
{
	min-height: 0;
	padding: 26px 0 32px;
	gap: 26px;
}

.grass-hero-copy
{
	max-width: 780px;
	margin-top: auto;
}

.grass-hero h1,
.swap-hero h1
{
	max-width: 17ch;
	font-size: clamp(2.8rem, 4.8vw, 5.1rem);
	line-height: 1.02;
	letter-spacing: -0.04em;
}

.grass-label-row,
.swap-label-row
{
	margin-bottom: 16px;
}

.grass-hero-copy > p:not(.grass-release-note):not(.package-marketplaces),
.swap-hero-copy > p:not(.swap-release-note):not(.package-marketplaces)
{
	max-width: 660px;
	margin-top: 20px;
	color: #DDE3D7;
	font-size: 1rem;
	line-height: 1.65;
}

.grass-hero-actions,
.swap-hero-actions
{
	margin-top: 24px;
}

.package-page :is(.grass-hero-copy, .swap-hero-copy) > .package-marketplaces
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 16px 0 0;
	color: #BDC7B6;
	font-size: 0.78rem;
	line-height: 1.5;
}

.package-page .package-marketplaces span
{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.package-page .package-marketplaces strong
{
	color: #EDF2E7;
	font-weight: 650;
}

.grass-release-note,
.swap-release-note
{
	margin-top: 10px;
	color: #B1BCA9;
	font-size: 0.76rem;
}

.grass-proof,
.swap-proof
{
	position: relative;
	background: #101012;
}

.grass-proof li,
.swap-proof li
{
	padding: 18px 16px;
}

.grass-proof strong,
.swap-proof strong
{
	color: #B1BBAA;
}

.grass-proof > p
{
	color: #AAB4A4;
	padding-bottom: 14px;
}

.swap-hero-inner
{
	padding: 26px 0 36px;
}

.swap-hero-grid
{
	grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
	gap: 40px;
	margin-top: 32px;
}

.swap-hero h1
{
	font-size: clamp(2.5rem, 4.1vw, 4.5rem);
}

@media (min-width: 781px)
{
	.product-overview
	{
		display: flex;
		flex-direction: column;
		min-height: calc(100svh - var(--nav-h));
	}

	.product-overview > .grass-hero
	{
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;
		min-height: 0;
	}

	.product-overview > .grass-hero > .grass-hero-inner
	{
		flex: 1 1 auto;
		min-height: 0;
	}

	.product-overview .grass-hero-copy
	{
		margin-block: auto;
		transform: translateY(-18px);
	}
}

@media (min-width: 781px) and (max-height: 760px)
{
	.grass-hero-inner { padding-top: 20px; padding-bottom: 24px; gap: 22px; }
	.grass-hero h1 { font-size: clamp(2.7rem, 4.3vw, 4.3rem); }
	.grass-hero-copy > p:not(.grass-release-note):not(.package-marketplaces) { margin-top: 16px; }
	.grass-hero-actions { margin-top: 18px; }
	.product-overview .grass-hero-copy { transform: translateY(-10px); }
}

@media (max-width: 900px)
{
	.swap-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.swap-interface-illustration { width: 100%; }
}

@media (max-width: 780px)
{
	.product-overview { display: flex; flex-direction: column; }
	.product-overview > .grass-hero-media { position: relative; order: 3; z-index: 0; height: auto; aspect-ratio: 16 / 9; }
	.product-overview > .grass-hero-media img { filter: saturate(0.9) contrast(1.03); }
	.product-overview > .grass-hero { order: 1; }
	.product-overview > .grass-proof { order: 2; }
	.grass-hero-inner, .swap-hero-inner { width: calc(100% - 40px); min-height: 0; padding: 22px 0 28px; gap: 30px; }
	.grass-hero-copy { margin-top: 0; }
	.grass-hero h1, .swap-hero h1 { font-size: clamp(2.5rem, 9.6vw, 4rem); line-height: 1.04; }
	.grass-hero-scrim { display: none; }
	.grass-hero-actions, .swap-hero-actions { flex-direction: row; align-items: stretch; }
	.grass-hero-actions .site-button, .swap-hero-actions .site-button { width: auto; flex: 1 1 auto; min-height: 46px; }
	.grass-proof, .swap-proof { padding: 0 20px; }
	.grass-proof ul, .swap-proof ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grass-proof li, .swap-proof li { padding: 16px 12px; border-bottom: 1px solid var(--surface-border); }
	.grass-proof li:nth-child(odd), .swap-proof li:nth-child(odd) { border-left: 1px solid var(--surface-border); }
	.grass-proof li:nth-child(even), .swap-proof li:nth-child(even) { border-left: 0; }
	.grass-proof > p { padding: 12px 0 16px; }
}

@media (prefers-reduced-motion: reduce)
{
	.package-page .site-button { transition: none; }
}

.product-demo
{
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding-top: 48px;
	padding-bottom: 48px;
}

.product-demo h2
{
	font: 700 clamp(28px, 3vw, 42px)/1.15 var(--display-font);
	margin: 12px 0 20px;
}

.product-demo p
{
	color: var(--text-soft);
	line-height: 1.7;
}

.product-demo video
{
	width: 100%;
	height: auto;
	border: 1px solid var(--surface-border);
	background: #09090B;
}

.product-demo summary
{
	cursor: pointer;
	min-height: 44px;
	padding: 10px 0;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.grass-release-note a, .swap-release-note a
{
	color: var(--text-main);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 760px)
{
	.product-demo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}