/* =========================================================================
   StockSharp Portal - "Postal / Newspaper" visual layer (Phase 1: chrome).

   Hand-written plain CSS (no Tailwind build step). Loaded AFTER site.css so
   it layers on top. Provides the design-system variables, the paper texture
   background, and reusable classes for the shared chrome (notice tape,
   header/nav, footer).

   The design prototype uses [data-theme="dark"] / light. This site already
   ships DaisyUI themes "winter" (light, default) and "sunset" (dark), toggled
   by site.js via the data-theme attribute + cookie. So the light palette is
   mapped to :root + [data-theme="winter"] and the dark palette to
   [data-theme="sunset"] - keeping the existing toggle fully working.
   ========================================================================= */

/* ---- Design-system variables: light (winter / default) ---- */
:root,
[data-theme="winter"] {
	--ss-paper: #ece2c9;
	--ss-paper-2: #e3d6b6;
	--ss-paper-3: #d7c69e;
	--ss-stamp: #f7eed4;
	--ss-stamp-2: #fcf6e3;
	/* The "stamp" identity comes from the perforated edge + printed frame + lift
	   shadow, NOT from a fixed colour, so the paper follows the theme: a light warm
	   paper that sits above the beige page here, and a raised dark surface (lighter
	   than the dark page) in the sunset theme - a light card on a dark UI looked
	   illogical. The frame token draws the inner printed border line. */
	--ss-stamp-paper: #fdfaf2;
	--ss-stamp-shadow: 0 6px 14px rgba(74, 54, 28, 0.28);
	--ss-stamp-frame: rgba(58, 46, 34, 0.32);
	--ss-ink: #1a1410;
	--ss-ink-2: #3a2e22;
	--ss-ink-3: #6a5a44;
	--ss-ink-4: #9a8868;
	--ss-line: #c8b88e;
	--ss-line-2: #d4c498;
	--ss-red: #b9322c;
	--ss-red-2: #8a2520;
	--ss-blue: #1c365b;
	--ss-teal: #3a6f5e;
	--ss-postmark: #5a3a28;
	--ss-postmark-red: #a8392e;
	--ss-highlight: #f4d96a;

	/* StockSharp Designer diagram canvas, read live by the @diagram renderer so a theme toggle
	   repaints it. The light theme keeps a light (cream) canvas matching the page; the renderer caps
	   the link-colour lightness on a light canvas (portal-diagram.ts) so the dark-canvas-tuned links
	   stay visible, instead of darkening the whole canvas. The dark theme (sunset) uses near-black. */
	--diagram-bg: #eae3d2;
	--diagram-grid: #d4cbb0;

	--ss-serif: 'Cormorant Garamond', Georgia, serif;
	--ss-display: 'Antonio', 'Arial Narrow', sans-serif;
	--ss-mono: 'JetBrains Mono', monospace;
	--ss-text: 'Spectral', Georgia, serif;
	--ss-max: 1280px;

	/* Texture dot color (per theme). */
	--ss-tex: rgba(106, 90, 68, 0.06);
	--ss-tex-2: rgba(106, 90, 68, 0.04);
}

/* ---- Design-system variables: dark (sunset) ---- */
[data-theme="sunset"] {
	--ss-paper: #14181f;
	--ss-paper-2: #1c2129;
	--ss-paper-3: #232a35;
	--ss-stamp: #1f242d;
	--ss-stamp-2: #262d38;
	--ss-stamp-paper: #262e3a;
	--ss-stamp-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
	--ss-stamp-frame: rgba(236, 226, 201, 0.20);
	--ss-ink: #ece2c9;
	--ss-ink-2: #cdc09e;
	--ss-ink-3: #8e8262;
	--ss-ink-4: #5c5440;
	--ss-line: #3a3e48;
	--ss-line-2: #2e3340;
	--ss-red: #e07a5f;
	--ss-red-2: #c95d42;
	--ss-blue: #6f9bd1;
	--ss-teal: #7bb59a;
	--ss-postmark: #d8b87a;
	--ss-postmark-red: #e07a5f;
	--ss-highlight: #f4d96a;

	/* Dark theme keeps the original dark diagram canvas. */
	--diagram-bg: #2b2b2e;
	--diagram-grid: #3a3a42;

	--ss-tex: rgba(236, 226, 201, 0.04);
	--ss-tex-2: rgba(236, 226, 201, 0.025);
}

/* @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;
}

/* ---- Keyframes (from the prototype) ---- */
@keyframes notice-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes pmark-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(168, 57, 46, 0.4); }
	50% { box-shadow: 0 0 0 12px rgba(168, 57, 46, 0); }
}

