/**
 * /bitfa-futures/ (and /bitfa-futures/1..7/, /bio/, ?code=… ) — the lead pages.
 *
 * Presentation only. The look is bitfa.fund/start/'s landing stage: dark stage,
 * badge, service cards, one loud CTA.
 *
 * Deliberately NOT built on assets/fund/css/main.css. That file declares a bare
 * `.btn` and a `:root` token block, and these pages render the legacy
 * Tailwind-classed question modal, which must not shift a pixel. Everything
 * here is scoped under .fxl and every token is declared on .fxl, so nothing
 * leaks into the modal, the FAQ accordion, the header or the footer.
 */

.fxl {
	--fxl-primary:   #f7a01d;
	--fxl-primary-d: #de8c0c;
	--fxl-dark:      #1e2125;
	--fxl-dark-2:    #26282c;
	--fxl-dark-3:    #33363b;
	--fxl-muted:     #b9bcbf;
	--fxl-radius:    16px;
	--fxl-maxw:      1200px;
}

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

/* The legacy stylesheet has no .screen-reader-text; the CTA label needs one. */
.fxl .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.fxl-inner {
	width: 100%;
	max-width: var(--fxl-maxw);
	margin-inline: auto;
	padding-inline: 20px;
}

/* ── Stage ───────────────────────────────────────────────────────────── */

.fxl-stage {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--fxl-dark-2) 0%, var(--fxl-dark) 55%, #16181b 100%);
	color: #fff;
	padding-bottom: clamp(38px, 6vh, 68px);
}

.fxl-stage::before {
	content: '';
	position: absolute;
	inset: -180px -140px auto auto;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(247, 160, 29, .20), transparent 65%);
	pointer-events: none;
}

.fxl-stage > * { position: relative; z-index: 1; }

/* ── Head: avatar + H1 + intro ───────────────────────────────────────── */

.fxl-head {
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(26px, 5vh, 52px) 0 clamp(24px, 4vh, 42px);
}

.fxl-avatar {
	width: clamp(76px, 11vw, 104px);
	height: clamp(76px, 11vw, 104px);
	margin: 0 auto 18px;
	border-radius: 50%;
	padding: 3px;
	background: linear-gradient(140deg, #ffb84d, var(--fxl-primary) 55%, var(--fxl-primary-d));
	box-shadow: 0 14px 34px rgba(247, 160, 29, .28);
}

.fxl-avatar img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
	object-fit: cover;
	background: var(--fxl-dark-3);
}

.fxl-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fxl-primary);
	background: rgba(247, 160, 29, .14);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.fxl-title {
	font-size: clamp(24px, 3.6vw, 40px);
	font-weight: 700;
	line-height: 1.45;
	color: #fff;
	margin: 0 0 12px;
}

.fxl-sub {
	color: var(--fxl-muted);
	font-size: clamp(14px, 1.6vw, 18px);
	line-height: 2;
	margin: 0;
}

.fxl-sub p { margin: 0 0 8px; }
.fxl-sub p:last-child { margin-bottom: 0; }
.fxl-sub a { color: var(--fxl-primary); }

/* ── Service cards ───────────────────────────────────────────────────── */

.fxl-services__title {
	font-size: clamp(17px, 2.1vw, 22px);
	font-weight: 700;
	color: #fff;
	text-align: center;
	margin: 0 0 20px;
}

/* Fixed 3 columns rather than auto-fit: the field holds six items, and auto-fit
   turned that into a 4 + 2 row at wide viewports. */
.fxl-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	max-width: 1040px;
	margin-inline: auto;
}

.fxl-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--fxl-radius);
	padding: 18px 18px 20px;
	color: inherit;
	text-decoration: none;
	transition: transform .25s, border-color .25s, background .25s;
}

a.fxl-card:hover {
	transform: translateY(-4px);
	border-color: var(--fxl-primary);
	background: rgba(255, 255, 255, .08);
}

.fxl-card__icon {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
	color: #fff;
	background: linear-gradient(140deg, #ffb84d 0%, var(--fxl-primary) 45%, var(--fxl-primary-d) 100%);
	box-shadow: 0 8px 20px rgba(247, 160, 29, .32);
}

.fxl-card__body { min-width: 0; flex: 1; }

.fxl-card__title {
	margin: 2px 0 6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	color: #fff;
}

.fxl-card__desc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--fxl-muted);
}

