/*
 * Link cards and the subscribe box — loaded after a design's own stylesheets, only on pages that use them.
 *
 * A card is a link with a tile (emoji or the service's glyph), a title, a description, a price row and an optional button:
 *   <a class="link sm card" data-brand="youtube"><span class="lk-thumb"></span><span class="lk-text">…</span><span class="lk-cta">…</span></a>
 * It borrows the page's own colours (--bg, --fg, --accent, --btn-radius, --btn-shadow, --font-*), so it suits every design,
 * including the Classic one that defines none of them. A design can restyle its cards with the --card-* tokens:
 *   --card-bg  --card-fg  --card-muted  --card-border  --card-radius  --card-shadow  --card-pad
 *   --card-cta-bg  --card-cta-fg  --card-cta-radius  --card-cta-flex (1 1 100% = button under the text, 0 0 auto = beside it)
 *   --card-thumb-bg  --card-thumb-fg  --card-thumb-radius  --card-thumb-size  --card-chip-bg  --card-badge-bg  --card-badge-fg  --card-price
 * Colours of the text inside the card are set explicitly: the Classic stylesheet colours every element with a `*` rule.
 */
.link.card, .subscribe {
	--_fg: var(--card-fg, var(--fg, #eee));
	--_bg: var(--card-bg, rgba(127, 127, 127, .14));
	--_muted: var(--card-muted, var(--muted, #9a9a9a));
	--_line: var(--card-border-color, rgba(127, 127, 127, .3));
	--_chip: var(--card-chip-bg, rgba(127, 127, 127, .2));
	--_border: var(--card-border, 1px solid var(--_line));
	--_radius: var(--card-radius, min(var(--btn-radius, 14px), 22px));
	--_shadow: var(--card-shadow, var(--btn-shadow, none));
	--_cta-bg: var(--card-cta-bg, var(--accent, #fff));
	--_cta-fg: var(--card-cta-fg, var(--accent-fg, #000));
	--_cta-radius: var(--card-cta-radius, 999px);
	--_price: var(--card-price, var(--_fg));
}
@supports (color: color-mix(in srgb, red, blue)) {
	.link.card, .subscribe {
		--_bg: var(--card-bg, color-mix(in srgb, var(--fg, #eee) 10%, transparent));
		--_muted: var(--card-muted, color-mix(in srgb, var(--fg, #eee) 84%, var(--bg, #000)));
		--_line: var(--card-border-color, color-mix(in srgb, var(--_fg) 18%, transparent));
		--_chip: var(--card-chip-bg, color-mix(in srgb, var(--_fg) 15%, transparent));
	}
}

/* ---- the card ---- */
.links .link.card {
	display: flex !important;
	flex-flow: row wrap !important;
	align-items: center;
	justify-content: flex-start !important;
	gap: 12px 14px;
	grid-column: 1 / -1;
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	box-sizing: border-box;
	min-height: 0 !important;
	padding: var(--card-pad, 14px) !important;
	background: var(--_bg) !important;
	color: var(--_fg) !important;
	border: var(--_border) !important;
	border-radius: var(--_radius) !important;
	box-shadow: var(--_shadow) !important;
	font: 400 1rem/1.35 var(--font-body, 'Syne', system-ui, sans-serif) !important;
	letter-spacing: normal !important;
	text-align: left !important;
	text-shadow: none !important;
	text-transform: none !important;
	filter: none;
	counter-increment: none;
}
.links .link.card::before { content: none !important; }
.links .link.card::after { content: none !important; }
.links .link.card:hover { filter: none !important; }
.link.card:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 3px; }

.link.card .lk-thumb {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--card-thumb-size, 52px);
	height: var(--card-thumb-size, 52px);
	border-radius: var(--card-thumb-radius, 14px);
	background: var(--card-thumb-bg, var(--brand, var(--accent, #666)));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
	color: var(--card-thumb-fg, #fff);
	font-size: calc(var(--card-thumb-size, 52px) * .5);
	line-height: 1;
	overflow: hidden;
}
.link.card .lk-thumb:empty::before {
	content: '';
	width: 54%;
	height: 54%;
	background: var(--card-thumb-fg, #fff);
	-webkit-mask: var(--brand-g) center / contain no-repeat;
	mask: var(--brand-g) center / contain no-repeat;
}
.link.card .lk-thumb:not(:empty) { background: var(--card-thumb-bg, var(--_chip)); letter-spacing: .02em; }

.link.card .lk-text { flex: 1 1 0; min-width: 0; display: block; }
.link.card .lk-title {
	display: block;
	color: var(--_fg);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}
.link.card .lk-desc {
	display: block;
	margin-top: 3px;
	color: var(--_muted);
	font-size: .88rem;
	font-weight: 400;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.link.card .lk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.link.card .lk-price { color: var(--_price); font-size: 1.05rem; font-weight: 800; font-style: normal; }
.link.card .lk-was { color: var(--_muted); font-size: .85rem; font-weight: 400; text-decoration: line-through; }
.link.card .lk-rating {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--_chip);
	color: var(--_fg);
	font-size: .75rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.3;
}
.link.card .lk-rating::first-letter { color: #f5b301; }
.link.card .lk-badge {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--card-badge-bg, var(--accent, #fff));
	color: var(--card-badge-fg, var(--accent-fg, #000));
	font-size: .7rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.3;
	text-transform: uppercase;
}
.link.card .lk-cta {
	flex: var(--card-cta-flex, 1 1 100%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: var(--_cta-radius);
	background: var(--_cta-bg);
	color: var(--_cta-fg);
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}
@media (max-width: 380px) { .links .link.card { --card-cta-flex: 1 1 100%; } }

/* a card with no button gets an arrow instead */
@supports selector(:has(a)) {
	.links .link.card:not(:has(.lk-cta))::after {
		content: '' !important;
		flex: none;
		width: 22px;
		height: 22px;
		background: var(--_fg);
		opacity: .55;
		-webkit-mask: var(--chev-g) center / 20px no-repeat;
		mask: var(--chev-g) center / 20px no-repeat;
	}
}

/* ---- the subscribe box ---- */
.subscribe {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-sizing: border-box;
	width: calc(100% - 48px);
	max-width: calc(var(--max, 500px) - 48px);
	margin: 30px auto 0;
	padding: 22px 20px;
	background: var(--_bg);
	color: var(--_fg);
	border: var(--_border);
	border-radius: var(--_radius);
	box-shadow: var(--_shadow);
	font-family: var(--font-body, 'Syne', system-ui, sans-serif);
	text-align: center;
}
.subscribe h3 { margin: 0; color: var(--_fg); font: 700 1.2rem/1.2 var(--font-head, var(--font-body, 'Syne', system-ui, sans-serif)); text-wrap: balance; }
.subscribe p { margin: 0; color: var(--_muted); font-size: .92rem; line-height: 1.45; text-wrap: pretty; }
.subscribe input {
	box-sizing: border-box;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--_line);
	border-radius: var(--card-input-radius, min(var(--_radius), 14px));
	background: var(--card-input-bg, rgba(127, 127, 127, .1));
	color: var(--_fg);
	font: 400 1rem/1.3 var(--font-body, 'Syne', system-ui, sans-serif);
}
.subscribe input::placeholder { color: var(--_muted); opacity: 1; }
.subscribe input:focus-visible, .subscribe .sub-btn:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }
.subscribe .sub-btn {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--_cta-radius);
	background: var(--_cta-bg);
	color: var(--_cta-fg);
	font: 700 .95rem/1.2 var(--font-body, 'Syne', system-ui, sans-serif);
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}
.subscribe .sub-btn:hover { filter: brightness(1.08); }
.subscribe .sub-btn:active { transform: scale(.98); }

@keyframes gl-card-rise { from { opacity: 0; translate: 0 16px; } }
@media (prefers-reduced-motion: no-preference) {
	.subscribe { animation: gl-card-rise .6s .5s cubic-bezier(.2, .7, .2, 1) backwards; }
}

.link.card, .links { --chev-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m9 18 6-6-6-6%27/%3E%3C/svg%3E"); }

/* ---- glyphs and colours of the thumbnail tile, by the service the link points at ---- */
.link.card[data-brand='link'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71%27/%3E%3Cpath d=%27M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71%27/%3E%3C/svg%3E"); }
.link.card[data-brand='phone'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z%27/%3E%3C/svg%3E"); --brand: #16a34a; }
.link.card[data-brand='mail'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect width=%2720%27 height=%2716%27 x=%272%27 y=%274%27 rx=%272%27/%3E%3Cpath d=%27m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7%27/%3E%3C/svg%3E"); --brand: #4f5bd5; }
.link.card[data-brand='pdf'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z%27/%3E%3Cpath d=%27M14 2v6h6M16 13H8M16 17H8M10 9H8%27/%3E%3C/svg%3E"); --brand: #e5484d; }
.link.card[data-brand='youtube'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17%27/%3E%3Cpath d=%27m10 15 5-3-5-3z%27/%3E%3C/svg%3E"); --brand: #ff0033; }
.link.card[data-brand='spotify'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3%27/%3E%3C/svg%3E"); --brand: #1db954; }
.link.card[data-brand='instagram'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect width=%2718%27 height=%2718%27 x=%273%27 y=%273%27 rx=%275%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%274%27/%3E%3Cpath d=%27M17.5 6.5h.01%27/%3E%3C/svg%3E"); --brand: linear-gradient(135deg, #f9a825, #ee2a7b 55%, #6228d7); }
.link.card[data-brand='tiktok'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5%27/%3E%3C/svg%3E"); --brand: linear-gradient(135deg, #25c4c0, #fe2c55); }
.link.card[data-brand='facebook'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z%27/%3E%3C/svg%3E"); --brand: #1877f2; }
.link.card[data-brand='whatsapp'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7.9 20A9 9 0 1 0 4 16.1L2 22Z%27/%3E%3C/svg%3E"); --brand: #16a34a; }
.link.card[data-brand='linkedin'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z%27/%3E%3Crect width=%274%27 height=%2712%27 x=%272%27 y=%279%27/%3E%3Ccircle cx=%274%27 cy=%274%27 r=%272%27/%3E%3C/svg%3E"); --brand: #0a66c2; }
.link.card[data-brand='x'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 4l11.733 16h4.267l-11.733-16z%27/%3E%3Cpath d=%27M4 20l6.768-6.768m2.46-2.46L20 4%27/%3E%3C/svg%3E"); --brand: #1d1f23; }
.link.card[data-brand='telegram'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M22 2 11 13%27/%3E%3Cpath d=%27M22 2 15 22l-4-9-9-4z%27/%3E%3C/svg%3E"); --brand: #1f93c9; }
.link.card[data-brand='calendar'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 2v4M16 2v4%27/%3E%3Crect width=%2718%27 height=%2718%27 x=%273%27 y=%274%27 rx=%272%27/%3E%3Cpath d=%27M3 10h18%27/%3E%3C/svg%3E"); --brand: #6d5efc; }
.link.card[data-brand='maps'] { --brand-g: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z%27/%3E%3Ccircle cx=%2712%27 cy=%2710%27 r=%273%27/%3E%3C/svg%3E"); --brand: #e5392b; }