/* Portal-only rules of the postal / newspaper design. Loaded after ~/css/postal.css (Sites/css/postal.css),
   which holds the palette, the chrome and the components shared with the Docs and NuGet sites; rules here
   that override a shared one rely on coming later. */

/* @diagram(dg) render host: the client renderer fills it with the Designer canvas; theme-following
   background comes from --diagram-bg. A failed/malformed source degrades to an inline note. */
.ss-diagram-host {
	display: block;
	width: 100%;
	min-height: 380px;
	margin: 1.2em 0;
	background: var(--diagram-bg, #2b2b2e);
	border: 1px solid var(--ss-line);
	border-radius: 8px;
	overflow: hidden;
}

.ss-diagram-host.ss-diagram-error {
	min-height: 0;
	padding: 12px 16px;
	background: var(--ss-stamp);
	color: var(--ss-red);
	font-style: italic;
}

body.ss-diagram-modal-open { overflow: hidden; }

.ss-diagram-host.is-expanded {
	position: fixed;
	inset: 12px;
	z-index: 2000;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	background: var(--diagram-bg, #2b2b2e);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

/* Message edit-history panel (content managers) */
.ss-edit-history {
	margin-top: 18px;
	border-top: 1px solid var(--ss-line);
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ss-history-date {
	font-family: var(--ss-display);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ss-ink-3);
}

.ss-history-text {
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 13px;
	line-height: 1.5;
	margin: 6px 0 0;
	padding: 12px 14px;
	background: var(--ss-paper-2, rgba(0, 0, 0, 0.03));
	border: 1px solid var(--ss-line);
	border-radius: 8px;
}

.ss-related-card img {
	/* Article covers are 16:9 and carry text near their edges, so the card follows the picture's
	   shape instead of cropping it to a fixed height. */
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

/* The chat is a workspace, not a sheet of paper: it takes the width and the height it is given, without
   the stamp frame the content pages wear. */
.ss-chat-page {
	max-width: none;
	padding: 0;
}

@media (max-width: 820px) {
	
	/* The composer must stay on screen: a minimum taller than a phone's viewport would push it below the fold. */
	.ss-chat-layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
		height: calc(100dvh - 7rem);
		min-height: 0;
	}

	.ss-chat-sidebar {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		min-height: 0;
		padding: 6px 8px;
		border-right: 0;
		border-bottom: 1.5px solid var(--ss-ink);
	}

	/* Starting a conversation is the sidebar's whole purpose here, so the button keeps its place -- as an
	   icon, with the list of conversations scrolling beside it. */
	.ss-chat-sidebar-head {
		flex: 0 0 auto;
		padding: 0;
		border: 0;
	}

	.ss-chat-new {
		font-size: 0;
		padding: 0 10px;
	}

	.ss-chat-new span {
		font-size: 18px;
	}

	.ss-chat-conversations {
		display: flex;
		flex: 1 1 auto;
		gap: 6px;
		min-width: 0;
		overflow-x: auto;
		padding: 0;
	}

	.ss-chat-conversation {
		flex: 0 0 min(180px, 60vw);
	}

	.ss-chat-account {
		flex: 0 0 auto;
		padding: 0;
		border: 0;
	}

	.ss-chat-main {
		min-height: 0;
	}

	.ss-chat-body {
		min-height: 0;
		overflow-y: auto;
	}

	.ss-chat-head {
		flex-wrap: wrap;
		gap: 8px;
	}
}

/* =========================================================================
   HOME - hero
   ========================================================================= */
.ss-hero {
	padding: 62px 0 84px;
	position: relative;
	overflow: hidden;
}

.ss-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	/* Left column stacks the copy over the stats; the stamp spans both rows on the right. On mobile the
	   areas re-stack so the stats fall below the stamp (see the responsive override). */
	grid-template-areas:
		"main  stamp"
		"stats stamp";
	column-gap: 60px;
	row-gap: 0;
	align-items: start;
}

.ss-hero-main { grid-area: main; }
.ss-hero-grid > .ss-hero-stamp-wrap { grid-area: stamp; }
.ss-hero-grid > .ss-stats { grid-area: stats; }

.ss-hero-title {
	margin: 22px 0 0;
}

.ss-hero-title em {
	font-style: normal;
	background: linear-gradient(180deg, transparent 70%, color-mix(in srgb, var(--ss-red) 28%, transparent) 70%);
	padding: 0 6px;
	margin: 0 -6px;
}

.ss-hero-lede {
	max-width: 54ch;
	margin: 28px 0 0;
}

.ss-hero-actions {
	margin-top: 40px;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}

/* Hero metric row (3 stats fed from the model). */
.ss-stats {
	margin-top: 54px;
	display: grid;
	grid-template-columns: repeat(4, max-content);
	justify-content: space-between;
	gap: 18px;
	padding-top: 32px;
	border-top: 1.5px solid var(--ss-ink);
	position: relative;
}

.ss-stats::before {
	content: "";
	position: absolute;
	top: -3px;
	left: 0;
	width: 80px;
	height: 5px;
	background: var(--ss-red);
}

.ss-stat-value {
	font-family: var(--ss-display);
	font-size: 34px;
	font-weight: 700;
	color: var(--ss-ink);
	display: block;
	line-height: 1;
}

.ss-stat-label {
	font-family: var(--ss-display);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ss-ink-3);
	font-weight: 600;
	display: block;
	margin-top: 6px;
}

/* Hero "stamp" decoration on the right. */
.ss-hero-stamp-wrap {
	position: relative;
}

/* Same perforated postage-stamp treatment as the plan/product stamps: a perforation mask punches the edge
   holes and a printed inner frame (::before) sits inset from them. */
.ss-hero-stamp {
	--perf: 7px;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 26px;
	background: var(--ss-stamp-2);
	border: 0;
	-webkit-mask:
		radial-gradient(var(--perf) at left center,   #0000 96%, #000) left   / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at right center,  #0000 96%, #000) right  / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at center top,    #0000 96%, #000) top    / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		radial-gradient(var(--perf) at center bottom, #0000 96%, #000) bottom / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		linear-gradient(#000 0 0) center / calc(100% - 2 * var(--perf)) calc(100% - 2 * var(--perf)) no-repeat;
	mask:
		radial-gradient(var(--perf) at left center,   #0000 96%, #000) left   / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at right center,  #0000 96%, #000) right  / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at center top,    #0000 96%, #000) top    / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		radial-gradient(var(--perf) at center bottom, #0000 96%, #000) bottom / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		linear-gradient(#000 0 0) center / calc(100% - 2 * var(--perf)) calc(100% - 2 * var(--perf)) no-repeat;
	filter: drop-shadow(0 8px 18px rgba(50, 30, 10, 0.18));
}

/* Printed frame line of the stamp, inset from the perforation. */
.ss-hero-stamp::before {
	content: "";
	position: absolute;
	inset: calc(var(--perf) + 6px);
	border: 1.5px solid var(--ss-ink);
	pointer-events: none;
	z-index: 1;
}

.ss-hero-stamp-head {
	text-align: center;
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ss-ink);
	font-weight: 600;
	position: relative;
	z-index: 2;
}

.ss-hero-stamp-title {
	font-family: var(--ss-display);
	font-size: 16px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	margin-top: 8px;
	font-weight: 700;
	z-index: 2;
	color: var(--ss-ink);
}

.ss-hero-stamp-art {
	margin: 16px 0 14px;
	/* No frame here -- the only frame is the stamp border; the screenshot sits inside it. */
	position: relative;
	z-index: 2;
}

/* The platform screenshot fills the panel width at its natural aspect; no border of its own -- the only
   frame is the stamp's border. */
.ss-hero-stamp-shot {
	width: 100%;
	height: auto;
	display: block;
	/* Round every slide's corners so a full-bleed screenshot reads as the same "card" as the API terminal
	   shot (which already has rounded, transparent corners) -- keeps the carousel consistent. A hairline frame
	   (theme-aware, like the stamp's own printed frame) tidies the edge against the stamp paper. */
	border-radius: 10px;
	border: 1px solid var(--ss-stamp-frame);
}

/* Screenshot carousel: all slides stacked in one grid cell, cross-fading; only the active one is shown/clickable. */
.ss-hero-carousel {
	display: grid;
}

.ss-hero-carousel > .ss-hero-slide {
	grid-area: 1 / 1;
	display: block;
	opacity: 0;
	transition: opacity .6s ease;
	pointer-events: none;
}

.ss-hero-carousel > .ss-hero-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.ss-hero-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.ss-hero-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background: var(--ss-line);
	opacity: .5;
	transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.ss-hero-dot:hover {
	opacity: 1;
}

.ss-hero-dot.is-active {
	background: var(--ss-red);
	opacity: 1;
	transform: scale(1.25);
}

.ss-hero-stamp-foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	font-family: var(--ss-display);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ss-ink-2);
	font-weight: 600;
	z-index: 2;
}

.ss-hero-stamp-foot .ss-free {
	font-size: 24px;
	color: var(--ss-red);
	font-weight: 700;
	line-height: .9;
}

.ss-delivered {
	position: absolute;
	bottom: -14px;
	left: -16px;
	z-index: 4;
	transform: rotate(-6deg);
	font-family: var(--ss-display);
	color: var(--ss-red);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.15em;
	border: 2px solid var(--ss-red);
	padding: 6px 14px 5px;
	background: var(--ss-paper);
}

/* =========================================================================
   Generic "stamp tile" frame used to host the existing view-components
   (products / blog / exchanges) inside a postal paper block.
   ========================================================================= */
.ss-tile {
	/* Transparent host: the items inside (product / blog cards) carry the stamp
	   look themselves, so an outer frame would only create a box-in-box. */
	background: transparent;
	border: 0;
	padding: 0;
	position: relative;
}

.ss-tile--ink {
	/* A permanently dark accent tile. Pin the ink/stamp palette to its dark values so it
	   does not invert to light (and turn its light text unreadable) under the dark theme. */
	--ss-ink: #1a1410;
	--ss-ink-2: #3a2e22;
	--ss-stamp: #f7eed4;
	background: var(--ss-ink);
	color: var(--ss-stamp);
	border: 1.5px solid var(--ss-ink);
	padding: 32px;
}

/* Diagonal postal stripe used as a decorative footer rule on dark blocks. */
.ss-stripe {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 14px;
	background: repeating-linear-gradient(-45deg,
		var(--ss-red) 0 10px,
		var(--ss-ink) 10px 18px,
		var(--ss-blue) 18px 28px,
		var(--ss-ink) 28px 36px);
}

/* =========================================================================
   HOME - community cards
   ========================================================================= */
.ss-community-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.ss-community-card {
	background: var(--ss-stamp);
	border: 1.5px solid var(--ss-ink);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-align: center;
	align-items: center;
	transition: transform .26s cubic-bezier(.2, .7, .2, 1), box-shadow .26s ease;
}

.ss-community-card:hover {
	transform: translateY(-5px);
}

.ss-community-card img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.ss-community-card h3 {
	font-family: var(--ss-serif);
	font-style: italic;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ss-ink);
	margin: 0;
}

.ss-community-card p {
	font-size: 15.5px;
	color: var(--ss-ink-2);
	margin: 0;
	line-height: 1.5;
}

.ss-community-meta {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: center;
	font-family: var(--ss-mono);
	font-size: 11.5px;
	color: var(--ss-ink-3);
}

.ss-community-card .ss-cta {
	margin-top: auto;
}

/* =========================================================================
   PRODUCTS page - alternating stamp + copy rows
   ========================================================================= */
.ss-prod-row {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 52px;
	align-items: center;
}

.ss-prod-row--flip {
	grid-template-columns: 1fr 380px;
}

.ss-prod-row--flip .ss-prod-stamp {
	order: 2;
}

.ss-prod-row--flip .ss-prod-copy {
	order: 1;
}

/* The product "stamp" tile (perforated paper look). */
.ss-prod-stamp {
	position: relative;
	min-height: 336px;
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: color-mix(in srgb, var(--ss-red) 13%, var(--ss-stamp));
	border: 1.5px solid var(--ss-ink);
	box-shadow: 0 2px 0 rgba(50, 30, 10, 0.06), 0 12px 24px rgba(50, 30, 10, 0.07);
	transition: transform .32s cubic-bezier(.2, .7, .2, 1), box-shadow .32s ease;
	color: var(--ss-ink);
	text-align: center;
}

.ss-prod-stamp:hover {
	transform: translateY(-7px) rotate(-0.6deg);
	box-shadow: 0 2px 0 rgba(50, 30, 10, 0.06), 0 22px 38px rgba(50, 30, 10, 0.18);
}

.ss-prod-stamp::after {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1.5px solid var(--ss-ink);
	pointer-events: none;
}

.ss-prod-stamp-logo {
	flex: 1;
	display: grid;
	place-items: center;
	margin: 28px 14px 14px;
	border-bottom: 1.5px solid var(--ss-ink);
	position: relative;
	z-index: 2;
}

