/* Payouts LP — isolated styles. Mobile-first, prefix pay-, --pay-* custom props. */
body.payouts {
	--pay-wrapper-max: 1136px;
	--pay-gutter: 14px;
	--pay-font-body:
		"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pay-font-display: var(--pay-font-body);
	--pay-bg: #0a0806;
	--pay-text: #f6efe6;
	--pay-text-muted: #b7ac9d;
	--pay-text-dim: #6d6d6d;
	--pay-accent: #f3981f;
	--pay-accent-3: #ffb24d;
	--pay-positive: #5fd693;
	--pay-cta-shadow: 0 10px 30px -8px rgba(255, 138, 30, 0.45);
	--pay-btn-gradient: linear-gradient(
		180deg,
		#ffc36a 0%,
		#ff8a1e 60%,
		#f37500 100%
	);

	margin: 0;
	background: var(--pay-bg);
	color: var(--pay-text);
	font-family: var(--pay-font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.payouts ::selection {
	background: var(--pay-accent);
	color: var(--pay-bg);
}

body.payouts ::-moz-selection {
	background: var(--pay-accent);
	color: var(--pay-bg);
}

body.payouts .payouts-lp *,
body.payouts .payouts-lp *::before,
body.payouts .payouts-lp *::after {
	box-sizing: border-box;
}

body.payouts .payouts-lp img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Zero-specificity scope so component link/heading styles always win. */
:where(body.payouts .payouts-lp) a {
	color: inherit;
	text-decoration: none;
}

:where(body.payouts .payouts-lp) h1,
:where(body.payouts .payouts-lp) h2,
:where(body.payouts .payouts-lp) h3 {
	font-family: var(--pay-font-display);
	margin: 0;
	line-height: 1.05;
}

/* Container — override --pay-wrapper-max on a section, never .wrapper directly. */
body.payouts .wrapper {
	width: 100%;
	max-width: calc(var(--pay-wrapper-max) + var(--pay-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--pay-gutter);
}

/* Section rhythm — 50 + 50 = 100px between sections. */
body.payouts .pay-section {
	padding-block: 50px;
}

/* Shared button — size (padding/font) is set per instance. */
body.payouts .pay-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 10px;
	font-family: var(--pay-font-body);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

body.payouts .pay-btn--primary {
	background: var(--pay-btn-gradient);
	box-shadow: var(--pay-cta-shadow);
	color: #1a0f02;
}

body.payouts .pay-btn--primary:hover,
body.payouts .pay-btn--primary:focus-visible {
	box-shadow: 0 2px 24px 0 rgba(243, 152, 31, 0.5);
	transform: translateY(-1px);
}

body.payouts .pay-btn--ghost {
	border: 1px solid #332712;
	background: #271809;
	color: var(--pay-text);
	font-weight: 500;
}

body.payouts .pay-btn--ghost:hover,
body.payouts .pay-btn--ghost:focus-visible {
	border-color: rgba(243, 152, 31, 0.45);
	background:
		linear-gradient(
			92.95deg,
			rgba(255, 171, 60, 0.16) 0%,
			rgba(238, 132, 54, 0.16) 100%
		),
		#271809;
	transform: translateY(-1px);
}

/* Pill badge (section eyebrows). */
body.payouts .pay-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 8px 20px;
	border-radius: 100px;
	background: #1e1811;
	color: var(--pay-accent);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 2.16px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Ambient background — warm strip + blurred ellipses, desktop only (home-2026). */
body.payouts #page {
	position: relative;
}

body.payouts #primary {
	position: relative;
	z-index: 1;
}

body.payouts .pay-bg {
	position: absolute;
	inset: 0 0 auto;
	height: 975px;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

body.payouts .pay-bg__strip {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120px;
	background: linear-gradient(
		180deg,
		rgba(76, 45, 3, 0.74) 0%,
		rgba(76, 45, 3, 0) 100%
	);
}

/* Centred so wide screens fade the edges via the blur. */
body.payouts .pay-bg__glow {
	position: absolute;
	top: 43px;
	left: 0;
	width: 100%;
	height: 932px;
	opacity: 0.12;
}

body.payouts .pay-bg__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(170px);
}

body.payouts .pay-bg__blob--1 {
	left: calc(50% - 890px);
	top: 369px;
	width: 703px;
	height: 233px;
	background: rgba(255, 191, 0, 0.3);
}

body.payouts .pay-bg__blob--2 {
	left: calc(50% - 352px);
	top: 804px;
	width: 703px;
	height: 128px;
	background: rgba(255, 191, 0, 0.3);
}

body.payouts .pay-bg__blob--3 {
	left: calc(50% - 116px);
	top: -45px;
	width: 1056px;
	height: 647px;
	background: rgba(217, 108, 0, 0.3);
}

/* Desktop-only — the ambient glow is hidden on mobile. */
@media (max-width: 991px) {
	body.payouts .pay-bg {
		display: none;
	}
}

/* Hero */
body.payouts .pay-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Full width so the centered flex parent doesn't squash the Trustpilot widget. */
body.payouts .pay-hero .ts-proof {
	width: 100%;
}

body.payouts .pay-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
}

