/* Home page ---------------------------------------------------------------- */

/* Hero: the twilight town with Freya's two heroes, dissolving into the night. */
.fy-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(640px, 100svh, 960px);
	padding: calc(var(--header-h) + 2rem) 0 7.5rem;
	overflow: hidden;
}
/* The art fades out at the bottom into the page behind it (the site background art on wide screens, the night
   sky elsewhere), so there is no edge where the hero ends. */
.fy-hero__art {
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.fy-hero__art picture, .fy-hero__img { display: block; width: 100%; height: 100%; }
.fy-hero__img { object-fit: cover; object-position: 50% 30%; }
.fy-hero__art::before {
	/* soft spotlight behind the text so it stays readable on the bright sky */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(46% 52% at 50% 56%, rgba(16, 11, 38, .7) 0%, rgba(16, 11, 38, .35) 52%, rgba(16, 11, 38, 0) 78%),
		linear-gradient(180deg, rgba(12, 8, 30, .45) 0%, rgba(12, 8, 30, 0) 22%);
}
.fy-hero__art::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 34%;
	z-index: 1;
	background: linear-gradient(180deg, rgba(16, 11, 38, 0) 0%, rgba(16, 11, 38, .55) 100%);
}

/* Wide screens: the hero's own art (with its own two heroes) fades out over a night base before the site background
   shows, so its girl and knight do not cross-fade into the background's girl and knight (two sword hilts). */
@media (min-width: 1100px) {
	.fy-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -2;
		background: var(--bg);
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
	}
	.fy-hero__art {
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 84%);
		mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 84%);
	}
	/* The night runs on past the stats bar before the site background shows. The background is fixed, so with the
	   night ending at the hero's own bottom, the background girl's face rose into view under the hero's girl while
	   scrolling (2048 and 2560 px). This layer lies under the hero, the stats bar and the steps, over the background. */
	.fy-start::before {
		content: "";
		position: absolute;
		top: -420px;
		left: 0;
		right: 0;
		height: 720px;
		z-index: -1;
		pointer-events: none;
		background: linear-gradient(180deg, var(--bg) 0, var(--bg) 480px, rgba(16, 11, 38, .9) 528px, rgba(16, 11, 38, .65) 576px, rgba(16, 11, 38, .35) 624px, rgba(16, 11, 38, .1) 672px, rgba(16, 11, 38, 0) 720px);
	}
}

.fy-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.fy-hero__status {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: var(--sp-5);
	padding: .5rem 1rem;
	border: 1px solid rgba(147, 241, 195, .35);
	border-radius: var(--r-pill);
	background: rgba(12, 8, 30, .55);
	color: var(--text);
	font-size: .9rem;
	font-weight: 700;
	text-decoration: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.fy-hero__status:hover { color: var(--text); border-color: rgba(147, 241, 195, .6); }
.fy-hero__status strong { color: var(--mint-300); }
.fy-hero__status.is-down { border-color: rgba(255, 128, 152, .45); }
.fy-hero__status.is-down .fy-status__dot { background: var(--rose-400); }
.fy-hero__status.is-down .fy-status__dot::after { display: none; }

.fy-hero__title { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin: 0; }
.fy-hero__crest { position: relative; display: block; width: clamp(220px, 16vw + 120px, 330px); }
.fy-hero__crest picture { display: block; }
.fy-hero__crest img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 10px 22px rgba(10, 4, 30, .65)) drop-shadow(0 0 30px rgba(255, 214, 109, .25));
	animation: fy-float 7s var(--ease-in-out) infinite;
}
.fy-hero__crest::before {
	/* a slowly turning magic circle behind the crest */
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 150%;
	aspect-ratio: 1;
	background: url("../../img/crest-ring.svg") center / contain no-repeat;
	color: var(--gold-300);
	opacity: .5;
	transform: translate(-50%, -50%);
	animation: fy-turn 90s linear infinite;
	pointer-events: none;
}
.fy-hero__claim {
	color: var(--text);
	font: 600 clamp(1.35rem, .95rem + 1.7vw, 2.25rem)/1.15 var(--font-display);
	letter-spacing: .005em;
	text-shadow: 0 2px 18px rgba(10, 4, 30, .8), 0 1px 2px rgba(10, 4, 30, .6);
}
.fy-hero__lede {
	max-width: 620px;
	margin: var(--sp-4) 0 0;
	color: #f1ebff;
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
	line-height: 1.6;
	text-shadow: 0 1px 12px rgba(10, 4, 30, .9), 0 1px 2px rgba(10, 4, 30, .7);
}
.fy-hero__lede strong { color: var(--gold-200); }
.fy-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-8); }
.fy-hero__market {
	margin-top: var(--sp-5);
	padding: .35rem .8rem;
	border-radius: var(--r-pill);
	color: var(--sky-300);
	font-size: .95rem;
	text-shadow: 0 1px 10px rgba(10, 4, 30, .9);
}
.fy-hero__market:hover { color: var(--gold-200); }

