/**
 * T10 "[Coin] price" page — Figma 1173:23825 (desktop) / 1173:24446 (mobile).
 *
 * Tokens from base.css (--xc-*). Direction colours match the site-wide
 * convention used by buy-hub / resources-hub / prices-hub:
 *   is-up   #00b67a
 *   is-down #e04848
 *   is-flat var(--xc-slate)
 *
 * Chart styling lives in xcoins-chart.css. Container width is .xc-container.
 */

/* ---------- Page shell ---------- */
.xcoins-virtual-page .t10-section,
.xcoins-virtual-page .t10-chart {
	background: var(--xc-rich-black);
	color: var(--xc-off-white);
}

.xcoins-virtual-page .t10-hero {
	color: var(--xc-off-white);
}

.t10-section {
	padding: 64px 0;
}

/*
 * Section titles are <h2>s — theme.json paints those Inter/600/fluid.
 * Scope under .t10-section so every band keeps Saira ExtraBold 44/1.
 */
.t10-section h2.t10-section__title,
.t10-history h2.t10-section__title {
	margin: 0 0 24px;
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--xc-off-white);
	font-variation-settings: "wdth" 100;
}

.t10-eyebrow {
	display: block;
	margin: 0 0 12px;
	font-family: var(--xc-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--xc-bright-blue);
}

/* ---------- Direction colours (site-wide convention) ---------- */
.t10-chg {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	white-space: nowrap;
	color: var(--xc-slate);
	font-variant-numeric: tabular-nums;
}

.t10-chg.is-up { color: #00b67a; }
.t10-chg.is-down { color: #e04848; }
.t10-chg.is-flat { color: var(--xc-slate); }

.t10-chg__tri {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	flex: 0 0 auto;
	/* Figma: triangle sits AFTER the % text. */
	order: 2;
}

.t10-chg.is-up .t10-chg__tri {
	border-bottom: 9px solid currentColor;
}

.t10-chg.is-down .t10-chg__tri {
	border-top: 9px solid currentColor;
}

.t10-chg.is-flat .t10-chg__tri {
	display: none;
}

.t10-chg [data-xc-chg-value] {
	order: 0;
}

.t10-chg__window {
	font-weight: 400;
	color: inherit;
	order: 1;
}

/* ---------- Hero — Figma 1173:23859 ---------- */
.t10-hero {
	position: relative;
	overflow: hidden;
	/*
	 * Figma: linear-gradient(227.92deg, #AAC7D9 12.42%, Rich Black 86.27%).
	 * Soft slate-blue → black — NOT True Blue (that's T1).
	 */
	background: linear-gradient(
		227.92deg,
		#aac7d9 12.423%,
		var(--xc-rich-black) 86.271%
	);
	padding: 0 0 48px;
	/*
	 * 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
	 * ~59px when opened. 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.
	 *
	 * Raise this if the fee panel ever gains a third row.
	 */
	min-height: 720px; /* Figma hero frame height */
}

/* Coin hero art — Figma 1173:23860. */
.t10-hero__art {
	position: absolute;
	/*
	 * Figma 1173:23860 is a 719×653 CONTAINER; the coin inside it renders ~528px
	 * across, centred at ~49.6% of the 1440 frame and starting 66px down. Sizing
	 * the element to the container made the coin ~36% oversized and swallowed the
	 * hero. Sized to the artwork instead.
	 */
	left: 50%;
	top: 66px;
	width: min(36.7vw, 528px); /* 528 / 1440 */
	aspect-ratio: 1;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 1; /* above .t10-hero__shade — see the stacking note there */
	opacity: .85;
}

/* Two classes + element so `body.xcoins-virtual-page img { max-width:100%;
   height:auto }` (0,1,2) in xcoins-pages.css can't flatten the crop. */
body.xcoins-virtual-page .t10-hero__art img {
	display: block;
	/*
	 * contain, not cover: the asset is a transparent coin cut-out, so cropping it
	 * (cover) shaved the rim and upscaled a 676px source past its natural size.
	 * Opacity lives on the wrapper only — stacking it here too took the coin to
	 * ~64% and it read as a smudge.
	 *
	 * SHARP, as the frame draws it. This used to carry blur(7px) because the 24h
	 * range labels sit over the coin's right-hand side and its specular edges cut
	 * through small text — but blurring the subject to protect two numbers throws
	 * away the artwork the page is built around. The labels now carry their own
	 * halo instead (see .t10-range__labels), which fixes the same problem without
	 * touching the coin.
	 */
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
}

/* Left shade — Figma 1173:23861: 756×810, black 50% → transparent. */
.t10-hero__shade {
	/*
	 * Anchored to the LEFT EDGE. Starting it at calc(50% - 342px) put the hard
	 * rgba(0,0,0,.5) end of the gradient in the middle of the hero, which drew a
	 * visible vertical seam through the artwork and left the headline area
	 * unshaded — the opposite of its job, which is to keep the price legible over
	 * the light end of the background gradient.
	 */
	position: absolute;
	left: 0;
	top: 0;
	width: min(756px, 62%);
	height: 100%;
	/*
	 * Stacking, bottom → top: shade (0) → coin (1) → bottom fade (2) → copy (3).
	 * The shade must sit UNDER the coin: laid over it, it dimmed the artwork to a
	 * grey ghost, whereas Figma shows a bright coin with only the copy above it.
	 */
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, .55) 0%,
		rgba(0, 0, 0, .2) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* Bottom fade into the chart band. */
.t10-hero__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 160px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(17, 22, 32, 0) 0%, var(--xc-rich-black) 100%);
}