/* ---- Paper texture background + selection ---- */
body {
	background-color: var(--ss-paper);
	background-image:
		radial-gradient(var(--ss-tex) 1px, transparent 1.5px),
		radial-gradient(var(--ss-tex-2) 1px, transparent 1.5px);
	background-size: 3px 3px, 7px 7px;
	background-position: 0 0, 1px 2px;
	background-attachment: fixed;
	transition: background-color .3s ease, color .3s ease;
}

::selection {
	background: var(--ss-highlight);
	/* The highlight is always the light yellow stamp colour, so the selected text must
	   stay dark in both themes (do not use --ss-ink, which flips to light in dark mode). */
	color: #1a1410;
}

/* Emoji used as inline icons (buttons, list items, headings). The class had no styling,
   so glyphs rendered at the default ~1em and looked tiny everywhere; give them a larger,
   consistent size while still scaling with the surrounding text. An explicit Tailwind
   size utility (e.g. text-xl) on the same element still overrides this. */
.icon-emoji {
	font-size: 1.3em;
	line-height: 1;
	display: inline-block;
	vertical-align: -0.1em;
	font-style: normal;
}

/* Shared line icons rendered by the <ss-icon> tag helper. Size scales with the surrounding text;
   the stroke follows currentColor so hover/theme colors just work. */
.ss-icon {
	width: 1.15em;
	height: 1.15em;
	display: inline-block;
	vertical-align: -0.18em;
	flex-shrink: 0;
}

.ss-icon.is-spin {
	animation: ss-spin 0.9s linear infinite;
}

@keyframes ss-spin {
	to { transform: rotate(360deg); }
}

/* =========================================================================
   NOTICE TAPE (scrolling marquee bar)
   ========================================================================= */
.ss-notice {
	background: var(--ss-ink);
	color: var(--ss-stamp);
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 9px 0;
	overflow: hidden;
	white-space: nowrap;
}

.ss-notice-track {
	display: inline-flex;
	gap: 28px;
	animation: notice-scroll 60s linear infinite;
	padding-left: 28px;
	will-change: transform;
}

.ss-notice-item {
	display: inline-flex;
	gap: 28px;
	align-items: center;
}

.ss-notice-item .ss-notice-sep {
	color: var(--ss-red);
}

@media (prefers-reduced-motion: reduce) {
	.ss-notice-track { animation: none; }
}

/* =========================================================================
   HEADER / NAV (sticky, blurred, paper)
   ========================================================================= */
.ss-nav {
	position: sticky;
	top: 0;
	z-index: 80;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--ss-paper) 97%, transparent) 0%,
		color-mix(in srgb, var(--ss-paper) 84%, transparent) 100%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--ss-line);
}

.ss-nav-inner {
	max-width: var(--ss-max);
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	gap: 24px;
	height: 70px;
}

/* Round S# logo */
.ss-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--ss-ink);
}

.ss-logo-mark {
	width: 38px;
	height: 38px;
	border-radius: 99px;
	border: 1.5px solid var(--ss-ink);
	display: grid;
	place-items: center;
	font-family: var(--ss-display);
	font-size: 13px;
	font-weight: 700;
	position: relative;
	letter-spacing: 0.02em;
	color: var(--ss-ink);
	flex: 0 0 auto;
}

.ss-logo-mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border: 0.5px solid var(--ss-ink);
	border-radius: 99px;
}

/* Toolbar brand: the StockSharp mark as an SVG, sized to the old S# badge. */
.ss-logo-img {
	width: 38px;
	height: 38px;
	display: block;
	flex: 0 0 auto;
}

.ss-logo-text {
	font-family: var(--ss-display);
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ss-ink);
	white-space: nowrap;
}

.ss-logo-text small {
	font-family: var(--ss-serif);
	font-style: italic;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
	/* ink-3 is too faint on the dark navbar; ink-2 keeps it legible in both themes. */
	color: var(--ss-ink-2);
	font-weight: 400;
	margin-left: 8px;
}

/* Let the nav take the space between the logo and the right cluster so the menu sits centered. */
.ss-nav-inner > nav {
	flex: 1;
	justify-content: center;
}

/* Main nav list (wraps the vc:menu Horizontal output) */
.ss-nav-menu {
	display: flex;
	gap: 28px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--ss-display);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
}

.ss-nav-menu > li {
	position: relative;
}

/* Nav link (also styles vc:menu emitted links / dropdown triggers) */
.ss-nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ss-ink-2);
	padding: 6px 0;
	font-family: var(--ss-display);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color .2s ease;
}

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

.ss-nav-link.active {
	color: var(--ss-ink);
}

.ss-nav-link.active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--ss-red);
}

/* Dropdown panel for nav groups (the vc:menu Horizontal children) */
.ss-nav-menu .dropdown-content {
	font-family: var(--ss-text);
	text-transform: none;
	letter-spacing: 0;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp-2);
	border-radius: 0;
}

