/*
 * xcoins-t1.css — T1 "Buy [Coin]" page. Loaded ONLY on T1 (xcoins/layout.php),
 * on top of the shared xcoins-pages.css tokens. Figma file wKngnASKnuyGoMCj5VAIqv —
 * 868:12318 (desktop) / 868:11560 (mobile).
 */

.xc-t1 .xc-container {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 28px;
	box-sizing: border-box;
}
.xc-t1 section {
	padding: 64px 0;
	border-top: none;
}
.xc-t1 section:first-child { padding-top: 0; }
.xc-t1 .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-t1 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);
}
.xc-t1 .section-sub {
	color: #cfd6e2;
	margin: 0 0 40px;
	max-width: 820px;
	font-size: 16px;
	line-height: 1.25;
}

/* ---------- Hero — Figma 868:13189 (D) / 872:153 (M) ---------- */
.t1-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;
	/* Figma: linear-gradient(233.49deg, True Blue 12.42%, Rich Black 86.27%) */
	background: linear-gradient(
		233.49deg,
		var(--true-blue) 12.423%,
		var(--rich-black) 86.271%
	);
}
.t1-hero .xc-container {
	position: relative;
	z-index: 1;
	padding-top: 16px;
	padding-bottom: 64px;
}
.t1-crumbs {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 72px;
	padding: 0;
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.25;
	color: var(--slate);
	flex-wrap: wrap;
}
.t1-crumbs a { color: var(--slate); text-decoration: none; }
.t1-crumbs a:hover { color: var(--off-white); }
.t1-crumbs [aria-current="page"] { color: var(--off-white); }
.t1-crumbs__sep {
	display: inline-flex;
	flex: 0 0 12px;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	color: var(--slate);
}
.t1-crumbs__sep svg { display: block; width: 100%; height: 100%; }

.t1-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 48px;
	align-items: start;
}
.t1-hero__art {
	position: absolute;
	/* Figma 872:2: left 503 / top 66 / 676×675 on 1440×810 */
	left: 34.931%;
	top: 66px;
	width: 46.944%;
	aspect-ratio: 676 / 675;
	z-index: 0;
	pointer-events: none;
	opacity: .8;
}
.xc-t1 .t1-hero__art img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.t1-hero__art--placeholder {
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(26,156,252,.25) 45%, rgba(1,90,223,.05) 75%);
	border: 1px solid rgba(255,255,255,.15);
}
.t1-hero__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 656px;
}
.t1-hero__title {
	font-family: var(--display);
	font-weight: 800;
	color: var(--off-white);
	font-size: 76px;
	line-height: 1;
	letter-spacing: 0;
	margin: 0;
}
.t1-hero__answer {
	font-family: var(--body);
	font-size: 16px;
	font-weight: 400;
	color: #cfd6e2;
	line-height: 1.25;
	max-width: 560px;
	margin: 0;
}
.t1-hero__answer p { margin: 0; }
.t1-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 12px;
	margin: 0;
}
.xcoins-main .t1-hero .xc-btn--primary {
	background: var(--true-blue);
	color: #fff;
	border-color: transparent;
	padding: 17px 33px;
	min-height: 50px;
	font-size: 16px;
}
.xcoins-main .t1-hero .xc-btn--secondary {
	background: transparent;
	color: var(--off-white);
	border-color: var(--off-white);
	padding: 17px 33px;
	min-height: 50px;
	font-size: 16px;
}
.xcoins-main .t1-hero .xc-btn--secondary:hover {
	background: rgba(249, 253, 255, .08);
	text-decoration: none;
}
.t1-hero__trust {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--soft-white);
	font-size: 14px;
	line-height: 1.25;
	margin: 0;
	padding: 6px 0;
}
.t1-hero__trust::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: var(--bright-blue);
	flex-shrink: 0;
}
.t1-hero__widget {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 536px;
	justify-self: end;
}
.t1-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%);
}
.t1-hero__cta-mobile { display: none; }