.t10-hero__inner {
	position: relative;
	z-index: 3; /* copy sits above the artwork */
}

.t10-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	min-height: 52px;
	padding: 16px 0;
	margin: 0;
	font-family: var(--xc-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--xc-slate);
}

.t10-crumbs a {
	color: var(--xc-slate);
	text-decoration: none;
}

.t10-crumbs a:hover { color: var(--xc-off-white); }

.t10-crumbs [aria-current="page"] { color: var(--xc-off-white); }

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

/* Shown only where the full trail doesn't fit — see the 600px block. */
.t10-crumbs__ellipsis {
	display: none;
	align-items: center;
	gap: 4px;
}

.t10-crumbs__sep {
	display: inline-flex;
	flex: 0 0 12px;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	color: var(--xc-slate);
}

.t10-crumbs__sep svg {
	display: block;
	width: 100%;
	height: 100%;
}

.t10-hero__main {
	display: grid;
	/*
	 * Widget column = 536px, per Figma 1173:23863 (536.4 wide). That is also the
	 * shared widget's own max-width in crypto-widget.css, so this column is the
	 * only thing that was constraining it — it had been capped at 420 and rendered
	 * narrow. Nothing about .xcw itself needs overriding here.
	 *
	 * minmax(0,…) not 1fr on the left: a long price string must not force the
	 * widget column to overflow — same trap noted on T1.
	 */
	grid-template-columns: minmax(0, 1fr) minmax(0, 536px);
	gap: 32px;
	align-items: start;
	padding-top: 24px;
}

.t10-hero__figures {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	/* Figma left column: gap 16 between id / price / meta / range. */
	gap: 16px;
}

.t10-hero__id {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 0;
}

.t10-hero__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: contain;
	flex: 0 0 auto;
}

/*
 * Beat theme.json `h1` / `heading` element styles (fluid 3rem, lh 1.05,
 * letter-spacing -0.01em) so the hero matches Figma 1173:23936 exactly.
 */
.t10-hero h1.t10-hero__title {
	margin: 0;
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: 30px;
	line-height: 45px;
	letter-spacing: -.3px;
	color: var(--xc-off-white);
	font-variation-settings: "wdth" 100;
}

.t10-hero .t10-hero__ticker {
	font-family: var(--xc-display);
	font-weight: 600;
	font-size: 13px;
	line-height: 19.5px;
	letter-spacing: 0;
	color: var(--xc-slate);
	font-variation-settings: "wdth" 100;
}