.ss-nav-menu .dropdown-content a {
	color: var(--ss-ink-2);
}

.ss-nav-menu .dropdown-content a:hover {
	color: var(--ss-red);
	background: transparent;
}

/* Divider row inside a nav dropdown / mobile submenu (a DynamicMenu IsBlank item). */
.ss-menu-sep {
	display: block;
	height: 0;
	margin: 6px 12px;
	padding: 0;
	border: 0;
	border-top: 1.5px solid var(--ss-ink);
	opacity: .35;
	list-style: none;
	pointer-events: none;
}

/* Right-hand cluster (lang / theme / auth) */
.ss-nav-right {
	margin-left: auto;
	display: flex;
	gap: 12px;
	align-items: center;
}

/* RU/EN style segmented control (language dropdown trigger pill) */
.ss-lang {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 11px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink);
	font-family: var(--ss-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

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

.ss-lang .ss-lang-flag {
	width: 16px;
	height: 12px;
	object-fit: cover;
}

/* Language dropdown menu items */
.ss-lang-menu {
	font-family: var(--ss-text);
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp-2);
	border-radius: 0;
}

.ss-lang-menu a {
	color: var(--ss-ink-2);
}

.ss-lang-menu a:hover,
.ss-lang-menu a.active {
	color: var(--ss-red);
	background: transparent;
}

/* Theme toggle pill (keeps id="theme-toggle" so site.js still drives it) */
.ss-theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 34px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink-3);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: border-color .2s ease, color .2s ease;
}

.ss-theme-toggle:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
}

/* CTA buttons */
.ss-btn,
.ss-btn-dark {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 38px;
	padding: 0 18px;
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	white-space: nowrap;
	border: 1.5px solid var(--ss-ink);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Outline button */
.ss-btn {
	background: transparent;
	color: var(--ss-ink);
}

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

/* Solid (ink) button -> red on hover, the prototype's primary CTA */
.ss-btn-dark {
	background: var(--ss-ink);
	border-color: var(--ss-ink);
	color: var(--ss-stamp);
}

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

/* Mobile hamburger trigger */
.ss-burger {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1.5px solid var(--ss-ink);
	background: transparent;
	color: var(--ss-ink);
	cursor: pointer;
}

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

/* =========================================================================
   FOOTER (dark postal footer with diagonal stripe top border)
   ========================================================================= */
.ss-footer {
	/* Follow the active theme: a light footer in the light theme and a dark footer in the dark
	   theme. Uses the page palette (paper background + ink text) so it never ends up
	   light-on-light or dark-on-dark; the diagonal stripe + top border keep it visually distinct
	   from the page body above. */
	background: var(--ss-paper-2);
	color: var(--ss-ink-2);
	padding: 52px 0 32px;
	position: relative;
}

.ss-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 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);
}

.ss-footer-inner {
	max-width: var(--ss-max);
	margin: 0 auto;
	padding: 0 32px;
}

.ss-footer-grid {
	display: grid;
	grid-template-columns: 2fr repeat(4, 1fr);
	gap: 36px;
	padding-top: 28px;
}

.ss-footer-brand .ss-logo-mark {
	width: 56px;
	height: 56px;
	border-color: var(--ss-ink);
	color: var(--ss-ink);
	font-size: 14px;
	margin-bottom: 18px;
}

.ss-footer-brand .ss-logo-mark::after {
	inset: 4px;
	border-color: var(--ss-ink);
}

.ss-footer-brand-name {
	font-family: var(--ss-display);
	font-size: 15px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 12px;
}

.ss-footer-blurb {
	color: var(--ss-ink-3);
	font-family: var(--ss-serif);
	font-size: 16px;
	max-width: 34ch;
	margin: 0;
	line-height: 1.55;
}

/* Copyright sits under the blurb in the brand column; a hairline rule separates the two
   (without it the two serif paragraphs run together). */
.ss-footer-copy {
	max-width: 34ch;
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--ss-line);
}

.ss-footer-col h4,
.ss-footer-col h5 {
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ss-ink);
	font-weight: 700;
	margin: 0 0 16px;
}

.ss-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15.5px;
	font-family: var(--ss-serif);
}

.ss-footer-col a {
	color: var(--ss-ink-3);
	transition: color .2s ease;
}

.ss-footer-col a:hover {
	color: var(--ss-red);
}

/* Social icons row inside a footer column */
.ss-footer-social {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}

.ss-footer-social a {
	color: var(--ss-ink-3);
}

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

.ss-footer-bottom {
	border-top: 1px solid var(--ss-line);
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-family: var(--ss-display);
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8a7858;
	font-weight: 600;
}

