html {
	-webkit-text-size-adjust: 100%;
	line-height: 1.15
}

body {
	margin: 0
}

main {
	display: block
}

h1 {
	font-size: 2em;
	margin: .67em 0
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible
}

pre {
	font-family: monospace, monospace;
	font-size: 1em
}

a {
	background-color: transparent
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted
}

b,
strong {
	font-weight: bolder
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sub {
	bottom: -.25em
}

sup {
	top: -.5em
}

img {
	border-style: none
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

button,
input {
	overflow: visible
}

button,
select {
	text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
	-webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
	border-style: none;
	padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
	outline: 1px dotted ButtonText
}

fieldset {
	padding: .35em .75em .625em
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal
}

progress {
	vertical-align: baseline
}

textarea {
	overflow: auto
}

[type=checkbox],
[type=radio] {
	box-sizing: border-box;
	padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

details {
	display: block
}

summary {
	display: list-item
}

[hidden],
template {
	display: none
}

button:is(:focus-visible) {
	outline: 5px auto Highlight;
	outline: 5px auto -webkit-focus-ring-color
}

.block-wrap,
.float-wrap__inner {
	padding-bottom: calc(var(--def) + var(--mod-b, 0px));
	padding-top: calc(var(--def) + var(--mod-t, 0px));
	position: relative
}

.app-link {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 1rem;
	box-shadow: 0 .25rem 1rem 0 rgba(2, 14, 29, .08);
	overflow: hidden;
	transition: all .2s
}

.app-link:is(:hover, :focus) {
	border-color: var(--plum-200);
	box-shadow: 0 0 1rem 0 rgba(2, 14, 29, .12);
	color: var(--text-color)
}

.wrapper {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wrap-width);
	width: 90%
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--bg-body);
	box-sizing: border-box;
	color: var(--color-body);
	font-family: var(--font-body);
	line-height: var(--line-height-body);
	scroll-behavior: smooth
}

body,
html {
	height: 100%
}

body {
	display: flex;
	flex-direction: column;
	font-size: clamp(1rem, 2.5vw, 1.125rem);
	overflow-x: hidden
}

*,
:after,
:before {
	box-sizing: inherit;
	letter-spacing: .02em
}

iframe,
img,
svg {
	display: block;
	height: auto;
	max-width: 100%
}

:root {
	--gold-100: #fff9eb;
	--gold-200: #ffd780;
	--gold-300: #e7bb55;
	--gold-400: #c99826;
	--gold-500: #8b7237;
	--teal-100: #eaf3f6;
	--teal-200: #baf0f2;
	--teal-300: #9ceaec;
	--teal-400: #63adc5;
	--teal-500: #207d9d;
	--plum-100: #f0ebfa;
	--plum-200: #cfc0e8;
	--plum-300: #9977d4;
	--plum-400: #7b51c2;
	--plum-500: #5b2fa7;
	--grey-100: #f9f9fb;
	--grey-200: #edeff2;
	--grey-300: #e5e7eb;
	--grey-400: #dcdee4;
	--grey-500: #b3b7c2;
	--grey-600: #8a8f9e;
	--grey-700: #595e6e;
	--grey-800: #323a4d;
	--off-white: #f2f2f2;
	--off-black: #16191d;
	--off-black-lighter: #1b1e23;
	--border: var(--grey-200);
	--success: #62b51f;
	--warning: #e4be4c;
	--error: #c82727;
	--bg-body: #fff;
	--line-height-body: 1.48;
	--text-color: var(--off-black);
	--link-color: var(--off-black);
	--link-color-hover: var(--gold-400);
	--font-body: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-title: "Maven Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--wrap-width: 90rem;
	--wrap-half: calc(var(--wrap-width)/2);
	--wrap-third: calc(var(--wrap-width)/3);
	--wrap-quarter: calc(var(--wrap-width)/4);
	--gap16: 1rem;
	--gap24: clamp(1rem, 3vw, 1.5rem);
	--gap32: clamp(1.5rem, 4vw, 2rem);
	--gap40: clamp(2rem, 4vw, 2.5rem);
	--gap48: clamp(2rem, 6vw, 3rem);
	--gap56: clamp(2.5rem, 8vw, 3.5rem);
	--gap72: clamp(3rem, 8vw, 4.5rem);
	--gap80: clamp(3.25rem, 8vw, 5rem);
	--gap96: clamp(3.5rem, 8vw, 6rem);
	--gap144: clamp(4.5rem, 8vw, 9rem);
	--gap192: clamp(6rem, 8vw, 12rem);
	--gap240: clamp(6.5rem, 16vw, 15rem);
	--rad-sm: 0.5rem;
	--rad-md: 1rem;
	--rad-lg: 2rem;
	--transition: cubic-bezier(0.27, 0.22, 0.44, 1.03);
	--header-height: 6rem;
	--input-height: clamp(2.5rem, 8vw, 3rem)
}

:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
	font-family: var(--font-title);
	font-weight: 900;
	line-height: 1.1;
	margin: 1.2em 0 .8em
}