.t10-hero .t10-hero__rank {
	padding: 4px 11px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	font-family: var(--xc-body);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #cfd6e2;
	line-height: 15px;
}

.t10-hero__price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	width: 100%;
}

/* Ultra Header — Figma 1173:23941 */
.t10-hero .t10-price {
	display: block;
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: 76px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--xc-off-white);
	font-variant-numeric: tabular-nums;
	font-variation-settings: "wdth" 100;
	min-height: 1em;
}

.t10-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	min-height: 28px;
}

/* M3/title/large → Inter Regular 22/28 (Figma 1173:23943) */
.t10-hero__meta .t10-chg {
	font-family: var(--xc-body);
	font-weight: 400;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 0;
}

.t10-hero .t10-hero__updated {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--xc-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--xc-slate);
}

.t10-hero__dot {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: #00b67a;
	flex: 0 0 auto;
}

.t10-hero__meta .t10-chg.is-down ~ .t10-hero__updated .t10-hero__dot,
.t10-hero__meta:has(.t10-chg.is-down) .t10-hero__dot {
	background: #e04848;
}

.t10-hero__meta:has(.t10-chg.is-flat) .t10-hero__dot {
	background: var(--xc-slate);
}

.t10-hero__widget {
	min-width: 0;
	width: 100%;
	position: relative;
	z-index: 2;
}

/* 24h range bar — Figma 1173:23947 */
.t10-range {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 520px;
	margin-top: 0;
	padding-top: 0;
}


/*
 * THESE TWO NUMBERS SIT ON THE ARTWORK, and the high one lands squarely on the
 * coin's bright right-hand side — in the frame itself it is barely legible.
 *
 * The fix is a DENSE, TIGHT halo, not a field behind the block: the first two
 * shadows are 1px and 2px at full opacity, which is effectively a dark outline
 * hugging each glyph, and the 4/7px pair only softens that edge so it does not
 * look stroked. Everything stays within a couple of pixels of the numbers, so
 * the coin behind them is untouched.
 */
.t10-range__labels {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--xc-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	text-shadow:
		0 0 1px rgba(17, 22, 32, 1),
		0 0 2px rgba(17, 22, 32, 1),
		0 0 4px rgba(17, 22, 32, .95),
		0 0 7px rgba(17, 22, 32, .8);
}

.t10-range__low { color: #e04848; }
.t10-range__high { color: #00b67a; }

/*
 * The frame's track is rgba(255,255,255,.07) — 7% white, which simply disappears
 * against the bright side of the coin. The tint is kept exactly, laid over a dark
 * base so the empty part of the track is still visibly a track. The darkening
 * stops at the bar's own 10px, with no glow around it.
 */
.t10-range__bar {
	position: relative;
	width: 100%;
	height: 10px;
	border-radius: 999px;
	background:
		linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07)),
		rgba(17, 22, 32, .62);
	overflow: visible;
}

.t10-range__fill {
	position: absolute;
	inset: 0 auto 0 0;
	max-width: 100%;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--xc-true-blue) 0%, var(--xc-bright-blue) 100%);
	pointer-events: none;
}

.t10-range__marker {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--xc-off-white);
	border: 3px solid var(--xc-bright-blue);
	box-sizing: border-box;
	transform: translate(-50%, -50%);
	z-index: 1;
}

/* ---------- Chart (surroundings only — card chrome is shared) ---------- */
.t10-chart {
	padding: 32px 0 64px;
}

/* ---------- Market stats — Figma 1173:24003 ---------- */
.t10-stats__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.t10-stat {
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 136px;
	padding: 24px;
	background: rgba(249, 253, 255, .05);
}

.t10-stat.glass-border::before {
	z-index: 1;
}

.t10-stat__label {
	font-family: var(--xc-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--xc-off-white);
}

.t10-stat__value {
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--xc-off-white);
	font-variant-numeric: tabular-nums;
	font-variation-settings: "wdth" 100;
}

.t10-stat__value.t10-chg {
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: 24px;
	line-height: 1;
}