/* 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;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1023px) {
	.ss-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
}

@media (max-width: 640px) {
	.ss-nav-inner {
		padding: 0 18px;
		gap: 14px;
	}

	.ss-logo-text {
		display: none;
	}

	.ss-footer-grid {
		/* Two columns (not one) so the link lists pair up instead of forming one very long strip. */
		grid-template-columns: 1fr 1fr;
		gap: 20px 24px;
		text-align: left;
	}

	.ss-footer-brand {
		grid-column: 1 / -1;
	}
}

/* =========================================================================
   PHASE 2 - PAGE BODIES (home / pricing / products / product)

   Shared "postal newspaper" primitives reused across the marketing pages:
   section wrappers, eyebrow labels, display headings, paper-card frames,
   stamps, postal CTA buttons. Built on the same design-system variables as
   the chrome above so the winter (light) / sunset (dark) toggle keeps working.
   ========================================================================= */

/* ---- Page-level typographic primitives ---- */
.ss-page {
	color: var(--ss-ink-2);
	font-family: var(--ss-text);
}

.ss-wrap {
	max-width: var(--ss-max);
	margin: 0 auto;
	padding: 0 32px;
}

.ss-section {
	/* Tightened from 96px: the original spacing left large empty gaps and wasted vertical space. */
	padding: 56px 0;
}

.ss-section--dashed {
	border-top: 1px dashed var(--ss-line);
}

/* Small uppercase eyebrow label with the red dash + dot from the prototype. */
.ss-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ss-red);
	font-weight: 600;
}

.ss-eyebrow::before {
	content: "";
	width: 28px;
	height: 1.5px;
	background: var(--ss-red);
}

.ss-eyebrow::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 99px;
	background: var(--ss-red);
}

/* Italic serif display heading. */
.ss-display {
	font-family: var(--ss-serif);
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.02;
	color: var(--ss-ink);
	margin: 0;
}

.ss-display--xl {
	font-size: clamp(46px, 6.4vw, 84px);
	line-height: 0.98;
	letter-spacing: -0.025em;
}

.ss-display--lg {
	font-size: clamp(34px, 4.4vw, 56px);
}

.ss-display--md {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.05;
}

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

.ss-section-head {
	max-width: 880px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 56px;
}

/* ---- Postal CTA buttons (page bodies; bigger than the nav .ss-btn) ---- */
.ss-cta {
	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;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

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

.ss-cta--solid {
	background: var(--ss-ink);
	border-color: var(--ss-ink);
	color: var(--ss-stamp);
}

.ss-cta--solid:hover {
	background: var(--ss-red);
	border-color: var(--ss-red);
	color: #fff;
}

.ss-cta--red {
	background: var(--ss-red);
	border-color: var(--ss-red);
	color: #fff;
}

.ss-cta--red:hover {
	background: var(--ss-red-2);
	border-color: var(--ss-red-2);
	color: #fff;
}

.ss-cta--sm {
	height: 44px;
	padding: 0 18px;
	font-size: 11px;
}

/* Paper card frame used for grouped content blocks. */
.ss-paper {
	background: var(--ss-stamp);
	border: 1.5px solid var(--ss-ink);
	padding: 40px;
	position: relative;
}

/* =========================================================================
   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);
	gap: 60px;
	align-items: center;
}

.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(3, 1fr);
	gap: 24px;
	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;
}

/* 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 now: the items inside (product / blog cards) carry the stamp
	   look themselves, so the 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,
	   same approach as .ss-footer. */
	--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;
}

.ss-input {
	height: 46px;
	padding: 0 14px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink);
	font-family: var(--ss-text);
	font-size: 15px;
	width: 100%;
}

.ss-input:focus {
	outline: none;
	border-color: var(--ss-red);
}

/* Category filter chips / sidebar links. */
.ss-chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ss-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	color: var(--ss-ink-2);
	border: 1.5px solid var(--ss-line);
	padding: 8px 14px;
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

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

.ss-chip.active {
	background: var(--ss-ink);
	color: var(--ss-stamp);
	border-color: var(--ss-ink);
}

/* 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 blurred 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-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1.5px solid var(--ss-line);
}

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

.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);
}

.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;
}

/* Pagination (postal style). */
.ss-pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 36px;
	flex-wrap: wrap;
}

.ss-pager a,
.ss-pager span {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1.5px solid var(--ss-line);
	background: var(--ss-stamp);
	color: var(--ss-ink-2);
	font-family: var(--ss-display);
	font-size: 12px;
	letter-spacing: 0.06em;
	font-weight: 700;
	text-transform: uppercase;
}

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

.ss-pager .active {
	background: var(--ss-ink);
	color: var(--ss-stamp);
	border-color: var(--ss-ink);
}