.fxl-card__more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fxl-primary);
}

.fxl-card__more i { font-size: 15px; }
a.fxl-card:hover .fxl-card__more { text-decoration: underline; }

/* ── CTA ─────────────────────────────────────────────────────────────── */

.fxl-cta {
	max-width: 560px;
	margin: clamp(28px, 5vh, 46px) auto 0;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--fxl-radius);
	padding: clamp(20px, 3vh, 28px) clamp(18px, 3vw, 28px);
	text-align: center;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.fxl-cta__title {
	margin: 0 0 6px;
	font-size: clamp(16px, 2vw, 20px);
	font-weight: 700;
	color: #fff;
}

.fxl-cta__note {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--fxl-muted);
}

/* Bottom corner of the card, opposite the reading direction, and quiet: it is
   an escape hatch, not the second CTA it looked like in brand orange. */
.fxl-support {
	display: flex;
	align-items: center;
	gap: 5px;
	width: fit-content;
	margin-block-start: 14px;
	margin-inline-start: auto;   /* pushes it to the left edge in RTL */
	color: var(--fxl-muted);
	font-size: 12px;
	font-weight: 400;
	text-decoration: none;
	opacity: .75;
	transition: color .2s, opacity .2s;
}

.fxl-support i { font-size: 13px; }
.fxl-support:hover { color: var(--fxl-primary); opacity: 1; }

.fxl-form {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

/* Country select + number share one framed field, so they read as a single
   phone input rather than two controls that happen to sit together. */
.fxl-tel {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: stretch;
	height: 52px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .07);
	transition: border-color .2s, background .2s;
}

.fxl-tel:focus-within { border-color: var(--fxl-primary); background: rgba(255, 255, 255, .1); }
.fxl-tel.error { border-color: #dc2626; }

.fxl-cc {
	/* Last in the field, i.e. on the left in RTL — where phone inputs put the
	   country code. The divider therefore sits on the select's inline-start
	   edge, the one facing the number. */
	order: 2;
	flex: none;
	max-width: 116px;
	padding: 0 26px 0 10px;
	border: 0;
	border-inline-start: 1px solid rgba(255, 255, 255, .18);
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	/* Caret drawn here because appearance:none removes the native one. */
	background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .55) 50%), linear-gradient(135deg, rgba(255, 255, 255, .55) 50%, transparent 50%);
	background-position: 10px calc(50% - 2px), 15px calc(50% - 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	/* The list itself renders in the OS popup, which is light on every
	   platform — set both so the options are not white on white. */
	color-scheme: dark;
}

