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

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

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

/* ---- 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);
	color: var(--ss-ink);
}

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

.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;
	color: var(--ss-ink-3);
	font-weight: 400;
	margin-left: 8px;
}

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

/* 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 {
	background: var(--ss-ink);
	color: var(--ss-stamp);
	padding: 80px 0 36px;
	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;
	margin-bottom: 56px;
}

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

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

.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: #c9b78f;
	font-family: var(--ss-serif);
	font-size: 15px;
	max-width: 34ch;
	margin: 0;
	line-height: 1.5;
}

.ss-footer-col h4,
.ss-footer-col h5 {
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ss-stamp);
	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: 14.5px;
	font-family: var(--ss-serif);
}

.ss-footer-col a {
	color: #c9b78f;
	transition: color .2s ease;
}

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

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

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

.ss-footer-bottom {
	border-top: 1px solid #3a2e22;
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-family: var(--ss-display);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9a8868;
	font-weight: 600;
}

/* =========================================================================
   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 {
		grid-template-columns: 1fr;
		gap: 24px;
		text-align: left;
	}
}

/* =========================================================================
   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 {
	padding: 96px 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;
}

.ss-hero-stamp {
	position: relative;
	aspect-ratio: 1 / 1.12;
	display: flex;
	flex-direction: column;
	padding: 30px;
	background: var(--ss-stamp-2);
	border: 1.5px solid var(--ss-ink);
	box-shadow: 0 3px 0 rgba(50, 30, 10, 0.06), 0 22px 44px rgba(50, 30, 10, 0.12);
}

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

.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 {
	flex: 1;
	margin: 18px 4px 14px;
	display: grid;
	place-items: center;
	border: 1.5px solid var(--ss-ink);
	background:
		repeating-linear-gradient(0deg, transparent 0 19px, color-mix(in srgb, var(--ss-ink) 6%, transparent) 19px 20px),
		var(--ss-stamp-2);
	position: relative;
	z-index: 2;
	padding: 14px;
}

.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 {
	background: var(--ss-stamp);
	border: 1.5px solid var(--ss-ink);
	padding: 32px;
	position: relative;
}

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

/* 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);
	box-shadow: 0 18px 34px rgba(50, 30, 10, 0.14);
}

.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(3, 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;
	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;
}

.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);
	text-align: left;
	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: 8px;
}

.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;
	max-width: 80ch;
}

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

.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);
	box-shadow: 0 18px 34px rgba(50, 30, 10, 0.14);
}

.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: var(--ss-stamp);
	border: 1.5px solid var(--ss-ink);
	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;
}

.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 {
		padding: 64px 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 {
	position: sticky;
	top: 90px;
	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 {
	font-size: 22px;
	flex-shrink: 0;
	line-height: 1.2;
}

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

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

.ss-profile-nav {
	position: sticky;
	top: 90px;
	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);
}

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

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

/* Profile avatar block. */
.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(auto-fill, minmax(360px, 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;
}

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

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

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

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

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

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

	.ss-profile-nav {
		position: static;
		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;
	}
}

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

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

.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)
   ========================================================================= */
.ss-article {
	max-width: 1000px;
	margin: 0 auto;
	padding: 44px 48px;
}

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

.ss-article-title {
	margin-bottom: 24px;
}

.ss-article-meta {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: start;
}

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

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

.ss-article-author-name {
	font-family: var(--ss-display);
	font-size: 16px;
	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: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-end;
	font-family: var(--ss-mono);
	font-size: 12.5px;
	color: var(--ss-ink-3);
}

.ss-article-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.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: 1fr 1fr;
	gap: 32px;
	margin-bottom: 36px;
	padding-bottom: 28px;
	border-bottom: 1px dashed var(--ss-line);
}

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

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

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

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

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

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

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

/* =========================================================================
   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-article {
		padding: 32px 24px;
	}

	.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 {
		grid-template-columns: 1fr;
	}

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

	.ss-article-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 auto 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: 80px 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;
}

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