.fy-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 4.6rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-left: -22px;
	border: 1px solid var(--line-3);
	border-radius: 50%;
	background: rgba(12, 8, 30, .45);
	color: var(--text);
	animation: fy-nudge 2.6s var(--ease-in-out) infinite;
}
.fy-hero__scroll:hover { color: var(--gold-300); border-color: var(--gold-300); }

/* Drifting petals, transform-only so they stay cheap. */
.fy-hero__petals { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.fy-hero__petals span {
	position: absolute;
	top: -6%;
	width: 14px;
	height: 10px;
	border-radius: 70% 0 70% 0;
	background: linear-gradient(135deg, #ffd3ea, #ff82c2 70%);
	opacity: .85;
	will-change: transform;
	animation: fy-petal 15s linear infinite;
}
.fy-hero__petals span:nth-child(1) { left: 12%; animation-duration: 16s; animation-delay: -2s; }
.fy-hero__petals span:nth-child(2) { left: 28%; width: 10px; height: 7px; animation-duration: 19s; animation-delay: -9s; }
.fy-hero__petals span:nth-child(3) { left: 44%; animation-duration: 14s; animation-delay: -5s; }
.fy-hero__petals span:nth-child(4) { left: 61%; width: 11px; height: 8px; animation-duration: 18s; animation-delay: -12s; }
.fy-hero__petals span:nth-child(5) { left: 74%; animation-duration: 15s; animation-delay: -1s; }
.fy-hero__petals span:nth-child(6) { left: 86%; width: 9px; height: 6px; animation-duration: 21s; animation-delay: -7s; }
.fy-hero__petals span:nth-child(7) { left: 95%; animation-duration: 17s; animation-delay: -14s; }

@media (max-width: 699.98px), (max-width: 1099.98px) and (orientation: portrait) {
	.fy-hero {
		justify-content: flex-end;
		min-height: max(640px, 100svh);
		padding-bottom: 6.5rem;
	}
	.fy-hero__img { object-position: 50% 0; }
	.fy-hero__art::before {
		background: linear-gradient(180deg, rgba(12, 8, 30, .4) 0%, rgba(12, 8, 30, 0) 18%, rgba(16, 11, 38, .2) 30%, rgba(16, 11, 38, .78) 44%, rgba(16, 11, 38, .86) 66%, var(--bg) 100%);
	}
	.fy-hero__art::after { display: none; }
	.fy-hero__status { margin-bottom: var(--sp-3); font-size: .82rem; }
	.fy-hero__ctas { margin-top: var(--sp-6); }
	.fy-hero__scroll { display: none; }
	.fy-hero__petals span:nth-child(n+5) { display: none; }
}
@media (max-width: 699.98px) {
	.fy-hero__ctas { flex-direction: column; align-self: stretch; }
	.fy-hero__ctas .fy-btn { width: 100%; }
}

/* At a glance: the server facts, overlapping the bottom of the hero. */
.fy-glance { position: relative; z-index: 3; margin-top: -4.25rem; }
.fy-glance__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: var(--r-xl);
	background: var(--line);
	box-shadow: var(--shadow-lg);
}
.fy-glance__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: .8rem;
	align-items: center;
	padding: 1.05rem 1.15rem;
	background: linear-gradient(180deg, rgba(36, 26, 80, .97), rgba(25, 18, 58, .97));
}
.fy-glance__icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: rgba(255, 196, 63, .13);
	color: var(--gold-300);
}
.fy-glance__item dt { color: var(--text-3); font: 800 .68rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fy-glance__item dd { margin: 0; color: var(--text); font: 600 1.02rem/1.25 var(--font-display); }
@media (max-width: 759.98px) {
	.fy-glance__item { column-gap: .65rem; padding: .95rem .9rem; }
	.fy-glance__icon { width: 34px; height: 34px; border-radius: 11px; }
	.fy-glance__icon .fy-i { width: 1.05em; height: 1.05em; }
	.fy-glance__item dd { font-size: .95rem; }
}
@media (min-width: 760px) { .fy-glance__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) {
	.fy-glance__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.fy-glance__item { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: .15rem; padding: 1.15rem 1.25rem 1.2rem; }
	.fy-glance__icon { grid-row: auto; width: 36px; height: 36px; margin-bottom: .55rem; border-radius: 12px; }
	.fy-glance__item dd { font-size: 1.05rem; }
}

/* Three steps, joined by a dotted quest trail. */
.fy-steps {
	position: relative;
	display: grid;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
.fy-step {
	position: relative;
	margin: 0;
	padding: var(--sp-8) var(--sp-6) var(--sp-6);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: var(--grad-card), var(--surface);
	box-shadow: var(--shadow-md), var(--inner-hi);
}
.fy-step h3 { margin: var(--sp-4) 0 var(--sp-2); }
.fy-step p { color: var(--text-3); }
.fy-step .fy-link-arrow, .fy-step .fy-badge { margin-top: var(--sp-4); }
.fy-step__num {
	position: absolute;
	top: -18px;
	left: var(--sp-6);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--grad-gold);
	color: #3a2200;
	font: 700 1.15rem/1 var(--font-display);
	box-shadow: var(--glow-gold), 0 0 0 5px var(--bg);
}
.fy-step__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 20px;
	background: rgba(140, 87, 248, .16);
	color: var(--violet-300);
}
.fy-step__icon .fy-i { width: 28px; height: 28px; }
.fy-step__icon--gold { background: rgba(255, 196, 63, .14); color: var(--gold-300); }
.fy-step__icon--pink { background: rgba(243, 90, 169, .15); color: var(--petal-300); }
@media (min-width: 860px) {
	.fy-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
	.fy-steps::before {
		content: "";
		position: absolute;
		top: 1px;
		left: 12%;
		right: 12%;
		height: 2px;
		background-image: linear-gradient(90deg, var(--gold-400) 40%, transparent 40%);
		background-size: 14px 2px;
		opacity: .45;
	}
}