.fxl-cc:focus { outline: none; }
.fxl-cc option { background: #26282c; color: #fff; }

.fxl-form .fxl-input {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0 14px;
	border: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 15px;
	direction: ltr;
	text-align: right;
}

.fxl-form .fxl-input::placeholder { color: rgba(255, 255, 255, .45); direction: rtl; text-align: right; }
.fxl-form .fxl-input:focus { outline: none; }

.fxl-error {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.8;
	color: #ff8f8f;
	text-align: start;
}

.fxl-error[hidden] { display: none; }

/* The submit button is still includes/components/button.php, so it keeps its
   .btn / .loader / disabled behaviour; only the skin is overridden here. */
.fxl .fxl-submit {
	flex: none;
	height: 52px;
	min-width: 132px;
	padding: 0 26px;
	border: 0;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	background: linear-gradient(135deg, #ffb84d 0%, var(--fxl-primary) 50%, var(--fxl-primary-d) 100%);
	box-shadow: 0 8px 22px rgba(247, 160, 29, .34);
	transition: filter .2s, transform .2s, box-shadow .2s, opacity .2s;
}

.fxl .fxl-submit:hover:not([disabled]) {
	filter: brightness(1.05);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(247, 160, 29, .44);
}

/* Neutral rather than a dimmed orange — a washed-out gradient reads as a
   broken button, a grey one reads as "not filled in yet". */
.fxl .fxl-submit[disabled] {
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .45);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.fxl-hint {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 14px;
	margin: 16px 0 0;
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--fxl-muted);
}

.fxl-hint span { white-space: nowrap; }

/* ══ Question modal ═══════════════════════════════════════════════════
 *
 * bitfa.fund's .lead-modal look, applied to includes/components/modal.php's
 * markup. Scoped from body.fxl-lead because the component prints the modal
 * outside .fxl. Everything here is skin only:
 *   - `display` is never set on .modal-question-form-1/-2 — futures.js swaps
 *     them by toggling Tailwind's .hidden / .flex, and a display rule here
 *     would fight it.
 *   - the radio inputs keep .hidden, their name/value/data-answer, and the
 *     labels keep their `for`, so the payload is identical.
 * ═════════════════════════════════════════════════════════════════════ */

body.fxl-lead .fxl-q-backdrop {
	background: rgba(20, 22, 25, .6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

body.fxl-lead .fxl-q {
	border-radius: var(--fxl-radius, 16px);
	box-shadow: 0 20px 60px rgba(30, 33, 37, .28);
	border: 1px solid #e8eaed;
	padding: 26px 22px;
	max-height: min(88svh, 720px);
	overflow-y: auto;
}

/* The component parks the close glyph outside the box; bring it inside as the
   fund's round button. It is absolute inside .modal-inner-container, so the
   forms carry a top margin big enough to clear it — otherwise it lands on the
   step meter and cuts the bar in half. */
body.fxl-lead .fxl-q__close {
	inset-block-start: 0;
	inset-inline-start: 0;
	inset-inline-end: auto;
	width: 34px;
	height: 34px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid #dfe2e6;
	background: #f3f4f6;
	color: #6f7378;
	font-size: 13px;
	transition: color .2s, border-color .2s, background .2s;
}

body.fxl-lead .fxl-q__close:hover { color: #1e2125; border-color: #f7a01d; background: rgba(247, 160, 29, .1); }

body.fxl-lead .fxl-q .modal-question-form { margin-top: 44px; }

/* Step meter */
body.fxl-lead .fxl-q__progress {
	height: 5px;
	background: #f3f4f6;
	border-radius: 99px;
	overflow: hidden;
	margin: 4px 0 10px;
}

body.fxl-lead .fxl-q__bar {
	display: block;
	height: 100%;
	background: #f7a01d;
	border-radius: 99px;
	transition: width .35s;
}

body.fxl-lead .modal-question-form-1 .fxl-q__bar { width: 50%; }
body.fxl-lead .modal-question-form-2 .fxl-q__bar { width: 100%; }

body.fxl-lead .fxl-q__step {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: #f7a01d;
	text-align: center;
}

body.fxl-lead .fxl-q h3 {
	margin: 6px 0 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.8;
	color: #1e2125;
	text-align: center;
}

/* Option rows — the fund's .lead-choice, widened because these answers are
   full sentences rather than chips. */
body.fxl-lead .fxl-q .modal-question-form label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	background: #f3f4f6;
	color: #6f7378;
	font-size: 13.5px;
	/* 400, not 500. These labels were the only thing on the page asking for
	   DanaFaNum Medium, and the browser fetched all 40KB of it on load for a
	   modal most visitors never open. Everything else here is 400/600/700. */
	font-weight: 400;
	line-height: 1.9;
	text-align: center;
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s;
}

body.fxl-lead .fxl-q .modal-question-form label:hover {
	border-color: #f7a01d;
	background: rgba(247, 160, 29, .08);
}

/* The inputs sit immediately before their label, so checked state is free —
   the old markup gave no selection feedback at all. */
body.fxl-lead .fxl-q .modal-question-form input[type="radio"]:checked + label {
	background: rgba(247, 160, 29, .12);
	border-color: #f7a01d;
	color: #de8c0c;
	font-weight: 700;
}

/* Submit — the fund's .btn--primary, over the legacy .btn / .btn-primary. */
body.fxl-lead .fxl-q .modal-question-form .btn {
	height: 50px;
	margin-top: 6px;
	padding: 0 26px;
	width: 100%;
	border: 0;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #ffb84d 0%, #f7a01d 50%, #de8c0c 100%);
	box-shadow: 0 6px 18px rgba(247, 160, 29, .32);
	transition: filter .2s, transform .2s, box-shadow .2s;
}

body.fxl-lead .fxl-q .modal-question-form .btn:hover:not([disabled]) {
	filter: brightness(1.05);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(247, 160, 29, .42);
}

body.fxl-lead .fxl-q .modal-question-form .btn[disabled] {
	background: #f3f4f6;
	color: #a4a8ad;
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

@media (max-width: 600px) {
	body.fxl-lead .fxl-q { padding: 22px 16px; }
	body.fxl-lead .fxl-q h3 { font-size: 15.5px; }
	body.fxl-lead .fxl-q .modal-question-form label { min-height: 46px; font-size: 12.5px; padding: 10px 12px; }
}

/* ── FAQ / SEO box: the legacy Tailwind markup, unchanged, on a light band ─ */

.fxl-faq,
.fxl-seo {
	max-width: var(--fxl-maxw);
	margin-inline: auto;
	padding: clamp(34px, 6vh, 64px) 20px;
}

.fxl-faq__title,
.fxl-seo .seo-box-item {
	font-size: clamp(20px, 2.6vw, 30px);
	font-weight: 700;
	text-align: center;
	margin: 0 0 26px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.fxl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	/*
	 * Phones: the goal is the whole funnel — headline, what you get, and the
	 * form — inside roughly one viewport, so a lead never has to scroll to
	 * convert. The stacked centred head alone used to eat half the screen.
	 */

	.fxl-stage { padding-bottom: 18px; }
	.fxl-inner { padding-inline: 14px; }

	/* Avatar beside the H1 instead of above it, as the page did before the
	   re-skin. Saves ~120px on its own. */
	.fxl-head {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 12px;
		text-align: start;
		max-width: none;
		padding: 12px 0 14px;
	}

	.fxl-avatar { width: 58px; height: 58px; margin: 0; flex: none; padding: 2px; }
	.fxl-badge { display: none; }           /* decorative; /start/ drops it too */
	.fxl-title { flex: 1; min-width: 0; font-size: 21px; line-height: 1.5; margin: 0; }
	.fxl-sub { flex-basis: 100%; font-size: 13px; line-height: 1.8; }

	.fxl-services__title { font-size: 15px; margin-bottom: 12px; text-align: start; }

	/* Two compact columns rather than six full-width rows. */
	.fxl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

	.fxl-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: 10px;
		border-radius: 12px;
	}

	.fxl-card__icon { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
	.fxl-card__title { margin: 0 0 3px; font-size: 13px; line-height: 1.5; }
	.fxl-card__desc { font-size: 11px; line-height: 1.65; }
	.fxl-card__more { margin-top: 6px; font-size: 11px; }

	.fxl-cta { margin-top: 16px; padding: 14px; border-radius: 14px; }
	.fxl-cta__title { font-size: 15.5px; margin-bottom: 4px; }
	.fxl-cta__note { margin-bottom: 10px; font-size: 12px; }
	.fxl-support { margin-block-start: 10px; font-size: 11.5px; }

	/* Column flex makes height the main axis, so the input needs flex-basis
	   auto — with `flex: 1 …0%` it would collapse to its content height and
	   the field ended up half the button's height. */
	/* flex: none on the field for the same reason as the button — in a column
	   container flex-basis governs height and would collapse it. */
	.fxl-form { flex-direction: column; gap: 8px; }
	.fxl-form .fxl-tel { flex: none; width: 100%; }
	.fxl-cc { max-width: 104px; font-size: 12.5px; }
	.fxl .fxl-submit { width: 100%; }
	.fxl-error { font-size: 12px; }
	/* Stays a wrapping row — each item is nowrap, so it breaks between the
	   three claims and never mid-phrase, and costs two lines instead of three. */
	.fxl-hint { gap: 2px 10px; margin-top: 10px; font-size: 11px; line-height: 1.7; }

	.fxl-faq, .fxl-seo { padding: 28px 14px; }
	.fxl-faq__title { font-size: 19px; margin-bottom: 18px; }
}