.ss-prod-stamp-logo img {
	max-width: 70%;
	max-height: 120px;
	object-fit: contain;
}

.ss-prod-stamp-denom {
	position: absolute;
	top: 22px;
	right: 25px;
	font-family: var(--ss-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--ss-red);
	z-index: 3;
}

.ss-prod-stamp-country {
	position: absolute;
	top: 25px;
	left: 25px;
	font-family: var(--ss-display);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	z-index: 3;
	opacity: 0.75;
	color: var(--ss-ink);
}

.ss-prod-stamp-name {
	position: relative;
	z-index: 2;
	font-family: var(--ss-display);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
	margin-top: 6px;
}

.ss-prod-stamp-foot {
	margin-top: auto;
	padding: 14px 4px 4px;
	display: flex;
	justify-content: space-between;
	font-family: var(--ss-mono);
	font-size: 10.5px;
	color: var(--ss-ink-3);
	z-index: 2;
	position: relative;
}

.ss-prod-meta {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.ss-prod-no {
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ss-red);
	font-weight: 700;
}

.ss-prod-price {
	font-family: var(--ss-display);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ss-ink-3);
	font-weight: 600;
}

.ss-prod-title {
	font-family: var(--ss-serif);
	font-style: italic;
	font-size: clamp(32px, 3.6vw, 46px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	font-weight: 500;
	margin: 8px 0 0;
	color: var(--ss-ink);
}

.ss-prod-desc {
	font-size: 18px;
	color: var(--ss-ink-2);
	line-height: 1.55;
	margin: 18px 0 0;
	max-width: 52ch;
}

.ss-prod-actions {
	display: flex;
	gap: 12px;
	margin-top: 26px;
	flex-wrap: wrap;
}

/* =========================================================================
   STORE / catalogue (Products.cshtml store listing)
   ========================================================================= */
.ss-store-search {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

/* Store grid of marketplace cards. */
.ss-store-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.ss-store-card {
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	transition: transform .26s cubic-bezier(.2, .7, .2, 1), box-shadow .26s ease;
}

.ss-store-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 34px rgba(50, 30, 10, 0.14);
}

.ss-store-card-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 14px;
	background: var(--ss-red);
	color: #fff;
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.08em;
	font-weight: 700;
	text-transform: uppercase;
}

/* Keep the "N <id>" label fixed and let the (sometimes long) price keep to one line with a tighter
   tracking, so a wide price doesn't crowd or overrun the id on the left. */
.ss-store-card-band > span:first-child {
	flex: 0 0 auto;
	white-space: nowrap;
}

.ss-store-card-band > span:last-child {
	flex: 0 1 auto;
	min-width: 0;
	text-align: right;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* ── Pricing plan cards ─────────────────────────────────────────────── */
.ss-plan-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}

/* Expandable "more details" block inside a plan card. */
.ss-plan-more {
	border-top: 1.5px solid var(--ss-line);
	padding-top: 12px;
}

.ss-plan-more > summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink-3);
	display: flex;
	align-items: center;
	gap: 6px;
}

.ss-plan-more > summary::-webkit-details-marker { display: none; }

.ss-plan-more > summary::before {
	content: "+";
	font-size: 14px;
	line-height: 1;
}

.ss-plan-more[open] > summary::before { content: "\2212"; }

.ss-plan-more > summary:hover { color: var(--ss-red); }

.ss-plan-more-list {
	margin-top: 12px;
	font-size: 13px;
}

/* Each plan is a postage stamp: cream "stamp paper" with perforated edges punched
   out via a mask (the holes reveal the dark page behind, like a real stamp), a
   printed inner frame, a resting tilt and a peel-up hover. The ink palette is pinned
   locally so the dark text stays readable on the light paper regardless of theme. */
.ss-plan-card {
	--perf: 7px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	color: var(--ss-ink-2);
	background: var(--ss-stamp-paper, #efe7d2);
	border: 0;
	padding: 30px 26px;
	-webkit-mask:
		radial-gradient(var(--perf) at left center,   #0000 96%, #000) left   / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at right center,  #0000 96%, #000) right  / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at center top,    #0000 96%, #000) top    / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		radial-gradient(var(--perf) at center bottom, #0000 96%, #000) bottom / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		linear-gradient(#000 0 0) center / calc(100% - 2 * var(--perf)) calc(100% - 2 * var(--perf)) no-repeat;
	mask:
		radial-gradient(var(--perf) at left center,   #0000 96%, #000) left   / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at right center,  #0000 96%, #000) right  / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at center top,    #0000 96%, #000) top    / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		radial-gradient(var(--perf) at center bottom, #0000 96%, #000) bottom / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		linear-gradient(#000 0 0) center / calc(100% - 2 * var(--perf)) calc(100% - 2 * var(--perf)) no-repeat;
	filter: drop-shadow(var(--ss-stamp-shadow, 0 4px 6px rgba(0, 0, 0, 0.35)));
	transition: transform 0.25s ease, filter 0.25s ease;
}

/* Printed frame line of the stamp, inset from the perforation. */
.ss-plan-card::before {
	content: "";
	position: absolute;
	inset: calc(var(--perf) + 6px);
	border: 1.5px solid var(--ss-ink);
	pointer-events: none;
}

/* Lift on hover (no rotation — tilting blurs the text). */
.ss-plan-card:hover {
	transform: translateY(-8px) scale(1.03);
	filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.45));
	z-index: 3;
}

/* The recommended plan stands out: larger, lifted, with a stronger red double frame. */
.ss-plan-card--popular {
	transform: scale(1.06);
	z-index: 2;
	filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5));
}

.ss-plan-card--popular:hover {
	transform: translateY(-8px) scale(1.09);
}

.ss-plan-card--popular::before {
	border-color: var(--ss-red);
	border-width: 2px;
	box-shadow: inset 0 0 0 3px var(--ss-red);
}

.ss-plan-badge {
	position: absolute;
	top: calc(var(--perf) + 12px);
	right: calc(var(--perf) + 10px);
	background: var(--ss-red);
	color: #fff;
	font-family: var(--ss-display);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 4px 10px;
	transform: rotate(7deg);
}

@media (prefers-reduced-motion: reduce) {
	.ss-plan-card:hover { transform: none; }
	.ss-plan-card--popular,
	.ss-plan-card--popular:hover { transform: scale(1.06); }
	.ss-plan-logo-link:hover { transform: none; }
}

/* A plan card that is also the radio button for choosing it: the whole stamp is the hit area, and the
   chosen one prints its frame in red. The native control still exists for the keyboard and for posting. */
.ss-plan-card--pick {
	cursor: pointer;
}

.ss-plan-card--pick input[type="radio"] {
	position: absolute;
	top: calc(var(--perf) + 14px);
	right: calc(var(--perf) + 14px);
	accent-color: var(--ss-red);
	width: 17px;
	height: 17px;
	margin: 0;
}

.ss-plan-card--pick:has(input:checked)::before {
	border-color: var(--ss-red);
	border-width: 2px;
	box-shadow: inset 0 0 0 3px var(--ss-red);
}

.ss-plan-card--pick:has(input:focus-visible)::before {
	border-color: var(--ss-red);
}

.ss-plan-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1.5px solid var(--ss-line);
}

.ss-plan-name {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
}

/* With a tier badge the head splits in two: name and price on the left, the badge filling the
   free space on the right. A card without one stays a plain stack. */
.ss-plan-head:has(.ss-plan-logo) {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 18px;
	align-items: center;
}

.ss-plan-head:has(.ss-plan-logo) .ss-plan-name {
	grid-column: 1;
	grid-row: 1;
}

.ss-plan-head:has(.ss-plan-logo) .ss-plan-price {
	grid-column: 1;
	grid-row: 2;
}

/* The badge leads to the plan page, same as the name; line-height 0 keeps the anchor from adding a
   baseline strip under the image. */
.ss-plan-logo-link {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	display: block;
	line-height: 0;
	transition: transform 0.2s ease;
}

.ss-plan-logo-link:hover {
	transform: scale(1.06);
}

.ss-plan-logo {
	width: 84px;
	height: auto;
	border-radius: 10px;
}

.ss-plan-name a { color: inherit; }
.ss-plan-name a:hover { color: var(--ss-red); }

.ss-plan-price {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ss-plan-price-main {
	font-family: var(--ss-serif);
	font-size: 26px;
	font-weight: 600;
	color: var(--ss-ink);
	line-height: 1.1;
}

.ss-plan-price-note {
	font-family: var(--ss-display);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ss-ink-3);
}

.ss-plan-price-sub {
	font-family: var(--ss-text);
	font-size: 12.5px;
	color: var(--ss-ink-3);
}

/* What the plan is for, above its bullets -- the same role the description has on a product card. */
.ss-plan-lede {
	font-family: var(--ss-text);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ss-ink-3);
	margin: 0;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--ss-line);
}

/* A bullet may name a product, and the link has to read as one without shouting over the list. */
.ss-plan-features a {
	color: var(--ss-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ss-line);
}

.ss-plan-features a:hover {
	color: var(--ss-red);
	border-bottom-color: var(--ss-red);
}

.ss-plan-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: var(--ss-text);
	font-size: 14px;
	color: var(--ss-ink-2);
	line-height: 1.4;
}

.ss-plan-features li {
	position: relative;
	padding-left: 22px;
}

.ss-plan-features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ss-green, #2f7d32);
	font-weight: 700;
}

.ss-plan-cta {
	width: 100%;
	justify-content: center;
	text-align: center;
	margin-top: auto;
}

@media (max-width: 1024px) {
	.ss-plan-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.ss-plan-grid { grid-template-columns: 1fr; }
}

.ss-store-card-body {
	padding: 18px;
	display: flex;
	gap: 14px;
	flex: 1;
}

.ss-store-thumb {
	width: 96px;
	height: 96px;
	object-fit: contain;
	background: var(--ss-stamp-2);
	border: 1px solid var(--ss-line);
	flex-shrink: 0;
}

.ss-store-thumb--ph {
	display: grid;
	place-items: center;
	font-size: 30px;
	color: var(--ss-ink-4);
}

.ss-store-card-title {
	font-family: var(--ss-display);
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
	line-height: 1.1;
}

.ss-store-card-desc {
	font-size: 14px;
	color: var(--ss-ink-2);
	margin: 6px 0 0;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ss-store-card-foot {
	margin-top: 10px;
	padding-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	align-items: center;
	border-top: 1px dotted var(--ss-line);
	font-family: var(--ss-mono);
	font-size: 11.5px;
	color: var(--ss-ink-3);
}

.ss-store-card-foot .ss-star {
	color: var(--ss-red);
	font-weight: 600;
}

.ss-store-tag {
	font-family: var(--ss-display);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink-2);
	border: 1px solid var(--ss-line);
	padding: 3px 7px;
	transition: border-color .2s ease, color .2s ease;
}

.ss-store-tag:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
}

.ss-store-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 32px;
	align-items: start;
}

.ss-store-sidebar {
	position: sticky;
	top: 90px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* =========================================================================
   PRICING page - tariff "denomination" stamps + comparison sheet
   ========================================================================= */
.ss-price-sheet-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 22px;
	margin-bottom: 26px;
	border-bottom: 1.5px solid var(--ss-ink);
	flex-wrap: wrap;
	gap: 12px;
}

.ss-price-sheet-title {
	font-family: var(--ss-serif);
	font-style: italic;
	font-size: 30px;
	letter-spacing: -0.01em;
	font-weight: 500;
	color: var(--ss-ink);
}

/* The pricing comparison table in the postal look, on the .pricing-table markup the controller JS
   works with. */
.pricing-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ss-text);
	color: var(--ss-ink-2);
	background: var(--ss-stamp);
}

.pricing-table th,
.pricing-table td {
	border: 1px solid var(--ss-line);
	padding: 12px 14px;
	text-align: center;
	vertical-align: middle;
}

.pricing-table .feature-column,
.pricing-table .feature-name {
	text-align: left;
}

