/**
 * T7 "Convert [coin] to [quote]" — Figma 1049:847 (desktop) / 1049:1275 (mobile).
 * Tokens from base.css. MFSA / newsletter / FAQ / pills from sections-shared.css.
 */

.xc-t7 {
	background: var(--xc-rich-black);
	color: var(--xc-off-white);
	overflow-x: clip;
	max-width: 100%;
}

/* ---------- Hero — Figma 1049:881 (1440×810) ---------- */
.t7-hero {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	background: linear-gradient(221.26deg, var(--xc-navy, #273045) 12.423%, var(--xc-rich-black, #111620) 86.271%);
}

.t7-hero__visual {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/*
 * Same treatment as the convert hub's hero: the render is exported with the
 * frame's gradient baked in, so it is an opaque rectangle rather than a cut-out.
 * The radial mask feathers all four edges into the hero so only the glass arrow
 * survives — a flat placement would show a seam at every width but 1440.
 */
.t7-hero__visual img {
	position: absolute;
	/* Figma 1077:1073: left 425 / top 42 / 727×727 on 1440 → centre offset +68.5 */
	top: 42px;
	left: 50%;
	width: 727px;
	height: 727px;
	max-width: none;
	opacity: .85;
	object-fit: contain;
	transform: translateX(calc(-50% + 68.5px));
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 62%);
	mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 62%);
}

/* Figma 1049:909 — 1440×160 wash landing the hero on the page background. */
.t7-hero__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 160px;
	z-index: 1;
	background: linear-gradient(180deg, rgba(17, 22, 32, 0) 0%, #111620 100%);
	pointer-events: none;
}

.t7-hero__inner {
	position: relative;
	z-index: 2;
	padding-bottom: 64px;
}

/* ---------- Breadcrumbs ---------- */
.t7-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	box-sizing: border-box;
	min-height: 52px;
	padding: 16px 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.25;
	color: var(--xc-slate, #788196);
}

.t7-crumbs a { color: var(--xc-slate, #788196); text-decoration: none; }
.t7-crumbs a:hover { color: var(--xc-off-white); }
.t7-crumbs [aria-current="page"] { color: #cfd6e2; }

.t7-crumbs__mid { display: inline-flex; align-items: center; gap: 4px; }
.t7-crumbs__ellipsis { display: none; align-items: center; gap: 4px; }

.t7-crumbs__sep {
	display: inline-flex;
	width: 12px;
	height: 12px;
	color: var(--xc-slate, #788196);
}

.t7-crumbs__sep svg { width: 100%; height: 100%; }

/* ---------- Hero layout ---------- */
/*
 * Copy + widget side by side. The frame is 656 + 47 + 536 on a 1240 content
 * width; this container is 1184, so the widget takes a fixed 500 and the copy
 * absorbs the difference — minmax(0, …) so a long coin name can't push the
 * widget off the grid.
 */
.t7-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 500px;
	gap: 40px;
	align-items: start;
	padding-top: 54px;
}

.t7-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 656px;
}

.t7-hero h1 {
	margin: 0;
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: clamp(40px, 5.3vw, 76px);
	line-height: 1;
	color: var(--xc-off-white);
}

/* Figma 1049:888 — the live rate, 44px, directly under the H1. */
.t7-hero__rate {
	margin: 16px 0 0;
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1;
	color: var(--xc-off-white);
	/* Tabular figures: the rate re-renders on every refresh, and proportional
	   digits make the whole line jitter as the value changes. */
	font-variant-numeric: tabular-nums;
}

.t7-hero__sub {
	margin: 16px 0 0;
	max-width: 560px;
	font-size: 16px;
	line-height: 1.25;
	color: #cfd6e2;
}

.t7-hero__trust {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.25;
	color: var(--xc-soft-white, #eeeff2);
}

.t7-hero__trust time { font-variant-numeric: tabular-nums; }

.t7-hero__dot {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: var(--xc-bright-blue, #1a9cfc);
	flex: 0 0 auto;
}

.t7-hero__widget { min-width: 0; }

/* The second, ghost CTA under the widget's primary button (T7 only). */
.t7-hero__widget .xcw__cta--ghost {
	margin-top: 12px;
	background: transparent;
	border: 1px solid rgba(249, 253, 255, .35);
	color: var(--xc-off-white);
}

.t7-hero__widget .xcw__cta--ghost:hover {
	border-color: var(--xc-off-white);
	background: rgba(249, 253, 255, .06);
}

/* ---------- Sections ---------- */
.t7-section { padding: 64px 0; }

/* ---------- Rate context — Figma 1049:911 ---------- */
.t7-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 25px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .05);
}

.t7-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.t7-stat__label {
	font-size: 14px;
	line-height: 1.25;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--xc-slate, #788196);
}

.t7-stat__value {
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	color: var(--xc-off-white);
	font-variant-numeric: tabular-nums;
}

.t7-stat__value.is-up { color: #3ad68b; }
.t7-stat__value.is-down { color: #e2574c; }

.t7-context__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
}

.t7-context__foot p {
	margin: 0;
	font-size: 12px;
	line-height: 1.25;
	color: var(--xc-slate, #788196);
}

.t7-context__foot .t7-cta-link { margin-left: auto; }

/* ---------- "… →" text link ---------- */
.t7-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: var(--xc-bright-blue, #1a9cfc);
	text-decoration: none;
	white-space: nowrap;
}

/* Figma's right arrow (659_group @ −90°). background-image, not mask: a
   stroke-only SVG often renders as an empty mask. */
.t7-cta-link::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;
}

.t7-cta-link:hover { text-decoration: underline; }

/* ---------- How it works — Figma 1049:934 (same cards as the convert hub) ---------- */
.t7-steps__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 40px;
	max-width: 820px;
}

.t7-steps__head .buy-section__eyebrow { margin: 0; }

.t7-steps__head h2 {
	margin: 0;
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	color: var(--xc-off-white);
}

.t7-steps__grid {
	display: grid;
	/* minmax(0, 1fr), never 1fr: a plain 1fr floors at min-content, and the
	   longest card title would push the row wider than its container. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.t7-step {
	display: flex;
	align-items: stretch;
	gap: 16px;
	box-sizing: border-box;
	min-height: 266px;
	padding: 24px;
	border-radius: 12px;
	border: 1px solid rgba(249, 253, 255, .1);
	background: rgba(249, 253, 255, .05);
}

.t7-step__copy {
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1 1 auto;
	min-width: 0;
}

.t7-step__num {
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: var(--xc-bright-blue, #1a9cfc);
	text-transform: uppercase;
}

.t7-step h3 {
	margin: 0;
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	color: var(--xc-off-white);
}

.t7-step p {
	margin: 0;
	font-size: 16px;
	line-height: 1.25;
	color: var(--xc-slate, #788196);
}

.t7-step__art {
	display: block;
	align-self: flex-end;
	flex: 0 0 auto;
	max-width: 100%;
	height: auto;
	pointer-events: none;
}

/* ---------- Pill rows — Figma 1049:1015 ---------- */
.t7-more .xc-pills + .xc-pills { margin-top: 64px; }

/* ---------- Mobile — Figma 1049:1275 ---------- */
@media (max-width: 960px) {
	.xc-t7 .xc-container {
		padding-inline: 16px;
		max-width: 100%;
		box-sizing: border-box;
	}

	.t7-hero__inner { padding-bottom: 32px; }

	/* Figma 1049:1275 — the art sits low, behind the sub-paragraph and the top of
	   the widget, not up beside the headline. */
	.t7-hero__visual img {
		top: 300px;
		width: 460px;
		height: 460px;
		opacity: .5;
		transform: translateX(calc(-50% + 60px));
		-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 44%, transparent 64%);
		mask-image: radial-gradient(circle at 50% 50%, #000 44%, transparent 64%);
	}

	.t7-hero__fade { height: 120px; }

	.t7-crumbs__mid { display: none; }
	.t7-crumbs__ellipsis { display: inline-flex; }

	.t7-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding-top: 4px;
	}

	.t7-hero__copy { max-width: none; }
	.t7-hero h1 { font-size: 40px; }
	.t7-hero__rate { font-size: 28px; margin-top: 12px; }
	.t7-hero__sub { max-width: none; }
	.t7-hero__trust { align-items: flex-start; max-width: 320px; }
	.t7-hero__dot { margin-top: 6px; }

	.t7-section { padding: 32px 0; }

	.t7-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
		padding: 20px;
	}

	.t7-context__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.t7-context__foot .t7-cta-link { margin-left: 0; }

	.t7-steps__head { margin-bottom: 20px; max-width: none; }
	.t7-steps__head h2 { font-size: 24px; }

	.t7-steps__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.t7-step { max-width: 100%; }

	.t7-more .xc-pills + .xc-pills { margin-top: 32px; }
}

@media (max-width: 480px) {
	.t7-hero__visual img { opacity: .38; }
	.t7-stats { grid-template-columns: minmax(0, 1fr); }
}