body.payouts .pay-hero__title {
	max-width: 718px;
	font-size: clamp(36px, 13vw, 64px);
	font-weight: 600;
	line-height: 1.05;
}

body.payouts .pay-hero__accent,
body.payouts .pay-cta__accent {
	background: linear-gradient(90deg, #ffc271 0%, #ff9242 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

body.payouts .pay-hero__br {
	display: none;
}

body.payouts .pay-hero__lead {
	max-width: 700px;
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
	color: var(--pay-text-muted);
}

body.payouts .pay-hero__lead-hl {
	color: #fff;
}

/* Last section keeps a 100px gap before the footer. */
body.payouts #primary > .pay-section:last-child {
	padding-bottom: 100px;
}

@media (min-width: 768px) {
	body.payouts .pay-hero__br {
		display: inline;
	}

	body.payouts .pay-hero__lead {
		font-size: 20px;
	}
}

/* Live payout feed — narrow panel, sits tighter to the hero (66px total). */
body.payouts .pay-feed {
	--pay-wrapper-max: 780px;
	padding-top: 16px;
}

/* Desktop-only line break utility (no <br> on mobile). */
body.payouts .pay-br-desktop {
	display: none;
}

/* Shared centered section head — wallets, steps, faq. */
body.payouts .pay-wallets__inner,
body.payouts .pay-steps__inner,
body.payouts .pay-faq__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 42px;
}

body.payouts .pay-wallets__head,
body.payouts .pay-steps__head,
body.payouts .pay-faq__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

body.payouts .pay-wallets__title,
body.payouts .pay-steps__title,
body.payouts .pay-faq__title {
	font-size: clamp(28px, 9vw, 44px);
	font-weight: 600;
	line-height: 1.1;
}

body.payouts .pay-wallets__title {
	max-width: 604px;
}

body.payouts .pay-steps__title {
	max-width: 556px;
}

/* Payout wallets */
body.payouts .pay-wallets__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	width: 100%;
}

body.payouts .pay-wallet {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 20px;
	border: 1px solid #2c1f0f;
	border-radius: 18px;
	background: #15100a;
}

body.payouts .pay-wallet__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

body.payouts .pay-wallet__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: 1px solid #2a241d;
	border-radius: 12px;
	background: #0b0908;
	color: #f5a300;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