/* Download */
.fy-download { overflow: hidden; }
.fy-download__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: image-set(url("../../img/scene-map-1280.avif") type("image/avif"), url("../../img/scene-map-1280.webp") type("image/webp"));
	background-position: center;
	background-size: cover;
	opacity: .2;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
/* PC: the Syphon Vault launcher, shown with pictures from the launcher itself */
.fy-vault, .fy-vault-steps, .fy-download__android, .fy-download .fy-tip { max-width: 1120px; margin-inline: auto; }
.fy-vault {
	display: grid;
	gap: var(--sp-8);
	padding: clamp(1.25rem, .9rem + 1.6vw, 2.5rem);
}
@media (min-width: 1000px) {
	.fy-vault { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: var(--sp-10); }
	.fy-vault__perks { grid-column: 1 / -1; }
}
.fy-vault__brand { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--sp-4); }
.fy-vault__mark { width: 44px; height: 44px; filter: drop-shadow(0 6px 16px rgba(140, 87, 248, .45)); }
.fy-vault__brand .fy-eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.fy-vault__title { margin: 0 0 var(--sp-3); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); }
.fy-vault__lead { margin: 0 0 var(--sp-6); color: var(--text-2); font-size: 1.04rem; line-height: 1.65; }
.fy-vault__cta { display: grid; gap: var(--sp-4); justify-items: start; }
.fy-vault__facts { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; color: var(--text-3); font-size: .9rem; font-weight: 700; }
.fy-vault__facts li { display: flex; align-items: center; gap: .55rem; }
.fy-vault__facts .fy-i { color: var(--violet-300); }
.fy-vault__shot {
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(169, 122, 254, .35);
	border-radius: 14px;
	background: #0b0f1a;
	box-shadow: 0 32px 70px -30px rgba(0, 0, 0, .9), 0 0 70px -18px rgba(140, 87, 248, .45);
}
.fy-vault__shot img { display: block; width: 100%; height: auto; }
.fy-vault__zoom { display: block; cursor: zoom-in; }
.fy-vault__zoom:focus-visible { outline-offset: -3px; }
.fy-vault__perks { display: grid; gap: var(--sp-5); margin: 0; padding: var(--sp-6) 0 0; border-top: 1px solid var(--line); list-style: none; }
@media (min-width: 640px) { .fy-vault__perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fy-vault__perks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fy-vault__perks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; align-items: start; }
.fy-vault__perk-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(140, 87, 248, .16); color: var(--violet-300); }
.fy-vault__perks h4 { margin: .15rem 0 .3rem; font-size: 1rem; }
.fy-vault__perks p { margin: 0; color: var(--text-3); font-size: .9rem; line-height: 1.55; }