.h1,
h1 {
	font-size: clamp(2.125rem, 4vw, 3rem)
}

.h2,
h2 {
	font-size: clamp(1.75rem, 4vw, 2.125rem)
}

.h3,
h3 {
	font-size: clamp(1.5rem, 4vw, 1.75rem)
}

.h4,
h4 {
	font-size: clamp(1.25rem, 4vw, 1.5rem)
}

.h5,
h5 {
	font-size: clamp(1.125rem, 4vw, 1.25rem)
}

.h6,
h6 {
	font-size: clamp(1rem, 4vw, 1.125rem)
}

:is(p, ul, ol, figure, blockquote) {
	margin: 1.48em 0
}

:is(ul, ol) {
	padding: 0 0 0 1.48em
}

a {
	color: var(--link-color);
	font-weight: 700;
	text-decoration-thickness: .125em;
	text-underline-offset: 10%;
	transition: all .2s
}

a:where(:hover, :focus) {
	color: var(--link-color-hover);
	text-decoration-thickness: .1875em;
	text-underline-offset: 15%
}

strong {
	font-weight: 700
}

address {
	font-style: normal
}

figcaption {
	font: normal 700 .875rem/1.2 var(--font-title);
	margin: var(--gap32) 0 0;
	text-transform: uppercase
}

blockquote {
	border: 1px solid var(--border);
	border-radius: .5rem;
	padding: var(--gap24) var(--gap24) var(--gap24) var(--gap48);
	position: relative
}

blockquote .emoji {
	left: clamp(.5rem, 2vw, 1rem);
	position: absolute
}

blockquote code.hljs {
	font-size: .875em
}

blockquote p {
	font-size: .875rem;
	font-style: unset
}

.overlap-top {
	--mod-t: var(--gap48)
}

.overlap-bottom {
	--mod-b: var(--gap48)
}

.flatten-top {
	--mod-t: calc(var(--def)*-1)
}

.flatten-bottom {
	--mod-b: calc(var(--def)*-1)
}

.mt-0,
.my-0 {
	margin-top: 0
}

.mt-32,
.my-32 {
	margin-top: var(--gap32)
}

.mt-48,
.my-48 {
	margin-top: var(--gap48)
}

.mt-72,
.my-72 {
	margin-top: var(--gap72)
}

.mt-96 {
	margin-top: var(--gap96)
}

.mb-0,
.my-0 {
	margin-bottom: 0
}

.mb-24 {
	margin-bottom: var(--gap24)
}

.mb-32,
.my-32 {
	margin-bottom: var(--gap32)
}

.mb-48,
.my-48 {
	margin-bottom: var(--gap48)
}

.mb-72,
.my-72 {
	margin-bottom: var(--gap72)
}

.mb-96 {
	margin-bottom: var(--gap96)
}

.mb-144 {
	margin-bottom: var(--gap144)
}

.ml-0,
.mx-0 {
	margin-left: 0
}

.ml-48,
.mx-48 {
	margin-left: var(--gap48)
}

.ml-72 {
	margin-left: var(--gap72)
}

.mr-0,
.mx-0 {
	margin-right: 0
}

.mr-48,
.mx-48 {
	margin-right: var(--gap48)
}

.mr-72 {
	margin-right: var(--gap72)
}

.mx-auto {
	margin-inline: auto
}