body.payouts .pay-wallet__id {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

body.payouts .pay-wallet__name {
	color: var(--pay-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1;
}

body.payouts .pay-wallet__net {
	color: var(--pay-text-muted);
	font-size: 14px;
	line-height: 1.2;
}

body.payouts .pay-wallet__desc {
	margin: 0;
	color: var(--pay-text-muted);
	font-size: 14px;
	line-height: 1.4;
}

body.payouts .pay-wallet__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body.payouts .pay-wallet__caption {
	color: var(--pay-text-dim);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

body.payouts .pay-wallet__addr {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 13px;
	border: 1px solid #2a241d;
	border-radius: 12px;
	background: #0b0908;
}

body.payouts .pay-wallet__code {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px;
	line-height: 1.55;
	color: #f5f1ea;
	white-space: nowrap;
	text-overflow: ellipsis;
}

body.payouts .pay-wallet__copy {
	flex-shrink: 0;
	padding: 10px 12px;
	font-size: 14px;
}

body.payouts .pay-wallet__copy.is-copied {
	background: #271809;
	color: var(--pay-accent-3);
	box-shadow: none;
}

body.payouts .pay-wallet__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 5px;
	color: var(--pay-accent-3);
	font-size: 14px;
	font-weight: 700;
}

body.payouts .pay-wallet__link:hover {
	color: #ffd9a3;
}

body.payouts .pay-wallet__arrow {
	flex-shrink: 0;
}

/* Verify in three steps */
body.payouts .pay-steps__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	width: 100%;
}

body.payouts .pay-steps__card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 29px;
	border: 1px solid rgba(255, 170, 60, 0.1);
	border-radius: 18px;
	background: linear-gradient(
		168.78deg,
		rgba(28, 21, 13, 0.7) 0%,
		rgba(22, 17, 11, 0.7) 100%
	);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

body.payouts .pay-steps__row {
	display: flex;
	align-items: center;
	gap: 14px;
}

body.payouts .pay-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: linear-gradient(180deg, #ffc36a 0%, #ff8a1e 100%);
	color: #1a0f02;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
}

body.payouts .pay-steps__name {
	color: var(--pay-text);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.1;
}

body.payouts .pay-steps__text {
	margin: 0;
	color: var(--pay-text-muted);
	font-size: 14px;
	line-height: 1.5;
}

body.payouts .pay-steps__text span {
	color: var(--pay-text);
}

/* FAQ */
body.payouts .pay-faq .ts-faq {
	width: 100%;
}

/* Subscribe — "Not ready yet? Watch us pay first" */
body.payouts .pay-subscribe__card {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 24px;
	border: 1px solid #2b1f0f;
	border-radius: 16px;
	overflow: hidden;
	background:
		radial-gradient(
			1050px 360px at 130px -25px,
			rgba(243, 152, 31, 0.2) 0%,
			rgba(243, 152, 31, 0) 63%
		),
		linear-gradient(173deg, #1c150d 3%, #16110b 98%);
}

body.payouts .pay-subscribe__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.payouts .pay-subscribe__title {
	font-size: clamp(28px, 9vw, 34px);
	font-weight: 600;
	line-height: 1.1;
}

body.payouts .pay-subscribe__desc {
	margin: 0;
	max-width: 506px;
	color: var(--pay-text-muted);
	font-size: 16px;
	line-height: 1.3;
}

body.payouts .pay-subscribe__aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.payouts .pay-subscribe__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body.payouts .pay-subscribe__input {
	height: 50px;
	padding: 0 20px;
	border: 1px solid #e2e9f4;
	border-radius: 11px;
	background: #f6efe6;
	color: #0d0a06;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
}

body.payouts .pay-subscribe__input::placeholder {
	color: #0d0a06;
	opacity: 1;
}

body.payouts .pay-subscribe__input:focus,
body.payouts .pay-subscribe__input:focus-visible {
	outline: none;
	border-color: var(--pay-accent);
	box-shadow: 0 0 0 3px rgba(243, 152, 31, 0.25);
}

body.payouts .pay-subscribe__input.is-error {
	border-color: #e5484d;
	box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.2);
}

body.payouts .pay-subscribe__form.is-submitted .pay-subscribe__submit {
	pointer-events: none;
	opacity: 0.85;
}

body.payouts .pay-subscribe__submit {
	height: 50px;
	padding: 0 28px;
	font-size: 16px;
	white-space: nowrap;
}

body.payouts .pay-subscribe__note {
	margin: 0;
	color: var(--pay-text-muted);
	font-size: 12px;
	line-height: 1.3;
}

body.payouts .pay-subscribe__link {
	color: inherit;
	text-decoration: none;
}

body.payouts .pay-subscribe__link:hover {
	color: var(--pay-text);
}

@media (min-width: 560px) {
	body.payouts .pay-subscribe__form {
		flex-direction: row;
	}

	body.payouts .pay-subscribe__input {
		flex: 1;
		min-width: 0;
	}

	body.payouts .pay-subscribe__submit {
		flex-shrink: 0;
	}
}

@media (min-width: 768px) {
	body.payouts .pay-br-desktop {
		display: inline;
	}

	body.payouts .pay-wallets__grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	body.payouts .pay-wallet {
		padding: 27px;
	}
}

@media (min-width: 992px) {
	body.payouts .pay-steps__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 46px;
	}

	body.payouts .pay-subscribe__card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
		padding: 40px;
	}

	body.payouts .pay-subscribe__text {
		max-width: 506px;
		gap: 20px;
	}

	body.payouts .pay-subscribe__aside {
		flex-shrink: 0;
		width: 511px;
		gap: 22px;
	}
}