.t10-stat__note {
	font-family: var(--xc-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--xc-slate);
}

/* ---------- About — Figma 1173:24067 / 24069 ---------- */
.t10-about__card {
	position: relative;
	overflow: hidden;
	display: block;
	min-height: 424px;
	padding: 24px;
	/* Figma Overlay+Border: #F9FDFF @ 5% fill + 10% hairline (glass-border). */
	background: rgba(249, 253, 255, .05);
	border-radius: 12px;
}

/*
 * Figma Ellipse 3146: x=620 y=43 w=1040 h=439 on the 1240 card —
 * soft #A3B7FF → transparent blue wash behind the coin.
 */
.t10-about__card::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 10%;
	z-index: 0;
	width: 84%;
	height: 104%;
	border-radius: 50% 50% 0 0;
	background: radial-gradient(
		ellipse 50% 100% at 50% 100%,
		rgba(163, 183, 255, .4) 0%,
		rgba(2, 73, 254, 0) 70%
	);
	pointer-events: none;
}

.t10-about__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	/* Figma body: left 24 / right 210 → clear the clipped coin. */
	max-width: min(68ch, calc(100% - 210px));
	padding: 0 0 8px;
	min-width: 0;
}

/* Beat theme.json h2 (Inter/600) — Figma 1173:24071: Saira ExtraBold 24/36. */
.t10-about h2.t10-about__title {
	margin: 0;
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: 24px;
	line-height: 36px;
	letter-spacing: -.24px;
	color: var(--xc-off-white);
	font-variation-settings: "wdth" 100;
}

.t10-about__body {
	font-family: var(--xc-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 0;
	color: #cfd6e2;
}

.t10-about__body p {
	margin: 0 0 20px;
}

.t10-about__body p:last-child {
	margin-bottom: 0;
}

/*
 * Figma 1173:24075: hang a ~480 coin off the bottom-right so the card only
 * reveals ~20%×65% peep (Figma's visible crop on the 1240×424 card). Our
 * hero_image_url is a tight square — no Figma landscape zoom needed.
 */
.t10-about__art {
	/*
	 * Figma: the coin sits in the card's bottom-right corner and is clipped by it,
	 * showing roughly a 186×190 wedge of a ~330px coin. The previous 480px coin
	 * hung 240px outside the card, which read as a stray blue smear rather than a
	 * coin. The card's own overflow:hidden does the clipping.
	 */
	position: absolute;
	right: -145px;
	bottom: -140px;
	z-index: 0;
	width: 330px;
	height: 330px;
	pointer-events: none;
	opacity: .9;
}

body.xcoins-virtual-page .t10-about__art img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
}

/* ---------- Price history — Figma 1173:24076 ---------- */
.t10-history .xc-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

.t10-history__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: 820px;
}

.t10-history__head .t10-section__title,
.t10-history h2.t10-section__title {
	margin: 0;
}

.t10-history__wrap {
	box-sizing: border-box;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: rgba(255, 255, 255, .02);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 14px;
}

.t10-history__table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	text-align: left;
}

.t10-history__table th,
.t10-history__table td {
	box-sizing: border-box;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .05);
	font-family: var(--xc-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	color: var(--xc-off-white);
	vertical-align: middle;
}

.t10-history__table thead th {
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--xc-off-white);
	white-space: nowrap;
	background: rgba(255, 255, 255, .02);
}

.t10-history__table tbody th {
	font-weight: 400;
	text-align: left;
	color: var(--xc-slate);
	white-space: nowrap;
}

.t10-history__table tbody .t10-chg {
	font-family: var(--xc-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.25;
	gap: 8px;
}

.t10-history__table tbody tr:last-child th,
.t10-history__table tbody tr:last-child td {
	border-bottom: 0;
}

.t10-history__note {
	margin: 0;
	max-width: 780px;
	font-family: var(--xc-body);
	font-weight: 400;
	font-size: 11.5px;
	line-height: 17.25px;
	letter-spacing: 0;
	color: var(--xc-slate);
}

/* ---------- Steps — Figma 1173:24232 ---------- */
.t10-steps h2.t10-section__title {
	margin-bottom: 40px;
}

.t10-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.t10-step {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	box-sizing: border-box;
	min-height: 266px;
	padding: 24px;
	background: rgba(249, 253, 255, .05);
}

.t10-step__copy {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 280px;
}

.t10-step__label {
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--xc-bright-blue);
	font-variation-settings: "wdth" 100;
}

