/*
 * xcoins-t2.css — T2 "Buy with [Method]" page. Loaded ONLY on T2
 * (xcoins/layout.php), on top of the shared xcoins-pages.css tokens.
 * Figma: wKngnASKnuyGoMCj5VAIqv — 384:3520 (desktop) / 384:2880 (mobile).
 */

.xc-t2 .xc-container {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 28px;
	box-sizing: border-box;
}
.xc-t2 section {
	padding: 64px 0;
	border-top: none;
}
.xc-t2 section:first-child { padding-top: 0; }
.xc-t2 .eyebrow {
	display: block;
	font-family: var(--body);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--bright-blue);
	margin: 0 0 12px;
	line-height: 1.25;
}
.xc-t2 h2 {
	font-family: var(--display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	letter-spacing: 0;
	margin: 0 0 16px;
	color: var(--off-white);
	font-variation-settings: "wdth" 100;
}
.xc-t2 .section-sub {
	color: #cfd6e2;
	margin: 0 0 40px;
	max-width: 820px;
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.25;
}

/* Glass border (cached pages may lack .glass-border class until regenerate) */
.xc-t2 .glass-border,
.xc-t2 .t2-coins__card,
.xc-t2 .t2-step,
.xc-t2 .t2-tip {
	position: relative;
	border-radius: 12px;
	border: 1px solid rgba(249, 253, 255, .1);
}
.xc-t2 .glass-border::before,
.xc-t2 .t2-coins__card::before,
.xc-t2 .t2-step::before,
.xc-t2 .t2-tip::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	pointer-events: none;
	z-index: 2;
	background:
		radial-gradient(circle at 0% 0%, rgba(255,255,255,.32) 0%, rgba(255,255,255,.32) 3%, rgba(255,255,255,.14) 45%, transparent 52%),
		radial-gradient(circle at 100% 100%, rgba(255,255,255,.4) 3%, rgba(255,255,255,.16) 43%, transparent 46%),
		linear-gradient(135deg, rgba(249,253,255,.12) 50%, rgba(249,253,255,.14) 50%, rgba(249,253,255,.22) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* ---------- Hero — Figma 384:3553 (D) / 384:2902 (M) ---------- */
.t2-hero {
	position: relative;
	overflow: hidden;
	/*
	 * FLOOR SIZED TO THE WIDGET'S TALLEST STATE, not to the design's resting one.
	 *
	 * The widget changes height in normal use: the "All fees included" panel adds
	 * ~90px when opened (three rows: service, network, total). With the hero hugging that, every change resized the
	 * section — and these heroes paint a diagonal gradient / background art scaled
	 * to their own box, so the whole backdrop visibly re-rendered. Sized to the
	 * tallest reachable state, the shorter ones leave hero whitespace instead.
	 *
	 * Raised by 40px on 2026-08-18: the fee panel gained its third row (total) and
	 * the payment dropdown became a two-segment switch. Raise it again if either
	 * grows — and measure in a browser, this was computed from box math.
	 */
	min-height: 870px;
	padding: 0;
	background: linear-gradient(
		233.49deg,
		var(--true-blue) 12.423%,
		var(--rich-black) 86.271%
	);
}
.t2-hero .xc-container {
	position: relative;
	z-index: 1;
	padding-top: 16px;
	padding-bottom: 64px;
}
.t2-crumbs {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 72px;
	padding: 0;
	list-style: none;
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.25;
	color: var(--slate);
	flex-wrap: wrap;
}
.t2-crumbs a { color: var(--slate); text-decoration: none; }
.t2-crumbs a:hover { color: var(--off-white); }
.t2-crumbs [aria-current="page"] { color: var(--off-white); }
.t2-crumbs__sep {
	display: inline-flex;
	flex: 0 0 12px;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	color: var(--slate);
}
.t2-crumbs__sep svg { display: block; width: 100%; height: 100%; }
/* Desktop: full trail. Mobile: Home › … › Method (Figma 384:2902) */
.t2-crumbs__ellipsis,
.t2-crumbs__ellipsis-sep { display: none; }

.t2-hero__grid {
	/* static so absolutely-positioned art (cached: inside grid) still anchors to .t2-hero */
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 48px;
	align-items: start;
}
/*
 * Credit-card art — Figma 384:4505 on 1440 frame:
 * left 428 · top calc(50% − 40px) · translateY(−50%) · 807×734 · opacity .8
 * Positioned on .t2-hero (not the grid) so %/px match the full frame.
 */
.t2-hero__art {
	position: absolute;
	left: calc(50% - 720px + 428px); /* 428px from left of a centered 1440 artboard */
	top: calc(50% - 40px);
	transform: translateY(-50%);
	width: 807px;
	height: 734px;
	z-index: 0;
	pointer-events: none;
	opacity: .8;
	/* Cached HTML may still point at payment-methods/hero-visual.webp */
	background: url("../img/t2/hero-credit-card.webp") center / contain no-repeat;
}
.xc-t2 .t2-hero__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	opacity: 0; /* CSS background is the source of truth until all pages regen */
}
/* Narrower than 1440: keep Figma ratios of the viewport */
@media (max-width: 1439px) {
	.t2-hero__art {
		left: 29.722%; /* 428 / 1440 */
		width: 56.042%; /* 807 / 1440 */
		height: auto;
		aspect-ratio: 807 / 734;
		max-width: 807px;
	}
}
.t2-hero__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 656px;
}
.t2-hero__title {
	font-family: var(--display);
	font-weight: 800;
	color: var(--off-white);
	font-size: 76px;
	line-height: 1;
	letter-spacing: 0;
	margin: 0;
	font-variation-settings: "wdth" 100;
}
.t2-hero__answer {
	font-family: var(--body);
	font-size: 16px;
	font-weight: 400;
	color: #cfd6e2;
	line-height: 1.25;
	max-width: 560px;
	margin: 0;
}
.t2-hero__answer p { margin: 0; }
.t2-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 12px;
	margin: 0;
}
.xcoins-main .t2-hero .xc-btn--primary {
	background: var(--true-blue);
	color: #fff;
	border-color: transparent;
	padding: 17px 33px;
	min-height: 50px;
	text-decoration: none;
}
.xcoins-main .t2-hero .xc-btn--secondary {
	background: transparent;
	color: var(--off-white);
	border-color: var(--off-white);
	padding: 17px 33px;
	min-height: 50px;
	text-decoration: none;
}
.xcoins-main .t2-hero .xc-btn--secondary:hover {
	background: rgba(249, 253, 255, .08);
	text-decoration: none;
}
.t2-hero__trust {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 6px 0;
	font-family: var(--body);
	font-size: 14px;
	line-height: 1.25;
	color: var(--soft-white, #eeeff2);
}
.t2-hero__trust::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: var(--bright-blue);
	flex-shrink: 0;
}
.t2-hero__widget {
	position: relative;
	z-index: 1;
	justify-self: end;
	width: 100%;
	max-width: 536px;
}
.t2-hero__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 160px;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(17, 22, 32, 0) 0%, var(--rich-black) 100%);
}