.pricing-table thead th {
	background: var(--ss-paper);
	color: var(--ss-ink);
	font-family: var(--ss-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 13px;
}

.pricing-table .feature-name {
	color: var(--ss-ink-2);
	font-size: 15px;
}

.pricing-table .feature-group-header .group-title {
	background: var(--ss-ink);
	color: var(--ss-stamp);
	/* Flex-center so the icon chip and the short uppercase label line up vertically. */
	display: flex;
	align-items: center;
	font-family: var(--ss-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
}

.pricing-table .group-title .group-icon {
	margin-right: 10px;
	/* The emoji is a fixed dark-coloured glyph, barely visible on the dark group band. Sit it on a
	   small light chip so it stays legible regardless of the band/theme colour. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #f7eed4;
	font-size: 13px;
	line-height: 1;
	vertical-align: middle;
}

.pricing-table .checkmark {
	color: var(--ss-teal);
	font-weight: 700;
	font-size: 16px;
}

.pricing-table .limitation {
	font-family: var(--ss-mono);
	font-size: 12px;
	color: var(--ss-ink-3);
	line-height: 1.4;
}

.pricing-table .feature-value {
	font-family: var(--ss-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--ss-ink);
}

.pricing-table .feature-value.infinity {
	color: var(--ss-red);
}

.pricing-table .feature-link {
	color: var(--ss-red);
}

.pricing-table .group-separator td {
	border-bottom: 2px solid var(--ss-ink);
}

.pricing-table .price-row td {
	background: var(--ss-stamp-2);
}

.pricing-table .price-main {
	font-family: var(--ss-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ss-ink);
	font-size: 14px;
}

.pricing-table .price-detail {
	font-family: var(--ss-mono);
	font-size: 12px;
	color: var(--ss-ink-3);
	margin-top: 2px;
}

.pricing-table .column-hover {
	background: color-mix(in srgb, var(--ss-highlight) 22%, transparent);
}

/* Buttons inside the pricing table action row -> postal CTA look. */
.pricing-table .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 16px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-ink);
	color: var(--ss-stamp);
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.pricing-table .btn:hover {
	background: var(--ss-red);
	border-color: var(--ss-red);
	color: #fff;
}

.pricing-table .btn-success {
	background: var(--ss-teal);
	border-color: var(--ss-teal);
}

.pricing-table .btn-info {
	background: var(--ss-blue);
	border-color: var(--ss-blue);
}

/* =========================================================================
   PRODUCT detail page
   ========================================================================= */
.ss-detail-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 52px;
	align-items: center;
}

/* A grid item may not shrink below its min-content unless told to, and this column holds the install
   command, which cannot wrap. Its width then becomes the column's floor and carries the heading, the
   lede and the screenshot off the side of a phone. The command scrolls inside its own box instead. */
.ss-detail-hero > * {
	min-width: 0;
}

.ss-detail-stats {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.ss-detail-stat-value {
	font-family: var(--ss-display);
	font-size: 30px;
	font-weight: 700;
	color: var(--ss-ink);
	display: block;
	line-height: 1;
}

.ss-detail-stat-label {
	font-family: var(--ss-display);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ss-ink-3);
	font-weight: 600;
	display: block;
	margin-top: 6px;
}

.ss-detail-shot {
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp-2);
	padding: 14px;
	box-shadow: 0 3px 0 rgba(50, 30, 10, 0.06), 0 22px 44px rgba(50, 30, 10, 0.12);
}

.ss-detail-shot img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--ss-line);
}

/* A line of live figures under the hero copy: the same numbers the home page puts in a stat wall, said
   in one sentence instead, so the two pages do not open identically. */
.ss-hero-note {
	font-family: var(--ss-text);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ss-ink-3);
	margin: 22px 0 0;
	max-width: 760px;
}

.ss-hero-note [data-stat] {
	color: var(--ss-ink);
	font-weight: 600;
}

/* The architecture diagram, mounted like a screenshot: a live read-only drawing whose canvas, grid and node
   colours follow the page's tokens in either theme. */
.ss-arch {
	margin: 0;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp-2);
	padding: 16px 16px 12px;
	box-shadow: 0 3px 0 rgba(50, 30, 10, 0.06), 0 22px 44px rgba(50, 30, 10, 0.12);
}

.ss-arch figcaption {
	font-family: var(--ss-display);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ss-ink-3);
	text-align: center;
	margin-top: 12px;
}

/* The drawing fits to the host's width, so the height follows its proportions rather than the copy. */
.ss-arch__diagram {
	height: 420px;
	min-height: 0;
	margin: 0;
	border-radius: 4px;
}

/* Four columns of named parts need more than half the row to stay legible; the feature list beside it
   drops to a single column for that. */
@media (min-width: 901px) {
	.ss-pillar__grid:has(.ss-arch) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr); }
}

@media (max-width: 640px) {
	.ss-arch { padding: 10px 10px 8px; }
	.ss-arch__diagram { height: 220px; }
}

/* The contents page of an offering: the parts, numbered, each a link down to its own section. Sits in
   the hero, so a reader sees the whole shape of the platform before scrolling into any of it. */
.ss-pillar-index {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0;
	border-top: 1.5px solid var(--ss-ink);
	margin-top: 44px;
}

.ss-pillar-index__item {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 20px 22px 22px 0;
	border-right: 1px solid var(--ss-line);
	text-decoration: none;
	color: inherit;
	transition: color .2s ease;
}

.ss-pillar-index__item:last-child { border-right: 0; }
.ss-pillar-index__item:not(:first-child) { padding-left: 22px; }

.ss-pillar-index__num {
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.16em;
	font-weight: 700;
	color: var(--ss-red);
	font-variant-numeric: tabular-nums;
}

.ss-pillar-index__title {
	font-family: var(--ss-serif);
	font-style: italic;
	font-size: 20px;
	line-height: 1.15;
	color: var(--ss-ink);
}

.ss-pillar-index__sub {
	font-family: var(--ss-text);
	font-size: 15px;
	line-height: 1.45;
	color: var(--ss-ink-3);
}

.ss-pillar-index__item:hover .ss-pillar-index__title { color: var(--ss-red); }

/* One row stops fitting six parts long before it stops fitting four: a longer index folds into three
   columns instead of breaking its titles. */
@media (min-width: 901px) and (max-width: 1259px) {
	.ss-pillar-index:has(> :nth-child(5)) {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.ss-pillar-index:has(> :nth-child(5)) > .ss-pillar-index__item:nth-child(3n) { border-right: 0; }
	.ss-pillar-index:has(> :nth-child(5)) > .ss-pillar-index__item:nth-child(3n+1) { padding-left: 0; }
	.ss-pillar-index:has(> :nth-child(5)) > .ss-pillar-index__item:nth-child(n+4) { border-top: 1px solid var(--ss-line); }
}

@media (max-width: 900px) {
	.ss-pillar-index { grid-auto-flow: row; }
	.ss-pillar-index__item {
		border-right: 0;
		border-bottom: 1px solid var(--ss-line);
		padding: 16px 0;
	}
	.ss-pillar-index__item:not(:first-child) { padding-left: 0; }
}

/* =========================================================================
   PILLAR SECTIONS - a numbered part of an offering, told one screen at a time:
   copy and its feature list on one side, a mounted screenshot on the other,
   alternating sides and bands down the page. Used by the broker landing.
   ========================================================================= */
.ss-pillar {
	padding: 44px 0;
	position: relative;
}

/* The landing hero's title and lede keep a reading measure of their own. */
.ss-hero--compact .ss-hero-title { max-width: 900px; }
.ss-hero--compact .ss-hero-lede { max-width: 720px; }

/* A hero that hands straight over to the first section does not need the send-off padding the home
   page's does -- the index row already closes it. */
.ss-hero--compact {
	padding-bottom: 30px;
}

/* The tinted band bleeds past the wrap the same way the Markdown --alt block does. */
.ss-pillar--band {
	background: var(--ss-paper-2);
	box-shadow: 0 0 0 100vmax var(--ss-paper-2);
	clip-path: inset(0 -100vmax);
}

.ss-pillar__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
	gap: 54px;
	align-items: center;
}

/* Media first in the DOM so the screenshot leads on a phone; rtl swaps the columns on wide screens
   without a second copy of the markup (children reset to ltr so the text still reads normally). */
.ss-pillar__grid--flip { direction: rtl; }
.ss-pillar__grid--flip > * { direction: ltr; }

.ss-pillar__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

/* The part number, printed as an outline so it sits behind the eyebrow rather than competing with it. */
.ss-pillar__num {
	font-family: var(--ss-display);
	font-size: 64px;
	font-weight: 700;
	line-height: 0.9;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--ss-line);
	font-variant-numeric: tabular-nums;
	margin-bottom: -6px;
}

.ss-pillar__lede {
	font-family: var(--ss-text);
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--ss-ink-2);
	margin: 0;
}

/* Half a page-width column is too narrow for the 300px tracks the standalone list asks for, so a dozen
   one-liners would stack into one very tall column. Narrower tracks put them side by side -- and the
   two class names have to be written together, because --cols is declared further down the file and
   would otherwise win on source order. */
.ss-pillar__list.ss-feature-list--cols {
	width: 100%;
	grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
	column-gap: 30px;
}

/* Protocol / platform chips under the copy. */
.ss-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* "Coming soon" and friends: the same chip in the muted ink, so an honest caveat does not shout. */
.ss-tag--soon {
	color: var(--ss-ink-3);
	border-color: var(--ss-line);
}

.ss-pillar__media { margin: 0; }
.ss-pillar__media .ss-detail-shot { margin: 0; }

.ss-pillar__media figcaption {
	font-family: var(--ss-display);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ss-ink-3);
	margin-top: 10px;
	text-align: center;
}

/* A pillar whose screenshots are worth more than one: a strip under the main shot. */
.ss-pillar__strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-top: 12px;
}

/* A second look, not a second screenshot: capped and cropped from the top so the strip stays a band
   under the main shot instead of doubling the height of the whole section. */
.ss-pillar__strip img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	object-position: top center;
	display: block;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp-2);
	padding: 6px;
}

@media (max-width: 900px) {
	.ss-pillar { padding: 44px 0; }
	.ss-pillar__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.ss-pillar__grid--flip { direction: ltr; }
	.ss-pillar__num { font-size: 48px; }
}

/* Download / pricing / screenshot card grids. */
.ss-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

/* Plans to pick from: narrower tracks, so three fit across the form's column. */
.ss-card-grid--plans {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ss-mini-card {
	background: var(--ss-stamp);
	border: 1.5px solid var(--ss-ink);
	padding: 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform .26s cubic-bezier(.2, .7, .2, 1), box-shadow .26s ease;
}

.ss-mini-card:hover {
	transform: translateY(-5px);
}

.ss-mini-card h3,
.ss-mini-card h4 {
	font-family: var(--ss-serif);
	font-style: italic;
	font-weight: 500;
	color: var(--ss-ink);
	margin: 0;
}

.ss-mini-card .ss-price-big {
	font-family: var(--ss-display);
	font-size: 36px;
	font-weight: 700;
	color: var(--ss-ink);
	line-height: 1;
}

.ss-mini-card.popular {
	border-color: var(--ss-red);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-red) 30%, transparent);
}

.ss-popular-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ss-red);
	color: #fff;
	padding: 4px 14px 3px;
	font-family: var(--ss-display);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
}

.ss-feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}

/* A long list of one-liners reads better across the page than as one tall column. The base list is a
   flex column, so the modifier switches the display outright; narrow screens fall back to one column. */
.ss-feature-list--cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	column-gap: 44px;
}

.ss-feature-list li {
	display: flex;
	gap: 9px;
	font-size: 14.5px;
	color: var(--ss-ink-2);
	border-bottom: 1px dotted var(--ss-line);
	padding-bottom: 8px;
	line-height: 1.4;
}

.ss-feature-list li::before {
	content: "✦";
	color: var(--ss-red);
	font-family: var(--ss-display);
	font-weight: 700;
	flex-shrink: 0;
}

.ss-review-card {
	/* Background, border and the perforated edge come from the site-wide stamp treatment below. */
	padding: 24px;
}

.ss-review-avatar {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border: 1px solid var(--ss-line);
}

/* The NuGet badge sits on --ss-blue, which is a light blue in the dark (sunset) theme -- use dark text
   there so it reads; the inherited white text is fine on the dark-blue light-theme value. */
[data-theme="sunset"] .ss-nuget-badge {
	color: #0d1117;
}

.ss-disclaimer {
	font-family: var(--ss-mono);
	font-size: 12px;
	color: var(--ss-ink-3);
}

/* =========================================================================
   RESPONSIVE - home, products, store and product pages
   ========================================================================= */