@media (max-width: 1100px) {
	.t1-hero__title { font-size: clamp(40px, 6vw, 64px); }
	.t1-hero__art { width: 42%; left: 40%; }
}

@media (max-width: 960px) {
	.t1-hero {
		min-height: 1017px;
		background: linear-gradient(180deg, var(--rich-black) 0%, var(--true-blue) 100%);
	}
	/*
	 * THE HERO'S OWN `padding: 0` HAS NEVER APPLIED. `.xc-t1 section` (0,2,0) sets
	 * the section rhythm and beats `.t1-hero { padding: 0 }` (0,1,0), so the hero
	 * carried that padding UNDER the container's own — 64 + 40 = 104px of dead
	 * gradient below the widget where Figma 872:153 draws 32. Desktop hides it
	 * inside min-height; mobile has no such slack, so it is pure empty space.
	 */
	.xc-t1 .t1-hero { padding: 0; }
	.t1-hero .xc-container {
		padding-inline: 16px;
		padding-top: 16px;
		/* Figma 872:153: widget ends 944.5 in a 977 hero — 32px, not 40. */
		padding-bottom: 32px;
	}
	.t1-crumbs { margin-bottom: 24px; font-size: 14px; }
	.t1-hero__grid {
		/* minmax(0,1fr), never a bare 1fr: `1fr` is minmax(auto,1fr), so the track
		   floors at the widest child's MIN-CONTENT — the widget's, ~463px — and the
		   whole hero column renders 463px wide inside a 343px container, clipped by
		   .t1-hero's overflow:hidden. Same bug already fixed on T4/T5/T6. */
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	.t1-hero__art {
		/* Mobile Figma 873:259: left 11 / top 213 / 353×427 on 375 */
		left: 11px;
		right: auto;
		top: 213px;
		width: 353px;
		max-width: calc(100% - 22px);
		aspect-ratio: 353 / 427;
		opacity: .55;
		z-index: 0;
	}
	.t1-hero__copy { max-width: none; gap: 16px; }
	.t1-hero__title { font-size: 40px; }
	.t1-hero__answer { max-width: none; }
	.t1-hero__ctas {
		flex-direction: column;
		width: 100%;
		padding-top: 0;
		gap: 10px;
	}
	.xcoins-main .t1-hero .xc-btn--primary,
	.xcoins-main .t1-hero .xc-btn--secondary {
		width: 100%;
		min-height: 48px;
		padding: 16px 24px;
	}
	.t1-hero__cta-desktop { display: none; }
	.t1-hero__cta-mobile { display: inline; }
	.t1-hero__widget {
		max-width: none;
		justify-self: stretch;
		margin-top: 8px;
	}
	.t1-hero__fade { height: 120px; }
}

/* ---------- How it works — Figma 933:241 (D) / 933:283 (M) ---------- */
.t1-steps {
	background: var(--rich-black);
}
.t1-steps .section-sub { margin-bottom: 40px; }
.t1-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.t1-step {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-height: 266px;
	box-sizing: border-box;
	background: rgba(249, 253, 255, .05);
	border: 1px solid rgba(249, 253, 255, .1);
	border-radius: 12px;
	padding: 24px;
}
.t1-step__copy {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.t1-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);
}
.t1-step__title {
	font-family: var(--display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	margin: 0;
	color: var(--off-white);
}
.t1-step__body {
	margin: 0;
	color: var(--slate);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.25;
}
.t1-step__visual {
	position: relative;
	flex: 0 0 132px;
	width: 132px;
	align-self: stretch;
	min-height: 170px;
	pointer-events: none;
}
.xc-t1 .t1-step__art {
	position: absolute;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	max-width: 132px;
	object-fit: contain;
}
.t1-step:nth-child(1) .t1-step__art { width: 132px; height: 98px; }
.t1-step:nth-child(2) .t1-step__art { width: 127px; height: 150px; right: 2px; }
.t1-step:nth-child(3) .t1-step__art { width: 130px; height: 205px; bottom: 6px; }
.t1-step__art--ph {
	inset: auto 0 0 auto;
	position: absolute;
	width: 100px;
	height: 120px;
	border-radius: 12px;
	background: linear-gradient(160deg, rgba(26,156,252,.35), transparent 70%);
}
@media (max-width: 960px) {
	.xc-t1 h2 { font-size: 24px; }
	.t1-steps .xc-container { padding-inline: 16px; }
	.t1-steps { padding: 32px 0; }
	.t1-steps__list { grid-template-columns: 1fr; }
}

/* ---------- Ways to buy — Figma 868:12482 (D) / 868:11704 (M) ---------- */
.t1-ways {
	background: var(--rich-black);
}
.t1-ways__grid {
	display: grid;
	grid-template-columns: minmax(0, 654px) minmax(0, 536px);
	gap: 50px;
	align-items: start;
	justify-content: space-between;
}
.t1-ways__left {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
}
.t1-ways__left .section-sub { margin-bottom: 32px; }
.t1-ways__art {
	width: 100%;
	max-width: 460px;
	margin-top: 8px;
}
.xc-t1 .t1-ways__art img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}
.t1-ways__art--placeholder {
	aspect-ratio: 460 / 476;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.3), rgba(26,156,252,.2) 45%, rgba(1,90,223,.05) 75%);
	border: 1px solid var(--line);
}
.t1-ways__right {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 36px;
}
.t1-ways__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 23px;
}
.t1-ways__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 0 23px;
	border-bottom: 1px solid rgba(249, 253, 255, .1);
	text-decoration: none;
	color: inherit;
}
.t1-ways__list > li:last-child .t1-ways__row {
	border-bottom: none;
	padding-bottom: 0;
}
.t1-ways__row:hover .t1-ways__label { color: var(--bright-blue); }
.t1-ways__icons {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.xc-t1 .t1-ways__coin-icon {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	object-fit: contain;
	flex-shrink: 0;
}
.t1-ways__arrow { color: var(--off-white); flex-shrink: 0; opacity: .85; }
.xc-t1 .t1-ways__method-icon {
	max-width: 59px;
	height: 36px;
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
	background: none;
}
.t1-ways__label {
	margin-left: auto;
	padding-right: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: var(--off-white);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-align: right;
}
.t1-ways__go {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 900px;
	background: var(--true-blue);
	color: #fff;
	flex-shrink: 0;
}
.t1-ways__all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: var(--bright-blue);
	text-decoration: none;
}
.t1-ways__all:hover { text-decoration: underline; }