.pt-32 {
	padding-top: var(--gap32)
}

.pt-48,
.py-48 {
	padding-top: var(--gap48)
}

.pb-32 {
	padding-bottom: var(--gap32)
}

.pb-48,
.py-48 {
	padding-bottom: var(--gap48)
}

.pl-32,
.px-32 {
	padding-left: var(--gap32)
}

.pl-48,
.px-48 {
	padding-left: var(--gap48)
}

.pr-32,
.px-32 {
	padding-right: var(--gap32)
}

.pr-48,
.px-48 {
	padding-right: var(--gap48)
}

.br {
	overflow: hidden
}

.br-8 {
	border-radius: var(--rad-sm)
}

.text-c {
	text-align: center
}

.wrap-h {
	margin-inline: auto;
	max-width: var(--wrap-half)
}

.wrap-2-3 {
	max-width: calc(var(--wrap-width)/4*3)
}

.sdw-lt {
	box-shadow: 1.25rem 0 3.75rem hsla(0, 0%, 100%, .1)
}

.float-wrap__inner,
.sdw-reg {
	box-shadow: 1.25rem 0 3.75rem rgba(39, 51, 63, .05)
}

.sdw-hvy {
	box-shadow: 0 .75rem 1.6rem rgba(0, 0, 0, .25)
}

:where(.sdw-sm, .sdw-md, .sdw-reg, .float-wrap__inner, .sdw-hvy) {
	background: #fff
}

button {
	background: 0;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0;
	transition: all .2s
}

.button,
.cta_button,
.hs-button {
	--btn-bg: var(--gold-300);
	--btn-bg-hover: var(--gold-200);
	--btn-color: var(--off-black);
	--btn-color-hover: var(--btn-color);
	--btn-border: var(--btn-bg);
	--btn-border-hover: var(--btn-bg);
	--btn-font-size: 0.875rem;
	--btn-height: var(--input-height);
	align-items: center;
	background-image: linear-gradient(90deg, var(--btn-bg) 0, var(--btn-bg) 48%, var(--btn-bg-hover) 52%, var(--btn-bg-hover) 100%);
	background-size: 210%;
	border: 2px solid var(--btn-border);
	border-radius: var(--rad-sm);
	color: var(--btn-color);
	cursor: pointer;
	display: inline-flex;
	font: 900 var(--btn-font-size)/1 var(--font-title);
	min-height: var(--btn-height);
	padding: 0 var(--gap32);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: all .2s, background-position-x .15s var(--transition), color .1s linear;
	will-change: background-position-x
}

.button:is(:hover, :focus),
.cta_button:is(:hover, :focus),
.hs-button:is(:hover, :focus) {
	background-position-x: -92%;
	color: var(--btn-color-hover)
}

.button--small,
.cta_button--small,
.hs-button--small {
	--btn-height: clamp(2.5rem, 5vw, 3rem);
	--btn-font-size: clamp(0.75rem, 3vw, 0.875rem);
	padding: 0 var(--gap24)
}

.button--mini,
.cta_button--mini,
.hs-button--mini {
	--btn-height: 2.5rem;
	--btn-font-size: 0.75rem;
	padding: 0 var(--gap16)
}

.button--ghost,
.cta_button--ghost,
.hs-button--ghost {
	--btn-bg: transparent;
	--btn-border: var(--gold-300)
}

.button--light,
.cta_button--light,
.hs-button--light {
	--btn-color: #fff;
	--btn-color-hover: var(--off-black)
}

.button--plain,
.cta_button--plain,
.hs-button--plain {
	--btn-bg: none;
	--btn-border: none;
	--btn-color-hover: var(--gold-400);
	border-radius: 0;
	min-height: 0;
	padding: 0
}

label,
legend {
	display: block;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	margin: 0 0 .5rem
}

label:empty,
legend:empty {
	margin: 0 !important
}

label .required,
legend .required {
	color: var(--error);
	margin-left: .5rem
}

:is(input:not([type=submit]), textarea, select) {
	--input-bg: #fff;
	--input-border: var(--grey-400);
	--input-focus: var(--grey-200);
	align-items: center;
	background-color: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: .5rem;
	color: var(--text-color);
	display: flex;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	height: var(--input-height);
	margin: 0;
	outline: 0;
	transition: all .15s var(--transition);
	width: 100%
}