@media (max-width: 1023px) {
	.ss-hero-grid,
	.ss-detail-hero {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	/* Stacked order on mobile: copy, then the stamp/carousel, then the stats below it. */
	.ss-hero-grid {
		grid-template-areas:
			"main"
			"stamp"
			"stats";
	}

	/* Center the call-to-action buttons on mobile. */
	.ss-hero-actions {
		justify-content: center;
	}

	.ss-prod-row,
	.ss-prod-row--flip {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.ss-prod-row--flip .ss-prod-stamp,
	.ss-prod-row--flip .ss-prod-copy {
		order: 0;
	}

	.ss-community-grid,
	.ss-store-grid {
		grid-template-columns: 1fr 1fr;
	}

	.ss-store-layout {
		grid-template-columns: 1fr;
	}

	/* Single column now: drop the sidebar-width spacer so the search bar spans full width. */
	.ss-store-search-spacer {
		display: none;
	}

	.ss-store-sidebar {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media (max-width: 640px) {
	.ss-community-grid,
	.ss-store-grid {
		grid-template-columns: 1fr;
	}

	.ss-stats {
		grid-template-columns: repeat(2, max-content);
		justify-content: center;
		gap: 18px 64px;
		margin-top: 0;
		text-align: center;
	}

	.ss-store-card-body {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* Password strength meter (keeps .strength-fill / .strength-text JS hooks). */
.ss-strength {
	margin-top: 4px;
}

.ss-strength .ss-strength-bar {
	width: 100%;
	height: 4px;
	background: var(--ss-paper-2);
	overflow: hidden;
	margin-bottom: 6px;
	border: 1px solid var(--ss-line);
}

.ss-strength .strength-fill {
	height: 100%;
	width: 0;
	background: var(--ss-red);
	transition: width .3s ease;
}

.ss-strength .strength-text {
	font-family: var(--ss-mono);
	font-size: 11.5px;
	color: var(--ss-ink-3);
}

.w-full {
	width: 100%;
}

/* Form footer rows (forgot link, register link, divider over social). */
.ss-form-foot {
	text-align: center;
}

.ss-form-alt {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px dashed var(--ss-line);
	text-align: center;
	font-family: var(--ss-text);
	font-size: 14px;
	color: var(--ss-ink-2);
}

.ss-form-alt p {
	margin: 0 0 6px;
}

.ss-form-alt p:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   AUTH PAGES - two-column (card + aside) layout
   ========================================================================= */
.ss-auth-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px;
	align-items: start;
	max-width: 1000px;
	margin: 0 auto;
}

/* Wide auth pages (e.g. Forgot) use two equal columns on desktop instead of the narrow 320px aside.
   Scoped to the desktop breakpoint on purpose: the base .ss-auth-layout collapses to one column on
   mobile, and an inline grid-template-columns would defeat that media query, so the override lives here. */
@media (min-width: 1024px) {
	.ss-auth-layout--equal {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		max-width: 1080px;
	}
}

.ss-auth-card {
	padding: 44px;
	max-width: 520px;
	width: 100%;
}

.ss-auth-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 30px;
}

.ss-auth-aside {
	/* Direction-aware sticky (driven by auth.js): pins to the top when scrolling up and to the bottom
	   when scrolling down, so a sidebar taller than the viewport reveals all of its content instead of
	   hiding the lower part. "top" here is just the initial/fallback value; auth.js adjusts it on scroll. */
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ss-auth-feats {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ss-auth-feat {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.ss-auth-feat-ico {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ss-ink);
	background: var(--ss-paper-2);
	border: 1.5px solid var(--ss-line);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.ss-auth-feat-ico svg {
	width: 22px;
	height: 22px;
	display: block;
}

.ss-auth-feat:hover .ss-auth-feat-ico {
	color: var(--ss-red);
	border-color: var(--ss-red);
}

.ss-auth-feat h4 {
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
	margin: 0 0 5px;
}

.ss-auth-feat p {
	font-family: var(--ss-text);
	font-size: 14px;
	color: var(--ss-ink-2);
	margin: 0;
	line-height: 1.5;
}

/* "or" divider above the social buttons, in the letterpress style. */
.ss-or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 24px 0;
	color: var(--ss-ink-3);
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ss-or::before,
.ss-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ss-line);
}

/* Social sign-in buttons themed to match the postal CTAs (ink frame, display label). */
.ss-social {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ss-social-btn {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: 50px;
	padding: 0 20px;
	border: 1.5px solid var(--ss-line);
	background: var(--ss-paper-2);
	color: var(--ss-ink);
	font-family: var(--ss-display);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ss-social-btn:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
	background: var(--ss-paper);
}

.ss-social-btn img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

/* The leading provider carries an ink frame, so it reads as the offer rather than one of a row. */
.ss-social-btn--lead {
	border-color: var(--ss-ink);
}

/* "Show more options": bare type, no frame, so it does not compete with the buttons around it. */
.ss-social-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 4px 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--ss-ink-2);
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.ss-social-more:hover {
	color: var(--ss-red);
}

.ss-social-more .ss-icon {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.ss-social-more.is-open .ss-icon {
	transform: rotate(180deg);
}

/* The unfolded providers: square marks in a row, the name kept as the tooltip. */
.ss-social-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.ss-social-icons[hidden] {
	display: none;
}

.ss-social-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 48px;
	border: 1.5px solid var(--ss-line);
	background: var(--ss-paper-2);
	color: var(--ss-ink);
	font-family: var(--ss-display);
	font-size: 11px;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ss-social-ico:hover {
	border-color: var(--ss-red);
	background: var(--ss-paper);
}

.ss-social-ico img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* Sign-in card panes: the provider choice and the email form occupy the same place, one at a time. */
.ss-auth-pane[hidden] {
	display: none;
}

.ss-auth-pane-title {
	font-family: var(--ss-display);
	font-size: 18px;
	color: var(--ss-ink);
	margin: 0 0 18px;
}

.ss-auth-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--ss-ink-3);
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.ss-auth-back:hover {
	color: var(--ss-red);
}

.ss-auth-back .ss-icon {
	width: 14px;
	height: 14px;
}

/* Forgot-password "steps" / support panel (right-hand info column). */
.ss-steps {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ss-step {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	border: 1.5px solid var(--ss-line);
	background: var(--ss-stamp);
	padding: 18px;
}

.ss-step-no {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 99px;
	background: var(--ss-red);
	color: #fff;
	font-family: var(--ss-display);
	font-weight: 700;
	font-size: 13px;
}

.ss-step h4 {
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
	margin: 0 0 4px;
}

.ss-step p {
	font-family: var(--ss-text);
	font-size: 14px;
	color: var(--ss-ink-2);
	margin: 0;
	line-height: 1.5;
}

.ss-support-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ss-support-list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1.5px solid var(--ss-line);
	background: var(--ss-stamp);
	color: var(--ss-ink-2);
	font-family: var(--ss-text);
	font-size: 14.5px;
	transition: border-color .2s ease, color .2s ease;
}

.ss-support-list a:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
}

/* =========================================================================
   PROFILE - sidebar tabs + content panels
   ========================================================================= */
.ss-profile-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 32px;
	align-items: start;
}

/* Sticky lives on the grid item (aside), not the nav: the nav alone is as tall as its
   content, so a sticky nav has no room to travel. The aside's containing block is the full
   grid row (as tall as the main column), so it tracks the scroll and pins at the offset. */
.ss-profile-layout > aside {
	position: sticky;
	top: 90px;
	align-self: start;
}

.ss-profile-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--ss-stamp);
	border: 1.5px solid var(--ss-ink);
	padding: 12px;
}

.ss-profile-nav .nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	color: var(--ss-ink-2);
	font-family: var(--ss-display);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	transition: background-color .2s ease, color .2s ease;
}

.ss-profile-nav .nav-item:hover {
	background: var(--ss-paper-2);
	color: var(--ss-ink);
}

.ss-profile-nav .nav-item.active {
	background: var(--ss-ink);
	color: var(--ss-stamp);
}

.ss-profile-main {
	background: var(--ss-stamp);
	border: 1.5px solid var(--ss-ink);
	overflow: hidden;
}

.ss-tab-head {
	padding: 32px 36px 24px;
	border-bottom: 1.5px solid var(--ss-ink);
}

.ss-tab-head h1 {
	font-family: var(--ss-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 32px;
	letter-spacing: -0.01em;
	color: var(--ss-ink);
	margin: 0 0 6px;
}

.ss-tab-head p {
	font-family: var(--ss-text);
	font-size: 16px;
	color: var(--ss-ink-2);
	margin: 0;
}

.ss-tab-body {
	padding: 32px 36px;
}

/* Toggle option rows (email preferences / profile switches). */
.ss-toggle-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1.5px solid var(--ss-line);
	background: var(--ss-stamp);
	cursor: pointer;
	transition: border-color .2s ease;
}

.ss-toggle-row:hover {
	border-color: var(--ss-ink-3);
}

/* Sliding switch toggle: a visually hidden checkbox (.toggle-switch) drives a track+knob
   (.toggle-slider). Used by the profile privacy and email-preference rows. */
.toggle-switch {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.toggle-slider {
	position: relative;
	flex-shrink: 0;
	width: 42px;
	height: 22px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	border-radius: 999px;
	transition: background .2s ease, border-color .2s ease;
}

.toggle-slider::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 3px;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background: var(--ss-ink);
	border-radius: 50%;
	transition: left .2s ease, background .2s ease;
}

.toggle-switch:checked + .toggle-slider {
	background: var(--ss-red);
	border-color: var(--ss-red);
}

.toggle-switch:checked + .toggle-slider::after {
	left: calc(100% - 14px - 3px);
	background: var(--ss-stamp);
}

.toggle-switch:focus-visible + .toggle-slider {
	outline: 2px solid var(--ss-red);
	outline-offset: 2px;
}

.ss-toggle-row .ss-toggle-title {
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ss-ink);
}

.ss-toggle-row .ss-toggle-desc {
	font-family: var(--ss-text);
	font-size: 13px;
	color: var(--ss-ink-2);
	margin-top: 3px;
}

/* Markdown editor (review/comment composer). It is built on the generic --bg/--text/--border bridge
   variables: they are remapped to the postal palette locally, so it follows the theme without touching
   the component markup, and the corners are square for the postal look. */
.md-editor {
	--bg-primary: var(--ss-stamp-2);
	--bg-secondary: var(--ss-stamp);
	--bg-tertiary: var(--ss-paper-3);
	--text-primary: var(--ss-ink);
	--text-secondary: var(--ss-ink-2);
	--text-muted: var(--ss-ink-3);
	--border-primary: var(--ss-ink);
	--border-secondary: var(--ss-line);
	--accent-primary: var(--ss-red);
	--accent-secondary: var(--ss-red);
}

.md-editor .md-toolbar,
.md-editor .md-textarea,
.md-editor .md-preview-panel,
.md-editor .md-btn,
.md-editor .md-tab-btn,
.md-editor .md-file-area,
.md-editor .md-emoji-panel,
.md-editor .md-refs-panel {
	border-radius: 0;
}

.md-editor .md-textarea:focus {
	box-shadow: none;
}

/* GitHub-style Write / Preview tabs sitting on the left of the toolbar: quiet by default, an accent
   underline marks the active one (state toggled by the `active` class from mdeditor.js). */
.md-editor .md-tab-btn {
	padding: 4px 10px;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	cursor: pointer;
	transition: color .15s, border-color .15s;
}

.md-editor .md-tab-btn:hover {
	color: var(--text-primary);
}

.md-editor .md-tab-btn.active {
	color: var(--text-primary);
	border-bottom-color: var(--accent-primary);
}

/* @-mention autocomplete dropdown, anchored under the caret line inside the write panel. */
.md-editor .md-mention-box {
	position: absolute;
	z-index: 60;
	min-width: 220px;
	max-width: 360px;
	max-height: 240px;
	overflow-y: auto;
	background: var(--bg-tertiary);
	border: 1px solid var(--border-primary);
	box-shadow: var(--shadow-lg);
}

.md-editor .md-mention-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	font-size: 13px;
	color: var(--text-secondary);
	cursor: pointer;
	white-space: nowrap;
}

.md-editor .md-mention-item.active,
.md-editor .md-mention-item:hover {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

.md-editor .md-mention-kind {
	flex-shrink: 0;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 1px 6px;
	border: 1px solid var(--border-secondary);
	color: var(--text-muted);
}

.md-editor .md-mention-name {
	overflow: hidden;
	text-overflow: ellipsis;
}

.ss-avatar-row {
	display: flex;
	gap: 24px;
	align-items: center;
	padding-bottom: 26px;
	margin-bottom: 26px;
	border-bottom: 1px dashed var(--ss-line);
}

.ss-avatar {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border: 1.5px solid var(--ss-ink);
	border-radius: 99px;
}

/* =========================================================================
   USERS directory / single-user profile (community)
   ========================================================================= */
.ss-users-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* An award icon is monochrome art with no colour of its own, loaded per award from the file store. Used
   as a mask rather than an image, it takes the current text colour and so reads in both themes. */
.ss-award-icon {
	display: inline-block;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--ss-award-icon) no-repeat center / contain;
	mask: var(--ss-award-icon) no-repeat center / contain;
}

.ss-user-card {
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	padding: 24px;
	transition: transform .26s cubic-bezier(.2, .7, .2, 1), box-shadow .26s ease;
}

/* No hover lift: as a stamp the card uses the perforation mask, and a box-shadow would not follow
   the mask edge. The user listing stays still like the search page. */

.ss-user-card-head {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 16px;
}

.ss-user-avatar {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border: 1.5px solid var(--ss-ink);
	flex-shrink: 0;
}

.ss-user-name {
	font-family: var(--ss-display);
	font-size: 18px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
	margin: 0;
	line-height: 1.1;
}

.ss-user-name a {
	color: var(--ss-ink);
}

.ss-user-name a:hover {
	color: var(--ss-red);
}

/* Presence dot on the user cards. Drawn only when there is presence to report -- online or away;
   an offline account gets no dot, because a grey ring on every avatar says nothing. */
.ss-user-card .online {
	background: var(--ss-green, #2f7d32);
}

.ss-user-card .away {
	background: #d39a3c;
}

/* =========================================================================
   PAY - gateway picker
   ========================================================================= */
.ss-pay-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.ss-pay-card {
	display: grid;
	place-items: center;
	min-width: 220px;
	min-height: 120px;
	padding: 28px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink);
	font-family: var(--ss-display);
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
	transition: transform .26s cubic-bezier(.2, .7, .2, 1), box-shadow .26s ease, border-color .2s ease;
}