@media (max-width: 1100px) {
	.t2-hero__title { font-size: clamp(40px, 6vw, 64px); }
}

@media (max-width: 960px) {
	.t2-hero {
		min-height: 0;
		/* Figma 384:2902 — top rich-black → bottom true-blue */
		background: linear-gradient(180deg, var(--rich-black) 0%, var(--true-blue) 100%);
	}
	/* `.xc-t2 section` (0,2,0) beats `.t2-hero { padding: 0 }` (0,1,0), so the hero
	   was carrying the section rhythm's bottom padding on top of the container's
	   own. Figma 384:2902 draws 32px below the widget, not 64. */
	.xc-t2 .t2-hero { padding: 0; }
	.t2-hero .xc-container {
		padding-inline: 16px;
		padding-top: 16px;
		padding-bottom: 32px;
	}
	.t2-crumbs { margin-bottom: 4px; font-size: 16px; }
	.t2-crumbs__mid { display: none; }
	.t2-crumbs__ellipsis,
	.t2-crumbs__ellipsis-sep { display: inline-flex; }
	.t2-crumbs__ellipsis {
		align-items: center;
		color: var(--slate);
		line-height: 1.25;
	}
	.t2-hero__grid {
		/* minmax(0,1fr), never a bare 1fr — the track would floor at the widget's
		   ~463px min-content and overflow a 375px viewport (T4 bug #13). */
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	/*
	 * Mobile art — Figma 384:4507 on 375 frame:
	 * left calc(50% − 10px) · top 240 · 429×391 · opacity .6 · translateX(−50%)
	 * Sits behind copy + widget (not in document flow).
	 */
	.t2-hero__art {
		left: calc(50% - 10px);
		top: 240px;
		transform: translateX(-50%);
		width: 429px;
		height: 391px;
		max-width: none;
		aspect-ratio: auto;
		opacity: .6;
		z-index: 0;
	}
	.t2-hero__copy {
		max-width: none;
		gap: 16px;
	}
	.t2-hero__title { font-size: 40px; }
	.t2-hero__answer { max-width: none; }
	.t2-hero__ctas {
		flex-direction: column;
		width: 100%;
		padding-top: 8px;
		gap: 12px;
	}
	.xcoins-main .t2-hero .xc-btn--primary,
	.xcoins-main .t2-hero .xc-btn--secondary {
		width: 100%;
		min-height: 50px;
		padding: 16px 24px;
		box-sizing: border-box;
	}
	.xcoins-main .t2-hero .xc-btn--secondary {
		padding: 17px 33px;
	}
	.t2-hero__trust {
		gap: 8px;
		padding-top: 4px;
		align-items: flex-start;
	}
	.t2-hero__trust::before {
		width: 5px;
		height: 5px;
		border-radius: 2.5px;
		margin-top: 6px;
	}
	.t2-hero__widget {
		max-width: none;
		justify-self: stretch;
	}
	.t2-hero__fade {
		height: 180px;
		background: linear-gradient(180deg, rgba(17, 22, 32, 0) 0%, var(--rich-black) 100%);
	}
}

/* ---------- Coins — Figma 395:520 / 395:829 ---------- */
.t2-coins { background: var(--rich-black); }
.t2-coins__head { margin-bottom: 24px; }
.t2-coins__head .eyebrow { margin-bottom: 12px; }
.t2-coins__head h2 { margin-bottom: 16px; }
.t2-coins__head .section-sub { margin-bottom: 0; }
.t2-coins__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.t2-coins__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	min-height: 83px;
	padding: 24px;
	background: rgba(249, 253, 255, .05);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.xc-t2 .t2-coins__card,
.xc-t2 .t2-coins__card:hover,
.xc-t2 .t2-coins__card:focus,
.xcoins-main .t2-coins__card,
.xcoins-main .t2-coins__card:hover {
	color: var(--off-white);
	text-decoration: none;
}
.t2-coins__card:hover {
	background: rgba(249, 253, 255, .08);
	border-color: rgba(26, 156, 252, .4);
}
.t2-coins__id {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}
.xc-t2 .t2-coins__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: contain;
}
.t2-coins__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.t2-coins__name {
	display: block;
	font-family: var(--display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	color: var(--off-white);
	font-variation-settings: "wdth" 100;
}
.t2-coins__ticker {
	display: block;
	font-family: var(--body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.25;
	color: var(--slate);
}
.t2-coins__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	height: 16px;
	font-family: var(--display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: var(--bright-blue);
	white-space: nowrap;
}
.t2-coins__cta svg {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}
/* Cached flat markup (icon + anonymous span + Buy, no arrow) */
.t2-coins__card:not(:has(.t2-coins__id)) {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	column-gap: 12px;
	align-items: center;
}
.t2-coins__card:not(:has(.t2-coins__id)) > .t2-coins__icon { grid-column: 1; align-self: start; }
.t2-coins__card:not(:has(.t2-coins__id)) > span:not(.t2-coins__cta) {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.t2-coins__card:not(:has(.t2-coins__id)) > .t2-coins__cta { grid-column: 3; }
.t2-coins__cta:not(:has(svg))::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.667 8h10.666M9 3.667 13.333 8 9 12.333' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.667 8h10.666M9 3.667 13.333 8 9 12.333' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 1100px) {
	.t2-coins__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.t2-coins__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
	.t2-coins__card {
		min-height: 69px;
		padding: 17px;
		border-radius: 14px;
	}
}

/* ---------- How it works — Figma 395:1623 (D) / 395:1671 (M) ---------- */
.t2-steps { background: var(--rich-black); }
/* Desktop container: 40px between head and card row (Figma 395:1624) */
.t2-steps > .xc-container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 40px;
}
.t2-steps__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin: 0;
	max-width: 820px;
}
.t2-steps__head .eyebrow,
.t2-steps > .xc-container > .eyebrow {
	margin: 0 0 12px; /* Figma section-head wrap gap */
}
.t2-steps__head h2,
.t2-steps > .xc-container > h2 {
	margin: 0 0 16px; /* Figma h3 group gap before sub */
	max-width: 820px;
}
.t2-steps__head .section-sub,
.t2-steps > .xc-container > .section-sub {
	margin: 0;
	max-width: 820px;
	color: #cfd6e2;
	font-family: var(--body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
}
.t2-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
}
.t2-step {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-height: 266px;
	height: 266px;
	box-sizing: border-box;
	overflow: hidden;
	background: rgba(249, 253, 255, .05);
	padding: 24px;
	/* border + glint from .glass-border / .t2-step::before */
}
.t2-step__copy {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	position: relative;
	z-index: 1;
}
.t2-step__badge {
	display: block;
	font-family: var(--display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--bright-blue);
	font-variation-settings: "wdth" 100;
}
.t2-step__title {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	color: var(--off-white);
	font-variation-settings: "wdth" 100;
}
.t2-step__body {
	margin: 0;
	font-family: var(--body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--slate); /* #788196 */
}
.t2-step__visual {
	position: relative;
	z-index: 1;
	flex: 0 0 132px;
	width: 132px;
	height: 218px;
	align-self: flex-start;
	pointer-events: none;
}
.xc-t2 .t2-step__art {
	position: absolute;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	max-width: 132px;
	object-fit: contain;
	display: block;
}
/* Figma crop sizes / anchors */
.t2-step:nth-child(1) .t2-step__art { width: 132px; height: 98px; left: 0.33px; right: auto; top: 120px; bottom: auto; }
.t2-step:nth-child(2) .t2-step__art { width: 127px; height: 149px; left: 50%; right: auto; bottom: 0; transform: translateX(-50%); }
.t2-step:nth-child(3) .t2-step__art { width: 130px; height: 205px; right: 0; bottom: 0; }