:is(input:not([type=submit]), textarea, select):focus {
	background-color: var(--input-focus)
}

:is(input:not([type=submit]), textarea, select)::placeholder {
	all: unset;
	color: var(--grey-600)
}

input:not([type=submit]) {
	padding: 0 1.25rem
}

input[type=file] {
	padding: .4375rem .625rem 0
}

textarea {
	align-items: flex-start;
	min-height: 10rem;
	padding: 1rem 1.25rem
}

select {
	appearance: none;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" viewBox="0 0 14.18 8.49"><polygon points="14.18 1.41 12.77 0 7.09 5.68 1.41 0 0 1.41 7.07 8.48 7.09 8.47 7.11 8.48 14.18 1.41"/></svg>') right 1rem top 50%/.5rem no-repeat var(--input-bg);
	padding: 0 2rem 0 1.25rem
}

select:invalid {
	color: rgba(0, 0, 0, .5)
}

select.error {
	border: 1px solid var(--error)
}

select option {
	color: red;
	opacity: 1
}

.ext-link {
	align-items: center;
	display: inline-flex;
	font-weight: 400;
	gap: .8rem
}

.ext-link svg {
	transition: all .2s;
	width: .8rem
}

.ext-link svg path {
	fill: currentColor
}

.ext-link:is(:hover, :focus) {
	color: var(--plum-400)
}

.collection-nav {
	display: none;
	line-height: 1;
	position: sticky;
	top: calc(var(--header-height) + var(--gap72))
}

.collection-nav__title {
	font-weight: 700;
	margin-bottom: var(--gap24)
}

.collection-nav__collection {
	list-style: none;
	margin: 0;
	padding: 0
}

.collection-nav__collection:not(:last-child) {
	border-bottom: 1px solid var(--border);
	margin-bottom: calc(var(--gap24) + .625rem);
	padding-bottom: var(--gap24)
}

.collection-nav__collection li {
	border-radius: var(--rad-sm);
	transition: all .2s
}

.collection-nav__collection li:not(:last-child) {
	margin: 0 0 .625rem
}

.collection-nav__collection li.active {
	background: var(--plum-200)
}

.collection-nav__collection li.active a {
	font-weight: 700;
	padding: .625rem;
	pointer-events: none
}

.collection-nav__collection a {
	display: block;
	font-size: .875rem;
	font-weight: 400;
	padding: .625rem 0;
	text-decoration: none
}

.collection-nav__collection a:is(:hover, :focus-visible) {
	color: var(--plum-400);
	padding-left: .25rem
}

.collection-nav__collection a:is(:focus) {
	color: var(--text-color)
}

.collection {
	font-size: .875rem
}

.collection:not(:last-child) {
	border-bottom: .1rem solid var(--border);
	margin-bottom: var(--gap40);
	padding-bottom: var(--gap40)
}

.collection__apps {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	margin-top: var(--gap40)
}

.app-link {
	font-size: .875rem;
	font-weight: 400;
	text-decoration: none
}

.app-link__upper {
	background: var(--plum-200);
	padding: 1rem var(--gap32)
}

.app-link__lower {
	padding: var(--gap24) var(--gap32)
}

.app-link__title {
	font-family: var(--font-body);
	line-height: 1
}

.app-breadcrumbs {
	line-height: 1;
	margin-bottom: var(--gap32)
}

.app-breadcrumbs__link {
	color: var(--gold-300);
	display: inline-flex;
	font-weight: 400;
	text-decoration: none
}

.app-breadcrumbs__link:is(:hover, :focus) {
	color: var(--gold-200)
}

.app-breadcrumbs__link:not(:last-child) {
	margin-right: 1rem;
	position: relative
}

.app-breadcrumbs__link:not(:last-child):after {
	color: inherit;
	content: ">";
	left: 100%;
	pointer-events: none;
	position: absolute;
	transform: translateX(75%)
}

.app-meta {
	display: grid;
	gap: var(--gap48)
}

.app-meta h2 {
	margin: 0 0 var(--gap24)
}