.ss-pay-card:hover {
	transform: translateY(-5px);
	border-color: var(--ss-red);
	box-shadow: 0 18px 34px rgba(50, 30, 10, 0.14);
}

.ss-pay-card img {
	max-width: 180px;
	height: auto;
}

/* =========================================================================
   RESPONSIVE - auth, profile, users and the Markdown editor
   ========================================================================= */
@media (max-width: 1023px) {
	.ss-auth-layout {
		grid-template-columns: 1fr;
		max-width: 560px;
		gap: 36px;
	}

	.ss-auth-aside {
		position: static;
		/* On a phone show the login/registration form first; the "what you get" panel follows below it. */
		order: 1;
	}

	.ss-auth-card {
		max-width: none;
	}

	.ss-profile-layout {
		grid-template-columns: 1fr;
	}

	.ss-profile-layout > aside {
		position: static;
	}

	.ss-profile-nav {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.ss-users-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.ss-auth-card,
	.ss-tab-head,
	.ss-tab-body {
		padding-left: 22px;
		padding-right: 22px;
	}

	/* Editor toolbar on phones: let the grouped dropdown buttons wrap onto their own rows. An
	   overflow scroll container here would clip the open dropdown panels and swallow taps, so the
	   group buttons must live in a normally-flowing, non-clipping row. */
	.md-editor .md-tools {
		flex-wrap: wrap;
	}
}

/* =========================================================================
   COMMUNITY / FORUM (topics list, topic+comments, search, chat,
   private messages, conversation, topic editor). Built on the design-system
   variables + .ss-paper / .ss-input / .ss-cta / .ss-chip / .ss-pager / form
   primitives of postal.css, so both the winter (light) and sunset (dark) themes work.
   ========================================================================= */

/* ---- Forum page header (heading + actions) ---- */
.ss-forum-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}

.ss-forum-head-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---- Forum two-column layout ---- */
.ss-forum-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 48px;
	align-items: start;
}

.ss-forum-main {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.ss-forum-filterbar {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--ss-mono);
	font-size: 13px;
	color: var(--ss-ink-3);
}

.ss-forum-aside {
	position: sticky;
	top: 90px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ---- Topic cards (article previews) ---- */
.ss-topic-card {
	padding: 0;
	overflow: hidden;
}

.ss-topic-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px rgba(50, 30, 10, 0.14);
}

.ss-topic-img {
	position: relative;
	height: 180px;
	overflow: hidden;
}

.ss-topic-img--featured {
	height: 300px;
}

.ss-topic-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ss-topic-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--ss-red);
	color: #fff;
	font-family: var(--ss-display);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 4px 9px 3px;
}

.ss-topic-lock {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--ss-red);
	color: #fff;
	padding: 3px 8px;
	font-size: 12px;
}

.ss-topic-body {
	padding: 28px 32px;
}

.ss-topic-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
	flex-wrap: wrap;
	font-family: var(--ss-mono);
	font-size: 12px;
	color: var(--ss-ink-3);
}

.ss-topic-author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ss-ink-2);
	font-weight: 600;
}

.ss-topic-author:hover {
	color: var(--ss-red);
}

.ss-topic-author img {
	width: 26px;
	height: 26px;
	border-radius: 99px;
	object-fit: cover;
}

.ss-topic-stats {
	display: flex;
	gap: 14px;
	margin-left: auto;
}

.ss-topic-title {
	font-family: var(--ss-serif);
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	font-size: 24px;
	margin: 0 0 12px;
}

.ss-topic-title--featured {
	font-size: 32px;
}

.ss-topic-title a {
	color: var(--ss-ink);
}

.ss-topic-title a:hover {
	color: var(--ss-red);
}

.ss-topic-desc {
	font-size: 15.5px;
	color: var(--ss-ink-2);
	line-height: 1.55;
	margin: 0 0 16px;
}

.ss-chip-count {
	opacity: 0.7;
}

/* ---- Sidebar cards ---- */
.ss-side-card {
	background: var(--ss-stamp);
	border: 1.5px solid var(--ss-ink);
	padding: 24px;
}

.ss-side-title {
	font-family: var(--ss-display);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
	margin: 0 0 16px;
}

.ss-side-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ss-side-link {
	color: var(--ss-ink-2);
	font-family: var(--ss-text);
	font-size: 14.5px;
	line-height: 1.4;
}

.ss-side-link:hover {
	color: var(--ss-red);
}

.ss-side-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.ss-side-count {
	font-family: var(--ss-mono);
	font-size: 11.5px;
	color: var(--ss-ink-3);
	white-space: nowrap;
}

.ss-side-popular {
	display: flex;
	gap: 12px;
}

.ss-side-popular img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border: 1px solid var(--ss-line);
	flex-shrink: 0;
}

.ss-side-popular h4 {
	margin: 0 0 4px;
	font-family: var(--ss-text);
	font-size: 14px;
	line-height: 1.3;
}

.ss-side-date {
	font-family: var(--ss-mono);
	font-size: 11px;
	color: var(--ss-ink-3);
}

/* ---- Search results grid ---- */
.ss-search-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	gap: 24px;
	margin-bottom: 36px;
}

.ss-search-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform .26s cubic-bezier(.2, .7, .2, 1), box-shadow .26s ease;
}

/* Search result cards keep the stamp look but do not move on hover. */

.ss-search-card-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ss-search-card-title {
	font-family: var(--ss-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
	margin: 0;
}

.ss-search-card-title a {
	color: var(--ss-ink);
}

.ss-search-card-title a:hover {
	color: var(--ss-red);
}

/* Category label pill (keeps server CategoryCss class alongside). */
.ss-search-cat {
	font-family: var(--ss-display);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 4px 9px 3px;
	color: #fff;
	background: var(--ss-blue);
}

.ss-search-card-foot {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	font-family: var(--ss-mono);
	font-size: 12px;
	color: var(--ss-ink-3);
}

.ss-search-time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ss-search-card-author {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px dotted var(--ss-line);
	font-family: var(--ss-display);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink-2);
}

.ss-search-card-author img {
	width: 34px;
	height: 34px;
	border-radius: 99px;
	object-fit: cover;
}

/* =========================================================================
   TOPIC (single article + comments)
   ========================================================================= */
/* Reading surface stays calm (no perforation / frame), Medium-style: the text
   leads, not the chrome. Higher specificity (.ss-paper.ss-article) so it wins
   over the site-wide stamp treatment on .ss-paper. */