@media (max-width: 1100px) {
	.t1-ways__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}
@media (max-width: 960px) {
	.t1-ways .xc-container { padding-inline: 16px; }
	.t1-ways { padding: 32px 0; }
	.t1-ways__grid { grid-template-columns: 1fr; gap: 32px; }
	.t1-ways__art { display: none; }
	.t1-ways__row { flex-wrap: wrap; gap: 12px; }
	.t1-ways__label {
		margin-left: 0;
		order: 1;
		flex: 1 1 calc(100% - 40px);
		text-align: left;
	}
	.t1-ways__go { order: 2; }
	.t1-ways__icons { order: 0; width: 100%; }
}

/* ---------- FAQ — Figma 868:12718 (D) / 868:11903 (M)
   Supports both:
   - Cached HTML still using .t1-faq / <details> (until regenerate)
   - Fresh HTML from template-parts/faq-section.php (.xc-faq) ---------- */
.xc-t1 .t1-faq,
.xc-t1 .xc-faq {
	padding: 64px 0;
	background: var(--rich-black);
}
.xc-t1 .t1-faq .xc-container,
.xc-t1 .xc-faq .xc-container {
	padding-inline: 28px;
}
.xc-t1 .t1-faq__grid,
.xc-t1 .xc-faq__layout {
	display: grid;
	grid-template-columns: minmax(0, 397px) minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	justify-content: space-between;
}
.xc-t1 .t1-faq__grid > div:first-child,
.xc-t1 .xc-faq__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 397px;
}
.xc-t1 .t1-faq .eyebrow,
.xc-t1 .xc-faq__intro .buy-section__eyebrow {
	margin: 0;
}
.xc-t1 .t1-faq__grid > div:first-child h2,
.xc-t1 .xc-faq__intro h2 {
	margin: 0;
	font-family: var(--display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	color: var(--off-white);
	font-variation-settings: "wdth" 100;
}
.xc-t1 .t1-faq__list,
.xc-t1 .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-t1 .t1-faq__item,
.xc-t1 .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-t1 .t1-faq__item[open],
.xc-t1 .xc-faq__item.is-open {
	gap: 12px;
}
.xc-t1 .t1-faq__item > summary,
.xc-t1 .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-t1 .t1-faq__item > summary::-webkit-details-marker { display: none; }
.xc-t1 .t1-faq__item > summary:hover,
.xc-t1 .xc-faq__q:hover {
	color: var(--bright-blue);
}
/* Cached chevron is an <svg> — ::before/::after on SVG do not work. Hide it. */
.xc-t1 .t1-faq__chev {
	display: none !important;
}
/* Figma +/− via summary::after (closed = plus, open = minus) */
.xc-t1 .t1-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-t1 .t1-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-t1 .t1-faq__answer,
.xc-t1 .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;
}
/* Shared .xc-faq__icon — match Figma stroke-2 +/− (same masks as sections-shared) */
.xc-t1 .xc-faq__icon {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	position: relative;
	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-t1 .xc-faq__q:hover .xc-faq__icon {
	color: inherit;
}
.xc-t1 .xc-faq__icon::before,
.xc-t1 .xc-faq__icon::after {
	content: none;
}
.xc-t1 .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-t1 .xc-faq__a { display: none; }
.xc-t1 .xc-faq__item.is-open .xc-faq__a { display: block; }

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

/* ---------- More to buy — Figma 868:12769 (D) / 868:11949 (M) ---------- */
.t1-mtb {
	background: var(--rich-black);
	padding: 64px 0;
}
.t1-mtb__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}
.t1-mtb__head .eyebrow,
.t1-mtb .xc-container > .eyebrow {
	margin: 0;
}
.t1-mtb__head h2,
.t1-mtb .xc-container > h2 {
	margin: 0;
	max-width: 820px;
}
/* Cached markup: eyebrow + h2 are direct children (no .t1-mtb__head) */
.t1-mtb .xc-container > .eyebrow + h2 {
	margin-top: 12px;
}
/* 24px between heading and cards — Figma desktop gap-24 / mobile 12+12 */
.t1-mtb__head + .t1-mtb__grid,
.t1-mtb .xc-container > h2 + .t1-mtb__grid {
	margin-top: 24px;
}
.t1-mtb__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.t1-mtb__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	min-height: 83px;
	padding: 24px;
	border-radius: 12px;
	background: rgba(249, 253, 255, .05);
	/* border + glint from .glass-border (also applied below for cached HTML) */
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.xc-t1 .t1-mtb__card,
.xc-t1 .t1-mtb__card:hover,
.xc-t1 .t1-mtb__card:focus,
.xc-t1 .t1-mtb__card:focus-visible,
.xcoins-main .t1-mtb__card,
.xcoins-main .t1-mtb__card:hover,
.xcoins-main .t1-mtb__card:focus {
	color: var(--off-white);
	text-decoration: none;
}
.t1-mtb__card:hover {
	background: rgba(249, 253, 255, .08);
	border-color: rgba(26, 156, 252, .4);
}
/* Cached: icon | (name+symbol) | Buy — keep icon glued to text (not space-between) */
.t1-mtb__card:not(:has(.t1-mtb__id)) {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	column-gap: 12px;
	align-items: center;
}
.t1-mtb__card:not(:has(.t1-mtb__id)) > .t1-mtb__icon {
	grid-column: 1;
	align-self: start;
}
.t1-mtb__card:not(:has(.t1-mtb__id)) > span:not(.t1-mtb__cta) {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}
.t1-mtb__card:not(:has(.t1-mtb__id)) > .t1-mtb__cta {
	grid-column: 3;
}
.t1-mtb__id {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}
.xc-t1 .t1-mtb__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: contain;
}
.t1-mtb__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.t1-mtb__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;
}
/* Symbol on its own line — Inter 12 / slate (Figma); .t1-mtb__price = cached class */
.t1-mtb__ticker,
.t1-mtb__price {
	display: block;
	font-family: var(--body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.25;
	color: var(--slate);
}
.t1-mtb__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;
	font-variation-settings: "wdth" 100;
}
.t1-mtb__cta-label { display: inline; }
.t1-mtb__cta svg {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}
/* Cached CTA has no SVG — draw the arrow icon */
.t1-mtb__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) {
	.t1-mtb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.t1-mtb { padding: 32px 0; }
	.t1-mtb .xc-container { padding-inline: 16px; }
	.t1-mtb__head + .t1-mtb__grid,
	.t1-mtb .xc-container > h2 + .t1-mtb__grid {
		margin-top: 24px; /* Figma mobile: section gap 12 + list pt 12 */
	}
	.t1-mtb__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
	.t1-mtb__card {
		min-height: 69px;
		padding: 17px;
		border-radius: 14px;
	}
	.t1-mtb__name { font-size: 18px; }
}

