/* ------------------------------------------------------------------ fonts */

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto-cyrillic.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- tokens */

:root {
	--fb-ground: #1f1f1f;
	--fb-dark: #040613;
	--fb-ink: #ffffff;
	--fb-accent: #2fd3fa;
	--fb-promo: #6ec1e4;
	--fb-cta: #a61d94;
	--fb-cta-hover: #350134;
	--fb-edge: #bb1db9;
	--fb-rule: #d1d5db;
	--fb-muted: #f9f9f9;

	--fb-head-h: 92px;
	--fb-content-w: 1140px;
	--fb-chrome-w: 1200px;
	--fb-gutter: 20px;

	--fb-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

/* ------------------------------------------------------------------ reset */

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

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

/* Column layout so a short page (a thin legal route, a landing) still puts the
   footer on the fold instead of leaving a band of ground under it. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--fb-ground);
	color: var(--fb-ink);
	font-family: var(--fb-stack);
	font-size: 16px;
	line-height: 1.65;
	overflow-wrap: break-word;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
}

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

button {
	font: inherit;
	color: inherit;
}

/* Skip link — the source has one behind Astra's screen-reader class. */
.fb-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--fb-dark);
	color: var(--fb-ink);
}

.fb-skip:focus {
	left: 0;
}

/* Both wrappers add the gutter OUTSIDE the measured width, so the content box
   lands on the source's own 1140px (and the footer grid on its 1200px) rather
   than 40px narrower. */
.fb-shell {
	width: 100%;
	max-width: calc(var(--fb-chrome-w) + var(--fb-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--fb-gutter);
}

/* ----------------------------------------------------------------- header */

.fb-head {
	background: var(--fb-dark);
}

.fb-head__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: var(--fb-head-h);
	gap: 16px;
}

.fb-brand {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	line-height: 0;
}

.fb-brand img {
	width: 76px;
	height: 60px;
	object-fit: contain;
}