.ss-paper.ss-article {
	/* Panel width = shared reading width + horizontal padding, so the article body
	   text column matches the product / company prose width. */
	max-width: calc(var(--ss-read, 820px) + 88px);
	margin: 0 auto;
	padding: 40px 44px;
	background: var(--ss-stamp-paper, #fdfaf2);
	color: var(--ss-ink-2);
	border: 1px solid var(--ss-line);
	-webkit-mask: none;
	mask: none;
	filter: none;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.ss-article-head {
	margin-bottom: 18px;
}

.ss-article-title {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.12;
	margin-bottom: 16px;
}

/* Compact single-row byline: avatar · author · date · read · views. */
.ss-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.ss-article-author {
	display: inline-flex;
	gap: 10px;
	align-items: center;
}

.ss-article-author-avatar {
	width: 36px;
	height: 36px;
	border-radius: 99px;
	object-fit: cover;
	border: 1px solid var(--ss-line);
}

.ss-article-author-name {
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
}

.ss-article-author:hover .ss-article-author-name {
	color: var(--ss-red);
}

.ss-article-stats {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	align-items: center;
	font-family: var(--ss-mono);
	font-size: 12.5px;
	color: var(--ss-ink-3);
}

.ss-article-dot {
	color: var(--ss-ink-4);
}

/* Slim action bar under the byline, left aligned and quiet. */
.ss-article-actions {
	display: flex;
	gap: 6px;
	margin-top: 14px;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.ss-article-actions .like-btn.is-liked,
.ss-article-actions .favorite-btn.active,
.ss-article-actions .subscribe-btn.active {
	background: var(--ss-red);
	border-color: var(--ss-red);
	color: #fff;
}

.ss-article-actions .like-btn.is-liked:hover,
.ss-article-actions .favorite-btn.active:hover,
.ss-article-actions .subscribe-btn.active:hover {
	background: var(--ss-red-2);
	border-color: var(--ss-red-2);
	color: #fff;
}

.ss-article-image {
	margin: 28px 0;
	text-align: center;
}

.ss-article-image img {
	width: 100%;
	height: auto;
	border: 1.5px solid var(--ss-ink);
}

.ss-article-image figcaption {
	margin-top: 8px;
	font-family: var(--ss-mono);
	font-size: 12px;
	color: var(--ss-ink-3);
	font-style: italic;
}

.ss-article-body {
	padding: 24px 0;
	max-width: none;
}

.ss-article-foot {
	border-top: 1.5px solid var(--ss-ink);
	padding-top: 36px;
	margin-top: 12px;
}

.ss-article-foot-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: start;
	margin-bottom: 36px;
	padding-bottom: 28px;
	border-bottom: 1px dashed var(--ss-line);
}

.ss-article-foot-grid--share-only {
	display: flex;
	justify-content: flex-end;
}

.ss-article-sharebar {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.ss-article-share-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.ss-helpful-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.ss-article-foot-title {
	font-family: var(--ss-display);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
	margin: 0 0 16px;
}

.ss-article-authorbox {
	display: flex;
	gap: 20px;
	background: var(--ss-stamp-2);
	border: 1.5px solid var(--ss-ink);
	padding: 24px;
	margin-bottom: 36px;
}

.ss-article-authorbox-avatar {
	width: 80px;
	height: 80px;
	border-radius: 99px;
	object-fit: cover;
	border: 1.5px solid var(--ss-ink);
}

.ss-article-authorbox-label {
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ss-ink-3);
	margin: 0 0 4px;
	font-weight: 600;
}

.ss-article-authorbox-name {
	display: block;
	font-family: var(--ss-serif);
	font-style: italic;
	font-size: 22px;
	font-weight: 500;
	color: var(--ss-ink);
	margin-bottom: 8px;
}

.ss-article-authorbox-name:hover {
	color: var(--ss-red);
}

.ss-article-authorbox-meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-family: var(--ss-mono);
	font-size: 12.5px;
	color: var(--ss-ink-3);
}

.ss-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

/* Cards rendered as postage stamps (perforated edges, cream paper) — same letterpress motif as the
   pricing plans, so card grids across the site read consistently. Ink tokens are pinned because the
   paper is always light. */
.ss-related-card {
	--perf: 6px;
	position: relative;
	background: var(--ss-stamp-paper, #efe7d2);
	color: var(--ss-ink-2);
	overflow: hidden;
	-webkit-mask:
		radial-gradient(var(--perf) at left center,   #0000 96%, #000) left   / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at right center,  #0000 96%, #000) right  / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at center top,    #0000 96%, #000) top    / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		radial-gradient(var(--perf) at center bottom, #0000 96%, #000) bottom / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		linear-gradient(#000 0 0) center / calc(100% - 2 * var(--perf)) calc(100% - 2 * var(--perf)) no-repeat;
	mask:
		radial-gradient(var(--perf) at left center,   #0000 96%, #000) left   / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at right center,  #0000 96%, #000) right  / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at center top,    #0000 96%, #000) top    / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		radial-gradient(var(--perf) at center bottom, #0000 96%, #000) bottom / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		linear-gradient(#000 0 0) center / calc(100% - 2 * var(--perf)) calc(100% - 2 * var(--perf)) no-repeat;
	filter: drop-shadow(var(--ss-stamp-shadow, 0 4px 6px rgba(0, 0, 0, 0.3)));
	transition: transform .26s cubic-bezier(.2, .7, .2, 1), filter .26s ease;
}

/* Blog-page related cards stay still; only the homepage teaser lifts (handled by the
   product/homepage hover rule below). */

/* ============================================================================
   SITE-WIDE STAMP TREATMENT
   Card / panel / table containers across the site get the same perforated
   "postage stamp" look as the pricing plans, so everything reads in one
   letterpress style. Defined late so it overrides each container's own border /
   background / hover. Colours follow the theme (light paper in the light theme,
   a raised dark surface in the dark theme) - the perforation, frame and shadow
   carry the stamp identity, so text stays readable in either theme.
   ============================================================================ */
.ss-store-card,
.ss-search-card,
.ss-auth-card,
.ss-mini-card,
.ss-community-card,
.ss-user-card,
.ss-side-card,
.ss-note,
.ss-review-card,
.ss-profile-nav,
.ss-profile-main,
.ss-paper,
.ss-table-wrap {
	--perf: 6px;
	position: relative;
	background: var(--ss-stamp-paper, #efe7d2);
	color: var(--ss-ink-2);
	border: 0;
	box-shadow: none;
	-webkit-mask:
		radial-gradient(var(--perf) at left center,   #0000 96%, #000) left   / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at right center,  #0000 96%, #000) right  / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at center top,    #0000 96%, #000) top    / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		radial-gradient(var(--perf) at center bottom, #0000 96%, #000) bottom / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		linear-gradient(#000 0 0) center / calc(100% - 2 * var(--perf)) calc(100% - 2 * var(--perf)) no-repeat;
	mask:
		radial-gradient(var(--perf) at left center,   #0000 96%, #000) left   / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at right center,  #0000 96%, #000) right  / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-y,
		radial-gradient(var(--perf) at center top,    #0000 96%, #000) top    / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		radial-gradient(var(--perf) at center bottom, #0000 96%, #000) bottom / calc(2 * var(--perf)) calc(2 * var(--perf)) repeat-x,
		linear-gradient(#000 0 0) center / calc(100% - 2 * var(--perf)) calc(100% - 2 * var(--perf)) no-repeat;
	filter: drop-shadow(var(--ss-stamp-shadow, 0 4px 6px rgba(0, 0, 0, 0.28)));
	transition: transform .22s ease, filter .22s ease;
}

/* Every stamp is a compositing layer of its own: its mask and shadow are rasterized once, and scrolling then
   only moves it instead of painting it again frame after frame. */
.ss-hero-stamp,
.ss-plan-card,
.ss-related-card,
.ss-store-card,
.ss-search-card,
.ss-auth-card,
.ss-mini-card,
.ss-community-card,
.ss-user-card,
.ss-side-card,
.ss-note,
.ss-review-card,
.ss-profile-nav,
.ss-profile-main,
.ss-paper,
.ss-table-wrap {
	will-change: transform;
}

/* Hover movement is only for product cards (store + homepage product tiles) and the
   homepage cards. Cards on login/register, search and blog pages keep the stamp look
   but stay still. */
.ss-store-card:hover,
.ss-mini-card:hover,
.ss-community-card:hover,
.ss-home .ss-related-card:hover {
	transform: translateY(-5px) scale(1.02);
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.4));
}

/* Printed inner frame line that makes the perforated card read as a stamp even
   when its paper is close to the page colour. Kept off the big content/table
   panels (.ss-paper / .ss-table-wrap) so it does not cut across their content. */
.ss-related-card::before,
.ss-store-card::before,
.ss-search-card::before,
.ss-auth-card::before,
.ss-mini-card::before,
.ss-community-card::before,
.ss-user-card::before,
.ss-side-card::before,
.ss-note::before,
.ss-review-card::before {
	content: "";
	position: absolute;
	inset: calc(var(--perf, 6px) + 5px);
	border: 1px solid var(--ss-stamp-frame, rgba(58, 46, 34, 0.32));
	pointer-events: none;
	z-index: 1;
}

.ss-related-card-body {
	padding: 16px;
}

.ss-related-card-body h4 {
	margin: 0 0 6px;
	font-family: var(--ss-text);
	font-size: 15px;
	line-height: 1.4;
}

/* ---- Comments ---- */
.ss-comments-title {
	margin-bottom: 28px;
}

.ss-comment-form {
	margin-bottom: 32px;
}

.ss-comment-notice {
	text-align: center;
	color: var(--ss-ink-2);
	margin-bottom: 32px;
}

.ss-comment-notice a {
	color: var(--ss-red);
}

.ss-comments {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin-bottom: 32px;
}

.ss-comment {
	display: flex;
	gap: 16px;
}

.ss-comment--reply {
	margin-left: 56px;
}

.ss-comment-avatar {
	width: 44px;
	height: 44px;
	border-radius: 99px;
	object-fit: cover;
	border: 1px solid var(--ss-line);
	flex-shrink: 0;
}

.ss-comment-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.ss-comment-author {
	color: var(--ss-ink);
	font-family: var(--ss-display);
	font-size: 14px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.ss-comment-date {
	font-family: var(--ss-mono);
	font-size: 12px;
	color: var(--ss-ink-3);
}

.ss-comment-actions {
	display: flex;
	gap: 14px;
	margin-left: auto;
	align-items: center;
}

.ss-comment-action {
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ss-ink-3);
	padding: 0;
	transition: color .2s ease;
}

.ss-comment-action:hover {
	color: var(--ss-red);
}

.comment-like.is-liked {
	color: var(--ss-red);
}

.ss-likers {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
}

.ss-liker-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--border-primary, #444);
}

.ss-comment-action--ok {
	color: var(--ss-teal);
}

.ss-comment-action--err {
	color: var(--ss-red);
}

.ss-comment-content {
	color: var(--ss-ink-2);
	font-family: var(--ss-text);
	font-size: 15.5px;
	line-height: 1.6;
}

.ss-comment-replies {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ---- Poll ---- */
.ss-poll {
	margin-bottom: 32px;
}

.ss-poll-question {
	font-family: var(--ss-display);
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
	margin: 0 0 16px;
}

.ss-poll-choice {
	position: relative;
	border: 1px solid var(--ss-line);
	overflow: hidden;
}

.ss-poll-bar {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--ss-red) 14%, transparent);
}

.ss-poll-choice-row {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
}

.ss-poll-vote {
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--ss-ink);
	font-family: var(--ss-text);
	font-size: 15px;
	text-align: left;
}

.ss-poll-vote:hover {
	color: var(--ss-red);
}

.ss-poll-text {
	font-family: var(--ss-text);
	font-size: 15px;
	color: var(--ss-ink);
}

.ss-poll-count {
	font-family: var(--ss-mono);
	font-size: 13px;
	color: var(--ss-ink-3);
	margin-left: 16px;
	white-space: nowrap;
}

/* =========================================================================
   PRIVATE MESSAGES + CONVERSATION
   ========================================================================= */
.ss-pm-list {
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
}

.ss-pm-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ss-line);
	color: var(--ss-ink-2);
	transition: background-color .15s ease;
}

.ss-pm-row:last-child {
	border-bottom: 0;
}

.ss-pm-row:hover {
	background: var(--ss-stamp-2);
}

.ss-pm-row--unread {
	font-weight: 600;
}

.ss-pm-dot {
	width: 8px;
	height: 8px;
	border-radius: 99px;
	background: var(--ss-red);
	flex-shrink: 0;
}

.ss-pm-avatar {
	width: 48px;
	height: 48px;
	border-radius: 99px;
	object-fit: cover;
	border: 1px solid var(--ss-line);
	flex-shrink: 0;
}

.ss-pm-body {
	flex: 1;
	min-width: 0;
}

.ss-pm-name {
	font-family: var(--ss-display);
	font-size: 14px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
}

.ss-pm-last {
	font-family: var(--ss-text);
	font-size: 13.5px;
	color: var(--ss-ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 2px;
}

.ss-pm-date {
	font-family: var(--ss-mono);
	font-size: 11.5px;
	color: var(--ss-ink-3);
	white-space: nowrap;
	flex-shrink: 0;
}

.ss-conv-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1.5px solid var(--ss-ink);
}

.ss-conv-back {
	font-size: 22px;
	color: var(--ss-ink-3);
	line-height: 1;
}

.ss-conv-back:hover {
	color: var(--ss-red);
}

.ss-conv-avatar {
	width: 44px;
	height: 44px;
	border-radius: 99px;
	object-fit: cover;
	border: 1.5px solid var(--ss-ink);
}

.ss-conv-name {
	font-family: var(--ss-display);
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
}

.ss-conv-name:hover {
	color: var(--ss-red);
}

.ss-conv-thread {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 28px;
}

.ss-conv-line {
	display: flex;
	justify-content: flex-start;
}

.ss-conv-line--mine {
	justify-content: flex-end;
}

.ss-conv-bubble {
	max-width: 70%;
	padding: 14px 18px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink-2);
}

.ss-conv-bubble--mine {
	background: var(--ss-ink);
	color: var(--ss-stamp);
	border-color: var(--ss-ink);
}

.ss-conv-text {
	font-family: var(--ss-text);
	font-size: 15px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

.ss-conv-date {
	font-family: var(--ss-mono);
	font-size: 11px;
	color: var(--ss-ink-3);
	margin-top: 6px;
}

.ss-conv-bubble--mine .ss-conv-date {
	color: color-mix(in srgb, var(--ss-stamp) 60%, transparent);
}

/* Shown where the compose box would be, when a block closed the conversation. */
.ss-conv-blocked {
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px dashed var(--ss-line);
	border-radius: 8px;
	color: var(--ss-ink-3);
	text-align: center;
	font-size: 14px;
}

.ss-conv-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}

.ss-conv-form .ss-textarea {
	flex: 1;
}

.ss-conv-form > button {
	align-self: flex-end;
}

/* =========================================================================
   FORM HELPERS (topic editor / new PM): details panels, dropzone, autocomplete
   ========================================================================= */
.ss-form-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.ss-details {
	border: 1.5px solid var(--ss-ink);
}

.ss-details-summary {
	padding: 14px 18px;
	cursor: pointer;
	font-family: var(--ss-display);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
	background: var(--ss-paper);
}

.ss-details-summary--accent {
	color: var(--ss-red);
	background: color-mix(in srgb, var(--ss-red) 8%, var(--ss-stamp));
}

.ss-details-body {
	padding: 18px;
}

.ss-admin-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ss-drafts-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 12rem;
	overflow-y: auto;
	font-family: var(--ss-mono);
	font-size: 12.5px;
	color: var(--ss-ink-3);
}

.ss-dropzone {
	border: 2px dashed var(--ss-line);
	background: var(--ss-stamp);
	padding: 20px;
	text-align: center;
	cursor: pointer;
	color: var(--ss-ink-3);
	transition: border-color .2s ease, background-color .2s ease;
}

.ss-dropzone:hover,
.ss-dropzone.dragover {
	border-color: var(--ss-red);
	background: color-mix(in srgb, var(--ss-red) 5%, var(--ss-stamp));
}

.ss-file-list {
	margin-top: 12px;
}

.ss-autocomplete {
	position: absolute;
	z-index: 10;
	width: 100%;
	margin-top: 4px;
	background: var(--ss-stamp-2);
	border: 1.5px solid var(--ss-ink);
	max-height: 200px;
	overflow-y: auto;
}

.ss-autocomplete-item {
	padding: 10px 14px;
	cursor: pointer;
	color: var(--ss-ink-2);
	font-family: var(--ss-text);
	font-size: 14.5px;
}

.ss-autocomplete-item:hover {
	background: var(--ss-paper-2);
	color: var(--ss-red);
}

/* =========================================================================
   CHAT (StockSharp AI)
   ========================================================================= */
.ss-chat {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ss-chat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 24px;
	border-bottom: 1.5px solid var(--ss-ink);
}

.ss-chat-head-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ss-chat-title {
	font-family: var(--ss-display);
	font-size: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
	margin: 0;
}

/* The badge's own colours come as a pair -- a background and the text meant to be read on it -- so the
   status sets no colour of its own. */
.ss-chat-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ss-mono);
	font-size: 11px;
}

.ss-chat-dot {
	width: 7px;
	height: 7px;
	border-radius: 99px;
	background: currentColor;
}

.ss-chat-head-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ss-chat-body {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ss-chat-empty {
	text-align: center;
	padding: 40px 0;
	color: var(--ss-ink-3);
}

.ss-chat-empty-title {
	font-family: var(--ss-display);
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink-2);
	margin: 0 0 6px;
}

.ss-chat-composer {
	border-top: 1.5px solid var(--ss-ink);
	padding: 16px 24px;
	background: var(--ss-stamp);
}

.ss-chat-composer-status {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	min-height: 4px;
}

.ss-chat-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.ss-chat-composer-row {
	display: flex;
	gap: 12px;
	align-items: flex-end;
}

.ss-chat-input {
	flex: 1;
	min-height: 3rem;
	max-height: 12rem;
	resize: vertical;
}

.ss-chat-page {
	max-width: none;
	padding: 0;
}

.ss-chat-login {
	align-items: center;
	text-align: center;
	margin: 0 auto;
}

.ss-chat-layout {
	display: grid;
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
	height: calc(100dvh - var(--ss-chat-chrome, 7.5rem));
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.ss-chat-sidebar {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* Without this the column grows to its content and the list never gets its own scrollbar -- the page
	   scrolls instead, carrying the composer out of sight. */
	min-height: 0;
	border-right: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
}

.ss-chat-sidebar-head {
	padding: 16px;
	border-bottom: 1px solid var(--ss-line);
}

.ss-chat-new,
.ss-chat-balance {
	width: 100%;
	justify-content: space-between;
}

.ss-chat-conversations {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 8px;
}

.ss-chat-conversation {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	padding: 11px 10px;
	border: 1px solid transparent;
	border-radius: 7px;
	background: transparent;
	color: var(--ss-ink-2);
	text-align: left;
	cursor: pointer;
}

.ss-chat-conversation strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--ss-text);
	font-size: 14px;
}

.ss-chat-conversation small {
	font-family: var(--ss-mono);
	font-size: 10px;
	color: var(--ss-ink-3);
}