/* Final CTA */
body.payouts .pay-cta {
	--pay-wrapper-max: 982px;
}

body.payouts .pay-cta__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	padding: 40px 20px;
	border-radius: 12px;
	background: linear-gradient(
		0deg,
		rgba(20, 19, 19, 0.2) 0%,
		rgba(20, 19, 19, 0.4) 11%,
		#2b1f16 100%
	);
	text-align: center;
}

/* Gradient border via masked ::before (preserves the bg gradient). */
body.payouts .pay-cta__card::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(
		to top,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(116, 116, 116, 0.2) 50%,
		#f3981f 100%
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

body.payouts .pay-cta__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

body.payouts .pay-cta__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 14px;
	border: 1px solid #63350d;
	border-radius: 26px;
	background: #201812;
	color: #ff9242;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 2.16px;
	text-transform: uppercase;
}

body.payouts .pay-cta__title {
	max-width: 788px;
	font-size: clamp(32px, 10vw, 58px);
	font-weight: 500;
	line-height: 1.05;
	color: #f5f0e6;
}

body.payouts .pay-cta__desc {
	margin: 0;
	max-width: 614px;
	color: #a8a8a8;
	font-size: 16px;
	line-height: 1.2;
}

body.payouts .pay-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 11px;
	width: 100%;
}

body.payouts .pay-cta__btn {
	width: 100%;
	padding: 18px 28px;
	font-size: 16px;
}

body.payouts .pay-cta__features {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.payouts .pay-cta__feature {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #a8a8a8;
	font-size: 14px;
	line-height: 1.2;
}

body.payouts .pay-cta__check {
	flex-shrink: 0;
	color: var(--pay-positive);
}

@media (min-width: 768px) {
	body.payouts .pay-cta__card {
		gap: 32px;
		padding: 52px 42px;
	}

	body.payouts .pay-cta__desc {
		font-size: 18px;
	}

	body.payouts .pay-cta__actions {
		flex-direction: row;
		width: auto;
	}

	body.payouts .pay-cta__btn {
		width: auto;
	}

	body.payouts .pay-cta__features {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 33px;
	}
}

/* Scroll-reveal — opacity-only fade (keeps backdrop-filter intact); JS gates it. */
body.payouts.pay-anim-ready .pay-section:not(.pay-hero) > .wrapper {
	opacity: 0;
	transition: opacity 0.7s ease;
}

body.payouts.pay-anim-ready .pay-section.is-inview > .wrapper {
	opacity: 1;
}

/* Card hover — warm glow + border in place (no lift/translate). */
body.payouts .pay-wallet,
body.payouts .pay-steps__card {
	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}

@media (hover: hover) {
	body.payouts .pay-wallet:hover,
	body.payouts .pay-steps__card:hover {
		border-color: rgba(255, 170, 60, 0.4);
		box-shadow: inset 0 0 40px -8px rgba(243, 152, 31, 0.2);
	}
}