/* Beat theme.json h3 (Inter/600) — Figma: Saira Bold 18/1. */
.t10-step h3.t10-step__title {
	margin: 0;
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--xc-off-white);
	font-variation-settings: "wdth" 100;
}

.t10-step__body {
	margin: 0;
	font-family: var(--xc-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--xc-slate);
}

.t10-step__art {
	flex: 0 0 auto;
	align-self: flex-end;
	width: 132px;
	height: auto;
	max-width: 40%;
	object-fit: contain;
}

.t10-steps__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
}

.t10-steps__trust {
	margin: 0;
	font-family: var(--xc-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--xc-slate);
}

/* ---------- More prices / Keep going — shared .xc-pills (Figma 1173:24225) ---------- */
.t10-more h2.xc-pills__heading {
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	letter-spacing: 0;
	margin: 0 0 24px;
	color: var(--xc-off-white);
	font-variation-settings: "wdth" 100;
}

/* Figma stacks both groups in one band with gap between them. */
.t10-more .xc-pills + .xc-pills {
	margin-top: 40px;
}

/* FAQ on T10 — Figma 1173:24316: questions are Saira Bold 16, not Inter. */
.xcoins-virtual-page #t10-faq .xc-faq__intro h2 {
	font-family: var(--xc-display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	letter-spacing: 0;
	font-variation-settings: "wdth" 100;
}

.xcoins-virtual-page #t10-faq .xc-faq__q {
	font-family: var(--xc-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 0;
	font-variation-settings: "wdth" 100;
}

.xcoins-virtual-page #t10-faq .xc-faq__a {
	font-family: var(--xc-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.25;
	color: #cfd6e2;
}

@media (max-width: 1024px) {
	.t10-more h2.xc-pills__heading {
		font-size: clamp(28px, 6vw, 36px);
	}
}