.ss-chat-conversation:hover {
	background: var(--ss-paper-2);
}

.ss-chat-conversation.is-active {
	border-color: var(--ss-red);
	background: var(--ss-paper);
	color: var(--ss-ink);
}

.ss-chat-account {
	padding: 12px;
	border-top: 1px solid var(--ss-line);
}

.ss-chat-account small {
	display: block;
	padding: 6px 4px 0;
	color: var(--ss-ink-3);
	font-size: 10px;
	line-height: 1.35;
}

.ss-chat-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.ss-chat-conversation-actions {
	display: flex;
	align-items: center;
	gap: 2px;
}

.ss-chat-body .chat-bubble {
	max-width: min(82%, 840px);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.ss-chat-body .chat-bubble.ss-prose {
	margin: 0;
	white-space: normal;
}

/* A diagram is read, not skimmed: an answer carrying one takes the width of the thread rather than the
   width a paragraph is comfortable at, and the canvas is given a height worth looking at. */
.ss-chat-body .chat-bubble:has(.ss-diagram-host) {
	max-width: min(98%, 1400px);
	width: 100%;
}

.ss-chat-body .ss-diagram-host {
	width: 100%;
	min-height: 520px;
}

.ss-chat-message-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	color: var(--ss-ink-3);
}

.ss-chat-hint {
	margin-top: 8px;
}

.ss-chat-drop-active {
	outline: 2px dashed var(--ss-red);
	outline-offset: -8px;
}

.ss-chat-top-up-box {
	max-width: 620px;
}

.ss-chat-prompt-box {
	max-width: 560px;
}

.ss-chat-prompt-box [data-prompt-input] {
	margin-top: 12px;
}

/* Crypto invoice: a receipt to read and copy from, so it keeps its own quiet frame -- no stamp
   perforation, no red rules -- and one centred column everything lines up in. */
.ss-crypto {
	display: grid;
	justify-items: center;
	gap: 26px;
	padding: 34px 28px;
	border: 1px solid var(--ss-line);
	border-radius: 10px;
	background: var(--ss-paper-2);
	text-align: center;
}

.ss-crypto-field {
	display: grid;
	justify-items: center;
	gap: 8px;
	width: 100%;
}

.ss-crypto-label {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ss-ink-3);
}

.ss-crypto-amount {
	font-family: var(--ss-display);
	font-size: 30px;
	line-height: 1.1;
	color: var(--ss-ink);
	font-variant-numeric: tabular-nums;
}

.ss-crypto-address {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 100%;
}

.ss-crypto-address code {
	font-family: var(--ss-mono);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ss-ink);
	word-break: break-all;
	background: none;
	padding: 0;
}

.ss-crypto-copy {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--ss-line);
	border-radius: 7px;
	background: none;
	color: var(--ss-ink-3);
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease;
}

.ss-crypto-copy svg {
	width: 16px;
	height: 16px;
}

.ss-crypto-copy:hover {
	color: var(--ss-ink);
	border-color: var(--ss-ink-3);
}

/* The picture is the address; the quiet zone around it must stay white whatever the page is. */
.ss-crypto-qr {
	width: 232px;
	height: 232px;
	padding: 12px;
	border: 1px solid var(--ss-line);
	border-radius: 8px;
	background: #fff;
	image-rendering: pixelated;
}

.ss-crypto-network {
	max-width: 46ch;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ss-ink-2);
}

.ss-crypto-no {
	margin: 0;
	font-family: var(--ss-mono);
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--ss-ink-3);
}

.ss-crypto-state {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 14px;
	color: var(--ss-ink-3);
}

.ss-crypto-state::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 99px;
	background: currentColor;
}

.ss-crypto-state--paid {
	color: var(--ss-teal);
}

@media (max-width: 520px) {
	.ss-crypto {
		padding: 26px 18px;
		gap: 22px;
	}

	.ss-crypto-qr {
		width: 190px;
		height: 190px;
	}
}

.ss-chat-top-up-amounts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 8px;
	margin-top: 16px;
}

.ss-chat-top-up-packages {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 18px 0;
}

.ss-chat-top-up-package {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 8px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--ss-line);
	border-radius: 7px;
	cursor: pointer;
}

.ss-chat-top-up-package input {
	grid-row: 1 / span 2;
}

.ss-chat-top-up-package small {
	color: var(--ss-ink-3);
}

.ss-chat-top-up-package:has(input:checked) {
	border-color: var(--ss-red);
	background: var(--ss-paper-2);
}

@media (max-width: 820px) {
	.ss-chat-page {
		padding: 10px 0;
	}

	.ss-chat-layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
		height: calc(100dvh - 7rem);
		min-height: 520px;
	}

	.ss-chat-sidebar {
		border-right: 0;
		border-bottom: 1.5px solid var(--ss-ink);
	}

	.ss-chat-sidebar-head {
		display: none;
	}

	.ss-chat-conversations {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		padding: 7px;
	}

	.ss-chat-conversation {
		flex: 0 0 min(210px, 70vw);
	}

	.ss-chat-account {
		position: absolute;
		top: 8px;
		right: 8px;
		padding: 0;
		border: 0;
		z-index: 2;
	}

	.ss-chat-account small,
	.ss-chat-balance span {
		display: none;
	}
}

@media (max-width: 640px) {
	.ss-chat-head,
	.ss-chat-composer,
	.ss-chat-body {
		padding-left: 14px;
		padding-right: 14px;
	}

	.ss-chat-head,
	.ss-chat-head-right {
		align-items: stretch;
	}

	.ss-chat-head-right {
		width: 100%;
	}

	.ss-chat-head-right .ss-chips {
		flex: 1;
	}

	.ss-chat-composer-row {
		gap: 8px;
	}

	.ss-chat-composer-row .btn:not(.ss-chat-attach) {
		padding-left: 10px;
		padding-right: 10px;
	}

	.ss-chat-body {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.ss-chat-body .chat-bubble {
		max-width: 94%;
	}

	.ss-chat-top-up-packages {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   RESPONSIVE - forum, topic, search and messages
   ========================================================================= */
@media (max-width: 1023px) {
	.ss-forum-layout {
		grid-template-columns: 1fr;
	}

	.ss-forum-aside {
		position: static;
	}

	.ss-paper.ss-article {
		padding: 28px 20px;
	}

	.ss-article-foot-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.ss-admin-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.ss-search-grid {
		grid-template-columns: 1fr;
	}

	.ss-article-meta {
		flex-direction: column;
		align-items: flex-start;
	}

	.ss-article-stats {
		align-items: flex-start;
	}

	.ss-article-actions {
		justify-content: flex-start;
	}

	.ss-article-sharebar {
		align-items: flex-start;
		text-align: left;
	}

	.ss-article-share-actions {
		justify-content: flex-start;
	}

	.ss-comment--reply {
		margin-left: 20px;
	}

	.ss-conv-bubble {
		max-width: 85%;
	}
}

/* =========================================================================
   MISC PAGES

   Code converter, video, bug statistics, error page and exchange logos.
   Built on the same design-system variables, so both the winter (light)
   and sunset (dark) themes work.
   ========================================================================= */

/* ---- Error page big status code ---- */
.ss-error-code {
	font-family: var(--ss-display);
	font-size: clamp(96px, 16vw, 140px);
	font-weight: 700;
	line-height: 0.9;
	color: var(--ss-ink);
	opacity: 0.14;
	margin-bottom: 8px;
}

/* =========================================================================
   CONVERTER (MQL / Pine -> StockSharp C#)
   ========================================================================= */
.ss-conv-controls {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.ss-conv-control {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ss-conv-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: stretch;
}

.ss-conv-pane {
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	overflow: hidden;
}

.ss-conv-pane-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	background: var(--ss-paper);
	border-bottom: 1.5px solid var(--ss-ink);
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink-2);
}

.ss-conv-pane-title {
	display: inline-flex;
	align-items: center;
}

.ss-conv-iconbtn {
	background: transparent;
	border: 0;
	color: var(--ss-ink-3);
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	transition: color .2s ease;
}

.ss-conv-iconbtn:hover {
	color: var(--ss-red);
}

.ss-conv-code {
	flex: 1;
	min-height: 400px;
	padding: 16px;
	background: var(--ss-stamp);
	color: var(--ss-ink);
	font-family: var(--ss-mono);
	font-size: 13px;
	line-height: 1.5;
	resize: none;
	outline: none;
	border: 0;
}

.ss-conv-code::placeholder {
	color: var(--ss-ink-4);
}

.ss-conv-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 1023px) {
	.ss-conv-grid {
		grid-template-columns: 1fr;
	}

	.ss-conv-arrow {
		padding: 8px 0;
	}
}

/* ---- Exchange / connector logo grid (vc:exchanges) ---- */
.ss-logo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
	gap: 16px;
	justify-items: center;
}

.ss-logo-cell {
	display: grid;
	place-items: center;
	width: 100%;
	padding: 18px;
	border: 1.5px solid var(--ss-line);
	background: var(--ss-stamp-2);
	transition: border-color .2s ease, transform .2s ease;
}

.ss-logo-cell:hover {
	border-color: var(--ss-red);
	transform: translateY(-2px);
}

.ss-logo-cell img {
	height: 44px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Floating thumbnail shown when hovering an image attachment link (see initAttachPreviews in site.js). */
.ss-attach-preview {
    position: absolute;
    z-index: 1000;
    max-width: 280px;
    max-height: 280px;
    padding: 4px;
    border: 1px solid var(--ss-line);
    border-radius: 6px;
    background: var(--ss-paper);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    object-fit: contain;
    pointer-events: none;
}

/* A DaisyUI dropdown panel that uses the `grid` utility (the multi-column Products menu) keeps
   display:grid even when collapsed: in Tailwind v4 the utilities layer overrides DaisyUI's display:none
   from the components layer. The invisible panel (opacity:0) then still overlays the page and swallows
   clicks where its items would be. Force it hidden while collapsed; the open state
   (:focus-within / .dropdown-open / hover) restores display:grid. */
.dropdown:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content {
    display: none;
}

/* Sortable table headers (profile tables). Click handler lives in profile.js. */
.ss-table th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.ss-table th[data-sort]:hover { color: var(--accent-primary); }
.ss-sort-ind { font-size: .75em; opacity: .7; }

/* Aligned sections (:::center / :::left / :::right). */
.ss-md-align--center { text-align: center; }
.ss-md-align--left { text-align: left; }
.ss-md-align--right { text-align: right; }
.ss-md-align--center .ss-md-cta { justify-content: center; }

/* :::spoiler Title — a collapsed block with the title as its summary. */
.ss-md-spoiler {
	border: 1px solid var(--ss-line);
	padding: 12px 16px;
	margin: 1rem 0;
}
.ss-md-spoiler summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--ss-ink);
}
.ss-md-spoiler[open] summary { margin-bottom: 8px; }

/* Feature sections (:::feature-left / :::feature-right): two-column image+text blocks that reveal on
   scroll. The image side is explicit in the Markdown; DOM order is always media-first, and --right
   swaps the columns via direction:rtl (children reset to ltr so text still reads normally). */
.ss-md-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: center;
	margin: 3rem 0;
}
.ss-md-feature__media p { margin: 0; }
.ss-md-feature__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.75rem;
}
.ss-md-feature__text > :first-child { margin-top: 0; }
.ss-md-feature__text > :last-child { margin-bottom: 0; }
.ss-md-feature--right { direction: rtl; }
.ss-md-feature--right > * { direction: ltr; }

/* Scroll-reveal hook: hidden + shifted until site.js adds .is-visible when it enters the viewport. */
.ss-md-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.ss-md-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.ss-md-reveal { opacity: 1; transform: none; transition: none; }
}

/* ":::feature-left alt" puts the section on a tinted band. The band bleeds past the article column via
   a huge spread shadow, clipped back to the section's own height, so no wrapper markup is needed. */
.ss-md-feature--alt {
	background: var(--ss-paper-2);
	padding: 2.25rem 1.25rem;
	border-radius: 10px;
	box-shadow: 0 0 0 100vmax var(--ss-paper-2);
	clip-path: inset(0 -100vmax);
}

/* Product title with its author credit: the credit belongs to the title, so it sits on the same line and
   drops under it only when there is no room. Quiet by default so it does not compete with the title, but
   the name itself is a link and reads as one. */
.ss-product-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 16px;
}
.ss-product-author {
	margin: 0;
	font-size: 14.5px;
	color: var(--ss-ink-3);
}
.ss-product-author a {
	color: var(--ss-ink-2);
	text-decoration: none;
	border-bottom: 1px solid var(--ss-line);
}
.ss-product-author a:hover {
	color: var(--ss-red);
	border-bottom-color: var(--ss-red);
}

/* ===== :::cards — responsive card row, one card per ### heading ===== */
/* Wrapped and centred rather than laid out on a grid, which puts a leftover card in the first column: a
   fourth card under a row of three sits under the middle of the block -- the same shape, and the same
   reason, as the stats block. */