.app-meta ul {
	list-style: none;
	margin: 0;
	padding: 0
}

.app-meta a,
.app-meta span {
	color: var(--gold-500)
}

.code-block {
	max-width: 100%;
	overflow: hidden
}

.cart-demo {
	display: grid;
	gap: var(--gap24);
	grid-template-columns: repeat(2, 1fr);
	text-align: center
}

.cart-demo img {
	border-radius: 1rem;
	overflow: hidden
}

.cart-demo .button {
	margin: 1rem auto 0
}

.float-wrap {
	margin: calc(var(--gap48)*-1) auto !important
}

.float-wrap__inner {
	--def: var(--gap96);
	background: #fff;
	border-radius: var(--rad-lg);
	overflow: hidden;
	padding-inline: clamp(1.5rem, 8vw, 4.5rem);
	position: relative;
	z-index: 250
}

.float-wrap__inner--pad-144 {
	--def: var(--gap144)
}

.float-wrap__inner--pad-72 {
	--def: var(--gap72)
}

.float-wrap__inner--pad-48 {
	--def: var(--gap48)
}

.float-wrap__inner .wrapper {
	width: unset
}

.float-wrap .block-wrap {
	--mod-t: calc(var(--def)*-1)
}

.float-wrap .block-wrap:last-child {
	--mod-b: calc(var(--def)*-1)
}

.block-wrap {
	--def: var(--gap96)
}

.block-wrap--pad-144 {
	--def: var(--gap144)
}

.block-wrap--pad-72 {
	--def: var(--gap72)
}

.block-wrap--pad-48 {
	--def: var(--gap48)
}

.block-wrap--bg-gradient {
	background: linear-gradient(90deg, #1a1b1d 8.31%, #676b75 157.06%);
	color: #fff
}

.block-wrap--bg-dark {
	background: var(--off-black);
	color: #fff
}

.block-wrap--bg-light {
	background: var(--off-white)
}

.block-wrap--details {
	border-bottom: 1px solid var(--border)
}

.block-wrap--split {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap48)
}

.block-wrap--split:not(:last-child) {
	border-bottom: 1px solid var(--border);
	margin-bottom: var(--gap48);
	padding-bottom: var(--gap48)
}

.block-wrap--split>* {
	max-width: 100%
}

.hero {
	isolation: isolate;
	margin: 0 0 var(--gap72);
	overflow: hidden;
	padding: calc(var(--gap32) + var(--header-height)) 0 var(--gap80);
	position: relative
}

.hero__header {
	color: #fff;
	max-width: var(--wrap-half);
	text-align: center
}

.hero__search {
	margin-top: var(--gap40);
	position: relative
}

.hero__search svg {
	left: calc(var(--gap48)/2);
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1.5rem
}

.hero__search input {
	padding-left: var(--gap48)
}

.hero__bg {
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1
}

.cta-bar {
	isolation: isolate;
	position: relative
}

.cta-bar--small {
	--title-fs: clamp(1.75rem, 4vw, 2.125rem);
	--title-w: var(--wrap-third)
}

.cta-bar .wrapper {
	max-width: var(--wrap-half)
}

.cta-bar__head {
	margin: 0 auto var(--gap48)
}

.cta-bar__title {
	font-size: var(--title-fs, clamp(2.125rem, 4vw, 3rem))
}

.cta-bar img {
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1
}

.app-header {
	color: var(--off-white);
	font-size: .875rem;
	padding: calc(var(--gap48) + var(--header-height)) 0 var(--gap72)
}

.app-header--split {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--gap48)
}

.app-header a:not([class]) {
	color: inherit;
	font-weight: 600
}

.app-header__text :is(h1, p) {
	margin: 0 0 var(--gap16)
}

.app-header__text h1 {
	font-size: clamp(1.75rem, 4vw, 2.5rem)
}

.app-header img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: -1
}

.app-header__links {
	backdrop-filter: blur(8px);
	background-color: rgba(22, 25, 29, .75);
	border-radius: .5rem;
	box-shadow: var(--shdw-hvy);
	display: none;
	flex-shrink: 0;
	margin-left: auto;
	padding: var(--gap24);
	text-align: center
}