@media (max-width: 960px) {
	/* Figma 395:1671 — section gap 12; title→sub 8; list pt 12 */
	.t2-steps > .xc-container { gap: 0; }
	.t2-steps__head {
		margin: 0;
		max-width: none;
		width: 100%;
	}
	.t2-steps__head .eyebrow,
	.t2-steps > .xc-container > .eyebrow {
		margin: 0 0 12px;
	}
	.t2-steps__head h2,
	.t2-steps > .xc-container > h2 {
		margin: 0 0 8px;
		max-width: none;
	}
	.t2-steps__head .section-sub,
	.t2-steps > .xc-container > .section-sub {
		margin: 0 0 12px;
	}
	.t2-steps__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		padding-top: 12px;
	}
	/* Cached: no .section-sub — keep 24px total head→cards (12+12) */
	.t2-steps > .xc-container > h2 + .t2-steps__list {
		margin-top: 0;
		padding-top: 24px;
	}
	.t2-steps__head + .t2-steps__list {
		padding-top: 12px;
	}
	.t2-step {
		min-height: 266px;
		height: 266px;
		width: 100%;
	}
}

/* ---------- Good to know — Figma 384:2570 (D) / 384:1933 (M) ---------- */
.t2-tips { background: var(--rich-black); }
.t2-tips__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}
.t2-tips__head .eyebrow { margin: 0; }
.t2-tips__head h2 { margin: 0; max-width: 600px; }
/* Cached: eyebrow + h2 are direct children of .xc-container */
.t2-tips > .xc-container > .eyebrow { margin: 0; }
.t2-tips > .xc-container > .eyebrow + h2 { margin-top: 12px; margin-bottom: 0; }
.t2-tips__head + .t2-tips__grid,
.t2-tips > .xc-container > h2 + .t2-tips__grid {
	margin-top: 24px;
}
.t2-tips__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.t2-tip {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	box-sizing: border-box;
	min-height: 136px;
	padding: 24px;
	background: rgba(249, 253, 255, .05);
	/* border + glint from .glass-border / .t2-tip::before */
}
/* Cached markup: icon + title + body as siblings (no .t2-tip__copy) */
.t2-tip:not(:has(.t2-tip__copy)) {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 18px;
	row-gap: 7px;
	align-items: start;
}
.t2-tip:not(:has(.t2-tip__copy)) > .t2-tip__icon {
	grid-column: 1;
	grid-row: 1 / -1;
}
.t2-tip:not(:has(.t2-tip__copy)) > .t2-tip__title {
	grid-column: 2;
	grid-row: 1;
}
.t2-tip:not(:has(.t2-tip__copy)) > .t2-tip__body {
	grid-column: 2;
	grid-row: 2;
}
.t2-tip__icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	position: relative;
	z-index: 1;
	/* Figma icons forced even when cached HTML still has old why-xcoins SVGs */
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.t2-tips__grid .t2-tip:nth-child(1) .t2-tip__icon {
	background-image: url("../img/t2/tip-card.svg");
}
.t2-tips__grid .t2-tip:nth-child(2) .t2-tip__icon {
	background-image: url("../img/t2/tip-flash.svg");
}
.t2-tips__grid .t2-tip:nth-child(3) .t2-tip__icon {
	background-image: url("../img/t2/tip-bank.svg");
}
.t2-tip__icon img,
.t2-tip__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Hide cached/old glyphs; PHP img after regenerate matches the same assets */
	opacity: 0;
}
.t2-tip__copy {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	position: relative;
	z-index: 1;
}
.t2-tip__title {
	margin: 0;
	font-family: var(--body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.25;
	color: var(--off-white);
}
.t2-tip__body {
	margin: 0;
	font-family: var(--body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--slate);
}
.t2-tip__body a,
.xcoins-main .t2-tip__body a {
	color: var(--bright-blue);
	font-weight: 700;
	text-decoration: none;
}
.t2-tip__body a:hover,
.xcoins-main .t2-tip__body a:hover {
	text-decoration: underline;
}

@media (max-width: 960px) {
	.t2-tips__head + .t2-tips__grid,
	.t2-tips > .xc-container > h2 + .t2-tips__grid {
		margin-top: 20px; /* Figma mobile: list pt 20 after 12 gap head */
	}
	.t2-tips__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.t2-tip {
		min-height: 0;
	}
}

/* ---------- FAQ — Figma 395:1735; shared .xc-faq + cached .t2-faq ---------- */
.xc-t2 .t2-faq,
.xc-t2 .xc-faq {
	padding: 64px 0;
	background: var(--rich-black);
}
.xc-t2 .t2-faq .xc-container,
.xc-t2 .xc-faq .xc-container {
	padding-inline: 28px;
}
.xc-t2 .t2-faq__grid,
.xc-t2 .xc-faq__layout {
	display: grid;
	grid-template-columns: minmax(0, 397px) minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}
.xc-t2 .t2-faq__grid > div:first-child,
.xc-t2 .xc-faq__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 397px;
}
.xc-t2 .t2-faq .eyebrow,
.xc-t2 .xc-faq__intro .buy-section__eyebrow { margin: 0; }
.xc-t2 .t2-faq__grid > div:first-child h2,
.xc-t2 .xc-faq__intro h2 {
	margin: 0;
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	color: var(--off-white);
}
.xc-t2 .t2-faq__list,
.xc-t2 .xc-faq__list {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 821px;
	justify-self: end;
	border-top: 1px solid rgba(255, 255, 255, .1);
	list-style: none;
}
.xc-t2 .t2-faq__item,
.xc-t2 .xc-faq__item {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	background: transparent;
	border-radius: 0;
	margin: 0;
}
.xc-t2 .t2-faq__item[open],
.xc-t2 .xc-faq__item.is-open { gap: 12px; }
.xc-t2 .t2-faq__item > summary,
.xc-t2 .xc-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	color: var(--off-white);
	font-family: var(--body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
	list-style: none;
}
.xc-t2 .t2-faq__item > summary::-webkit-details-marker { display: none; }
.xc-t2 .t2-faq__item > summary:hover,
.xc-t2 .xc-faq__q:hover { color: var(--bright-blue); }
.xc-t2 .t2-faq__chev { display: none !important; }
.xc-t2 .t2-faq__item > summary::after {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M17 9H1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 17V1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M17 9H1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 17V1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.xc-t2 .t2-faq__item[open] > summary::after {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M17 9H1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M17 9H1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.xc-t2 .t2-faq__answer,
.xc-t2 .xc-faq__a {
	margin: 0;
	padding: 0;
	max-width: 670px;
	font-family: var(--body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	color: #cfd6e2;
}
.xc-t2 .xc-faq__icon {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	color: var(--off-white);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M17 9H1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 17V1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M17 9H1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 17V1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.xc-t2 .xc-faq__icon::before,
.xc-t2 .xc-faq__icon::after { content: none; }
.xc-t2 .xc-faq__item.is-open .xc-faq__icon {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M17 9H1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M17 9H1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.xc-t2 .xc-faq__a { display: none; }
.xc-t2 .xc-faq__item.is-open .xc-faq__a { display: block; }

@media (max-width: 960px) {
	.xc-t2 .t2-faq,
	.xc-t2 .xc-faq { padding: 32px 0; }
	.xc-t2 .t2-faq .xc-container,
	.xc-t2 .xc-faq .xc-container { padding-inline: 16px; }
	.xc-t2 .t2-faq__grid,
	.xc-t2 .xc-faq__layout {
		grid-template-columns: 1fr;
		gap: 25px;
	}
	.xc-t2 .t2-faq__grid > div:first-child,
	.xc-t2 .xc-faq__intro { max-width: none; }
	.xc-t2 .t2-faq__grid > div:first-child h2,
	.xc-t2 .xc-faq__intro h2 {
		font-size: 24px;
		max-width: none;
	}
	.xc-t2 .t2-faq__list,
	.xc-t2 .xc-faq__list {
		max-width: none;
		justify-self: stretch;
	}
	.xc-t2 .t2-faq__answer,
	.xc-t2 .xc-faq__a { max-width: none; }
}

/* ---------- Other methods — Figma 395:1830 (D) / 395:2242 (M) ---------- */
.t2-more {
	position: relative;
	overflow: hidden;
	background: var(--rich-black);
}
/* Cached markup used a 2-col grid — collapse so art can float like Figma */
.t2-more__grid {
	display: block;
	position: static;
}
.t2-more .xc-container {
	/* static so absolute art climbs to .t2-more (works for cached + fresh markup) */
	position: static;
}
.t2-more__head,
.t2-more__pills,
.t2-more__all,
.t2-more__grid > div:first-child {
	position: relative;
	z-index: 1;
}
.t2-more__art {
	position: absolute;
	/* Figma: left 938 / top -58 / 480×480 on 1440 */
	left: 65.14%;
	top: -58px;
	width: 480px;
	height: 480px;
	opacity: .25;
	pointer-events: none;
	z-index: 0;
	/* Force image 116.webp even when cached HTML still points at hero-visual */
	background: url("../img/t2/other-methods.webp") center / cover no-repeat;
}
.t2-more__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}
.t2-more__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 24px;
}
.t2-more__head .eyebrow { margin: 0; }
.t2-more__head h2 {
	margin: 0;
	max-width: 820px;
}
.t2-more__pills {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.t2-more__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 40px;
	padding: 12px 20px;
	border-radius: 21.5px;
	border: 1px solid var(--slate);
	background: transparent;
	font-family: var(--display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: var(--soft-white, #eeeff2);
	text-decoration: none;
	font-variation-settings: "wdth" 100;
	transition: border-color .15s ease, color .15s ease;
}
.xcoins-main .t2-more__pill,
.xcoins-main .t2-more__pill:hover,
.xcoins-main .t2-more__pill:focus {
	color: var(--soft-white, #eeeff2);
	text-decoration: none;
}
.t2-more__pill:hover {
	border-color: var(--bright-blue);
	color: var(--bright-blue);
}
.xcoins-main .t2-more__pill:hover {
	color: var(--bright-blue);
}
.t2-more__all {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 12px 10px 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: var(--bright-blue);
	text-decoration: none;
}
.xcoins-main .t2-more__all,
.xcoins-main .t2-more__all:hover,
.xcoins-main .t2-more__all:focus {
	color: var(--bright-blue);
	text-decoration: none;
}
/* Cached HTML still has a diagonal "external link" glyph — hide it and draw
   Figma's right arrow (659_group @ −90°). Use background-image (not mask):
   stroke-only SVGs often render as an empty mask. */
.t2-more__all svg {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
}
.t2-more__all::after {
	content: "";
	display: block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.667 8h10.666M9 3.667 13.333 8 9 12.333' stroke='%231A9CFC' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 960px) {
	.xc-t2 .xc-container { padding-inline: 16px; }
	.xc-t2 section { padding: 32px 0; }
	.xc-t2 h2 { font-size: 24px; }
	/* Figma mobile: art centered behind pills, 402×402 @ 25% — do not hide */
	.t2-more__art {
		left: 50%;
		top: 50%;
		right: auto;
		transform: translate(-50%, -50%);
		width: 402px;
		height: 402px;
		display: block;
	}
	.t2-more__head {
		gap: 12px;
		margin-bottom: 0;
	}
	.t2-more__pills {
		margin: 0;
		padding-top: 16px;
	}
	.t2-more__all {
		margin-top: 16px;
	}
}