.ss-md-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin: 2rem 0;
}
.ss-md-card {
	flex: 1 1 240px;
	max-width: 360px;
	background: var(--ss-stamp);
	border: 1px solid var(--ss-line);
	border-radius: 10px;
	padding: 20px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ss-md-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ss-stamp-shadow);
	border-color: var(--ss-red);
}
.ss-md-card__title {
	font-family: var(--ss-serif);
	font-style: italic;
	font-size: 21px;
	margin: 0 0 8px;
}
.ss-md-card > :last-child { margin-bottom: 0; }

/* ===== :::stats — one big number per "value | label" line ===== */
/* Wraps rather than lays out a fixed grid, which puts the leftover in the first column: centred wrapping
   keeps the overflow row under the middle of the block, whatever the count. */
.ss-md-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 2rem 0;
	padding: 26px 0;
	border-top: 1px solid var(--ss-line);
	border-bottom: 1px solid var(--ss-line);
}
.ss-md-stat {
	flex: 1 1 150px;
	max-width: 260px;
	text-align: center;
}
.ss-md-stat__value {
	font-family: var(--ss-display);
	font-size: clamp(32px, 5vw, 46px);
	line-height: 1;
	color: var(--ss-red);
	font-variant-numeric: tabular-nums;
}
.ss-md-stat__label {
	margin-top: 8px;
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ss-ink-3);
}

/* ===== :::cta — links as buttons, the first one primary ===== */
.ss-md-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 2rem 0;
}
.ss-prose .ss-md-btn,
.ss-md-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 54px;
	padding: 0 28px;
	border: 1.5px solid var(--ss-ink);
	background: transparent;
	color: var(--ss-ink);
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ss-prose .ss-md-btn:hover,
.ss-md-btn:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
	background: transparent;
}
.ss-prose .ss-md-btn--primary,
.ss-md-btn--primary {
	background: var(--ss-ink);
	border-color: var(--ss-ink);
	color: var(--ss-stamp);
}
.ss-prose .ss-md-btn--primary:hover,
.ss-md-btn--primary:hover {
	background: var(--ss-red);
	border-color: var(--ss-red);
	color: var(--ss-stamp);
}

/* ===== :::split — two shots of the same screen in one frame ===== */
/* The base layer lies flat and the overlay is clipped to a triangle, so a dark and a light screenshot of
   the same window read as one picture cut by a diagonal seam — the quickest way to show "it themes". */
.ss-md-split {
	position: relative;
	isolation: isolate;
	line-height: 0;
	border: 1px solid var(--ss-line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--ss-stamp-shadow);
}
.ss-md-split__layer { margin: 0; }
.ss-md-split__layer p { margin: 0; }
.ss-md-split__layer img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border: 0;
}
/* The cut runs corner to corner on purpose: that is the one line a gradient can be made to match exactly
   at any aspect ratio (see the seam below). A wedge that ends short of the corner cannot be, and the seam
   then lands on the other diagonal -- a stray line across the picture. */
.ss-md-split__layer--over {
	position: absolute;
	inset: 0;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.ss-md-split__layer--over img {
	height: 100%;
	object-fit: cover;
	object-position: top right;
}
/* The seam: a hairline along the cut so the join reads as deliberate rather than as a rendering glitch.
   "to bottom right" is what puts it there: the stop line of that gradient runs through the top-right and
   bottom-left corners, which is exactly the cut above. "to top right" draws the other diagonal instead --
   a line straight across the picture, which is what this hairline exists to avoid. */
.ss-md-split__layer--over::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--ss-stamp) 50%, transparent calc(50% + 0.5px));
	pointer-events: none;
	opacity: 0.55;
}
.ss-md-split:hover { border-color: var(--ss-red); }

@media (max-width: 720px) {
	/* No room for a diagonal on a phone — show the base shot alone. */
	.ss-md-split__layer--over { display: none; }
}

/* ===== :::steps — numbered walkthrough ===== */
.ss-md-steps { margin: 2rem 0; }
.ss-md-step {
	position: relative;
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 18px;
	padding-bottom: 26px;
}
.ss-md-step:last-child { padding-bottom: 0; }
/* The connector line stops at the last step so the sequence has a visible end. */
.ss-md-step::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 46px;
	bottom: 0;
	width: 1px;
	background: var(--ss-line);
}
.ss-md-step:last-child::before { display: none; }
.ss-md-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--ss-line);
	border-radius: 50%;
	background: var(--ss-stamp);
	font-family: var(--ss-display);
	font-size: 19px;
	color: var(--ss-red);
	font-variant-numeric: tabular-nums;
}
.ss-md-step__title {
	font-family: var(--ss-serif);
	font-style: italic;
	font-size: 21px;
	margin: 8px 0 6px;
}
.ss-md-step__body > :last-child { margin-bottom: 0; }

/* ===== :::quote — testimonial with an em-dash attribution ===== */
.ss-md-quote {
	margin: 2rem 0;
	padding: 26px 30px;
	background: var(--ss-stamp);
	border-left: 3px solid var(--ss-red);
	border-radius: 0 10px 10px 0;
}
.ss-md-quote p {
	font-family: var(--ss-serif);
	font-style: italic;
	font-size: 22px;
	line-height: 1.45;
	text-wrap: balance;
}
.ss-md-quote > :last-child { margin-bottom: 0; }
.ss-md-quote__by {
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ss-ink-3);
}

/* ===== Video: compact poster card, the player opens in an overlay =====
   The card carries only a thumbnail, so a page with several videos stays light; site.js swaps in the
   real player on click. */
.ss-md-video {
	position: relative;
	width: min(560px, 100%);
	margin: 2rem auto;
	border: 1px solid var(--ss-line);
	border-radius: 10px;
	overflow: hidden;
	background: #10141b;
}
.ss-md-video__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	transition: transform 0.18s ease;
}
.ss-md-video:hover { border-color: var(--ss-red); box-shadow: var(--ss-stamp-shadow); }
.ss-md-video:hover .ss-md-video__btn { transform: scale(1.01); }
.ss-md-video__poster {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Vimeo, Rutube and VK publish no thumbnail at a predictable address, so their card shows this tile
   instead of an image. The player still loads only on click, which is the point of the card. */
.ss-md-video--noposter .ss-md-video__poster {
	background: radial-gradient(120% 90% at 30% 20%, #223049 0%, #0e131b 68%);
}
.ss-md-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(185, 50, 44, 0.92);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
	transition: transform 0.18s ease, background 0.18s ease;
	pointer-events: none;
}
.ss-md-video:hover .ss-md-video__play { transform: translate(-50%, -50%) scale(1.07); background: var(--ss-red); }
.ss-md-video__play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }

/* A picture in the text, shown at the size of the screen on a click; a click anywhere closes it. */
.ss-prose img.is-zoomable,
.ss-comment-content img.is-zoomable { cursor: zoom-in; }
.ss-img-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(10, 8, 6, 0.9);
	opacity: 0;
	transition: opacity 0.2s ease;
	cursor: zoom-out;
}
.ss-img-overlay.is-open { opacity: 1; }
.ss-img-overlay img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.ss-md-video-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: rgba(10, 8, 6, 0.82);
	opacity: 0;
	transition: opacity 0.22s ease;
}
.ss-md-video-overlay.is-open { opacity: 1; }
.ss-md-video-overlay__box {
	position: relative;
	width: 100%;
	max-width: 1600px;
	background: #000;
	border: 1px solid var(--ss-line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.ss-md-video-overlay__box iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}
.ss-md-video-overlay__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-size: 18px;
	line-height: 1;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	cursor: pointer;
}
.ss-md-video-overlay__close:hover { background: var(--ss-red); border-color: var(--ss-red); }

@media (prefers-reduced-motion: reduce) {
	.ss-md-video-overlay,
	.ss-md-video__btn,
	.ss-md-video__play,
	.ss-md-card { transition: none; }
}

/* Mobile: single column, image on top regardless of the chosen side. */
@media (max-width: 768px) {
	.ss-md-feature {
		grid-template-columns: 1fr;
		gap: 1.25rem;
		margin: 2rem 0;
	}
	.ss-md-feature--right { direction: ltr; }
	.ss-md-feature--alt { padding: 1.5rem 1rem; }
	.ss-md-quote { padding: 20px 22px; }
	.ss-md-quote p { font-size: 19px; }
}

/* A page that asked for the whole window: the shell becomes a column and the page inside it takes what is
   left below the header, so nothing of the background shows under it. */
.ss-fullpage,
.ss-fullpage .drawer,
.ss-fullpage .drawer-content {
	/* A definite height, not a minimum: a minimum lets the shell grow with the conversation, and then the
	   window scrolls instead of the thread -- carrying the list of conversations out of sight. */
	height: 100dvh;
	min-height: 0;
	overflow: hidden;
}

.ss-fullpage .drawer-content {
	display: flex;
	flex-direction: column;
}

.ss-fullpage main {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.ss-fullpage main > .ss-page,
.ss-fullpage .ss-chat-page,
.ss-fullpage .ss-chat-layout {
	flex: 1;
	min-height: 0;
}

.ss-fullpage .ss-page,
.ss-fullpage .ss-chat-page {
	display: flex;
	flex-direction: column;
	/* .ss-wrap centres itself with auto margins, which in a column shrinks it to its content instead of
	   filling the row. */
	width: 100%;
	margin: 0;
}

.ss-fullpage .ss-chat-layout {
	height: auto;
}

/* Bubbles wear the page's own palette. DaisyUI's neutral and primary are lit for its themes, and on the
   light paper they give dark ink on a dark ground. */
.ss-chat-body .chat-bubble,
.ss-chat-body .chat-bubble-neutral {
	background: var(--ss-stamp);
	color: var(--ss-ink);
	border: 1px solid var(--ss-line);
}

.ss-chat-body .chat-bubble-primary {
	background: var(--ss-postmark-red);
	color: var(--ss-stamp-paper);
	border-color: transparent;
}

.ss-chat-body .chat-bubble-error {
	background: var(--ss-red);
	color: var(--ss-stamp-paper);
	border-color: transparent;
}

.ss-chat-body .chat-bubble-primary a,
.ss-chat-body .chat-bubble-error a {
	color: var(--ss-stamp-paper);
}

/* A row's own actions: out of the way until the pointer or the keyboard reaches that conversation. */
.ss-chat-conversation {
	position: relative;
	/* name | date | actions */
	grid-template-columns: minmax(0, 1fr) auto auto;
}

.ss-chat-conversation .ss-chat-conversation-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
	opacity: 0;
	transition: opacity .12s ease;
}

.ss-chat-conversation:hover .ss-chat-conversation-actions,
.ss-chat-conversation:focus-within .ss-chat-conversation-actions,
.ss-chat-conversation.is-active .ss-chat-conversation-actions {
	opacity: 1;
}

.ss-chat-conversation .ss-chat-conversation-actions .btn {
	min-height: 0;
	height: 20px;
	padding: 0 5px;
	font-size: 12px;
	line-height: 1;
}

/* One field: the text, the paperclip and the send button live inside the same frame, and the button
   becomes a stop while an answer is being written. */
.ss-chat-field {
	position: relative;
	flex: 1;
	min-width: 0;
	border: 1.5px solid var(--ss-line);
	border-radius: 10px;
	background: var(--ss-stamp);
	transition: border-color .12s ease;
}

.ss-chat-field.is-dropping {
	border-color: var(--ss-postmark-red);
}

.ss-chat-field .ss-chat-input {
	width: 100%;
	min-height: 76px;
	max-height: 220px;
	padding: 12px 14px 40px;
	border: 0;
	background: transparent;
	color: var(--ss-ink);
	font: inherit;
	resize: none;
	outline: none;
}

.ss-chat-field-tools {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ss-chat-send {
	min-height: 0;
	height: 26px;
	width: 26px;
	padding: 0;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1;
}

.ss-chat-send--stop {
	background: var(--ss-red);
	border-color: var(--ss-red);
	color: var(--ss-stamp-paper);
}

.ss-chat-schema {
	min-height: 0;
	height: 26px;
	padding: 0 8px;
	border-radius: 8px;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .75;
}

.ss-chat-schema.btn-active {
	opacity: 1;
	background: var(--ss-ink);
	border-color: var(--ss-ink);
	color: var(--ss-stamp-paper);
}

.ss-chat-field .ss-chat-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 12px 0;
}

.ss-chat-attachment {
	position: relative;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ss-line);
	border-radius: 8px;
	background: var(--ss-stamp);
	overflow: hidden;
}

.ss-chat-attachment-name {
	padding: 6px 22px 6px 10px;
	font-size: 12px;
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ss-chat-attachment--image {
	width: 56px;
	height: 56px;
}

.ss-chat-attachment--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ss-chat-attachment-remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 16px;
	height: 16px;
	line-height: 14px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	font-size: 12px;
	cursor: pointer;
	background: var(--ss-ink);
	color: var(--ss-stamp-paper);
	opacity: .75;
}

.ss-chat-attachment-remove:hover {
	opacity: 1;
}