/* =========================================================================
   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);
}

.ss-tag {
	font-family: var(--ss-display);
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ss-red);
	border: 1.5px solid var(--ss-red);
	padding: 4px 8px 3px;
	display: inline-block;
}

/* The pricing comparison table (reuses .pricing-table id from controller JS,
   restyled to the postal look). The original markup keeps its class names. */
.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 label line up vertically (vertical-align on the chip
	   left it sitting slightly high against the short uppercase text). */
	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 and was 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;
}

.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);
}

/* Prose body for the product description (rendered HTML). */
.ss-prose {
	color: var(--ss-ink-2);
	font-family: var(--ss-text);
	font-size: 17px;
	line-height: 1.6;
	/* One shared reading width for all long-form content (article body, product
	   description, dynamic/company pages) so the text column is consistent across
	   the site instead of tiny on some pages and full-bleed on others. */
	max-width: var(--ss-read, 820px);
	margin-left: auto;
	margin-right: auto;
	/* Long unbreakable tokens (the ::iframe{url=...} / @diagram(URL) syntax examples, raw
	   code) must wrap instead of forcing horizontal overflow that shifts the whole layout.
	   `anywhere` (inherited by descendants) also lets a table cell shrink, so a long value
	   can't stretch the table past its column. */
	overflow-wrap: anywhere;
}

.ss-prose h1,
.ss-prose h2,
.ss-prose h3,
.ss-prose h4 {
	font-family: var(--ss-serif);
	font-style: italic;
	color: var(--ss-ink);
}

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

.ss-prose img {
	max-width: 100%;
	border: 1px solid var(--ss-line);
}

/* Section divider: authored as `---` between content sections. The browser default
   hr is a near-invisible hairline with no spacing, so give it the table-border colour
   and generous vertical margins to read as a real separator. */
.ss-prose hr {
	border: 0;
	border-top: 1px solid var(--ss-line);
	margin: 2.5rem 0;
}

/* Fenced code blocks default to `white-space: pre`, which never wraps — a long line (e.g. an
   ::iframe{url=...} / @diagram(URL) example) then overflows the reading column and pushes the
   whole page sideways. Keep the authored line breaks/indentation but allow wrapping, and break
   long unbreakable tokens, so a code block can never widen past its column. */
.ss-prose pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Block-level examples (headings, blockquotes, task lists, hr) shown inside a table
   "Результат" cell must sit flush so they don't blow up the row height. */
.ss-prose td > :first-child { margin-top: 0; }
.ss-prose td > :last-child { margin-bottom: 0; }
.ss-prose td hr { margin: 0.4rem 0; }

/* Embedded videos/iframes (::iframe, video embeds) carry fixed width/height attributes
   from the content, which left them tiny in the reading column. Make them fill the
   column at a 16:9 ratio regardless of the authored size. */
.ss-prose iframe,
.ss-prose video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--ss-line);
}

.ss-prose ul {
	list-style: disc;
	padding-left: 1.4em;
}

.ss-prose ol {
	list-style: decimal;
	padding-left: 1.4em;
}

.ss-prose table {
	width: 100%;
	border-collapse: collapse;
}

.ss-prose th,
.ss-prose td {
	border: 1px solid var(--ss-line);
	padding: 8px 10px;
	text-align: left;
}

.ss-prose th {
	background: var(--ss-stamp);
}

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

.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;
}

.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);
}

.ss-badge {
	font-family: var(--ss-display);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 2px 7px;
	background: var(--ss-teal);
	color: #fff;
}

/* 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-note {
	background: var(--ss-stamp-2);
	border: 1.5px solid var(--ss-ink);
	padding: 22px 26px;
}

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

/* =========================================================================
   PHASE 2 - responsive
   ========================================================================= */
@media (max-width: 1023px) {
	.ss-hero-grid,
	.ss-detail-hero {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.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;
	}

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

@media (max-width: 640px) {
	.ss-wrap {
		padding: 0 18px;
	}

	.ss-section {
		/* Was 64px (more than desktop) which left a big empty gap under the header on phones. */
		padding: 28px 0;
	}

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

	.ss-stats {
		grid-template-columns: 1fr;
		gap: 18px;
	}

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

/* =========================================================================
   PHASE 3 - AUTH / ACCOUNT / FORMS (postal paper forms)

   Reuses the design-system variables + .ss-paper / .ss-input / .ss-cta /
   .ss-eyebrow / .ss-display primitives above. Adds form-specific helpers
   (labels, fields, checkboxes, alerts, tables, tabs) in the same ss- scheme
   so the winter (light) / sunset (dark) toggle keeps working.
   ========================================================================= */

/* ---- Form scaffolding ---- */
.ss-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ss-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Uppercase letter-spaced postal label. */
.ss-label {
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ss-ink-2);
}

/* .ss-input already defined above (store search). Add a textarea/select that
   share the same frame, plus a focus-friendly placeholder color. */
.ss-input::placeholder,
.ss-textarea::placeholder {
	color: var(--ss-ink-4);
}

.ss-textarea {
	padding: 12px 14px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink);
	font-family: var(--ss-text);
	font-size: 15px;
	width: 100%;
	resize: vertical;
	min-height: 120px;
	line-height: 1.5;
}