/* Installing with Syphon Vault: three steps beside the real install window */
.fy-vault-steps {
	display: grid;
	gap: var(--sp-6);
	margin-top: var(--sp-8);
	padding: clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
	border: 1px solid var(--line-2);
	border-radius: var(--r-xl);
	background: rgba(12, 8, 30, .55);
}
@media (min-width: 1000px) { .fy-vault-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; column-gap: var(--sp-10); } }
.fy-vault-steps h3 { margin: 0 0 var(--sp-5); font-size: 1.4rem; }
.fy-vault-steps__list { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; counter-reset: fy-vstep; }
.fy-vault-steps__list li { position: relative; padding-left: 2.75rem; color: var(--text-2); line-height: 1.6; counter-increment: fy-vstep; }
.fy-vault-steps__list li::before {
	content: counter(fy-vstep);
	position: absolute;
	top: -.05rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--grad-gold);
	color: #2a1a00;
	font: 700 .95rem/1 var(--font-display);
}
.fy-vault-steps__list strong { color: var(--text); }
.fy-vault-steps__list code { overflow-wrap: anywhere; }
.fy-vault-steps__shot { margin: 0; }
.fy-vault-steps__shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9);
}
.fy-vault-steps__shot figcaption { margin-top: .7rem; color: var(--text-3); font-size: .86rem; text-align: center; }

/* Android: one wide card under the PC launcher */
.fy-download__android { margin-top: var(--sp-8); }
.fy-dl-card__action { display: grid; gap: var(--sp-3); }
.fy-dl-card__action .fy-dl-card__meta { margin: 0; }
@media (min-width: 860px) {
	.fy-dl-card.fy-dl-card--row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(240px, auto); align-items: center; gap: var(--sp-6); }
	.fy-dl-card--row .fy-dl-card__body h3 { font-size: 1.3rem; }
}
.fy-dl-card { display: flex; flex-direction: column; gap: var(--sp-5); padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); }
.fy-dl-card__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 20px;
	background: linear-gradient(160deg, rgba(109, 176, 255, .28), rgba(63, 140, 255, .1));
	color: var(--sky-300);
}
.fy-dl-card__icon .fy-i { width: 30px; height: 30px; }
.fy-dl-card__icon--mint { background: linear-gradient(160deg, rgba(82, 221, 156, .28), rgba(82, 221, 156, .08)); color: var(--mint-300); }
.fy-dl-card__body h3 { margin: 0 0 var(--sp-2); font-size: 1.45rem; }
.fy-dl-card__body .fy-eyebrow { margin-bottom: var(--sp-2); }
.fy-dl-card__body p:last-child { color: var(--text-3); }
.fy-dl-card__meta { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: calc(var(--sp-2) * -1) 0 0; color: var(--text-4); font-size: .82rem; font-weight: 700; }
.fy-tip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3) var(--sp-4);
	max-width: 920px;
	margin: var(--sp-8) auto 0;
	padding: var(--sp-4) var(--sp-5);
	border: 1px dashed var(--line-3);
	border-radius: var(--r-lg);
	background: rgba(12, 8, 30, .5);
}
.fy-tip__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 196, 63, .13); color: var(--gold-300); }
.fy-tip p { flex: 1 1 320px; margin: 0; color: var(--text-2); font-size: .94rem; }