.app-header__links a {
	display: block;
	margin-inline: auto;
	width: fit-content
}

.related {
	--mod-b: var(--gap96);
	border-top: 1px solid var(--border);
	margin-top: -1px
}

.related__embeds {
	--cols: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center
}

.related__embeds>* {
	width: calc((99.9999% - 1rem*(var(--cols) - 1))/var(--cols))
}

.site-header {
	position: fixed;
	top: 0;
	transition: background-color .2s;
	width: 100%;
	z-index: 500
}

.site-header--has-bg {
	backdrop-filter: blur(8px);
	background-color: rgba(22, 25, 29, .9)
}

.site-header__inner {
	align-items: center;
	display: flex;
	gap: var(--gap24);
	height: var(--header-height);
	justify-content: space-between
}

.site-header__logo {
	align-items: flex-end;
	display: flex;
	width: 16rem
}

.site-header__logo>:first-child {
	border-right: 1px solid #fff;
	padding-right: 1rem
}

.site-header__logo>:last-child {
	border-left: 1px solid #fff;
	padding-left: 1rem
}

.site-header__aside {
	align-items: center;
	display: flex;
	gap: var(--gap32)
}

.site-header__aside__main-link {
	color: #fff;
	display: flex;
	font-family: var(--font-title);
	font-size: .875rem;
	font-weight: 500;
	text-decoration: none
}

.site-header__aside__main-link:is(:hover, :focus) {
	color: var(--gold-200)
}

.site-header__aside__main-link:is(:hover, :focus) svg path {
	fill: var(--gold-200)
}

.site-header__aside__main-link svg {
	margin-left: .5rem;
	width: .625rem
}

.site-header__aside__main-link svg path {
	transition: fill .2s
}

.site-header__aside__cta {
	display: none
}

.site-footer {
	background-color: var(--off-black-lighter);
	color: #fff;
	font-size: .875rem;
	margin-top: auto;
	padding: var(--gap48) 0
}

.site-footer .wrapper {
	flex-wrap: wrap;
	gap: var(--gap32)
}

.site-footer .wrapper,
.site-footer__copyright {
	align-items: center;
	display: flex
}

.site-footer__logo {
	height: 2rem;
	margin-right: var(--gap32);
	width: 2rem
}

.footer-nav ul {
	display: flex;
	gap: var(--gap24);
	list-style: none;
	margin: 0;
	padding: 0
}

.footer-nav a {
	color: #fff;
	font-weight: 400;
	text-decoration: none
}

.footer-nav a:is(:hover, :focus) {
	color: var(--gold-200)
}

.app-listing {
	display: grid;
	gap: var(--gap48)
}

.app-listing+.cta-bar {
	margin-top: var(--gap96)
}

.app-info {
	align-items: start;
	display: grid;
	gap: var(--gap48)
}

.app-info__block:not(:last-child) {
	border-bottom: .1rem solid var(--border);
	margin-bottom: var(--gap32);
	padding-bottom: var(--gap32)
}

code.hljs {
	border-radius: var(--rad-sm);
	color: var(--off-white);
	font-size: .875rem;
	letter-spacing: unset;
	overflow: auto;
	white-space: nowrap
}

pre code.hljs {
	overflow: auto;
	padding: var(--gap24) var(--gap32) !important;
	white-space: inherit
}

:is(:first-child) {
	margin-top: 0
}

:is(:last-child) {
	margin-bottom: 0
}

@media (min-width:768px) {
	.collection-nav {
		display: block
	}

	.app-meta {
		grid-template-columns: repeat(3, 1fr)
	}

	.app-header--split {
		flex-direction: row
	}

	.app-header__links {
		display: block
	}

	.related__embeds {
		--cols: 2
	}

	.site-header__aside__cta {
		display: block
	}

	.app-listing {
		grid-template-columns: repeat(3, 1fr);
		max-width: 1140px;
		margin: 0 auto;
	}

	.app-info {
		grid-template-columns: 1fr 2fr
	}
}

@media (min-width:1024px) {
	
	.block-wrap--split {
		flex-wrap: unset
	}

	.block-wrap--split>* {
		width: 50%
	}

	.related__embeds {
		--cols: 3
	}
}