.ss-textarea:focus,
.ss-select:focus {
	outline: none;
	border-color: var(--ss-red);
}

.ss-select {
	height: 46px;
	padding: 0 14px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink);
	font-family: var(--ss-text);
	font-size: 15px;
	width: 100%;
}

/* Input with a trailing toggle button (password show/hide). */
.ss-input-wrap {
	position: relative;
}

.ss-input-wrap .ss-input {
	padding-right: 46px;
}

.ss-input-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: var(--ss-ink-3);
	cursor: pointer;
	padding: 6px;
	line-height: 1;
}

.ss-input-toggle:hover {
	color: var(--ss-red);
}

/* Input-group: prefix box + input glued together (telegram/facebook/vk). */
.ss-input-group {
	display: flex;
	align-items: stretch;
}

.ss-input-group .ss-input-prefix {
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	border: 1.5px solid var(--ss-ink);
	border-right: 0;
	background: var(--ss-paper-2);
	color: var(--ss-ink-3);
	font-family: var(--ss-mono);
	font-size: 12.5px;
	white-space: nowrap;
}

.ss-input-group .ss-input {
	border-left: 0;
}

/* Read-only "copy" group (token / nuget url / referral link). */
.ss-copy-group {
	display: flex;
	align-items: stretch;
}

.ss-copy-group .ss-input {
	font-family: var(--ss-mono);
	font-size: 13px;
	background: var(--ss-paper-2);
	border-right: 0;
}

.ss-copy-group .ss-copy-btn {
	display: inline-grid;
	place-items: center;
	min-width: 46px;
	padding: 0 12px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink-3);
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}

.ss-copy-group .ss-copy-btn:hover {
	color: var(--ss-red);
	border-color: var(--ss-red);
}

.ss-field-error {
	font-family: var(--ss-text);
	font-size: 13px;
	color: var(--ss-red);
	line-height: 1.4;
}

.ss-hint {
	font-family: var(--ss-mono);
	font-size: 11.5px;
	color: var(--ss-ink-3);
	line-height: 1.4;
}

/* Postal checkbox / consent row. */
.ss-check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-family: var(--ss-text);
	font-size: 14.5px;
	color: var(--ss-ink-2);
	line-height: 1.4;
}

.ss-check input[type="checkbox"] {
	width: 17px;
	height: 17px;
	accent-color: var(--ss-red);
	flex-shrink: 0;
	margin: 0;
}

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

/* 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-divider {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px dashed var(--ss-line);
}

.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;
}

.ss-link {
	color: var(--ss-red);
	font-weight: 600;
	transition: color .2s ease;
}

.ss-link:hover {
	color: var(--ss-red-2);
	text-decoration: underline;
}

/* ---- Alerts (postal note look) ---- */
.ss-alert {
	border: 1.5px solid var(--ss-ink);
	padding: 14px 18px;
	margin-bottom: 22px;
	font-family: var(--ss-text);
	font-size: 14.5px;
	background: var(--ss-stamp-2);
	color: var(--ss-ink-2);
}

.ss-alert--error {
	border-color: var(--ss-red);
	color: var(--ss-red);
	background: color-mix(in srgb, var(--ss-red) 8%, var(--ss-stamp));
}

.ss-alert--success {
	border-color: var(--ss-teal);
	color: var(--ss-teal);
	background: color-mix(in srgb, var(--ss-teal) 8%, var(--ss-stamp));
}

/* =========================================================================
   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;
}

.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-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ss-social-btn {
	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;
}

/* 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;
}

/* Postal data table (subscriptions, licenses, tokens, payments...). */
.ss-table-wrap {
	overflow-x: auto;
	border: 1.5px solid var(--ss-ink);
}

.ss-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ss-text);
	font-size: 14px;
	color: var(--ss-ink-2);
	background: var(--ss-stamp);
}

.ss-table th {
	background: var(--ss-paper);
	color: var(--ss-ink);
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1.5px solid var(--ss-ink);
}

.ss-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--ss-line);
	color: var(--ss-ink-2);
}

.ss-table tr:last-child td {
	border-bottom: 0;
}

.ss-table-link {
	color: var(--ss-red);
	font-weight: 600;
}

.ss-table-link:hover {
	text-decoration: underline;
}