/* Features bento */
.fy-bento { display: grid; gap: var(--sp-5); }
.fy-bento__item {
	position: relative;
	overflow: hidden;
	padding: var(--sp-6);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: var(--grad-card), var(--surface);
	box-shadow: var(--shadow-md), var(--inner-hi);
	transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.fy-bento__item:hover { transform: translateY(-3px); border-color: var(--line-3); }
.fy-bento__item h3 { margin: var(--sp-4) 0 var(--sp-2); }
.fy-bento__item p { color: var(--text-3); }
.fy-bento__item .fy-link-arrow { display: inline-flex; margin-top: var(--sp-4); }
.fy-bento__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 18px;
	background: rgba(140, 87, 248, .16);
	color: var(--violet-300);
}
.fy-bento__icon .fy-i { width: 26px; height: 26px; }
.fy-bento__icon--pink { background: rgba(243, 90, 169, .15); color: var(--petal-300); }
.fy-bento__icon--sky { background: rgba(63, 140, 255, .15); color: var(--sky-300); }
.fy-bento__icon--gold { background: rgba(255, 196, 63, .14); color: var(--gold-300); }
.fy-bento__icon--mint { background: rgba(82, 221, 156, .14); color: var(--mint-300); }
.fy-bento__item--hero { display: flex; align-items: flex-end; min-height: 380px; padding: 0; }
.fy-bento__art {
	position: absolute;
	inset: 0;
	background-image: image-set(url("../../img/scene-arcade-1280.avif") type("image/avif"), url("../../img/scene-arcade-1280.webp") type("image/webp"));
	background-position: center 30%;
	background-size: cover;
	transition: transform 1.2s var(--ease);
}
.fy-bento__item--hero:hover .fy-bento__art { transform: scale(1.04); }
.fy-bento__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 11, 38, 0) 25%, rgba(16, 11, 38, .82) 62%, rgba(16, 11, 38, .97) 100%); }
.fy-bento__text { position: relative; padding: var(--sp-6); }
.fy-bento__text h3 { font-size: var(--fs-h2); margin-top: var(--sp-3); }
.fy-bento__text p { max-width: 46ch; color: var(--text-2); }
@media (min-width: 760px) {
	.fy-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fy-bento__item--hero { grid-column: 1 / -1; min-height: 420px; }
}
@media (min-width: 1100px) {
	.fy-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fy-bento__item--hero { grid-column: span 2; grid-row: span 2; min-height: 0; }
}