.fb-nav {
	display: flex;
	align-items: center;
	justify-self: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fb-nav a {
	display: block;
	padding: 0 16px;
	color: var(--fb-ink);
	font-size: 16px;
	font-weight: 400;
	line-height: 80px;
	text-decoration: none;
	transition: color .2s ease;
}

.fb-nav a:hover,
.fb-nav a:focus-visible {
	color: var(--fb-accent);
}

.fb-head__cta {
	justify-self: end;
}

.fb-btn {
	display: inline-block;
	padding: 12px 30px;
	border: 0;
	border-radius: 40px;
	background: var(--fb-cta);
	color: var(--fb-ink);
	font-family: var(--fb-stack);
	font-size: 16px;
	font-weight: 500;
	/* 12px padding + a 1.2 line box lands the pill on the source's 43px. */
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.fb-btn:hover,
.fb-btn:focus-visible {
	background: var(--fb-cta-hover);
	color: var(--fb-muted);
}

/* Burger — desktop-hidden; the source swaps to it under 922px. */
.fb-burger {
	display: none;
	justify-self: end;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.fb-burger span {
	display: block;
	height: 2px;
	margin: 4px 0;
	border-radius: 2px;
	background: var(--fb-ink);
	transition: transform .25s ease, opacity .2s ease;
}

.fb-drawer {
	display: none;
	background: var(--fb-dark);
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.fb-drawer[data-open='1'] {
	display: block;
}

.fb-drawer__nav {
	margin: 0;
	padding: 8px 0 20px;
	list-style: none;
	text-align: center;
}

.fb-drawer__nav a {
	display: block;
	padding: 12px 0;
	color: var(--fb-ink);
	font-size: 16px;
	text-decoration: none;
}

.fb-drawer__cta {
	padding: 0 0 24px;
	text-align: center;
}

/* ---------------------------------------------------------------- content */

.fb-main {
	flex: 1 0 auto;
	padding-bottom: 40px;
}

.fb-wrap {
	width: 100%;
	max-width: calc(var(--fb-content-w) + var(--fb-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--fb-gutter);
}

/* The source centres the H1 and colours it like the H2s. */
.fb-title {
	margin: 0 0 19px;
	padding-top: 10px;
	color: var(--fb-accent);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

/* ------------------------------------------------------- promo card pair */

.fb-promos {
	display: flex;
	flex-wrap: wrap;
	padding: 10px 0;
}

.fb-promo {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 50%;
	padding: 10px;
	text-align: center;
}

.fb-promo__img {
	display: block;
	margin: 0;
	line-height: 0;
}

.fb-promo__img img {
	width: 100%;
	height: auto;
	border-radius: 27px;
}

.fb-promo__title {
	display: block;
	font-family: 'Roboto', var(--fb-stack);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.2;
}

.fb-promo__title a {
	color: var(--fb-promo);
	text-decoration: underline;
}

.fb-promo__title a:hover,
.fb-promo__title a:focus-visible {
	color: var(--fb-cta);
}

.fb-promo__text {
	margin: 0;
	font-family: 'Roboto', var(--fb-stack);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.65;
	color: var(--fb-ink);
}

/* ------------------------------------------------------------- copy block */

.fb-copy {
	padding: 10px 0;
}

/* h1 is included on purpose. The page title is already an H1 outside this
   block, so copy should not carry a second one — but generated copy sometimes
   does, and an unstyled white H1 in the middle of a cyan scale reads as a bug
   rather than as the authoring mistake it is. */
.fb-copy h1,
.fb-copy h2,
.fb-copy h3,
.fb-copy h4,
.fb-copy h5,
.fb-copy h6 {
	color: var(--fb-accent);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 20px;
}

.fb-copy h1 {
	font-size: 30px;
	margin-top: 28px;
}

.fb-copy h2 {
	font-size: 30px;
	margin-top: 28px;
}

.fb-copy h3 {
	font-size: 24px;
	margin-top: 24px;
}

.fb-copy h4 {
	font-size: 20px;
	margin-top: 24px;
}

.fb-copy > *:first-child {
	margin-top: 0;
}

.fb-copy p {
	margin: 0 0 16px;
}

.fb-copy a {
	color: var(--fb-accent);
	text-decoration: underline;
}

.fb-copy a:hover,
.fb-copy a:focus-visible {
	color: var(--fb-promo);
}

.fb-copy ul,
.fb-copy ol {
	margin: 0 0 16px;
	padding-left: 20px;
}

.fb-copy li {
	margin-bottom: 4px;
}

.fb-copy strong,
.fb-copy b {
	font-weight: 600;
}

/* CTA button inside CMS copy. The source builds these with an Elementor button
   widget set to align-center; migrated copy carries them as .fb-cta > .fb-btn
   so they take the template's own pill instead of degrading to a text link. */
.fb-copy .fb-cta {
	margin: 0 0 24px;
	text-align: center;
}

/* The source's in-copy button is a smaller variant of the header pill, not the
   same object: measured at 15px Roboto, 12px/24px padding, a 20px radius and no
   underline, on the same #A61D94 ground. Those values are taken verbatim. */
.fb-copy .fb-cta .fb-btn {
	padding: 12px 24px;
	border-radius: 20px;
	/* `.fb-copy a` outranks `.fb-btn` on specificity and would paint the label
	   accent-cyan on the magenta ground. Restate the button's own colours. */
	color: var(--fb-ink);
	font-family: 'Roboto', var(--fb-stack);
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
}

.fb-copy .fb-cta .fb-btn:hover,
.fb-copy .fb-cta .fb-btn:focus-visible {
	background: var(--fb-cta-hover);
	color: var(--fb-muted);
}

.fb-copy blockquote {
	margin: 0 0 16px;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--fb-cta);
	color: var(--fb-ink);
}

/* Network rule: content images run 812px and stay centred in the measure. */
.fb-copy img {
	display: block;
	width: min(812px, 100%);
	height: auto;
	margin: 24px auto;
}

.fb-copy figure {
	margin: 24px 0;
}

.fb-copy figcaption {
	font-size: 14px;
	text-align: center;
	opacity: .75;
}

/* Tables — the source's cell rules, with the outer edge closed off. */
.fb-copy table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: separate;
	border-spacing: 0;
	border-top: 1px solid var(--fb-rule);
	border-left: 1px solid var(--fb-rule);
}

.fb-copy th,
.fb-copy td {
	padding: 11px 16px;
	border-right: 1px solid var(--fb-rule);
	border-bottom: 1px solid var(--fb-rule);
	font-size: 16px;
	text-align: left;
	vertical-align: top;
}

.fb-copy th {
	font-weight: 600;
	text-align: center;
}

.fb-scroll {
	overflow-x: auto;
	margin-bottom: 24px;
}

.fb-scroll table {
	margin-bottom: 0;
}

/* ----------------------------------------------------------------- footer */

.fb-foot {
	background: var(--fb-dark);
}

.fb-foot__main {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
	align-items: center;
	padding: 45px 0;
}

.fb-foot__nav a {
	margin-right: 8px;
	color: var(--fb-muted);
	font-size: 16px;
	text-decoration: none;
}

.fb-foot__nav a:hover,
.fb-foot__nav a:focus-visible {
	color: var(--fb-accent);
}

.fb-foot__social {
	display: flex;
	justify-content: center;
	align-items: center;
}

.fb-social__i {
	margin: 0 6px;
	color: var(--fb-ink);
	line-height: 0;
}

.fb-social__i svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.fb-social__i:hover,
.fb-social__i:focus-visible {
	color: var(--fb-accent);
}

.fb-foot__mark {
	justify-self: end;
	line-height: 0;
}

.fb-foot__mark img {
	width: 100px;
	height: auto;
}

.fb-foot__below {
	border-top: 1px solid var(--fb-edge);
}

.fb-foot__below .fb-shell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding-block: 16px;
	color: var(--fb-ink);
	font-size: 16px;
	text-align: center;
}

/* ------------------------------------------------------------ scroll top */

.fb-totop {
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 30;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: var(--fb-cta);
	color: var(--fb-ink);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}

.fb-totop[data-show='1'] {
	opacity: 1;
	visibility: visible;
}

.fb-totop svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* ------------------------------------------------------- page-type blocks */

/* Toplist / review cards. The source page type carries no such block, so these
   follow its own vocabulary: the dark bar colour as a panel, the cyan accent
   for figures, the magenta pill for the action. */
.fb-cards {
	display: grid;
	gap: 16px;
	margin: 0 0 32px;
}

.fb-card {
	display: grid;
	grid-template-columns: 56px 1.4fr 1fr auto;
	align-items: center;
	gap: 20px;
	padding: 18px 20px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 20px;
	background: var(--fb-dark);
}

.fb-card__rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--fb-cta);
	font-size: 18px;
	font-weight: 600;
}

.fb-card__name {
	margin: 0 0 2px;
	color: var(--fb-accent);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.fb-card__note,
.fb-card__label {
	margin: 0;
	font-size: 14px;
	opacity: .8;
}

.fb-card__bonus {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.fb-card__rating {
	color: var(--fb-accent);
	font-weight: 600;
}

/* Review info card. */
.fb-info {
	margin: 0 0 32px;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 20px;
	background: var(--fb-dark);
}

.fb-info__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px 24px;
	margin: 0;
}

.fb-info__grid dt {
	font-size: 14px;
	opacity: .75;
}

.fb-info__grid dd {
	margin: 0;
	font-weight: 600;
}

.fb-info__cta {
	margin: 24px 0 0;
	text-align: center;
}

/* Landing hero. */
.fb-hero {
	padding: 48px 0 32px;
	text-align: center;
}

.fb-hero__title {
	margin: 0 0 16px;
	color: var(--fb-accent);
	font-size: 38px;
	font-weight: 600;
	line-height: 1.25;
}

.fb-hero__lead {
	max-width: 760px;
	margin: 0 auto 28px;
	font-size: 18px;
}

.fb-hero__cta .fb-btn {
	padding: 16px 44px;
	font-size: 18px;
}

/* ------------------------------------------------------------ breakpoints */

/* Astra's header breakpoint. Below it the source hides the desktop bar, drops
   the menu into a drawer and stacks the promo pair. */
@media (max-width: 921px) {
	.fb-head__bar {
		grid-template-columns: 1fr auto;
		min-height: 89px;
	}

	.fb-nav,
	.fb-head__cta {
		display: none;
	}

	.fb-burger {
		display: block;
	}

	.fb-burger[aria-expanded='true'] span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	.fb-burger[aria-expanded='true'] span:nth-child(2) {
		opacity: 0;
	}

	.fb-burger[aria-expanded='true'] span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	.fb-promo {
		width: 100%;
	}

	.fb-title {
		font-size: 29px;
	}

	.fb-copy h2 {
		font-size: 23px;
	}

	.fb-copy h3 {
		font-size: 18px;
	}

	.fb-copy h4 {
		font-size: 17px;
	}

	.fb-hero__title {
		font-size: 30px;
	}

	.fb-foot__main {
		grid-template-columns: 1fr;
		gap: 24px;
		justify-items: center;
		text-align: center;
	}

	.fb-foot__mark {
		justify-self: center;
	}

	.fb-card {
		grid-template-columns: 44px 1fr;
		gap: 12px 16px;
	}

	.fb-card__action {
		grid-column: 1 / -1;
	}

	.fb-card__action .fb-btn {
		display: block;
	}
}

@media (max-width: 480px) {
	:root {
		--fb-gutter: 16px;
	}

	.fb-promo__title {
		font-size: 20px;
	}

	.fb-promo__img img {
		border-radius: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}