/* The panel at the end of each guide: the Levo page's price card (levo.css, #get), smaller,
   with only the icon, the current price and the two buttons. buy.js fills in the price. */

:root {
	--buy-tile: #FFFFFF;
	--buy-glow-a: rgba(110, 160, 255, 0.35);
	--buy-glow-b: rgba(255, 170, 120, 0.3);
	--buy-lift: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.07);
}
html.dark {
	--buy-tile: #0F0F10;
	--buy-glow-a: rgba(40, 96, 220, 0.38);
	--buy-glow-b: rgba(40, 120, 200, 0.3);
	--buy-lift: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.4);
}

.art .buy {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 18px 24px;
	margin: 56px 0 8px;
	padding: 32px;
	border-radius: 24px;
	background:
		radial-gradient(60% 90% at 35% 0%, var(--buy-glow-a) 0%, transparent 70%),
		radial-gradient(50% 80% at 100% 100%, var(--buy-glow-b) 0%, transparent 70%),
		var(--buy-tile);
	box-shadow: var(--buy-lift);
}
/* The icon and the price side by side, then the licence line, then the buttons, from the same leading edge. */
.art .buy-main { display: contents; }
.art .buy-icon { grid-column: 1; grid-row: 1; display: block; width: 76px; height: 76px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22)); }
.art .buy-price { grid-column: 2; grid-row: 1; display: flex; align-items: baseline; gap: 26px; margin: 0 0 0 14px; min-height: 36px; }
.art .buy-price b { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.art .buy-price > span:last-child { font-size: 15px; font-weight: 600; color: var(--muted); }
.art .buy-price[hidden] { display: flex; visibility: hidden; }
.art .buy .circled { position: relative; white-space: nowrap; }
.art .buy .circled svg { position: absolute; left: -16px; top: -10px; width: calc(100% + 32px); height: calc(100% + 20px); overflow: visible; pointer-events: none; }
.art .buy .circled path { fill: none; stroke: var(--lit); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.art .buy-line { grid-column: 1 / -1; grid-row: 2; margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.art .buy-ctas { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 10px; }
.art .buy a.buy-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 44px; padding: 0 22px; border-radius: 12px;
	background: var(--btn); color: var(--btn-text);
	font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
	transition: transform .16s cubic-bezier(.23, 1, .32, 1), background-color .15s ease;
}
.art .buy a.buy-btn.buy-quiet { background: rgb(var(--ink) / 0.07); color: var(--text); box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.06); }
@media (hover: hover) and (pointer: fine) { .art .buy a.buy-btn:hover { transform: scale(1.03); } }
.art .buy a.buy-btn:active { transform: scale(0.97); }

@media (max-width: 560px) {
	.art .buy { padding: 26px 20px; gap: 16px 18px; }
	.art .buy-icon { width: 64px; height: 64px; }
	.art .buy a.buy-btn { flex: 1; min-width: 0; padding: 0 14px; }
}