/* Community */
.fy-community__grid { display: grid; gap: var(--sp-10); align-items: center; }
.fy-community__mascot { position: relative; display: flex; align-items: flex-end; gap: var(--sp-4); margin-top: var(--sp-6); }
.fy-community__mascot img { width: 118px; height: auto; flex: none; filter: drop-shadow(0 18px 24px rgba(5, 2, 20, .6)); animation: fy-bob 4s var(--ease-in-out) infinite; }
.fy-discord { flex: 1; min-width: 0; margin-bottom: var(--sp-6); padding: var(--sp-6); }
.fy-discord h3 { margin: var(--sp-3) 0 var(--sp-2); }
.fy-discord p { margin-bottom: var(--sp-4); color: var(--text-3); }
.fy-discord__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(88, 101, 242, .22); color: #aab3ff; }
.fy-discord__icon .fy-i { width: 26px; height: 26px; }
@media (max-width: 479.98px) {
	.fy-community__mascot img { width: 96px; }
	.fy-discord { padding: var(--sp-5); }
	.fy-discord .fy-btn { width: 100%; }
}
.fy-community__links { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.fy-community__side { display: grid; gap: var(--sp-5); }
.fy-community__bugs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: var(--sp-4) var(--sp-5); border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--text-3); font-size: .94rem; }
.fy-community__bugs .fy-i { color: var(--petal-300); }
.fy-community__bugs a { font-weight: 800; }
.fy-community__links li { margin: 0; }
.fy-comm { display: flex; align-items: center; gap: var(--sp-4); height: 100%; padding: var(--sp-5); color: var(--text); text-decoration: none; }
.fy-comm:hover { color: var(--text); }
.fy-comm__icon { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 16px; background: rgba(140, 87, 248, .16); color: var(--violet-300); transition: transform var(--t-med) var(--ease-spring); }
.fy-comm:hover .fy-comm__icon { transform: rotate(-6deg) scale(1.06); }
.fy-comm__icon .fy-i { width: 24px; height: 24px; }
.fy-comm__icon--violet { background: rgba(88, 101, 242, .22); color: #aab3ff; }
.fy-comm__icon--mint { background: rgba(82, 221, 156, .14); color: var(--mint-300); }
.fy-comm__icon--gold { background: rgba(255, 196, 63, .14); color: var(--gold-300); }
.fy-comm__icon--sky { background: rgba(63, 140, 255, .15); color: var(--sky-300); }
.fy-comm__icon--pink { background: rgba(243, 90, 169, .15); color: var(--petal-300); }
.fy-comm__text { flex: 1; min-width: 0; }
.fy-comm__text strong { display: block; font: 600 1.05rem/1.25 var(--font-display); }
.fy-comm__text span { display: block; margin-top: .1rem; color: var(--text-3); font-size: .88rem; line-height: 1.35; }
.fy-comm__ext { color: var(--text-4); width: 1em; height: 1em; }
@media (min-width: 640px) { .fy-community__links { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
	.fy-community__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
	.fy-community__mascot img { width: 150px; }
}

/* About and FAQ */
.fy-faq { display: grid; gap: var(--sp-3); }
.fy-faq__item {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	transition: border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.fy-faq__item[open] { border-color: rgba(255, 214, 109, .28); background: var(--grad-card), var(--surface); }
.fy-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 60px;
	padding: var(--sp-4) var(--sp-5);
	color: var(--text);
	font: 600 1.08rem/1.3 var(--font-display);
	list-style: none;
	cursor: pointer;
}
.fy-faq__item > summary::-webkit-details-marker { display: none; }
.fy-faq__item > summary .fy-i { flex: none; color: var(--gold-300); transition: transform var(--t-med) var(--ease); }
.fy-faq__item[open] > summary .fy-i { transform: rotate(180deg); }
.fy-faq__item > summary:hover { color: var(--gold-100); }
.fy-faq__body { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-2); }
.fy-langs { display: grid; gap: .6rem; margin: var(--sp-3) 0; padding: 0; list-style: none; }
.fy-langs li { display: flex; gap: .7rem; align-items: flex-start; margin: 0; padding: .6rem .8rem; border-radius: var(--r-md); background: var(--surface-sunken); font-size: .94rem; }
.fy-langs img { flex: none; margin-top: .4rem; border-radius: 2px; }

/* Closing call to action: Freya's two heroes on either side of the night sky, the words in the dark middle between
   them. The art is the site background art (one shared download on wide screens). A violet glow hugging the card and
   a deep night shadow below it lift the card off the page. */
.fy-cta {
	--fy-cta-r: clamp(24px, 3vw, 40px);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(420px, 30vw, 660px);
	margin: 0 var(--gutter) var(--section-y);
	border: 1px solid rgba(200, 182, 255, .2);
	border-radius: var(--fy-cta-r);
	background-color: var(--night-900);
	box-shadow:
		0 0 0 1px rgba(140, 87, 248, .16),
		0 0 26px -2px rgba(140, 87, 248, .4),
		0 2px 6px rgba(4, 2, 16, .5),
		0 26px 60px -18px rgba(4, 2, 16, .92),
		0 64px 140px -34px rgba(4, 2, 16, .95),
		0 0 120px -20px rgba(140, 87, 248, .32);
}
.fy-cta__art {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("../../img/site-bg-960.webp");
	background-image: image-set(url("../../img/site-bg-960.avif") type("image/avif"), url("../../img/site-bg-960.webp") type("image/webp"));
	background-position: 50% 36%;
	background-repeat: no-repeat;
	background-size: cover;
}
@media (min-width: 700px) {
	.fy-cta__art {
		background-image: url("../../img/site-bg-1280.webp");
		background-image: image-set(url("../../img/site-bg-1280.avif") type("image/avif"), url("../../img/site-bg-1280.webp") type("image/webp"));
	}
}
@media (min-width: 1440px) {
	.fy-cta__art {
		background-image: url("../../img/site-bg-1672.webp");
		background-image: image-set(url("../../img/site-bg-1672.avif") type("image/avif"), url("../../img/site-bg-1672.webp") type("image/webp"));
	}
}
/* Wide screens: the band is a lit window onto the site background itself (the same picture and size, fixed to the
   screen), so its two heroes are the background's own: each shows once and continues across the band's border. */
/* (hover: hover): iPadOS Safari ignores background-attachment: fixed, so touch tablets keep the band's own framing */
@media (min-width: 1100px) and (hover: hover) {
	.fy-cta__art { background-attachment: fixed; background-position: center top; }
}
/* the dock rail (home, 1600 px and up) sits on the left edge: the band keeps clear of it */
@media (min-width: 1600px) {
	.fy-home .fy-cta { margin-inline: 96px; }
}
/* a soft shade behind the words, and an inner vignette so the art melts into the rounded border */
.fy-cta__art::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: calc(var(--fy-cta-r) - 1px);
	background:
		radial-gradient(32% 58% at 50% 52%, rgba(16, 11, 38, .72) 0%, rgba(16, 11, 38, .42) 62%, rgba(16, 11, 38, 0) 100%),
		linear-gradient(180deg, rgba(16, 11, 38, .35) 0%, rgba(16, 11, 38, 0) 26%, rgba(16, 11, 38, 0) 70%, rgba(16, 11, 38, .55) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 32px rgba(10, 7, 25, .75), inset 0 0 140px 16px rgba(10, 7, 25, .55);
}
.fy-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
	text-align: center;
}
.fy-cta__inner h2 { max-width: 16ch; text-shadow: 0 2px 18px rgba(10, 4, 30, .8), 0 1px 2px rgba(10, 4, 30, .6); }
.fy-cta__inner .fy-lede { max-width: 36ch; color: #f1ebff; text-wrap: balance; text-shadow: 0 1px 12px rgba(10, 4, 30, .9), 0 1px 2px rgba(10, 4, 30, .7); }
.fy-cta__inner .fy-hero__ctas { justify-content: center; margin-top: var(--sp-6); }
/* Phones: the knight on top, the words below him on a deepening shade. */
@media (max-width: 699.98px) {
	.fy-cta { justify-content: flex-end; min-height: 0; }
	.fy-cta__art { background-position: 100% 0; }
	.fy-cta__art::after {
		background: linear-gradient(180deg, rgba(16, 11, 38, .2) 0%, rgba(16, 11, 38, 0) 16%, rgba(16, 11, 38, 0) 34%, rgba(16, 11, 38, .72) 48%, rgba(16, 11, 38, .92) 60%, rgba(16, 11, 38, .96) 100%);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 48px 4px rgba(10, 7, 25, .8);
	}
	.fy-cta__inner { padding-top: 18.5rem; }
	.fy-cta__inner .fy-hero__ctas { flex-direction: column; align-self: stretch; }
	.fy-cta__inner .fy-btn { width: 100%; }
}

/* Floating vote badge (wide screens) */
.fy-vote {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: var(--z-dock);
	display: none;
	width: 120px;
	filter: drop-shadow(0 12px 22px rgba(5, 2, 20, .6));
	transition: transform var(--t-med) var(--ease-spring);
	animation: fy-bob 4.5s var(--ease-in-out) infinite;
}
.fy-vote img { display: block; width: 100%; height: auto; }
.fy-vote:hover { transform: scale(1.06) rotate(-2deg); animation-play-state: paused; }
@media (min-width: 1100px) { .fy-vote { display: block; } }
/* 1100 to 1439 px the content column reaches the screen edge and the badge covered buttons and text (the download
   buttons, step and card text): it is left out there; the vote link stays in the community section and the footer.
   1440 to 1599 px: smaller and closer to the edge, and the stats bar keeps to the page column, so nothing is covered. */
@media (min-width: 1100px) and (max-width: 1439.98px) { .fy-vote { display: none; } }
@media (min-width: 1440px) and (max-width: 1599.98px) {
	.fy-vote { right: 8px; width: 96px; }
	.fy-home .fy-glance .fy-container--wide { max-width: calc(var(--container) + var(--gutter) * 2); }
}

/* Home-only keyframes */
@keyframes fy-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes fy-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes fy-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes fy-petal {
	0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
	8% { opacity: .9; }
	50% { transform: translate3d(-60px, 52vh, 0) rotate(220deg); }
	92% { opacity: .8; }
	100% { transform: translate3d(30px, 108vh, 0) rotate(420deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.fy-hero__petals { display: none; }
}

/* Accessibility fixes (a11y audit) */
/* S8: keep the footer legal links clear of the fixed vote badge. */
@media (min-width: 1100px) { .fy-home .fy-footer__legal { padding-right: 150px; } }
/* S10: no sideways scroll at 320px (decorative mascot). */
@media (max-width: 359.98px) { .fy-community__mascot img { display: none; } }
/* S16: decorative loops settle after a few cycles. */
.fy-hero__crest img, .fy-hero__scroll, .fy-vote, .fy-community__mascot img { animation-iteration-count: 3; }
.fy-hero__crest::before { animation-iteration-count: 1; }
/* S15: 40px hit area for the "Send a bug report" link (129x25 at 390px). */
.fy-community__bugs a { display: inline-block; padding-block: .45rem; margin-block: -.45rem; }