.ss-muted {
	color: var(--ss-ink-3);
}

.ss-ok {
	color: var(--ss-teal);
	font-weight: 600;
}

.ss-err {
	color: var(--ss-red);
	font-weight: 600;
}

/* 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, which previously
   rendered the raw checkbox AND an unstyled slider span side by side (the "two circles" bug). */
.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, so it looked off-theme. Remap those variables to the postal palette locally (keeps it
   theme-adaptive without touching the component markup) and drop the rounded corners 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;
}

.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: UserInfo.StatusClass renders "online" / "away" / "offline".
   Without these the dot only had a border and never filled in (green for an online user). */
.ss-user-card .online {
	background: var(--ss-green, #2f7d32);
}

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

.ss-user-card .offline {
	background: rgba(120, 120, 120, 0.55);
}

/* =========================================================================
   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;
}

/* =========================================================================
   PHASE 3 - responsive
   ========================================================================= */
@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;
	}
}

/* =========================================================================
   PHASE 4 - COMMUNITY / FORUM (topics list, topic+comments, search, chat,
   private messages, conversation, topic editor). Reuses the design-system
   variables + .ss-paper / .ss-input / .ss-cta / .ss-chip / .ss-pager / form
   primitives above so the winter (light) / sunset (dark) toggle keeps working.
   ========================================================================= */

/* ---- Breadcrumbs ---- */
.ss-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-family: var(--ss-mono);
	font-size: 12px;
	color: var(--ss-ink-3);
	margin-bottom: 22px;
}

.ss-crumb-sep {
	color: var(--ss-ink-4);
}

/* ---- 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;
	transition: transform .26s cubic-bezier(.2, .7, .2, 1), box-shadow .26s ease;
}

.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;
}

/* Empty-state paper block. */
.ss-empty {
	text-align: center;
	color: var(--ss-ink-3);
	font-size: 16px;
}

/* ---- 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);
}

.ss-pager-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.ss-pager-ellipsis {
	border: 0 !important;
	background: transparent !important;
}

/* ---- 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;
}

/* 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 img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	display: block;
}

.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);
}

/* The reply box hosts the full-width rich editor with the Send button below it, right-aligned —
   a horizontal row only fit the old single-line textarea and left the editor narrow with the
   button floating off to the side. */
.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 GPT)
   ========================================================================= */
.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;
}

.ss-chat-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ss-mono);
	font-size: 11px;
	color: var(--ss-teal);
}

.ss-chat-dot {
	width: 7px;
	height: 7px;
	border-radius: 99px;
	background: var(--ss-teal);
}

.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;
}

/* =========================================================================
   PHASE 4 - responsive
   ========================================================================= */
@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%;
	}
}

/* =========================================================================
   PHASE 5 - MISC PAGES + SHARED COMPONENTS + CHROME (cookie / drawer)

   The final batch: code converter, video, bug statistics, error page,
   plus the shared view-components (footer menus, social icons, exchange
   logos) and the deferred chrome (cookie notice tape, mobile drawer).
   Built on the same design-system variables so the winter (light) /
   sunset (dark) toggle keeps working.
   ========================================================================= */

/* ---- 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;
	}
}

/* =========================================================================
   SHARED VIEW-COMPONENTS
   ========================================================================= */

/* ---- Footer / drawer menu groups (vc:menu Default with children) ---- */
.ss-menu-group .ss-menu-summary {
	cursor: pointer;
	list-style: none;
}

.ss-menu-group .ss-menu-summary::-webkit-details-marker {
	display: none;
}