@media (max-width: 600px) {
	.t10-more h2.xc-pills__heading {
		font-size: 24px;
		margin-bottom: 16px;
	}

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

/* ---------- Responsive — Figma mobile 1173:24446 ---------- */
@media (max-width: 1024px) {
	.t10-section {
		padding: 48px 0;
	}

	.t10-section h2.t10-section__title,
	.t10-history h2.t10-section__title {
		font-size: clamp(28px, 6vw, 36px);
	}

	.t10-hero__main {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding-top: 8px;
	}

	.t10-hero {
		min-height: 0;
		/* Figma mobile 1173:24469: rich-black → #aac7d9 top to bottom. */
		background: linear-gradient(180deg, var(--xc-rich-black) 0%, #aac7d9 100%);
		padding-bottom: 32px;
	}

	/*
	 * Figma mobile 1173:24471: the WHOLE coin, full-bleed at 375×453, sitting
	 * BEHIND the widget card — which is rgba(31,36,45,.5), so the coin reads as a
	 * soft blue glow diffusing through it. That translucency is the effect; the
	 * artwork itself is not cropped or faded.
	 *
	 * Anchored to the hero's BOTTOM, not its middle. In Figma the coin sits wholly
	 * WITHIN the card's span (art 331..784, card ~270..907) — none of it pokes out
	 * above the card. A `top: 50% + …` rule only lands there at Figma's exact hero
	 * height; ours differs (the answer paragraph, and the widget grows with its own
	 * content), which left a hard sliver of coin above the card instead of a glow
	 * behind it. The widget is the last thing in the hero and the hero's own
	 * padding-bottom is 32px, so measuring up from the bottom keeps the coin behind
	 * the card whatever either one's height turns out to be.
	 */
	.t10-hero__art {
		left: 50%;
		top: auto;
		bottom: 40px;
		width: min(375px, 100vw);
		aspect-ratio: 375 / 453;
		height: auto;
		transform: translateX(-50%);
		opacity: .75;
		overflow: visible;
	}

	body.xcoins-virtual-page .t10-hero__art img {
		position: static;
		width: 100%;
		height: 100%;
		max-width: none;
		/* contain: show the whole coin. The 311%-wide crop this replaces showed a
		   zoomed slice of its middle, which is why it read as a smear. */
		object-fit: contain;
		object-position: center;
	}

	.t10-hero__shade {
		display: none;
	}

	.t10-hero__fade {
		height: 180px;
	}

	.t10-hero .t10-price {
		font-size: 40px;
	}

	.t10-hero__meta .t10-chg {
		font-size: 16px;
		line-height: 1.25;
	}

	.t10-hero h1.t10-hero__title {
		font-size: 30px;
		line-height: 45px;
	}

	.t10-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.t10-stat {
		min-height: 0;
		padding: 20px;
		gap: 10px;
	}

	.t10-stat__value,
	.t10-stat__value.t10-chg {
		font-size: 20px;
	}

	.t10-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.t10-step {
		min-height: 0;
	}

	.t10-about__card {
		min-height: 0;
		padding: 24px 20px 140px; /* room for the clipped coin under the copy */
	}

	.t10-about__card::before {
		left: -5%;
		top: auto;
		bottom: 0;
		width: 110%;
		height: 45%;
	}

	.t10-about__copy {
		max-width: none;
	}

	/* Figma mobile 1173:24671: peep from bottom-right. */
	.t10-about__art {
		right: -100px;
		bottom: -120px;
		width: 300px;
		height: 300px;
	}

	.t10-chart {
		padding: 16px 0 48px;
	}
}

@media (max-width: 600px) {
	.t10-crumbs {
		font-size: 14px;
		min-height: 0;
		padding: 12px 0;
		flex-wrap: nowrap;
	}

	/* Home > … > Coin (Figma 1173:24469). The full trail stays in the DOM for
	   assistive tech; only its visual form changes. */
	.t10-crumbs__mid {
		display: none;
	}

	.t10-crumbs__ellipsis {
		display: inline-flex;
	}

	/* The mobile hero frame carries no rank pill — the stats grid states the
	   rank a screen further down. */
	.t10-hero__rank {
		display: none;
	}

	/*
	 * Figma mobile shows a ~123px wedge of the coin in the card's corner, about a
	 * third of the card width. The 300px coin read as roughly double that.
	 */
	.t10-about__art {
		width: 210px;
		height: 210px;
		right: -85px;
		bottom: -90px;
	}

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

	.t10-section h2.t10-section__title,
	.t10-history h2.t10-section__title {
		font-size: 24px;
		margin-bottom: 16px;
	}

	.t10-hero {
		padding-bottom: 32px;
	}

	.t10-hero__icon {
		width: 32px;
		height: 32px;
	}

	.t10-hero .t10-price {
		font-size: 40px;
	}

	.t10-range {
		max-width: none;
	}

	.t10-range__labels {
		font-size: 14px;
	}

	.t10-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.t10-stat__label {
		font-size: 12px;
		letter-spacing: 1.5px;
	}

	.t10-stat__value,
	.t10-stat__value.t10-chg {
		font-size: 18px;
	}

	.t10-stat__note {
		font-size: 12px;
	}

	.t10-history__table th,
	.t10-history__table td {
		padding: 12px 12px;
		font-size: 14px;
	}

	.t10-history__table thead th {
		font-size: 12px;
		letter-spacing: 1.5px;
	}

	.t10-history .xc-container {
		gap: 24px;
	}

	.t10-step__art {
		width: 96px;
	}

	.t10-steps__cta {
		flex-direction: column;
		align-items: stretch;
	}

	.t10-steps__cta .xc-btn {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	/* Prevent any wide child from causing page-level sideways scroll. */
	.t10-hero,
	.t10-section,
	.t10-chart {
		overflow-x: clip;
	}
}