/* ---------- Why buy here (template-parts/why-xcoins.php) ----------
 * That partial's classes (.usps/.container/.grid/.usp/.glass-border/
 * .section-head/.eyebrow) only exist as an inline <style> block inside
 * front-page.php — a full standalone HTML document, not shared CSS. T1 can't
 * reach it, so this is a faithful scoped port (values copied from
 * front-page.php) rather than a new design. Kept separate from front-page.php
 * on purpose: editing that inline block is out of scope for a T1 fix and
 * risks the homepage; if it's ever extracted to a real shared stylesheet,
 * delete this block and let both pages use that instead. */
.xc-t1 .usps .container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.xc-t1 .usps .section-head { margin-bottom: 24px; }
.xc-t1 .usps .section-head .eyebrow {
	font-size: 14px; color: var(--bright-blue); letter-spacing: 2px; text-transform: uppercase;
	margin-bottom: 12px; display: block;
}
.xc-t1 .usps .section-head h2 {
	font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3.4vw, 44px); line-height: 1; max-width: 600px; margin: 0;
}
.xc-t1 .usps .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
/* .t1-mtb__card included so cached pages get the glint before regenerate adds .glass-border */
.xc-t1 .glass-border,
.xc-t1 .t1-mtb__card {
	position: relative;
	border-radius: 12px;
	border: 1px solid rgba(249,253,255,.1);
}
.xc-t1 .glass-border::before,
.xc-t1 .t1-mtb__card::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
	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;
}
.xc-t1 .usp { background: rgba(249,253,255,.05); padding: 24px; min-height: 170px; display: flex; flex-direction: column; align-items: flex-start; }
.xc-t1 .usp .icon { width: 36px; height: 36px; margin-bottom: 12px; flex: none; }
.xc-t1 .usp .icon svg { display: block; width: 100%; height: 100%; }
.xc-t1 .usp-body { display: flex; flex-direction: column; gap: 4px; }
.xc-t1 .usp h3 { font-family: var(--body); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--off-white); margin: 0; }
.xc-t1 .usp p { margin: 0; font-size: 14px; line-height: 1.25; color: var(--slate); }
@media (max-width: 980px) { .xc-t1 .usps .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
	.xc-t1 .usps .grid { grid-template-columns: 1fr; gap: 12px; }
	.xc-t1 .usp { flex-direction: row; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 14px; min-height: auto; }
	.xc-t1 .usp .icon { margin-bottom: 0; }
}

@media (max-width: 960px) {
	.xc-t1 .xc-container { padding-inline: 16px; }
}