.ss-menu-sub {
	list-style: none;
	padding: 8px 0 0 14px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ---- Social icons (vc:social) - framed postal stamp in the dark footer ---- */
.ss-social-icon {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1.5px solid color-mix(in srgb, var(--ss-stamp) 40%, transparent);
	transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.ss-social-icon:hover {
	border-color: var(--ss-highlight);
	transform: translateY(-2px);
}

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

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

.ss-logo-cell {
	display: grid;
	place-items: center;
	width: 100%;
	padding: 14px;
	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: 34px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* =========================================================================
   COOKIE NOTICE (postal tape pinned to the bottom)
   ========================================================================= */
.ss-cookie {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 90;
	background: var(--ss-ink);
	color: var(--ss-stamp);
	border-top: 3px solid var(--ss-red);
	padding: 18px 0;
	box-shadow: 0 -8px 24px rgba(50, 30, 10, 0.18);
}

.ss-cookie-inner {
	max-width: var(--ss-max);
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.ss-cookie-text {
	margin: 0;
	font-family: var(--ss-text);
	font-size: 14.5px;
	color: color-mix(in srgb, var(--ss-stamp) 88%, transparent);
	line-height: 1.5;
}

/* The solid CTA sits on the dark tape; keep it readable. */
.ss-cookie .ss-cta--solid {
	background: var(--ss-stamp);
	border-color: var(--ss-stamp);
	color: var(--ss-ink);
}

.ss-cookie .ss-cta--solid:hover {
	background: var(--ss-red);
	border-color: var(--ss-red);
	color: #fff;
}

@media (max-width: 768px) {
	.ss-cookie-inner {
		flex-direction: column;
		text-align: center;
		gap: 14px;
	}
}

/* =========================================================================
   MOBILE DRAWER (postal paper sidebar) - DaisyUI .drawer mechanics preserved
   ========================================================================= */
.ss-drawer {
	list-style: none;
	min-height: 100%;
	width: 16rem;
	margin: 0;
	padding: 96px 18px 24px;
	background: var(--ss-paper-2);
	border-right: 1.5px solid var(--ss-ink);
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	position: relative;
}

/* Close (X) button pinned to the top-left of the mobile drawer, below the notice tape line. */
.ss-drawer-close {
	position: absolute;
	top: 50px;
	left: 22px;
	padding: 0;
}

/* ── Shared modal dialog (ssAlert / ssConfirm / ssPrompt) ───────────────── */
.ss-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 16, 10, 0.5);
}

.ss-modal {
	width: 100%;
	max-width: 420px;
	background: var(--ss-paper-2);
	border: 1.5px solid var(--ss-ink);
	box-shadow: 8px 8px 0 rgba(20, 16, 10, 0.18);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ss-modal-title {
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
}

.ss-modal-msg {
	font-family: var(--ss-text);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ss-ink-2);
	white-space: pre-wrap;
}

.ss-modal-input {
	width: 100%;
}

.ss-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 4px;
}

.ss-drawer-close-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--ss-ink);
	color: var(--ss-ink);
	background: transparent;
	cursor: pointer;
}

.ss-drawer-close-btn:hover {
	color: var(--ss-red);
	border-color: var(--ss-red);
}

.ss-drawer a {
	display: block;
	padding: 11px 14px;
	color: var(--ss-ink-2);
	transition: background-color .2s ease, color .2s ease;
}

.ss-drawer a:hover {
	background: var(--ss-stamp);
	color: var(--ss-red);
}

/* vc:menu Default groups inside the drawer. */
.ss-drawer .ss-menu-summary {
	display: block;
	padding: 11px 14px;
	color: var(--ss-ink);
}

.ss-drawer .ss-menu-summary:hover {
	color: var(--ss-red);
}

.ss-drawer .ss-menu-sub {
	padding-left: 24px;
	gap: 2px;
}

.ss-drawer .ss-menu-sub a {
	font-size: 12px;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--ss-text);
}

.ss-drawer-divider {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1.5px solid var(--ss-line);
	list-style: none;
}

/* ===== Syntax highlighting (highlight.js, themed with postal tokens) =====
   highlight.js only adds .hljs-* classes; colors live here and reference --ss-* so they
   adapt to the active theme automatically. No hljs theme stylesheet is loaded. */
.ss-prose pre code.hljs {
	display: block;
	background: none;
	padding: 0;
	color: var(--ss-ink-2);
}

.hljs { color: var(--ss-ink-2); background: transparent; }
.hljs-comment, .hljs-quote { color: var(--ss-ink-4); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-doctag { color: var(--ss-blue); }
.hljs-tag, .hljs-name, .hljs-meta-keyword { color: var(--ss-blue); }
.hljs-built_in, .hljs-title, .hljs-title.class_, .hljs-title.function_, .hljs-class .hljs-title { color: var(--ss-red); }
.hljs-string, .hljs-meta .hljs-string, .hljs-regexp, .hljs-addition { color: var(--ss-teal); }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link { color: var(--ss-postmark); }
.hljs-type, .hljs-params, .hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: var(--ss-ink-2); }
.hljs-meta, .hljs-comment.hljs-doctag { color: var(--ss-ink-3); }
.hljs-deletion { color: var(--ss-red); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* 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; }

/* Honour the legacy <ol type> attribute in rendered content: the CSS reset drops list markers, so a
   list-style-type has to be set explicitly or type="a"/"i" fall back to plain numbers. */
.ss-prose ol[type="1"], .prose ol[type="1"] { list-style-type: decimal; }
.ss-prose ol[type="a"], .prose ol[type="a"] { list-style-type: lower-alpha; }
.ss-prose ol[type="A"], .prose ol[type="A"] { list-style-type: upper-alpha; }
.ss-prose ol[type="i"], .prose ol[type="i"] { list-style-type: lower-roman; }
.ss-prose ol[type="I"], .prose ol[type="I"] { list-style-type: upper-roman; }